stonks-oracle/frontend/src/pages/trading/BacktestPanel.tsx

import { useState } from 'react';
import { useBacktestLaunch, useBacktestResult } from '../../api/tradingHooks';
import { Card, LoadingSpinner } from '../../components/ui';
import {
  LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid,
} from 'recharts';

const RISK_TIERS = ['conservative', 'moderate', 'aggressive'];

function fmtUsd(v: number | null | undefined) {
  if (v == null) return '—';
  return `$${v.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
}

function fmtPct(v: number | null | undefined) {
  if (v == null) return '—';
  return `${(v * 100).toFixed(2)}%`;
}

export function BacktestPanel() {
  const [startDate, setStartDate] = useState('');
  const [endDate, setEndDate] = useState('');
  const [initialCapital, setInitialCapital] = useState('100000');
  const [riskTier, setRiskTier] = useState('moderate');
  const [backtestId, setBacktestId] = useState<string | undefined>(undefined);

  const launch = useBacktestLaunch();
  const { data: result, isLoading: resultLoading } = useBacktestResult(backtestId);

  function handleLaunch() {
    if (!startDate || !endDate) return;
    launch.mutate(
      {
        start_date: startDate,
        end_date: endDate,
        initial_capital: Number(initialCapital),
        risk_tier: riskTier,
      },
      {
        onSuccess: (data) => setBacktestId(data.id),
      },
    );
  }

  const equityCurve = (result?.equity_curve ?? []).map((pt) => ({
    date: new Date(pt.date).toLocaleDateString(undefined, { month: 'short', day: 'numeric' }),
    value: pt.portfolio_value,
  }));

  return (
    <div className="space-y-4">
      {/* Configuration Form */}
      <Card>
        <h2 className="mb-3 text-sm font-medium text-gray-400">Backtest Configuration</h2>
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
          <div>
            <label className="mb-1 block text-xs text-gray-500">Start Date</label>
            <input
              type="date"
              value={startDate}
              onChange={(e) => setStartDate(e.target.value)}
              className="w-full rounded-md border border-surface-700 bg-surface-950 px-2 py-1.5 text-sm text-gray-200 focus:border-brand-500 focus:outline-none"
            />
          </div>
          <div>
            <label className="mb-1 block text-xs text-gray-500">End Date</label>
            <input
              type="date"
              value={endDate}
              onChange={(e) => setEndDate(e.target.value)}
              className="w-full rounded-md border border-surface-700 bg-surface-950 px-2 py-1.5 text-sm text-gray-200 focus:border-brand-500 focus:outline-none"
            />
          </div>
          <div>
            <label className="mb-1 block text-xs text-gray-500">Initial Capital</label>
            <input
              type="number"
              value={initialCapital}
              onChange={(e) => setInitialCapital(e.target.value)}
              className="w-full rounded-md border border-surface-700 bg-surface-950 px-2 py-1.5 text-sm text-gray-200 focus:border-brand-500 focus:outline-none"
            />
          </div>
          <div>
            <label className="mb-1 block text-xs text-gray-500">Risk Tier</label>
            <select
              value={riskTier}
              onChange={(e) => setRiskTier(e.target.value)}
              className="w-full rounded-md border border-surface-700 bg-surface-950 px-2 py-1.5 text-sm text-gray-200 focus:border-brand-500 focus:outline-none"
            >
              {RISK_TIERS.map((t) => (
                <option key={t} value={t}>
                  {t.charAt(0).toUpperCase() + t.slice(1)}
                </option>
              ))}
            </select>
          </div>
        </div>
        <button
          onClick={handleLaunch}
          disabled={!startDate || !endDate || launch.isPending}
          className="mt-3 rounded-md bg-brand-600 px-4 py-1.5 text-sm font-medium text-white hover:bg-brand-700 disabled:opacity-50"
        >
          {launch.isPending ? 'Launching…' : 'Run Backtest'}
        </button>
        {launch.isError && (
          <p className="mt-2 text-xs text-red-400">Failed to launch backtest</p>
        )}
      </Card>

      {/* Results */}
      {resultLoading && <LoadingSpinner />}
      {result && (
        <>
          {/* Summary Metrics */}
          <Card>
            <h2 className="mb-3 text-sm font-medium text-gray-400">Backtest Results</h2>
            <div className="grid grid-cols-2 gap-3 sm:grid-cols-5">
              <MetricCard label="Total Return" value={fmtPct(result.total_return)} />
              <MetricCard label="Sharpe Ratio" value={result.sharpe_ratio?.toFixed(2) ?? '—'} />
              <MetricCard label="Max Drawdown" value={fmtPct(result.max_drawdown)} />
              <MetricCard label="Win Rate" value={fmtPct(result.win_rate)} />
              <MetricCard label="Profit Factor" value={result.profit_factor?.toFixed(2) ?? '—'} />
            </div>
            <div className="mt-2 flex items-center gap-4 text-xs text-gray-500">
              <span>Trades: {result.trade_count ?? 0}</span>
              <span>Status: {result.status}</span>
              <span>Capital: {fmtUsd(result.initial_capital)}</span>
            </div>
          </Card>

          {/* Equity Curve */}
          {equityCurve.length > 0 && (
            <Card>
              <h2 className="mb-3 text-sm font-medium text-gray-400">Equity Curve</h2>
              <ResponsiveContainer width="100%" height={300}>
                <LineChart data={equityCurve}>
                  <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
                  <XAxis dataKey="date" tick={{ fill: '#6b7280', fontSize: 11 }} />
                  <YAxis tick={{ fill: '#6b7280', fontSize: 11 }} tickFormatter={(v) => `$${(v / 1000).toFixed(0)}k`} />
                  <Tooltip
                    contentStyle={{ backgroundColor: '#1e293b', border: '1px solid #334155', borderRadius: 8 }}
                    labelStyle={{ color: '#9ca3af' }}
                    formatter={(value) => [fmtUsd(value as number), 'Portfolio Value']}
                  />
                  <Line
                    type="monotone"
                    dataKey="value"
                    stroke="#6366f1"
                    strokeWidth={2}
                    dot={false}
                    name="Portfolio Value"
                  />
                </LineChart>
              </ResponsiveContainer>
            </Card>
          )}
        </>
      )}
    </div>
  );
}

function MetricCard({ label, value }: { label: string; value: string }) {
  return (
    <div className="text-center">
      <div className="text-sm font-bold text-gray-100">{value}</div>
      <div className="text-xs text-gray-500">{label}</div>
    </div>
  );
}