"use client";
import { DrawdownChart, LinesChart, type LineSpec } from "@/components/charts";
import { Badge, Card, Empty, KV, Table, Td, Th, cx } from "@/components/ui";
import { fmtBps, fmtDate, fmtNum, fmtPct, fmtPctPlain, fmtRatio, fmtTs, fmtUsd, signClass } from "@/lib/format";
import type { Artifacts, Metrics, Run } from "@/lib/types";

const BENCH_COLORS: Record<string, string> = { buy_and_hold: "#f59e0b", cash: "#66718a", simple_momentum: "#a855f7", equal_risk: "#14b8a6" };

export function MetricsGrid({ m, compact = false }: { m: Metrics; compact?: boolean }) {
  const ci = m.bootstrap?.sharpe_ci;
  const items: [string, string, string?][] = [
    ["CAGR", fmtPct(m.cagr), signClass(m.cagr)],
    ["Total return", fmtPct(m.total_return), signClass(m.total_return)],
    ["Volatility (ann.)", fmtPctPlain(m.volatility)],
    ["Sharpe", `${fmtRatio(m.sharpe)}${ci && ci[0] != null ? ` [${fmtRatio(ci[0])}, ${fmtRatio(ci[1])}]` : ""}`],
    ["Deflated Sharpe (prob.)", m.deflated_sharpe?.dsr != null ? `${fmtPctPlain(m.deflated_sharpe.dsr)} (${m.deflated_sharpe.n_trials ?? 1} trials)` : "—"],
    ["Sortino", fmtRatio(m.sortino)],
    ["Max drawdown", fmtPct(m.max_drawdown), "text-down"],
    ["Calmar", fmtRatio(m.calmar)],
    ["Turnover (ann.)", `${fmtRatio(m.turnover_annual, 1)}×`],
    ["Exposure", fmtPctPlain(m.exposure)],
    ["Trades / round trips", `${m.n_trades ?? "—"} / ${m.n_round_trips ?? "—"}`],
    ["Hit rate", fmtPctPlain(m.hit_rate)],
    ["Profit factor", fmtRatio(m.profit_factor)],
    ["Avg round-trip P&L", fmtUsd(m.avg_trade_pnl)],
    ["Fee drag", fmtPctPlain(m.fee_drag, 2)],
    ["Slippage drag", fmtPctPlain(m.slippage_drag, 2)],
    ["VaR 95% (1 bar)", fmtPct(m.var_95_bar), "text-down"],
    ["CVaR 95% (1 bar)", fmtPct(m.cvar_95_bar), "text-down"],
    ["Underwater time", fmtPctPlain(m.underwater_bars_pct)],
    ["Skew / kurtosis", `${fmtRatio(m.skew)} / ${fmtRatio(m.kurtosis)}`],
    ["Bars / years", `${m.bars ?? "—"} / ${fmtRatio(m.years)}`],
    ["Final equity", fmtUsd(m.final_equity)],
  ];
  return (
    <div className={cx("grid gap-2", compact ? "grid-cols-2 md:grid-cols-4" : "grid-cols-2 md:grid-cols-4 xl:grid-cols-6")}>
      {items.map(([k, v, cls]) => (
        <div key={k} className="rounded-md border border-line bg-bg px-3 py-2">
          <div className="text-[10px] uppercase tracking-wide text-fg-dim">{k}</div>
          <div className={cx("num mt-0.5 text-sm font-semibold", cls)}>{v}</div>
        </div>
      ))}
    </div>
  );
}

export function EquityVsBenchmarks({ a, label }: { a: Artifacts; label: string }) {
  const series: LineSpec[] = [{ id: "strategy", label, color: "#4f8cff", width: 2, points: a.equity.map((p) => ({ ts: p.ts, value: p.equity })) }];
  for (const [name, b] of Object.entries(a.benchmarks ?? {})) series.push({ id: name, label: name.replace(/_/g, " "), color: BENCH_COLORS[name] ?? "#888", width: 1, points: b.equity.map((p) => ({ ts: p.ts, value: p.equity })) });
  return (
    <>
      <LinesChart series={series} height={320} />
      <div className="mt-2 flex flex-wrap gap-3 text-[11px]">{series.map((s) => <span key={s.id} className="flex items-center gap-1.5"><span className="inline-block h-2 w-2 rounded-full" style={{ background: s.color }} />{s.label}</span>)}</div>
    </>
  );
}

