"use client";

import { KeyRound, LogOut, Play, RefreshCw, ShieldAlert } from "lucide-react";
import Link from "next/link";
import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
import { SENSOR_TYPES, TIERS } from "@websensor/core/client";
import { useMounted } from "@/components/theme";
import { Chip, Empty, HealthPill, Panel, Skeleton, Sparkline, Stat, Table, Td } from "@/components/ui";
import { clientApiBase } from "@/lib/api";
import { FactoryPanel } from "./factory-panel";
import { fmtBytes, fmtInt, fmtMs, fmtPct, relTime, untilTime, utcDateTime, utcTime } from "@/lib/format";

const KEY = "ws_admin";

// ---------------------------------------------------------------------------------------
// Types for GET /api/v1/admin/ops (kept local: internal shape, not part of the public client)
// ---------------------------------------------------------------------------------------

interface Ops {
  db: { latency_ms: number };
  queue: { due: number; overdue_10m: number; p0: number; p0_due: number; oldest_due: string | null };
  engine: { inflight?: number; concurrency?: number; due?: number; busyHosts?: { host: string; inflight: number }[]; circuitOpen?: { host: string; failures: number; until: string }[]; at?: string; version?: string; [k: string]: unknown } | null;
  outcomes_1h: { outcome: string; n: number }[];
  top_failing_domains: { host: string; failures: number; sensors: number; last_error: string | null; last_at: string }[];
  slowest_sensors: { id: string; name: string; source_id: string; url: string; connector: string; avg_latency_ms: number; total_runs: number }[];
  throughput_24h: { t: string; checks: number; not_modified: number; errors: number; events: number; avg_ms: number | null }[];
  storage: { db_size: string; db_bytes: string | number; snapshots: number; snapshots_with_raw: number; raw_bytes_uncompressed: string | number; changes: number; events: number; runs: number; blobs: { files: number; bytes: number } | null };
  llm_24h: { model: string; calls: number; input_tokens: string | number; output_tokens: string | number; failures: number }[];
  sensors_by_status: { status: string; health: string; n: number }[];
  recent_errors: { started_at: string; sensor_id: string; source_id: string; connector: string; http_status: number | null; outcome: string; error: string | null }[];
  cache: { entries: number; keys: string[] };
  live: { clients: number; published: number };
  connectors: { key: string; name: string; version?: string; sensorTypes?: string[]; description?: string }[];
  generated_at: string;
}

class AdminError extends Error {
  status: number;
  body: Record<string, unknown>;
  constructor(status: number, body: Record<string, unknown>) {
    super(typeof body.error === "string" ? body.error : `HTTP ${status}`);
    this.status = status;
    this.body = body;
  }
}

function readToken(): string {
  if (typeof window === "undefined") return "";
  return window.sessionStorage.getItem(KEY) ?? "";
}

async function adminFetch<T>(path: string, init: RequestInit = {}, token = readToken()): Promise<T> {
  const headers: Record<string, string> = { accept: "application/json", "x-websensor-admin": token, ...((init.headers as Record<string, string>) ?? {}) };
  if (init.body !== undefined && !headers["content-type"]) headers["content-type"] = "application/json";
  const res = await fetch(`${clientApiBase()}${path}`, { ...init, headers });
  const body = (await res.json().catch(() => ({}))) as Record<string, unknown>;
  if (!res.ok) throw new AdminError(res.status, body);
  return body as T;
}

/** A heartbeat older than two minutes means the scheduler stopped publishing. */
function heartbeatStale(at: string | undefined): boolean {
  return Boolean(at) && Date.now() - new Date(at as string).getTime() > 120_000;
}

function gateMessage(e: unknown): string {
  if (e instanceof AdminError) {
    if (e.status === 401) return "invalid token";
    if (e.status === 404) return "admin API disabled (WS_ADMIN_TOKEN not set)";
    return `${e.message}${typeof e.body.detail === "string" ? ` — ${e.body.detail}` : ""}`;
  }
  return (e as Error).message;
}

// ---------------------------------------------------------------------------------------

