import { getPnLData } from '@/lib/queries';
import { PnLClient } from './PnLClient';

function MetricCard({
  label,
  value,
  color = 'text-white',
}: {
  label: string;
  value: string;
  color?: string;
}) {
  return (
    <div className="card">
      <p className="text-sm text-slate-400 mb-1">{label}</p>
      <p className={`text-2xl font-bold ${color}`}>{value}</p>
    </div>
  );
}

export const dynamic = 'force-dynamic';

export default async function PnLPage() {
  const { data, metrics } = await getPnLData();

  return (
    <div className="space-y-8">
      <div>
        <h1 className="text-2xl font-bold">Profit &amp; Loss</h1>
        <p className="text-sm text-slate-400 mt-1">
          Performance metrics and PnL tracking
        </p>
      </div>

      {/* Metrics Row */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <MetricCard
          label="Total PnL"
          value={`$${metrics.totalPnl.toFixed(2)}`}
          color={metrics.totalPnl >= 0 ? 'text-green-400' : 'text-red-400'}
        />
        <MetricCard
          label="Win Rate"
          value={metrics.totalTrades > 0 ? `${(metrics.winRate * 100).toFixed(1)}%` : '—'}
          color="text-blue-400"
        />
        <MetricCard
          label="Sharpe Ratio"
          value={metrics.totalTrades > 0 ? metrics.sharpe.toFixed(2) : '—'}
          color={metrics.sharpe > 1 ? 'text-green-400' : 'text-yellow-400'}
        />
        <MetricCard
          label="Max Drawdown"
          value={metrics.totalTrades > 0 ? `$${metrics.maxDrawdown.toFixed(2)}` : '—'}
          color="text-red-400"
        />
      </div>

      {/* Trade Stats */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div className="card">
          <p className="text-sm text-slate-400 mb-1">Total Trades</p>
          <p className="text-2xl font-bold text-white">{metrics.totalTrades}</p>
        </div>
        <div className="card">
          <p className="text-sm text-slate-400 mb-1">Winning Trades</p>
          <p className="text-2xl font-bold text-green-400">{metrics.winningTrades}</p>
        </div>
      </div>

      {/* Charts */}
      {data.length > 0 ? (
        <PnLClient data={data} />
      ) : (
        <div className="card">
          <p className="text-slate-500 text-center py-8">
            No PnL data yet. Metrics will appear after the bot completes trades.
          </p>
        </div>
      )}
    </div>
  );
}