"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import { Chip, Empty, HealthPill, Panel, Skeleton, Sparkline, Stat, Table, Td } from "@/components/ui";
import { fmtInt, relTime, utcDateTime } from "@/lib/format";

/** Shape of GET /api/v1/admin/factory (internal). */
interface FactoryReport {
  seeds: Record<string, number>;
  candidates: Record<string, number>;
  shadow: { total: number; up: number; unhealthy: number; ready: number; raw_changes: number };
  shadow_by_kind: { kind_class: string; n: number }[];
  daily: { day: string; seeds_processed: number; requests: number; candidates: number; shadow_created: number; accepted: number; rejected: number; blocked: number }[];
  sectors: { sector: string; seeds: number; queued: number; discovering: number; discovered: number; blocked: number; errors: number; shadow: number; accepted: number; rejected: number }[];
  recent_seeds: { id: string; name: string; domain: string; sector: string | null; status: string; candidates: number; shadow: number; accepted: number; rejected: number; last_error: string | null; discovered_at: string | null; source_id: string | null }[];
  heartbeat: { at?: string; processed?: number; queued?: number; concurrency?: number; idle?: boolean; lastBatch?: { seed: string; status: string; candidates: number; shadow: number; requests: number; ms: number }[] } | null;
  generated_at: string;
}
interface Candidate {
  id: string;
  source_id: string;
  url: string;
  name: string | null;
  kind_class: string | null;
  connector: string | null;
  tier: string | null;
  status: string;
  score_value: number | null;
  reason: string | null;
  shadow_sensor_id: string | null;
  shadow_health: string | null;
  shadow_runs: number | null;
  shadow_changes: number | null;
  updated_at: string;
}