export function Ops() {
  const mounted = useMounted();
  /** null = use the token stored in sessionStorage; "" = signed out; otherwise the token entered in this session. */
  const [override, setOverride] = useState<string | null>(null);
  const token: string | null = !mounted ? null : override ?? readToken();
  const [gate, setGate] = useState<string | null>(null);
  const [data, setData] = useState<Ops | null>(null);
  const [err, setErr] = useState<string | null>(null);
  const [refreshing, setRefreshing] = useState(false);
  const [input, setInput] = useState("");
  const [tick, setTick] = useState(0);

  // Poll /admin/ops every 15 s while a token is present (and on manual refresh via `tick`).
  useEffect(() => {
    if (!token) return;
    const t = token;
    let cancelled = false;
    const pull = (): void => {
      adminFetch<Ops>("/api/v1/admin/ops", {}, t)
        .then((d) => {
          if (cancelled) return;
          setData(d);
          setErr(null);
          setGate(null);
        })
        .catch((e: unknown) => {
          if (cancelled) return;
          const msg = gateMessage(e);
          if (e instanceof AdminError && (e.status === 401 || e.status === 404)) {
            setGate(msg);
            setData(null);
          } else setErr(msg);
        })
        .finally(() => {
          if (!cancelled) setRefreshing(false);
        });
    };
    pull();
    const iv = setInterval(pull, 15_000);
    return () => {
      cancelled = true;
      clearInterval(iv);
    };
  }, [token, tick]);

  const refresh = (): void => {
    setRefreshing(true);
    setTick((x) => x + 1);
  };
  const factoryFetcher = useCallback(<T,>(path: string, init: RequestInit = {}): Promise<T> => adminFetch<T>(path, init, token ?? ""), [token]);
  const submitToken = async (): Promise<void> => {
    const t = input.trim();
    if (!t) return;
    try {
      const d = await adminFetch<Ops>("/api/v1/admin/ops", {}, t);
      window.sessionStorage.setItem(KEY, t);
      setData(d);
      setGate(null);
      setErr(null);
      setOverride(t);
      setInput("");
    } catch (e) {
      window.sessionStorage.removeItem(KEY);
      setGate(gateMessage(e));
    }
  };
  const signOut = (): void => {
    window.sessionStorage.removeItem(KEY);
    setOverride("");
    setData(null);
    setGate(null);
  };

  if (token === null) return <Skeleton className="h-24 w-full" />;
  if (!token || (gate && !data)) {
    return (
      <Panel>
        <form
          className="mx-auto flex max-w-md flex-col gap-2 py-6 text-[13px]"
          onSubmit={(e) => {
            e.preventDefault();
            void submitToken();
          }}
        >
          <p className="leading-relaxed text-fg-muted">
            <KeyRound className="mr-1.5 inline size-4 align-text-bottom" />
            Enter the admin token (<code>WS_ADMIN_TOKEN</code>). It is kept in <code>sessionStorage</code> for this tab only and sent as <code>X-WebSensor-Admin</code>.
          </p>
          <div className="flex gap-1">
            <input type="password" value={input} onChange={(e) => setInput(e.target.value)} placeholder="admin token" autoComplete="off" aria-label="Admin token" className="h-8 min-w-0 flex-1 rounded-md border border-line bg-panel px-2 font-mono text-[12.5px]" />
            <button type="submit" className="inline-flex h-8 items-center gap-1 rounded-md border border-line bg-panel-2 px-3 text-[12.5px] hover:border-line-strong">Unlock</button>
          </div>
          {gate && <p className="flex items-center gap-1 text-[12px] text-danger"><ShieldAlert className="size-3.5" /> {gate}</p>}
          <p className="text-[11px] text-fg-subtle">Public health is at <Link href="/health" className="text-info hover:underline">/health</Link>.</p>
        </form>
      </Panel>
    );
  }

  return (
    <div className="flex flex-col gap-4">
      <div className="flex flex-wrap items-center justify-between gap-2 text-[11.5px] text-fg-subtle">
        <span className="flex items-center gap-2">
          <span className={`inline-block size-2 rounded-full ${err ? "bg-danger" : "bg-signal animate-pulse-dot"}`} />
          {data ? `generated ${utcTime(data.generated_at)} UTC · db ${data.db.latency_ms} ms · ${data.live.clients} WS clients` : "loading…"}
          {err && <span className="text-danger">· {err}</span>}
        </span>
        <span className="flex items-center gap-2">
          <button type="button" onClick={refresh} disabled={refreshing} className="inline-flex h-7 items-center gap-1 rounded-md border border-line bg-panel px-2 hover:border-line-strong disabled:opacity-60"><RefreshCw className={`size-3 ${refreshing ? "animate-spin" : ""}`} /> refresh</button>
          <button type="button" onClick={signOut} className="inline-flex h-7 items-center gap-1 rounded-md border border-line bg-panel px-2 hover:border-line-strong"><LogOut className="size-3" /> forget token</button>
        </span>
      </div>

      {data ? <Dashboard d={data} /> : <Skeleton className="h-64 w-full" />}

      <h2 className="mt-2 text-[13px] font-semibold tracking-tight">Source Factory <span className="font-normal text-fg-subtle">· discovery → shadow → acceptance</span></h2>
      <FactoryPanel fetcher={factoryFetcher} tick={tick} />

      <Tools connectors={data?.connectors ?? []} onDone={refresh} />
    </div>
  );
}

// ---------------------------------------------------------------------------------------
// Dashboard panels
// ---------------------------------------------------------------------------------------