export function BenchmarkTable({ a, m }: { a: Artifacts; m: Metrics }) {
  const rows = [["strategy", m] as [string, Metrics], ...Object.entries(a.benchmarks ?? {}).map(([k, v]) => [k, v.metrics] as [string, Metrics])];
  return (
    <Table>
      <thead><tr><Th>Series</Th><Th align="right">CAGR</Th><Th align="right">Vol</Th><Th align="right">Sharpe</Th><Th align="right">Max DD</Th><Th align="right">Calmar</Th><Th align="right">Turnover</Th><Th align="right">Fee drag</Th></tr></thead>
      <tbody>{rows.map(([k, v]) => (
        <tr key={k} className={k === "strategy" ? "font-semibold" : ""}><Td>{k.replace(/_/g, " ")}</Td><Td align="right" num className={signClass(v.cagr)}>{fmtPct(v.cagr)}</Td><Td align="right" num>{fmtPctPlain(v.volatility)}</Td><Td align="right" num>{fmtRatio(v.sharpe)}</Td><Td align="right" num className="text-down">{fmtPct(v.max_drawdown)}</Td><Td align="right" num>{fmtRatio(v.calmar)}</Td><Td align="right" num>{fmtRatio(v.turnover_annual, 1)}×</Td><Td align="right" num>{fmtPctPlain(v.fee_drag, 2)}</Td></tr>
      ))}</tbody>
    </Table>
  );
}

export function Underwater({ a }: { a: Artifacts }) {
  return <DrawdownChart points={a.equity} />;
}

export function RollingSharpe({ a }: { a: Artifacts }) {
  if (!a.rolling_sharpe?.length) return <Empty title="Not enough bars for a rolling window" />;
  return <LinesChart series={[{ id: "rs", label: "rolling Sharpe", color: "#a855f7", points: a.rolling_sharpe.map((p) => ({ ts: p.ts, value: p.sharpe })) }]} height={180} />;
}

export function WalkForward({ wf }: { wf: Artifacts["walk_forward"] }) {
  if (!wf) return <Empty title="Walk-forward not requested">Enable it in the Strategy Lab to see out-of-sample folds.</Empty>;
  if (wf.error) return <Empty title="Walk-forward skipped">{wf.error}</Empty>;
  return (
    <>
      <div className="mb-2 flex flex-wrap gap-2 text-xs">
        <Badge tone="muted">{wf.anchored ? "anchored" : "rolling"} train</Badge><Badge tone="muted">{wf.n_trials} grid points</Badge><Badge tone="muted">embargo {wf.embargo_bars ?? 0} bars</Badge>
        {wf.stitched_oos && <Badge tone={(wf.stitched_oos.sharpe ?? 0) > 0 ? "up" : "down"}>stitched OOS Sharpe {fmtRatio(wf.stitched_oos.sharpe)} · return {fmtPct(wf.stitched_oos.total_return)} · {wf.stitched_oos.bars} bars</Badge>}
      </div>
      <Table>
        <thead><tr><Th>Fold</Th><Th>Train</Th><Th>Test (OOS)</Th><Th>Best params (IS)</Th><Th align="right">IS Sharpe</Th><Th align="right">OOS Sharpe</Th><Th align="right">OOS return</Th><Th align="right">OOS max DD</Th></tr></thead>
        <tbody>{wf.folds.map((f) => (
          <tr key={f.fold}><Td num>{f.fold + 1}</Td><Td num className="text-fg-muted">{fmtDate(f.train[0])} → {fmtDate(f.train[1])}</Td><Td num>{fmtDate(f.test[0])} → {fmtDate(f.test[1])}</Td><Td className="font-mono text-[11px]">{JSON.stringify(f.best_params)}</Td><Td align="right" num>{fmtRatio(f.is_sharpe)}</Td><Td align="right" num className={signClass(f.oos_sharpe)}>{fmtRatio(f.oos_sharpe)}</Td><Td align="right" num className={signClass(f.oos_return)}>{fmtPct(f.oos_return)}</Td><Td align="right" num className="text-down">{fmtPct(f.oos_max_dd)}</Td></tr>
        ))}</tbody>
      </Table>
    </>
  );
}

