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

interface TradeParams {
  symbol: string
  side: 'BUY' | 'SELL'
  amount: number
  orderType?: 'MARKET' | 'LIMIT'
  price?: number
}

export default function DriftTradingPanel() {
  const [symbol, setSymbol] = useState('SOLUSD')
  const [side, setSide] = useState<'BUY' | 'SELL'>('BUY')
  const [amount, setAmount] = useState('')
  const [orderType, setOrderType] = useState<'MARKET' | 'LIMIT'>('MARKET')
  const [price, setPrice] = useState('')
  const [loading, setLoading] = useState(false)
  const [result, setResult] = useState<any>(null)

  const availableSymbols = [
    'SOLUSD', 'BTCUSD', 'ETHUSD', 'DOTUSD', 'AVAXUSD', 'ADAUSD',
    'MATICUSD', 'LINKUSD', 'ATOMUSD', 'NEARUSD', 'APTUSD', 'ORBSUSD',
    'RNDUSD', 'WIFUSD', 'JUPUSD', 'TNSUSD', 'DOGEUSD', 'PEPE1KUSD',
    'POPCATUSD', 'BOMERUSD'
  ]

  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),
        orderType,
        price: orderType === 'LIMIT' ? parseFloat(price) : undefined
      }

      const response = await fetch('/api/trading', {
        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('BUY')}
              className={`btn ${side === 'BUY' ? 'btn-primary' : 'btn-secondary'}`}
            >
              🟢 Buy
            </button>
            <button
              onClick={() => setSide('SELL')}
              className={`btn ${side === 'SELL' ? 'btn-primary' : 'btn-secondary'}`}
            >
              🔴 Sell
            </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>

        {/* 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>
        )}

        {/* 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}`
          )}
        </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>
  )
}