import type { Pulse } 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 { ApiNote, CounterGrid, HonestEmpty, type CounterItem } from "@/components/intelligence/shared";
import { Page, PageHeader, Section } from "@/components/ui/card";
import { CountryFlag } from "@/components/ui/country-flag";
import { SegmentedControl } from "@/components/ui/segmented";
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 { countryName, fmtDateTimeUtc, fmtInt } from "@/lib/format";
import { routes } from "@/lib/routes";
import { pageMetadata } from "@/lib/seo";

export const revalidate = 60;

type Window = Pulse["window"];
const WINDOWS: Array<{ value: Window; label: string; suffix: string }> = [
  { value: "24h", label: "24 h", suffix: "in the last 24 hours" },
  { value: "7d", label: "7 days", suffix: "in the last 7 days" },
  { value: "30d", label: "30 days", suffix: "in the last 30 days" },
];
const isWindow = (v: unknown): v is Window => v === "24h" || v === "7d" || v === "30d";

export const metadata: Metadata = pageMetadata({
  title: "Pulse",
  description: "What changed in the global data center index over the last 24 hours, 7 days or 30 days: new projects, construction starts, openings, announced MW, new markets, power and grid events — deterministic counts from detected changes.",
  path: routes.pulse(),
});

export default async function PulsePage({ searchParams }: { searchParams: Promise<Record<string, string | string[] | undefined>> }) {
  const sp = await searchParams;
  const raw = typeof sp.window === "string" ? sp.window : undefined;
  const window: Window = isWindow(raw) ? raw : "7d";
  const win = WINDOWS.find((w) => w.value === window)!;
  const r = await api.pulse(window);

  const header = (
    <PageHeader
      eyebrow="Intelligence"
      title="Pulse"
      description="Measurable changes over a window, counted from detected events and entity records. Every counter is a count, not a score."
      aside={<SegmentedControl label="Window" value={window} options={WINDOWS.map((w) => ({ value: w.value, label: w.label, href: w.value === "7d" ? routes.pulse() : routes.pulse(`window=${w.value}`) }))} />}
    />
  );

  if (!r.ok) {
    return (
      <Page className="py-6">
        <Breadcrumbs items={[{ name: "Pulse", href: routes.pulse() }]} />
        {header}
        <OfflineNotice detail={r.error} className="mb-4" />
        <ErrorState />
      </Page>
    );
  }
  const d = r.data;
  const methodology = typeof r.meta?.methodology === "string" ? r.meta.methodology : null;

  const counters: CounterItem[] = [
    { key: "newProjects", value: d.newProjects, label: "new projects detected", href: routes.projects() },
    { key: "projectsEnteredConstruction", value: d.projectsEnteredConstruction, label: "projects entered construction" },
    { key: "facilitiesOpened", value: d.facilitiesOpened, label: "facilities opened" },
    { key: "newlyAnnouncedMw", value: d.newlyAnnouncedMw, label: "of newly announced capacity (≈ planned)", format: "mw" },
    { key: "constructionStartedMw", value: d.constructionStartedMw, label: "of capacity started construction", format: "mw" },
    { key: "cloudRegionsAnnounced", value: d.cloudRegionsAnnounced, label: "cloud regions announced or launched", href: routes.cloudRegions() },
    { key: "powerAgreements", value: d.powerAgreements, label: "power agreements detected", href: routes.power() },
    { key: "gridConstraintEvents", value: d.gridConstraintEvents, label: "grid constraint events", href: routes.power() },
    { key: "acquisitions", value: d.acquisitions, label: "acquisitions detected", href: routes.live("type=acquisition") },
    { key: "financingEvents", value: d.financingEvents, label: "financing events" },
    { key: "newFacilitiesIndexed", value: d.newFacilitiesIndexed, label: "facilities newly indexed", note: "includes the initial import of a source when it falls in the window" },
    { key: "capacityChanges", value: d.capacityChanges, label: "capacity figures changed", href: routes.live("type=capacity_changed,planned_capacity_changed") },
    { key: "eventsTotal", value: d.eventsTotal, label: "changes detected in total", href: routes.live() },
  ];

  const sections = [
    { id: "counters", label: "Counters" },
    { id: "markets", label: "New markets", count: d.operatorsNewMarkets.length },
    { id: "major", label: "Major events", count: d.majorEvents.length },
    { id: "by-country", label: "By country", count: d.byCountry.length },
    { id: "by-operator", label: "By operator", count: d.byOperator.length },
  ];

  return (
    <Page>
      <Breadcrumbs items={[{ name: "Pulse", href: routes.pulse() }]} className="pt-3" />
      {header}
      <p className="figure mb-4 border-t border-hair pt-3 text-[12.5px] text-ink-3">
        Changes detected since {fmtDateTimeUtc(d.since)} · window {win.label}
      </p>

      <SectionNav items={sections} />

      <div className="flex flex-col gap-8 pt-6">
        <Section id="counters" title="What changed" description={`Deterministic counts ${win.suffix}. A dash means the figure is not published, never zero.`} className="scroll-mt-28">
          <CounterGrid items={counters} suffix={win.suffix} />
          <ApiNote note={methodology ?? "Counters are computed from detected events and entity records in the window; nothing is modelled or extrapolated."} label="Method" className="mt-3" />
        </Section>

        <Section id="markets" title="Operators entering new markets" description={`Operators whose first facility or project in a market or country was observed ${win.suffix}.`} className="scroll-mt-28">
          {d.operatorsNewMarkets.length === 0 ? (
            <HonestEmpty title="No new market entry detected" detail="an entry is recorded when an operator's first record in a market or country is observed" />
          ) : (
            <ul className="divide-y divide-hair">
              {d.operatorsNewMarkets.map((x, i) => (
                <li key={`${x.operator.id}-${x.market?.id ?? x.countryIso2 ?? i}`} className="flex flex-wrap items-center gap-x-2 gap-y-0 py-1 text-[13px] sm:py-2">
                  <Link href={routes.operator(x.operator.slug)} className="inline-flex min-h-10 items-center font-medium text-ink hover:text-accent hover:underline sm:min-h-6">
                    {x.operator.name}
                  </Link>
                  <span aria-hidden className="text-ink-4">
                    →
                  </span>
                  {x.market ? (
                    <Link href={routes.market(x.market.slug)} className="inline-flex min-h-10 items-center gap-1.5 text-ink-2 hover:text-ink hover:underline sm:min-h-6">
                      {x.countryIso2 && <CountryFlag iso2={x.countryIso2} size={12} />}
                      {x.market.name}
                    </Link>
                  ) : x.countryIso2 ? (
                    <Link href={routes.datacenters(`country=${x.countryIso2}`)} title="Facilities in this country" className="inline-flex min-h-10 items-center gap-1.5 text-ink-2 hover:text-ink hover:underline sm:min-h-6">
                      <CountryFlag iso2={x.countryIso2} size={12} />
                      {countryName(x.countryIso2)} <span className="text-ink-4">(country, no market)</span>
                    </Link>
                  ) : (
                    <span className="text-ink-4">market unknown</span>
                  )}
                </li>
              ))}
            </ul>
          )}
        </Section>

        <Section id="major" title="Major events" description="Highest-significance changes in the window, one row per announcement cluster." className="scroll-mt-28" aside={<Link href={routes.live("significance=major")} className="text-[12.5px] text-ink-3 hover:text-ink">All major changes →</Link>}>
          <EventList events={d.majorEvents} dense emptyTitle="No major event in this window" emptyDescription="Try a longer window." />
        </Section>

        <Section id="by-country" title="By country" description="Detected changes and new projects per country in the window." className="scroll-mt-28">
          {d.byCountry.length === 0 ? (
            <HonestEmpty title="No change attributed to a country" />
          ) : (
            <Table dense mobileCollapse={{ total: d.byCountry.length, label: "countries" }}>
              <THead>
                <tr>
                  <Th>Country</Th>
                  <Th numeric>Changes</Th>
                  <Th numeric>New projects</Th>
                </tr>
              </THead>
              <TBody>
                {d.byCountry.map((c) => (
                  <Tr key={c.iso2}>
                    <Td primary>
                      <RowLink href={routes.country(c.slug)}>
                        <span className="inline-flex items-center gap-1.5">
                          <CountryFlag iso2={c.iso2} size={12} />
                          {c.name}
                        </span>
                      </RowLink>
                    </Td>
                    <Td label="Changes" numeric lead>
                      {fmtInt(c.events)}
                    </Td>
                    <Td label="New projects" numeric>
                      {fmtInt(c.newProjects)}
                    </Td>
                  </Tr>
                ))}
              </TBody>
            </Table>
          )}
        </Section>

        <Section id="by-operator" title="By operator" description="Operators with the most detected changes in the window." className="scroll-mt-28">
          {d.byOperator.length === 0 ? (
            <HonestEmpty title="No change attributed to an operator" />
          ) : (
            <Table dense mobileCollapse={{ total: d.byOperator.length, label: "operators" }}>
              <THead>
                <tr>
                  <Th>Operator</Th>
                  <Th numeric>Changes</Th>
                  <Th numeric>New projects</Th>
                </tr>
              </THead>
              <TBody>
                {d.byOperator.map((o) => (
                  <Tr key={o.id}>
                    <Td primary>
                      <RowLink href={routes.operator(o.slug)}>{o.name}</RowLink>
                    </Td>
                    <Td label="Changes" numeric lead>
                      {fmtInt(o.events)}
                    </Td>
                    <Td label="New projects" numeric>
                      {fmtInt(o.newProjects)}
                    </Td>
                  </Tr>
                ))}
              </TBody>
            </Table>
          )}
        </Section>
      </div>

      <SourcesFooter sources={r.sources} note="Pulse counts are derived from the change feed (events deduplicated per entity and day) and entity records; they are recomputed on every request window and never smoothed." />
    </Page>
  );
}