export function SensitivityHeatmap({ s }: { s: Artifacts["sensitivity"] }) {
  if (!s) return <Empty title="Sensitivity map not requested">Enable it in the Strategy Lab (two parameters × value lists).</Empty>;
  const flat = s.z.flat().filter((v): v is number => v != null);
  const min = Math.min(...flat), max = Math.max(...flat);
  const color = (v: number | null) => {
    if (v == null) return "transparent";
    const t = max === min ? 0.5 : (v - min) / (max - min);
    return v >= 0 ? `rgba(34,197,94,${0.15 + 0.7 * t})` : `rgba(239,68,68,${0.15 + 0.7 * (1 - t)})`;
  };
  return (
    <div className="overflow-x-auto">
      <table className="text-xs">
        <caption className="mb-1 text-left text-[11px] text-fg-dim">{s.metric} by {s.x.name} (columns) × {s.y.name} (rows)</caption>
        <thead><tr><Th>{s.y.name} \ {s.x.name}</Th>{s.x.values.map((x) => <Th key={String(x)} align="center">{String(x)}</Th>)}</tr></thead>
        <tbody>{s.y.values.map((y, j) => (
          <tr key={String(y)}><Th scope="row">{String(y)}</Th>{s.z[j].map((v, i) => <td key={i} className="num border border-line px-3 py-2 text-center" style={{ background: color(v) }}>{v == null ? "—" : v.toFixed(2)}</td>)}</tr>
        ))}</tbody>
      </table>
    </div>
  );
}

export function StressTable({ stress, base }: { stress: Artifacts["stress"]; base: Metrics }) {
  const rows = Object.entries(stress ?? {});
  if (!rows.length) return <Empty title="No stress scenarios" />;
  return (
    <Table>
      <thead><tr><Th>Scenario</Th><Th align="right">Sharpe</Th><Th align="right">Δ Sharpe</Th><Th align="right">Return</Th><Th align="right">Max DD</Th><Th align="right">Fee drag</Th></tr></thead>
      <tbody>
        <tr className="font-semibold"><Td>base</Td><Td align="right" num>{fmtRatio(base.sharpe)}</Td><Td align="right" num>—</Td><Td align="right" num className={signClass(base.total_return)}>{fmtPct(base.total_return)}</Td><Td align="right" num className="text-down">{fmtPct(base.max_drawdown)}</Td><Td align="right" num>{fmtPctPlain(base.fee_drag, 2)}</Td></tr>
        {rows.map(([k, v]) => <tr key={k}><Td>{k.replace(/_/g, " ")}</Td><Td align="right" num>{fmtRatio(v.sharpe)}</Td><Td align="right" num className={signClass((v.sharpe ?? 0) - (base.sharpe ?? 0))}>{v.sharpe != null && base.sharpe != null ? fmtRatio(v.sharpe - base.sharpe) : "—"}</Td><Td align="right" num className={signClass(v.total_return)}>{fmtPct(v.total_return)}</Td><Td align="right" num className="text-down">{fmtPct(v.max_drawdown)}</Td><Td align="right" num>{v.fee_drag != null ? fmtPctPlain(v.fee_drag, 2) : "—"}</Td></tr>)}
      </tbody>
    </Table>
  );
}

export function ShuffledTrades({ s }: { s: Artifacts["shuffled_trades"] }) {
  if (!s || !s.n) return <Empty title="Too few round trips for a Monte-Carlo reshuffle (needs ≥ 5)" />;
  return <KV items={[["Permutations", s.n], ["Total P&L (fixed)", fmtUsd(s.total_pnl)], ["Max drawdown — median path", fmtUsd(s.max_dd_p50)], ["Max drawdown — 95th pct", fmtUsd(s.max_dd_p95)], ["Max drawdown — worst path", fmtUsd(s.max_dd_worst)]]} />;
}

