import type { PowerOverview } from "@dci/core";
import { ExternalLink } from "lucide-react";
import type { Metadata } from "next";
import Link from "next/link";
import { Breadcrumbs } from "@/components/entity/breadcrumbs";
import { SectionNav } from "@/components/entity/section-nav";
import { SourcesFooter } from "@/components/entity/sources-footer";
import { EventList } from "@/components/event-list";
import { CountryEnergyTable } from "@/components/intelligence/power/country-energy-table";
import { ApiNote, GRID_KIND_LABEL, GridConstraintList, GridKindBadge, HonestEmpty, PillLink } from "@/components/intelligence/shared";
import { Badge } from "@/components/ui/badge";
import { Page, PageHeader, Section } from "@/components/ui/card";
import { cn } from "@/components/ui/cn";
import { CountryFlag } from "@/components/ui/country-flag";
import { Metric, MetricCell, MetricRow } from "@/components/ui/metric";
import { ErrorState, OfflineNotice } from "@/components/ui/states";
import { RowLink, TBody, THead, Table, Td, Th, Tr } from "@/components/ui/table";
import { api } from "@/lib/api";
import { fmtInt, fmtMw } from "@/lib/format";
import { OPERATOR_KIND_LABEL } from "@/lib/labels";
import { routes } from "@/lib/routes";
import { pageMetadata } from "@/lib/seo";
import { hrefWith, spGet, type SearchParams } from "@/lib/sort";

export const revalidate = 120;

export const metadata: Metadata = pageMetadata({
  title: "Power & grid",
  description: "Grid constraints (moratoria, grid delays, load caps, new transmission), power agreements, the largest published utility and grid-connection loads, and national electricity context — observed facts, no inference.",
  path: routes.power(),
});

/** The eight constraint kinds of the spec, always listed (0 → “none recorded”). */
const SPEC_KINDS = ["moratorium", "grid_delay", "capacity_restriction", "load_cap", "new_transmission", "new_substation", "regulation", "large_load_queue"] as const;

const LOAD_KIND_LABEL: Record<PowerOverview["largeLoads"][number]["kind"], string> = { utility_capacity: "Utility capacity", grid_connection: "Grid connection", planned_load: "Planned load" };

