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

const GREEN = '#16A34A';
const RED = '#DC2626';
const BLUE = '#2563EB';
const AMBER = '#D97706';

export default function LiveDashboard() {
  const [data, setData] = useState(null);
  const [trades, setTrades] = useState([]);
  const [loading, setLoading] = useState(true);
  const [toggling, setToggling] = useState(null);

  useEffect(() => {
    const fetchState = async () => {
      try {
        const res = await fetch('/api/live-state');
        const json = await res.json();
        setData(json);
        setLoading(false);
      } catch (e) {
        console.error('State fetch error:', e);
      }
    };
    fetchState();
    const interval = setInterval(fetchState, 2000);
    return () => clearInterval(interval);
  }, []);

  useEffect(() => {
    const fetchTrades = async () => {
      try {
        const res = await fetch('/api/live-trades');
        const json = await res.json();
        setTrades(json.trades || []);
      } catch (e) {
        console.error('Trades fetch error:', e);
      }
    };
    fetchTrades();
    const interval = setInterval(fetchTrades, 10000);
    return () => clearInterval(interval);
  }, []);

  const sendCommand = async (action, strategy = null) => {
    setToggling(strategy || action);
    try {
      await fetch('/api/live-toggle', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ action, strategy })
      });
    } catch (e) {
      console.error('Command error:', e);
    }
    setTimeout(() => setToggling(null), 1500);
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-gray-950 flex items-center justify-center">
        <div className="text-green-400 text-lg animate-pulse">Loading Live Trading...</div>
      </div>
    );
  }

  const market = data?.market;
  const live = data?.live || {};
  const strategies = data?.strategies || [];
  const enabledSet = new Set(live.enabledStrategies || []);

  return (
    <div className="min-h-screen bg-gray-950 text-gray-100 font-sans pb-20">
      {/* Header */}
      <header className="sticky top-0 z-50 bg-gray-900/95 backdrop-blur border-b border-gray-800 px-4 py-3">
        <div className="flex items-center justify-between max-w-lg mx-auto">
          <div className="flex items-center gap-2">
            <h1 className="text-lg font-bold text-green-400">Kalbot</h1>
            <span className="text-xs bg-red-900/50 text-red-400 px-2 py-0.5 rounded-full font-bold border border-red-800">LIVE</span>
          </div>
          <div className="flex items-center gap-3">
            <a href="/paper" className="text-[10px] px-2 py-1 rounded bg-gray-800 text-gray-400 border border-gray-700 hover:bg-gray-700 transition-colors">
              📝 Paper
            </a>
            <div className="flex items-center gap-1.5">
              <span className={`w-2 h-2 rounded-full ${data?.lastUpdate ? 'bg-green-500 animate-pulse' : 'bg-red-500'}`} />
              <span className="text-xs text-gray-500">{data?.lastUpdate ? 'Live' : 'Offline'}</span>
            </div>
          </div>
        </div>
      </header>

      <main className="max-w-lg mx-auto px-4 pt-4 space-y-4">
        {/* Kill Switch + Balance */}
        <div className="bg-gray-900 rounded-xl p-4 border border-gray-800">
          <div className="flex items-center justify-between mb-3">
            <div>
              <p className="text-[10px] text-gray-500 uppercase tracking-wider">Kalshi Balance</p>
              <p className="text-2xl font-bold text-white">
                {live.balance != null ? `$${live.balance.toFixed(2)}` : '—'}
              </p>
              {live.portfolioValue != null && (
                <p className="text-[10px] text-gray-500">Portfolio: ${live.portfolioValue.toFixed(2)}</p>
              )}
            </div>
            <button
              onClick={() => sendCommand(live.paused ? 'resume' : 'pause')}
              disabled={toggling === 'pause' || toggling === 'resume'}
              className={`px-4 py-2 rounded-lg font-bold text-sm transition-all ${
                live.paused
                  ? 'bg-green-600 hover:bg-green-500 text-white'
                  : 'bg-red-600 hover:bg-red-500 text-white animate-pulse'
              } disabled:opacity-50`}
            >
              {live.paused ? '▶ Resume' : '⏸ Kill Switch'}
            </button>
          </div>

          <div className="grid grid-cols-4 gap-2">
            <StatBox label="PnL" value={`${live.totalPnL >= 0 ? '+' : ''}$${live.totalPnL?.toFixed(2) || '0.00'}`} color={live.totalPnL >= 0 ? GREEN : RED} dark />
            <StatBox label="Win Rate" value={`${live.winRate || 0}%`} color={(live.winRate || 0) >= 50 ? GREEN : RED} dark />
            <StatBox label="Trades" value={live.totalTrades || 0} dark />
            <StatBox label="Daily Loss" value={`$${live.dailyLoss?.toFixed(2) || '0.00'}`} color={live.dailyLoss > 0 ? AMBER : null} dark />
          </div>

          {live.paused && (
            <div className="mt-3 text-xs text-red-400 bg-red-900/30 border border-red-800 rounded-lg p-2 text-center font-medium">
              ⚠️ TRADING PAUSED — No new orders will be placed
            </div>
          )}

          <div className="flex justify-between text-[10px] text-gray-600 mt-3">
            <span>Per-trade cap: ${live.maxPerTrade?.toFixed(2) || '5.00'}</span>
            <span>Daily limit: ${live.maxDailyLoss?.toFixed(2) || '20.00'}</span>
          </div>
        </div>

        {/* Market Card */}
        <MarketCard market={market} />

        {/* Strategy Toggles */}
        <div className="bg-gray-900 rounded-xl border border-gray-800 overflow-hidden">
          <div className="px-4 py-3 border-b border-gray-800">
            <h3 className="text-xs text-gray-400 uppercase tracking-wider font-bold">⚡ Strategy Controls</h3>
          </div>
          {strategies.map((s, i) => {
            const isEnabled = enabledSet.has(s.name);
            const isToggling = toggling === s.name;
            return (
              <div key={s.name} className={`flex items-center justify-between px-4 py-3 ${i < strategies.length - 1 ? 'border-b border-gray-800' : ''}`}>
                <div className="flex items-center gap-3">
                  <span className={`w-2 h-2 rounded-full ${isEnabled ? 'bg-green-500' : 'bg-gray-600'}`} />
                  <div>
                    <p className="text-sm font-medium capitalize text-gray-200">{s.name}</p>
                    {s.config && (
                      <p className="text-[10px] text-gray-600">
                        ${s.config.betSize || 1}/trade • {s.config.cooldownMs ? `${(s.config.cooldownMs / 1000).toFixed(0)}s cd` : ''}
                      </p>
                    )}
                  </div>
                </div>
                <button
                  onClick={() => sendCommand(isEnabled ? 'disable' : 'enable', s.name)}
                  disabled={isToggling}
                  className={`relative w-12 h-6 rounded-full transition-all duration-300 ${
                    isEnabled ? 'bg-green-600' : 'bg-gray-700'
                  } disabled:opacity-50`}
                >
                  <span className={`absolute top-0.5 w-5 h-5 bg-white rounded-full shadow transition-all duration-300 ${
                    isEnabled ? 'left-6' : 'left-0.5'
                  }`} />
                </button>
              </div>
            );
          })}
          {strategies.length === 0 && (
            <p className="text-gray-600 text-xs text-center py-4">No strategies loaded yet.</p>
          )}
        </div>

        {/* Open Orders */}
        {live.openOrders?.length > 0 && (
          <div>
            <h4 className="text-[10px] text-gray-500 uppercase tracking-wider mb-2 font-bold">
              Open Orders ({live.openOrders.length})
            </h4>
            {live.openOrders.map((o, i) => (
              <LiveOrderRow key={o.orderId || i} order={o} isOpen />
            ))}
          </div>
        )}

        {/* Kalshi Positions */}
        {live.positions?.length > 0 && (
          <div>
            <h4 className="text-[10px] text-gray-500 uppercase tracking-wider mb-2 font-bold">
              Kalshi Positions ({live.positions.length})
            </h4>
            {live.positions.map((p, i) => (
              <div key={i} className="bg-gray-900 rounded-lg p-3 border border-gray-800 mb-2">
                <div className="flex items-center justify-between">
                  <span className="text-xs font-mono text-gray-300">{p.market_ticker || p.ticker}</span>
                  <span className="text-xs text-gray-400">{p.position_fp || p.position || 0} contracts</span>
                </div>
                {p.realized_pnl_dollars && (
                  <p className="text-[10px] text-gray-500 mt-1">
                    Realized PnL: <span className={Number(p.realized_pnl_dollars) >= 0 ? 'text-green-400' : 'text-red-400'}>
                      ${Number(p.realized_pnl_dollars).toFixed(2)}
                    </span>
                  </p>
                )}
              </div>
            ))}
          </div>
        )}

        {/* Trade History */}
        <div>
          <h4 className="text-[10px] text-gray-500 uppercase tracking-wider mb-2 font-bold">
            Trade History ({trades.length})
          </h4>
          {trades.length === 0 ? (
            <p className="text-gray-600 text-xs text-center py-4">No settled trades yet. Enable a strategy to start.</p>
          ) : (
            trades.map((t, i) => <LiveOrderRow key={i} order={t} />)
          )}
        </div>
      </main>

      {/* Footer */}
      <div className="fixed bottom-0 left-0 right-0 bg-gray-900/95 backdrop-blur border-t border-gray-800 py-2 px-4">
        <div className="max-w-lg mx-auto flex justify-between text-xs text-gray-600">
          <span>Worker: {formatUptime(data?.workerUptime)}</span>
          <span>{data?.lastUpdate ? new Date(data.lastUpdate).toLocaleTimeString() : 'never'}</span>
        </div>
      </div>
    </div>
  );
}

