"use client"
import React, { useState, useRef, useEffect } from 'react'

interface TradePosition {
  id: string
  symbol: string
  side: 'LONG' | 'SHORT'
  entryPrice: number
  currentPrice: number
  amount: number
  unrealizedPnl: number
  pnlPercentage: number
  totalValue: number
  stopLoss?: number
  takeProfit?: number
  timestamp: number
  status: string
  leverage: number
  txId: string
  entryAnalysis?: string
}

interface ChatMessage {
  id: string
  type: 'user' | 'assistant' | 'system'
  content: string
  timestamp: string
  analysis?: any
  screenshots?: string[]
}

interface TradeFollowUpPanelProps {
  onClose: () => void
}

export default function TradeFollowUpPanel({ onClose }: TradeFollowUpPanelProps) {
  const [activePosition, setActivePosition] = useState<TradePosition | null>(null)
  const [chatMessages, setChatMessages] = useState<ChatMessage[]>([])
  const [currentMessage, setCurrentMessage] = useState('')
  const [isLoading, setIsLoading] = useState(false)
  const [isAnalyzing, setIsAnalyzing] = useState(false)
  const [systemStatus, setSystemStatus] = useState<any>(null)
  const chatEndRef = useRef<HTMLDivElement>(null)

  // Auto-scroll to bottom of chat
  useEffect(() => {
    chatEndRef.current?.scrollIntoView({ behavior: 'smooth' })
  }, [chatMessages])

  // Load active positions on mount
  useEffect(() => {
    const initializePanel = async () => {
      await loadSystemStatus()
      await loadActivePositions()
    }
    initializePanel()
  }, [])

  const loadSystemStatus = async () => {
    try {
      // Test multiple endpoints to get status
      const [statusRes, walletRes, healthRes] = await Promise.allSettled([
        fetch('/api/status'),
        fetch('/api/wallet/balance'),
        fetch('/api/trading/health')
      ])

      const systemInfo = {
        api: statusRes.status === 'fulfilled',
        wallet: walletRes.status === 'fulfilled',
        trading: healthRes.status === 'fulfilled',
        timestamp: new Date().toLocaleTimeString()
      }

      setSystemStatus(systemInfo)
    } catch (error) {
      console.error('Error loading system status:', error)
    }
  }

  const loadActivePositions = async () => {
    try {
      const response = await fetch('/api/trading/positions')
      const data = await response.json()
      
      if (data.success && data.positions?.length > 0) {
        // For now, take the first active position
        // TODO: Add position selector if multiple positions
        setActivePosition(data.positions[0])
        
        // Add welcome message with system status
        const statusEmoji = systemStatus ? 
          `🟢 API ${systemStatus.api ? '✓' : '✗'} | 💰 Wallet ${systemStatus.wallet ? '✓' : '✗'} | 📈 Trading ${systemStatus.trading ? '✓' : '✗'}` : 
          '🔄 Loading system status...'
        
        setChatMessages([{
          id: Date.now().toString(),
          type: 'system',
          content: `🎯 **Trade Follow-up Assistant**\n\n**System:** ${statusEmoji}\n\n**Active Position:**\n• ${data.positions[0].symbol} ${data.positions[0].side}\n• Entry: $${data.positions[0].entryPrice} | Size: ${data.positions[0].amount}\n• P&L: ${data.positions[0].unrealizedPnl > 0 ? '+' : ''}$${data.positions[0].unrealizedPnl.toFixed(2)}\n\nAsk: "exit?", "analysis", "risk", or type your question.`,
          timestamp: new Date().toISOString()
        }])
      } else {
        const statusEmoji = systemStatus ? 
          `🟢 API ${systemStatus.api ? '✓' : '✗'} | 💰 Wallet ${systemStatus.wallet ? '✓' : '✗'} | 📈 Trading ${systemStatus.trading ? '✓' : '✗'}` : 
          '🔄 Loading system status...'
          
        setChatMessages([{
          id: Date.now().toString(),
          type: 'system',
          content: `⚠️ **No Active Positions**\n\n**System:** ${statusEmoji}\n\nExecute a trade first, then mark it as traded for follow-up analysis.\n\nType "status" for system diagnostics.`,
          timestamp: new Date().toISOString()
        }])
      }
    } catch (error) {
      console.error('Error loading positions:', error)
      setChatMessages([{
        id: Date.now().toString(),
        type: 'system',
        content: `❌ **Error Loading Positions**\n\n**System:** ${systemStatus ? `API ${systemStatus.api ? '✓' : '✗'} Wallet ${systemStatus.wallet ? '✓' : '✗'} Trading ${systemStatus.trading ? '✓' : '✗'}` : 'Unknown'}\n\nConnection issues detected. Type "status" for diagnostics.`,
        timestamp: new Date().toISOString()
      }])
    }
  }

  const handleSendMessage = async () => {
    if (!currentMessage.trim() || isLoading) return

    const userMessage: ChatMessage = {
      id: Date.now().toString(),
      type: 'user',
      content: currentMessage,
      timestamp: new Date().toISOString()
    }

    setChatMessages(prev => [...prev, userMessage])
    setCurrentMessage('')
    setIsLoading(true)

    try {
      // Check if user is asking for status or system information
      const isStatusRequest = currentMessage.toLowerCase().includes('status') || 
                            currentMessage.toLowerCase().includes('system') ||
                            currentMessage.toLowerCase().includes('health') ||
                            currentMessage.toLowerCase().includes('diagnostic')

      if (isStatusRequest) {
        // Refresh system status and provide detailed information
        await loadSystemStatus()
        
        const statusMessage: ChatMessage = {
          id: (Date.now() + 1).toString(),
          type: 'assistant',
          content: `📊 **System Status** (${new Date().toLocaleTimeString()})\n\n**Core Services:**\n• API: ${systemStatus?.api ? '🟢' : '🔴'} | Wallet: ${systemStatus?.wallet ? '🟢' : '🔴'} | Trading: ${systemStatus?.trading ? '🟢' : '🔴'}\n\n**Trading:**\n• Drift Protocol: ${systemStatus?.trading ? '🟢 Connected' : '🔴 Disconnected'}\n• Screenshot Service: ${systemStatus?.api ? '🟢 Ready' : '🔴 Not ready'}\n• AI Analysis: ${process.env.OPENAI_API_KEY ? '🟢 Ready' : '🔴 No API key'}\n\n**Container:**\n• Docker: 🟢 Running (Port 9001)\n• Database: 🟢 SQLite Connected\n\n${!activePosition ? '⚠️ No active positions for follow-up' : '✅ Ready for trade management'}`,
          timestamp: new Date().toISOString()
        }
        setChatMessages(prev => [...prev, statusMessage])
        setIsLoading(false)
        return
      }

      // Check if user is asking for updated analysis
      const needsScreenshot = currentMessage.toLowerCase().includes('analysis') || 
                            currentMessage.toLowerCase().includes('update') ||
                            currentMessage.toLowerCase().includes('current') ||
                            currentMessage.toLowerCase().includes('now')

      let screenshots: string[] = []
      
      if (needsScreenshot && activePosition) {
        setIsAnalyzing(true)
        
        // Add thinking message
        const thinkingMessage: ChatMessage = {
          id: (Date.now() + 1).toString(),
          type: 'assistant',
          content: '🔄 **Capturing fresh screenshots and analyzing...**',
          timestamp: new Date().toISOString()
        }
        setChatMessages(prev => [...prev, thinkingMessage])

        // Get fresh screenshots
        const screenshotResponse = await fetch('/api/enhanced-screenshot', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            symbol: activePosition.symbol,
            timeframe: '240', // 4h default for trade follow-up
            layouts: ['ai', 'diy'],
            analyze: false // We'll analyze separately with trade context
          })
        })

        const screenshotData = await screenshotResponse.json()
        if (screenshotData.success && screenshotData.screenshots) {
          screenshots = screenshotData.screenshots
        }

        setIsAnalyzing(false)
      }

      // Send to trade follow-up API
      const response = await fetch('/api/trade-followup', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          message: currentMessage,
          position: activePosition,
          screenshots: screenshots,
          chatHistory: chatMessages.slice(-5) // Last 5 messages for context
        })
      })

      const data = await response.json()

      if (data.success) {
        const assistantMessage: ChatMessage = {
          id: (Date.now() + 2).toString(),
          type: 'assistant',
          content: data.response,
          timestamp: new Date().toISOString(),
          analysis: data.analysis,
          screenshots: screenshots
        }

        setChatMessages(prev => [...prev.filter(m => !m.content.includes('Getting Updated Analysis')), assistantMessage])
      } else {
        throw new Error(data.error || 'Failed to get response')
      }
    } catch (error) {
      console.error('Error sending message:', error)
      const errorMessage: ChatMessage = {
        id: (Date.now() + 3).toString(),
        type: 'assistant',
        content: '❌ **Error**\n\nSorry, I encountered an error. Please try again.',
        timestamp: new Date().toISOString()
      }
      setChatMessages(prev => [...prev.filter(m => !m.content.includes('Getting Updated Analysis')), errorMessage])
    } finally {
      setIsLoading(false)
      setIsAnalyzing(false)
    }
  }

  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault()
      handleSendMessage()
    }
  }

  const formatMessage = (content: string) => {
    // Convert markdown-style formatting to JSX
    return content.split('\n').map((line, index) => {
      if (line.startsWith('**') && line.endsWith('**')) {
        return <div key={index} className="font-bold text-purple-300 mb-2">{line.slice(2, -2)}</div>
      }
      if (line.startsWith('• ')) {
        return <div key={index} className="ml-4 text-gray-300">{line}</div>
      }
      return <div key={index} className="text-gray-300">{line}</div>
    })
  }

  const quickActions = [
    "Exit now?",
    "Move stop loss", 
    "Fresh analysis",
    "Risk check",
    "status"
  ]

  return (
    <div className="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center p-4 z-50">
      <div className="bg-gradient-to-br from-gray-900 to-purple-900/20 border border-purple-500/30 rounded-xl w-full max-w-4xl h-[80vh] flex flex-col">
        {/* Header */}
        <div className="p-4 border-b border-purple-500/30 flex items-center justify-between">
          <div className="flex items-center">
            <span className="w-8 h-8 bg-gradient-to-br from-purple-400 to-purple-600 rounded-lg flex items-center justify-center mr-3 text-lg">
              💬
            </span>
            <div>
              <h3 className="text-lg font-bold text-white">Trade Follow-up Assistant</h3>
              {activePosition ? (
                <p className="text-sm text-purple-300">
                  {activePosition.symbol} {activePosition.side} • Entry: ${activePosition.entryPrice}
                </p>
              ) : (
                <p className="text-sm text-gray-400">No active positions</p>
              )}
            </div>
          </div>
          <div className="flex items-center space-x-3">
            {/* System Status Indicator */}
            <div className="flex items-center space-x-1">
              <div className={`w-2 h-2 rounded-full ${systemStatus?.api ? 'bg-green-400' : 'bg-red-400'}`}></div>
              <span className="text-xs text-gray-400">
                {systemStatus?.api && systemStatus?.wallet && systemStatus?.trading ? 'All Systems' : 'System Issues'}
              </span>
            </div>
            <button
              onClick={onClose}
              className="w-8 h-8 bg-red-500/20 hover:bg-red-500/40 rounded-lg flex items-center justify-center text-red-400 transition-colors"
            >
              ✕
            </button>
          </div>
        </div>

        {/* Chat Messages */}
        <div className="flex-1 overflow-y-auto p-4 space-y-4">
          {chatMessages.map((message) => (
            <div
              key={message.id}
              className={`flex ${message.type === 'user' ? 'justify-end' : 'justify-start'}`}
            >
              <div
                className={`max-w-[80%] p-3 rounded-lg ${
                  message.type === 'user'
                    ? 'bg-purple-600 text-white'
                    : message.type === 'system'
                    ? 'bg-blue-600/20 border border-blue-500/30 text-blue-300'
                    : 'bg-gray-800 text-gray-300'
                }`}
              >
                {formatMessage(message.content)}
                
                {/* Show screenshots if available */}
                {message.screenshots && message.screenshots.length > 0 && (
                  <div className="mt-3 grid grid-cols-2 gap-2">
                    {message.screenshots.map((screenshot, index) => (
                      <img
                        key={index}
                        src={`/api/image?file=${screenshot.split('/').pop()}`}
                        alt={`Analysis screenshot ${index + 1}`}
                        className="w-full rounded border border-gray-600 cursor-pointer hover:border-purple-500/50 transition-colors"
                        onClick={() => {
                          // TODO: Open enlarged view
                        }}
                      />
                    ))}
                  </div>
                )}
                
                <div className="text-xs opacity-60 mt-2">
                  {new Date(message.timestamp).toLocaleTimeString()}
                </div>
              </div>
            </div>
          ))}
          
          {isAnalyzing && (
            <div className="flex justify-start">
              <div className="bg-purple-600/20 border border-purple-500/30 p-3 rounded-lg">
                <div className="flex items-center space-x-2">
                  <div className="animate-spin w-4 h-4 border-2 border-purple-400 border-t-transparent rounded-full"></div>
                  <span className="text-purple-300">Analyzing market conditions...</span>
                </div>
              </div>
            </div>
          )}
          
          <div ref={chatEndRef} />
        </div>

        {/* Quick Actions */}
        {activePosition && (
          <div className="p-4 border-t border-purple-500/30">
            <div className="mb-3">
              <div className="text-xs text-gray-400 mb-2">Quick Actions:</div>
              <div className="flex flex-wrap gap-2">
                {quickActions.map((action, index) => (
                  <button
                    key={index}
                    onClick={() => setCurrentMessage(action)}
                    className="px-3 py-1 bg-purple-600/20 hover:bg-purple-600/40 border border-purple-500/30 rounded-full text-xs text-purple-300 transition-colors"
                  >
                    {action}
                  </button>
                ))}
              </div>
            </div>
          </div>
        )}

        {/* Message Input */}
        <div className="p-4 border-t border-purple-500/30">
          <div className="flex items-center space-x-3">
            <textarea
              value={currentMessage}
              onChange={(e) => setCurrentMessage(e.target.value)}
              onKeyPress={handleKeyPress}
              placeholder={
                activePosition 
                  ? "Ask about your trade: 'Should I exit?', 'Update analysis', 'Move stop loss'..."
                  : "No active positions to analyze"
              }
              disabled={!activePosition || isLoading}
              className="flex-1 bg-gray-800 border border-gray-600 rounded-lg px-4 py-2 text-white placeholder-gray-400 focus:border-purple-500 focus:outline-none resize-none"
              rows={2}
            />
            <button
              onClick={handleSendMessage}
              disabled={!currentMessage.trim() || isLoading || !activePosition}
              className="w-10 h-10 bg-purple-600 hover:bg-purple-700 disabled:bg-gray-600 disabled:cursor-not-allowed rounded-lg flex items-center justify-center text-white transition-colors"
            >
              {isLoading ? (
                <div className="animate-spin w-4 h-4 border-2 border-white border-t-transparent rounded-full"></div>
              ) : (
                '📤'
              )}
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}