'use client'

import { useState, useEffect } from 'react'

// Available timeframes for analysis (matching automation-v2 format)
const timeframes = [
  { label: '5m', value: '5' },
  { label: '15m', value: '15' },
  { label: '30m', value: '30' },
  { label: '1h', value: '60' },
  { label: '2h', value: '120' },
  { label: '4h', value: '240' },
  { label: '1d', value: 'D' },
]

// Intelligent delay mapping based on timeframe (optimize ChatGPT budget)
const ANALYSIS_DELAYS = {
  '5': 5 * 60 * 1000,    // 5m chart: analyze every 5 minutes
  '15': 15 * 60 * 1000,  // 15m chart: analyze every 15 minutes
  '30': 30 * 60 * 1000,  // 30m chart: analyze every 30 minutes
  '60': 60 * 60 * 1000,  // 1h chart: analyze every 1 hour
  '120': 2 * 60 * 60 * 1000, // 2h chart: analyze every 2 hours
  '240': 4 * 60 * 60 * 1000, // 4h chart: analyze every 4 hours
  'D': 24 * 60 * 60 * 1000,  // 1d chart: analyze once per day
}

export default function SafePaperTradingPage() {
  const [symbol, setSymbol] = useState('SOLUSD')
  const [selectedTimeframes, setSelectedTimeframes] = useState(['60']) // Default to 1h
  const [loading, setLoading] = useState(false)
  const [currentAnalysis, setCurrentAnalysis] = useState(null)
  const [paperBalance, setPaperBalance] = useState(1000)
  const [paperTrades, setPaperTrades] = useState([])
  const [analysisHistory, setAnalysisHistory] = useState([])
  const [error, setError] = useState(null)
  const [learningInsights, setLearningInsights] = useState(null)
  const [showDetailedAnalysis, setShowDetailedAnalysis] = useState(false)
  const [continuousLearning, setContinuousLearning] = useState(false)
  const [autoExecuteTrades, setAutoExecuteTrades] = useState(false) // New: Auto-execute trades based on AI recommendations
  const [learningInterval, setLearningInterval] = useState(null)
  const [lastAnalysisTime, setLastAnalysisTime] = useState(null)
  const [nextAnalysisTime, setNextAnalysisTime] = useState(null)
  const [countdownTimer, setCountdownTimer] = useState(null)
  const [timeRemaining, setTimeRemaining] = useState(0)

  // Load persisted analysis data on component mount
  useEffect(() => {
    const loadPersistedData = () => {
      try {
        const savedAnalysis = localStorage.getItem('safePaperTrading_currentAnalysis')
        const savedTrades = localStorage.getItem('safePaperTrading_paperTrades')
        const savedBalance = localStorage.getItem('safePaperTrading_paperBalance')
        const savedHistory = localStorage.getItem('safePaperTrading_analysisHistory')
        const savedLearningInsights = localStorage.getItem('safePaperTrading_learningInsights')
        const savedContinuousLearning = localStorage.getItem('safePaperTrading_continuousLearning')
        const savedAutoExecute = localStorage.getItem('safePaperTrading_autoExecute')
        
        if (savedAnalysis) {
          const parsedAnalysis = JSON.parse(savedAnalysis)
          // Check if the saved analysis is stale (older than 2 hours)
          const analysisAge = Date.now() - new Date(parsedAnalysis.timestamp).getTime()
          const twoHours = 2 * 60 * 60 * 1000
          
          if (analysisAge > twoHours) {
            console.log('📂 Found stale analysis data (>2 hours old), will fetch fresh data')
            localStorage.removeItem('safePaperTrading_currentAnalysis')
            // Trigger fresh analysis after component loads
            setTimeout(() => {
              console.log('🔄 Fetching fresh analysis to replace stale data')
              runSafeAnalysis(false)
            }, 5000)
          } else {
            setCurrentAnalysis(parsedAnalysis)
            console.log('📂 Restored recent analysis from localStorage')
          }
        } else {
          // No saved analysis, fetch fresh data
          setTimeout(() => {
            console.log('🔄 No saved analysis found, fetching fresh data')
            runSafeAnalysis(false)
          }, 3000)
        }
        
        if (savedTrades) {
          const parsedTrades = JSON.parse(savedTrades)
          setPaperTrades(parsedTrades)
          console.log(`📂 Restored ${parsedTrades.length} paper trades`)
        }
        
        if (savedBalance) {
          const parsedBalance = parseFloat(savedBalance)
          setPaperBalance(parsedBalance)
          console.log(`📂 Restored paper balance: $${parsedBalance}`)
        }
        
        if (savedHistory) {
          const parsedHistory = JSON.parse(savedHistory)
          setAnalysisHistory(parsedHistory)
          console.log(`📂 Restored ${parsedHistory.length} analysis history entries`)
        }
        
        if (savedLearningInsights) {
          const parsedInsights = JSON.parse(savedLearningInsights)
          setLearningInsights(parsedInsights)
          console.log('📂 Restored learning insights from localStorage')
        }
        
        if (savedContinuousLearning === 'true') {
          console.log('📂 Found continuous learning was active - restarting...')
          setContinuousLearning(true)
          // Restart continuous learning after a short delay to ensure component is ready
          setTimeout(() => {
            console.log('� Restarting continuous learning from localStorage')
            startContinuousLearning()
          }, 3000) // Increased delay to ensure everything is loaded
        }
      } catch (error) {
        console.error('⚠️ Error loading persisted data:', error)
        // Clear corrupted data
        localStorage.removeItem('safePaperTrading_currentAnalysis')
        localStorage.removeItem('safePaperTrading_paperTrades')
        localStorage.removeItem('safePaperTrading_paperBalance')
        localStorage.removeItem('safePaperTrading_analysisHistory')
        localStorage.removeItem('safePaperTrading_learningInsights')
        localStorage.removeItem('safePaperTrading_continuousLearning')
      }
    }
    
    loadPersistedData()
    
    // Load auto-execute setting
    try {
      const savedAutoExecute = localStorage.getItem('safePaperTrading_autoExecute')
      if (savedAutoExecute === 'true') {
        console.log('📂 Found auto-execute was enabled - restoring...')
        setAutoExecuteTrades(true)
      }
    } catch (error) {
      console.error('⚠️ Error loading auto-execute setting:', error)
    }

    // Check if continuous learning should be active
    const checkContinuousLearningState = () => {
      try {
        const savedContinuousLearning = localStorage.getItem('safePaperTrading_continuousLearning')
        console.log('🔍 Checking continuous learning state:', savedContinuousLearning)
        if (savedContinuousLearning === 'true') {
          console.log('🔄 Restoring continuous learning state...')
          setContinuousLearning(true)
          setTimeout(() => {
            console.log('🎓 Starting continuous learning from restored state')
            startContinuousLearning()
          }, 2000)
        }
      } catch (error) {
        console.error('⚠️ Error checking continuous learning state:', error)
      }
    }

    // Check state after a short delay to ensure everything is loaded
    setTimeout(checkContinuousLearningState, 1000)
  }, [])

  // Persist analysis data whenever it changes
  useEffect(() => {
    if (currentAnalysis) {
      try {
        localStorage.setItem('safePaperTrading_currentAnalysis', JSON.stringify(currentAnalysis))
        console.log('💾 Persisted current analysis to localStorage')
      } catch (error) {
        console.error('⚠️ Error persisting current analysis:', error)
      }
    }
  }, [currentAnalysis])

  useEffect(() => {
    if (paperTrades.length >= 0) { // Always persist, even empty array
      try {
        localStorage.setItem('safePaperTrading_paperTrades', JSON.stringify(paperTrades))
        console.log(`💾 Persisted ${paperTrades.length} paper trades`)
      } catch (error) {
        console.error('⚠️ Error persisting paper trades:', error)
      }
    }
  }, [paperTrades])

  useEffect(() => {
    try {
      localStorage.setItem('safePaperTrading_paperBalance', paperBalance.toString())
      console.log(`💾 Persisted paper balance: $${paperBalance}`)
    } catch (error) {
      console.error('⚠️ Error persisting paper balance:', error)
    }
  }, [paperBalance])

  useEffect(() => {
    if (learningInsights) {
      try {
        localStorage.setItem('safePaperTrading_learningInsights', JSON.stringify(learningInsights))
        console.log('💾 Persisted learning insights to localStorage')
      } catch (error) {
        console.error('⚠️ Error persisting learning insights:', error)
      }
    }
  }, [learningInsights])

  // Persist continuous learning state
  useEffect(() => {
    try {
      localStorage.setItem('safePaperTrading_continuousLearning', continuousLearning.toString())
      console.log(`💾 Persisted continuous learning state: ${continuousLearning}`)
    } catch (error) {
      console.error('⚠️ Error persisting continuous learning state:', error)
    }
  }, [continuousLearning])

  // Persist auto-execute setting
  useEffect(() => {
    try {
      localStorage.setItem('safePaperTrading_autoExecute', autoExecuteTrades.toString())
      console.log(`💾 Persisted auto-execute setting: ${autoExecuteTrades}`)
    } catch (error) {
      console.error('⚠️ Error persisting auto-execute setting:', error)
    }
  }, [autoExecuteTrades])

  // Live countdown timer for continuous learning
  useEffect(() => {
    if (continuousLearning && nextAnalysisTime) {
      // Clear any existing countdown timer
      if (countdownTimer) {
        clearInterval(countdownTimer)
      }

      // Create new countdown timer that updates every second
      const countdown = setInterval(() => {
        const remaining = nextAnalysisTime - Date.now()
        if (remaining <= 0) {
          setTimeRemaining(0)
        } else {
          setTimeRemaining(remaining)
        }
      }, 1000)

      setCountdownTimer(countdown)

      // Initial calculation
      const remaining = nextAnalysisTime - Date.now()
      setTimeRemaining(remaining > 0 ? remaining : 0)

      return () => {
        if (countdown) {
          clearInterval(countdown)
        }
      }
    } else {
      // Clear countdown when not in continuous learning
      if (countdownTimer) {
        clearInterval(countdownTimer)
        setCountdownTimer(null)
      }
      setTimeRemaining(0)
    }
  }, [continuousLearning, nextAnalysisTime])

  // Clean up countdown on unmount
  useEffect(() => {
    return () => {
      if (countdownTimer) {
        clearInterval(countdownTimer)
      }
    }
  }, [])

  // Health check for continuous learning - ensure it's actually running
  useEffect(() => {
    if (continuousLearning) {
      const healthCheck = setInterval(() => {
        if (!learningInterval) {
          console.warn('⚠️ HEALTH CHECK: Continuous learning is ON but interval is missing - restarting...')
          restartContinuousLearning()
        } else {
          console.log('✅ HEALTH CHECK: Continuous learning interval is active')
        }
      }, 5 * 60 * 1000) // Check every 5 minutes

      return () => clearInterval(healthCheck)
    }
  }, [continuousLearning, learningInterval])

  // SAFETY: Only these timeframes allowed in paper trading
  const safeTimeframes = timeframes.map(tf => ({
    ...tf,
    riskLevel: tf.value === '5' || tf.value === '15' ? 'HIGH' : 
               tf.value === '30' || tf.value === '60' ? 'MEDIUM' : 'LOW'
  }))

  const settings = {
    riskPerTrade: 1.0,
    paperMode: true, // ALWAYS true - cannot be changed
    isolatedMode: true // ALWAYS true - completely isolated
  }

  const toggleTimeframe = (timeframe) => {
    setSelectedTimeframes(prev => 
      prev.includes(timeframe)
        ? prev.filter(tf => tf !== timeframe)
        : [...prev, timeframe]
    )
  }

  const calculateOptimalDelay = () => {
    if (selectedTimeframes.length === 0) return 60 * 60 * 1000 // Default 1 hour
    
    // Use the shortest timeframe as base, but not too frequent for budget optimization
    const shortestTf = selectedTimeframes.reduce((shortest, current) => {
      const currentDelay = ANALYSIS_DELAYS[current] || 60 * 60 * 1000
      const shortestDelay = ANALYSIS_DELAYS[shortest] || 60 * 60 * 1000
      return currentDelay < shortestDelay ? current : shortest
    })
    
    // Minimum 10 minutes delay to protect ChatGPT budget
    return Math.max(ANALYSIS_DELAYS[shortestTf] || 60 * 60 * 1000, 10 * 60 * 1000)
  }

  // Format countdown time for display
  const formatCountdown = (milliseconds) => {
    if (milliseconds <= 0) return 'Running soon...'
    
    const totalSeconds = Math.ceil(milliseconds / 1000)
    const hours = Math.floor(totalSeconds / 3600)
    const minutes = Math.floor((totalSeconds % 3600) / 60)
    const seconds = totalSeconds % 60
    
    if (hours > 0) {
      return `${hours}h ${minutes}m ${seconds}s`
    } else if (minutes > 0) {
      return `${minutes}m ${seconds}s`
    } else {
      return `${seconds}s`
    }
  }

  const startContinuousLearning = () => {
    if (learningInterval) {
      clearInterval(learningInterval)
    }
    
    const delay = calculateOptimalDelay()
    console.log(`🎓 Starting continuous learning with ${delay / 60000} minute intervals`)
    
    // Run first analysis immediately for faster feedback
    setTimeout(async () => {
      console.log('🔄 IMMEDIATE: Running first continuous learning analysis')
      console.log('📚 Running immediate learning analysis (paper trading mode)')
      try {
        await runSafeAnalysis(true) // Mark as continuous learning
      } catch (error) {
        console.error('❌ Error in immediate analysis:', error)
      }
    }, 5000) // 5 seconds delay for immediate feedback
    
    const interval = setInterval(async () => {
      console.log('🔄 Continuous learning cycle triggered')
      console.log(`📊 Current time: ${new Date().toLocaleTimeString()}`)
      
      // For safe paper trading, always run analysis regardless of positions
      // (since it's completely isolated and for learning purposes)
      console.log('📚 Running scheduled learning analysis (paper trading mode)')
      try {
        await runSafeAnalysis(true) // Mark as continuous learning
      } catch (error) {
        console.error('❌ Error in continuous learning cycle:', error)
        // Set next time even if there's an error to prevent stopping
        setNextAnalysisTime(Date.now() + delay)
      }
    }, delay)
    
    setLearningInterval(interval)
    setNextAnalysisTime(Date.now() + 5000) // Show immediate next time (5 seconds)
    
    console.log(`🎓 Continuous learning started - next analysis in 5 seconds, then every ${delay / 60000} minutes`)
  }

  const stopContinuousLearning = () => {
    if (learningInterval) {
      clearInterval(learningInterval)
      setLearningInterval(null)
      setNextAnalysisTime(null)
      console.log('🛑 Continuous learning stopped')
    }
  }

  const restartContinuousLearning = () => {
    console.log('🔄 Restarting continuous learning...')
    stopContinuousLearning()
    // Small delay to ensure cleanup
    setTimeout(() => {
      startContinuousLearning()
      console.log('✅ Continuous learning restarted successfully')
    }, 1000)
  }

  useEffect(() => {
    // Load paper trading data from localStorage
    const savedTrades = localStorage.getItem('safePaperTrades')
    const savedBalance = localStorage.getItem('safePaperBalance')
    
    if (savedTrades) {
      setPaperTrades(JSON.parse(savedTrades))
    }
    if (savedBalance) {
      setPaperBalance(parseFloat(savedBalance))
    }
    
    // Fetch AI learning status
    fetchLearningStatus()
    
    // Cleanup continuous learning on unmount
    return () => {
      if (learningInterval) {
        clearInterval(learningInterval)
      }
    }
  }, [])

  // Update continuous learning when timeframes change
  useEffect(() => {
    if (continuousLearning) {
      stopContinuousLearning()
      startContinuousLearning()
    }
  }, [selectedTimeframes])

  // Save to localStorage whenever data changes
  useEffect(() => {
    localStorage.setItem('safePaperTrades', JSON.stringify(paperTrades))
    localStorage.setItem('safePaperBalance', paperBalance.toString())
  }, [paperTrades, paperBalance])

  const runSafeAnalysis = async (isContinuous = false) => {
    console.log(`🔄 ${isContinuous ? 'CONTINUOUS LEARNING' : 'BUTTON CLICKED'}: Starting safe analysis...`)
    console.log(`🎯 Analysis Type: ${isContinuous ? 'CONTINUOUS LEARNING' : 'MANUAL'} for ${symbol}`)
    console.log(`⏰ Current time: ${new Date().toLocaleString()}`)
    console.log(`📊 Selected timeframes: ${selectedTimeframes.join(', ')}`)
    
    if (isContinuous) {
      console.log(`🎓 This is a CONTINUOUS LEARNING cycle - automatic analysis`)
    }
    console.log(`📊 Selected timeframes: ${selectedTimeframes.join(', ')}`)
    
    setLoading(true)
    setError(null)
    setLastAnalysisTime(Date.now())
    
    try {
      console.log('📄 SAFE PAPER TRADING: Starting isolated analysis...')
      console.log('📋 Request data:', { 
        symbol, 
        selectedTimeframes, 
        mode: 'PAPER_ONLY', 
        paperTrading: true, 
        isolatedMode: true,
        isContinuous 
      })
      
      console.log(`🌐 Making API call to /api/paper-trading-safe...`)
      
      // SAFETY: Only call the isolated paper trading API
      const response = await fetch('/api/paper-trading-safe', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          symbol,
          selectedTimeframes,
          mode: 'PAPER_ONLY', // REQUIRED for safety
          paperTrading: true,
          isolatedMode: true,
          isContinuous
        })
      })

      console.log('📡 Response status:', response.status)
      console.log('📡 Response ok:', response.ok)

      if (!response.ok) {
        const errorText = await response.text()
        console.error('❌ Response error:', errorText)
        throw new Error(`Analysis failed: ${response.status} - ${errorText}`)
      }

      const result = await response.json()
      console.log('📊 Full API result:', result)
      
      if (!result.success) {
        throw new Error(result.error || 'Analysis failed')
      }

      console.log('✅ SAFE ANALYSIS COMPLETE:', result.analysis.recommendation)
      
      const analysisData = {
        ...result.analysis,
        timeframes: selectedTimeframes,
        analysisType: isContinuous ? 'CONTINUOUS_LEARNING' : 'MANUAL'
      }
      
      setCurrentAnalysis(analysisData)
      
      // Add to analysis history with timestamp
      const historyEntry = {
        ...analysisData,
        timestamp: new Date().toISOString(),
        symbol: symbol,
        timeframes: selectedTimeframes,
        analysisId: `analysis_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
      }
      
      // Keep only last 10 analyses in history
      setAnalysisHistory(prev => {
        const updated = [historyEntry, ...prev].slice(0, 10)
        try {
          localStorage.setItem('safePaperTrading_analysisHistory', JSON.stringify(updated))
          console.log(`💾 Persisted ${updated.length} analysis history entries`)
        } catch (error) {
          console.error('⚠️ Error persisting analysis history:', error)
        }
        return updated
      })
      
      // Update next analysis time for both manual and continuous learning
      if (continuousLearning) {
        const delay = calculateOptimalDelay()
        const nextTime = Date.now() + delay
        setNextAnalysisTime(nextTime)
        console.log(`⏰ Next analysis scheduled for: ${new Date(nextTime).toLocaleString()}`)
        console.log(`⏱️ Delay: ${delay / 60000} minutes`)
      }

      // AUTO-EXECUTE TRADES: If auto-execute is enabled and we have a strong recommendation, execute the trade
      console.log('🔍 Checking auto-execute conditions:', {
        autoExecuteTrades,
        recommendation: analysisData.recommendation,
        confidence: analysisData.confidence,
        hasAnalysisData: !!analysisData
      })
      
      if (autoExecuteTrades && analysisData.recommendation && analysisData.confidence >= 60) {
        const recommendation = analysisData.recommendation.toUpperCase()
        if (recommendation === 'BUY' || recommendation === 'SELL') {
          console.log(`🤖 AUTO-EXECUTE: ${recommendation} signal with ${analysisData.confidence}% confidence`)
          
          // Wait a moment for the analysis to fully update, then execute
          setTimeout(() => {
            try {
              executeSafePaperTrade(recommendation)
              console.log(`✅ AUTO-EXECUTED: ${recommendation} trade based on AI recommendation`)
            } catch (error) {
              console.error('❌ Auto-execute error:', error)
            }
          }, 1000)
        } else {
          console.log(`💡 AUTO-EXECUTE: HOLD signal (${recommendation}) - no trade executed`)
        }
      } else if (autoExecuteTrades) {
        console.log(`💡 AUTO-EXECUTE: Recommendation ${analysisData.recommendation} with ${analysisData.confidence}% confidence does not meet execution criteria (need BUY/SELL with ≥60% confidence)`)
      } else {
        console.log(`🔍 AUTO-EXECUTE: Disabled or no valid recommendation`)
      }
      
    } catch (error) {
      console.error('❌ Safe analysis error:', error)
      console.error('❌ Error stack:', error.stack)
      setError(error.message)
    } finally {
      setLoading(false)
      console.log('🏁 Analysis complete, loading set to false')
    }
  }

  const executeSafePaperTrade = (signal) => {
    if (!currentAnalysis) return

    const trade = {
      id: Date.now(),
      timestamp: new Date().toISOString(),
      symbol: currentAnalysis.symbol,
      timeframe: currentAnalysis.timeframe,
      side: signal,
      entryPrice: currentAnalysis.entry?.price || 100,
      stopLoss: currentAnalysis.stopLoss?.price,
      takeProfit: currentAnalysis.takeProfits?.tp1?.price,
      confidence: currentAnalysis.confidence,
      reasoning: currentAnalysis.reasoning,
      status: 'OPEN',
      momentumStatus: currentAnalysis.momentumStatus?.type,
      entryQuality: currentAnalysis.entryQuality?.score,
      paperMode: true,
      safeMode: true
    }

    // Calculate position size based on risk management
    const riskAmount = paperBalance * (settings.riskPerTrade / 100)
    const stopDistance = Math.abs(trade.entryPrice - (trade.stopLoss || trade.entryPrice * 0.95))
    trade.positionSize = Math.min(riskAmount / stopDistance, paperBalance * 0.1)

    setPaperTrades(prev => [trade, ...prev])
    
    console.log('📄 SAFE PAPER TRADE:', trade)
    alert(`✅ Safe Paper Trade: ${signal} ${trade.symbol} at $${trade.entryPrice}\\n💡 This is completely isolated - no real money at risk!`)
  }

  const closeSafePaperTrade = (tradeId, exitPrice) => {
    setPaperTrades(prev => prev.map(trade => {
      if (trade.id === tradeId && trade.status === 'OPEN') {
        const pnl = trade.side === 'BUY' 
          ? (exitPrice - trade.entryPrice) * (trade.positionSize / trade.entryPrice)
          : (trade.entryPrice - exitPrice) * (trade.positionSize / trade.entryPrice)
        
        const isWinner = pnl > 0
        setPaperBalance(current => current + pnl)
        
        // Update learning insights after closing trade
        updateLearningInsights(trade, pnl, isWinner)
        
        return {
          ...trade,
          status: 'CLOSED',
          exitPrice,
          exitTime: new Date().toISOString(),
          pnl,
          isWinner,
          exitReason: 'Manual close'
        }
      }
      return trade
    }))
  }

  const updateLearningInsights = async (trade, pnl, isWinner) => {
    try {
      // Simulate AI learning from trade outcome
      const learningData = {
        tradeId: trade.id,
        symbol: trade.symbol,
        timeframe: trade.timeframe,
        side: trade.side,
        entryPrice: trade.entryPrice,
        exitPrice: trade.exitPrice || null,
        pnl,
        isWinner,
        confidence: trade.confidence,
        reasoning: trade.reasoning,
        timestamp: new Date().toISOString()
      }
      
      console.log('🧠 AI Learning from trade outcome:', learningData)
      
      // Call learning API if available (simulated for paper trading)
      setLearningInsights(prev => ({
        ...prev,
        lastTrade: learningData,
        totalTrades: (prev?.totalTrades || 0) + 1,
        winners: isWinner ? (prev?.winners || 0) + 1 : (prev?.winners || 0),
        learningPoints: [
          ...(prev?.learningPoints || []).slice(-4), // Keep last 4
          {
            timestamp: new Date().toISOString(),
            insight: generateLearningInsight(trade, pnl, isWinner),
            impact: isWinner ? 'POSITIVE' : 'NEGATIVE',
            confidence: trade.confidence
          }
        ]
      }))
      
    } catch (error) {
      console.error('❌ Error updating learning insights:', error)
    }
  }

  const generateLearningInsight = (trade, pnl, isWinner) => {
    const winRate = trade.confidence
    if (isWinner) {
      if (winRate >= 80) {
        return `High confidence (${winRate}%) trade succeeded. Reinforcing pattern recognition for ${trade.symbol} ${trade.timeframe}m setups.`
      } else {
        return `Medium confidence (${winRate}%) trade worked out. Learning to trust similar setups more in future.`
      }
    } else {
      if (winRate >= 80) {
        return `High confidence (${winRate}%) trade failed. Reviewing analysis criteria to prevent overconfidence in similar setups.`
      } else {
        return `Medium confidence (${winRate}%) trade didn't work. Adjusting risk thresholds for ${trade.timeframe}m timeframe.`
      }
    }
  }

  const fetchLearningStatus = async () => {
    try {
      // Fetch real AI learning status from the learning system
      console.log('🧠 Fetching real AI learning status...')
      
      // Get real learning status from the AI learning system
      const response = await fetch('/api/ai-learning-status', {
        method: 'GET',
        headers: { 'Content-Type': 'application/json' }
      })
      
      if (response.ok) {
        const result = await response.json()
        const realLearningData = result.data
        console.log('✅ Real learning status received:', realLearningData)
        
        setLearningInsights(prev => ({
          ...prev,
          status: {
            totalDecisions: realLearningData.totalDecisions || 0,
            recentDecisions: realLearningData.totalOutcomes || 0,
            successRate: (realLearningData.avgAccuracy || 0) / 100,
            currentThresholds: {
              emergency: 0.5,
              risk: 1.5,
              confidence: realLearningData.confidenceLevel || 75
            },
            nextTradeAdjustments: [
              realLearningData.recommendation || 'Learning system initializing...',
              realLearningData.nextMilestone || 'Building pattern recognition',
              `Phase: ${realLearningData.phase || 'INITIALIZATION'}`
            ],
            phase: realLearningData.phase,
            winRate: realLearningData.winRate,
            daysActive: realLearningData.daysActive
          }
        }))
      } else {
        // If learning API not available, create basic structure without mock data
        console.log('⚠️ Learning API not available, using basic structure')
        setLearningInsights(prev => ({
          ...prev,
          status: {
            totalDecisions: 0,
            recentDecisions: 0,
            successRate: 0,
            currentThresholds: {
              emergency: 0.5,
              risk: 1.5,
              confidence: 75
            },
            nextTradeAdjustments: [
              'Learning system initializing...',
              'Building pattern recognition database',
              'Preparing adaptive decision making'
            ]
          }
        }))
      }
      
    } catch (error) {
      console.error('❌ Error fetching learning status:', error)
      // Minimal structure without any mock data
      setLearningInsights(prev => ({
        ...prev,
        status: {
          totalDecisions: 0,
          recentDecisions: 0,
          successRate: 0,
          currentThresholds: {
            emergency: 0.5,
            risk: 1.5,
            confidence: 75
          },
          nextTradeAdjustments: ['Learning system offline']
        }
      }))
    }
  }

  const resetSafePaperTrading = () => {
    if (confirm('Reset all SAFE paper trading data? This cannot be undone.')) {
      setPaperBalance(1000)
      setPaperTrades([])
      setCurrentAnalysis(null)
      localStorage.removeItem('safePaperTrades')
      localStorage.removeItem('safePaperBalance')
    }
  }

  const openTrades = paperTrades.filter(t => t.status === 'OPEN')
  const closedTrades = paperTrades.filter(t => t.status === 'CLOSED')
  const totalPnL = closedTrades.reduce((sum, trade) => sum + (trade.pnl || 0), 0)
  const winRate = closedTrades.length > 0 
    ? Math.round((closedTrades.filter(t => (t.pnl || 0) > 0).length / closedTrades.length) * 100)
    : 0

  return (
    <div className="space-y-6">
      {/* SAFETY NOTICE */}
      <div className="bg-green-900/30 border border-green-700 rounded-lg p-4">
        <h2 className="text-green-400 font-bold text-lg mb-2">🛡️ SAFE PAPER TRADING MODE</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
          <div>
            <p className="text-green-300 mb-1">✅ Completely isolated from real trading</p>
            <p className="text-green-300 mb-1">✅ No connection to live trading APIs</p>
            <p className="text-green-300">✅ Zero risk of real money execution</p>
          </div>
          <div>
            <p className="text-green-300 mb-1">🧠 AI learning through safe simulation</p>
            <p className="text-green-300 mb-1">📊 Real market analysis for practice</p>
            <p className="text-green-300">🎯 Perfect for confidence building</p>
          </div>
        </div>
      </div>

      {/* AI LEARNING SETUP NOTICE */}
      {!continuousLearning || !autoExecuteTrades ? (
        <div className="bg-blue-900/30 border border-blue-600 rounded-lg p-4">
          <h3 className="text-blue-400 font-bold text-lg mb-2">🤖 Enable AI Learning from Virtual Trading</h3>
          <div className="text-sm text-blue-300 mb-3">
            <strong>How AI Learning Works:</strong> The system must execute virtual trades and track outcomes to learn patterns and improve predictions.
          </div>
          <div className="grid grid-cols-1 gap-4">
            <div className="bg-blue-800/30 rounded p-3">
              <h4 className="text-blue-300 font-medium mb-1">Click "🎓 Start Learning" (Auto-enables trade execution)</h4>
              <p className="text-xs text-blue-200">
                {continuousLearning ? '✅ Learning Active → Auto-execute Enabled' : '❌ Click "🎓 Start Learning" button below'}
              </p>
              <div className="mt-2 text-xs text-green-400 bg-green-900/20 px-2 py-1 rounded">
                💡 <strong>Auto-Execute:</strong> Automatically enabled with learning - AI needs trade outcomes to improve
              </div>
            </div>
          </div>
          <div className="mt-3 text-xs text-blue-300 bg-blue-800/20 px-3 py-2 rounded">
            <strong>Learning Process:</strong> AI analyzes → executes virtual trades → tracks outcomes → learns from results → improves predictions
          </div>
        </div>
      ) : (
        <div className="bg-green-900/30 border border-green-600 rounded-lg p-4">
          <h3 className="text-green-400 font-bold text-lg mb-2">✅ AI Learning System Active</h3>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
            <div className="text-green-300">
              <span className="font-medium">🎓 Continuous Learning:</span> ON
            </div>
            <div className="text-green-300">
              <span className="font-medium">🤖 Auto-Execute:</span> ON
            </div>
            <div className="text-green-300">
              <span className="font-medium">📈 Virtual Trading:</span> Active
            </div>
          </div>
          <div className="mt-2 text-xs text-green-300">
            🧠 AI will automatically execute virtual trades based on analysis and learn from outcomes to improve performance
          </div>
        </div>
      )}

      {/* Header with Balance */}
      <div className="bg-gray-800/50 rounded-lg p-6 border border-gray-700">
        <div className="flex items-center justify-between mb-4">
          <div className="flex items-center space-x-4">
            <h1 className="text-2xl font-bold text-white">📄 Safe Paper Trading</h1>
            {continuousLearning && (
              <div className="flex items-center bg-green-900/30 border border-green-600/50 rounded-lg px-3 py-2">
                <div className="w-2 h-2 bg-green-400 rounded-full animate-pulse mr-2"></div>
                <div className="text-sm">
                  <span className="text-green-400 font-medium">🎓 Learning Active</span>
                  {timeRemaining > 0 && (
                    <div className="text-xs text-green-300 font-mono">
                      Next cycle: {formatCountdown(timeRemaining)}
                    </div>
                  )}
                </div>
              </div>
            )}
          </div>
          <div className="flex items-center space-x-4">
            <div className="text-right">
              <p className="text-sm text-gray-400">Virtual Balance</p>
              <p className={`text-lg font-bold ${paperBalance >= 1000 ? 'text-green-400' : 'text-red-400'}`}>
                ${paperBalance.toFixed(2)}
              </p>
            </div>
            <div className="text-right">
              <p className="text-sm text-gray-400">Total P&L</p>
              <p className={`text-lg font-bold ${totalPnL >= 0 ? 'text-green-400' : 'text-red-400'}`}>
                ${totalPnL.toFixed(2)}
              </p>
            </div>
            <div className="text-right">
              <p className="text-sm text-gray-400">Win Rate</p>
              <p className="text-lg font-bold text-blue-400">{winRate}%</p>
            </div>
          </div>
        </div>

        {/* Stats */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
          <div className="bg-gray-700/50 rounded p-3 text-center">
            <p className="text-gray-400">Open Trades</p>
            <p className="text-white font-bold text-lg">{openTrades.length}</p>
          </div>
          <div className="bg-gray-700/50 rounded p-3 text-center">
            <p className="text-gray-400">Closed Trades</p>
            <p className="text-white font-bold text-lg">{closedTrades.length}</p>
          </div>
          <div className="bg-gray-700/50 rounded p-3 text-center">
            <p className="text-gray-400">Wins</p>
            <p className="text-green-400 font-bold text-lg">
              {closedTrades.filter(t => (t.pnl || 0) > 0).length}
            </p>
          </div>
          <div className="bg-gray-700/50 rounded p-3 text-center">
            <p className="text-gray-400">Losses</p>
            <p className="text-red-400 font-bold text-lg">
              {closedTrades.filter(t => (t.pnl || 0) < 0).length}
            </p>
          </div>
        </div>
      </div>

      {/* Trading Controls */}
      <div className="bg-gray-800/50 rounded-lg p-6 border border-gray-700">
        <h3 className="text-lg font-bold text-white mb-4">🎯 Safe Analysis Controls</h3>
        
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
          <div>
            <label className="block text-sm text-gray-400 mb-2">Symbol</label>
            <select 
              value={symbol} 
              onChange={(e) => setSymbol(e.target.value)}
              disabled={loading || continuousLearning}
              className="w-full bg-gray-700 text-white rounded px-3 py-2 disabled:opacity-50"
            >
              <option value="SOLUSD">SOL/USD</option>
              <option value="BTCUSD">BTC/USD</option>
              <option value="ETHUSD">ETH/USD</option>
            </select>
          </div>
          <div>
            <label className="block text-sm text-gray-400 mb-2">
              Continuous Learning
              {continuousLearning && (
                <span className="ml-2 text-xs text-green-400 font-mono bg-green-900/20 px-2 py-1 rounded">
                  {timeRemaining > 0 ? (
                    <>⏱️ Next: {formatCountdown(timeRemaining)}</>
                  ) : (
                    <>🔄 Analysis running...</>
                  )}
                </span>
              )}
            </label>
            <div className="flex gap-2">
              <button
                onClick={() => {
                  if (continuousLearning) {
                    stopContinuousLearning()
                    setContinuousLearning(false)
                    // Optionally disable auto-execute when stopping learning
                    // setAutoExecuteTrades(false)
                  } else {
                    setContinuousLearning(true)
                    // AUTOMATICALLY enable auto-execute when starting learning
                    // This is essential for AI learning - it needs trade outcomes!
                    setAutoExecuteTrades(true)
                    console.log('🤖 Auto-enabled trade execution for AI learning - system needs outcomes to learn!')
                    startContinuousLearning()
                  }
                }}
                disabled={loading}
                className={`flex-1 py-2 px-4 rounded-lg font-medium transition-all duration-200 ${
                  continuousLearning
                    ? 'bg-red-600 hover:bg-red-700 text-white'
                    : 'bg-green-600 hover:bg-green-700 text-white'
                } disabled:opacity-50`}
              >
                {continuousLearning ? '🛑 Stop Learning' : '🎓 Start Learning'}
              </button>
              {continuousLearning && (
                <button
                  onClick={restartContinuousLearning}
                  disabled={loading}
                  className="py-2 px-3 rounded-lg font-medium transition-all duration-200 bg-blue-600 hover:bg-blue-700 text-white disabled:opacity-50"
                  title="Restart continuous learning if it seems stuck"
                >
                  🔄
                </button>
              )}
              <button
                onClick={() => {
                  console.log('🔄 Force refresh: Clearing stale data and fetching fresh analysis')
                  localStorage.removeItem('safePaperTrading_currentAnalysis')
                  setCurrentAnalysis(null)
                  runSafeAnalysis(false)
                }}
                disabled={loading}
                className="py-2 px-4 rounded-lg font-medium transition-all duration-200 bg-blue-600 hover:bg-blue-700 text-white disabled:opacity-50"
                title="Clear stale data and get fresh analysis"
              >
                🔄 Fresh
              </button>
            </div>

            {/* Auto-Execute Status - Auto-managed when learning is enabled */}
            <div className="mt-4 p-3 bg-gray-800 rounded-lg border border-gray-700">
              <div className="flex items-center justify-between">
                <div className="flex flex-col">
                  <span className="text-sm font-medium text-gray-300">Auto-Execute Trades</span>
                  <span className="text-xs text-gray-400">
                    {continuousLearning 
                      ? "🤖 Auto-managed with learning - executes trades ≥60% confidence for AI feedback"
                      : "⚠️ Enable Continuous Learning to activate auto-execute (required for AI learning)"
                    }
                  </span>
                </div>
                <div className={`ml-4 px-4 py-2 rounded-lg font-medium ${
                  continuousLearning && autoExecuteTrades
                    ? 'bg-green-600 text-white'
                    : continuousLearning
                    ? 'bg-yellow-600 text-white'
                    : 'bg-gray-500 text-gray-400 opacity-50'
                }`}>
                  {continuousLearning && autoExecuteTrades ? '🤖 AUTO-ON' : continuousLearning ? '🟡 READY' : '� LOCKED'}
                </div>
              {autoExecuteTrades && continuousLearning && (
                <div className="mt-2 text-xs text-yellow-400">
                  ⚡ Paper trades will be executed automatically when AI recommends BUY/SELL with ≥60% confidence
                </div>
              )}
              {!continuousLearning && (
                <div className="mt-2 text-xs text-blue-400 bg-blue-900/20 px-2 py-1 rounded">
                  💡 <strong>For AI Learning:</strong> Enable "Continuous Learning" + "Auto-Execute" so the AI can learn from virtual trade outcomes
                </div>
              )}
            </div>
          </div>
        </div>

        {/* Multi-Timeframe Selection */}
        <div className="mb-6">
          <label className="block text-sm text-gray-400 mb-3">Multi-Timeframe Analysis</label>
          
          {/* Trading Style Presets */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-3 mb-4">
            <button
              type="button"
              onClick={() => setSelectedTimeframes(['5', '15', '30'])}
              disabled={loading || continuousLearning}
              className="group p-4 rounded-lg bg-gradient-to-br from-green-600/20 to-emerald-600/10 border border-green-600/30 hover:border-green-500/50 transition-all duration-200 disabled:opacity-50 text-left"
            >
              <div className="flex items-center justify-between mb-2">
                <div className="text-xl">📈</div>
                <div className="text-xs text-green-400 bg-green-500/20 px-2 py-1 rounded">FAST</div>
              </div>
              <h4 className="text-sm font-bold text-green-300 mb-1">Scalping</h4>
              <div className="text-xs text-green-400/80 font-mono">5m • 15m • 30m</div>
            </button>
            
            <button
              type="button"
              onClick={() => setSelectedTimeframes(['60', '120'])}
              disabled={loading || continuousLearning}
              className="group p-4 rounded-lg bg-gradient-to-br from-blue-600/20 to-indigo-600/10 border border-blue-600/30 hover:border-blue-500/50 transition-all duration-200 disabled:opacity-50 text-left"
            >
              <div className="flex items-center justify-between mb-2">
                <div className="text-xl">⚡</div>
                <div className="text-xs text-blue-400 bg-blue-500/20 px-2 py-1 rounded">MEDIUM</div>
              </div>
              <h4 className="text-sm font-bold text-blue-300 mb-1">Day Trading</h4>
              <div className="text-xs text-blue-400/80 font-mono">1h • 2h</div>
            </button>
            
            <button
              type="button"
              onClick={() => setSelectedTimeframes(['240', 'D'])}
              disabled={loading || continuousLearning}
              className="group p-4 rounded-lg bg-gradient-to-br from-purple-600/20 to-violet-600/10 border border-purple-600/30 hover:border-purple-500/50 transition-all duration-200 disabled:opacity-50 text-left"
            >
              <div className="flex items-center justify-between mb-2">
                <div className="text-xl">🎯</div>
                <div className="text-xs text-purple-400 bg-purple-500/20 px-2 py-1 rounded">SLOW</div>
              </div>
              <h4 className="text-sm font-bold text-purple-300 mb-1">Swing Trading</h4>
              <div className="text-xs text-purple-400/80 font-mono">4h • 1d</div>
            </button>
          </div>

          {/* Individual Timeframe Toggles */}
          <div className="grid grid-cols-3 md:grid-cols-7 gap-2">
            {timeframes.map(tf => (
              <button
                key={tf.value}
                onClick={() => toggleTimeframe(tf.value)}
                disabled={loading || continuousLearning}
                className={`py-2 px-3 rounded-lg text-sm font-medium transition-all duration-200 ${
                  selectedTimeframes.includes(tf.value)
                    ? 'bg-blue-600 text-white border border-blue-500'
                    : 'bg-gray-700 text-gray-300 border border-gray-600 hover:bg-gray-600'
                } disabled:opacity-50`}
              >
                {tf.label}
              </button>
            ))}
          </div>
          
          <div className="mt-2 text-xs text-gray-500">
            Selected: {selectedTimeframes.length > 0 ? selectedTimeframes.map(tf => 
              timeframes.find(t => t.value === tf)?.label || tf
            ).join(', ') : 'None'}
            {selectedTimeframes.length > 0 && (
              <span className="ml-2 text-blue-400">
                (Analysis delay: {Math.ceil(calculateOptimalDelay() / 60000)}m)
              </span>
            )}
          </div>
        </div>

        <button
          onClick={() => {
            console.log('🟢 BUTTON CLICK DETECTED!')
            console.log('🔍 Current state - loading:', loading, 'symbol:', symbol, 'timeframes:', selectedTimeframes)
            runSafeAnalysis()
          }}
          disabled={loading || selectedTimeframes.length === 0}
          className={`w-full py-3 px-4 rounded-lg font-medium transition-all duration-200 ${
            loading
              ? 'bg-gray-600 text-gray-400 cursor-not-allowed'
              : selectedTimeframes.length === 0
              ? 'bg-gray-600 text-gray-400 cursor-not-allowed'
              : 'bg-blue-600 hover:bg-blue-700 text-white'
          }`}
        >
          {loading ? '🔄 Safe Analysis Running...' : 
           selectedTimeframes.length === 0 ? '⚠️ Select Timeframes First' : 
           '🛡️ Start Safe Paper Analysis'}
        </button>

        {/* Force Analysis Button for Testing */}
        {continuousLearning && (
          <button
            onClick={() => {
              console.log('🧪 FORCE ANALYSIS: Manual trigger for testing')
              runSafeAnalysis(true)
            }}
            disabled={loading}
            className="w-full mt-2 py-2 px-4 rounded-lg font-medium transition-all duration-200 bg-yellow-600 hover:bg-yellow-700 text-white disabled:opacity-50"
          >
            🧪 Force Analysis Now (Test)
          </button>
        )}

        <div className="mt-2 text-xs text-gray-500">
          ✅ Real market analysis • Paper trading only • Zero trading risk
          {continuousLearning && (
            <span className="block mt-1 text-green-400">
              🎓 Continuous learning active - System automatically analyzes every {Math.ceil(calculateOptimalDelay() / 60000)} minutes
              {timeRemaining > 0 && (
                <span className="ml-2 text-green-300">
                  (Next: {formatCountdown(timeRemaining)})
                </span>
              )}
            </span>
          )}
        </div>

        {/* Clear Data Controls */}
        {(currentAnalysis || paperTrades.length > 0 || analysisHistory.length > 0) && (
          <div className="mt-4 pt-4 border-t border-gray-700">
            <div className="flex items-center justify-between">
              <div className="text-sm text-gray-400">
                <p>Analysis History: {analysisHistory.length} entries</p>
                <p>Paper Trades: {paperTrades.length} trades</p>
              </div>
              <button
                onClick={() => {
                  if (confirm('Clear all analysis history and paper trading data? This cannot be undone.')) {
                    // Stop continuous learning first
                    if (continuousLearning) {
                      stopContinuousLearning()
                      setContinuousLearning(false)
                    }
                    
                    setCurrentAnalysis(null)
                    setPaperTrades([])
                    setAnalysisHistory([])
                    setLearningInsights(null)
                    setPaperBalance(1000)
                    
                    // Clear localStorage
                    localStorage.removeItem('safePaperTrading_currentAnalysis')
                    localStorage.removeItem('safePaperTrading_paperTrades')
                    localStorage.removeItem('safePaperTrading_analysisHistory')
                    localStorage.removeItem('safePaperTrading_learningInsights')
                    localStorage.removeItem('safePaperTrading_paperBalance')
                    localStorage.removeItem('safePaperTrading_continuousLearning')
                    
                    console.log('🧹 Cleared all safe paper trading data')
                  }
                }}
                className="py-1 px-3 rounded text-xs font-medium transition-all duration-200 bg-gray-600 hover:bg-gray-500 text-gray-300"
              >
                🧹 Clear All Data
              </button>
            </div>
          </div>
        )}
      </div>

      {/* Error Display */}
      {error && (
        <div className="bg-red-900/30 border border-red-700 rounded-lg p-4">
          <p className="text-red-400">❌ Error: {error}</p>
        </div>
      )}

      {/* Current Analysis Results */}
      {currentAnalysis && (
        <div className="bg-gray-800/50 rounded-lg p-6 border border-gray-700">
          <h3 className="text-lg font-bold text-white mb-4">📊 Safe Analysis Results</h3>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
            <div className="bg-gray-700/50 rounded p-3">
              <p className="text-gray-400 text-sm">Recommendation</p>
              <p className={`font-bold text-lg ${
                currentAnalysis.recommendation === 'BUY' ? 'text-green-400' : 
                currentAnalysis.recommendation === 'SELL' ? 'text-red-400' : 'text-yellow-400'
              }`}>
                {currentAnalysis.recommendation}
              </p>
            </div>
            <div className="bg-gray-700/50 rounded p-3">
              <p className="text-gray-400 text-sm">Confidence</p>
              <p className="font-bold text-lg text-blue-400">{currentAnalysis.confidence}%</p>
            </div>
            <div className="bg-gray-700/50 rounded p-3">
              <p className="text-gray-400 text-sm">Timeframes</p>
              <p className="font-bold text-sm text-purple-400">
                {currentAnalysis.timeframes?.map(tf => 
                  timeframes.find(t => t.value === tf)?.label || tf
                ).join(', ') || 'Single'}
              </p>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
            <div className="bg-gray-700/50 rounded p-3">
              <p className="text-gray-400 text-sm">Entry Price</p>
              <p className="font-bold text-lg text-white">${currentAnalysis.entry?.price?.toFixed(2) || 'N/A'}</p>
            </div>
            <div className="bg-gray-700/50 rounded p-3">
              <p className="text-gray-400 text-sm">Analysis Mode</p>
              <p className="font-bold text-sm text-indigo-400">
                {currentAnalysis.analysisMode === 'CONTINUOUS_LEARNING' ? '🎓 Learning' : '👤 Manual'}
              </p>
            </div>
            <div className="bg-gray-700/50 rounded p-3">
              <p className="text-gray-400 text-sm">Primary Focus</p>
              <p className="font-bold text-sm text-cyan-400">
                {currentAnalysis.primaryTimeframe ? 
                  timeframes.find(t => t.value === currentAnalysis.primaryTimeframe)?.label || currentAnalysis.primaryTimeframe
                  : 'N/A'}
              </p>
            </div>
          </div>

          {/* Action Buttons */}
          {currentAnalysis.recommendation !== 'HOLD' && currentAnalysis.tradeDecision?.allowed && (
            <div className="flex space-x-4 mb-4">
              <button
                onClick={() => executeSafePaperTrade('BUY')}
                disabled={currentAnalysis.recommendation !== 'BUY'}
                className={`flex-1 py-2 px-4 rounded font-medium ${
                  currentAnalysis.recommendation === 'BUY'
                    ? 'bg-green-600 hover:bg-green-700 text-white'
                    : 'bg-gray-600 text-gray-400 cursor-not-allowed'
                }`}
              >
                📄 Safe Paper BUY
              </button>
              <button
                onClick={() => executeSafePaperTrade('SELL')}
                disabled={currentAnalysis.recommendation !== 'SELL'}
                className={`flex-1 py-2 px-4 rounded font-medium ${
                  currentAnalysis.recommendation === 'SELL'
                    ? 'bg-red-600 hover:bg-red-700 text-white'
                    : 'bg-gray-600 text-gray-400 cursor-not-allowed'
                }`}
              >
                📄 Safe Paper SELL
              </button>
            </div>
          )}

          {/* Analysis Details */}
          <div className="bg-gray-700/30 rounded p-4">
            <h4 className="text-white font-medium mb-2">Analysis Reasoning:</h4>
            <pre className="text-gray-300 text-sm whitespace-pre-wrap">
              {typeof currentAnalysis.reasoning === 'string' 
                ? currentAnalysis.reasoning 
                : typeof currentAnalysis.reasoning === 'object' 
                ? JSON.stringify(currentAnalysis.reasoning, null, 2)
                : 'Analysis reasoning not available'}
            </pre>
          </div>

          {/* Toggle Detailed Analysis */}
          <button
            onClick={() => setShowDetailedAnalysis(!showDetailedAnalysis)}
            className="w-full mt-4 py-2 px-4 bg-purple-600 hover:bg-purple-700 text-white rounded-lg font-medium transition-all duration-200"
          >
            {showDetailedAnalysis ? '📊 Hide Detailed Analysis' : '🔍 Show Detailed Analysis'}
          </button>
        </div>
      )}

      {/* Detailed Market Analysis Panel */}
      {currentAnalysis && showDetailedAnalysis && (
        <div className="bg-gradient-to-br from-blue-900/30 to-purple-900/30 rounded-lg p-6 border border-blue-700/50">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-xl font-bold text-white flex items-center">
              🧠 Market Summary
              {currentAnalysis.timeframes && currentAnalysis.timeframes.length > 1 && (
                <span className="ml-2 text-sm text-purple-400 bg-purple-500/20 px-2 py-1 rounded">
                  {currentAnalysis.timeframes.length} Timeframes
                </span>
              )}
            </h3>
            <div className="text-sm text-blue-300">
              {currentAnalysis.analysisMode === 'CONTINUOUS_LEARNING' 
                ? 'Continuous learning analysis with multi-timeframe insights'
                : 'Comprehensive multi-layout analysis with timeframe risk assessment and cross-layout insights'
              }
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
            {/* Market Sentiment */}
            <div className="bg-gray-800/60 rounded-lg p-4">
              <h4 className="text-green-400 font-medium mb-2">Market Sentiment</h4>
              <p className="text-2xl font-bold text-white">{currentAnalysis.marketSentiment || 'NEUTRAL'}</p>
            </div>

            {/* Recommendation */}
            <div className="bg-gray-800/60 rounded-lg p-4">
              <h4 className="text-blue-400 font-medium mb-2">Recommendation</h4>
              <p className={`text-2xl font-bold ${
                currentAnalysis.recommendation === 'BUY' ? 'text-green-400' : 
                currentAnalysis.recommendation === 'SELL' ? 'text-red-400' : 'text-yellow-400'
              }`}>
                {currentAnalysis.recommendation}
              </p>
              <p className="text-sm text-gray-300">{currentAnalysis.confidence}% confidence</p>
            </div>

            {/* Resistance Levels */}
            <div className="bg-gray-800/60 rounded-lg p-4">
              <h4 className="text-red-400 font-medium mb-2">Resistance Levels</h4>
              <p className="text-white font-mono">
                {currentAnalysis.keyLevels?.resistance?.join(', ') || 
                 `$${(currentAnalysis.entry?.price * 1.02 || 164).toFixed(2)}, $${(currentAnalysis.entry?.price * 1.05 || 168).toFixed(2)}`}
              </p>
            </div>

            {/* Support Levels */}
            <div className="bg-gray-800/60 rounded-lg p-4">
              <h4 className="text-green-400 font-medium mb-2">Support Levels</h4>
              <p className="text-white font-mono">
                {currentAnalysis.keyLevels?.support?.join(', ') || 
                 `$${(currentAnalysis.entry?.price * 0.98 || 160).toFixed(2)}, $${(currentAnalysis.entry?.price * 0.95 || 156).toFixed(2)}`}
              </p>
            </div>
          </div>

          {/* Trading Setup */}
          <div className="bg-purple-900/20 rounded-lg p-4 mb-4">
            <h4 className="text-purple-300 font-medium mb-3">Trading Setup</h4>
            
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
              {/* Entry Point */}
              <div>
                <div className="flex items-center mb-2">
                  <span className="text-yellow-400 mr-2">🎯</span>
                  <span className="text-yellow-400 font-medium">Entry Point</span>
                </div>
                <p className="text-white font-mono text-lg">${currentAnalysis.entry?.price?.toFixed(2) || 'N/A'}</p>
                <p className="text-sm text-gray-400">
                  {typeof currentAnalysis.entry?.reasoning === 'string' 
                    ? currentAnalysis.entry.reasoning 
                    : typeof currentAnalysis.entry?.reasoning === 'object'
                    ? JSON.stringify(currentAnalysis.entry.reasoning)
                    : currentAnalysis.summary || 'Real market analysis entry point'}
                </p>
              </div>

              {/* Stop Loss */}
              <div>
                <div className="flex items-center mb-2">
                  <span className="text-red-400 mr-2">⭕</span>
                  <span className="text-red-400 font-medium">Stop Loss</span>
                </div>
                <p className="text-white font-mono text-lg">${currentAnalysis.stopLoss?.price?.toFixed(2) || 'N/A'}</p>
                <p className="text-sm text-gray-400">
                  {typeof currentAnalysis.stopLoss?.reasoning === 'string' 
                    ? currentAnalysis.stopLoss.reasoning 
                    : typeof currentAnalysis.stopLoss?.reasoning === 'object'
                    ? JSON.stringify(currentAnalysis.stopLoss.reasoning)
                    : 'Real market analysis stop loss level'}
                </p>
              </div>

              {/* Take Profit Targets */}
              <div>
                <div className="flex items-center mb-2">
                  <span className="text-blue-400 mr-2">💎</span>
                  <span className="text-blue-400 font-medium">Take Profit Targets</span>
                </div>
                <div className="space-y-1">
                  <div>
                    <span className="text-blue-400 font-medium">TP1: </span>
                    <span className="text-white font-mono">${currentAnalysis.takeProfits?.tp1?.price?.toFixed(2) || 'N/A'}</span>
                  </div>
                  {currentAnalysis.takeProfits?.tp2 && (
                    <div>
                      <span className="text-blue-400 font-medium">TP2: </span>
                      <span className="text-white font-mono">${currentAnalysis.takeProfits.tp2.price?.toFixed(2)}</span>
                    </div>
                  )}
                </div>
                <p className="text-sm text-gray-400 mt-1">
                  {typeof currentAnalysis.takeProfits?.reasoning === 'string' 
                    ? currentAnalysis.takeProfits.reasoning 
                    : typeof currentAnalysis.takeProfits?.reasoning === 'object'
                    ? JSON.stringify(currentAnalysis.takeProfits.reasoning)
                    : 'Real market analysis target levels'}
                </p>
              </div>
            </div>
          </div>

          {/* Risk Management */}
          <div className="bg-gray-800/40 rounded-lg p-4">
            <h4 className="text-orange-400 font-medium mb-3">Risk Management</h4>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <div className="flex items-center justify-between mb-2">
                  <span className="text-gray-300">Risk/Reward Ratio</span>
                  <span className="text-orange-400 font-bold">
                    {currentAnalysis.riskToReward || 'N/A'}
                  </span>
                </div>
                
                <div className="flex items-center mb-2">
                  <span className="text-yellow-400 mr-2">⚠️</span>
                  <span className="text-yellow-400 font-medium">Confirmation Trigger</span>
                </div>
                <p className="text-gray-300 text-sm">
                  {typeof currentAnalysis.confirmationTrigger === 'string' 
                    ? currentAnalysis.confirmationTrigger 
                    : typeof currentAnalysis.confirmationTrigger === 'object'
                    ? JSON.stringify(currentAnalysis.confirmationTrigger)
                    : 'Real market confirmation signals from analysis'}
                </p>
              </div>
              
              <div>
                <div className="space-y-2">
                  <div className="flex justify-between">
                    <span className="text-gray-400">Trend:</span>
                    <span className="text-white">
                      {typeof currentAnalysis.trendAnalysis === 'object' 
                        ? (currentAnalysis.trendAnalysis?.direction || 'Analyzing...') 
                        : currentAnalysis.trendAnalysis || 'Analyzing...'}
                    </span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-gray-400">Momentum:</span>
                    <span className="text-white">
                      {typeof currentAnalysis.momentumAnalysis === 'object' 
                        ? (currentAnalysis.momentumAnalysis?.status || 'Analyzing...') 
                        : currentAnalysis.momentumAnalysis || 'Analyzing...'}
                    </span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-gray-400">Volume:</span>
                    <span className="text-white">
                      {typeof currentAnalysis.volumeAnalysis === 'object' 
                        ? (currentAnalysis.volumeAnalysis?.trend || 'Analyzing...') 
                        : currentAnalysis.volumeAnalysis || 'Analyzing...'}
                    </span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-gray-400">Timeframe Risk:</span>
                    <span className="text-white">
                      {typeof currentAnalysis.timeframeRisk === 'object' 
                        ? (currentAnalysis.timeframeRisk?.assessment || 'Medium') 
                        : currentAnalysis.timeframeRisk || 'Medium'}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* AI Learning Insights Panel */}
      {learningInsights && (
        <div className="bg-gradient-to-br from-indigo-900/30 to-purple-900/30 rounded-lg p-6 border border-indigo-700/50">
          <h3 className="text-xl font-bold text-white mb-4 flex items-center">
            🧠 AI Learning Insights
            <span className="ml-2 text-sm text-indigo-300">Real-time learning from trade outcomes</span>
          </h3>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
            {/* Learning Status */}
            <div className="bg-gray-800/60 rounded-lg p-4">
              <h4 className="text-indigo-400 font-medium mb-2">Learning Status</h4>
              <div className="space-y-2">
                <div className="flex justify-between">
                  <span className="text-gray-400">Total Decisions:</span>
                  <span className="text-white font-bold">{learningInsights.status?.totalDecisions || 0}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-400">Success Rate:</span>
                  <span className="text-green-400 font-bold">
                    {((learningInsights.status?.successRate || 0) * 100).toFixed(1)}%
                  </span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-400">Paper Trades:</span>
                  <span className="text-blue-400 font-bold">{learningInsights.totalTrades || 0}</span>
                </div>
              </div>
            </div>

            {/* Win/Loss Analysis */}
            <div className="bg-gray-800/60 rounded-lg p-4">
              <h4 className="text-green-400 font-medium mb-2">Trade Outcome</h4>
              {learningInsights.lastTrade ? (
                <div className="space-y-2">
                  <div className={`flex items-center ${learningInsights.lastTrade.isWinner ? 'text-green-400' : 'text-red-400'}`}>
                    <span className="mr-2">{learningInsights.lastTrade.isWinner ? '✅' : '❌'}</span>
                    <span className="font-bold">
                      {learningInsights.lastTrade.isWinner ? 'WINNER' : 'LOSER'}
                    </span>
                  </div>
                  <div className="text-sm text-gray-400">
                    Last: {learningInsights.lastTrade.symbol} ${learningInsights.lastTrade.pnl?.toFixed(2)}
                  </div>
                  <div className="text-sm text-gray-400">
                    Confidence: {learningInsights.lastTrade.confidence}%
                  </div>
                </div>
              ) : (
                <p className="text-gray-400 text-sm">No trades yet</p>
              )}
            </div>

            {/* Current Adjustments */}
            <div className="bg-gray-800/60 rounded-lg p-4">
              <h4 className="text-purple-400 font-medium mb-2">AI Adjustments</h4>
              <div className="space-y-1">
                {learningInsights.status?.nextTradeAdjustments?.slice(0, 3).map((adjustment, index) => (
                  <div key={index} className="text-xs text-gray-300 flex items-start">
                    <span className="text-purple-400 mr-1">•</span>
                    <span>{adjustment}</span>
                  </div>
                )) || (
                  <p className="text-gray-400 text-sm">Analyzing patterns...</p>
                )}
              </div>
            </div>
          </div>

          {/* Learning Reflection */}
          {learningInsights.learningPoints && learningInsights.learningPoints.length > 0 && (
            <div className="bg-gray-800/40 rounded-lg p-4">
              <h4 className="text-indigo-300 font-medium mb-3">AI Reflection & Learning</h4>
              <div className="space-y-3">
                {learningInsights.learningPoints.slice(-3).map((point, index) => (
                  <div key={index} className={`p-3 rounded border-l-4 ${
                    point.impact === 'POSITIVE' ? 'bg-green-900/20 border-green-500' : 'bg-red-900/20 border-red-500'
                  }`}>
                    <div className="flex items-center justify-between mb-1">
                      <span className={`text-sm font-medium ${
                        point.impact === 'POSITIVE' ? 'text-green-400' : 'text-red-400'
                      }`}>
                        {point.impact === 'POSITIVE' ? '📈 Positive Learning' : '📉 Learning from Loss'}
                      </span>
                      <span className="text-xs text-gray-500">
                        {new Date(point.timestamp).toLocaleTimeString()}
                      </span>
                    </div>
                    <p className="text-gray-300 text-sm">{point.insight}</p>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* What AI is Using for Next Trade */}
          <div className="bg-blue-900/20 rounded-lg p-4 mt-4">
            <h4 className="text-blue-300 font-medium mb-3">🔮 AI Database for Next Trade</h4>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <h5 className="text-blue-400 text-sm font-medium mb-2">Current Thresholds:</h5>
                <div className="space-y-1 text-xs">
                  <div className="flex justify-between">
                    <span className="text-gray-400">Emergency Distance:</span>
                    <span className="text-white">{learningInsights.status?.currentThresholds?.emergency || 0.5}%</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-gray-400">Risk Distance:</span>
                    <span className="text-white">{learningInsights.status?.currentThresholds?.risk || 1.5}%</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-gray-400">Min Confidence:</span>
                    <span className="text-white">{learningInsights.status?.currentThresholds?.confidence || 75}%</span>
                  </div>
                </div>
              </div>
              <div>
                <h5 className="text-blue-400 text-sm font-medium mb-2">Pattern Recognition:</h5>
                <div className="space-y-1 text-xs text-gray-300">
                  <div>• {symbol} multi-timeframe: {learningInsights.status?.totalDecisions || 0} total decisions in database</div>
                  <div>• Success rate: {((learningInsights.status?.successRate || 0) * 100).toFixed(1)}%</div>
                  <div>• Learning phase: {learningInsights.status?.phase || 'INITIALIZATION'}</div>
                  <div>• Days active: {learningInsights.status?.daysActive || 0} days</div>
                  {currentAnalysis?.timeframes && currentAnalysis.timeframes.length > 1 && (
                    <div>• Current analysis: {currentAnalysis.timeframes.map(tf => 
                      timeframes.find(t => t.value === tf)?.label || tf
                    ).join(' + ')} confluence</div>
                  )}
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Open Trades */}
      {openTrades.length > 0 && (
        <div className="bg-gray-800/50 rounded-lg p-6 border border-gray-700">
          <h3 className="text-lg font-bold text-white mb-4">📈 Open Paper Positions</h3>
          <div className="space-y-3">
            {openTrades.map(trade => (
              <div key={trade.id} className="bg-gray-700/50 rounded p-4 flex justify-between items-center">
                <div className="flex-1">
                  <div className="flex items-center space-x-4">
                    <span className={`px-2 py-1 rounded text-xs font-medium ${
                      trade.side === 'BUY' ? 'bg-green-600 text-white' : 'bg-red-600 text-white'
                    }`}>
                      {trade.side}
                    </span>
                    <span className="text-white font-medium">{trade.symbol}</span>
                    <span className="text-gray-400">${trade.entryPrice}</span>
                    <span className="text-gray-400">Size: ${trade.positionSize?.toFixed(2)}</span>
                  </div>
                  <div className="text-xs text-gray-400 mt-1">
                    Entry: {new Date(trade.timestamp).toLocaleString()} | 
                    Confidence: {trade.confidence}%
                  </div>
                </div>
                <button
                  onClick={() => {
                    const exitPrice = prompt(`Exit price for ${trade.symbol}:`, trade.entryPrice)
                    if (exitPrice) closeSafePaperTrade(trade.id, parseFloat(exitPrice))
                  }}
                  className="bg-yellow-600 hover:bg-yellow-700 text-white px-3 py-1 rounded text-sm"
                >
                  Close
                </button>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Trade History */}
      {closedTrades.length > 0 && (
        <div className="bg-gray-800/50 rounded-lg p-6 border border-gray-700">
          <div className="flex justify-between items-center mb-4">
            <h3 className="text-lg font-bold text-white">📈 Safe Paper Trade History</h3>
            <button
              onClick={resetSafePaperTrading}
              className="bg-red-600 hover:bg-red-700 text-white px-3 py-2 rounded text-sm"
            >
              Reset All Data
            </button>
          </div>
          <div className="space-y-2 max-h-96 overflow-y-auto">
            {closedTrades.slice(0, 20).map(trade => (
              <div key={trade.id} className={`p-3 rounded border-l-4 ${
                (trade.pnl || 0) >= 0 ? 'bg-green-900/20 border-green-500' : 'bg-red-900/20 border-red-500'
              }`}>
                <div className="flex justify-between items-center">
                  <div className="flex items-center space-x-4">
                    <span className={`px-2 py-1 rounded text-xs font-medium ${
                      trade.side === 'BUY' ? 'bg-green-600 text-white' : 'bg-red-600 text-white'
                    }`}>
                      {trade.side}
                    </span>
                    <span className="text-white">{trade.symbol}</span>
                    <span className="text-gray-400">${trade.entryPrice} → ${trade.exitPrice}</span>
                    <span className={`font-medium ${
                      (trade.pnl || 0) >= 0 ? 'text-green-400' : 'text-red-400'
                    }`}>
                      ${(trade.pnl || 0).toFixed(2)}
                    </span>
                    <span className={`text-xs px-2 py-1 rounded ${
                      trade.isWinner ? 'bg-green-600 text-white' : 'bg-red-600 text-white'
                    }`}>
                      {trade.isWinner ? 'WIN' : 'LOSS'}
                    </span>
                  </div>
                </div>
                <div className="text-xs text-gray-400 mt-1">
                  {new Date(trade.timestamp).toLocaleDateString()} | Confidence: {trade.confidence}%
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Analysis History Panel */}
      {analysisHistory.length > 0 && (
        <div className="bg-gradient-to-br from-gray-800/30 to-gray-900/30 rounded-lg p-6 border border-gray-700/50">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-xl font-bold text-white flex items-center">
              📊 Analysis History
              <span className="ml-2 text-sm text-gray-400 bg-gray-700/50 px-2 py-1 rounded">
                {analysisHistory.length} entries
              </span>
            </h3>
            <span className="text-sm text-gray-400">Recent analyses are automatically saved</span>
          </div>

          <div className="space-y-3 max-h-96 overflow-y-auto">
            {analysisHistory.map((analysis, index) => (
              <div key={analysis.analysisId || index} className="bg-gray-800/60 rounded-lg p-4 border border-gray-700">
                <div className="flex items-center justify-between mb-2">
                  <div className="flex items-center space-x-3">
                    <span className={`text-lg font-bold ${
                      analysis.recommendation === 'BUY' ? 'text-green-400' : 
                      analysis.recommendation === 'SELL' ? 'text-red-400' : 'text-yellow-400'
                    }`}>
                      {analysis.recommendation}
                    </span>
                    <span className="text-blue-400 font-bold">{analysis.confidence}%</span>
                    <span className="text-sm text-gray-400">
                      {analysis.symbol} • {analysis.timeframes?.join(', ')}
                    </span>
                  </div>
                  <div className="text-xs text-gray-500">
                    {new Date(analysis.timestamp).toLocaleString()}
                  </div>
                </div>
                
                <div className="grid grid-cols-3 gap-4 text-sm">
                  <div>
                    <span className="text-gray-400">Entry: </span>
                    <span className="text-white font-mono">${analysis.entry?.price?.toFixed(2) || 'N/A'}</span>
                  </div>
                  <div>
                    <span className="text-gray-400">Stop: </span>
                    <span className="text-white font-mono">${analysis.stopLoss?.price?.toFixed(2) || 'N/A'}</span>
                  </div>
                  <div>
                    <span className="text-gray-400">Target: </span>
                    <span className="text-white font-mono">${analysis.takeProfits?.tp1?.price?.toFixed(2) || 'N/A'}</span>
                  </div>
                </div>
                
                {analysis.analysisType === 'CONTINUOUS_LEARNING' && (
                  <div className="mt-2 text-xs text-purple-400 flex items-center">
                    🎓 <span className="ml-1">Continuous learning analysis</span>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}