"use client";

import Link from "next/link";
import { useState } from "react";
import { Badge, Button, ConfidenceBadge, EmptyState, EventBadge, RelativeTime, ScopeBadge, SemanticsLabel, Sheet, SkeletonBlock, SkeletonRows, Tab, TabList, TabPanel, Tabs, Table, TBody, Td, Th, THead, Tr } from "@/components/ui";
import { cn } from "@/components/ui/cn";
import { DASH, fmtDateTimeUtc, fmtInt, fmtValue } from "@/lib/format";
import { CLAIM_STATUS_LABEL, ENTITY_TYPE_LABEL } from "@/lib/labels";
import { entityHref } from "@/lib/routes";
import type { AdminRun, RollbackResult, RunChanges } from "@/lib/admin-api";
import { durationBetween, ErrorNote, ExtLink, fmtMs, JsonView, KV, Mono, RefreshButton, RunStatusBadge, Stat } from "./primitives";
import { AdminPageHeader } from "./shell";
import { useToast } from "./toast";
import { useAdminMutation, useAdminQuery } from "./use-admin-query";

/* ------------------------------------------------------------------------------------------
   /admin/runs/[id] — one connector run: stats, log, everything it wrote (provenance, claims, events,
   document versions) and a ROLLBACK with a confirm dialog. Rollback rejects the run's claims, retires
   its provenance rows (winner restored to the latest remaining row per field) and rejects its events;
   entity columns are re-derived by the worker's next reconciliation.
   ------------------------------------------------------------------------------------------ */

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

