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

interface TradeParams {
  symbol: string
  side: 'LONG' | 'SHORT'
  amount: number
  leverage: number
  orderType?: 'MARKET' | 'LIMIT'
  price?: number
  stopLoss?: number
  takeProfit?: number
  stopLossType?: string
  takeProfitType?: string
}

export default function DriftTradingPanel() {
  const [symbol, setSymbol] = useState('SOL-PERP')
  const [side, setSide] = useState<'LONG' | 'SHORT'>('LONG')
  const [amount, setAmount] = useState('')
  const [leverage, setLeverage] = useState(1)
  const [orderType, setOrderType] = useState<'MARKET' | 'LIMIT'>('MARKET')
  const [price, setPrice] = useState('')
  const [stopLoss, setStopLoss] = useState('')
  const [takeProfit, setTakeProfit] = useState('')
  const [loading, setLoading] = useState(false)
  const [result, setResult] = useState<any>(null)

  const availableSymbols = [
    'SOL-PERP', 'BTC-PERP', 'ETH-PERP', 'DOT-PERP', 'AVAX-PERP', 'ADA-PERP',
    'MATIC-PERP', 'LINK-PERP', 'ATOM-PERP', 'NEAR-PERP', 'APT-PERP', 'ORBS-PERP',
    'RND-PERP', 'WIF-PERP', 'JUP-PERP', 'TNS-PERP', 'DOGE-PERP', 'PEPE-PERP',
    'POPCAT-PERP', 'BOME-PERP'
  ]

  const handleTrade = async () => {
    if (!amount || parseFloat(amount) <= 0) {
      setResult({ success: false, error: 'Please enter a valid amount' })
      return
    }

    if (orderType === 'LIMIT' && (!price || parseFloat(price) <= 0)) {
      setResult({ success: false, error: 'Please enter a valid price for limit orders' })
      return
    }

    setLoading(true)
    setResult(null)

    try {
      const tradeParams: TradeParams = {
        symbol,
        side,
        amount: parseFloat(amount),
        leverage,
        orderType,
        price: orderType === 'LIMIT' ? parseFloat(price) : undefined,
        stopLoss: stopLoss ? parseFloat(stopLoss) : undefined,
        takeProfit: takeProfit ? parseFloat(takeProfit) : undefined,
        stopLossType: 'MARKET',
        takeProfitType: 'MARKET'
      }

      const response = await fetch('/api/drift/trade', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(tradeParams)
      })

      const data = await response.json()
      setResult(data)

      if (data.success) {
        // Clear form on success
        setAmount('')
        setPrice('')
      }
    } catch (error: any) {
      setResult({ success: false, error: error.message })
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="card card-gradient">
      <div className="flex items-center justify-between mb-6">
        <h2 className="text-lg font-bold text-white flex items-center">
          <span className="text-xl mr-2">🌊</span>
          Drift Trading
        </h2>
        <div className="flex items-center text-sm text-gray-400">
          <span className="w-2 h-2 bg-blue-400 rounded-full mr-2 animate-pulse"></span>
          Live
        </div>
      </div>

      <div className="space-y-4">
        {/* Symbol Selection */}
        <div>
          <label className="block text-sm font-medium text-gray-400 mb-2">Symbol</label>
          <select
            value={symbol}
            onChange={(e) => setSymbol(e.target.value)}
            className="input w-full"
          >
            {availableSymbols.map(sym => (
              <option key={sym} value={sym}>{sym}</option>
            ))}
          </select>
        </div>

        {/* Side Selection */}
        <div>
          <label className="block text-sm font-medium text-gray-400 mb-2">Side</label>
          <div className="grid grid-cols-2 gap-2">
            <button
              onClick={() => setSide('LONG')}
              className={`btn ${side === 'LONG' ? 'btn-primary' : 'btn-secondary'}`}
            >
              🟢 Long
            </button>
            <button
              onClick={() => setSide('SHORT')}
              className={`btn ${side === 'SHORT' ? 'btn-primary' : 'btn-secondary'}`}
            >
              🔴 Short
            </button>
          </div>
        </div>

        {/* Order Type */}
        <div>
          <label className="block text-sm font-medium text-gray-400 mb-2">Order Type</label>
          <div className="grid grid-cols-2 gap-2">
            <button
              onClick={() => setOrderType('MARKET')}
              className={`btn ${orderType === 'MARKET' ? 'btn-primary' : 'btn-secondary'}`}
            >
              Market
            </button>
            <button
              onClick={() => setOrderType('LIMIT')}
              className={`btn ${orderType === 'LIMIT' ? 'btn-primary' : 'btn-secondary'}`}
            >
              Limit
            </button>
          </div>
        </div>

        {/* Amount */}
        <div>
          <label className="block text-sm font-medium text-gray-400 mb-2">Amount (USD)</label>
          <input
            type="number"
            value={amount}
            onChange={(e) => setAmount(e.target.value)}
            placeholder="100.00"
            min="0"
            step="0.01"
            className="input w-full"
          />
        </div>

        {/* Leverage */}
        <div>
          <label className="block text-sm font-medium text-gray-400 mb-2">Leverage: {leverage}x</label>
          <input
            type="range"
            min="1"
            max="20"
            value={leverage}
            onChange={(e) => setLeverage(parseInt(e.target.value))}
            className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
          />
          <div className="flex justify-between text-xs text-gray-500 mt-1">
            <span>1x</span>
            <span>5x</span>
            <span>10x</span>
            <span>20x</span>
          </div>
        </div>

        {/* Price (only for limit orders) */}
        {orderType === 'LIMIT' && (
          <div>
            <label className="block text-sm font-medium text-gray-400 mb-2">Price (USD)</label>
            <input
              type="number"
              value={price}
              onChange={(e) => setPrice(e.target.value)}
              placeholder="0.00"
              min="0"
              step="0.01"
              className="input w-full"
            />
          </div>
        )}

        {/* Risk Management */}
        <div className="grid grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-gray-400 mb-2">Stop Loss (USD)</label>
            <input
              type="number"
              value={stopLoss}
              onChange={(e) => setStopLoss(e.target.value)}
              placeholder="Optional"
              min="0"
              step="0.01"
              className="input w-full"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-400 mb-2">Take Profit (USD)</label>
            <input
              type="number"
              value={takeProfit}
              onChange={(e) => setTakeProfit(e.target.value)}
              placeholder="Optional"
              min="0"
              step="0.01"
              className="input w-full"
            />
          </div>
        </div>

        {/* Trade Button */}
        <button
          onClick={handleTrade}
          disabled={loading}
          className="btn btn-primary w-full"
        >
          {loading ? (
            <span className="flex items-center justify-center">
              <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
              Executing...
            </span>
          ) : (
            `${side} ${symbol} ${leverage}x`
          )}
        </button>

        {/* Result Display */}
        {result && (
          <div className={`p-4 rounded-lg ${
            result.success 
              ? 'bg-green-500/20 border border-green-500/50' 
              : 'bg-red-500/20 border border-red-500/50'
          }`}>
            {result.success ? (
              <div>
                <p className="text-green-400 font-medium">✅ Trade Executed Successfully!</p>
                {result.txId && (
                  <p className="text-sm text-gray-400 mt-1">
                    TX: {result.txId.slice(0, 8)}...{result.txId.slice(-8)}
                  </p>
                )}
              </div>
            ) : (
              <p className="text-red-400">❌ {result.error}</p>
            )}
          </div>
        )}
      </div>
    </div>
  )
}