function Dashboard({ d }: { d: Ops }) {
  const eng = d.engine;
  const stale = heartbeatStale(eng?.at);
  const tp = d.throughput_24h;
  const sum = (k: "checks" | "events" | "errors" | "not_modified"): number => tp.reduce((a, r) => a + Number(r[k] ?? 0), 0);
  const outcomes = d.outcomes_1h;
  const oTotal = outcomes.reduce((a, o) => a + o.n, 0);
  const byStatus = useMemo(() => {
    const m = new Map<string, { n: number; health: Record<string, number> }>();
    for (const r of d.sensors_by_status) {
      const cur = m.get(r.status) ?? { n: 0, health: {} };
      cur.n += r.n;
      cur.health[r.health] = (cur.health[r.health] ?? 0) + r.n;
      m.set(r.status, cur);
    }
    return [...m.entries()].sort((a, b) => b[1].n - a[1].n);
  }, [d.sensors_by_status]);
  const raw = Number(d.storage.raw_bytes_uncompressed);
  const blobBytes = d.storage.blobs?.bytes ?? 0;

  return (
    <>
      <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="Engine" value={eng ? (stale ? "STALE" : "LIVE") : "NO HEARTBEAT"} tone={eng && !stale ? "signal" : "warn"} hint={eng?.at ? `${relTime(eng.at)} · ${eng.version ?? "?"}` : "Redis ws:engine:status empty"} />
        <Stat label="In flight" value={eng ? `${eng.inflight ?? 0} / ${eng.concurrency ?? "—"}` : "—"} hint="workers / concurrency" />
        <Stat label="Queue due" value={fmtInt(d.queue.due)} tone={d.queue.overdue_10m > 0 ? "warn" : undefined} hint={`${fmtInt(d.queue.overdue_10m)} overdue > 10 min`} />
        <Stat label="P0 · due" value={`${fmtInt(d.queue.p0)} · ${fmtInt(d.queue.p0_due)}`} tone={d.queue.p0_due > 0 ? "hot" : undefined} hint={d.queue.oldest_due ? `oldest ${untilTime(d.queue.oldest_due)}` : "—"} />
        <Stat label="Checks 24 h" value={fmtInt(sum("checks"))} hint={`${fmtPct(sum("checks") ? sum("not_modified") / sum("checks") : null)} 304`} />
        <Stat label="Events 24 h" value={fmtInt(sum("events"))} tone="signal" hint={`${fmtInt(sum("errors"))} errors`} />
        <Stat label="Circuit open" value={fmtInt(eng?.circuitOpen?.length ?? 0)} tone={(eng?.circuitOpen?.length ?? 0) > 0 ? "warn" : undefined} hint={`${eng?.busyHosts?.length ?? 0} busy hosts`} />
        <Stat label="Cache" value={fmtInt(d.cache.entries)} hint="TTL entries" />
      </div>

      <div className="grid grid-cols-1 gap-4 xl:grid-cols-3">
        <Panel title="Engine heartbeat">
          {eng ? (
            <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-[12.5px]">
              <Row k="At" v={utcDateTime(eng.at)} />
              <Row k="Version" v={eng.version ?? "—"} />
              <Row k="In flight" v={`${eng.inflight ?? 0} / ${eng.concurrency ?? "—"}`} />
              <Row k="Due (engine view)" v={fmtInt(eng.due)} />
              <Row k="Busy hosts" v={eng.busyHosts?.length ? eng.busyHosts.slice(0, 8).map((h) => `${h.host} ×${h.inflight}`).join(", ") : "none"} />
              <Row k="Circuit open" v={eng.circuitOpen?.length ? eng.circuitOpen.slice(0, 8).map((h) => `${h.host} (${h.failures}, until ${utcTime(h.until, false)})`).join(", ") : "none"} tone={eng.circuitOpen?.length ? "text-warn" : ""} />
            </dl>
          ) : (
            <Empty>No heartbeat in Redis — the engine is not running or cannot reach Redis.</Empty>
          )}
        </Panel>
        <Panel title="Outcomes · 1 h">
          {outcomes.length ? (
            <ul className="flex flex-col gap-1.5 text-[12.5px]">
              {outcomes.map((o) => (
                <li key={o.outcome} className="grid grid-cols-[7rem_1fr_3.5rem] items-center gap-2">
                  <span className="truncate font-mono text-[11.5px]">{o.outcome}</span>
                  <div className="h-1.5 overflow-hidden rounded-full bg-panel-2"><div className={`h-full ${o.outcome === "error" || o.outcome === "parse_error" || o.outcome === "rate_limited" ? "bg-danger" : o.outcome === "event" ? "bg-signal" : o.outcome === "not_modified" ? "bg-info" : "bg-low"}`} style={{ width: `${oTotal ? (o.n / oTotal) * 100 : 0}%` }} /></div>
                  <span className="text-right font-mono tabular">{fmtInt(o.n)}</span>
                </li>
              ))}
            </ul>
          ) : (
            <Empty>No runs in the last hour.</Empty>
          )}
        </Panel>
        <Panel title="Storage">
          <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-[12.5px]">
            <Row k="Database" v={d.storage.db_size} />
            <Row k="Snapshots" v={`${fmtInt(d.storage.snapshots)} · ${fmtInt(d.storage.snapshots_with_raw)} with raw`} />
            <Row k="Raw (uncompressed)" v={fmtBytes(raw)} />
            <Row k="Blob store" v={d.storage.blobs ? `${fmtInt(d.storage.blobs.files)} files · ${fmtBytes(blobBytes)}` : "—"} />
            <Row k="Compression" v={raw && blobBytes ? `${(raw / blobBytes).toFixed(1)}×` : "—"} />
            <Row k="Changes / events" v={`${fmtInt(d.storage.changes)} / ${fmtInt(d.storage.events)}`} />
            <Row k="Runs" v={fmtInt(d.storage.runs)} />
          </dl>
        </Panel>
      </div>

      <Panel title="Throughput · 24 h · hourly" dense>
        {tp.length ? (
          <div className="grid grid-cols-1 gap-3 p-3 sm:grid-cols-3">
            <Spark label="Checks" values={tp.map((r) => r.checks)} tone="info" />
            <Spark label="Events" values={tp.map((r) => r.events)} tone="signal" />
            <Spark label="Errors" values={tp.map((r) => r.errors)} tone="hot" />
          </div>
        ) : (
          <Empty>No sensor runs recorded in the last 24 h.</Empty>
        )}
        {tp.length > 0 && (
          <div className="max-h-56 overflow-auto border-t border-line">
            <Table head={["Hour (UTC)", "Checks", "304", "Errors", "Events", "Avg ms"]}>
              {[...tp].reverse().map((r) => (
                <tr key={r.t}>
                  <Td mono>{r.t.slice(5, 16).replace("T", " ")}</Td>
                  <Td mono>{fmtInt(r.checks)}</Td>
                  <Td mono className="text-fg-subtle">{fmtInt(r.not_modified)}</Td>
                  <Td mono className={r.errors > 0 ? "text-danger" : ""}>{fmtInt(r.errors)}</Td>
                  <Td mono className="text-signal">{fmtInt(r.events)}</Td>
                  <Td mono>{fmtMs(r.avg_ms)}</Td>
                </tr>
              ))}
            </Table>
          </div>
        )}
      </Panel>

      <div className="grid grid-cols-1 gap-4 xl:grid-cols-3">
        <Panel title="Sensors by status / health" dense>
          {byStatus.length ? (
            <Table head={["Status", "Sensors", "Health"]}>
              {byStatus.map(([status, v]) => (
                <tr key={status}>
                  <Td mono>{status}</Td>
                  <Td mono>{fmtInt(v.n)}</Td>
                  <Td>
                    <div className="flex flex-wrap gap-1">
                      {Object.entries(v.health).sort((a, b) => b[1] - a[1]).map(([h, n]) => (
                        <span key={h} className="inline-flex items-center gap-1"><HealthPill health={h} /><span className="font-mono text-[11px] text-fg-subtle tabular">{fmtInt(n)}</span></span>
                      ))}
                    </div>
                  </Td>
                </tr>
              ))}
            </Table>
          ) : (
            <Empty />
          )}
        </Panel>
        <Panel title="LLM · 24 h" dense>
          {d.llm_24h.length ? (
            <Table head={["Model", "Calls", "In", "Out", "Fail"]}>
              {d.llm_24h.map((m) => (
                <tr key={m.model}>
                  <Td mono className="whitespace-nowrap">{m.model}</Td>
                  <Td mono>{fmtInt(m.calls)}</Td>
                  <Td mono>{fmtInt(Number(m.input_tokens))}</Td>
                  <Td mono>{fmtInt(Number(m.output_tokens))}</Td>
                  <Td mono className={m.failures ? "text-danger" : "text-fg-subtle"}>{fmtInt(m.failures)}</Td>
                </tr>
              ))}
            </Table>
          ) : (
            <Empty>No LLM calls in 24 h (heuristics only).</Empty>
          )}
        </Panel>
        <Panel title="Live & cache" dense>
          <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 px-3 py-2 text-[12.5px]">
            <Row k="WS clients" v={fmtInt(d.live.clients)} />
            <Row k="Published since start" v={fmtInt(d.live.published)} />
            <Row k="Cache entries" v={fmtInt(d.cache.entries)} />
          </dl>
          <div className="max-h-32 overflow-auto border-t border-line px-3 py-2">
            <div className="flex flex-wrap gap-1">{d.cache.keys.slice(0, 40).map((k) => <Chip key={k} className="font-mono">{k}</Chip>)}</div>
          </div>
        </Panel>
      </div>

      <div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
        <Panel title="Top failing domains · 6 h" dense>
          {d.top_failing_domains.length ? (
            <Table head={["Host", "Failures", "Sensors", "Last error", "Last"]}>
              {d.top_failing_domains.map((f) => (
                <tr key={f.host}>
                  <Td mono><Link href={`/domain/${f.host}`} className="hover:underline">{f.host}</Link></Td>
                  <Td mono className="text-danger">{fmtInt(f.failures)}</Td>
                  <Td mono>{fmtInt(f.sensors)}</Td>
                  <Td className="max-w-[18rem] truncate font-mono text-[11px] text-fg-muted" ><span title={f.last_error ?? ""}>{f.last_error ?? "—"}</span></Td>
                  <Td mono className="whitespace-nowrap text-fg-subtle">{relTime(f.last_at)}</Td>
                </tr>
              ))}
            </Table>
          ) : (
            <Empty>No failures in the last 6 h.</Empty>
          )}
        </Panel>
        <Panel title="Slowest sensors" dense>
          {d.slowest_sensors.length ? (
            <Table head={["Sensor", "Source", "Connector", "Avg latency", "Runs"]}>
              {d.slowest_sensors.map((s) => (
                <tr key={s.id}>
                  <Td><Link href={`/sensor/${s.id}`} className="hover:underline">{s.name}</Link><div className="max-w-[14rem] truncate font-mono text-[10.5px] text-fg-subtle">{s.url}</div></Td>
                  <Td><Link href={`/source/${s.source_id}`} className="hover:underline">{s.source_id}</Link></Td>
                  <Td mono>{s.connector}</Td>
                  <Td mono className={s.avg_latency_ms > 10_000 ? "text-warn" : ""}>{fmtMs(s.avg_latency_ms)}</Td>
                  <Td mono>{fmtInt(s.total_runs)}</Td>
                </tr>
              ))}
            </Table>
          ) : (
            <Empty />
          )}
        </Panel>
      </div>

      <Panel title="Recent errors · 1 h" dense>
        {d.recent_errors.length ? (
          <Table head={["At", "Sensor", "Source", "Connector", "HTTP", "Outcome", "Error"]}>
            {d.recent_errors.map((r, i) => (
              <tr key={`${r.sensor_id}-${i}`}>
                <Td mono className="whitespace-nowrap text-fg-subtle">{utcTime(r.started_at)}</Td>
                <Td><Link href={`/sensor/${r.sensor_id}`} className="font-mono text-[11.5px] hover:underline">{r.sensor_id}</Link></Td>
                <Td><Link href={`/source/${r.source_id}`} className="hover:underline">{r.source_id}</Link></Td>
                <Td mono>{r.connector}</Td>
                <Td mono>{r.http_status ?? "—"}</Td>
                <Td mono className="text-danger">{r.outcome}</Td>
                <Td className="max-w-[24rem] truncate font-mono text-[11px] text-fg-muted"><span title={r.error ?? ""}>{r.error ?? "—"}</span></Td>
              </tr>
            ))}
          </Table>
        ) : (
          <Empty>No errors in the last hour.</Empty>
        )}
      </Panel>
    </>
  );
}

