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

import { useState } from 'react';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { useActivation } from '../../hooks/useActivation';
import { activationSummary } from '../../lib/qualification';
import { usePerformance } from '../../hooks/usePerformance';
import { triggerJob, resetTrackRecord } 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 { BacktestPanel } from './BacktestPanel';
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 [qualifiedOnly, setQualifiedOnly] = useState(true);
  const activation = useActivation();

  const { data, isLoading, isError, error } = usePerformance(
    qualifiedOnly ? { qualified_only: true } : undefined,
  );
  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');
    },
  });

  const resetMutation = useMutation({
    mutationFn: () => resetTrackRecord(),
    onSuccess: (data) => {
      toast.addToast('success', `Track record reset — ${data.trade_setups} setups cleared. Run the scanner to rebuild.`);
      queryClient.invalidateQueries({ queryKey: ['performance'] });
      queryClient.invalidateQueries({ queryKey: ['trades'] });
    },
    onError: () => {
      toast.addToast('error', 'Failed to reset track record');
    },
  });

  const onReset = () => {
    if (
      window.confirm(
        'Reset the track record? This permanently deletes ALL trade setups and their outcomes. ' +
          'Live setups will regenerate on the next R:R scan. This cannot be undone.',
      )
    ) {
      resetMutation.mutate();
    }
  };

  return (
    <div className="space-y-6">
      <div className="glass-sm flex flex-wrap items-center justify-between gap-3 px-4 py-3">
        <label className="flex cursor-pointer items-center gap-2.5 text-sm text-gray-300">
          <input
            type="checkbox"
            checked={qualifiedOnly}
            onChange={(e) => setQualifiedOnly(e.target.checked)}
            className="h-4 w-4 cursor-pointer accent-blue-400"
          />
          <span>
            Qualified signals only
            {activation.data && (
              <span className="num ml-2 text-xs text-gray-500">{activationSummary(activation.data)}</span>
            )}
          </span>
        </label>
        <p className="text-xs text-gray-500">Confidence breakdown always covers all setups.</p>
      </div>

      <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>
        <div className="flex shrink-0 items-center gap-2">
          <Button onClick={() => evaluateMutation.mutate()} loading={evaluateMutation.isPending}>
            {evaluateMutation.isPending ? 'Evaluating…' : 'Evaluate Now'}
          </Button>
          <Button variant="danger" onClick={onReset} loading={resetMutation.isPending}>
            {resetMutation.isPending ? 'Resetting…' : 'Reset'}
          </Button>
        </div>
      </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">
          {qualifiedOnly
            ? 'No evaluated setups meet the activation thresholds yet. Untick "Qualified signals only" to see all evaluated setups, or wait for more outcomes.'
            : '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 className="border-t border-white/[0.06] pt-2" />
      <BacktestPanel />
    </div>
  );
}