"use client";

import Link from "next/link";
import { useMemo, useState } from "react";
import { Badge, Button, EmptyState, RelativeTime, SearchInput, SkeletonRows, Table, TBody, Td, Th, THead, Tr } from "@/components/ui";
import { cn } from "@/components/ui/cn";
import { DASH, fmtInt } from "@/lib/format";
import { SOURCE_KIND_LABEL } from "@/lib/labels";
import type { ConnectorHealthDTO } from "@/lib/admin-api";
import { PauseResumeButton, RunForm, ScheduleEditor } from "./connector-actions";
import { ErrorNote, fmtMs, fmtPct01, HEALTH, HealthBadge, HealthDot, Mono, RefreshButton, Segmented, Select } from "./primitives";
import { AdminPageHeader } from "./shell";
import { useToast } from "./toast";
import { useAdminMutation, useAdminQuery } from "./use-admin-query";
import { useUrlState } from "./use-url-state";

/* ------------------------------------------------------------------------------------------
   Connector HEALTH CENTER (§11–12): one row per connector with the crawl / extraction / publication
   counters of the last window, a spec status badge, quarantine and reprocess controls.
   ------------------------------------------------------------------------------------------ */

type SortKey =
  | "id"
  | "kind"
  | "health"
  | "lastRunAt"
  | "lastSuccessAt"
  | "lastFailureAt"
  | "nextRunAt"
  | "urlsDiscovered"
  | "urlsFetched"
  | "newDocs"
  | "changedDocs"
  | "extracted"
  | "recordsCreated"
  | "recordsModified"
  | "rejectedClaims"
  | "httpErrors"
  | "antiBotEscalations"
  | "scrapflyRequests"
  | "firecrawlRequests"
  | "failed"
  | "extractionSuccess"
  | "avgResponseMs"
  | "credits"
  | "parserVersion";

const HEALTH_ORDER: Record<string, number> = { blocked: 0, failing: 1, schema_change: 2, degraded: 3, quarantine: 4, no_new_content: 5, ok: 6, never_run: 7, paused: 8 };
const HEALTH_FILTERS = ["all", "ok", "degraded", "blocked", "schema_change", "no_new_content", "failing", "quarantine", "paused", "never_run", "enabled", "disabled"] as const;
type HealthFilter = (typeof HEALTH_FILTERS)[number];
const COLUMN_SETS = ["compact", "full"] as const;
type ColumnSet = (typeof COLUMN_SETS)[number];

function num(v: unknown): number | null {
  return typeof v === "number" && Number.isFinite(v) ? v : null;
}

function sortValue(c: ConnectorHealthDTO, k: SortKey): number | string {
  switch (k) {
    case "credits":
      return c.cost.credits;
    case "health":
      return HEALTH_ORDER[c.health] ?? 9;
    case "lastRunAt":
    case "nextRunAt":
    case "lastSuccessAt":
    case "lastFailureAt":
      return c[k] ? new Date(c[k] as string).getTime() : -1;
    case "id":
    case "kind":
    case "parserVersion":
      return c[k];
    default: {
      const v = num(c[k]);
      return v ?? -1;
    }
  }
}

/** A counter cell: "—" when the API does not carry the field (older API), highlighted when non-zero and `hot`. */
function Count({ v, hot, className }: { v: number | null | undefined; hot?: "accent" | "warn" | "danger"; className?: string }) {
  if (v === null || v === undefined) return <span className="text-ink-4">{DASH}</span>;
  return <span className={cn(v > 0 && hot === "accent" && "text-accent-ink", v > 0 && hot === "warn" && "text-warn", v > 0 && hot === "danger" && "text-danger", className)}>{fmtInt(v)}</span>;
}