export function TradeLedger({ trades, page, setPage, pageSize = 50 }: { trades: Artifacts["trades"]; page: number; setPage: (p: number) => void; pageSize?: number }) {
  if (!trades?.length) return <Empty title="No fills">The strategy never changed exposure enough to trade, or all orders were rejected.</Empty>;
  const pages = Math.ceil(trades.length / pageSize);
  const slice = trades.slice(page * pageSize, (page + 1) * pageSize);
  return (
    <>
      <Table>
        <thead><tr><Th>Time</Th><Th>Side</Th><Th align="right">Qty</Th><Th align="right">Fill</Th><Th align="right">Ref (open)</Th><Th align="right">Slip</Th><Th align="right">Notional</Th><Th align="right">Fee</Th><Th align="right">Target</Th><Th>Note</Th></tr></thead>
        <tbody>{slice.map((t, i) => (
          <tr key={`${t.ts}-${i}`}><Td num>{fmtTs(t.ts)}</Td><Td className={t.side === "buy" ? "text-up" : "text-down"}>{t.side}</Td><Td align="right" num>{fmtNum(t.qty, 6)}</Td><Td align="right" num>{fmtNum(t.price, 2)}</Td><Td align="right" num>{fmtNum(t.ref_price, 2)}</Td><Td align="right" num>{fmtBps(((t.price - t.ref_price) / t.ref_price) * 1e4 * (t.side === "buy" ? 1 : -1), 1)}</Td><Td align="right" num>{fmtUsd(t.notional)}</Td><Td align="right" num>{fmtUsd(t.fee)}</Td><Td align="right" num>{fmtPctPlain(t.strategy_target, 0)}</Td><Td className="text-fg-dim">{t.partial ? "partial" : ""}{t.reason !== "rebalance" ? ` ${t.reason}` : ""}</Td></tr>
        ))}</tbody>
      </Table>
      {pages > 1 && <div className="mt-2 flex items-center justify-end gap-2 text-xs"><button className="rounded border border-line-strong px-2 py-1 disabled:opacity-40" disabled={page === 0} onClick={() => setPage(page - 1)}>Prev</button><span>page {page + 1} / {pages}</span><button className="rounded border border-line-strong px-2 py-1 disabled:opacity-40" disabled={page >= pages - 1} onClick={() => setPage(page + 1)}>Next</button></div>}
    </>
  );
}

export function Provenance({ run }: { run: Run }) {
  const p = run.provenance ?? {};
  const w = p.window as [number, number] | undefined;
  return (
    <KV items={[
      ["Run id", run.id], ["Code version", String(p.code_version ?? "—")], ["Git commit", String(p.git_commit ?? "not a git checkout")], ["Dataset hash", String(p.dataset_hash ?? "—")],
      ["Bars", String(p.n_bars ?? "—")], ["Window", w ? `${fmtTs(w[0])} → ${fmtTs(w[1])}` : "—"], ["Holdout fraction", String(p.holdout_frac ?? 0)],
      ["Params", JSON.stringify(p.params ?? run.params)], ["Cost model", JSON.stringify(p.cost_model ?? run.cost_model)], ["Risk limits", p.risk_limits ? JSON.stringify(p.risk_limits) : "engine defaults (size-unbounded, no shorting)"],
      ["Seed", String(p.seed ?? "—")], ["Initial cash", fmtUsd(p.initial_cash)], ["Runtime", `${p.runtime_s ?? "—"} s`], ["Data source", String(p.data_source ?? "—")], ["Evaluation", String(p.evaluation_note ?? "—")],
    ]} />
  );
}

export function RejectedOrders({ rejected }: { rejected: Artifacts["rejected"] }) {
  if (!rejected?.length) return <p className="text-xs text-fg-dim">No orders were rejected by the risk gateway.</p>;
  return (
    <Table>
      <thead><tr><Th>Time</Th><Th>Side</Th><Th align="right">Qty</Th><Th>Reasons</Th></tr></thead>
      <tbody>{rejected.map((r, i) => <tr key={i}><Td num>{fmtTs(r.ts)}</Td><Td>{r.side}</Td><Td align="right" num>{fmtNum(r.qty, 6)}</Td><Td className="text-down">{r.reasons.join("; ")}</Td></tr>)}</tbody>
    </Table>
  );
}

export { Card };