function MarketCard({ market }) {
  if (!market) {
    return (
      <div className="bg-gray-900 rounded-xl p-4 border border-gray-800">
        <p className="text-gray-600 text-center text-sm">No active market — waiting...</p>
      </div>
    );
  }

  const timeLeft = market.closeTime ? getTimeLeft(market.closeTime) : null;

  return (
    <div className="bg-gray-900 rounded-xl p-4 border border-gray-800">
      <div className="flex items-center justify-between mb-3">
        <div>
          <h2 className="font-bold text-sm text-gray-100">BTC Up or Down</h2>
          <p className="text-[10px] text-gray-600">15 min</p>
        </div>
        <div className="flex items-center gap-2">
          {timeLeft && (
            <span className="text-[10px] bg-gray-800 px-2 py-0.5 rounded-full text-gray-400">⏱ {timeLeft}</span>
          )}
          <span className="text-lg">₿</span>
        </div>
      </div>
      <div className="flex items-center gap-3">
        <div className="flex-1">
          <div className="flex justify-between text-xs mb-1">
            <span className="text-gray-400">Up</span>
            <span style={{ color: GREEN }} className="font-medium">{market.yesPct}%</span>
          </div>
          <div className="w-full bg-gray-800 rounded-full h-1.5">
            <div className="h-1.5 rounded-full transition-all duration-500" style={{ width: `${market.yesPct}%`, backgroundColor: GREEN }} />
          </div>
        </div>
        <div className="flex-1">
          <div className="flex justify-between text-xs mb-1">
            <span className="text-gray-400">Down</span>
            <span style={{ color: BLUE }} className="font-medium">{market.noPct}%</span>
          </div>
          <div className="w-full bg-gray-800 rounded-full h-1.5">
            <div className="h-1.5 rounded-full transition-all duration-500" style={{ width: `${market.noPct}%`, backgroundColor: BLUE }} />
          </div>
        </div>
      </div>
      <div className="flex justify-between text-[10px] text-gray-600 mt-2">
        <span>${(market.volume || 0).toLocaleString()} vol</span>
        <span className="font-mono">{market.ticker}</span>
      </div>
    </div>
  );
}

