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

interface CompactTradingPanelProps {
  symbol: string
  currentPrice: number
  onTrade?: (tradeData: any) => void
}

export default function CompactTradingPanel({ 
  symbol = 'SOL', 
  currentPrice = 166.21, 
  onTrade 
}: CompactTradingPanelProps) {
  const [side, setSide] = useState<'LONG' | 'SHORT'>('LONG')
  const [orderType, setOrderType] = useState<'MARKET' | 'LIMIT'>('MARKET')
  const [amount, setAmount] = useState('')
  const [price, setPrice] = useState(currentPrice.toString())
  const [leverage, setLeverage] = useState(1)
  const [stopLoss, setStopLoss] = useState('')
  const [takeProfit, setTakeProfit] = useState('')
  const [loading, setLoading] = useState(false)

  // Update price when currentPrice changes
  React.useEffect(() => {
    if (orderType === 'MARKET') {
      setPrice(currentPrice.toString())
    }
  }, [currentPrice, orderType])

  const calculateLiquidationPrice = () => {
    const entryPrice = parseFloat(price) || currentPrice
    const leverage_ratio = leverage || 1
    if (side === 'LONG') {
      return entryPrice * (1 - 1 / leverage_ratio)
    } else {
      return entryPrice * (1 + 1 / leverage_ratio)
    }
  }

  const calculatePositionSize = () => {
    const amt = parseFloat(amount) || 0
    const entryPrice = parseFloat(price) || currentPrice
    return amt * entryPrice
  }

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

    setLoading(true)
    try {
      const tradeData = {
        symbol,
        side: side === 'LONG' ? 'BUY' : 'SELL',
        amount: parseFloat(amount),
        price: orderType === 'MARKET' ? currentPrice : parseFloat(price),
        type: orderType.toLowerCase(),
        leverage,
        stopLoss: stopLoss ? parseFloat(stopLoss) : undefined,
        takeProfit: takeProfit ? parseFloat(takeProfit) : undefined,
        tradingMode: 'PERP'
      }

      onTrade?.(tradeData)
    } catch (error) {
      console.error('Trade execution failed:', error)
    } finally {
      setLoading(false)
    }
  }

  const leverageOptions = [1, 2, 3, 5, 10, 20, 25, 50, 100]

  return (
    <div className="bg-gray-900 rounded-lg p-4 space-y-4">
      {/* Header */}
      <div className="flex items-center justify-between">
        <h3 className="text-lg font-semibold text-white">{symbol}/USDC</h3>
        <div className="text-sm text-gray-400">
          ${currentPrice.toFixed(2)}
        </div>
      </div>

      {/* Long/Short Toggle */}
      <div className="grid grid-cols-2 gap-2">
        <button
          onClick={() => setSide('LONG')}
          className={`p-3 rounded-lg font-semibold transition-all ${
            side === 'LONG'
              ? 'bg-green-600 text-white'
              : 'bg-gray-800 text-gray-400 hover:bg-gray-700'
          }`}
        >
          Long/Buy
        </button>
        <button
          onClick={() => setSide('SHORT')}
          className={`p-3 rounded-lg font-semibold transition-all ${
            side === 'SHORT'
              ? 'bg-red-600 text-white'
              : 'bg-gray-800 text-gray-400 hover:bg-gray-700'
          }`}
        >
          Short/Sell
        </button>
      </div>

      {/* Order Type */}
      <div className="grid grid-cols-2 gap-2">
        <button
          onClick={() => setOrderType('MARKET')}
          className={`p-2 rounded text-sm transition-all ${
            orderType === 'MARKET'
              ? 'bg-blue-600 text-white'
              : 'bg-gray-800 text-gray-400 hover:bg-gray-700'
          }`}
        >
          Market
        </button>
        <button
          onClick={() => setOrderType('LIMIT')}
          className={`p-2 rounded text-sm transition-all ${
            orderType === 'LIMIT'
              ? 'bg-blue-600 text-white'
              : 'bg-gray-800 text-gray-400 hover:bg-gray-700'
          }`}
        >
          Limit
        </button>
      </div>

      {/* Leverage Slider */}
      <div className="space-y-2">
        <div className="flex justify-between items-center">
          <label className="text-sm text-gray-400">Leverage</label>
          <span className="text-white font-semibold">{leverage}x</span>
        </div>
        <div className="relative">
          <input
            type="range"
            min="1"
            max="100"
            value={leverage}
            onChange={(e) => setLeverage(parseInt(e.target.value))}
            className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer slider"
          />
          <div className="flex justify-between text-xs text-gray-500 mt-1">
            {leverageOptions.map(lev => (
              <span key={lev}>{lev}x</span>
            ))}
          </div>
        </div>
      </div>

      {/* Amount Input */}
      <div className="space-y-2">
        <label className="text-sm text-gray-400">Amount ({symbol})</label>
        <div className="relative">
          <input
            type="number"
            value={amount}
            onChange={(e) => setAmount(e.target.value)}
            placeholder="0.00"
            className="w-full p-3 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:border-blue-500 focus:outline-none"
          />
          <div className="absolute right-3 top-3 flex space-x-1">
            <button
              onClick={() => setAmount('0.25')}
              className="px-2 py-1 text-xs bg-gray-700 text-gray-300 rounded hover:bg-gray-600"
            >
              25%
            </button>
            <button
              onClick={() => setAmount('0.5')}
              className="px-2 py-1 text-xs bg-gray-700 text-gray-300 rounded hover:bg-gray-600"
            >
              50%
            </button>
            <button
              onClick={() => setAmount('1.0')}
              className="px-2 py-1 text-xs bg-gray-700 text-gray-300 rounded hover:bg-gray-600"
            >
              MAX
            </button>
          </div>
        </div>
      </div>

      {/* Price Input (for limit orders) */}
      {orderType === 'LIMIT' && (
        <div className="space-y-2">
          <label className="text-sm text-gray-400">Price (USDC)</label>
          <input
            type="number"
            value={price}
            onChange={(e) => setPrice(e.target.value)}
            placeholder="0.00"
            className="w-full p-3 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:border-blue-500 focus:outline-none"
          />
        </div>
      )}

      {/* Stop Loss & Take Profit */}
      <div className="grid grid-cols-2 gap-2">
        <div className="space-y-1">
          <label className="text-xs text-gray-400">Stop Loss</label>
          <input
            type="number"
            value={stopLoss}
            onChange={(e) => setStopLoss(e.target.value)}
            placeholder="Optional"
            className="w-full p-2 bg-gray-800 border border-gray-700 rounded text-white placeholder-gray-400 text-sm focus:border-red-500 focus:outline-none"
          />
        </div>
        <div className="space-y-1">
          <label className="text-xs text-gray-400">Take Profit</label>
          <input
            type="number"
            value={takeProfit}
            onChange={(e) => setTakeProfit(e.target.value)}
            placeholder="Optional"
            className="w-full p-2 bg-gray-800 border border-gray-700 rounded text-white placeholder-gray-400 text-sm focus:border-green-500 focus:outline-none"
          />
        </div>
      </div>

      {/* Position Info */}
      <div className="space-y-2 p-3 bg-gray-800 rounded-lg">
        <div className="flex justify-between text-sm">
          <span className="text-gray-400">Position Size:</span>
          <span className="text-white">${calculatePositionSize().toFixed(2)}</span>
        </div>
        <div className="flex justify-between text-sm">
          <span className="text-gray-400">Liquidation Price:</span>
          <span className="text-orange-400">${calculateLiquidationPrice().toFixed(2)}</span>
        </div>
        <div className="flex justify-between text-sm">
          <span className="text-gray-400">Available:</span>
          <span className="text-white">$5,000.00</span>
        </div>
      </div>

      {/* Trade Button */}
      <button
        onClick={handleTrade}
        disabled={loading || !amount}
        className={`w-full p-4 rounded-lg font-semibold text-white transition-all ${
          side === 'LONG'
            ? 'bg-green-600 hover:bg-green-700 disabled:bg-gray-600'
            : 'bg-red-600 hover:bg-red-700 disabled:bg-gray-600'
        } disabled:cursor-not-allowed`}
      >
        {loading ? 'Executing...' : `${side === 'LONG' ? 'Long' : 'Short'} ${symbol}`}
      </button>

      {/* Quick Actions */}
      <div className="flex space-x-2 text-xs">
        <button className="flex-1 p-2 bg-gray-800 text-gray-400 rounded hover:bg-gray-700">
          Close All
        </button>
        <button className="flex-1 p-2 bg-gray-800 text-gray-400 rounded hover:bg-gray-700">
          Reverse
        </button>
      </div>
    </div>
  )
}