function Row({ k, v, tone = "" }: { k: string; v: ReactNode; tone?: string }) {
  return (
    <>
      <dt className="text-fg-subtle">{k}</dt>
      <dd className={`min-w-0 break-words text-right font-mono text-[12px] tabular ${tone}`}>{v}</dd>
    </>
  );
}

function Spark({ label, values, tone }: { label: string; values: number[]; tone: "signal" | "hot" | "info" }) {
  const last = values[values.length - 1] ?? 0;
  const max = Math.max(...values, 0);
  return (
    <div className="rounded-md border border-line bg-panel-2 p-2">
      <div className="flex items-baseline justify-between">
        <span className="label">{label}</span>
        <span className="font-mono text-[11px] text-fg-subtle tabular">last h {fmtInt(last)} · max {fmtInt(max)}</span>
      </div>
      <div className="mt-1 w-full overflow-hidden">
        <Sparkline values={values} width={360} height={40} tone={tone} />
      </div>
    </div>
  );
}

// ---------------------------------------------------------------------------------------
// Tools
// ---------------------------------------------------------------------------------------

type Json = Record<string, unknown>;

function Result({ r }: { r: { ok: boolean; body: Json | null; error?: string } | null }) {
  if (!r) return null;
  return (
    <div className={`rounded-md border px-2 py-1.5 text-[12px] ${r.ok ? "border-ok/40 bg-ok/10" : "border-danger/40 bg-danger/10"}`}>
      {r.error && <div className="font-mono font-semibold text-danger">{r.error}</div>}
      {r.body && <pre className="max-h-64 overflow-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-4 text-fg-muted">{JSON.stringify(r.body, null, 2)}</pre>}
    </div>
  );
}

