"use client";
import { useMutation, useQuery } from "@tanstack/react-query";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useMemo, useState } from "react";
import { StatusBadge } from "../page";
import { useSystemStatus } from "@/components/shell";
import { Badge, Button, Card, Empty, ErrorBox, Field, Input, PageHeader, Select, Spinner, Table, Td, Textarea, Th, cx } from "@/components/ui";
import { api, ApiError } from "@/lib/api";
import { fmtIso, fmtNum, fmtPct, signClass } from "@/lib/format";
import type { ParamSpec, RunRow, StrategyMeta } from "@/lib/types";

const DEFAULT_GRIDS: Record<string, Record<string, unknown[]>> = {
  tsmom: { lookback: [24, 48, 96], ema_fast: [10, 20], ema_slow: [60, 120] },
  ma_ensemble: { slow_mult: [2, 3, 5], target_vol: [0.3, 0.5] },
  zscore_mr: { window: [24, 48, 96], entry_z: [1.5, 2.0, 2.5] },
  simple_momentum: { lookback: [12, 24, 48] },
  equal_risk: { vol_lookback: [24, 48, 96] },
};

function defaultParams(s: StrategyMeta) {
  return Object.fromEntries(s.params.map((p) => [p.name, p.default]));
}

export default function LabPage() {
  const sys = useSystemStatus();
  const strategies = useQuery({ queryKey: ["strategies"], queryFn: () => api<{ items: StrategyMeta[] }>("/api/strategies") });
  const runs = useQuery({ queryKey: ["runs", 12], queryFn: () => api<{ items: RunRow[] }>("/api/backtests?limit=12"), refetchInterval: 5_000 });
  const [selected, setSelected] = useState<string | null>(null);
  const strat = strategies.data?.items.find((s) => s.name === selected) ?? null;
  return (
    <>
      <PageHeader title="Strategy Lab" subtitle="Catalog of strategy plugins. Every run passes the same cost model and risk gateway used by paper/live engines." />
      <div className="grid gap-4 xl:grid-cols-[360px_1fr]">
        <div className="flex flex-col gap-3">
          {strategies.isLoading && <Spinner />}
          {strategies.error && <ErrorBox error={strategies.error} />}
          {strategies.data?.items.map((s) => (
            <button key={s.name} onClick={() => setSelected(s.name)} aria-pressed={selected === s.name} className={cx("rounded-lg border p-3 text-left transition", selected === s.name ? "border-accent bg-accent-soft/40" : "border-line bg-bg-elev hover:border-line-strong")}>
              <div className="flex items-center justify-between gap-2">
                <span className="text-sm font-semibold">{s.label}</span>
                <span className="flex gap-1"><Badge tone="muted">{s.family}</Badge>{s.experimental && <Badge tone="warn">experimental</Badge>}</span>
              </div>
              <p className="mt-1 line-clamp-3 text-xs text-fg-muted">{s.hypothesis}</p>
              {s.failure_modes.length > 0 && <p className="mt-1.5 text-[11px] text-fg-dim">Failure modes: {s.failure_modes.join(" · ")}</p>}
            </button>
          ))}
        </div>
        <div className="flex flex-col gap-4">
          {strat ? (
            <ConfigForm key={strat.name} strat={strat} universe={sys.data?.universe ?? []} intervals={sys.data?.intervals ?? [60]} />
          ) : (
            <Card title="Configure a strategy"><Empty title="Select a strategy from the catalog">Parameters, cost model, holdout, walk-forward and sensitivity options appear here.</Empty></Card>
          )}
          <Card title="Recent runs" actions={<Link href="/backtests" className="text-xs text-accent hover:underline">Backtest Explorer →</Link>}>
            {runs.data?.items.length ? (
              <Table>
                <thead><tr><Th>Status</Th><Th>Strategy</Th><Th>Symbol</Th><Th align="right">Sharpe</Th><Th align="right">Return</Th><Th>Label</Th><Th>Created</Th></tr></thead>
                <tbody>{runs.data.items.map((r) => (
                  <tr key={r.id} className="hover:bg-bg-sub">
                    <Td><Link href={`/backtests/${r.id}`}><StatusBadge status={r.status} /></Link></Td><Td>{r.strategy}</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>
                  </tr>
                ))}</tbody>
              </Table>
            ) : <Empty title="No runs yet" />}
          </Card>
        </div>
      </div>
    </>
  );
}