export function RunDetailView({ id }: { id: string }) {
  const q = useAdminQuery<AdminRun>(`runs/${encodeURIComponent(id)}`, { timeoutMs: 30_000 });
  const ch = useAdminQuery<RunChanges>(`runs/${encodeURIComponent(id)}/changes`, { timeoutMs: 60_000 });
  const { busy, run } = useAdminMutation();
  const toast = useToast();
  const [confirm, setConfirm] = useState(false);
  const [rolled, setRolled] = useState<RollbackResult | null>(null);
  const r = q.data;
  const c = ch.data;
  const stats = (r?.stats ?? {}) as Record<string, unknown>;
  const capped = Boolean(c && Object.values(c.counts).some((v) => v >= 2000));

  const rollback = async () => {
    const res = await run<RollbackResult>("rollback", `runs/${encodeURIComponent(id)}/rollback`, { body: {} });
    setConfirm(false);
    if (res.ok) {
      setRolled(res.data);
      toast({ tone: "ok", title: "Run rolled back", description: `${fmtInt(res.data.claimsRejected)} claims rejected · ${fmtInt(res.data.provenanceRetired)} provenance rows retired · ${fmtInt(res.data.winnersRestored)} winners restored · ${fmtInt(res.data.eventsRejected)} events rejected`, duration: 9000 });
      void ch.refresh();
    } else toast({ tone: "danger", title: "Rollback failed", description: res.error });
  };

  if (q.error && !r) {
    return (
      <div>
        <AdminPageHeader eyebrow="Run" title={<span className="font-mono">{id}</span>} />
        <ErrorNote error={q.status === 404 ? "Run not found" : q.error} onRetry={() => void q.refresh()} />
      </div>
    );
  }

  const statKeys = ["discovered", "selected", "fetched", "notModified", "changed", "unchanged", "extracted", "entities", "valid", "rejected", "created", "updated", "merged", "pendingMatches", "events", "provenanceRows", "claims", "failed", "robotsBlocked", "quarantined", "credits"];

  return (
    <div>
      <AdminPageHeader
        eyebrow={
          <span className="inline-flex flex-wrap items-center gap-1.5">
            <Link href="/admin/connectors" className="hover:text-ink">
              Connectors
            </Link>
            {r && (
              <>
                <span>/</span>
                <Link href={`/admin/connectors/${encodeURIComponent(r.connectorId)}`} className="font-mono hover:text-ink">
                  {r.connectorId}
                </Link>
              </>
            )}
            <span>/ run</span>
          </span>
        }
        title={<span className="font-mono text-[16px] sm:text-[18px]">{id}</span>}
        description={
          r ? (
            <span className="inline-flex flex-wrap items-center gap-1.5">
              <RunStatusBadge status={r.status} />
              <Badge size="xs" mono tone="outline">
                {r.task}
              </Badge>
              <span>
                started {r.startedAt ? <RelativeTime iso={r.startedAt} /> : DASH} · {fmtMs(durationBetween(r.startedAt, r.finishedAt))}
              </span>
              {r.quarantined && (
                <Badge size="xs" tone="warn">
                  quarantined (nothing published)
                </Badge>
              )}
            </span>
          ) : undefined
        }
        aside={
          <>
            <RefreshButton onClick={() => void Promise.all([q.refresh(), ch.refresh()])} busy={q.refreshing || ch.refreshing} updatedAt={q.updatedAt} />
            <Button size="sm" variant="danger" onClick={() => setConfirm(true)} disabled={busy !== null || !c || rolled !== null} title="Reject this run's claims and events, retire its provenance rows">
              {rolled ? "Rolled back" : "Roll back this run"}
            </Button>
          </>
        }
      />
      {r?.error && <ErrorNote error={`Run error: ${r.error}`} className="mb-3" />}
      {rolled && (
        <div className="mb-3 rounded-xs border border-ok/30 bg-ok/10 px-2.5 py-2 text-[12.5px] text-ok">
          Rolled back: {fmtInt(rolled.claimsRejected)} claims rejected · {fmtInt(rolled.provenanceRetired)} provenance rows retired · {fmtInt(rolled.winnersRestored)} winners restored · {fmtInt(rolled.eventsRejected)} events rejected. Entity columns are re-derived by the worker&rsquo;s next reconciliation.
        </div>
      )}

      {!r ? (
        <SkeletonBlock className="mb-3 h-20" />
      ) : (
        <div className="mb-3 grid grid-cols-2 gap-2 sm:grid-cols-4 lg:grid-cols-8">
          {statKeys
            .filter((k) => n(stats[k]) !== null)
            .slice(0, 16)
            .map((k) => (
              <Stat key={k} label={k.replace(/([A-Z])/g, " $1").toLowerCase()} value={fmtInt(n(stats[k]))} tone={k === "failed" || k === "rejected" ? ((n(stats[k]) ?? 0) > 0 ? "danger" : undefined) : k === "created" && (n(stats[k]) ?? 0) > 0 ? "ok" : undefined} />
            ))}
        </div>
      )}

      <div className="grid gap-3 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
        <div className="min-w-0 rounded-sm border border-hair bg-surface">
          <div className="flex flex-wrap items-center justify-between gap-2 border-b border-hair px-3 py-2">
            <div>
              <h2 className="text-[13.5px] font-semibold text-ink">What this run wrote</h2>
              <p className="text-[12px] text-ink-3">Rows tagged run_id = {id}{capped ? " — lists capped at 2 000 rows per kind" : ""}.</p>
            </div>
            {c && (
              <div className="figure text-[12px] text-ink-3">
                {fmtInt(c.counts.provenance)} provenance · {fmtInt(c.counts.claims)} claims · {fmtInt(c.counts.events)} events · {fmtInt(c.counts.documentVersions)} versions
              </div>
            )}
          </div>
          <ErrorNote error={ch.error && !c ? ch.error : null} onRetry={() => void ch.refresh()} className="m-3" />
          {!c && !ch.error ? (
            <div className="p-3">
              <SkeletonRows rows={6} />
            </div>
          ) : c ? (
            <Tabs defaultValue="provenance" className="px-3 pb-3">
              <TabList label="Run changes">
                <Tab value="provenance" count={c.counts.provenance}>
                  Provenance
                </Tab>
                <Tab value="claims" count={c.counts.claims}>
                  Claims
                </Tab>
                <Tab value="events" count={c.counts.events}>
                  Events
                </Tab>
                <Tab value="versions" count={c.counts.documentVersions}>
                  Document versions
                </Tab>
              </TabList>
              <TabPanel value="provenance">
                {c.provenance.length === 0 ? (
                  <EmptyState compact title="No provenance row written" />
                ) : (
                  <div className="max-w-full overflow-x-auto">
                    <Table className="min-w-[760px] text-[12.5px]" dense responsive={false}>
                      <THead>
                        <Tr>
                          <Th>Entity</Th>
                          <Th>Field</Th>
                          <Th>Value</Th>
                          <Th>Source</Th>
                          <Th>State</Th>
                          <Th>Observed</Th>
                        </Tr>
                      </THead>
                      <TBody>
                        {c.provenance.map((p, i) => (
                          <Tr key={`${p.entityId}-${p.field}-${i}`} className={cn(!p.isCurrent && "text-ink-3")}>
                            <Td>
                              <Link href={entityHref(p.entityType, p.entityId)} target="_blank" className="font-mono text-[12px] text-ink hover:text-accent">
                                {p.entityId}
                              </Link>
                              <div className="text-[10.5px] text-ink-4">{ENTITY_TYPE_LABEL[p.entityType] ?? p.entityType}</div>
                            </Td>
                            <Td>
                              <Mono>{p.field}</Mono>
                              {p.scope && <ScopeBadge scope={p.scope} className="ml-1" />}
                            </Td>
                            <Td className="max-w-[240px] truncate figure" title={fmtValue(p.value)}>
                              {fmtValue(p.value)}
                              {p.isEstimate && <span className="ml-1 text-ink-4">≈</span>}
                            </Td>
                            <Td>
                              <ExtLink href={p.url}>{p.sourceName}</ExtLink>
                              <div className="text-[10.5px] text-ink-4">
                                {p.sourceKind}
                                {p.method && ` · ${p.method}`}
                              </div>
                            </Td>
                            <Td>
                              <div className="flex flex-wrap gap-1">
                                {p.isWinner && (
                                  <Badge size="xs" tone="accent">
                                    winner
                                  </Badge>
                                )}
                                <Badge size="xs" tone={p.isCurrent ? "ok" : "outline"}>
                                  {p.isCurrent ? "current" : "retired"}
                                </Badge>
                                <ConfidenceBadge level={p.confidence} size="xs" />
                              </div>
                            </Td>
                            <Td muted className="figure text-[11.5px]">
                              {fmtDateTimeUtc(p.lastObserved)}
                            </Td>
                          </Tr>
                        ))}
                      </TBody>
                    </Table>
                  </div>
                )}
              </TabPanel>
              <TabPanel value="claims">
                {c.claims.length === 0 ? (
                  <EmptyState compact title="No claim written" />
                ) : (
                  <div className="max-w-full overflow-x-auto">
                    <Table className="min-w-[760px] text-[12.5px]" dense responsive={false}>
                      <THead>
                        <Tr>
                          <Th>Claim</Th>
                          <Th>Predicate</Th>
                          <Th numeric>Value</Th>
                          <Th>Scope</Th>
                          <Th>Status</Th>
                          <Th>Source</Th>
                        </Tr>
                      </THead>
                      <TBody>
                        {c.claims.map((k) => (
                          <Tr key={k.id} className={cn(k.status !== "current" && "text-ink-3")}>
                            <Td>
                              <Mono>{k.id}</Mono>
                              {k.isWinner && (
                                <Badge size="xs" tone="accent" className="ml-1">
                                  shown
                                </Badge>
                              )}
                            </Td>
                            <Td>
                              <SemanticsLabel semantics={k.predicate} className="text-[12px]" />
                            </Td>
                            <Td numeric className="figure">
                              {k.value !== null ? fmtValue(k.value, k.unit === "USD" ? "usd" : "mw") : k.valueText ?? DASH}
                            </Td>
                            <Td>
                              <ScopeBadge scope={k.scope} />
                            </Td>
                            <Td>
                              <Badge size="xs" tone={k.status === "current" ? "ok" : k.status === "rejected" ? "danger" : k.status === "review" ? "warn" : "outline"}>
                                {CLAIM_STATUS_LABEL[k.status]}
                              </Badge>
                              {k.rejectionReason && <div className="text-[10.5px] text-ink-4">{k.rejectionReason}</div>}
                            </Td>
                            <Td>
                              <ExtLink href={k.url}>{k.sourceName}</ExtLink>
                            </Td>
                          </Tr>
                        ))}
                      </TBody>
                    </Table>
                  </div>
                )}
              </TabPanel>
              <TabPanel value="events">
                {c.events.length === 0 ? (
                  <EmptyState compact title="No event written" />
                ) : (
                  <ul className="divide-y divide-hair">
                    {c.events.map((e) => (
                      <li key={e.id} className="flex flex-wrap items-center gap-2 py-2 text-[12.5px]">
                        <EventBadge type={e.eventType} size="xs" />
                        {e.entity ? (
                          <Link href={entityHref(e.entityType, e.entity.slug, e.entity.name)} target="_blank" className="font-medium text-ink hover:text-accent hover:underline">
                            {e.entity.name}
                          </Link>
                        ) : (
                          <span className="font-medium text-ink">{e.title}</span>
                        )}
                        {e.entity && e.title !== e.entity.name && <span className="text-ink-2">— {e.title}</span>}
                        <Badge size="xs" tone={e.reviewStatus === "rejected" ? "danger" : "outline"}>
                          {e.reviewStatus}
                        </Badge>
                        <span className="figure text-ink-4">sig {e.significance}</span>
                        <Mono className="ml-auto text-ink-4">{e.id}</Mono>
                      </li>
                    ))}
                  </ul>
                )}
              </TabPanel>
              <TabPanel value="versions">
                {c.documentVersions.length === 0 ? (
                  <EmptyState compact title="No document version written" />
                ) : (
                  <Table className="text-[12.5px]" dense>
                    <THead>
                      <Tr>
                        <Th>Document</Th>
                        <Th>Version</Th>
                        <Th>Fetched</Th>
                        <Th numeric>Significance</Th>
                        <Th numeric>Changes</Th>
                      </Tr>
                    </THead>
                    <TBody>
                      {c.documentVersions.map((v) => (
                        <Tr key={v.id}>
                          <Td>
                            <Link href={`/admin/documents/${encodeURIComponent(v.documentId)}`} className="font-mono text-[12px] text-ink hover:text-accent">
                              {v.documentId}
                            </Link>
                            {v.url && (
                              <div className="max-w-[360px] truncate text-[11px] text-ink-4" title={v.url}>
                                {v.url.replace(/^https?:\/\//, "")}
                              </div>
                            )}
                          </Td>
                          <Td>
                            <Mono>{v.id}</Mono>
                          </Td>
                          <Td muted>{v.fetchedAt ? <RelativeTime iso={v.fetchedAt} /> : DASH}</Td>
                          <Td numeric>{fmtInt(v.significance)}</Td>
                          <Td numeric>{fmtInt(v.changes)}</Td>
                        </Tr>
                      ))}
                    </TBody>
                  </Table>
                )}
              </TabPanel>
            </Tabs>
          ) : null}
        </div>

        <div className="min-w-0 space-y-3">
          <div className="rounded-sm border border-hair bg-surface">
            <div className="border-b border-hair px-3 py-2">
              <h2 className="text-[13.5px] font-semibold text-ink">Run</h2>
            </div>
            <div className="px-3 py-2">
              {!r ? (
                <SkeletonRows rows={5} />
              ) : (
                <KV
                  items={[
                    { k: "Connector", v: <Link href={`/admin/connectors/${encodeURIComponent(r.connectorId)}`} className="font-mono hover:text-accent">{r.connectorId}</Link> },
                    { k: "Task", v: <Mono>{r.task}</Mono> },
                    { k: "Status", v: <RunStatusBadge status={r.status} /> },
                    { k: "Started", v: fmtDateTimeUtc(r.startedAt) },
                    { k: "Finished", v: fmtDateTimeUtc(r.finishedAt) },
                    { k: "Duration", v: fmtMs(durationBetween(r.startedAt, r.finishedAt)) },
                    { k: "Avg fetch", v: n(stats.avgMs) !== null ? fmtMs(n(stats.avgMs)) : DASH },
                  ]}
                />
              )}
            </div>
          </div>
          <div className="rounded-sm border border-hair bg-surface">
            <div className="border-b border-hair px-3 py-2">
              <h2 className="text-[13.5px] font-semibold text-ink">Stats</h2>
            </div>
            <div className="px-3 py-2">{r ? <JsonView value={r.stats} maxHeight={260} collapsible /> : <SkeletonRows rows={4} />}</div>
          </div>
          <div className="rounded-sm border border-hair bg-surface">
            <div className="border-b border-hair px-3 py-2">
              <h2 className="text-[13.5px] font-semibold text-ink">Log</h2>
            </div>
            {!r ? (
              <div className="px-3 py-2">
                <SkeletonRows rows={4} />
              </div>
            ) : (r.log ?? []).length === 0 ? (
              <p className="px-3 py-2 text-[12px] text-ink-4">No log lines recorded.</p>
            ) : (
              <div className="max-h-[420px] overflow-auto bg-paper font-mono text-[11.5px] leading-[1.5]">
                {(r.log ?? []).map((l, i) => (
                  <div key={i} className={cn("flex gap-2 border-b border-hair/60 px-2 py-0.5 last:border-0", l.level === "error" && "bg-danger/10 text-danger", l.level === "warn" && "bg-warn/10 text-warn")}>
                    <span className="shrink-0 text-ink-4">{l.t ? String(l.t).slice(11, 19) : ""}</span>
                    <span className="w-10 shrink-0 text-ink-3">{l.level ?? ""}</span>
                    <span className="min-w-0 break-all text-ink-2">{String(l.msg ?? JSON.stringify(l))}</span>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      </div>

      <Sheet
        open={confirm}
        onClose={() => setConfirm(false)}
        title="Roll back this run?"
        description={`Run ${id}${r ? ` · ${r.connectorId} · ${r.task}` : ""}`}
        heightVh={60}
        footer={
          <div className="flex items-center justify-between gap-2">
            <Button variant="ghost" onClick={() => setConfirm(false)} disabled={busy === "rollback"}>
              Cancel
            </Button>
            <Button variant="danger" onClick={() => void rollback()} disabled={busy === "rollback"}>
              {busy === "rollback" ? "Rolling back…" : "Yes, roll back"}
            </Button>
          </div>
        }
      >
        <div className="space-y-3 text-[13px] text-ink-2">
          <p>This will, for every row this run wrote:</p>
          <ul className="list-disc space-y-1 pl-5">
            <li>
              <strong className="text-ink">{c ? fmtInt(c.counts.claims) : "…"} claims</strong> → status <Mono>rejected</Mono> (reason “rollback”)
            </li>
            <li>
              <strong className="text-ink">{c ? fmtInt(c.counts.provenance) : "…"} provenance rows</strong> → retired; the winner of each affected field is restored to the latest remaining observation
            </li>
            <li>
              <strong className="text-ink">{c ? fmtInt(c.counts.events) : "…"} events</strong> → review status <Mono>rejected</Mono> (removed from the live feed)
            </li>
          </ul>
          <p className="text-[12px] text-ink-3">Entity columns (MW, status, coordinates…) are not rewritten here: the worker re-derives them on its next reconciliation. Document versions and archived bodies are kept. This action is recorded and cannot be undone from the console.</p>
        </div>
      </Sheet>
    </div>
  );
}