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

export default function TradeExecutionPanel({ analysis, symbol = 'SOL' }) {
  const [tradeType, setTradeType] = useState('BUY')
  const [amount, setAmount] = useState('')
  const [customPrice, setCustomPrice] = useState('')
  const [useRecommendedPrice, setUseRecommendedPrice] = useState(true)
  const [isExecuting, setIsExecuting] = useState(false)
  const [executionResult, setExecutionResult] = useState(null)
  const [balance, setBalance] = useState(null)
  
  // Trading mode and pair selection
  const [tradingMode, setTradingMode] = useState('SPOT') // 'SPOT' or 'PERP'
  const [tradingPair, setTradingPair] = useState('SOL/USDC') // SOL/USDC or USDC/SOL
  
  // TP/SL functionality
  const [enableStopLoss, setEnableStopLoss] = useState(false)
  const [stopLoss, setStopLoss] = useState('')
  const [enableTakeProfit, setEnableTakeProfit] = useState(false)
  const [takeProfit, setTakeProfit] = useState('')
  const [useRealDEX, setUseRealDEX] = useState(false)
  
  // Perp trading settings
  const [leverage, setLeverage] = useState(1)
  const [perpSize, setPerpSize] = useState('')
  
  // USDC stablecoin features
  const [quickSwapMode, setQuickSwapMode] = useState(false)
  const [usdcSwapAmount, setUsdcSwapAmount] = useState('')

  // Auto-fill TP/SL from AI analysis
  useEffect(() => {
    if (analysis) {
      if (analysis.stopLoss?.price) {
        setStopLoss(analysis.stopLoss.price.toString())
        setEnableStopLoss(true)
      }
      if (analysis.takeProfits?.tp1?.price) {
        setTakeProfit(analysis.takeProfits.tp1.price.toString())
        setEnableTakeProfit(true)
      }
    }
  }, [analysis])

  // Get recommended price from analysis
  const getRecommendedPrice = () => {
    if (!analysis) return null
    
    if (analysis.recommendation === 'BUY' && analysis.entry?.price) {
      return analysis.entry.price
    } else if (analysis.recommendation === 'SELL' && analysis.entry?.price) {
      return analysis.entry.price
    }
    
    return null
  }

  const recommendedPrice = getRecommendedPrice()

  // Fetch balance on component mount
  useEffect(() => {
    fetchBalance()
  }, [])

  const fetchBalance = async () => {
    try {
      const response = await fetch('/api/trading/balance')
      const data = await response.json()
      
      if (data.success) {
        setBalance(data.balance)
      }
    } catch (error) {
      console.error('Failed to fetch balance:', error)
    }
  }

  const executeQuickUSDCSwap = async () => {
    if (!usdcSwapAmount || parseFloat(usdcSwapAmount) <= 0) {
      alert('Please enter a valid USDC swap amount')
      return
    }

    setIsExecuting(true)
    setExecutionResult(null)

    try {
      const swapData = {
        symbol: 'SOL',
        side: 'SELL', // Sell SOL for USDC
        amount: parseFloat(usdcSwapAmount),
        tradingPair: 'SOL/USDC',
        tradingMode: 'SPOT',
        useRealDEX: true,
        quickSwap: true
      }

      const response = await fetch('/api/trading/execute-dex', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(swapData)
      })

      const result = await response.json()
      
      if (result.success) {
        setExecutionResult({
          success: true,
          trade: result.trade,
          message: `✅ Quick swapped ${usdcSwapAmount} SOL to USDC`
        })
        await fetchBalance()
        setUsdcSwapAmount('')
      } else {
        setExecutionResult({
          success: false,
          error: result.error,
          message: result.message
        })
      }
    } catch (error) {
      setExecutionResult({
        success: false,
        error: 'Network error',
        message: 'Failed to execute USDC swap. Please try again.'
      })
    } finally {
      setIsExecuting(false)
    }
  }

  const executeTrade = async () => {
    if (!amount || parseFloat(amount) <= 0) {
      alert('Please enter a valid amount')
      return
    }

    setIsExecuting(true)
    setExecutionResult(null)

    try {
      const tradePrice = useRecommendedPrice && recommendedPrice 
        ? recommendedPrice 
        : customPrice ? parseFloat(customPrice) : undefined

      // Prepare trade data based on trading mode
      let tradeData = {
        symbol,
        side: tradeType,
        amount: parseFloat(amount),
        price: tradePrice,
        orderType: tradePrice ? 'limit' : 'market',
        useRealDEX: useRealDEX,
        tradingMode: tradingMode,
        tradingPair: tradingPair
      }

      // Add TP/SL if enabled
      if (enableStopLoss && stopLoss) {
        tradeData.stopLoss = parseFloat(stopLoss)
      }
      if (enableTakeProfit && takeProfit) {
        tradeData.takeProfit = parseFloat(takeProfit)
      }

      // Add perpetuals specific data
      if (tradingMode === 'PERP') {
        tradeData.leverage = leverage
        tradeData.perpSize = perpSize ? parseFloat(perpSize) : parseFloat(amount)
      }

      // Determine API endpoint based on trading mode
      let apiEndpoint = '/api/trading/execute'
      
      if (tradingMode === 'PERP') {
        apiEndpoint = '/api/trading/execute-perp'
      } else if (useRealDEX || quickSwapMode) {
        apiEndpoint = '/api/trading/execute-dex'
      }
      
      const response = await fetch(apiEndpoint, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(tradeData)
      })

      const result = await response.json()
      
      if (result.success) {
        setExecutionResult({
          success: true,
          trade: result.trade,
          message: result.message
        })
        // Refresh balance after successful trade
        await fetchBalance()
      } else {
        setExecutionResult({
          success: false,
          error: result.error,
          message: result.message
        })
      }
    } catch (error) {
      setExecutionResult({
        success: false,
        error: 'Network error',
        message: 'Failed to execute trade. Please try again.'
      })
    } finally {
      setIsExecuting(false)
    }
  }

  const getTradeButtonColor = () => {
    if (tradeType === 'BUY') return 'bg-green-600 hover:bg-green-700'
    return 'bg-red-600 hover:bg-red-700'
  }

  const getRecommendationColor = () => {
    if (!analysis) return 'text-gray-400'
    
    switch (analysis.recommendation) {
      case 'BUY': return 'text-green-400'
      case 'SELL': return 'text-red-400'
      default: return 'text-yellow-400'
    }
  }

  return (
    <div className="card card-gradient p-6 space-y-6">
      <div className="flex items-center justify-between">
        <h2 className="text-xl font-bold text-white">Execute Trade</h2>
        <div className="text-sm text-gray-400">
          {symbol} Trading
        </div>
      </div>

      {/* Balance Display */}
      {balance && (
        <div className="bg-gray-800 rounded-lg p-4">
          <h3 className="text-sm font-medium text-gray-300 mb-2">Portfolio Balance</h3>
          <div className="flex justify-between items-center">
            <span className="text-lg font-bold text-white">
              ${balance.totalValue?.toFixed(2)}
            </span>
            <span className="text-sm text-gray-400">
              Available: ${balance.availableBalance?.toFixed(2)}
            </span>
          </div>
        </div>
      )}

      {/* AI Recommendation Display */}
      {analysis && (
        <div className="bg-gray-800 rounded-lg p-4">
          <h3 className="text-sm font-medium text-gray-300 mb-2">AI Recommendation</h3>
          <div className="flex items-center justify-between mb-2">
            <span className={`font-bold text-lg ${getRecommendationColor()}`}>
              {analysis.recommendation}
            </span>
            <span className="text-sm text-gray-400">
              {analysis.confidence}% confidence
            </span>
          </div>
          {recommendedPrice && (
            <div className="text-sm text-gray-300">
              Entry: ${recommendedPrice.toFixed(4)}
              {analysis.entry?.buffer && (
                <span className="text-gray-400 ml-1">({analysis.entry.buffer})</span>
              )}
            </div>
          )}
          {analysis.stopLoss && (
            <div className="text-sm text-gray-300">
              Stop Loss: ${analysis.stopLoss.price.toFixed(4)}
            </div>
          )}
          {analysis.takeProfits?.tp1 && (
            <div className="text-sm text-gray-300">
              TP1: ${analysis.takeProfits.tp1.price.toFixed(4)}
            </div>
          )}
          <div className="text-xs text-gray-400 mt-2">
            {analysis.reasoning}
          </div>
        </div>
      )}

      {/* Trading Mode Selection */}
      <div className="space-y-3">
        <label className="block text-sm font-medium text-gray-300">Trading Mode</label>
        <div className="grid grid-cols-2 gap-2">
          <button
            onClick={() => setTradingMode('SPOT')}
            className={`py-2 px-4 rounded-lg font-medium transition-colors text-sm ${
              tradingMode === 'SPOT' 
                ? 'bg-blue-600 text-white' 
                : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
            }`}
          >
            💱 Spot Trading
          </button>
          <button
            onClick={() => setTradingMode('PERP')}
            className={`py-2 px-4 rounded-lg font-medium transition-colors text-sm ${
              tradingMode === 'PERP' 
                ? 'bg-orange-600 text-white' 
                : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
            }`}
          >
            ⚡ Perpetuals
          </button>
        </div>
      </div>

      {/* Trading Pair Selection (for Spot) */}
      {tradingMode === 'SPOT' && (
        <div className="space-y-3">
          <label className="block text-sm font-medium text-gray-300">Trading Pair</label>
          <div className="grid grid-cols-2 gap-2">
            <button
              onClick={() => setTradingPair('SOL/USDC')}
              className={`py-2 px-3 rounded-lg font-medium transition-colors text-sm ${
                tradingPair === 'SOL/USDC' 
                  ? 'bg-purple-600 text-white' 
                  : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
              }`}
            >
              SOL → USDC
            </button>
            <button
              onClick={() => setTradingPair('USDC/SOL')}
              className={`py-2 px-3 rounded-lg font-medium transition-colors text-sm ${
                tradingPair === 'USDC/SOL' 
                  ? 'bg-green-600 text-white' 
                  : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
              }`}
            >
              USDC → SOL
            </button>
          </div>
          <div className="text-xs text-gray-400">
            {tradingPair === 'SOL/USDC' ? 'Swap SOL for USDC stablecoin' : 'Buy SOL with USDC'}
          </div>
        </div>
      )}

      {/* Leverage Selection (for Perps) */}
      {tradingMode === 'PERP' && (
        <div className="space-y-3">
          <label className="block text-sm font-medium text-gray-300">Leverage</label>
          <div className="grid grid-cols-4 gap-2">
            {[1, 2, 5, 10].map(lev => (
              <button
                key={lev}
                onClick={() => setLeverage(lev)}
                className={`py-2 px-3 rounded-lg font-medium transition-colors text-sm ${
                  leverage === lev 
                    ? 'bg-orange-600 text-white' 
                    : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
                }`}
              >
                {lev}x
              </button>
            ))}
          </div>
          <div className="text-xs text-gray-400">
            ⚠️ Higher leverage = Higher risk. Max 10x for safety.
          </div>
        </div>
      )}

      {/* Trade Type Selection */}
      <div className="grid grid-cols-2 gap-2">
        <button
          onClick={() => setTradeType('BUY')}
          className={`py-2 px-4 rounded-lg font-medium transition-colors ${
            tradeType === 'BUY' 
              ? 'bg-green-600 text-white' 
              : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
          }`}
        >
          {tradingMode === 'PERP' ? 'LONG' : 'BUY'}
        </button>
        <button
          onClick={() => setTradeType('SELL')}
          className={`py-2 px-4 rounded-lg font-medium transition-colors ${
            tradeType === 'SELL' 
              ? 'bg-red-600 text-white' 
              : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
          }`}
        >
          {tradingMode === 'PERP' ? 'SHORT' : 'SELL'}
        </button>
      </div>

      {/* Amount Input */}
      <div>
        <label className="block text-sm font-medium text-gray-300 mb-2">
          {tradingMode === 'PERP' ? 'Position Size (USD)' : `Amount (${tradingPair.split('/')[0]})`}
        </label>
        <input
          type="number"
          value={amount}
          onChange={(e) => setAmount(e.target.value)}
          placeholder="0.00"
          step="0.001"
          min="0"
          className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
      </div>

      {/* Price Selection */}
      <div className="space-y-3">
        <label className="block text-sm font-medium text-gray-300">
          Price Selection
        </label>
        
        {recommendedPrice && (
          <label className="flex items-center space-x-3">
            <input
              type="radio"
              name="priceType"
              checked={useRecommendedPrice}
              onChange={() => setUseRecommendedPrice(true)}
              className="text-blue-500"
            />
            <span className="text-gray-300">
              Use AI Recommended Price: ${recommendedPrice.toFixed(4)}
            </span>
          </label>
        )}
        
        <label className="flex items-center space-x-3">
          <input
            type="radio"
            name="priceType"
            checked={!useRecommendedPrice}
            onChange={() => setUseRecommendedPrice(false)}
            className="text-blue-500"
          />
          <span className="text-gray-300">Market Price / Custom</span>
        </label>
        
        {!useRecommendedPrice && (
          <input
            type="number"
            value={customPrice}
            onChange={(e) => setCustomPrice(e.target.value)}
            placeholder="Enter price (leave empty for market)"
            step="0.0001"
            min="0"
            className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        )}
      </div>

      {/* Stop Loss & Take Profit */}
      <div className="space-y-4 border border-gray-600 rounded-lg p-4">
        <h3 className="text-sm font-bold text-white">Risk Management</h3>
        
        {/* Stop Loss */}
        <div className="space-y-2">
          <label className="flex items-center space-x-3">
            <input
              type="checkbox"
              checked={enableStopLoss}
              onChange={(e) => setEnableStopLoss(e.target.checked)}
              className="rounded text-red-500"
            />
            <span className="text-gray-300 font-medium">Stop Loss</span>
          </label>
          {enableStopLoss && (
            <input
              type="number"
              value={stopLoss}
              onChange={(e) => setStopLoss(e.target.value)}
              placeholder="Stop loss price"
              step="0.01"
              className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-red-500"
            />
          )}
          {enableStopLoss && analysis?.stopLoss && (
            <div className="text-xs text-gray-400">
              AI Suggested: ${analysis.stopLoss.price.toFixed(4)} - {analysis.stopLoss.rationale}
            </div>
          )}
        </div>

        {/* Take Profit */}
        <div className="space-y-2">
          <label className="flex items-center space-x-3">
            <input
              type="checkbox"
              checked={enableTakeProfit}
              onChange={(e) => setEnableTakeProfit(e.target.checked)}
              className="rounded text-green-500"
            />
            <span className="text-gray-300 font-medium">Take Profit</span>
          </label>
          {enableTakeProfit && (
            <input
              type="number"
              value={takeProfit}
              onChange={(e) => setTakeProfit(e.target.value)}
              placeholder="Take profit price"
              step="0.01"
              className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-green-500"
            />
          )}
          {enableTakeProfit && analysis?.takeProfits?.tp1 && (
            <div className="text-xs text-gray-400">
              AI Suggested: ${analysis.takeProfits.tp1.price.toFixed(4)} - {analysis.takeProfits.tp1.description}
            </div>
          )}
        </div>
      </div>

      {/* DEX Selection */}
      <div className="space-y-3 border border-gray-600 rounded-lg p-4">
        <h3 className="text-sm font-bold text-white">Execution Method</h3>
        
        <div className="grid grid-cols-2 gap-2">
          <button
            onClick={() => setUseRealDEX(false)}
            className={`py-2 px-3 rounded-lg font-medium transition-colors text-sm ${
              !useRealDEX 
                ? 'bg-blue-600 text-white' 
                : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
            }`}
          >
            📊 Simulation
          </button>
          <button
            onClick={() => setUseRealDEX(true)}
            className={`py-2 px-3 rounded-lg font-medium transition-colors text-sm ${
              useRealDEX 
                ? 'bg-purple-600 text-white' 
                : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
            }`}
          >
            🚀 Jupiter DEX
          </button>
        </div>
        
        <div className="text-xs text-gray-400">
          {useRealDEX 
            ? '⚠️ Real DEX trading uses your actual SOL/USDC and costs gas fees'
            : '🎮 Simulation mode for testing strategies without real trades'
          }
        </div>
      </div>

      {/* Quick USDC Swap - Spot mode only */}
      {tradingMode === 'SPOT' && (
        <div className="space-y-3 border border-green-600 rounded-lg p-4 bg-green-900/10">
          <h3 className="text-sm font-bold text-green-400 flex items-center gap-2">
            💱 Quick USDC Swap
            <span className="text-xs bg-green-600 text-white px-2 py-1 rounded">STABLE</span>
          </h3>
          
          <div className="text-xs text-gray-300 mb-3">
            Instantly convert SOL to USDC stablecoin to lock in profits or avoid volatility
          </div>
          
          <div className="flex gap-2">
            <input
              type="number"
              value={usdcSwapAmount}
              onChange={(e) => setUsdcSwapAmount(e.target.value)}
              placeholder="SOL amount"
              step="0.01"
              min="0"
              className="flex-1 px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-green-500"
            />
            <button
              onClick={executeQuickUSDCSwap}
              disabled={isExecuting || !usdcSwapAmount}
              className="px-4 py-2 bg-green-600 hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors text-sm"
            >
              {isExecuting ? '⏳' : '💱 Swap'}
            </button>
          </div>
          
          <div className="text-xs text-gray-400">
            Real-time swap via Jupiter DEX • Low slippage • Instant execution
          </div>
        </div>
      )}

      {/* Jupiter Perpetuals Integration - Perp mode only */}
      {tradingMode === 'PERP' && (
        <div className="space-y-3 border border-orange-600 rounded-lg p-4 bg-orange-900/10">
          <h3 className="text-sm font-bold text-orange-400 flex items-center gap-2">
            ⚡ Jupiter Perpetuals
            <span className="text-xs bg-orange-600 text-white px-2 py-1 rounded">LEVERAGE</span>
          </h3>
          
          <div className="text-xs text-gray-300 mb-3">
            Trade with leverage on Jupiter's perpetual DEX • Long or Short any asset
          </div>
          
          <div className="grid grid-cols-2 gap-2 mb-3">
            <div className="text-xs">
              <div className="text-gray-400">Leverage:</div>
              <div className="text-white font-bold">{leverage}x</div>
            </div>
            <div className="text-xs">
              <div className="text-gray-400">Liquidation Risk:</div>
              <div className={`font-bold ${leverage <= 2 ? 'text-green-400' : leverage <= 5 ? 'text-yellow-400' : 'text-red-400'}`}>
                {leverage <= 2 ? 'Low' : leverage <= 5 ? 'Medium' : 'High'}
              </div>
            </div>
          </div>
          
          <div className="text-xs text-orange-400 bg-orange-900/20 p-2 rounded border border-orange-700">
            🚧 Jupiter Perpetuals integration in development. Currently using simulation mode.
          </div>
        </div>
      )}

      {/* Execute Button */}
      <button
        onClick={executeTrade}
        disabled={isExecuting || !amount}
        className={`w-full py-3 px-4 rounded-lg font-bold text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed ${getTradeButtonColor()}`}
      >
        {isExecuting ? 'Executing...' : `${useRealDEX ? '🚀 Execute' : '🎮 Simulate'} ${tradeType} Order${(enableStopLoss || enableTakeProfit) ? ' + TP/SL' : ''}`}
      </button>

      {/* Execution Result */}
      {executionResult && (
        <div className={`p-4 rounded-lg ${
          executionResult.success ? 'bg-green-900 border border-green-600' : 'bg-red-900 border border-red-600'
        }`}>
          <div className={`font-bold ${executionResult.success ? 'text-green-400' : 'text-red-400'}`}>
            {executionResult.success ? '✅ Trade Executed' : '❌ Trade Failed'}
          </div>
          <div className="text-sm text-gray-300 mt-1">
            {executionResult.message}
          </div>
          {executionResult.trade && (
            <div className="text-xs text-gray-400 mt-2">
              TX ID: {executionResult.trade.txId}
            </div>
          )}
        </div>
      )}

      {/* Risk Warning */}
      <div className="text-xs text-gray-500 border-t border-gray-700 pt-3">
        ⚠️ Trading involves significant risk. This is a simulated trading environment using Bitquery data.
      </div>
    </div>
  )
}