import type { AiEvidence } from "@dci/core";
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 { AiFacilitiesTable } from "@/components/intelligence/ai/ai-facilities-table";
import { ApiNote, CoverageBar, HonestEmpty, MwFigure, PillLink, PublishedOnlyNote, ShareList } from "@/components/intelligence/shared";
import { ProjectList } from "@/components/project-list";
import { AiMark } from "@/components/ui/badge";
import { Page, PageHeader, Section } from "@/components/ui/card";
import { Metric, MetricCell, MetricRow } from "@/components/ui/metric";
import { ErrorState, OfflineNotice } from "@/components/ui/states";
import { api } from "@/lib/api";
import { fmtInt, fmtMw, fmtPct } from "@/lib/format";
import { AI_EVIDENCE_LABEL, STATUS_LABEL, statusVar } from "@/lib/labels";
import { routes } from "@/lib/routes";
import { pageMetadata } from "@/lib/seo";

export const revalidate = 120;

export const metadata: Metadata = pageMetadata({
  title: "AI infrastructure",
  description: "AI / HPC data centers and projects with their evidence level (confirmed, likely, associated), the project pipeline by stage, top operators, markets and countries — published figures only.",
  path: routes.ai(),
});

const LEVELS: Array<{ level: AiEvidence; rule: string; counted: boolean }> = [
  { level: "confirmed", rule: "A source explicitly describes the site as AI / HPC / GPU / accelerated-computing infrastructure.", counted: true },
  { level: "likely", rule: "AI-ready, high-density, liquid- or direct-to-chip cooling or GPU signals in the source.", counted: true },
  { level: "associated", rule: "Only an AI tenant, customer or company mention — reported separately, NOT counted as AI infrastructure.", counted: false },
  { level: "unknown", rule: "No signal in any indexed source. A single keyword never confirms a site.", counted: false },
];

