"use client";
import Link from "next/link";
import { useEffect, useState } from "react";
import { api, type Anomaly, type Dataset, type QualityOut } from "@/lib/api";
import { useAsync, useDebounced, useQueryParam } from "@/lib/hooks";
import { fmtInt, fmtTs } from "@/lib/format";
import { Card, Empty, ErrorState, Field, PageHeader, SeverityBadge, Skeleton, KV } from "@/components/ui";
import { DataTable } from "@/components/DataTable";
import { JsonView } from "@/components/JsonView";
import { CategoryBars } from "@/components/charts";

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

export default function QualityPage() {
  const qDs = useQueryParam("dataset_id");
  const [datasetId, setDatasetId] = useState(DEFAULT_DS);
  const [code, setCode] = useState("");
  const [severity, setSeverity] = useState("");
  const [symbol, setSymbol] = useState("");
  const dsym = useDebounced(symbol.trim().toUpperCase(), 300);
  useEffect(() => {
    if (qDs) setDatasetId(qDs);
  }, [qDs]);

  const datasets = useAsync((s) => api.get<{ data: Dataset[] }>("/catalog/datasets", undefined, s), []);
  const q = useAsync((s) => api.get<QualityOut>("/quality", { dataset_id: datasetId }, s), [datasetId]);
  const an = useAsync((s) => api.get<{ data: Anomaly[] }>("/quality/anomalies", { dataset_id: datasetId, code, severity, symbol: dsym, limit: 500 }, s), [datasetId, code, severity, dsym]);

  const latest = q.data?.latest;
  const byCode = (q.data?.anomalies_by_code_30d ?? []).map((r) => ({ name: r.code, value: Number(r.n) }));

  return (
    <>
      <PageHeader
        title="Quality"
        subtitle="Validation reports and anomalies recorded at ingestion"
        actions={
          <Field label="Dataset" className="w-72">
            <select className="input font-mono text-xs" value={datasetId} onChange={(e) => setDatasetId(e.target.value)}>
              {!(datasets.data?.data ?? []).some((d) => d.id === datasetId) && <option value={datasetId}>{datasetId}</option>}
              {(datasets.data?.data ?? []).filter((d) => d.status === "active").map((d) => (
                <option key={d.id} value={d.id}>
                  {d.id}
                </option>
              ))}
            </select>
          </Field>
        }
      />
      {q.error && <ErrorState error={q.error} retry={q.reload} />}
      <div className="grid gap-4 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)]">
        <Card title="Latest report">
          {q.loading && !q.data ? (
            <Skeleton rows={5} />
          ) : latest ? (
            <>
              <KV
                items={[
                  ["Report id", <code key="id" className="text-xs">{String(latest.id ?? "—")}</code>],
                  ["Created", fmtTs(latest.created_at as string)],
                  ["Rows checked", fmtInt(latest.rows_checked as number)],
                  ["Anomalies", fmtInt(latest.anomalies as number)],
                ]}
              />
              <div className="mt-3 text-xs text-ink-3">summary</div>
              <JsonView value={latest.summary ?? {}} maxHeight="16rem" />
            </>
          ) : (
            <Empty>No quality report yet for this dataset — enqueue a <code>quality</code> job from Ingestion.</Empty>
          )}
        </Card>
        <Card title="Anomalies by code (30 days)">
          {byCode.length ? <CategoryBars data={byCode} /> : <Empty>No anomalies in the last 30 days.</Empty>}
          <ul className="mt-3 grid gap-1 text-xs sm:grid-cols-2">
            {Object.entries(q.data?.codes ?? {}).map(([c, d]) => (
              <li key={c} className="flex gap-2">
                <button className={`font-mono shrink-0 ${code === c ? "text-accent-ink underline" : "text-ink-1 hover:underline"}`} onClick={() => setCode(code === c ? "" : c)}>
                  {c}
                </button>
                <span className="text-ink-3">{d}</span>
              </li>
            ))}
          </ul>
        </Card>
      </div>

      <Card title={`Reports (${q.data?.reports.length ?? 0})`} className="mt-4">
        <DataTable
          rows={q.data?.reports}
          loading={q.loading}
          rowKey={(r) => r.id}
          mobile="scroll"
          maxHeight="18rem"
          columns={[
            { key: "created_at", header: "Created", render: (r) => <span className="tnum text-xs">{fmtTs(r.created_at)}</span> },
            { key: "rows_checked", header: "Rows checked", num: true, render: (r) => fmtInt(r.rows_checked) },
            { key: "anomalies", header: "Anomalies", num: true, render: (r) => fmtInt(r.anomalies) },
            { key: "summary", header: "Summary", render: (r) => <JsonView value={r.summary} collapsed /> },
          ]}
          empty="No reports."
        />
      </Card>

      <Card
        title="Anomalies"
        className="mt-4"
        actions={
          <div className="flex flex-wrap gap-2">
            <input className="input w-28 py-1 font-mono text-xs uppercase" placeholder="symbol" value={symbol} onChange={(e) => setSymbol(e.target.value)} aria-label="Symbol" />
            <select className="input w-auto py-1 text-xs" value={severity} onChange={(e) => setSeverity(e.target.value)} aria-label="Severity">
              <option value="">any severity</option>
              <option value="info">info</option>
              <option value="warning">warning</option>
              <option value="error">error</option>
            </select>
            <select className="input w-auto py-1 font-mono text-xs" value={code} onChange={(e) => setCode(e.target.value)} aria-label="Code">
              <option value="">any code</option>
              {Object.keys(q.data?.codes ?? {}).map((c) => (
                <option key={c} value={c}>
                  {c}
                </option>
              ))}
            </select>
          </div>
        }
      >
        {an.error && <ErrorState error={an.error} retry={an.reload} />}
        <DataTable
          rows={an.data?.data}
          loading={an.loading}
          rowKey={(r, i) => String(r.id ?? i)}
          mobile="scroll"
          maxHeight="60dvh"
          columns={[
            { key: "created_at", header: "Recorded", render: (r) => <span className="tnum text-xs">{fmtTs(r.created_at)}</span> },
            { key: "severity", header: "Severity", render: (r) => <SeverityBadge severity={r.severity} /> },
            { key: "code", header: "Code", mono: true },
            { key: "symbol", header: "Symbol", render: (r) => (r.symbol ? <Link href={`/symbols/detail/?symbol=${encodeURIComponent(r.symbol)}`} className="font-mono text-accent-ink hover:underline">{r.symbol}</Link> : "—") },
            { key: "session_date", header: "Session", hideSm: true, render: (r) => <span className="tnum">{r.session_date ?? "—"}</span> },
            { key: "detail", header: "Detail", render: (r) => <JsonView value={r.detail} collapsed /> },
          ]}
          empty="No anomalies match."
          footer={<span>{fmtInt(an.data?.data.length ?? 0)} rows (max 500)</span>}
        />
      </Card>
    </>
  );
}