export function ConnectorsTable() {
  const q = useAdminQuery<ConnectorHealthDTO[]>("connectors", { refreshMs: 60_000, timeoutMs: 30_000 });
  const [params, setParams] = useUrlState();
  const kind = params.kind ?? "";
  const health = (HEALTH_FILTERS.includes(params.health as HealthFilter) ? params.health : "all") as HealthFilter;
  const columns = (COLUMN_SETS.includes(params.cols as ColumnSet) ? params.cols : "compact") as ColumnSet;
  const full = columns === "full";
  const search = params.q ?? "";
  const [sort, setSort] = useState<{ key: SortKey; dir: "asc" | "desc" }>({ key: "health", dir: "asc" });
  const [open, setOpen] = useState<{ id: string; mode: "run" | "schedule" } | null>(null);
  const { busy, run } = useAdminMutation();
  const toast = useToast();
  const [bulk, setBulk] = useState<{ done: number; total: number } | null>(null);

  const list = useMemo(() => q.data ?? [], [q.data]);
  const counts = useMemo(() => {
    const c: Record<string, number> = { all: list.length, enabled: 0, disabled: 0 };
    for (const x of list) {
      c[x.health] = (c[x.health] ?? 0) + 1;
      if (x.enabled) c.enabled!++;
      else c.disabled!++;
    }
    return c;
  }, [list]);
  const kinds = useMemo(() => [...new Set(list.map((c) => c.kind))].sort(), [list]);

  const rows = useMemo(() => {
    const s = search.trim().toLowerCase();
    const out = list.filter((c) => (!kind || c.kind === kind) && (health === "all" || (health === "enabled" ? c.enabled : health === "disabled" ? !c.enabled : c.health === health)) && (!s || c.id.includes(s) || c.sourceName.toLowerCase().includes(s) || c.domain.toLowerCase().includes(s)));
    out.sort((a, b) => {
      const va = sortValue(a, sort.key);
      const vb = sortValue(b, sort.key);
      const cmp = typeof va === "number" && typeof vb === "number" ? va - vb : String(va).localeCompare(String(vb));
      return (sort.dir === "asc" ? cmp : -cmp) || a.id.localeCompare(b.id);
    });
    return out;
  }, [list, kind, health, search, sort]);

  const totals = useMemo(() => {
    const t = { urlsFetched: 0, newDocs: 0, changedDocs: 0, recordsCreated: 0, rejectedClaims: 0, httpErrors: 0, antiBotEscalations: 0, scrapfly: 0, firecrawl: 0 };
    for (const c of rows) {
      t.urlsFetched += c.urlsFetched ?? c.fetched ?? 0;
      t.newDocs += c.newDocs ?? 0;
      t.changedDocs += c.changedDocs ?? c.changed ?? 0;
      t.recordsCreated += c.recordsCreated ?? 0;
      t.rejectedClaims += c.rejectedClaims ?? 0;
      t.httpErrors += c.httpErrors ?? 0;
      t.antiBotEscalations += c.antiBotEscalations ?? 0;
      t.scrapfly += c.scrapflyRequests ?? c.cost.scrapfly;
      t.firecrawl += c.firecrawlRequests ?? c.cost.firecrawl;
    }
    return t;
  }, [rows]);

  const th = (key: SortKey, label: string, numeric?: boolean, title?: string) => (
    <Th numeric={numeric} sort={sort.key === key ? sort.dir : null} className="cursor-pointer select-none" title={title} onClick={() => setSort((s) => ({ key, dir: s.key === key && s.dir === "asc" ? "desc" : s.key === key ? "asc" : numeric ? "desc" : "asc" }))}>
      {label}
    </Th>
  );

  /** Sequential POST run {task: reprocess} for every enabled, non-quarantined connector in the current view. */
  const reprocessAll = async () => {
    const targets = rows.filter((c) => c.enabled && !c.quarantine && c.health !== "paused");
    if (!targets.length) return toast({ tone: "warn", title: "Nothing to reprocess", description: "No enabled connector in the current view." });
    if (!window.confirm(`Enqueue a REPROCESS run (re-extract stored bodies, no network fetch) for ${targets.length} enabled connector${targets.length === 1 ? "" : "s"} in the current view?`)) return;
    setBulk({ done: 0, total: targets.length });
    let ok = 0;
    let failed = 0;
    for (const c of targets) {
      const r = await run<{ enqueued: boolean }>(`reprocess-all`, `connectors/${encodeURIComponent(c.id)}/run`, { body: { task: "reprocess" } });
      if (r.ok) ok++;
      else failed++;
      setBulk((b) => (b ? { ...b, done: b.done + 1 } : b));
    }
    setBulk(null);
    toast({ tone: failed ? "warn" : "ok", title: `Reprocess enqueued for ${ok} connector${ok === 1 ? "" : "s"}`, description: failed ? `${failed} failed to enqueue` : undefined });
    void q.refresh();
  };

  return (
    <div>
      <AdminPageHeader
        title="Connector health center"
        description={q.data ? `${fmtInt(list.length)} connectors · ${fmtInt(counts.enabled ?? 0)} enabled · counters over the last window (documents registry + connector runs), status from the last run` : "Connector control center"}
        aside={
          <>
            <Button size="xs" variant="secondary" onClick={() => void reprocessAll()} disabled={busy !== null || bulk !== null || rows.length === 0} title="POST run {task: reprocess} for every enabled connector in the current view, one after the other">
              {bulk ? `Reprocessing ${bulk.done}/${bulk.total}…` : "Reprocess stale (all enabled)"}
            </Button>
            <RefreshButton onClick={() => void q.refresh()} busy={q.refreshing} updatedAt={q.updatedAt} />
          </>
        }
      />
      <ErrorNote error={q.error && !q.data ? q.error : null} onRetry={() => void q.refresh()} className="mb-3" />

      <div className="mb-3 flex flex-col gap-2 lg:flex-row lg:items-center">
        <Segmented label="Health" value={health} onChange={(v) => setParams({ health: v === "all" ? null : v })} options={HEALTH_FILTERS.map((h) => ({ value: h, label: h === "all" ? "All" : h === "enabled" || h === "disabled" ? h[0]!.toUpperCase() + h.slice(1) : (HEALTH[h]?.label ?? h).toLowerCase().replace(/^./, (m) => m.toUpperCase()), count: counts[h] ?? 0 }))} />
        <div className="flex flex-1 flex-wrap gap-2">
          <Select value={kind} onChange={(e) => setParams({ kind: e.target.value || null })} className="w-[170px] shrink-0" aria-label="Kind">
            <option value="">All kinds</option>
            {kinds.map((k) => (
              <option key={k} value={k}>
                {SOURCE_KIND_LABEL[k] ?? k}
              </option>
            ))}
          </Select>
          <SearchInput size="sm" value={search} onChange={(v) => setParams({ q: v || null })} placeholder="Search id, name, domain" wrapperClassName="min-w-[180px] flex-1" />
          <Segmented label="Columns" value={columns} onChange={(v) => setParams({ cols: v === "compact" ? null : v })} options={[{ value: "compact", label: "Compact" }, { value: "full", label: "All columns" }]} />
        </div>
      </div>

      {q.data && rows.length > 0 && (
        <p className="mb-2 text-[11.5px] text-ink-3">
          In view: <span className="figure text-ink-2">{fmtInt(totals.urlsFetched)}</span> URLs fetched · <span className="figure text-ink-2">{fmtInt(totals.newDocs)}</span> new docs · <span className="figure text-ink-2">{fmtInt(totals.changedDocs)}</span> changed · <span className="figure text-ink-2">{fmtInt(totals.recordsCreated)}</span> records created · <span className={cn("figure", totals.rejectedClaims > 0 ? "text-warn" : "text-ink-2")}>{fmtInt(totals.rejectedClaims)}</span> rejected claims · <span className={cn("figure", totals.httpErrors > 0 ? "text-danger" : "text-ink-2")}>{fmtInt(totals.httpErrors)}</span> HTTP errors · <span className="figure text-ink-2">{fmtInt(totals.antiBotEscalations)}</span> anti-bot escalations · Scrapfly <span className="figure text-ink-2">{fmtInt(totals.scrapfly)}</span> / Firecrawl <span className="figure text-ink-2">{fmtInt(totals.firecrawl)}</span> requests.
        </p>
      )}

      {q.loading && !q.data ? (
        <SkeletonRows rows={10} />
      ) : rows.length === 0 ? (
        <EmptyState compact title="No connectors match" description="Adjust the health / kind filters or the search." />
      ) : (
        <div className="max-w-full overflow-x-auto rounded-sm border border-hair bg-surface">
          <Table className={cn("text-[12.5px] sm:[&_td]:py-1.5", full ? "min-w-[2400px]" : "min-w-[1360px]")} responsive={false}>
            <THead>
              <Tr>
                <Th className="pl-3">{""}</Th>
                {th("id", "Source")}
                {full && <Th>Domain</Th>}
                {th("kind", "Kind")}
                {th("health", "Status")}
                {th("lastRunAt", "Last crawl")}
                {full && th("lastSuccessAt", "Last success")}
                {th("lastFailureAt", "Last failure")}
                {full && th("nextRunAt", "Next")}
                {th("urlsDiscovered", "URLs disc.", true, "URLs discovered")}
                {th("urlsFetched", "URLs fetched", true)}
                {th("newDocs", "New docs", true)}
                {th("changedDocs", "Changed", true, "Changed documents")}
                {th("extracted", "Extract.", true, "Extractions")}
                {full && th("extractionSuccess", "Extract %", true, "Extraction success rate")}
                {th("recordsCreated", "Rec. created", true, "Records created")}
                {full && th("recordsModified", "Rec. modified", true, "Records modified")}
                {th("rejectedClaims", "Rej. claims", true, "Rejected claims")}
                {th("httpErrors", "HTTP err.", true, "HTTP errors")}
                {full && th("antiBotEscalations", "Anti-bot", true, "Anti-bot escalations (L2+)")}
                {full && th("scrapflyRequests", "Scrapfly", true, "Scrapfly requests")}
                {full && th("firecrawlRequests", "Firecrawl", true, "Firecrawl requests")}
                {th("avgResponseMs", "Avg latency", true)}
                {full && th("credits", "Credits", true, "Premium credits (7 d)")}
                {full && th("parserVersion", "Parser")}
                <Th className="pr-3">Actions</Th>
              </Tr>
            </THead>
            <TBody>
              {rows.map((c) => {
                const isOpen = open?.id === c.id;
                return (
                  <ConnectorRow key={c.id} c={c} full={full} open={isOpen ? open.mode : null} onToggle={(mode) => setOpen((o) => (o?.id === c.id && o.mode === mode ? null : { id: c.id, mode }))} onChanged={() => void q.refresh()} mutate={q.mutate} />
                );
              })}
            </TBody>
          </Table>
        </div>
      )}
      <p className="mt-2 text-[11px] text-ink-4">Status: HEALTHY · DEGRADED (partial failures / slow) · BLOCKED (anti-bot or robots) · SCHEMA CHANGE (parser yields nothing on changed pages) · NO NEW CONTENT · FAILED · QUARANTINE (extracts and previews, publishes nothing) · PAUSED · NEVER RUN. Counters that the API does not report yet show “—”.</p>
    </div>
  );
}