function ConfigForm({ strat, universe, intervals }: { strat: StrategyMeta; universe: string[]; intervals: number[] }) {
  const router = useRouter();
  const [params, setParams] = useState<Record<string, unknown>>(() => defaultParams(strat));
  const [symbol, setSymbol] = useState(universe[0] ?? "");
  const [interval, setInterval_] = useState(60);
  const [cash, setCash] = useState(10000);
  const [cost, setCost] = useState({ taker_fee: 0.004, maker_fee: 0.0025, spread_bps: 5, slippage_bps: 2, max_participation: 0.05 });
  const [holdout, setHoldout] = useState(0.2);
  const [wfOn, setWfOn] = useState(false);
  const [wfGrid, setWfGrid] = useState(() => JSON.stringify(DEFAULT_GRIDS[strat.name] ?? Object.fromEntries(strat.params.filter((p) => p.type !== "bool").slice(0, 2).map((p) => [p.name, [p.default]])), null, 1));
  const [wfFolds, setWfFolds] = useState(4);
  const [wfAnchored, setWfAnchored] = useState(true);
  const [sensOn, setSensOn] = useState(false);
  const [sens, setSens] = useState(() => {
    const nums = strat.params.filter((p) => p.type === "int" || p.type === "float");
    return { x: nums[0]?.name ?? "", xv: nums[0] ? String(nums[0].default) : "", y: nums[1]?.name ?? "", yv: nums[1] ? String(nums[1].default) : "" };
  });
  const [label, setLabel] = useState("");
  const [err, setErr] = useState<string | null>(null);


  const validation = useMemo(() => {
    const out: string[] = [];
    for (const p of strat.params) {
      const v = params[p.name];
      if ((p.type === "int" || p.type === "float") && typeof v === "number") {
        if (p.min != null && v < p.min) out.push(`${p.name} must be ≥ ${p.min}`);
        if (p.max != null && v > p.max) out.push(`${p.name} must be ≤ ${p.max}`);
        if (p.type === "int" && !Number.isInteger(v)) out.push(`${p.name} must be an integer`);
      }
    }
    return out;
  }, [strat, params]);

  const launch = useMutation({
    mutationFn: async () => {
      const body: Record<string, unknown> = { strategy: strat.name, symbol, interval_min: interval, params, cost_model: cost, initial_cash: cash, holdout_frac: holdout, label: label || null, stress: true };
      if (wfOn) {
        let grid: unknown;
        try { grid = JSON.parse(wfGrid); } catch { throw new Error("walk-forward grid is not valid JSON"); }
        body.walk_forward = { grid, n_folds: wfFolds, anchored: wfAnchored, train_frac: 0.6 };
        body.n_trials = Object.values(grid as Record<string, unknown[]>).reduce((a, v) => a * (Array.isArray(v) ? v.length : 1), 1);
      }
      if (sensOn && sens.x && sens.y) {
        const parse = (s: string) => s.split(",").map((x) => x.trim()).filter(Boolean).map((x) => (Number.isFinite(Number(x)) ? Number(x) : x));
        body.sensitivity = { x: sens.x, x_values: parse(sens.xv), y: sens.y, y_values: parse(sens.yv), metric: "sharpe" };
      }
      return api<{ id: string }>("/api/backtests", { method: "POST", json: body });
    },
    onSuccess: (r) => router.push(`/backtests/${r.id}`),
    onError: (e) => setErr(e instanceof ApiError ? e.message : String(e)),
  });

  return (
        <Card title={`Configure: ${strat.label}`} subtitle={<span>{strat.hypothesis} <span className="text-fg-dim">Needs ≥ {strat.min_bars} closed bars. {strat.allows_short ? "May short." : "Long-only (spot)."}</span></span>}>
          <form onSubmit={(e) => { e.preventDefault(); setErr(null); launch.mutate(); }} className="flex flex-col gap-4">
            <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
              <Field label="Symbol"><Select value={symbol} onChange={(e) => setSymbol(e.target.value)}>{universe.map((s) => <option key={s}>{s}</option>)}</Select></Field>
              <Field label="Interval"><Select value={interval} onChange={(e) => setInterval_(Number(e.target.value))}>{intervals.map((i) => <option key={i} value={i}>{i} min</option>)}</Select></Field>
              <Field label="Initial cash (USD)"><Input type="number" min={10} step={100} value={cash} onChange={(e) => setCash(Number(e.target.value))} /></Field>
              <Field label="Holdout fraction" hint="Final slice never used for selection"><Input type="number" min={0} max={0.5} step={0.05} value={holdout} onChange={(e) => setHoldout(Number(e.target.value))} /></Field>
            </div>
            <fieldset className="rounded-md border border-line p-3">
              <legend className="px-1 text-xs font-semibold text-fg-muted">Strategy parameters</legend>
              <div className="grid grid-cols-2 gap-3 md:grid-cols-3">
                {strat.params.map((p) => <ParamInput key={p.name} spec={p} value={params[p.name]} onChange={(v) => setParams((prev) => ({ ...prev, [p.name]: v }))} />)}
                {strat.params.length === 0 && <p className="text-xs text-fg-dim">No parameters.</p>}
              </div>
              {validation.length > 0 && <ul className="mt-2 text-xs text-down">{validation.map((v) => <li key={v}>{v}</li>)}</ul>}
            </fieldset>
            <fieldset className="rounded-md border border-line p-3">
              <legend className="px-1 text-xs font-semibold text-fg-muted">Cost model</legend>
              <div className="grid grid-cols-2 gap-3 md:grid-cols-5">
                <Field label="Taker fee" hint="fraction (0.004 = 0.40%)"><Input type="number" step={0.0001} min={0} value={cost.taker_fee} onChange={(e) => setCost({ ...cost, taker_fee: Number(e.target.value) })} /></Field>
                <Field label="Maker fee"><Input type="number" step={0.0001} min={0} value={cost.maker_fee} onChange={(e) => setCost({ ...cost, maker_fee: Number(e.target.value) })} /></Field>
                <Field label="Spread (bps)"><Input type="number" step={0.5} min={0} value={cost.spread_bps} onChange={(e) => setCost({ ...cost, spread_bps: Number(e.target.value) })} /></Field>
                <Field label="Slippage (bps)"><Input type="number" step={0.5} min={0} value={cost.slippage_bps} onChange={(e) => setCost({ ...cost, slippage_bps: Number(e.target.value) })} /></Field>
                <Field label="Max participation" hint="fraction of bar volume"><Input type="number" step={0.01} min={0.001} max={1} value={cost.max_participation} onChange={(e) => setCost({ ...cost, max_participation: Number(e.target.value) })} /></Field>
              </div>
            </fieldset>
            <fieldset className="rounded-md border border-line p-3">
              <legend className="px-1 text-xs font-semibold text-fg-muted"><label className="flex items-center gap-2"><input type="checkbox" checked={wfOn} onChange={(e) => setWfOn(e.target.checked)} /> Walk-forward evaluation</label></legend>
              {wfOn && (
                <div className="grid gap-3 md:grid-cols-[1fr_140px_140px]">
                  <Field label="Parameter grid (JSON)" hint="Best in-sample Sharpe per fold is then evaluated out-of-sample; trial count feeds the deflated Sharpe."><Textarea rows={5} value={wfGrid} onChange={(e) => setWfGrid(e.target.value)} /></Field>
                  <Field label="Folds"><Input type="number" min={2} max={10} value={wfFolds} onChange={(e) => setWfFolds(Number(e.target.value))} /></Field>
                  <Field label="Train window"><Select value={wfAnchored ? "anchored" : "rolling"} onChange={(e) => setWfAnchored(e.target.value === "anchored")}><option value="anchored">Anchored</option><option value="rolling">Rolling</option></Select></Field>
                </div>
              )}
            </fieldset>
            <fieldset className="rounded-md border border-line p-3">
              <legend className="px-1 text-xs font-semibold text-fg-muted"><label className="flex items-center gap-2"><input type="checkbox" checked={sensOn} onChange={(e) => setSensOn(e.target.checked)} /> Sensitivity map (Sharpe)</label></legend>
              {sensOn && (
                <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
                  <Field label="X parameter"><Select value={sens.x} onChange={(e) => setSens({ ...sens, x: e.target.value })}>{strat.params.map((p) => <option key={p.name}>{p.name}</option>)}</Select></Field>
                  <Field label="X values" hint="comma-separated"><Input value={sens.xv} onChange={(e) => setSens({ ...sens, xv: e.target.value })} /></Field>
                  <Field label="Y parameter"><Select value={sens.y} onChange={(e) => setSens({ ...sens, y: e.target.value })}>{strat.params.map((p) => <option key={p.name}>{p.name}</option>)}</Select></Field>
                  <Field label="Y values"><Input value={sens.yv} onChange={(e) => setSens({ ...sens, yv: e.target.value })} /></Field>
                </div>
              )}
            </fieldset>
            <div className="flex flex-wrap items-end gap-3">
              <Field label="Label (optional)"><Input value={label} onChange={(e) => setLabel(e.target.value)} placeholder="e.g. tsmom 1h baseline" /></Field>
              <Button type="submit" variant="primary" loading={launch.isPending} disabled={validation.length > 0 || !symbol}>Run backtest</Button>
              {err && <span role="alert" className="text-xs text-down">{err}</span>}
            </div>
          </form>
        </Card>
  );
}

function ParamInput({ spec, value, onChange }: { spec: ParamSpec; value: unknown; onChange: (v: unknown) => void }) {
  const hint = [spec.description, spec.min != null || spec.max != null ? `range ${spec.min ?? "−∞"} … ${spec.max ?? "∞"}` : null].filter(Boolean).join(" · ");
  if (spec.type === "bool") return <Field label={spec.name} hint={hint}><label className="flex h-9 items-center gap-2 text-sm"><input type="checkbox" checked={!!value} onChange={(e) => onChange(e.target.checked)} /> enabled</label></Field>;
  if (spec.type === "choice") return <Field label={spec.name} hint={hint}><Select value={String(value)} onChange={(e) => onChange(e.target.value)}>{(spec.choices ?? []).map((c) => <option key={String(c)} value={String(c)}>{String(c)}</option>)}</Select></Field>;
  return <Field label={spec.name} hint={hint}><Input type="number" step={spec.step ?? (spec.type === "int" ? 1 : 0.01)} min={spec.min ?? undefined} max={spec.max ?? undefined} value={value as number} onChange={(e) => onChange(e.target.value === "" ? "" : Number(e.target.value))} /></Field>;
}