"use client";
import { useQuery } from "@tanstack/react-query";
import Link from "next/link";
import { Card, Empty, ErrorBox, PageHeader, Spinner, Table, Td, Th } from "@/components/ui";
import { api } from "@/lib/api";
import { fmtIso, fmtNum, fmtPct, signClass } from "@/lib/format";
import type { RunRow } from "@/lib/types";

export default function ReportsPage() {
  const runs = useQuery({ queryKey: ["runs", 200], queryFn: () => api<{ items: RunRow[] }>("/api/backtests?limit=200") });
  const done = runs.data?.items.filter((r) => r.status === "done") ?? [];
  return (
    <>
      <PageHeader title="Research Reports" subtitle="One report per backtest run: hypothesis, data coverage, parameters, in-sample and out-of-sample results, uncertainty, costs and failure modes. Machine-readable JSON and CSV artifacts alongside." />
      <Card title="Completed runs">
        {runs.isLoading && <Spinner />}
        {runs.error && <ErrorBox error={runs.error} />}
        {runs.data && (done.length ? (
          <Table>
            <thead><tr><Th>Strategy</Th><Th>Symbol</Th><Th align="right">Sharpe</Th><Th align="right">Return</Th><Th>Label</Th><Th>Created</Th><Th>Artifacts</Th></tr></thead>
            <tbody>{done.map((r) => (
              <tr key={r.id} className="hover:bg-bg-sub">
                <Td><Link href={`/reports/${r.id}`} className="font-medium text-accent hover:underline">{r.strategy}</Link></Td><Td>{r.symbol} {r.interval_min}m</Td>
                <Td align="right" num>{fmtNum(r.sharpe)}</Td><Td align="right" num className={signClass(r.total_return)}>{fmtPct(r.total_return)}</Td><Td className="text-fg-muted">{r.label ?? ""}</Td><Td num className="text-fg-dim">{fmtIso(r.created_at)}</Td>
                <Td><span className="flex gap-2 text-xs"><Link href={`/reports/${r.id}`} className="text-accent hover:underline">HTML</Link><a href={`/api/backtests/${r.id}`} download={`backtest-${r.id}.json`} className="text-accent hover:underline">JSON</a><a href={`/api/backtests/${r.id}/trades.csv`} download className="text-accent hover:underline">CSV</a></span></Td>
              </tr>
            ))}</tbody>
          </Table>
        ) : <Empty title="No completed runs">Reports are generated from finished backtests.</Empty>)}
      </Card>
    </>
  );
}