function useAction() {
  const [busy, setBusy] = useState(false);
  const [res, setRes] = useState<{ ok: boolean; body: Json | null; error?: string } | null>(null);
  const run = async (fn: () => Promise<Json>): Promise<Json | null> => {
    setBusy(true);
    setRes(null);
    try {
      const body = await fn();
      setRes({ ok: true, body });
      return body;
    } catch (e) {
      setRes({ ok: false, body: e instanceof AdminError ? e.body : null, error: gateMessage(e) });
      return null;
    } finally {
      setBusy(false);
    }
  };
  return { busy, res, run };
}

const input = "h-8 min-w-0 rounded-md border border-line bg-panel px-2 font-mono text-[12px]";
const btn = "inline-flex h-8 items-center gap-1 rounded-md border border-line bg-panel-2 px-2.5 text-[12px] hover:border-line-strong disabled:opacity-50";

function Tools({ connectors, onDone }: { connectors: Ops["connectors"]; onDone: () => void }) {
  return (
    <>
      <h2 className="label mt-2">Tools</h2>
      <div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
        <TestConnector connectors={connectors} />
        <SensorActions onDone={onDone} />
        <SourceAndBulk onDone={onDone} />
        <Import onDone={onDone} />
      </div>
    </>
  );
}

function TestConnector({ connectors }: { connectors: Ops["connectors"] }) {
  const [f, setF] = useState({ url: "", sensor_id: "", connector: "http", type: "HTML", config: "{}" });
  const { busy, res, run } = useAction();
  const preview = res?.body?.normalized as Json | undefined;
  const meta = res?.body?.meta as Json | undefined;
  const submit = (): void => {
    let config: Json = {};
    try {
      config = f.config.trim() ? (JSON.parse(f.config) as Json) : {};
    } catch {
      void run(() => Promise.reject(new Error("config is not valid JSON")));
      return;
    }
    void run(() => adminFetch<Json>("/api/v1/admin/sensors/test", { method: "POST", body: JSON.stringify({ ...(f.sensor_id.trim() ? { sensor_id: f.sensor_id.trim() } : { url: f.url.trim() }), connector: f.connector, type: f.type, config }) }));
  };
  return (
    <Panel title="Test connector · dry run, nothing persisted">
      <form
        className="flex flex-col gap-2 text-[12.5px]"
        onSubmit={(e) => {
          e.preventDefault();
          submit();
        }}
      >
        <input value={f.url} onChange={(e) => setF({ ...f, url: e.target.value })} placeholder="https://example.com/feed.xml" aria-label="URL" className={input} />
        <input value={f.sensor_id} onChange={(e) => setF({ ...f, sensor_id: e.target.value })} placeholder="… or an existing sensor id (overrides URL)" aria-label="Sensor id" className={input} />
        <div className="grid grid-cols-2 gap-2">
          <select value={f.connector} onChange={(e) => setF({ ...f, connector: e.target.value })} aria-label="Connector" className={input}>
            {(connectors.length ? connectors.map((c) => c.key) : ["http"]).map((k) => (
              <option key={k} value={k}>{k}</option>
            ))}
          </select>
          <select value={f.type} onChange={(e) => setF({ ...f, type: e.target.value })} aria-label="Sensor type" className={input}>
            {SENSOR_TYPES.map((t) => (
              <option key={t} value={t}>{t}</option>
            ))}
          </select>
        </div>
        <textarea value={f.config} onChange={(e) => setF({ ...f, config: e.target.value })} rows={2} aria-label="Config JSON" placeholder='{"selector": "main"}' className="rounded-md border border-line bg-panel px-2 py-1 font-mono text-[12px]" />
        <button type="submit" disabled={busy || (!f.url.trim() && !f.sensor_id.trim())} className={btn}><Play className="size-3.5" /> {busy ? "Fetching…" : "Run test"}</button>
      </form>
      {res && (
        <div className="mt-2 flex flex-col gap-2 text-[12px]">
          <div className="flex flex-wrap items-center gap-2">
            <Chip tone={res.ok && res.body?.ok ? "ok" : "danger"} className="font-mono">{res.ok && res.body?.ok ? "OK" : `FAILED${typeof res.body?.stage === "string" ? ` · ${res.body.stage}` : ""}`}</Chip>
            {meta && <span className="font-mono text-[11px] text-fg-subtle tabular">HTTP {String(meta.status ?? "—")} · {String(meta.contentType ?? "—")} · {fmtBytes(Number(meta.contentLength ?? 0))} · {String(res.body?.fetch_ms ?? "—")} ms · {String(meta.redirects ?? 0)} redirects</span>}
          </div>
          {preview && (
            <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 rounded-md border border-line bg-panel-2 p-2 text-[12px]">
              <Row k="Mode" v={String(preview.mode ?? "—")} />
              <Row k="Title" v={String(preview.title ?? "—")} />
              <Row k="Items" v={preview.items === null || preview.items === undefined ? "—" : String(preview.items)} />
              <Row k="Extraction confidence" v={typeof preview.extractionConfidence === "number" ? `${Math.round(preview.extractionConfidence * 100)}%` : "—"} />
              <Row k="Canonical hash" v={String(preview.canonicalHash ?? "").slice(0, 16)} />
              <Row k="Published" v={String(preview.publishedAt ?? "—")} />
            </dl>
          )}
          {preview && typeof preview.text_preview === "string" && <pre className="max-h-40 overflow-auto whitespace-pre-wrap break-words rounded-md border border-line bg-panel-2 p-2 font-mono text-[11px] leading-4 text-fg-muted">{preview.text_preview}</pre>}
          {preview && typeof preview.json_preview === "string" && <pre className="max-h-40 overflow-auto whitespace-pre-wrap break-words rounded-md border border-line bg-panel-2 p-2 font-mono text-[11px] leading-4 text-fg-muted">{preview.json_preview}</pre>}
          {preview && Array.isArray(preview.sample_items) && preview.sample_items.length > 0 && <pre className="max-h-40 overflow-auto whitespace-pre-wrap break-words rounded-md border border-line bg-panel-2 p-2 font-mono text-[11px] leading-4 text-fg-muted">{JSON.stringify(preview.sample_items, null, 1)}</pre>}
          {(!res.ok || !res.body?.ok) && <Result r={{ ok: false, body: (res.body?.error as Json | undefined) ?? res.body, error: res.error }} />}
        </div>
      )}
    </Panel>
  );
}