function LiveOrderRow({ order, isOpen }) {
  const won = order.result && order.side?.toLowerCase() === order.result?.toLowerCase();
  const isNeutral = order.result === 'cancelled' || order.result === 'expired';

  const rawPnl = order?.pnl != null ? Number(order.pnl) : null;
  const pnlVal = Number.isFinite(rawPnl)
    ? (Number.isInteger(rawPnl) ? rawPnl / 100 : rawPnl)
    : null;

  const pnlColor = pnlVal == null ? 'text-gray-600' : pnlVal > 0 ? 'text-green-400' : pnlVal < 0 ? 'text-red-400' : 'text-gray-400';

  const priceRaw = Number(order.priceCents ?? order.price);
  const priceCents = Number.isFinite(priceRaw)
    ? (priceRaw > 0 && priceRaw <= 1 ? Math.round(priceRaw * 100) : Math.round(priceRaw))
    : null;

  const contractsRaw = Number(order.contracts ?? 1);
  const contracts = Number.isFinite(contractsRaw) && contractsRaw > 0 ? contractsRaw : 1;

  const hasExpected = isOpen && priceCents != null && priceCents > 0 && priceCents < 100;
  const grossPayout = hasExpected ? contracts : null; // $1 per winning contract
  const cost = hasExpected ? (priceCents / 100) * contracts : null;
  const winPnL = hasExpected ? grossPayout - cost : null;
  const losePnL = hasExpected ? -cost : null;

  return (
    <div className="bg-gray-900 rounded-lg p-3 border border-gray-800 mb-2">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          {isOpen ? (
            <span className="w-2 h-2 rounded-full bg-amber-400 animate-pulse" />
          ) : (
            <span>{isNeutral ? '➖' : won ? '✅' : '❌'}</span>
          )}
          <span className="text-sm font-medium capitalize text-gray-200">{order.side}</span>
          <span className="text-xs text-gray-500">@ {order.priceCents || order.price}¢</span>
          <span className="text-[10px] text-gray-600">{order.contracts || 1}x</span>
        </div>
        <span className={`text-sm font-bold ${pnlColor}`}>
          {pnlVal != null ? `${pnlVal >= 0 ? '+' : ''}$${pnlVal.toFixed(2)}` : 'open'}
        </span>
      </div>

      <div className="flex justify-between mt-1">
        <span className="text-[10px] text-gray-600">{order.reason}</span>
        <span className="text-[10px] text-gray-600 capitalize">{order.strategy}</span>
      </div>

      {hasExpected && (
        <div className="mt-1.5 flex flex-wrap gap-x-3 gap-y-1 text-[10px] text-gray-500">
          <span>
            If win: <span className="text-green-400 font-medium">+${winPnL.toFixed(2)}</span>
          </span>
          <span>
            If lose: <span className="text-red-400 font-medium">${losePnL.toFixed(2)}</span>
          </span>
          <span>
            Gross payout: <span className="text-gray-300 font-medium">${grossPayout.toFixed(2)}</span>
          </span>
        </div>
      )}

      {order.result && !isOpen && (
        <div className="flex justify-between items-center mt-0.5">
          <span className="text-[10px] text-gray-600">Result: {order.result}</span>
          <span className="text-[10px] text-gray-600">
            {order.settleTime ? new Date(order.settleTime).toLocaleTimeString() : order.createdAt ? new Date(order.createdAt).toLocaleTimeString() : ''}
          </span>
        </div>
      )}
    </div>
  );
}

function StatBox({ label, value, color, dark }) {
  return (
    <div className={`rounded-lg p-2 border text-center ${dark ? 'bg-gray-800 border-gray-700' : 'bg-gray-50 border-gray-100'}`}>
      <p className="text-[9px] text-gray-500 uppercase tracking-wider">{label}</p>
      <p className="text-xs font-bold mt-0.5" style={color ? { color } : { color: dark ? '#F3F4F6' : '#111827' }}>{value}</p>
    </div>
  );
}

function getTimeLeft(closeTime) {
  const diff = new Date(closeTime).getTime() - Date.now();
  if (diff <= 0) return 'Closing...';
  const mins = Math.floor(diff / 60000);
  const secs = Math.floor((diff % 60000) / 1000);
  return `${mins}:${secs.toString().padStart(2, '0')}`;
}

function formatUptime(seconds) {
  if (!seconds) return '0s';
  const h = Math.floor(seconds / 3600);
  const m = Math.floor((seconds % 3600) / 60);
  const s = Math.floor(seconds % 60);
  if (h > 0) return `${h}h ${m}m`;
  if (m > 0) return `${m}m ${s}s`;
  return `${s}s`;
}