"use client";

import Link from "next/link";
import { useMemo } from "react";
import { EmptyState, SkeletonBlock } from "@/components/ui";
import { cn } from "@/components/ui/cn";
import { fmtInt } from "@/lib/format";
import type { DataGaps } from "@/lib/admin-api";
import { ErrorNote, Panel, RefreshButton, Stat } from "./primitives";
import { AdminPageHeader } from "./shell";
import { useAdminQuery } from "./use-admin-query";

/* ------------------------------------------------------------------------------------------
   /admin/data-gaps — what we do not know, ranked for enrichment. Counters come from the worker
   (GET /data-gaps proxied by the API); a 502 means the maintenance worker is unreachable.
   ------------------------------------------------------------------------------------------ */

const GROUPS: Array<{ key: string; label: string; prefix: RegExp; description: string }> = [
  { key: "facilities", label: "Facilities", prefix: /^facilities_/, description: "Live facility records (merged duplicates excluded)." },
  { key: "projects", label: "Projects", prefix: /^projects_/, description: "Live project records (hidden and merged excluded)." },
  { key: "operators", label: "Operators", prefix: /^operators_/, description: "Operator registry." },
  { key: "other", label: "Pipeline & other entities", prefix: /.*/, description: "Reconciliation queue, quality flags, claims, cloud regions, IXPs." },
];

/** Where a gap can be worked on — only links that are guaranteed to exist. */
const LINKS: Record<string, string> = {
  pending_matches: "/admin/matches",
  open_quality_flags: "/admin/quality",
  unscoped_claims: "/admin/quality",
  claims_in_review: "/admin/quality",
  projects_without_facility_link: "/admin/projects",
  projects_without_coordinates: "/admin/projects",
  projects_without_country: "/admin/projects",
  projects_without_operator: "/admin/projects",
  projects_without_capacity: "/admin/projects",
  projects_without_expected_opening: "/admin/projects",
  projects_without_source: "/admin/projects",
  facilities_without_country: "/admin/quality?code=facility_no_country",
};

function humanize(key: string): string {
  const s = key.replace(/^(facilities|projects|operators)_/, "").replace(/_/g, " ");
  return s.charAt(0).toUpperCase() + s.slice(1);
}

export function DataGapsView() {
  const q = useAdminQuery<DataGaps>("data-gaps", { refreshMs: 300_000, timeoutMs: 30_000 });
  const source = typeof q.meta?.source === "string" ? q.meta.source : null;
  const groups = useMemo(() => {
    const entries = Object.entries(q.data ?? {}).filter(([, v]) => Number.isFinite(v));
    const used = new Set<string>();
    return GROUPS.map((g) => {
      const items = entries.filter(([k]) => !used.has(k) && g.prefix.test(k));
      for (const [k] of items) used.add(k);
      items.sort((a, b) => b[1] - a[1]);
      return { ...g, items, total: items.reduce((a, [, v]) => a + v, 0) };
    }).filter((g) => g.items.length);
  }, [q.data]);
  const max = useMemo(() => Math.max(1, ...Object.values(q.data ?? {})), [q.data]);
  const unreachable = q.error && /worker unreachable|502|fetch failed/i.test(q.error);

  return (
    <div>
      <AdminPageHeader title="Data gaps" description={source ? `What the index does not know, ranked for enrichment — counted by the maintenance worker (${source}).` : "What the index does not know, ranked for enrichment — counted by the maintenance worker."} aside={<RefreshButton onClick={() => void q.refresh()} busy={q.refreshing} updatedAt={q.updatedAt} />} />
      {q.error && !q.data && (
        <ErrorNote error={unreachable ? `The maintenance worker did not answer (${q.error}). Data-gap counters are computed by the worker (GET /data-gaps); start it or check DCI_WORKER_URL on the API.` : q.error} onRetry={() => void q.refresh()} className="mb-3" />
      )}
      {q.loading && !q.data ? (
        <div className="grid gap-3 lg:grid-cols-2">
          <SkeletonBlock className="h-56" />
          <SkeletonBlock className="h-56" />
        </div>
      ) : !q.data ? (
        !q.error && <EmptyState title="No counters" />
      ) : groups.length === 0 ? (
        <EmptyState title="No gap counters returned" />
      ) : (
        <div className="grid gap-3 lg:grid-cols-2">
          {groups.map((g) => (
            <Panel key={g.key} title={g.label} description={g.description} aside={<span className="figure text-[12px] text-ink-3">{fmtInt(g.total)} total</span>} padded={false}>
              <ul className="divide-y divide-hair">
                {g.items.map(([k, v]) => {
                  const href = LINKS[k];
                  const inner = (
                    <>
                      <div className="flex items-baseline justify-between gap-3">
                        <span className="min-w-0 truncate text-[13px] text-ink">{humanize(k)}</span>
                        <span className={cn("figure shrink-0 text-[15px] font-medium", v === 0 ? "text-ink-4" : "text-ink")}>{fmtInt(v)}</span>
                      </div>
                      <div className="mt-1 h-[3px] w-full bg-surface-3" aria-hidden>
                        <div className={cn("h-full", v / max > 0.5 ? "bg-warn" : "bg-ink-3")} style={{ width: `${Math.max(v > 0 ? 1.5 : 0, (v / max) * 100)}%` }} />
                      </div>
                      <div className="mt-0.5 flex items-center justify-between font-mono text-[10.5px] text-ink-4">
                        <span>{k}</span>
                        {href && <span className="text-ink-3">work on it →</span>}
                      </div>
                    </>
                  );
                  return (
                    <li key={k}>
                      {href ? (
                        <Link href={href} className="block px-3 py-2 hover:bg-surface-2">
                          {inner}
                        </Link>
                      ) : (
                        <div className="px-3 py-2">{inner}</div>
                      )}
                    </li>
                  );
                })}
              </ul>
            </Panel>
          ))}
        </div>
      )}
      {q.data && (
        <div className="mt-3 grid grid-cols-2 gap-2 sm:grid-cols-4">
          <Stat label="Counters" value={fmtInt(Object.keys(q.data).length)} />
          <Stat label="Largest gap" value={fmtInt(max)} note={Object.entries(q.data).find(([, v]) => v === max)?.[0]?.replace(/_/g, " ")} />
          <Stat label="Zero gaps" value={fmtInt(Object.values(q.data).filter((v) => v === 0).length)} tone="ok" />
          <Stat label="Refreshed" value={q.updatedAt ? new Date(q.updatedAt).toISOString().slice(11, 19) : "—"} note="UTC" />
        </div>
      )}
      <p className="mt-3 text-[11px] text-ink-4">A gap is a missing published value, not a wrong one: the public site shows “—” for each of them. Enrichment adds sources; it never fills a gap with an estimate.</p>
    </div>
  );
}