function SensorActions({ onDone }: { onDone: () => void }) {
  const [id, setId] = useState("");
  const [tier, setTier] = useState("");
  const [priority, setPriority] = useState("");
  const [interval, setInterval_] = useState("");
  const { busy, res, run } = useAction();
  const act = (a: "run-now" | "enable" | "disable"): void => {
    void run(() => adminFetch<Json>(`/api/v1/admin/sensors/${encodeURIComponent(id.trim())}/${a}`, { method: "POST" })).then(onDone);
  };
  const patch = (): void => {
    const body: Json = {};
    if (tier) body.tier = tier;
    if (priority !== "") body.priority = Number(priority);
    if (interval !== "") body.base_interval_seconds = Number(interval);
    void run(() => adminFetch<Json>(`/api/v1/admin/sensors/${encodeURIComponent(id.trim())}`, { method: "PATCH", body: JSON.stringify(body) })).then(onDone);
  };
  return (
    <Panel title="Sensor actions">
      <div className="flex flex-col gap-2 text-[12.5px]">
        <input value={id} onChange={(e) => setId(e.target.value)} placeholder="sensor id (e.g. openai_pricing)" aria-label="Sensor id" className={input} />
        <div className="flex flex-wrap gap-1">
          <button type="button" disabled={busy || !id.trim()} onClick={() => act("run-now")} className={btn}><Play className="size-3.5" /> run now</button>
          <button type="button" disabled={busy || !id.trim()} onClick={() => act("enable")} className={btn}>enable</button>
          <button type="button" disabled={busy || !id.trim()} onClick={() => act("disable")} className={`${btn} text-danger`}>disable</button>
          <Link href={id.trim() ? `/sensor/${encodeURIComponent(id.trim())}` : "#"} className={`${btn} ${id.trim() ? "" : "pointer-events-none opacity-50"}`}>open →</Link>
        </div>
        <div className="grid grid-cols-3 gap-2">
          <select value={tier} onChange={(e) => setTier(e.target.value)} aria-label="Tier" className={input}>
            <option value="">tier …</option>
            {TIERS.map((t) => (
              <option key={t} value={t}>tier {t}</option>
            ))}
          </select>
          <select value={priority} onChange={(e) => setPriority(e.target.value)} aria-label="Priority" className={input}>
            <option value="">priority …</option>
            {[0, 1, 2, 3].map((p) => (
              <option key={p} value={p}>P{p}</option>
            ))}
          </select>
          <input value={interval} onChange={(e) => setInterval_(e.target.value)} inputMode="numeric" placeholder="interval s" aria-label="Base interval seconds" className={input} />
        </div>
        <button type="button" disabled={busy || !id.trim() || (!tier && priority === "" && interval === "")} onClick={patch} className={btn}>apply patch</button>
        <Result r={res} />
      </div>
    </Panel>
  );
}

