'use client'
import React, { useState, useEffect } from 'react'
import TradeExecutionPanel from '../../components/TradeExecutionPanel.js'
import PositionsPanel from '../../components/PositionsPanel.js'
import PendingOrdersPanel from '../../components/PendingOrdersPanel.js'
import TradesHistoryPanel from '../../components/TradesHistoryPanel.js'

export default function TradingPage() {
  const [selectedSymbol, setSelectedSymbol] = useState('SOL')
  const [balance, setBalance] = useState(null)
  const [loading, setLoading] = useState(false)

  const symbols = [
    { name: 'Solana', symbol: 'SOL', icon: '◎', color: 'from-purple-400 to-purple-600' },
    { name: 'Bitcoin', symbol: 'BTC', icon: '₿', color: 'from-orange-400 to-orange-600' },
    { name: 'Ethereum', symbol: 'ETH', icon: 'Ξ', color: 'from-blue-400 to-blue-600' },
  ]

  useEffect(() => {
    fetchBalance()
  }, [])

  const fetchBalance = async () => {
    setLoading(true)
    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)
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="space-y-8">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-white">Manual Trading</h1>
          <p className="text-gray-400 mt-2">Execute trades using Bitquery integration</p>
        </div>
        <button
          onClick={fetchBalance}
          disabled={loading}
          className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
        >
          {loading ? 'Refreshing...' : 'Refresh Balance'}
        </button>
      </div>

      {/* Symbol Selection */}
      <div className="card card-gradient p-6">
        <h2 className="text-xl font-bold text-white mb-4">Select Trading Symbol</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {symbols.map((coin) => (
            <button
              key={coin.symbol}
              onClick={() => setSelectedSymbol(coin.symbol)}
              className={`p-4 rounded-lg border-2 transition-all ${
                selectedSymbol === coin.symbol
                  ? 'border-blue-500 bg-blue-500/10'
                  : 'border-gray-600 hover:border-gray-500'
              }`}
            >
              <div className={`w-12 h-12 rounded-full bg-gradient-to-br ${coin.color} flex items-center justify-center mx-auto mb-3`}>
                <span className="text-white text-xl font-bold">{coin.icon}</span>
              </div>
              <div className="text-white font-medium">{coin.name}</div>
              <div className="text-gray-400 text-sm">{coin.symbol}</div>
            </button>
          ))}
        </div>
      </div>
      
      <div className="grid grid-cols-1 xl:grid-cols-2 gap-8">
        <div className="space-y-6">
          <TradeExecutionPanel 
            symbol={selectedSymbol}
          />
        </div>
        
        <div className="space-y-6">
          {/* Open Positions */}
          <PositionsPanel />

          {/* Pending Orders */}
          <PendingOrdersPanel />

          {/* Portfolio Overview */}
          <div className="card card-gradient p-6">
            <h2 className="text-xl font-bold text-white mb-4">Wallet Overview</h2>
            {balance ? (
              <div className="space-y-4">
                <div className="flex justify-between items-center">
                  <span className="text-gray-300">Total Value:</span>
                  <span className="text-xl font-bold text-white">${balance.totalValue?.toFixed(2)}</span>
                </div>
                <div className="flex justify-between items-center">
                  <span className="text-gray-300">Available Balance:</span>
                  <span className="text-lg font-semibold text-green-400">${balance.availableBalance?.toFixed(2)}</span>
                </div>
                
                {balance.positions && balance.positions.length > 0 && (
                  <div className="mt-6">
                    <h3 className="text-lg font-semibold text-white mb-3">Wallet Holdings</h3>
                    <div className="space-y-2">
                      {balance.positions.map((position, index) => (
                        <div key={index} className="flex justify-between items-center p-3 bg-gray-800 rounded-lg">
                          <div>
                            <span className="text-white font-medium">{position.symbol}</span>
                            <div className="text-sm text-gray-400">${position.price?.toFixed(4)}</div>
                          </div>
                          <div className="text-right">
                            <div className="text-white font-medium">{position.amount}</div>
                            <div className={`text-sm ${
                              position.change24h >= 0 ? 'text-green-400' : 'text-red-400'
                            }`}>
                              {position.change24h >= 0 ? '+' : ''}{position.change24h?.toFixed(2)}%
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            ) : (
              <div className="text-gray-400">
                {loading ? 'Loading wallet...' : 'Failed to load wallet data'}
              </div>
            )}
          </div>
          
          {/* Recent Trades */}
          <TradesHistoryPanel />
        </div>
      </div>
    </div>
  )
}