"use client";

import Link from "next/link";
import { useEffect, useMemo, useRef, useState } from "react";
import type { FacilitySummary } from "@dci/core";
import { Badge, Button, EmptyState, Kbd, RelativeTime, SkeletonBlock, StatusBadge } from "@/components/ui";
import { cn } from "@/components/ui/cn";
import { DASH, fmtInt, fmtMw, placeLine } from "@/lib/format";
import { routes } from "@/lib/routes";
import type { AdminMatch, MatchCandidate, MatchSide } from "@/lib/admin-api";
import { ErrorNote, ExtLink, Mono, Pager, RefreshButton, ReviewBadge, 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";

/* ------------------------------------------------------------------------------------------
   DUPLICATE RESOLUTION WORKBENCH (§55): every candidate pair side by side — name similarity,
   operator, distance, address, codes, external ids, source documents, score and reasons — with
   four decisions: MERGE · KEEP SEPARATE · MARK RELATED CAMPUS · DEFER.
   ------------------------------------------------------------------------------------------ */

const TABS = ["pending", "deferred", "approved", "rejected", "related_campus", "auto_merged", "auto_created", "all"] as const;
type Tab = (typeof TABS)[number];
const TAB_LABEL: Record<Tab, string> = { pending: "Pending", deferred: "Deferred", approved: "Merged", rejected: "Kept separate", related_campus: "Related campus", auto_merged: "Auto-merged", auto_created: "Auto-created", all: "All" };
const PER_PAGE = 20;
type Decision = "approve" | "reject" | "related-campus" | "defer";
const DECIDED_STATUS: Record<Decision, string> = { approve: "approved", reject: "rejected", "related-campus": "related_campus", defer: "deferred" };

/** "name:0.85" → 0.85 ; "distance:0.15km/0.25km" → { km: 0.15, radiusKm: 0.25 } */
function reasonValue(reasons: string[], key: string): string | null {
  const r = reasons.find((x) => x.startsWith(`${key}:`));
  return r ? r.slice(key.length + 1) : null;
}
function fmtKm(km: number | null | undefined): string {
  if (km == null || !Number.isFinite(km)) return DASH;
  return km < 1 ? `${Math.round(km * 1000)} m` : `${km.toFixed(km < 10 ? 2 : 0)} km`;
}
function coords(lat: number | null | undefined, lng: number | null | undefined, precision?: string | null): string {
  if (typeof lat !== "number" || typeof lng !== "number") return DASH;
  return `${lat.toFixed(4)}, ${lng.toFixed(4)}${precision ? ` (${precision})` : ""}`;
}

/** Candidate side from the API pair, falling back to the raw candidate payload (never persisted case). */
function candidateSide(m: AdminMatch): Partial<MatchSide> {
  const p = m.pair?.candidate;
  if (p) return p;
  const c: MatchCandidate = m.candidate;
  return { id: m.candidateFacilityId ?? "", name: c.name ?? "", operator: c.operatorName ?? null, city: c.city ?? null, address: c.address ?? null, lat: c.geo?.lat ?? c.lat ?? null, lng: c.geo?.lng ?? c.lng ?? null, codes: [], externalIds: c.externalIds ?? {}, sourceCount: 0, status: c.status ?? "unknown", recordScope: "facility", parentFacilityId: null };
}

function Row({ k, a, b, same, diff }: { k: string; a: React.ReactNode; b: React.ReactNode; same?: boolean; diff?: boolean }) {
  const cls = (v: React.ReactNode) => cn("min-w-0 overflow-hidden break-all text-ink [&_a]:max-w-full", same && "text-ok", diff && "text-warn", (v === null || v === undefined || v === DASH) && "text-ink-4");
  return (
    <div className="grid grid-cols-[92px_1fr] gap-x-2 gap-y-0.5 border-b border-hair/70 py-1.5 text-[12.5px] last:border-0 sm:grid-cols-[92px_1fr_1fr]">
      <div className="text-ink-3">{k}</div>
      <div className={cls(a)}>{a ?? DASH}</div>
      <div className={cn("col-start-2 sm:col-start-3", cls(b))}>{b ?? DASH}</div>
    </div>
  );
}

function Head({ f, side, label, id }: { f: FacilitySummary | null; side: Partial<MatchSide> | null; label: string; id: string | null }) {
  const name = f?.name ?? side?.name;
  return (
    <div className="mb-1 flex items-start justify-between gap-2">
      <div className="min-w-0">
        <div className="label-caps">{label}</div>
        {f ? (
          <Link href={routes.facility(f.slug)} target="_blank" className="block truncate text-[13.5px] font-semibold text-ink hover:text-accent hover:underline">
            {f.name}
          </Link>
        ) : name ? (
          <div className="truncate text-[13.5px] font-semibold text-ink">{name}</div>
        ) : (
          <div className="text-[13px] text-ink-3">{id ? "facility not found" : "no linked facility"}</div>
        )}
        {side?.recordScope && side.recordScope !== "facility" && (
          <Badge size="xs" tone="outline" className="mt-1">
            {side.recordScope}
            {side.parentFacilityId ? " · has parent" : ""}
          </Badge>
        )}
      </div>
      {f && <StatusBadge status={f.status} short size="xs" />}
    </div>
  );
}

function ScoreBar({ score }: { score: number }) {
  return (
    <div className="flex items-center gap-1.5" title={`match score ${score.toFixed(3)} — ≥ 0.92 auto-merged, 0.60–0.92 reviewed here`}>
      <div className="h-1.5 w-24 rounded-full bg-surface-3">
        <div className={cn("h-full rounded-full", score >= 0.9 ? "bg-ok" : score >= 0.75 ? "bg-warn" : "bg-danger")} style={{ width: `${Math.min(100, score * 100)}%` }} />
      </div>
      <span className="figure text-[12.5px] text-ink">{(score * 100).toFixed(0)}%</span>
    </div>
  );
}

function externalIdsText(ids: Record<string, string | number> | undefined): string | null {
  const e = Object.entries(ids ?? {});
  if (!e.length) return null;
  return e
    .slice(0, 4)
    .map(([k, v]) => `${k}: ${String(v)}`)
    .join(" · ") + (e.length > 4 ? ` · +${e.length - 4}` : "");
}

export function MatchesQueue() {
  const [params, setParams] = useUrlState();
  const tab = (TABS.includes(params.status as Tab) ? params.status : "pending") as Tab;
  const page = Math.max(1, Number(params.page ?? 1) || 1);
  const connector = params.connector ?? "";
  const q = useAdminQuery<AdminMatch[]>("matches", { query: { status: tab, connector: connector || undefined, page, per_page: PER_PAGE }, refreshMs: tab === "pending" ? 60_000 : null, timeoutMs: 30_000 });
  const pendingCount = useAdminQuery<AdminMatch[]>("matches", { query: { status: "pending", per_page: 1 }, refreshMs: 60_000 });
  const deferredCount = useAdminQuery<AdminMatch[]>("matches", { query: { status: "deferred", per_page: 1 }, refreshMs: 120_000 });
  const { busy, run } = useAdminMutation();
  const toast = useToast();
  const [gone, setGone] = useState<Record<string, string>>({});
  const [focus, setFocus] = useState<string | null>(null);
  const listRef = useRef<HTMLDivElement>(null);
  const total = Number(q.meta?.total ?? 0);
  const connectors = useMemo(() => [...new Set((q.data ?? []).map((m) => m.connectorId))].sort(), [q.data]);

  const decide = async (m: AdminMatch, action: Decision) => {
    if (action === "approve" && !m.matchedFacilityId) return toast({ tone: "warn", title: "Nothing to merge into", description: "This match has no matched facility." });
    if (action === "related-campus" && !m.candidateFacilityId) return toast({ tone: "warn", title: "Candidate not persisted", description: "The candidate was never written as a facility — merge or keep separate instead." });
    setGone((g) => ({ ...g, [m.id]: DECIDED_STATUS[action] }));
    const r = await run<{ status: string; facilityId?: string; merged?: unknown }>(`${action}:${m.id}`, `matches/${encodeURIComponent(m.id)}/${action}`, { body: {} });
    if (r.ok) {
      const name = m.candidate.name ?? m.pair?.candidate?.name ?? m.candidateKey;
      const msg: Record<Decision, string> = {
        approve: `${name} → ${m.matched?.name ?? r.data.facilityId}${r.data.merged ? " (duplicate merged)" : ""}`,
        reject: `${name} stays a separate facility`,
        "related-campus": `${name} recorded as a building of ${m.matched?.name ?? m.matchedFacilityId}`,
        defer: `${name} moved to the Deferred tab`,
      };
      toast({ tone: "ok", title: { approve: "Merged", reject: "Kept separate", "related-campus": "Marked related campus", defer: "Deferred" }[action], description: msg[action] });
      setTimeout(() => {
        q.mutate((prev) => prev?.filter((x) => x.id !== m.id) ?? prev);
        void pendingCount.refresh();
        void deferredCount.refresh();
      }, 600);
    } else {
      setGone((g) => {
        const n = { ...g };
        delete n[m.id];
        return n;
      });
      toast({ tone: "danger", title: `Could not ${action.replace("-", " ")}`, description: r.error });
    }
  };

  // keyboard: m / k / r / d on the focused card (pending + deferred only)
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (!focus || e.metaKey || e.ctrlKey || e.altKey) return;
      const t = e.target as HTMLElement | null;
      if (t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.tagName === "SELECT")) return;
      const m = (q.data ?? []).find((x) => x.id === focus);
      if (!m || gone[m.id] || (m.status !== "pending" && m.status !== "deferred")) return;
      const map: Record<string, Decision> = { m: "approve", k: "reject", r: "related-campus", d: "defer" };
      const a = map[e.key.toLowerCase()];
      if (!a) return;
      e.preventDefault();
      void decide(m, a);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [focus, q.data, gone]);

  return (
    <div>
      <AdminPageHeader
        title="Duplicate resolution workbench"
        description="Candidates that scored 0.60–0.92 against an existing facility. MERGE = same site (keys repointed, duplicate merged). KEEP SEPARATE = different sites. RELATED CAMPUS = the candidate is a building of the matched campus (both rows stay, never both counted). DEFER = decide later."
        aside={<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="Status"
          value={tab}
          onChange={(v) => setParams({ status: v === "pending" ? null : v, page: null })}
          options={TABS.map((t) => ({ value: t, label: TAB_LABEL[t], count: t === "pending" ? Number(pendingCount.meta?.total ?? (tab === "pending" ? total : 0)) : t === "deferred" ? Number(deferredCount.meta?.total ?? (tab === "deferred" ? total : 0)) : t === tab ? total : null }))}
        />
        <Select value={connector} onChange={(e) => setParams({ connector: e.target.value || null, page: null })} className="sm:w-[200px]" aria-label="Connector">
          <option value="">All connectors</option>
          {connector && !connectors.includes(connector) && <option value={connector}>{connector}</option>}
          {connectors.map((c) => (
            <option key={c} value={c}>
              {c}
            </option>
          ))}
        </Select>
        <span className="hidden text-[11.5px] text-ink-4 lg:inline">
          Focus a card, then <Kbd>m</Kbd> merge · <Kbd>k</Kbd> keep separate · <Kbd>r</Kbd> related campus · <Kbd>d</Kbd> defer
        </span>
      </div>

      {q.loading && !q.data ? (
        <div className="space-y-3">
          <SkeletonBlock className="h-48" />
          <SkeletonBlock className="h-48" />
        </div>
      ) : !q.data || q.data.length === 0 ? (
        <EmptyState title={tab === "pending" ? "Queue is empty" : `No ${TAB_LABEL[tab].toLowerCase()} matches`} description={tab === "pending" ? "New candidates appear here after connector runs when a candidate scores close to an existing facility." : undefined} />
      ) : (
        <div className="space-y-3" ref={listRef}>
          {q.data.map((m) => {
            const a = candidateSide(m);
            const b = m.pair?.matched ?? null;
            const f = m.matched;
            const cf = m.candidateFacility;
            const decided = gone[m.id];
            const score = m.score ?? 0;
            const nameSim = reasonValue(m.reasons, "name");
            const dist = reasonValue(m.reasons, "distance");
            const distKm = m.pair?.distanceKm ?? null;
            const sameCodes = m.pair?.sameCodes ?? [];
            const aCodes = a.codes ?? [];
            const bCodes = b?.codes ?? [];
            const sameOp = Boolean(a.operator && b?.operator && a.operator.toLowerCase() === b.operator.toLowerCase());
            const diffOp = Boolean(a.operator && b?.operator && !sameOp);
            const open = m.status === "pending" || m.status === "deferred";
            return (
              <article
                key={m.id}
                tabIndex={0}
                onFocus={() => setFocus(m.id)}
                onClick={() => setFocus(m.id)}
                aria-label={`Match ${m.candidateKey}`}
                className={cn("rounded-sm border bg-surface outline-none transition-opacity focus-visible:ring-2 focus-visible:ring-accent", focus === m.id ? "border-hair-2" : "border-hair", decided && "opacity-40")}
              >
                <div className="flex flex-wrap items-center gap-2 border-b border-hair px-3 py-2">
                  <ReviewBadge status={decided ?? m.status} />
                  <ScoreBar score={score} />
                  <div className="flex flex-wrap gap-1">
                    {m.reasons.map((r) => (
                      <Badge key={r} size="xs" mono tone={r.startsWith("rule:") ? "accent" : "outline"}>
                        {r}
                      </Badge>
                    ))}
                  </div>
                  <div className="ml-auto flex items-center gap-2 text-[11.5px] text-ink-3">
                    <Link href={`/admin/connectors/${encodeURIComponent(m.connectorId)}`} className="font-mono hover:text-accent">
                      {m.connectorId}
                    </Link>
                    <RelativeTime iso={m.createdAt} />
                    {m.decidedBy && <span>by {m.decidedBy}</span>}
                  </div>
                </div>
                <div className="grid gap-3 px-3 py-2.5 lg:grid-cols-[1fr_auto]">
                  <div className="min-w-0">
                    <div className="grid grid-cols-[92px_1fr] gap-x-2 sm:grid-cols-[92px_1fr_1fr]">
                      <div />
                      <div className="min-w-0">
                        <Head f={cf} side={a} label="Candidate (from source)" id={m.candidateFacilityId} />
                      </div>
                      <div className="col-start-2 min-w-0 sm:col-start-3">
                        <Head f={f} side={b} label="Matched facility (in index)" id={m.matchedFacilityId} />
                      </div>
                    </div>
                    <Row k="Name" a={a.name || null} b={b?.name ?? f?.name} same={Boolean(a.name && (b?.name ?? f?.name) && a.name.toLowerCase() === (b?.name ?? f?.name)!.toLowerCase())} />
                    <Row k="Similarity" a={nameSim ? <span className="figure">name {nameSim}</span> : null} b={sameCodes.length ? <span className="figure text-ok">codes match: {sameCodes.join(", ")}</span> : aCodes.length && bCodes.length ? <span className="figure text-warn">codes differ</span> : null} />
                    <Row k="Operator" a={a.operator ?? null} b={b?.operator ?? f?.operator?.name} same={sameOp} diff={diffOp} />
                    <Row k="Address" a={a.address ?? (a.city ? placeLine({ city: a.city }) : null)} b={b?.address ?? (f ? placeLine({ city: f.city, regionName: f.regionName, countryIso2: f.countryIso2, countryName: f.countryName ?? undefined }) : null)} />
                    <Row k="Coordinates" a={coords(a.lat, a.lng, m.candidate.geo?.precision)} b={b ? coords(b.lat, b.lng) : f ? coords(f.lat, f.lng, f.geoPrecision) : null} />
                    <Row k="Distance" a={<span className="figure">{distKm != null ? fmtKm(distKm) : dist ? dist.replace("/", " / radius ") : DASH}</span>} b={dist ? <span className="text-ink-3">{`reason ${dist}`}</span> : null} same={distKm != null && distKm < 0.25} />
                    <Row k="Codes" a={aCodes.length ? aCodes.map((c) => <Badge key={c} size="xs" mono tone={sameCodes.includes(c) ? "ok" : "outline"} className="mr-1">{c}</Badge>) : null} b={bCodes.length ? bCodes.map((c) => <Badge key={c} size="xs" mono tone={sameCodes.includes(c) ? "ok" : "outline"} className="mr-1">{c}</Badge>) : null} />
                    <Row k="External ids" a={externalIdsText(a.externalIds)} b={externalIdsText(b?.externalIds)} />
                    <Row k="Capacity" a={m.candidate.itCapacityMw ?? m.candidate.totalPowerMw ?? m.candidate.plannedPowerMw ? `${fmtMw(m.candidate.itCapacityMw ?? m.candidate.totalPowerMw ?? m.candidate.plannedPowerMw)}${m.candidate.itCapacityMw ? " IT" : m.candidate.totalPowerMw ? " total" : " planned"}` : null} b={f && (f.itCapacityMw ?? f.totalPowerMw ?? f.plannedPowerMw) != null ? `${fmtMw(f.itCapacityMw ?? f.totalPowerMw ?? f.plannedPowerMw)}${f.itCapacityMw ? " IT" : f.totalPowerMw ? " total" : " planned"}` : null} />
                    <Row k="Status" a={a.status ?? null} b={b?.status ?? f?.status} />
                    <Row k="Sources" a={m.candidate.url ? <ExtLink href={m.candidate.url} /> : m.candidate.sourceId ? <Mono>{m.candidate.sourceId}</Mono> : null} b={b ? <span>{fmtInt(b.sourceCount)} source{b.sourceCount === 1 ? "" : "s"}{f ? <> · confidence {f.confidence} · {f.completeness}% complete</> : null}</span> : null} />
                    <Row k="Key / id" a={<Mono>{m.candidateKey}</Mono>} b={f ? <Mono>{f.id}</Mono> : m.matchedFacilityId ? <Mono>{m.matchedFacilityId}</Mono> : null} />
                  </div>
                  <div className="flex flex-row flex-wrap gap-2 lg:w-[170px] lg:flex-col lg:justify-center">
                    {open && !decided ? (
                      <>
                        <Button variant="primary" size="md" className="flex-1" onClick={() => void decide(m, "approve")} disabled={busy !== null || !m.matchedFacilityId} title="Same site: repoint keys, merge the duplicate (m)">
                          Merge
                        </Button>
                        <Button variant="secondary" size="md" className="flex-1" onClick={() => void decide(m, "reject")} disabled={busy !== null} title="Different sites (k)">
                          Keep separate
                        </Button>
                        <Button variant="secondary" size="md" className="flex-1" onClick={() => void decide(m, "related-campus")} disabled={busy !== null || !m.candidateFacilityId || !m.matchedFacilityId} title="Candidate is a building of the matched campus (r)">
                          Related campus
                        </Button>
                        {m.status === "pending" && (
                          <Button variant="ghost" size="md" className="flex-1" onClick={() => void decide(m, "defer")} disabled={busy !== null} title="Decide later (d)">
                            Defer
                          </Button>
                        )}
                      </>
                    ) : (
                      <div className="text-[12px] text-ink-3">
                        {(decided ?? m.status).replace(/_/g, " ")} {m.decidedAt && <RelativeTime iso={m.decidedAt} />}
                      </div>
                    )}
                    {cf && (
                      <Button size="xs" variant="ghost" href={`/admin/facilities/${encodeURIComponent(cf.id)}/edit`}>
                        Curate candidate
                      </Button>
                    )}
                  </div>
                </div>
              </article>
            );
          })}
          <Pager page={page} perPage={PER_PAGE} total={total} onPage={(p) => setParams({ page: p === 1 ? null : p })} />
          <p className="text-[11.5px] text-ink-4">{fmtInt(total)} {TAB_LABEL[tab].toLowerCase()} matches. Green = the two sides agree; amber = they disagree. Decisions are recorded with `admin` as decider and are visible in the facility&rsquo;s source history.</p>
        </div>
      )}
    </div>
  );
}