function SourceAndBulk({ onDone }: { onDone: () => void }) {
  const [sid, setSid] = useState("");
  const [ids, setIds] = useState("");
  const [action, setAction] = useState<"enable" | "disable" | "run-now">("run-now");
  const src = useAction();
  const bulk = useAction();
  const list = ids.split(/[\s,]+/).map((x) => x.trim()).filter(Boolean);
  return (
    <Panel title="Source actions & bulk">
      <div className="flex flex-col gap-2 text-[12.5px]">
        <input value={sid} onChange={(e) => setSid(e.target.value)} placeholder="source id (e.g. openai)" aria-label="Source id" className={input} />
        <div className="flex flex-wrap gap-1">
          {(["run-now", "enable", "disable"] as const).map((a) => (
            <button key={a} type="button" disabled={src.busy || !sid.trim()} onClick={() => void src.run(() => adminFetch<Json>(`/api/v1/admin/sources/${encodeURIComponent(sid.trim())}/${a}`, { method: "POST" })).then(onDone)} className={`${btn} ${a === "disable" ? "text-danger" : ""}`}>
              {a === "run-now" && <Play className="size-3.5" />} {a}
            </button>
          ))}
          <Link href={sid.trim() ? `/source/${encodeURIComponent(sid.trim())}` : "#"} className={`${btn} ${sid.trim() ? "" : "pointer-events-none opacity-50"}`}>open →</Link>
        </div>
        <Result r={src.res} />
        <div className="label mt-2">Bulk sensor action</div>
        <textarea value={ids} onChange={(e) => setIds(e.target.value)} rows={3} placeholder="sensor ids, one per line or comma-separated" aria-label="Sensor ids" className="rounded-md border border-line bg-panel px-2 py-1 font-mono text-[12px]" />
        <div className="flex flex-wrap items-center gap-1">
          <select value={action} onChange={(e) => setAction(e.target.value as typeof action)} aria-label="Bulk action" className={input}>
            <option value="run-now">run now</option>
            <option value="enable">enable</option>
            <option value="disable">disable</option>
          </select>
          <button type="button" disabled={bulk.busy || !list.length} onClick={() => void bulk.run(() => adminFetch<Json>("/api/v1/admin/sensors/bulk", { method: "POST", body: JSON.stringify({ ids: list, action }) })).then(onDone)} className={btn}>
            apply to <span className="font-mono tabular">{list.length}</span>
          </button>
        </div>
        <Result r={bulk.res} />
      </div>
    </Panel>
  );
}

