"use client";

import Link from "next/link";
import { useMemo, useState } from "react";
import { Badge, Button, EmptyState, RelativeTime, ScopeBadge, SemanticsLabel, SkeletonBlock, SkeletonRows, Tab, TabList, TabPanel, Tabs, Table, TBody, Td, Th, THead, Tr } from "@/components/ui";
import { cn } from "@/components/ui/cn";
import { DASH, fmtInt, fmtMw, fmtUsd } from "@/lib/format";
import { entityHref, routes } from "@/lib/routes";
import type { QualityFlagDTO, QualityOverview } from "@/lib/admin-api";
import { ErrorNote, Input, JsonView, Mono, Pager, Panel, RefreshButton, Segmented, Select, Stat } from "./primitives";
import { AdminPageHeader } from "./shell";
import { useToast } from "./toast";
import { useAdminMutation, useAdminQuery } from "./use-admin-query";
import { useUrlState } from "./use-url-state";

/* ------------------------------------------------------------------------------------------
   /admin/quality — QualityOverview counters, largest published values (with scope / semantics so a
   portfolio figure is never read as a site), the review queue (resolve / dismiss) and system alerts.
   ------------------------------------------------------------------------------------------ */

const FLAG_STATUSES = ["open", "resolved", "dismissed", "all"] as const;
type FlagStatus = (typeof FLAG_STATUSES)[number];
const PER_PAGE = 30;

const SEV_TONE = { info: "neutral", warn: "warn", critical: "danger" } as const;

function SeverityBadge({ s }: { s: QualityFlagDTO["severity"] }) {
  return (
    <Badge size="xs" tone={SEV_TONE[s]} className="uppercase tracking-[0.04em]">
      {s}
    </Badge>
  );
}

function codeLabel(code: string, labels: Map<string, string>): string {
  return labels.get(code) ?? code.replace(/_/g, " ");
}

function LargestTable<T extends { id: string; slug: string; name: string }>({ rows, href, value, scope, semantics, unit }: { rows: T[]; href: (r: T) => string; value: (r: T) => string; scope?: (r: T) => string | null | undefined; semantics?: (r: T) => string | null | undefined; unit: string }) {
  if (!rows.length) return <EmptyState compact title="Nothing published yet" />;
  return (
    <Table className="text-[12.5px]" dense>
      <THead>
        <Tr>
          <Th>Record</Th>
          {scope && <Th>Scope</Th>}
          {semantics && <Th className="hidden md:table-cell">Semantics</Th>}
          <Th numeric>{unit}</Th>
        </Tr>
      </THead>
      <TBody>
        {rows.map((r) => (
          <Tr key={r.id}>
            <Td primary>
              <Link href={href(r)} target="_blank" className="font-medium text-ink hover:text-accent hover:underline">
                {r.name}
              </Link>
              <div className="text-[11px] text-ink-4">
                <Mono>{r.id}</Mono>
              </div>
            </Td>
            {scope && (
              <Td label="Scope">
                {scope(r) ? <ScopeBadge scope={scope(r)} /> : <span className="text-ink-4" title="No claim scope recorded — figure comes from a structured source field">{DASH}</span>}
              </Td>
            )}
            {semantics && (
              <Td label="Semantics" className="hidden md:table-cell">
                {semantics(r) ? <SemanticsLabel semantics={semantics(r)} className="text-[12px] text-ink-2" /> : <span className="text-ink-4">{DASH}</span>}
              </Td>
            )}
            <Td label={unit} numeric lead className="figure">
              {value(r)}
            </Td>
          </Tr>
        ))}
      </TBody>
    </Table>
  );
}

