"use client";
import Link from "next/link";
import { useEffect, useMemo, useState } from "react";
import { api, type Dataset, type Heatmap, type SessionRow } from "@/lib/api";
import { useAsync, useDebounced, useQueryParam } from "@/lib/hooks";
import { daysAgo, fmtCompact, fmtInt, fmtPct, fmtTime, today } from "@/lib/format";
import { Card, ErrorState, Field, PageHeader, Skeleton } from "@/components/ui";
import { DataTable } from "@/components/DataTable";
import { DateRange } from "@/components/DateRange";
import { CompletenessHeatmap, VolumeBarChart } from "@/components/charts";

const DEFAULT_DS = "market_bars.stock.1m.raw";

export default function CoveragePage() {
  const qDs = useQueryParam("dataset_id");
  const qSym = useQueryParam("symbol");
  const [datasetId, setDatasetId] = useState(DEFAULT_DS);
  const [start, setStart] = useState(daysAgo(120));
  const [end, setEnd] = useState(today());
  const [symbol, setSymbol] = useState("");
  const dsym = useDebounced(symbol.trim().toUpperCase(), 400);

  useEffect(() => {
    if (qDs) setDatasetId(qDs);
  }, [qDs]);
  useEffect(() => {
    if (qSym) setSymbol(qSym.toUpperCase());
  }, [qSym]);

  const datasets = useAsync((s) => api.get<{ data: Dataset[] }>("/catalog/datasets", undefined, s), []);
  const heat = useAsync((s) => api.get<Heatmap>("/coverage/heatmap", { dataset_id: datasetId, start, end }, s), [datasetId, start, end]);
  const interval = datasetId.includes(".5m.") ? "5m" : "1m";
  const sessions = useAsync((s) => api.get<{ data: SessionRow[]; meta: { dataset_id: string; symbol: string } }>("/market/sessions", { symbol: dsym, interval, start, end }, s), [dsym, interval, start, end], { enabled: dsym.length > 0 });

  const barData = useMemo(() => (heat.data?.sessions ?? []).map((s) => ({ label: s.session_date, t: s.session_date, symbols: s.symbols, bars: s.bars })), [heat.data]);
  const totals = useMemo(() => {
    const ss = heat.data?.sessions ?? [];
    const bars = ss.reduce((a, s) => a + Number(s.bars ?? 0), 0);
    const comp = ss.filter((s) => s.completeness !== null);
    const avg = comp.length ? comp.reduce((a, s) => a + Number(s.completeness), 0) / comp.length : null;
    return { sessions: ss.length, bars, avg, maxSymbols: Math.max(0, ...ss.map((s) => s.symbols)) };
  }, [heat.data]);

  const candidates = (datasets.data?.data ?? []).filter((d) => d.kind === "market_bars" || d.kind === "derived");

  return (
    <>
      <PageHeader title="Coverage" subtitle="Sessions × completeness (bars ÷ expected regular-hours bars, capped at 100 %)" />
      <Card className="mb-4">
        <div className="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
          <DateRange start={start} end={end} onChange={(s, e) => { setStart(s); setEnd(e); }} />
          <Field label="Dataset" className="lg:w-80">
            <select className="input font-mono text-xs" value={datasetId} onChange={(e) => setDatasetId(e.target.value)}>
              {!candidates.some((d) => d.id === datasetId) && <option value={datasetId}>{datasetId}</option>}
              {candidates.map((d) => (
                <option key={d.id} value={d.id}>
                  {d.id} {d.status !== "active" ? `(${d.status})` : ""}
                </option>
              ))}
            </select>
          </Field>
        </div>
      </Card>

      {heat.error && <ErrorState error={heat.error} retry={heat.reload} />}
      <div className="mb-4 grid grid-cols-2 gap-3 md:grid-cols-4">
        <div className="card"><div className="text-xs text-ink-2">Sessions in range</div><div className="mt-1 text-2xl font-semibold">{fmtInt(totals.sessions)}</div></div>
        <div className="card"><div className="text-xs text-ink-2">Bars in range</div><div className="mt-1 text-2xl font-semibold" title={fmtInt(totals.bars)}>{fmtCompact(totals.bars)}</div></div>
        <div className="card"><div className="text-xs text-ink-2">Mean completeness</div><div className="mt-1 text-2xl font-semibold">{fmtPct(totals.avg)}</div></div>
        <div className="card"><div className="text-xs text-ink-2">Max symbols / session</div><div className="mt-1 text-2xl font-semibold">{fmtInt(totals.maxSymbols)}</div></div>
      </div>

      <div className="grid gap-4 lg:grid-cols-[1fr_minmax(300px,0.7fr)]">
        <div className="flex flex-col gap-4">
          <Card title="Completeness per session" className={heat.loading ? "opacity-70" : undefined}>
            {heat.loading && !heat.data ? <Skeleton rows={4} /> : heat.data ? <CompletenessHeatmap cells={heat.data.sessions} start={start} end={end} /> : null}
          </Card>
          <Card title="Bars per session">
            {heat.data && barData.length > 0 ? <VolumeBarChart data={barData} valueKey="bars" title="bars" height={140} /> : <div className="text-sm text-ink-3">No sessions in range.</div>}
          </Card>
          <Card title="Symbols per session">
            {heat.data && barData.length > 0 ? <VolumeBarChart data={barData} valueKey="symbols" title="symbols" height={120} color="var(--series-3)" /> : <div className="text-sm text-ink-3">No sessions in range.</div>}
          </Card>
        </div>
        <Card title={`Top symbols by bars (${heat.data?.top_symbols.length ?? 0})`}>
          <DataTable
            rows={heat.data?.top_symbols}
            loading={heat.loading}
            rowKey={(r) => r.symbol}
            mobile="scroll"
            maxHeight="32rem"
            onRowClick={(r) => setSymbol(r.symbol)}
            columns={[
              { key: "symbol", header: "Symbol", render: (r) => <Link href={`/symbols/detail/?symbol=${encodeURIComponent(r.symbol)}`} className="font-mono font-medium text-accent-ink hover:underline" onClick={(e) => e.stopPropagation()}>{r.symbol}</Link> },
              { key: "sessions", header: "Sessions", num: true, render: (r) => fmtInt(r.sessions) },
              { key: "bars", header: "Bars", num: true, render: (r) => fmtCompact(r.bars) },
              { key: "completeness", header: "Compl.", num: true, render: (r) => fmtPct(r.completeness) },
            ]}
            empty="No coverage rows in this range."
          />
        </Card>
      </div>

      <Card title="Per-symbol sessions" className="mt-4" actions={<span className="text-xs text-ink-3">click a top symbol or type one</span>}>
        <Field label="Symbol" className="mb-3 max-w-xs">
          <input className="input font-mono uppercase" placeholder="AAPL" value={symbol} onChange={(e) => setSymbol(e.target.value)} />
        </Field>
        {sessions.error && <ErrorState error={sessions.error} retry={sessions.reload} />}
        {dsym ? (
          <DataTable
            rows={sessions.data?.data}
            loading={sessions.loading}
            rowKey={(r) => r.session_date}
            mobile="scroll"
            maxHeight="28rem"
            columns={[
              { key: "session_date", header: "Session", render: (r) => <span className="tnum">{r.session_date}</span> },
              { key: "bar_count", header: "Bars", num: true, render: (r) => fmtInt(r.bar_count) },
              { key: "expected_bars", header: "Expected", num: true, render: (r) => fmtInt(r.expected_bars) },
              { key: "completeness", header: "Compl.", num: true, render: (r) => (r.expected_bars ? fmtPct(Math.min(1, r.bar_count / r.expected_bars)) : "—") },
              { key: "first_ts", header: "First (UTC)", render: (r) => <span className="tnum">{fmtTime(r.first_ts)}</span> },
              { key: "last_ts", header: "Last (UTC)", render: (r) => <span className="tnum">{fmtTime(r.last_ts)}</span> },
              { key: "flags", header: "Flags", render: (r) => (r.flags?.length ? r.flags.map((f) => <span key={f} className="pill mr-1 bg-warn-soft text-warn-ink">{f}</span>) : <span className="text-ink-3">—</span>) },
            ]}
            empty={`No sessions for ${dsym} in this range.`}
            footer={<span>{fmtInt(sessions.data?.data.length ?? 0)} sessions · dataset {sessions.data?.meta.dataset_id}</span>}
          />
        ) : (
          <div className="text-sm text-ink-3">Enter a symbol to list its sessions.</div>
        )}
      </Card>
    </>
  );
}