interface ImportReport {
  dry_run: boolean;
  valid?: number;
  invalid: number;
  imported_sources?: number;
  extended_sources?: number;
  sensors?: number;
  report: { id?: string; ok: boolean; extend: boolean; issues?: string[]; sensors?: number }[];
}

function Import({ onDone }: { onDone: () => void }) {
  const [doc, setDoc] = useState("");
  const [report, setReport] = useState<ImportReport | null>(null);
  const [checkedDoc, setCheckedDoc] = useState<string | null>(null);
  const { busy, res, run } = useAction();
  const isJson = /^\s*[[{]/.test(doc);
  const send = async (dry: boolean): Promise<void> => {
    const body = await run(() => adminFetch<Json>(`/api/v1/admin/sources/import${dry ? "?dry_run=1" : ""}`, { method: "POST", headers: { "content-type": isJson ? "application/json" : "text/yaml" }, body: doc }));
    if (body) {
      setReport(body as unknown as ImportReport);
      setCheckedDoc(dry ? doc : null);
      if (!dry) onDone();
    } else setReport(null);
  };
  const canImport = report?.dry_run === true && checkedDoc === doc && (report.valid ?? 0) > 0;
  return (
    <Panel title="Import sources · YAML or JSON">
      <div className="flex flex-col gap-2 text-[12.5px]">
        <textarea value={doc} onChange={(e) => setDoc(e.target.value)} rows={7} spellCheck={false} aria-label="Registry document" placeholder={"sources:\n  - id: example\n    name: Example\n    domain: example.com\n    tier: C\n    categories: [web]\n    sensors:\n      - name: home\n        type: HTML\n        url: https://example.com/"} className="rounded-md border border-line bg-panel px-2 py-1 font-mono text-[12px] leading-4" />
        <div className="flex flex-wrap items-center gap-1">
          <Chip className="font-mono">{isJson ? "application/json" : "text/yaml"}</Chip>
          <button type="button" disabled={busy || !doc.trim()} onClick={() => void send(true)} className={btn}>dry run</button>
          <button type="button" disabled={busy || !canImport} onClick={() => void send(false)} className={`${btn} ${canImport ? "border-signal/50 text-signal" : ""}`} title={canImport ? "Write the validated document" : "Run a successful dry run first"}>import</button>
          <span className="text-[11px] text-fg-subtle">Same schema as <code>config/sources.d/*.yaml</code>; <code>extend: true</code> adds to an existing source.</span>
        </div>
        {res && !res.ok && <Result r={res} />}
        {report && (
          <div>
            <div className="mb-1 flex flex-wrap gap-1 text-[11.5px]">
              <Chip tone={report.dry_run ? "info" : "ok"} className="font-mono">{report.dry_run ? "DRY RUN" : "IMPORTED"}</Chip>
              {report.valid !== undefined && <Chip tone="ok">{report.valid} valid</Chip>}
              {report.invalid > 0 && <Chip tone="danger">{report.invalid} invalid</Chip>}
              {report.imported_sources !== undefined && <Chip>{report.imported_sources} sources · {report.extended_sources ?? 0} extended · {report.sensors ?? 0} sensors</Chip>}
            </div>
            <div className="overflow-hidden rounded-md border border-line">
              <Table head={["Source", "Mode", "Result", "Sensors / issues"]}>
                {report.report.map((r, i) => (
                  <tr key={`${r.id ?? "?"}-${i}`}>
                    <Td mono>{r.id ?? <span className="text-fg-subtle">(no id)</span>}</Td>
                    <Td mono className="text-fg-subtle">{r.extend ? "extend" : "new"}</Td>
                    <Td>{r.ok ? <Chip tone="ok">OK</Chip> : <Chip tone="danger">FAIL</Chip>}</Td>
                    <Td className="text-[12px]">{r.ok ? <span className="font-mono">{r.sensors ?? 0} sensors</span> : <ul className="list-disc pl-4 text-danger">{(r.issues ?? []).map((x, j) => <li key={j} className="font-mono text-[11px]">{x}</li>)}</ul>}</Td>
                  </tr>
                ))}
              </Table>
            </div>
          </div>
        )}
      </div>
    </Panel>
  );
}