"use client";

import type { ProjectSummary } from "@dci/core";
import { FACILITY_STATUSES, PROJECT_CLASSES } from "@dci/core";
import Link from "next/link";
import { useMemo, useState } from "react";
import { Badge, Button, ConfidenceBadge, CountryFlag, EmptyState, EstimateMark, RelativeTime, ScopeBadge, SearchInput, SemanticsLabel, SkeletonRows, StatusBadge, Table, TBody, Td, Th, THead, Tr } from "@/components/ui";
import { cn } from "@/components/ui/cn";
import { DASH, fmtDate, fmtMw, fmtUsd, fmtValue } from "@/lib/format";
import { CLAIM_STATUS_LABEL, STATUS_LABEL } from "@/lib/labels";
import { routes } from "@/lib/routes";
import type { ClaimDTO } from "@/lib/admin-api";
import { ErrorNote, ExtLink, Mono, Pager, 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";

/* ------------------------------------------------------------------------------------------
   /admin/projects — project curation: hide / unhide / merge, and per-project CLAIMS REVIEW
   (set current · reject · mark for review). The list is the PUBLIC /api/v1/projects through the
   proxy (there is no admin list endpoint yet), so hidden projects are not listed — see the note.
   ------------------------------------------------------------------------------------------ */

const PER_PAGE = 30;
const SORTS = ["updated", "mw", "announced", "opening"] as const;
type Sort = (typeof SORTS)[number];
const EVIDENCE = ["", "strong", "weak", "none"] as const;

const CLASS_LABEL: Record<string, string> = {
  NEW_BUILD: "New build",
  EXPANSION: "Expansion",
  CONSTRUCTION_START: "Construction start",
  PERMIT: "Permit",
  LAND_ACQUISITION: "Land acquisition",
  GRID_CONNECTION: "Grid connection",
  POWER_AGREEMENT: "Power agreement",
  FINANCING: "Financing",
  ACQUISITION: "Acquisition",
  PARTNERSHIP: "Partnership",
  CUSTOMER_AGREEMENT: "Customer agreement",
  EXECUTIVE_APPOINTMENT: "Executive appointment",
  SUSTAINABILITY: "Sustainability",
  PRODUCT_NEWS: "Product news",
  GENERAL_COMPANY_NEWS: "General company news",
  UNKNOWN: "Unknown",
};
const PHYSICAL = new Set(["NEW_BUILD", "EXPANSION", "CONSTRUCTION_START", "PERMIT", "LAND_ACQUISITION", "GRID_CONNECTION"]);

function ClassBadge({ c }: { c: string | null | undefined }) {
  if (!c) return <span className="text-ink-4">{DASH}</span>;
  return (
    <Badge size="xs" tone={PHYSICAL.has(c) ? "ok" : c === "UNKNOWN" ? "outline" : "warn"} title={PHYSICAL.has(c) ? "physical development class" : "associated / non-physical class — should not have created a project"}>
      {CLASS_LABEL[c] ?? c}
    </Badge>
  );
}

function EvidenceBadge({ e }: { e: ProjectSummary["evidenceLevel"] }) {
  if (!e) return <span className="text-ink-4">{DASH}</span>;
  return (
    <Badge size="xs" tone={e === "strong" ? "ok" : e === "weak" ? "warn" : "danger"} title="Evidence threshold: (explicit name or operator) + location + a development verb">
      {e}
    </Badge>
  );
}

/** Claims of one project with status actions (POST claims/:id/status). */
function ClaimsReview({ project }: { project: ProjectSummary }) {
  const q = useAdminQuery<ClaimDTO[]>("claims", { query: { subject_type: "project", subject_id: project.id, status: "all", per_page: 100 }, timeoutMs: 30_000 });
  const { busy, run } = useAdminMutation();
  const toast = useToast();
  const set = async (c: ClaimDTO, status: "current" | "rejected" | "review") => {
    let reason: string | undefined;
    if (status !== "current") {
      const r = window.prompt(`${status === "rejected" ? "Reject" : "Mark for review"} — reason (optional)`, "");
      if (r === null) return;
      reason = r.trim() || undefined;
    }
    const r = await run<{ claim: ClaimDTO; flagged: boolean }>(`claim:${c.id}`, `claims/${encodeURIComponent(c.id)}/status`, { body: { status, ...(reason ? { reason } : {}) } });
    if (r.ok) {
      toast({ tone: "ok", title: `Claim ${CLAIM_STATUS_LABEL[status].toLowerCase()}`, description: r.data.flagged ? "It was backing a displayed value — a claim_rejected_backing_value flag was raised for the next reconciliation." : `${c.label}: ${c.value !== null ? fmtValue(c.value, c.unit === "USD" ? "usd" : "mw") : c.valueText ?? ""}` });
      q.mutate((prev) => prev?.map((x) => (x.id === c.id ? r.data.claim : x)) ?? prev);
    } else toast({ tone: "danger", title: "Claim status not changed", description: r.error });
  };
  if (q.loading && !q.data) return <SkeletonRows rows={3} />;
  if (q.error && !q.data) return <ErrorNote error={q.error} onRetry={() => void q.refresh()} />;
  const claims = q.data ?? [];
  if (!claims.length) return <p className="text-[12px] text-ink-4">No claim extracted for this project — its figures come from structured source fields, or none were published.</p>;
  return (
    <Table className="text-[12.5px]" dense>
      <THead>
        <Tr>
          <Th>Predicate</Th>
          <Th numeric>Value</Th>
          <Th>Scope</Th>
          <Th>Status</Th>
          <Th>Source</Th>
          <Th className="hidden lg:table-cell">Evidence</Th>
          <Th>Actions</Th>
        </Tr>
      </THead>
      <TBody>
        {claims.map((c) => (
          <Tr key={c.id} className={cn(c.status !== "current" && "text-ink-3")}>
            <Td>
              <div className="flex flex-wrap items-center gap-1.5">
                <SemanticsLabel semantics={c.predicate} className="text-[12.5px] text-ink" />
                {c.isWinner && (
                  <Badge size="xs" tone="accent" title="Backs the displayed value">
                    shown
                  </Badge>
                )}
              </div>
              <Mono className="text-[10.5px] text-ink-4">{c.id}</Mono>
            </Td>
            <Td numeric className="figure">
              {c.isEstimate && <EstimateMark className="mr-0.5" />}
              {c.value !== null ? fmtValue(c.value, c.unit === "USD" ? "usd" : "mw") : c.valueText ?? DASH}
            </Td>
            <Td>
              <ScopeBadge scope={c.scope} />
              {c.scopeReason && <div className="font-mono text-[10.5px] text-ink-4">{c.scopeReason}</div>}
            </Td>
            <Td>
              <Badge size="xs" tone={c.status === "current" ? "ok" : c.status === "rejected" ? "danger" : c.status === "review" ? "warn" : "outline"}>
                {CLAIM_STATUS_LABEL[c.status]}
              </Badge>
              {c.rejectionReason && <div className="text-[10.5px] text-ink-4">{c.rejectionReason}</div>}
            </Td>
            <Td>
              <div className="flex flex-col">
                <ExtLink href={c.url}>{c.sourceName}</ExtLink>
                <span className="text-[10.5px] text-ink-4">
                  {c.sourceKind} · tier {c.authorityTier} · <ConfidenceBadge level={c.confidence} size="xs" />
                </span>
              </div>
            </Td>
            <Td className="hidden max-w-[360px] lg:table-cell">{c.evidenceText ? <span className="line-clamp-3 text-[12px] text-ink-2">{c.evidenceText}</span> : <span className="text-ink-4">no sentence</span>}</Td>
            <Td>
              <div className="flex flex-wrap gap-1">
                {c.status !== "current" && (
                  <Button size="xs" variant="secondary" onClick={() => void set(c, "current")} disabled={busy !== null}>
                    Set current
                  </Button>
                )}
                {c.status !== "rejected" && (
                  <Button size="xs" variant="danger" onClick={() => void set(c, "rejected")} disabled={busy !== null}>
                    Reject
                  </Button>
                )}
                {c.status !== "review" && (
                  <Button size="xs" variant="ghost" onClick={() => void set(c, "review")} disabled={busy !== null}>
                    Review
                  </Button>
                )}
              </div>
            </Td>
          </Tr>
        ))}
      </TBody>
    </Table>
  );
}

export function ProjectsAdmin() {
  const [params, setParams] = useUrlState();
  const page = Math.max(1, Number(params.page ?? 1) || 1);
  const status = params.status ?? "";
  const cls = params.project_class ?? "";
  const evidence = params.evidence_level ?? "";
  const sort = (SORTS.includes(params.sort as Sort) ? params.sort : "updated") as Sort;
  const search = params.q ?? "";
  const q = useAdminQuery<ProjectSummary[]>("v1/projects", { query: { page, per_page: PER_PAGE, status: status || undefined, project_class: cls || undefined, evidence_level: evidence || undefined, sort, q: search || undefined }, timeoutMs: 30_000 });
  const { busy, run } = useAdminMutation();
  const toast = useToast();
  const [open, setOpen] = useState<string | null>(null);
  const [hidden, setHidden] = useState<Record<string, boolean>>({});
  const total = Number(q.meta?.total ?? 0);
  const rows = useMemo(() => q.data ?? [], [q.data]);

  const hide = async (p: ProjectSummary) => {
    const reason = window.prompt(`Hide “${p.name}” as a false positive? Reason (required, kept for audit):`, "");
    if (reason === null) return;
    if (!reason.trim()) return toast({ tone: "warn", title: "A reason is required to hide a project" });
    const r = await run<{ id: string; hidden: boolean; changed: boolean }>(`hide:${p.id}`, `projects/${encodeURIComponent(p.id)}/hide`, { body: { reason: reason.trim() } });
    if (r.ok) {
      setHidden((h) => ({ ...h, [p.id]: true }));
      toast({ tone: "ok", title: "Project hidden", description: `${p.name} — kept for audit, never listed or summed.` });
    } else toast({ tone: "danger", title: "Hide failed", description: r.error });
  };
  const unhide = async (p: ProjectSummary) => {
    const r = await run<{ id: string; hidden: boolean; changed: boolean }>(`unhide:${p.id}`, `projects/${encodeURIComponent(p.id)}/unhide`, { body: {} });
    if (r.ok) {
      setHidden((h) => ({ ...h, [p.id]: false }));
      toast({ tone: "ok", title: "Project restored", description: p.name });
    } else toast({ tone: "danger", title: "Unhide failed", description: r.error });
  };
  const merge = async (p: ProjectSummary) => {
    const into = window.prompt(`Merge “${p.name}” INTO which project? Enter the survivor's id (prj_…) or slug. Events, timeline, claims, provenance and keys move to the survivor.`, "");
    if (!into || !into.trim()) return;
    if (!window.confirm(`Merge ${p.id} into ${into.trim()}? This cannot be undone from the console.`)) return;
    const r = await run<{ into: string; merged: string; moved: Record<string, number> }>(`merge:${p.id}`, `projects/${encodeURIComponent(p.id)}/merge`, { body: { into: into.trim() } });
    if (r.ok) {
      toast({ tone: "ok", title: "Projects merged", description: `${r.data.merged} → ${r.data.into} · moved ${Object.entries(r.data.moved).map(([k, v]) => `${v} ${k}`).join(", ")}` });
      q.mutate((prev) => prev?.filter((x) => x.id !== p.id) ?? prev);
    } else toast({ tone: "danger", title: "Merge failed", description: r.error });
  };

  return (
    <div>
      <AdminPageHeader
        title="Projects"
        description="Curate project records: hide false positives (kept for audit, never listed), restore, merge duplicates, and review the claims behind each figure."
        aside={<RefreshButton onClick={() => void q.refresh()} busy={q.refreshing} updatedAt={q.updatedAt} />}
      />
      <p className="mb-3 rounded-xs border border-dashed border-hair-2 px-2.5 py-2 text-[11.5px] text-ink-3">
        Listed through the public <Mono>/api/v1/projects</Mono> (no admin list endpoint yet): projects already <strong className="text-ink-2">hidden</strong> by review are not listed here — a project hidden in this session shows a “Restore” button until you leave the page. Merged duplicates are excluded as well.
      </p>
      <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="Sort" value={sort} onChange={(v) => setParams({ sort: v === "updated" ? null : v, page: null })} options={SORTS.map((s) => ({ value: s, label: s === "mw" ? "Planned MW" : s[0]!.toUpperCase() + s.slice(1) }))} />
        <div className="flex flex-1 flex-wrap gap-2">
          <Select value={status} onChange={(e) => setParams({ status: e.target.value || null, page: null })} className="w-[170px]" aria-label="Status">
            <option value="">All statuses</option>
            {FACILITY_STATUSES.map((s) => (
              <option key={s} value={s}>
                {STATUS_LABEL[s]}
              </option>
            ))}
          </Select>
          <Select value={cls} onChange={(e) => setParams({ project_class: e.target.value || null, page: null })} className="w-[190px]" aria-label="Class">
            <option value="">All classes</option>
            {PROJECT_CLASSES.map((c) => (
              <option key={c} value={c}>
                {CLASS_LABEL[c] ?? c}
              </option>
            ))}
          </Select>
          <Select value={evidence} onChange={(e) => setParams({ evidence_level: e.target.value || null, page: null })} className="w-[150px]" aria-label="Evidence level">
            {EVIDENCE.map((e) => (
              <option key={e} value={e}>
                {e ? `Evidence: ${e}` : "All evidence levels"}
              </option>
            ))}
          </Select>
          <SearchInput size="sm" value={search} onChange={(v) => setParams({ q: v || null, page: null })} placeholder="Search name, operator, city" wrapperClassName="min-w-[200px] flex-1" />
        </div>
      </div>

      {q.loading && !q.data ? (
        <SkeletonRows rows={10} />
      ) : rows.length === 0 ? (
        <EmptyState compact title="No project matches" description="Adjust the filters or the search." />
      ) : (
        <div className="max-w-full overflow-x-auto rounded-sm border border-hair bg-surface">
          <Table className="min-w-[1240px] text-[12.5px] sm:[&_td]:py-1.5" responsive={false}>
            <THead>
              <Tr>
                <Th className="pl-3">Project</Th>
                <Th>Operator</Th>
                <Th>Country</Th>
                <Th>Status</Th>
                <Th>Class</Th>
                <Th>Evidence</Th>
                <Th numeric>Planned MW</Th>
                <Th numeric>Investment</Th>
                <Th>Announced</Th>
                <Th>Updated</Th>
                <Th className="pr-3">Actions</Th>
              </Tr>
            </THead>
            <TBody>
              {rows.map((p) => {
                const isHidden = hidden[p.id] === true;
                const isOpen = open === p.id;
                return (
                  <ProjectRow key={p.id} p={p} isHidden={isHidden} isOpen={isOpen} busy={busy !== null} onToggle={() => setOpen((o) => (o === p.id ? null : p.id))} onHide={() => void hide(p)} onUnhide={() => void unhide(p)} onMerge={() => void merge(p)} />
                );
              })}
            </TBody>
          </Table>
        </div>
      )}
      <Pager page={page} perPage={PER_PAGE} total={total} onPage={(p) => setParams({ page: p === 1 ? null : p })} />
      <p className="text-[11px] text-ink-4">Class: green = physical development (may create a project); amber = associated news (power agreement, financing, acquisition, partnership, customer) or non-physical (appointment, sustainability, product, general) — these should not have created a project and are hide candidates. Planned MW / investment are site-scoped published figures; portfolio and company figures stay as claims.</p>
    </div>
  );
}

function ProjectRow({ p, isHidden, isOpen, busy, onToggle, onHide, onUnhide, onMerge }: { p: ProjectSummary; isHidden: boolean; isOpen: boolean; busy: boolean; onToggle: () => void; onHide: () => void; onUnhide: () => void; onMerge: () => void }) {
  return (
    <>
      <Tr className={cn(isHidden && "opacity-50", isOpen && "bg-surface-2/60")}>
        <Td primary className="pl-3">
          <div className="flex items-center gap-1.5">
            <Link href={routes.project(p.slug)} target="_blank" className="max-w-[320px] truncate font-medium text-ink hover:text-accent hover:underline" title={p.name}>
              {p.name}
            </Link>
            {isHidden && (
              <Badge size="xs" tone="warn">
                hidden
              </Badge>
            )}
            {p.isAi && (
              <Badge size="xs" tone="accent">
                AI
              </Badge>
            )}
          </div>
          <div className="text-[11px] text-ink-4">
            <Mono>{p.id}</Mono>
            {p.city && <span> · {p.city}</span>}
          </div>
        </Td>
        <Td muted>
          {p.operator ? (
            <Link href={routes.operator(p.operator.slug)} target="_blank" className="hover:text-ink hover:underline">
              {p.operator.name}
            </Link>
          ) : (
            <span className="text-ink-4">{DASH}</span>
          )}
        </Td>
        <Td>{p.countryIso2 ? <CountryFlag iso2={p.countryIso2} withName className="max-w-[140px] text-ink-2" /> : <span className="text-ink-4">{DASH}</span>}</Td>
        <Td>
          <StatusBadge status={p.status} short size="xs" />
        </Td>
        <Td>
          <ClassBadge c={p.projectClass} />
        </Td>
        <Td>
          <EvidenceBadge e={p.evidenceLevel} />
        </Td>
        <Td numeric className="figure">
          {p.plannedMw === null ? (
            <span className="text-ink-4">{DASH}</span>
          ) : (
            <span title={p.capacityScope ? `scope ${p.capacityScope}${p.capacitySemantics ? ` · ${p.capacitySemantics}` : ""}` : undefined}>
              <EstimateMark className="mr-0.5" />
              {fmtMw(p.plannedMw)}
              {p.capacityScope && <span className="ml-1 text-[10.5px] text-ink-4">{p.capacityScope}</span>}
            </span>
          )}
        </Td>
        <Td numeric className="figure">
          {p.investmentUsd === null ? (
            <span className="text-ink-4">{DASH}</span>
          ) : (
            <span title={p.investmentScope ? `scope ${p.investmentScope}` : undefined}>
              {fmtUsd(p.investmentUsd)}
              {p.investmentScope && <span className="ml-1 text-[10.5px] text-ink-4">{p.investmentScope}</span>}
            </span>
          )}
        </Td>
        <Td muted className="figure">
          {p.announcedOn ? fmtDate(p.announcedOn) : DASH}
        </Td>
        <Td muted>
          <RelativeTime iso={p.lastUpdate} />
        </Td>
        <Td className="pr-3">
          <div className="flex items-center gap-1">
            <Button size="xs" variant={isOpen ? "primary" : "secondary"} onClick={onToggle} aria-expanded={isOpen}>
              Claims
            </Button>
            {isHidden ? (
              <Button size="xs" variant="secondary" onClick={onUnhide} disabled={busy}>
                Restore
              </Button>
            ) : (
              <Button size="xs" variant="danger" onClick={onHide} disabled={busy} title="Hide as a false positive (reason required)">
                Hide
              </Button>
            )}
            <Button size="xs" variant="ghost" onClick={onMerge} disabled={busy || isHidden} title="Merge this duplicate into another project">
              Merge into…
            </Button>
          </div>
        </Td>
      </Tr>
      {isOpen && (
        <tr className="bg-surface-2/60">
          <td colSpan={11} className="px-3 pb-3 pt-1">
            <div className="mb-1 flex items-center gap-2">
              <span className="label-caps">Claims review</span>
              <span className="text-[11px] text-ink-4">Set current / Reject / Review never rewrite the project column directly; reconciliation re-derives it on the next run.</span>
            </div>
            <ClaimsReview project={p} />
          </td>
        </tr>
      )}
    </>
  );
}