export function FactoryPanel({ fetcher, tick }: { fetcher: <T>(path: string, init?: RequestInit) => Promise<T>; tick: number }) {
  const [d, setD] = useState<FactoryReport | null>(null);
  const [err, setErr] = useState<string | null>(null);
  const [cands, setCands] = useState<Candidate[] | null>(null);
  const [candStatus, setCandStatus] = useState("shadow");
  const [busy, setBusy] = useState<string | null>(null);

  useEffect(() => {
    let cancelled = false;
    fetcher<FactoryReport>("/api/v1/admin/factory")
      .then((r) => !cancelled && (setD(r), setErr(null)))
      .catch((e: Error) => !cancelled && setErr(e.message));
    return () => {
      cancelled = true;
    };
  }, [fetcher, tick]);
  useEffect(() => {
    let cancelled = false;
    fetcher<{ items: Candidate[] }>(`/api/v1/admin/factory/candidates?status=${encodeURIComponent(candStatus)}&limit=60`)
      .then((r) => !cancelled && setCands(r.items))
      .catch(() => !cancelled && setCands([]));
    return () => {
      cancelled = true;
    };
  }, [fetcher, tick, candStatus]);

  const act = async (path: string): Promise<void> => {
    setBusy(path);
    try {
      await fetcher(path, { method: "POST", body: "{}" });
      const r = await fetcher<{ items: Candidate[] }>(`/api/v1/admin/factory/candidates?status=${encodeURIComponent(candStatus)}&limit=60`);
      setCands(r.items);
    } catch (e) {
      setErr((e as Error).message);
    } finally {
      setBusy(null);
    }
  };

  if (err && !d) return <Panel title="Source Factory"><Empty>{err}</Empty></Panel>;
  if (!d) return <Skeleton className="h-40 w-full" />;
  const hb = d.heartbeat;
  const stale = hb?.at ? Date.now() - new Date(hb.at).getTime() > 5 * 60_000 : true;
  const daily = [...d.daily].reverse();
  const seedsTotal = Object.values(d.seeds).reduce((a, b) => a + b, 0);
  return (
    <div className="flex flex-col gap-4">
      <div className="panel grid grid-cols-2 divide-x divide-y divide-line sm:grid-cols-4 xl:grid-cols-8 xl:divide-y-0">
        <Stat label="Factory" value={hb ? (stale ? "STALE" : hb.idle ? "IDLE" : "LIVE") : "NO HEARTBEAT"} tone={hb && !stale ? "signal" : "warn"} hint={hb?.at ? `${relTime(hb.at)} · ${hb.processed ?? 0} processed` : "Redis ws:factory:status empty"} />
        <Stat label="Seeds" value={fmtInt(seedsTotal)} hint={`${fmtInt(d.seeds.queued ?? 0)} queued · ${fmtInt(d.seeds.discovering ?? 0)} discovering`} />
        <Stat label="Discovered" value={fmtInt((d.seeds.discovered ?? 0) + (d.seeds.done ?? 0))} hint={`${fmtInt(d.seeds.blocked ?? 0)} blocked · ${fmtInt(d.seeds.error ?? 0)} errors`} />
        <Stat label="Candidates" value={fmtInt(Object.values(d.candidates).reduce((a, b) => a + b, 0))} hint={`${fmtInt(d.candidates.candidate ?? 0)} waiting · ${fmtInt(d.candidates.duplicate ?? 0)} dup`} />
        <Stat label="Shadow" value={fmtInt(d.shadow.total)} tone="info" hint={`${fmtInt(d.shadow.ready)} ready · ${fmtInt(d.shadow.unhealthy)} unhealthy`} />
        <Stat label="Accepted" value={fmtInt(d.candidates.accepted ?? 0)} tone="signal" hint="production sensors" />
        <Stat label="Rejected" value={fmtInt(d.candidates.rejected ?? 0)} hint="errors · noise · duplicates" />
        <Stat label="Requests today" value={fmtInt(daily.at(-1)?.requests ?? 0)} hint={`${fmtInt(daily.at(-1)?.seeds_processed ?? 0)} organizations`} />
      </div>

      <div className="grid grid-cols-1 gap-4 xl:grid-cols-3">
        <Panel title="Funnel · 30 days" dense>
          {daily.length ? (
            <div className="grid grid-cols-1 gap-3 p-3 sm:grid-cols-2">
              {(["seeds_processed", "candidates", "shadow_created", "accepted"] as const).map((k) => (
                <div key={k}>
                  <div className="mb-1 flex items-baseline justify-between"><span className="label">{k.replace(/_/g, " ")}</span><span className="font-mono text-[12px] tabular">{fmtInt(daily.reduce((a, r) => a + Number(r[k] ?? 0), 0))}</span></div>
                  <Sparkline values={daily.map((r) => Number(r[k] ?? 0))} tone={k === "accepted" ? "signal" : k === "shadow_created" ? "info" : "muted"} responsive />
                </div>
              ))}
            </div>
          ) : (
            <Empty>No factory activity yet.</Empty>
          )}
        </Panel>
        <Panel title="By sector" dense className="xl:col-span-2">
          {d.sectors.length ? (
            <div className="max-h-72 overflow-auto">
              <Table head={["Sector", "Seeds", "Queued", "Discovered", "Blocked", "Errors", "Shadow", "Accepted", "Rejected"]}>
                {d.sectors.map((s) => (
                  <tr key={s.sector}>
                    <Td><Link href={`/coverage/${s.sector}`} className="hover:underline">{s.sector}</Link></Td>
                    <Td mono>{fmtInt(s.seeds)}</Td>
                    <Td mono className="text-fg-subtle">{fmtInt(s.queued + s.discovering)}</Td>
                    <Td mono>{fmtInt(s.discovered)}</Td>
                    <Td mono className={s.blocked ? "text-warn" : "text-fg-subtle"}>{fmtInt(s.blocked)}</Td>
                    <Td mono className={s.errors ? "text-danger" : "text-fg-subtle"}>{fmtInt(s.errors)}</Td>
                    <Td mono className="text-info">{fmtInt(s.shadow)}</Td>
                    <Td mono className="text-signal">{fmtInt(s.accepted)}</Td>
                    <Td mono className="text-fg-subtle">{fmtInt(s.rejected)}</Td>
                  </tr>
                ))}
              </Table>
            </div>
          ) : (
            <Empty>No seeds yet — run <code>cli.ts factory seed</code> or POST /api/v1/admin/factory/seeds.</Empty>
          )}
        </Panel>
      </div>

      <div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
        <Panel title="Recently processed organizations" dense>
          {d.recent_seeds.length ? (
            <div className="max-h-80 overflow-auto">
              <Table head={["Organization", "Sector", "Status", "Cand.", "Shadow", "Acc.", "Rej.", "When"]}>
                {d.recent_seeds.map((s) => (
                  <tr key={s.id}>
                    <Td>{s.source_id ? <Link href={`/source/${s.source_id}`} className="hover:underline">{s.name}</Link> : s.name}<div className="font-mono text-[10.5px] text-fg-subtle">{s.domain}{s.last_error ? ` · ${s.last_error}` : ""}</div></Td>
                    <Td mono className="text-fg-subtle">{s.sector ?? "—"}</Td>
                    <Td><Chip tone={s.status === "discovered" ? "ok" : s.status === "blocked" ? "warn" : s.status === "error" ? "danger" : "default"}>{s.status}</Chip></Td>
                    <Td mono>{s.candidates}</Td>
                    <Td mono className="text-info">{s.shadow}</Td>
                    <Td mono className="text-signal">{s.accepted}</Td>
                    <Td mono className="text-fg-subtle">{s.rejected}</Td>
                    <Td mono className="text-fg-subtle"><span title={s.discovered_at ? utcDateTime(s.discovered_at) : ""}>{s.discovered_at ? relTime(s.discovered_at) : "—"}</span></Td>
                  </tr>
                ))}
              </Table>
            </div>
          ) : (
            <Empty>Nothing processed yet.</Empty>
          )}
        </Panel>
        <Panel
          title="Candidates"
          dense
          action={
            <span className="flex gap-1">
              {["shadow", "candidate", "accepted", "rejected", "duplicate"].map((s) => (
                <button key={s} type="button" onClick={() => setCandStatus(s)} className={`rounded px-1.5 py-0.5 font-mono text-[10.5px] ${candStatus === s ? "bg-panel-2 text-fg" : "text-fg-subtle hover:text-fg"}`}>{s}</button>
              ))}
            </span>
          }
        >
          {cands === null ? (
            <Skeleton className="h-40 w-full" />
          ) : cands.length === 0 ? (
            <Empty>No candidate with status {candStatus}.</Empty>
          ) : (
            <div className="max-h-80 overflow-auto">
              <Table head={["Sensor", "Kind", "Score", "Shadow", "Reason", ""]}>
                {cands.map((c) => (
                  <tr key={c.id}>
                    <Td><Link href={`/source/${c.source_id}`} className="hover:underline">{c.source_id}</Link><div className="max-w-[28ch] truncate font-mono text-[10.5px] text-fg-subtle" title={c.url}>{c.name ?? ""} · {c.url}</div></Td>
                    <Td mono className="text-fg-subtle">{c.kind_class ?? "—"}<div>{c.connector} {c.tier}</div></Td>
                    <Td mono>{c.score_value?.toFixed(2) ?? "—"}</Td>
                    <Td>{c.shadow_sensor_id ? <span className="flex flex-col gap-0.5"><HealthPill health={c.shadow_health ?? "UP"} /><span className="font-mono text-[10.5px] text-fg-subtle">{c.shadow_runs ?? 0} checks · {c.shadow_changes ?? 0} changes</span></span> : <span className="text-fg-subtle">—</span>}</Td>
                    <Td className="text-[11px] text-fg-subtle"><span className="block max-w-[24ch] truncate" title={c.reason ?? ""}>{c.reason ?? "—"}</span></Td>
                    <Td>
                      {c.status === "shadow" && c.shadow_sensor_id && (
                        <span className="flex gap-1">
                          <button type="button" disabled={busy !== null} onClick={() => void act(`/api/v1/admin/factory/shadow/${c.shadow_sensor_id}/accept`)} className="rounded border border-line px-1.5 py-0.5 text-[10.5px] text-signal hover:border-line-strong disabled:opacity-50">accept</button>
                          <button type="button" disabled={busy !== null} onClick={() => void act(`/api/v1/admin/factory/shadow/${c.shadow_sensor_id}/reject`)} className="rounded border border-line px-1.5 py-0.5 text-[10.5px] text-danger hover:border-line-strong disabled:opacity-50">reject</button>
                        </span>
                      )}
                      {c.status === "candidate" && c.connector && (
                        <button type="button" disabled={busy !== null} onClick={() => void act(`/api/v1/admin/factory/candidates/${c.id}/shadow`)} className="rounded border border-line px-1.5 py-0.5 text-[10.5px] text-info hover:border-line-strong disabled:opacity-50">shadow</button>
                      )}
                    </Td>
                  </tr>
                ))}
              </Table>
            </div>
          )}
        </Panel>
      </div>
      {hb?.lastBatch?.length ? <p className="text-[11px] text-fg-subtle">last batch: {hb.lastBatch.map((b) => `${b.seed} ${b.status} (${b.candidates} cand · ${b.shadow} shadow · ${b.requests} req · ${Math.round(b.ms / 1000)} s)`).join(" · ")}</p> : null}
    </div>
  );
}