export default async function PowerPage({ searchParams }: { searchParams: Promise<SearchParams> }) {
  const sp = await searchParams;
  const r = await api.power();
  if (!r.ok) {
    return (
      <Page className="py-6">
        <Breadcrumbs items={[{ name: "Power & grid", href: routes.power() }]} className="mb-4" />
        <OfflineNotice detail={r.error} className="mb-4" />
        <ErrorState />
      </Page>
    );
  }
  const d = r.data;
  const kindCounts = new Map<string, number>();
  for (const g of d.gridConstraints) kindCounts.set(g.kind, (kindCounts.get(g.kind) ?? 0) + 1);
  const kinds = Array.from(kindCounts.keys()).sort();
  const kindFilter = spGet(sp, "kind");
  const activeKind = kindFilter && kindCounts.has(kindFilter) ? kindFilter : null;
  const constraints = activeKind ? d.gridConstraints.filter((g) => g.kind === activeKind) : d.gridConstraints;
  const specWithCounts = SPEC_KINDS.map((k) => ({ kind: k, count: kindCounts.get(k) ?? 0 }));
  const extraKinds = kinds.filter((k) => !(SPEC_KINDS as readonly string[]).includes(k));

  const sections = [
    { id: "constraints", label: "Grid constraints", count: d.gridConstraints.length },
    { id: "events", label: "Power events", count: d.powerEvents.length },
    { id: "loads", label: "Large loads", count: d.largeLoads.length },
    { id: "energy", label: "Country energy", count: d.countryEnergy.length },
    { id: "utilities", label: "Utilities", count: d.utilities.length },
  ];

  return (
    <Page>
      <Breadcrumbs items={[{ name: "Power & grid", href: routes.power() }]} className="pt-3" />
      <PageHeader eyebrow="Intelligence" title="Power & grid" description="Where electricity constrains or enables data center growth: curated constraint reports, detected utility and power-agreement events, the largest published loads and each country's electricity mix." aside={<PillLink href={routes.map("layer=power")}>Power layer on the map →</PillLink>} />

      <MetricRow cols={5}>
        <MetricCell>
          <Metric value={fmtInt(d.gridConstraints.length)} label="Constraints & grid events" note={`${kinds.length} ${kinds.length === 1 ? "kind" : "kinds"} recorded`} />
        </MetricCell>
        <MetricCell>
          <Metric value={fmtInt(d.powerEvents.length)} label="Power events" note="recent, source-linked" />
        </MetricCell>
        <MetricCell>
          <Metric value={fmtInt(d.largeLoads.length)} label="Large loads" note="published site-scoped MW" />
        </MetricCell>
        <MetricCell>
          <Metric value={fmtInt(d.countryEnergy.length)} label="Countries with energy stats" />
        </MetricCell>
        <MetricCell>
          <Metric value={fmtInt(d.utilities.length)} label="Utilities" note="operators named energy / power" />
        </MetricCell>
      </MetricRow>

      <div className="mt-4 grid gap-px overflow-hidden rounded-sm border border-hair bg-hair md:grid-cols-2" role="note" aria-label="Observed fact versus analytical inference">
        <div className="bg-surface px-3 py-3">
          <div className="label-caps mb-1 text-ok">Observed fact</div>
          <p className="text-[12.5px] leading-relaxed text-ink-2">Everything on this page is observed: published utility-capacity and grid-connection MW on facilities and projects, curated public constraint reports (moratoria, grid delays, load caps, new transmission) and detected grid, utility and power-agreement events — each with a link to the page it was read from.</p>
        </div>
        <div className="bg-surface px-3 py-3">
          <div className="label-caps mb-1 text-ink-3">Analytical inference</div>
          <p className="text-[12.5px] leading-relaxed text-ink-2">None. We do not infer available capacity, constraint severity, queue position or supply adequacy from these facts, and a national grid average is never applied to a facility. Absence of a constraint here means none was published — not that the grid is unconstrained.</p>
        </div>
      </div>
      <ApiNote note={d.note} label="From the index" className="mt-3" />

      <SectionNav items={sections} className="mt-4" />

      <div className="flex flex-col gap-8 pt-6">
        <Section id="constraints" title="Grid constraints" description="Curated reports and detected events by kind. Each item links to its source; the badge is the kind as classified." className="scroll-mt-28">
          <div className="mb-3 flex flex-wrap gap-1.5" aria-label="Constraint kinds">
            {specWithCounts.map(({ kind, count }) => (
              <KindChip key={kind} kind={kind} count={count} active={activeKind === kind} sp={sp} />
            ))}
            {extraKinds.map((kind) => (
              <KindChip key={kind} kind={kind} count={kindCounts.get(kind) ?? 0} active={activeKind === kind} sp={sp} />
            ))}
            {activeKind && (
              <Link href={hrefWith(routes.power(), sp, { kind: undefined }, { anchor: "constraints" })} scroll={false} className="inline-flex h-10 items-center px-1.5 text-[12px] text-ink-3 hover:text-ink sm:h-7">
                Reset
              </Link>
            )}
          </div>
          <GridConstraintList items={constraints} emptyTitle={activeKind ? `No ${GRID_KIND_LABEL[activeKind] ?? activeKind} recorded` : "No grid constraint recorded"} emptyDetail="a constraint is listed only when a public report or a detected event describes it" />
        </Section>

        <Section id="events" title="Power events" description="Detected power-agreement, grid-connection and utility events, newest first." className="scroll-mt-28" aside={<Link href={routes.live("type=power_agreement,grid_connection,grid_constraint,utility_event")} className="text-[12.5px] text-ink-3 hover:text-ink">Live feed →</Link>}>
          <EventList events={d.powerEvents} dense emptyTitle="No power event detected yet" emptyDescription="Power agreements and grid events appear as utility and operator sources publish them." />
        </Section>

        <Section id="loads" title="Large loads" description="Largest published site-scoped figures: utility capacity, grid connection or planned load — supply-side MW, never IT load." className="scroll-mt-28">
          {d.largeLoads.length === 0 ? (
            <HonestEmpty title="No large load published" detail="figures appear when a source publishes a utility, grid-connection or planned load for a site" />
          ) : (
            <Table dense mobileCollapse={{ total: d.largeLoads.length, label: "loads" }}>
              <THead>
                <tr>
                  <Th>Site</Th>
                  <Th>Kind</Th>
                  <Th numeric>MW</Th>
                  <Th className="hidden sm:table-cell">Country</Th>
                  <Th className="hidden md:table-cell">Market</Th>
                  <Th className="hidden lg:table-cell">Source</Th>
                </tr>
              </THead>
              <TBody>
                {d.largeLoads.map((l, i) => {
                  const site = l.facility ?? l.project;
                  const href = l.facility ? routes.facility(l.facility.slug) : l.project ? routes.project(l.project.slug) : null;
                  return (
                    <Tr key={`${l.kind}-${site?.id ?? i}`}>
                      <Td primary>
                        {href && site ? <RowLink href={href}>{site.name}</RowLink> : <span className="text-ink-3">unlinked site</span>}
                        <div className="text-[11px] text-ink-4">{l.facility ? "facility" : l.project ? "project" : ""}</div>
                      </Td>
                      <Td label="Kind">
                        <Badge tone={l.kind === "planned_load" ? "info" : "outline"} size="xs">
                          {LOAD_KIND_LABEL[l.kind]}
                        </Badge>
                      </Td>
                      <Td label="MW" numeric lead>
                        {l.kind === "planned_load" && <span className="mr-0.5 text-ink-3">≈</span>}
                        {fmtMw(l.mw)}
                      </Td>
                      <Td label="Country" className="hidden sm:table-cell">
                        <CountryFlag iso2={l.countryIso2} withName className="max-w-[140px] text-ink-2" />
                      </Td>
                      <Td label="Market" className="hidden md:table-cell" muted>
                        {l.metro ? (
                          <Link href={routes.market(l.metro.slug)} className="hover:text-ink hover:underline">
                            {l.metro.name}
                          </Link>
                        ) : (
                          "—"
                        )}
                      </Td>
                      <Td label="Source" className="hidden text-[12px] lg:table-cell">
                        {l.url ? (
                          <a href={l.url} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1 text-ink-2 hover:text-accent">
                            {l.sourceName ?? "source"} <ExternalLink className="size-3" />
                          </a>
                        ) : (
                          <span className="text-ink-3">{l.sourceName ?? "—"}</span>
                        )}
                      </Td>
                    </Tr>
                  );
                })}
              </TBody>
            </Table>
          )}
        </Section>

        <Section id="energy" title="Country energy context" description="National electricity mix next to the known data center load — context for reading MW figures, not a facility's contracted supply." className="scroll-mt-28">
          <CountryEnergyTable rows={d.countryEnergy} sp={sp} />
        </Section>

        <Section id="utilities" title="Utilities" description="Operators whose name says energy / power / electric and that appear as tenants or in events." className="scroll-mt-28">
          {d.utilities.length === 0 ? (
            <HonestEmpty title="No utility identified" detail="utilities are listed only when they appear as tenants or in detected events" />
          ) : (
            <ul className="flex flex-wrap gap-1.5">
              {d.utilities.map((u) => (
                <li key={u.id}>
                  <Link href={routes.operator(u.slug)} className="inline-flex h-10 items-center gap-1.5 rounded-sm border border-hair bg-surface px-2.5 text-[12.5px] text-ink hover:border-hair-2 hover:text-accent sm:h-8">
                    {u.name}
                    {u.kind && <span className="text-[11px] text-ink-3">{OPERATOR_KIND_LABEL[u.kind as keyof typeof OPERATOR_KIND_LABEL] ?? u.kind}</span>}
                    <span className="figure text-[11px] text-ink-3">{fmtInt(u.facilityCount)}</span>
                  </Link>
                </li>
              ))}
            </ul>
          )}
        </Section>
      </div>

      <SourcesFooter sources={r.sources} note="Utility and grid MW are supply-side figures as published; national statistics come from the World Bank (CC BY 4.0). No capacity, severity or adequacy is inferred." />
    </Page>
  );
}

function KindChip({ kind, count, active, sp }: { kind: string; count: number; active: boolean; sp: SearchParams }) {
  const label = GRID_KIND_LABEL[kind] ?? kind.replace(/_/g, " ");
  const inner = (
    <>
      <GridKindBadge kind={kind} />
      <span className={cn("figure text-[11.5px]", count ? "text-ink-2" : "text-ink-4")}>{count ? fmtInt(count) : "none recorded"}</span>
    </>
  );
  const cls = cn("inline-flex h-10 items-center gap-1.5 rounded-sm border px-2 text-[12px] sm:h-8", active ? "border-ink bg-surface-2" : "border-hair bg-surface", count ? "hover:border-hair-2" : "cursor-default");
  if (!count) return <span className={cls} title={`${label}: none recorded`}>{inner}</span>;
  return (
    <Link href={hrefWith(routes.power(), sp, { kind: active ? undefined : kind }, { anchor: "constraints" })} scroll={false} aria-pressed={active} className={cls} title={`Filter: ${label}`}>
      {inner}
    </Link>
  );
}