function ConnectorRow({ c, full, open, onToggle, onChanged, mutate }: { c: ConnectorHealthDTO; full: boolean; open: "run" | "schedule" | null; onToggle: (m: "run" | "schedule") => void; onChanged: () => void; mutate: (fn: (prev: ConnectorHealthDTO[] | null) => ConnectorHealthDTO[] | null) => void }) {
  const cost = c.cost;
  const { busy, run } = useAdminMutation();
  const toast = useToast();
  const quarantined = Boolean(c.quarantine) || c.health === "quarantine";
  const colSpan = full ? 27 : 18;

  const toggleQuarantine = async () => {
    const on = !quarantined;
    if (on && !window.confirm(`Quarantine ${c.id}? It will keep extracting and previewing but publish nothing until released.`)) return;
    const r = await run<{ id: string; quarantine: boolean; health: string }>("quarantine", `connectors/${encodeURIComponent(c.id)}/quarantine`, { body: { on } });
    if (r.ok) {
      toast({ tone: "ok", title: on ? `${c.id} quarantined` : `${c.id} released from quarantine` });
      mutate((prev) => prev?.map((x) => (x.id === c.id ? { ...x, quarantine: r.data.quarantine, health: r.data.health as ConnectorHealthDTO["health"] } : x)) ?? prev);
    } else toast({ tone: "danger", title: "Quarantine change failed", description: r.error });
  };
  const reprocess = async () => {
    const r = await run<{ enqueued: boolean; job?: { id?: string } }>("reprocess", `connectors/${encodeURIComponent(c.id)}/run`, { body: { task: "reprocess" } });
    if (r.ok) toast({ tone: "ok", title: `Reprocess enqueued · ${c.id}`, description: r.data.job?.id ? `job ${r.data.job.id}` : "re-extracts stored bodies, no network fetch" });
    else toast({ tone: "danger", title: "Reprocess failed to enqueue", description: r.error });
  };

  return (
    <>
      <Tr className={cn(!c.enabled && "opacity-70", open && "bg-surface-2/60")}>
        <Td className="pl-3">
          <HealthDot health={c.lastStatus === "running" ? "running" : quarantined ? "quarantine" : c.health} />
        </Td>
        <Td primary>
          <Link href={`/admin/connectors/${encodeURIComponent(c.id)}`} className="font-mono text-[12.5px] font-medium text-ink hover:text-accent hover:underline">
            {c.id}
          </Link>
          <div className="max-w-[220px] truncate text-[11.5px] text-ink-3" title={`${c.sourceName} · ${c.domain}`}>
            {c.sourceName}
            {!full && <span className="text-ink-4"> · {c.domain}</span>}
          </div>
        </Td>
        {full && (
          <Td muted>
            <Mono className="text-[11.5px]">{c.domain}</Mono>
          </Td>
        )}
        <Td muted>{SOURCE_KIND_LABEL[c.kind] ?? c.kind}</Td>
        <Td>
          <div className="flex flex-col items-start gap-1">
            <HealthBadge health={c.lastStatus === "running" ? "running" : quarantined ? "quarantine" : c.health} />
            <span className="flex flex-wrap gap-1">
              {!c.enabled && <Badge size="xs">disabled</Badge>}
              <Badge size="xs" mono tone="outline">
                {c.mode}
              </Badge>
              {(c.consecutiveFailures ?? 0) > 0 && (
                <Badge size="xs" tone="danger" title="Consecutive failed runs">
                  ×{c.consecutiveFailures}
                </Badge>
              )}
              {c.blockedSince && (
                <Badge size="xs" tone="danger" title={`Blocked since ${c.blockedSince}`}>
                  blocked <RelativeTime iso={c.blockedSince} />
                </Badge>
              )}
            </span>
          </div>
        </Td>
        <Td muted>{c.lastRunAt ? <RelativeTime iso={c.lastRunAt} /> : DASH}</Td>
        {full && <Td muted>{c.lastSuccessAt ? <RelativeTime iso={c.lastSuccessAt} /> : DASH}</Td>}
        <Td className={cn(c.lastFailureAt && c.lastSuccessAt && c.lastFailureAt > c.lastSuccessAt ? "text-danger" : "text-ink-3")}>{c.lastFailureAt ? <RelativeTime iso={c.lastFailureAt} /> : DASH}</Td>
        {full && <Td muted>{c.nextRunAt ? <RelativeTime iso={c.nextRunAt} /> : DASH}</Td>}
        <Td numeric>
          <Count v={c.urlsDiscovered ?? c.discovered} />
        </Td>
        <Td numeric>
          <Count v={c.urlsFetched ?? c.fetched} />
        </Td>
        <Td numeric>
          <Count v={c.newDocs} hot="accent" />
        </Td>
        <Td numeric>
          <Count v={c.changedDocs ?? c.changed} hot="accent" />
        </Td>
        <Td numeric>
          <Count v={c.extracted} />
        </Td>
        {full && <Td numeric className={cn(c.extractionSuccess != null && c.extractionSuccess < 0.7 && "text-warn")}>{fmtPct01(c.extractionSuccess)}</Td>}
        <Td numeric>
          <Count v={c.recordsCreated} hot="accent" />
        </Td>
        {full && (
          <Td numeric>
            <Count v={c.recordsModified} />
          </Td>
        )}
        <Td numeric>
          <Count v={c.rejectedClaims} hot="warn" />
        </Td>
        <Td numeric>
          <Count v={c.httpErrors ?? c.failed} hot="danger" />
        </Td>
        {full && (
          <Td numeric>
            <Count v={c.antiBotEscalations} hot="warn" />
          </Td>
        )}
        {full && (
          <Td numeric>
            <Count v={c.scrapflyRequests ?? cost.scrapfly} />
          </Td>
        )}
        {full && (
          <Td numeric>
            <Count v={c.firecrawlRequests ?? cost.firecrawl} />
          </Td>
        )}
        <Td numeric>{c.avgResponseMs != null ? fmtMs(c.avgResponseMs) : DASH}</Td>
        {full && (
          <Td numeric title={`direct ${cost.direct} · firecrawl ${cost.firecrawl} · scrapfly ${cost.scrapfly} · ${cost.credits} credits (7 d)`}>
            {cost.credits > 0 ? <span className="text-accent">{fmtInt(cost.credits)}</span> : <span className="text-ink-4">0</span>}
          </Td>
        )}
        {full && (
          <Td>
            <Mono>{c.parserVersion}</Mono>
          </Td>
        )}
        <Td className="pr-3">
          <div className="flex items-center gap-1">
            <Button size="xs" variant={open === "run" ? "primary" : "secondary"} onClick={() => onToggle("run")}>
              Run
            </Button>
            <Button size="xs" variant="ghost" onClick={() => void reprocess()} disabled={busy !== null} title="Re-extract stored bodies with the current parser (no network fetch)">
              Reprocess
            </Button>
            <PauseResumeButton connector={c} onChanged={(paused) => mutate((prev) => prev?.map((x) => (x.id === c.id ? { ...x, health: paused ? "paused" : x.lastRunAt ? "ok" : "never_run", enabled: !paused && x.enabled } : x)) ?? prev)} />
            <Button size="xs" variant={quarantined ? "secondary" : "ghost"} onClick={() => void toggleQuarantine()} disabled={busy !== null} title={quarantined ? "Release: the connector publishes again" : "Quarantine: extract and preview, publish nothing"}>
              {quarantined ? "Release" : "Quarantine"}
            </Button>
            <Button size="xs" variant={open === "schedule" ? "primary" : "ghost"} onClick={() => onToggle("schedule")}>
              Schedule
            </Button>
          </div>
        </Td>
      </Tr>
      {open && (
        <tr className="bg-surface-2/60">
          <td colSpan={colSpan} className="px-3 pb-3 pt-1">
            {open === "run" ? <RunForm connector={c} compact onDone={onChanged} /> : <ScheduleEditor connector={c} onSaved={(schedule) => mutate((prev) => prev?.map((x) => (x.id === c.id ? { ...x, schedule } : x)) ?? prev)} />}
          </td>
        </tr>
      )}
    </>
  );
}