export default async function AiInfrastructurePage() {
  const r = await api.aiIndex();
  if (!r.ok) {
    return (
      <Page className="py-6">
        <Breadcrumbs items={[{ name: "AI infrastructure", href: routes.ai() }]} className="mb-4" />
        <OfflineNotice detail={r.error} className="mb-4" />
        <ErrorState />
      </Page>
    );
  }
  const d = r.data;
  const s = d.stats;
  const stages = [...d.pipelineByStage].sort((a, b) => b.count - a.count);
  const stageMax = Math.max(1, ...stages.map((x) => x.count));
  const sections = [
    { id: "evidence", label: "Evidence levels" },
    { id: "pipeline", label: "Project pipeline", count: stages.length },
    { id: "top", label: "Top operators & places" },
    { id: "announcements", label: "Announcements", count: d.recentAnnouncements.length },
    { id: "projects", label: "Recent projects", count: d.recentProjects.length },
    { id: "facilities", label: "Facilities", count: d.facilities.length },
  ];

  return (
    <Page>
      <Breadcrumbs items={[{ name: "AI infrastructure", href: routes.ai() }]} className="pt-3" />
      <PageHeader
        eyebrow="Intelligence"
        title="AI infrastructure"
        description="Data centers and projects with evidence of AI / HPC use, ranked and counted only when a source says so. Counts and MW cover confirmed + likely sites; associated mentions are reported separately."
        aside={<PillLink href={routes.map("layer=ai")}>Open the AI layer on the map →</PillLink>}
      />

      <MetricRow cols={5}>
        <MetricCell>
          <Metric value={fmtInt(s.facilities)} label="AI facilities" note={`${fmtInt(s.confirmed)} confirmed · ${fmtInt(s.likely)} likely`} />
        </MetricCell>
        <MetricCell>
          <Metric value={fmtInt(s.projects)} label="AI projects" note="live project records" />
        </MetricCell>
        <MetricCell>
          <Metric value={<MwFigure mw={s.plannedMw} estimate />} label="Planned MW" note={s.plannedMw === null ? "no published figure" : "projects, published ≈ figures"} />
        </MetricCell>
        <MetricCell>
          <Metric value={<MwFigure mw={s.constructionMw} />} label="Construction MW" note={s.constructionMw === null ? "no published figure" : "under construction"} />
        </MetricCell>
        <MetricCell>
          <Metric value={fmtPct(s.mwCoverage)} label="MW coverage" note="share of AI records with a figure" />
        </MetricCell>
      </MetricRow>
      <MetricRow cols={3} className="border-t-0 [&>div]:border-t-0">
        <MetricCell>
          <Metric size="sm" value={fmtInt(s.countries)} label="Countries" />
        </MetricCell>
        <MetricCell>
          <Metric size="sm" value={fmtInt(s.operators)} label="Operators" />
        </MetricCell>
        <MetricCell>
          <Metric size="sm" value={fmtInt(s.associated)} label="Associated mentions" note="reported separately, not counted" />
        </MetricCell>
      </MetricRow>

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

      <div className="flex flex-col gap-8 pt-6">
        <Section id="evidence" title="Evidence levels" description="How a site earns the AI mark. Only confirmed and likely sites are counted above." className="scroll-mt-28">
          <ul className="divide-y divide-hair">
            {LEVELS.map((l) => (
              <li key={l.level} className="grid grid-cols-[auto_minmax(0,1fr)] items-start gap-x-3 py-2.5 sm:grid-cols-[140px_minmax(0,1fr)_120px]">
                <div className="pt-0.5">{l.level === "unknown" ? <span className="text-[11.5px] uppercase tracking-[0.06em] text-ink-4">Unknown</span> : <AiMark evidence={l.level} size="sm" />}</div>
                <p className="text-[13px] text-ink-2">
                  <span className="mr-1 font-medium text-ink">{AI_EVIDENCE_LABEL[l.level].replace("AI · ", "").replace(/^./, (c) => c.toUpperCase())}.</span>
                  {l.rule}
                </p>
                <span className={`col-start-2 text-[11.5px] sm:col-start-3 sm:text-right ${l.counted ? "text-ok" : "text-ink-4"}`}>{l.counted ? "counted" : "not counted"}</span>
              </li>
            ))}
          </ul>
          <ApiNote note={d.evidenceNote} label="From the index" className="mt-3" />
        </Section>

        <Section id="pipeline" title="Project pipeline by stage" description="AI project records by lifecycle stage; MW are planned, published figures (≈) and are never added to operational capacity." className="scroll-mt-28">
          {stages.length === 0 ? (
            <HonestEmpty title="No AI project in the pipeline" detail="projects appear when an announcement with AI evidence is ingested" />
          ) : (
            <ol className="divide-y divide-hair">
              {stages.map((st) => (
                <li key={st.status} className="grid grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-x-3 py-2 text-[13px]">
                  <div className="flex min-w-0 items-center gap-2">
                    <span aria-hidden className="inline-block size-2 shrink-0 rounded-full" style={{ background: statusVar(st.status) }} />
                    <span className="truncate text-ink">{STATUS_LABEL[st.status]}</span>
                    <span className="hidden h-[4px] min-w-[60px] flex-1 bg-surface-3 sm:block" aria-hidden>
                      <span className="block h-full" style={{ width: `${(st.count / stageMax) * 100}%`, background: statusVar(st.status) }} />
                    </span>
                  </div>
                  <span className="figure text-ink-2">
                    {fmtInt(st.count)} <span className="text-ink-4">{st.count === 1 ? "project" : "projects"}</span>
                  </span>
                  <span className="figure w-[96px] text-right text-ink-2">{st.mw === null ? <span className="text-ink-4">MW —</span> : <>≈ {fmtMw(st.mw)}</>}</span>
                </li>
              ))}
            </ol>
          )}
          <PublishedOnlyNote className="mt-2" />
        </Section>

        <Section id="top" title="Top operators, markets and countries" description="Ranked by confirmed + likely AI facilities and projects; planned MW shown when published." className="scroll-mt-28">
          <div className="grid gap-6 lg:grid-cols-3">
            <TopColumn title="Operators" rows={d.topOperators.map((o) => ({ key: o.id, label: o.name, href: routes.operator(o.slug), facilities: o.facilities, projects: o.projects, plannedMw: o.plannedMw }))} />
            <TopColumn title="Markets" rows={d.topMetros.map((m) => ({ key: m.id, label: m.name, href: routes.market(m.slug), facilities: m.facilities, projects: m.projects, plannedMw: m.plannedMw, iso2: m.countryIso2 }))} />
            <TopColumn title="Countries" rows={d.topCountries.map((c) => ({ key: c.iso2, label: c.name, href: routes.country(c.slug), facilities: c.facilities, projects: c.projects, plannedMw: c.plannedMw, iso2: c.iso2 }))} />
          </div>
        </Section>

        <Section id="announcements" title="New announcements" description="Events with AI evidence, newest first, each linked to its source." className="scroll-mt-28" aside={<Link href={routes.live("ai=1")} className="text-[12.5px] text-ink-3 hover:text-ink">Live feed (AI) →</Link>}>
          <EventList events={d.recentAnnouncements} dense emptyTitle="No AI announcement detected yet" emptyDescription="Announcements appear here when a source describes new AI / HPC capacity." />
        </Section>

        <Section id="projects" title="Recent projects" description="Latest AI project records." className="scroll-mt-28" aside={<Link href={routes.projects("ai=1")} className="text-[12.5px] text-ink-3 hover:text-ink">All AI projects →</Link>}>
          <ProjectList items={d.recentProjects} emptyTitle="No AI project yet" />
        </Section>

        <Section id="facilities" title="Facilities" description="Every facility flagged AI, with the evidence level per row." className="scroll-mt-28" aside={<span className="inline-flex items-center gap-2 text-[12px] text-ink-3"><span>MW coverage</span><CoverageBar value={s.mwCoverage} width="w-[110px]" /></span>}>
          <AiFacilitiesTable items={d.facilities} />
        </Section>
      </div>

      <SourcesFooter sources={r.sources} note="AI status is never inferred from a single keyword; each evidence level is backed by the sentence that supports it. MW figures are published, site-scoped and containment-aware." />
    </Page>
  );
}

function TopColumn({ title, rows }: { title: string; rows: Array<{ key: string; label: string; href: string; facilities: number; projects: number; plannedMw: number | null; iso2?: string | null }> }) {
  const total = rows.reduce((a, x) => a + x.facilities + x.projects, 0);
  return (
    <div>
      <div className="label-caps mb-2">{title}</div>
      {rows.length === 0 ? (
        <HonestEmpty title={`No ${title.toLowerCase()} yet`} />
      ) : (
        <ShareList unit="records" items={rows.map((x) => ({ key: x.key, label: x.label, href: x.href, count: x.facilities + x.projects, share: total ? (x.facilities + x.projects) / total : 0, mw: x.plannedMw, iso2: x.iso2 ?? null }))} />
      )}
      <p className="mt-1.5 text-[11px] text-ink-4">records = facilities + projects · MW = planned, published</p>
    </div>
  );
}