import type { Dashboard } from "@dci/core";
import { ExternalLink } from "lucide-react";
import type { Metadata } from "next";
import Link from "next/link";
import { EventList } from "@/components/event-list";
import { CapacityOverTime } from "@/components/home/charts";
import { HeroSearch } from "@/components/home/hero";
import { MapPreview } from "@/components/home/map-preview";
import { PipelineFunnel } from "@/components/home/pipeline-funnel";
import { PulseBlock } from "@/components/home/pulse";
import { GlobalTicker } from "@/components/home/ticker";
import { ProjectList } from "@/components/project-list";
import { AiMark, Badge } from "@/components/ui/badge";
import { MoreLink } from "@/components/ui/button";
import { Page, Section } from "@/components/ui/card";
import { BarList } from "@/components/ui/charts";
import { CountryFlag } from "@/components/ui/country-flag";
import { RelativeTime } from "@/components/ui/relative-time";
import { SourceBadge } from "@/components/ui/source-badge";
import { EmptyState, OfflineNotice } from "@/components/ui/states";
import { TBody, THead, Table, Td, Th, Tr } from "@/components/ui/table";
import { api } from "@/lib/api";
import { fmtDate, fmtInt, fmtMw, fmtPct, splitMw } from "@/lib/format";
import { isSiteScopeLabel } from "@/lib/labels";
import { routes } from "@/lib/routes";

export const revalidate = 60;

export const metadata: Metadata = {
  title: { absolute: "DataCenterIndex — Global data center infrastructure, indexed and versioned" },
  description: "Facilities, operators, cloud regions, markets, countries, projects, power and connectivity — every figure sourced, versioned and tracked in a live change feed. Known operational capacity, construction pipeline, AI expansion, coverage.",
  alternates: { canonical: "/" },
};

function Cell({ label, value, unit, note, href }: { label: string; value: string; unit?: string; note?: string; href?: string }) {
  const body = (
    <>
      <div className="label-caps mb-1 truncate">{label}</div>
      <div className="flex items-baseline gap-1 leading-none">
        <span className="figure text-[20px] font-medium tracking-[-0.02em] text-ink">{value}</span>
        {unit && <span className="text-[11px] font-medium text-ink-3">{unit}</span>}
      </div>
      {note && <div className="mt-1 text-[11px] leading-tight text-ink-3">{note}</div>}
    </>
  );
  return href ? (
    <Link href={href} className="block min-w-0 py-2 pr-3 hover:[&_.figure]:text-accent">
      {body}
    </Link>
  ) : (
    <div className="min-w-0 py-2 pr-3">{body}</div>
  );
}

