import { useSearchParams } from "react-router";
import { qs, type Debt } from "../api";
import { useFetch } from "../hooks";
import { Badge, ErrorBox, Loading } from "../components/ui";
import { DebtTable } from "../components/shared";

export default function DebtPage() {
  const [sp, setSp] = useSearchParams();
  const status = sp.get("status") ?? "open", severity = sp.get("severity") ?? "";
  const { data, error, loading, reload } = useFetch<{ debt: Debt[]; summary: { severity: string; kind: string; n: number }[] }>(`debt${qs({ status, severity })}`);
  const set = (k: string, v: string) => setSp((p) => { const n = new URLSearchParams(p); if (v) n.set(k, v); else n.delete(k); return n; });
  return (
    <div>
      <h1>Knowledge Debt</h1><p className="hint">Opaque MCP, inferred schemas, undocumented endpoints, missing snapshots, untested clients, stale contracts, unresolved licenses. Critical debt blocks verified research export.</p>
      {data && <div className="row" style={{ marginBottom: 10 }}>{data.summary.map((s) => <span key={s.severity + s.kind} className="badge"><Badge v={s.severity} /> {s.kind}: {s.n}</span>)}</div>}
      <div className="filters">
        <select aria-label="Status" value={status} onChange={(e) => set("status", e.target.value)}>{["open", "in_progress", "resolved", "accepted", "all"].map((s) => <option key={s}>{s}</option>)}</select>
        <select aria-label="Severity" value={severity} onChange={(e) => set("severity", e.target.value)}><option value="">all severities</option>{["critical", "high", "medium", "low"].map((s) => <option key={s}>{s}</option>)}</select>
      </div>
      {loading && <Loading />}<ErrorBox error={error} />
      {data && <DebtTable debt={data.debt} onChange={reload} />}
    </div>
  );
}