signal-platform/frontend/src/components/signals/TrackRecordPanel.tsx

import { useMutation, useQueryClient } from '@tanstack/react-query';
import { usePerformance } from '../../hooks/usePerformance';
import { triggerJob } from '../../api/admin';
import { Button } from '../ui/Button';
import { Callout } from '../ui/Callout';
import { Disclosure } from '../ui/Disclosure';
import { Section } from '../ui/Section';
import { SkeletonCard } from '../ui/Skeleton';
import { useToast } from '../ui/Toast';
import { RECOMMENDATION_ACTION_LABELS } from '../../lib/recommendation';
import type { OutcomeBucketStats } from '../../lib/types';

function fmtR(value: number | null): string {
  if (value === null) return '—';
  return `${value > 0 ? '+' : ''}${value.toFixed(2)}R`;
}

function fmtPct(value: number | null): string {
  return value === null ? '—' : `${value.toFixed(1)}%`;
}

function rColor(value: number | null): string {
  if (value === null) return 'text-gray-400';
  if (value > 0) return 'text-emerald-400';
  if (value < 0) return 'text-red-400';
  return 'text-gray-300';
}

function StatCard({ label, value, valueClass = 'text-gray-100', sub }: {
  label: string;
  value: string;
  valueClass?: string;
  sub?: string;
}) {
  return (
    <div className="glass p-5">
      <p className="section-index">{label}</p>
      <p className={`num mt-2 text-2xl font-semibold ${valueClass}`}>{value}</p>
      {sub && <p className="mt-1 text-xs text-gray-500">{sub}</p>}
    </div>
  );
}

function actionLabel(key: string): string {
  return RECOMMENDATION_ACTION_LABELS[key as keyof typeof RECOMMENDATION_ACTION_LABELS] ?? key;
}

function BreakdownTable({ rows, labelHeader, mapLabel }: {
  rows: Record<string, OutcomeBucketStats>;
  labelHeader: string;
  mapLabel?: (key: string) => string;
}) {
  const entries = Object.entries(rows);
  if (entries.length === 0) {
    return <Callout variant="empty">No evaluated setups in this breakdown yet.</Callout>;
  }
  return (
    <div className="glass overflow-x-auto">
      <table className="w-full text-sm">
        <thead>
          <tr className="border-b border-white/[0.06] text-left text-xs uppercase tracking-wider text-gray-500">
            <th className="px-4 py-3">{labelHeader}</th>
            <th className="px-4 py-3 text-right">Setups</th>
            <th className="px-4 py-3 text-right">Wins</th>
            <th className="px-4 py-3 text-right">Losses</th>
            <th className="px-4 py-3 text-right">Expired</th>
            <th className="px-4 py-3 text-right">Hit Rate</th>
            <th className="px-4 py-3 text-right">Avg R</th>
            <th className="px-4 py-3 text-right">Total R</th>
          </tr>
        </thead>
        <tbody>
          {entries.map(([key, stats]) => (
            <tr key={key} className="border-b border-white/[0.04] transition-colors duration-150 hover:bg-white/[0.03]">
              <td className="px-4 py-3 font-medium text-gray-200">{mapLabel ? mapLabel(key) : key}</td>
              <td className="num px-4 py-3 text-right text-gray-300">{stats.total}</td>
              <td className="num px-4 py-3 text-right text-emerald-400">{stats.wins}</td>
              <td className="num px-4 py-3 text-right text-red-400">{stats.losses}</td>
              <td className="num px-4 py-3 text-right text-gray-400">{stats.expired}</td>
              <td className="num px-4 py-3 text-right text-gray-200">{fmtPct(stats.hit_rate)}</td>
              <td className={`num px-4 py-3 text-right ${rColor(stats.avg_r)}`}>{fmtR(stats.avg_r)}</td>
              <td className={`num px-4 py-3 text-right ${rColor(stats.total_r)}`}>{fmtR(stats.total_r)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export function TrackRecordPanel() {
  const { data, isLoading, isError, error } = usePerformance();
  const queryClient = useQueryClient();
  const toast = useToast();

  const evaluateMutation = useMutation({
    mutationFn: () => triggerJob('outcome_evaluator'),
    onSuccess: () => {
      toast.addToast('success', 'Outcome evaluation triggered. Stats will refresh shortly.');
      setTimeout(() => queryClient.invalidateQueries({ queryKey: ['performance'] }), 3000);
    },
    onError: () => {
      toast.addToast('error', 'Failed to trigger outcome evaluation');
    },
  });

  return (
    <div className="space-y-6">
      <div className="flex items-start justify-between gap-4">
        <Disclosure summary="How outcomes are measured">
          <p className="text-xs text-gray-400">
            Each setup is replayed against the daily bars after its detection: a{' '}
            <span className="text-emerald-400">win</span> means the target was reached before the
            stop, a <span className="text-red-400">loss</span> means the stop was hit first (bars
            where both levels fall inside the same day count conservatively as losses). Setups with
            neither level hit within 30 trading days <span className="text-gray-300">expire</span> at
            0R. Avg R is the expectancy per trade: wins earn their R:R ratio, losses cost −1R — a
            positive value means the signals have been profitable on a risk-adjusted basis. The
            evaluator runs nightly after OHLCV collection.
          </p>
        </Disclosure>
        <Button onClick={() => evaluateMutation.mutate()} loading={evaluateMutation.isPending} className="shrink-0">
          {evaluateMutation.isPending ? 'Evaluating…' : 'Evaluate Now'}
        </Button>
      </div>

      {isLoading && (
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          <SkeletonCard /><SkeletonCard /><SkeletonCard /><SkeletonCard />
        </div>
      )}

      {isError && (
        <Callout variant="error">
          {error instanceof Error ? error.message : 'Failed to load performance stats'}
        </Callout>
      )}

      {data && data.overall.total === 0 && (
        <Callout variant="empty">
          No evaluated setups yet. Outcomes appear once setups are old enough for their stop or
          target to be hit — the evaluator runs nightly, or click Evaluate Now.
          {data.pending > 0 && ` ${data.pending} setup${data.pending === 1 ? '' : 's'} pending evaluation.`}
        </Callout>
      )}

      {data && data.overall.total > 0 && (
        <>
          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            <StatCard
              label="Hit Rate"
              value={fmtPct(data.overall.hit_rate)}
              sub={`${data.overall.wins} wins / ${data.overall.losses} losses`}
            />
            <StatCard
              label="Expectancy"
              value={fmtR(data.overall.avg_r)}
              valueClass={rColor(data.overall.avg_r)}
              sub="average R per trade"
            />
            <StatCard
              label="Total R"
              value={fmtR(data.overall.total_r)}
              valueClass={rColor(data.overall.total_r)}
              sub="cumulative risk-adjusted result"
            />
            <StatCard
              label="Evaluated"
              value={String(data.overall.total)}
              sub={`${data.pending} pending · ${data.overall.expired} expired`}
            />
          </div>

          <Section title="By Direction">
            <BreakdownTable rows={data.by_direction} labelHeader="Direction" />
          </Section>

          <Section title="By Recommended Action">
            <BreakdownTable rows={data.by_action} labelHeader="Action" mapLabel={actionLabel} />
          </Section>

          <Section title="By Confidence" hint="at detection time">
            <BreakdownTable rows={data.by_confidence} labelHeader="Confidence" />
          </Section>
        </>
      )}
    </div>
  );
}