export default async function HomePage() {
  const r0 = await api.dashboard();
  // tolerate an older API payload (image builds prerender against the live API): every 2.0 block is optional
  const r = r0.ok && r0.data ? { ...r0, data: { ...r0.data, pulse: r0.data.pulse ?? null, fastestGrowingMetros: r0.data.fastestGrowingMetros ?? [], majorProjects: r0.data.majorProjects ?? [], operatorExpansion: r0.data.operatorExpansion ?? [], powerEvents: r0.data.powerEvents ?? [], gridConstraints: r0.data.gridConstraints ?? [], coverage: r0.data.coverage ?? null, ingestion: r0.data.ingestion ?? null } as typeof r0.data } : r0;
  const d: Dashboard | null = r.ok ? r.data : null;
  const stats = d?.stats ?? null;
  const cov = d?.coverage ?? null;
  const ing = d?.ingestion ?? null;
  const major = (d?.majorProjects ?? []).filter((p) => p.plannedMw !== null && p.plannedMw >= 100 && (p.capacityScope == null || isSiteScopeLabel(p.capacityScope)));
  const aiMw = splitMw(d?.aiExpansion.plannedMw);

  return (
    <Page>
      {/* ---------------------------------------------------------------- hero + live map */}
      <section className="relative -mx-3 border-b border-hair px-3 pt-6 sm:-mx-5 sm:px-5 sm:pt-9 lg:-mx-8 lg:px-8">
        <div aria-hidden className="graticule pointer-events-none absolute inset-0" />
        <div className="relative mx-auto max-w-[1280px]">
          <div className="label-caps mb-3 flex items-center gap-2">
            <span className="inline-block size-1.5 rounded-full bg-accent animate-pulse-soft" /> Live index
            {ing?.lastRunAt && (
              <span className="normal-case tracking-normal text-ink-4">
                · last ingestion <RelativeTime iso={ing.lastRunAt} />
              </span>
            )}
          </div>
          <h1 className="max-w-4xl text-[26px] font-semibold uppercase leading-[1.05] tracking-[0.01em] text-ink sm:text-[38px] lg:text-[44px]">Global data center infrastructure</h1>
          <p className="mt-3 max-w-2xl text-[14px] text-ink-2 sm:text-[15.5px]">The structured index of facilities, campuses, operators, cloud regions, markets, projects, power and connectivity — every figure published, sourced, versioned and tracked in a live change feed.</p>
          <HeroSearch />
          <div className="mt-6">
            {!r.ok && <OfflineNotice detail={r.error} className="mb-3" />}
            <GlobalTicker stats={stats} className="bg-paper/70 backdrop-blur-[1px]" />
          </div>
        </div>
        <div className="relative mx-auto max-w-[1280px] pb-6 pt-3 sm:pb-8">
          <MapPreview interactive className="h-[300px] sm:h-[420px] lg:h-[460px]">
            <div className="pointer-events-none absolute left-3 top-3 z-[2] flex flex-wrap gap-1.5 text-[11.5px]">
              <span className="rounded-xs border border-hair bg-surface/95 px-2 py-1 text-ink-2 backdrop-blur">{stats ? `${fmtInt(stats.facilities)} facilities · ${fmtInt(stats.countries)} countries · ${fmtInt(stats.metros)} markets` : "Clustered by market"}</span>
              <span className="rounded-xs border border-hair bg-surface/95 px-2 py-1 text-ink-3 backdrop-blur">size = known MW · hollow ring = city-level location</span>
            </div>
          </MapPreview>
        </div>
      </section>

      <div className="flex flex-col gap-10 pt-8">
        {/* ---------------------------------------------------------------- what changed today */}
        <Section title="What changed today" description={d?.pulse ? `Deterministic counts over the last ${d.pulse.window === "24h" ? "24 hours" : d.pulse.window}, from ${fmtInt(d.pulse.eventsTotal)} deduplicated events.` : "Deterministic counts from the deduplicated event feed."} aside={<MoreLink href={routes.pulse()}>Full pulse</MoreLink>}>
          {d?.pulse ? <PulseBlock pulse={d.pulse} /> : <EmptyState compact title="Pulse unavailable" />}
        </Section>

        <div className="grid gap-x-8 gap-y-10 lg:grid-cols-2 [&>*]:min-w-0">
          {/* ---------------------------------------------------------------- AI expansion */}
          <Section
            title={
              <span className="inline-flex items-center gap-2">
                AI infrastructure expansion <AiMark size="sm" />
              </span>
            }
            description="Facilities and projects with AI / HPC evidence (confirmed, likely or associated) — published MW only."
            aside={<MoreLink href={routes.ai()}>AI index</MoreLink>}
          >
            <div className="grid grid-cols-3 divide-x divide-hair [&>*+*]:pl-3">
              <Cell label="AI facilities" value={d ? fmtInt(d.aiExpansion.facilities) : "—"} href={routes.datacenters("ai=1")} />
              <Cell label="AI projects" value={d ? fmtInt(d.aiExpansion.projects) : "—"} href={routes.projects("ai=1")} />
              <Cell label="Planned (≈)" value={aiMw?.value ?? "—"} unit={aiMw?.unit ?? "MW"} note="published figures only" />
            </div>
            <div className="mt-3">
              <ProjectList items={(d?.aiExpansion.recent ?? []).slice(0, 5)} emptyTitle="No AI project yet" emptyDescription="Projects with AI / HPC evidence will list here." />
            </div>
          </Section>

          {/* ---------------------------------------------------------------- construction pipeline */}
          <Section title="Construction pipeline" description="Projects by lifecycle stage with the sum of published MW — company-wide totals are never summed." aside={<MoreLink href={routes.projects()}>Pipeline</MoreLink>}>
            {d ? <PipelineFunnel data={{ byStatus: d.projectsByStatus, openedLast12m: null }} compact /> : <EmptyState compact title="Pipeline unavailable" />}
          </Section>

          {/* ---------------------------------------------------------------- fastest-growing markets */}
          <Section title="Fastest-growing markets" description="Momentum components over 12 months, shown separately — never collapsed into a score." aside={<MoreLink href={routes.markets()}>Markets</MoreLink>}>
            {d?.fastestGrowingMetros.length ? (
              <Table dense>
                <THead>
                  <tr>
                    <Th>Market</Th>
                    <Th numeric>Announced</Th>
                    <Th numeric>In constr.</Th>
                    <Th numeric className="hidden sm:table-cell">
                      Announced MW
                    </Th>
                    <Th numeric className="hidden md:table-cell">
                      Entrants
                    </Th>
                    <Th numeric className="hidden md:table-cell">
                      Grid ev.
                    </Th>
                  </tr>
                </THead>
                <TBody>
                  {d.fastestGrowingMetros.slice(0, 8).map((m) => (
                    <Tr key={m.id}>
                      <Td primary>
                        <Link href={routes.market(m.slug)} className="inline-flex items-center gap-1.5 font-medium text-ink hover:text-accent hover:underline">
                          <CountryFlag iso2={m.countryIso2} size={12} /> {m.name}
                        </Link>
                      </Td>
                      <Td label="Announced" numeric lead>
                        {fmtInt(m.momentum.projectsAnnounced)}
                      </Td>
                      <Td label="In construction" numeric>
                        {fmtInt(m.momentum.projectsEnteredConstruction)}
                      </Td>
                      <Td label="Announced MW" numeric className="hidden sm:table-cell">
                        {m.momentum.announcedMw !== null ? `≈ ${fmtMw(m.momentum.announcedMw)}` : "—"}
                      </Td>
                      <Td label="New entrants" numeric className="hidden md:table-cell">
                        {fmtInt(m.momentum.newEntrants.length)}
                      </Td>
                      <Td label="Grid events" numeric className="hidden md:table-cell">
                        {fmtInt(m.momentum.gridEvents)}
                      </Td>
                    </Tr>
                  ))}
                </TBody>
              </Table>
            ) : (
              <EmptyState compact title="Momentum not computed yet" />
            )}
          </Section>

          {/* ---------------------------------------------------------------- major projects */}
          <Section title="Major projects" description="Site-scoped published planned capacity of 100 MW or more (≈ as announced)." aside={<MoreLink href={routes.projects("min_mw=100&sort=mw")}>All ≥ 100 MW</MoreLink>}>
            <ProjectList items={major.slice(0, 8)} emptyTitle="No ≥ 100 MW project with a site-scoped figure" emptyDescription="Company-wide totals are kept as evidence and never shown as a project's MW." />
          </Section>

          {/* ---------------------------------------------------------------- operator expansion */}
          <Section title="Operator expansion" description="Operators entering new countries or markets, with projects announced over 12 months." aside={<MoreLink href={routes.operators()}>Operators</MoreLink>}>
            {d?.operatorExpansion.length ? (
              <ul className="divide-y divide-hair">
                {d.operatorExpansion.slice(0, 8).map((o) => (
                  <li key={o.operator.id} className="grid grid-cols-[minmax(0,1fr)_auto] items-baseline gap-x-3 py-2">
                    <div className="min-w-0">
                      <Link href={routes.operator(o.operator.slug)} className="text-[13.5px] font-medium text-ink hover:text-accent hover:underline">
                        {o.operator.name}
                      </Link>
                      <div className="mt-0.5 truncate text-[12px] text-ink-3">
                        {o.newCountries.length ? (
                          <span className="inline-flex items-center gap-1">
                            {o.newCountries.slice(0, 6).map((c) => (
                              <CountryFlag key={c} iso2={c} size={11} />
                            ))}
                            {o.newCountries.length > 6 && <span>+{o.newCountries.length - 6}</span>}
                          </span>
                        ) : null}
                        {o.newMetros.length > 0 && <span className="ml-1.5">{o.newMetros.slice(0, 3).join(", ")}{o.newMetros.length > 3 ? ` +${o.newMetros.length - 3}` : ""}</span>}
                      </div>
                    </div>
                    <div className="figure text-right text-[12px] text-ink-2">
                      <div>
                        {fmtInt(o.newCountries.length)} <span className="text-ink-4">countries</span>
                      </div>
                      <div>
                        {fmtInt(o.newMetros.length)} <span className="text-ink-4">markets</span> · {fmtInt(o.projects12m)} <span className="text-ink-4">prj</span>
                      </div>
                    </div>
                  </li>
                ))}
              </ul>
            ) : (
              <EmptyState compact title="No expansion detected yet" />
            )}
          </Section>

          {/* ---------------------------------------------------------------- power / grid */}
          <Section title="Power / grid events" description="Power agreements, utility events and public grid constraints — attached to markets or countries, never to a site." aside={<MoreLink href={routes.power()}>Power & grid</MoreLink>}>
            <EventList events={(d?.powerEvents ?? []).slice(0, 5)} dense emptyTitle="No power event yet" />
            {d?.gridConstraints.length ? (
              <div className="mt-3 border-t border-hair pt-3">
                <div className="label-caps mb-1.5">Grid constraints</div>
                <ul className="divide-y divide-hair text-[12.5px]">
                  {d.gridConstraints.slice(0, 4).map((g) => (
                    <li key={g.id} className="flex flex-wrap items-baseline gap-x-2 py-1.5">
                      <Badge tone="outline" size="xs">
                        {g.kind.replace(/_/g, " ")}
                      </Badge>
                      <a href={g.url} target="_blank" rel="noopener noreferrer" className="min-w-0 flex-1 truncate font-medium text-ink hover:text-accent">
                        {g.title}
                      </a>
                      {g.sourceKind && <SourceBadge kind={g.sourceKind} name={g.sourceName} url={g.url} />}
                      <span className="figure text-[11px] text-ink-3">{fmtDate(g.effectiveDate)}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ) : null}
          </Section>

          {/* ---------------------------------------------------------------- cloud / connectivity */}
          <Section title="Cloud / connectivity" description="Public cloud regions and internet exchanges — providers publish the metro, not the building." aside={<MoreLink href={routes.connectivity()}>Connectivity</MoreLink>}>
            <div className="grid grid-cols-3 divide-x divide-hair [&>*+*]:pl-3">
              <Cell label="Cloud regions" value={stats ? fmtInt(stats.cloudRegions) : "—"} href={routes.cloudRegions()} />
              <Cell label="Internet exchanges" value={stats ? fmtInt(stats.ixps) : "—"} href={routes.ixps()} />
              <Cell label="Connectivity known" value={cov ? fmtPct(cov.connectivityCoverage) : "—"} note="facilities with carriers / IXPs" href={routes.coverage()} />
            </div>
            <div className="mt-3">
              <div className="label-caps mb-2">Largest markets · known operational MW</div>
              {d?.topMetros?.length ? (
                <BarList
                  items={d.topMetros.slice(0, 6).map((m) => ({ rank: m.rank, label: <span className="inline-flex items-center gap-1.5"><CountryFlag iso2={m.countryIso2} size={12} />{m.name}</span>, value: m.value, href: m.href || routes.market(m.slug), coverage: m.coverage, secondary: m.coverage != null ? `${fmtPct(m.coverage)} MW coverage` : undefined, display: fmtMw(m.value) }))}
                />
              ) : (
                <EmptyState compact title="Rankings not computed yet" />
              )}
            </div>
          </Section>
        </div>

        {/* ---------------------------------------------------------------- capacity over time */}
        <Section title="Known operational capacity over time" description="Cumulative published MW by opening year — only facilities with both a figure and an opening date; earlier years are lower bounds." aside={<MoreLink href={routes.timeMachine()}>Time machine</MoreLink>}>
          <CapacityOverTime data={d?.capacityOverTime ?? []} />
        </Section>

        {/* ---------------------------------------------------------------- coverage · transparency · ingestion */}
        <div className="grid gap-x-8 gap-y-8 border-t border-hair pt-6 lg:grid-cols-3">
          <div>
            <div className="mb-2 flex items-baseline justify-between">
              <h2 className="text-[14px] font-semibold text-ink">Data coverage</h2>
              <MoreLink href={routes.coverage()}>Coverage</MoreLink>
            </div>
            {cov ? (
              <dl className="divide-y divide-hair text-[12.5px]">
                {[
                  ["Capacity (MW) published", cov.capacityCoverage],
                  ["Operator known", cov.operatorCoverage],
                  ["Precise location", cov.preciseLocationCoverage],
                  ["Any location", cov.anyLocationCoverage],
                  ["Status known", cov.statusCoverage],
                  ["Opening date known", cov.openingDateCoverage],
                  ["Multiple sources", cov.multiSourceCoverage],
                  ["Connectivity known", cov.connectivityCoverage],
                ].map(([k, v]) => (
                  <div key={String(k)} className="flex items-center justify-between gap-3 py-1.5">
                    <dt className="text-ink-2">{k}</dt>
                    <dd className="flex items-center gap-2">
                      <span className="inline-block h-[3px] w-16 bg-surface-3">
                        <span className="block h-full bg-ink-2" style={{ width: `${Math.max(1, Math.round((v as number) * 100))}%` }} />
                      </span>
                      <span className="figure w-10 text-right text-ink">{fmtPct(v as number, (v as number) < 0.1 ? 1 : 0)}</span>
                    </dd>
                  </div>
                ))}
              </dl>
            ) : (
              <EmptyState compact title="Coverage unavailable" />
            )}
            <p className="mt-2 text-[11px] text-ink-4">Share of {cov ? fmtInt(cov.facilities) : ""} indexed facilities. Gaps are shown, never filled.</p>
          </div>
          <div>
            <div className="mb-2 flex items-baseline justify-between">
              <h2 className="text-[14px] font-semibold text-ink">Source transparency</h2>
              <MoreLink href={routes.sources()}>Sources</MoreLink>
            </div>
            <div className="grid grid-cols-2 divide-x divide-hair [&>*+*]:pl-3">
              <Cell label="Sources" value={stats ? fmtInt(stats.sources) : "—"} href={routes.sources()} />
              <Cell label="Archived documents" value={stats ? fmtInt(stats.documents) : "—"} />
              <Cell label="Primary-source share" value={cov ? fmtPct(cov.primarySourceShare) : "—"} note="operator, government, utility, filing" />
              <Cell label="Projects located" value={cov ? `${fmtInt(cov.projectsWithLocation)} / ${fmtInt(cov.projects)}` : "—"} note="with published coordinates" />
            </div>
            <p className="mt-2 text-[12px] text-ink-3">
              Every field carries its source, dates, confidence and extraction method; every figure opens an evidence drawer with the supporting sentence.{" "}
              <Link href={routes.methodology()} className="underline decoration-hair-2 hover:text-ink">
                Methodology
              </Link>{" "}
              ·{" "}
              <Link href={routes.download()} className="underline decoration-hair-2 hover:text-ink">
                Downloads
              </Link>{" "}
              ·{" "}
              <Link href={routes.apiDocsPage()} className="underline decoration-hair-2 hover:text-ink">
                API
              </Link>
            </p>
          </div>
          <div>
            <div className="mb-2 flex items-baseline justify-between">
              <h2 className="text-[14px] font-semibold text-ink">Latest ingestion</h2>
              <MoreLink href={routes.live()}>Live feed</MoreLink>
            </div>
            {ing ? (
              <>
                <div className="grid grid-cols-2 divide-x divide-hair [&>*+*]:pl-3">
                  <Cell label="Last run" value={ing.lastRunAt ? fmtDate(ing.lastRunAt) : "—"} note={ing.lastRunAt ? "UTC" : undefined} />
                  <Cell label="Runs · 24 h" value={fmtInt(ing.runs24h)} />
                  <Cell label="Documents · 24 h" value={fmtInt(ing.documents24h)} note="fetched, archived, diffed" />
                  <Cell label="Connectors healthy" value={`${fmtInt(ing.connectorsHealthy)} / ${fmtInt(ing.connectorsTotal)}`} note={ing.connectorsTotal ? fmtPct(ing.connectorsHealthy / ing.connectorsTotal) : undefined} />
                </div>
                <p className="mt-2 text-[12px] text-ink-3">
                  {fmtInt(ing.events24h)} events detected in 24 h. Pipeline: discover → fetch → archive → extract → normalize → reconcile → validate → version → detect changes → publish.{" "}
                  <Link href={routes.bot()} className="inline-flex items-center gap-1 underline decoration-hair-2 hover:text-ink">
                    Crawler policy <ExternalLink className="size-3" />
                  </Link>
                </p>
              </>
            ) : (
              <EmptyState compact title="Ingestion status unavailable" />
            )}
          </div>
        </div>
      </div>

      <p className="mt-8 border-t border-hair pt-4 text-[11.5px] text-ink-3">
        {stats ? <>MW figures are published for {fmtPct(stats.mwCoverage)} of indexed facilities; every total is a lower bound computed from sourced figures — nothing is extrapolated or imputed. </> : <>Totals are lower bounds computed from sourced figures only; nothing is extrapolated. </>}
        <Link href={routes.methodology()} className="text-ink-2 underline decoration-hair-2 hover:text-ink">
          How the index is built
        </Link>
        .
      </p>
    </Page>
  );
}