export function QualityDashboard() {
  const q = useAdminQuery<QualityOverview>("quality", { refreshMs: 120_000, timeoutMs: 30_000 });
  const [params, setParams] = useUrlState();
  const status = (FLAG_STATUSES.includes(params.status as FlagStatus) ? params.status : "open") as FlagStatus;
  const code = params.code ?? "";
  const entityType = params.entity_type ?? "";
  const minPriority = params.min_priority ?? "";
  const page = Math.max(1, Number(params.page ?? 1) || 1);
  const flags = useAdminQuery<QualityFlagDTO[]>("quality/flags", { query: { status, code: code || undefined, entity_type: entityType || undefined, min_priority: minPriority || undefined, page, per_page: PER_PAGE }, timeoutMs: 30_000 });
  const { busy, run } = useAdminMutation();
  const toast = useToast();
  const [gone, setGone] = useState<Record<string, "resolved" | "dismissed">>({});
  const d = q.data;
  const methodology = typeof q.meta?.methodology === "string" ? q.meta.methodology : null;
  const labels = useMemo(() => new Map((d?.byCode ?? []).map((c) => [c.code, c.label])), [d]);
  const codes = useMemo(() => (d?.byCode ?? []).map((c) => c.code).sort(), [d]);
  const queue = useMemo(() => [...(flags.data ?? [])].sort((a, b) => b.priority - a.priority || (a.createdAt < b.createdAt ? 1 : -1)), [flags.data]);
  const total = Number(flags.meta?.total ?? queue.length);

  const decide = async (f: QualityFlagDTO, action: "resolve" | "dismiss") => {
    let text: string | null = null;
    if (action === "resolve") {
      text = window.prompt(`Resolution for “${f.message.slice(0, 80)}” — what was fixed or verified?`, "");
      if (text === null) return;
      if (!text.trim()) return toast({ tone: "warn", title: "A resolution note is required" });
    } else {
      text = window.prompt("Dismiss reason (optional)", "") ?? "";
    }
    setGone((g) => ({ ...g, [f.id]: action === "resolve" ? "resolved" : "dismissed" }));
    const r = await run<QualityFlagDTO>(`${action}:${f.id}`, `quality/flags/${encodeURIComponent(f.id)}/${action}`, { body: action === "resolve" ? { resolution: text.trim() } : text.trim() ? { reason: text.trim() } : {} });
    if (r.ok) {
      toast({ tone: "ok", title: action === "resolve" ? "Flag resolved" : "Flag dismissed", description: f.message.slice(0, 100) });
      setTimeout(() => {
        flags.mutate((prev) => prev?.filter((x) => x.id !== f.id) ?? prev);
        q.mutate((prev) => (prev ? { ...prev, openFlags: Math.max(0, prev.openFlags - 1) } : prev));
      }, 500);
    } else {
      setGone((g) => {
        const n = { ...g };
        delete n[f.id];
        return n;
      });
      toast({ tone: "danger", title: `Could not ${action}`, description: r.error });
    }
  };

  return (
    <div>
      <AdminPageHeader title="Data quality" description="Sanity-engine flags, largest published values with their scope, review queue and system alerts. Counts are over live records; nothing here rewrites a column — reviews open or close flags and claims." aside={<RefreshButton onClick={() => void q.refresh()} busy={q.refreshing} updatedAt={q.updatedAt} />} />
      <ErrorNote error={q.error && !d ? q.error : null} onRetry={() => void q.refresh()} className="mb-3" />

      {!d ? (
        <SkeletonBlock className="mb-3 h-24" />
      ) : (
        <div className="mb-3 grid grid-cols-2 gap-2 sm:grid-cols-4 lg:grid-cols-6">
          <Stat label="Open flags" value={fmtInt(d.openFlags)} tone={d.openFlags > 0 ? "warn" : "ok"} note={Object.entries(d.bySeverity).map(([k, v]) => `${fmtInt(v)} ${k}`).join(" · ") || undefined} />
          <Stat label="Possible duplicates" value={fmtInt(d.possibleDuplicates)} note={<Link href="/admin/matches" className="hover:text-ink underline decoration-hair-2">pending matches</Link>} />
          <Stat label="Suspicious MW" value={fmtInt(d.suspiciousMw)} tone={d.suspiciousMw > 0 ? "warn" : undefined} note="single-site > 1 000 MW, density, 5× jumps" />
          <Stat label="Suspicious investment" value={fmtInt(d.suspiciousInvestment)} tone={d.suspiciousInvestment > 0 ? "warn" : undefined} note="> $50 B on one site, deal/capex as project" />
          <Stat label="Project false-positive candidates" value={fmtInt(d.projectFalsePositiveCandidates)} tone={d.projectFalsePositiveCandidates > 0 ? "danger" : undefined} note={<Link href="/admin/projects" className="hover:text-ink underline decoration-hair-2">review projects</Link>} />
          <Stat label="Unverified large projects" value={fmtInt(d.unverifiedLargeProjects)} note="≥ 500 MW with a single non-primary source" />
          <Stat label="Unscoped claims" value={fmtInt(d.unscopedClaims)} note="portfolio / company / metro / country / unknown — stored, never summed" />
          <Stat label="Claims in review" value={fmtInt(d.claimsInReview)} note="critical sanity flag on the claim" />
          <Stat label="Facilities without country" value={fmtInt(d.facilitiesMissingCountry)} />
          <Stat label="Projects without facility link" value={fmtInt(d.projectsWithoutFacility)} />
          <Stat label="Orphan operators" value={fmtInt(d.orphanOperators)} note="no facility, no project" />
          <Stat label="Alerts" value={fmtInt(d.alerts.length)} tone={d.alerts.length ? "warn" : undefined} />
        </div>
      )}
      {methodology && <p className="mb-3 rounded-xs border border-dashed border-hair-2 px-2.5 py-2 text-[11.5px] text-ink-3">{methodology}</p>}

      <div className="grid gap-3 lg:grid-cols-3">
        <Panel title="Open flags by code" description="Deterministic sanity checks (capacity, investment, scope, location, operator, duplicate, project false positive)." padded={false} className="lg:col-span-1">
          {!d ? (
            <div className="p-3">
              <SkeletonRows rows={6} />
            </div>
          ) : d.byCode.length === 0 ? (
            <EmptyState compact title="No open flag" />
          ) : (
            <ul className="divide-y divide-hair">
              {d.byCode.map((c) => {
                const max = d.byCode[0]?.count ?? 1;
                return (
                  <li key={c.code}>
                    <button type="button" onClick={() => setParams({ code: code === c.code ? null : c.code, page: null, status: null })} className={cn("flex w-full flex-col gap-1 px-3 py-2 text-left hover:bg-surface-2", code === c.code && "bg-surface-2")} aria-pressed={code === c.code}>
                      <span className="flex items-baseline justify-between gap-2 text-[12.5px]">
                        <span className="min-w-0 truncate text-ink">{c.label}</span>
                        <span className="figure shrink-0 text-ink-2">{fmtInt(c.count)}</span>
                      </span>
                      <span className="h-[3px] w-full bg-surface-3" aria-hidden>
                        <span className="block h-full bg-ink-3" style={{ width: `${Math.max(1.5, (c.count / max) * 100)}%` }} />
                      </span>
                      <Mono className="text-[10.5px] text-ink-4">{c.code}</Mono>
                    </button>
                  </li>
                );
              })}
            </ul>
          )}
        </Panel>

        <Panel title="Largest published values" description="Plain ORDER BY on displayed figures. Scope and semantics say what the number describes; “—” = no claim recorded (structured source field)." padded={false} className="lg:col-span-2">
          {!d ? (
            <div className="p-3">
              <SkeletonRows rows={6} />
            </div>
          ) : (
            <Tabs defaultValue="op" className="px-3 pb-3">
              <TabList label="Largest values">
                <Tab value="op" count={d.largest.operationalFacilityMw.length}>
                  Operational facility MW
                </Tab>
                <Tab value="con" count={d.largest.constructionFacilityMw.length}>
                  Construction MW
                </Tab>
                <Tab value="prj" count={d.largest.projectMw.length}>
                  Project MW
                </Tab>
                <Tab value="inv" count={d.largest.investment.length}>
                  Investment
                </Tab>
                <Tab value="opp" count={d.largest.operatorPipelineMw.length}>
                  Operator pipeline
                </Tab>
                <Tab value="met" count={d.largest.metroPipelineMw.length}>
                  Metro pipeline
                </Tab>
              </TabList>
              <TabPanel value="op">
                <LargestTable rows={d.largest.operationalFacilityMw} href={(r) => routes.facility(r.slug)} value={(r) => fmtMw(r.mw)} scope={(r) => r.scope} semantics={(r) => r.semantics} unit="MW" />
              </TabPanel>
              <TabPanel value="con">
                <LargestTable rows={d.largest.constructionFacilityMw} href={(r) => routes.facility(r.slug)} value={(r) => fmtMw(r.mw)} unit="MW" />
              </TabPanel>
              <TabPanel value="prj">
                <LargestTable rows={d.largest.projectMw} href={(r) => routes.project(r.slug)} value={(r) => `≈ ${fmtMw(r.mw)}`} scope={(r) => r.scope} unit="Planned MW" />
              </TabPanel>
              <TabPanel value="inv">
                <LargestTable rows={d.largest.investment} href={(r) => routes.project(r.slug)} value={(r) => fmtUsd(r.investmentUsd)} scope={(r) => r.scope} unit="USD" />
              </TabPanel>
              <TabPanel value="opp">
                <LargestTable rows={d.largest.operatorPipelineMw} href={(r) => routes.operator(r.slug)} value={(r) => `≈ ${fmtMw(r.mw)}`} unit="Pipeline MW" />
              </TabPanel>
              <TabPanel value="met">
                <LargestTable rows={d.largest.metroPipelineMw} href={(r) => routes.market(r.slug)} value={(r) => `≈ ${fmtMw(r.mw)}`} unit="Pipeline MW" />
              </TabPanel>
            </Tabs>
          )}
        </Panel>
      </div>

      <Panel
        title="Review queue"
        description="Flags sorted by priority (impact of the figure × severity). Resolve = fixed or verified (note required); Dismiss = not a problem."
        className="mt-3"
        padded={false}
        aside={<RefreshButton onClick={() => void flags.refresh()} busy={flags.refreshing} updatedAt={flags.updatedAt} />}
      >
        <div className="flex flex-col gap-2 border-b border-hair px-3 py-2 lg:flex-row lg:items-center">
          <Segmented label="Flag status" value={status} onChange={(v) => setParams({ status: v === "open" ? null : v, page: null })} options={FLAG_STATUSES.map((s) => ({ value: s, label: s[0]!.toUpperCase() + s.slice(1), count: s === status ? total : null }))} />
          <div className="flex flex-1 flex-wrap gap-2">
            <Select value={code} onChange={(e) => setParams({ code: e.target.value || null, page: null })} className="w-[240px]" aria-label="Code">
              <option value="">All codes</option>
              {code && !codes.includes(code) && <option value={code}>{code}</option>}
              {codes.map((c) => (
                <option key={c} value={c}>
                  {codeLabel(c, labels)}
                </option>
              ))}
            </Select>
            <Select value={entityType} onChange={(e) => setParams({ entity_type: e.target.value || null, page: null })} className="w-[150px]" aria-label="Entity type">
              <option value="">All entities</option>
              {["facility", "project", "operator", "claim", "metro", "country"].map((t) => (
                <option key={t} value={t}>
                  {t}
                </option>
              ))}
            </Select>
            <Input type="number" min={0} max={100} value={minPriority} onChange={(e) => setParams({ min_priority: e.target.value || null, page: null })} placeholder="min priority" className="w-[130px]" mono aria-label="Minimum priority" />
          </div>
        </div>
        <ErrorNote error={flags.error && !flags.data ? flags.error : null} onRetry={() => void flags.refresh()} className="m-3" />
        {flags.loading && !flags.data ? (
          <div className="p-3">
            <SkeletonRows rows={8} />
          </div>
        ) : queue.length === 0 ? (
          <EmptyState compact title={status === "open" ? "Review queue is empty" : "No flags"} description={status === "open" ? "Sanity flags open automatically after each connector run when a figure needs a human look." : undefined} />
        ) : (
          <ul className="divide-y divide-hair">
            {queue.map((f) => {
              const decided = gone[f.id];
              const href = f.entity ? entityHref(f.entityType, f.entity.slug, f.entity.name) : null;
              return (
                <li key={f.id} className={cn("grid gap-2 px-3 py-2.5 transition-opacity lg:grid-cols-[64px_minmax(0,1fr)_auto]", decided && "opacity-40")}>
                  <div className="flex items-center gap-2 lg:flex-col lg:items-start">
                    <span className="figure text-[18px] font-medium leading-none text-ink" title="Priority (0–100)">
                      {f.priority}
                    </span>
                    <SeverityBadge s={f.severity} />
                  </div>
                  <div className="min-w-0">
                    <div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-[11.5px] text-ink-3">
                      <Badge size="xs" tone="outline" mono title={codeLabel(f.code, labels)}>
                        {f.code}
                      </Badge>
                      <span>{f.entityType}</span>
                      {f.field && <Mono>{f.field}</Mono>}
                      {f.claimId && (
                        <Mono className="text-ink-4" title="claim id">
                          {f.claimId}
                        </Mono>
                      )}
                      <RelativeTime iso={f.createdAt} className="ml-auto" />
                    </div>
                    <div className="mt-1 text-[13px] text-ink">
                      {href && f.entity ? (
                        <Link href={href} target="_blank" className="font-medium hover:text-accent hover:underline">
                          {f.entity.name}
                        </Link>
                      ) : (
                        <Mono>{f.entityId}</Mono>
                      )}
                    </div>
                    <p className="mt-0.5 text-[12.5px] text-ink-2">{f.message}</p>
                    {f.status !== "open" && (
                      <p className="mt-0.5 text-[11.5px] text-ink-3">
                        {f.status} {f.resolvedBy && `by ${f.resolvedBy}`} {f.resolvedAt && <RelativeTime iso={f.resolvedAt} />}
                        {f.resolution && <> — {f.resolution}</>}
                      </p>
                    )}
                    {f.details && Object.keys(f.details).length > 0 && (
                      <div className="mt-1.5">
                        <JsonView value={f.details} maxHeight={160} collapsible />
                      </div>
                    )}
                  </div>
                  <div className="flex flex-row gap-2 lg:w-[130px] lg:flex-col">
                    {f.status === "open" && !decided ? (
                      <>
                        <Button size="sm" variant="primary" className="flex-1" onClick={() => void decide(f, "resolve")} disabled={busy !== null}>
                          Resolve
                        </Button>
                        <Button size="sm" variant="ghost" className="flex-1" onClick={() => void decide(f, "dismiss")} disabled={busy !== null}>
                          Dismiss
                        </Button>
                      </>
                    ) : (
                      <span className="text-[12px] text-ink-3">{decided ?? f.status}</span>
                    )}
                  </div>
                </li>
              );
            })}
          </ul>
        )}
        <div className="px-3">
          <Pager page={page} perPage={PER_PAGE} total={total} onPage={(p) => setParams({ page: p === 1 ? null : p })} />
        </div>
      </Panel>

      <Panel title="System alerts" description="Regression checks and pipeline alerts (facilities −5 %, known MW +20 %, one operator +10 GW/day, one connector > 500 records/day, > 200 location changes/day)." className="mt-3" padded={false}>
        {!d ? (
          <div className="p-3">
            <SkeletonRows rows={3} />
          </div>
        ) : d.alerts.length === 0 ? (
          <EmptyState compact title="No active alert" />
        ) : (
          <ul className="divide-y divide-hair">
            {d.alerts.map((a) => (
              <li key={a.id} className="flex flex-wrap items-start gap-2 px-3 py-2 text-[12.5px]">
                <Badge size="xs" tone={a.level === "critical" || a.level === "error" ? "danger" : a.level === "warn" || a.level === "warning" ? "warn" : "info"} className="uppercase">
                  {a.level}
                </Badge>
                <Mono className="text-ink-3">{a.component}</Mono>
                <span className="min-w-0 flex-1 text-ink-2">{a.message}</span>
                <RelativeTime iso={a.createdAt} className="text-ink-4" />
              </li>
            ))}
          </ul>
        )}
      </Panel>
    </div>
  );
}