import type { CloudRegionSummary } 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 { Bars } from "@/components/intelligence/client-charts";
import { ApiNote, CoverageBar, HonestEmpty, PillLink } from "@/components/intelligence/shared";
import { Page, PageHeader, Section } from "@/components/ui/card";
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, placeLine } from "@/lib/format";
import { routes } from "@/lib/routes";
import { pageMetadata } from "@/lib/seo";

export const revalidate = 120;

export const metadata: Metadata = pageMetadata({
  title: "Connectivity",
  description: "Internet exchanges, cloud regions by provider, carrier hotels and connectivity density by market — from published IXP↔facility links and provider region lists. Submarine cable landing stations are listed only once a licensed source exists.",
  path: routes.connectivity(),
});

const IXP_LIMIT = 50;

export default async function ConnectivityPage() {
  const r = await api.connectivity();
  if (!r.ok) {
    return (
      <Page className="py-6">
        <Breadcrumbs items={[{ name: "Connectivity", href: routes.connectivity() }]} className="mb-4" />
        <OfflineNotice detail={r.error} className="mb-4" />
        <ErrorState />
      </Page>
    );
  }
  const d = r.data;
  const ixps = [...d.ixps].sort((a, b) => b.facilityCount - a.facilityCount).slice(0, IXP_LIMIT);

  // cloud regions grouped by provider
  const byProvider = new Map<string, { provider: CloudRegionSummary["provider"]; regions: CloudRegionSummary[] }>();
  for (const cr of d.cloudRegions) {
    const g = byProvider.get(cr.provider.id) ?? { provider: cr.provider, regions: [] };
    g.regions.push(cr);
    byProvider.set(cr.provider.id, g);
  }
  const providers = Array.from(byProvider.values()).sort((a, b) => b.regions.length - a.regions.length);
  const statusSplit = (regions: CloudRegionSummary[]) => {
    const c: Record<string, number> = {};
    for (const x of regions) c[x.status] = (c[x.status] ?? 0) + 1;
    return Object.entries(c)
      .sort((a, b) => b[1] - a[1])
      .map(([k, v]) => `${v} ${k}`)
      .join(" · ");
  };
  const metrosCovered = d.byMetro.filter((m) => m.ixps > 0 || m.cloudRegions > 0 || m.facilitiesWithCarriers > 0).length;

  const sections = [
    { id: "ixps", label: "Internet exchanges", count: ixps.length },
    { id: "cloud", label: "Cloud regions", count: providers.length },
    { id: "carrier-hotels", label: "Carrier hotels", count: d.carrierHotels.length },
    { id: "metros", label: "By market", count: d.byMetro.length },
    { id: "landing", label: "Landing stations" },
  ];

  return (
    <Page>
      <Breadcrumbs items={[{ name: "Connectivity", href: routes.connectivity() }]} className="pt-3" />
      <PageHeader eyebrow="Intelligence" title="Connectivity" description="Where networks meet: internet exchanges, public cloud regions, carrier-dense facilities and the markets that concentrate them." aside={<PillLink href={routes.map("layer=connectivity")}>Connectivity layer on the map →</PillLink>} />

      <MetricRow cols={5}>
        <MetricCell>
          <Metric value={fmtInt(d.ixps.length)} label="Internet exchanges" note="with facility links" />
        </MetricCell>
        <MetricCell>
          <Metric value={fmtInt(d.cloudRegions.length)} label="Cloud regions" note={`${fmtInt(providers.length)} providers`} />
        </MetricCell>
        <MetricCell>
          <Metric value={fmtInt(d.carrierHotels.length)} label="Carrier hotels" note="type carrier hotel or ≥ 20 carriers" />
        </MetricCell>
        <MetricCell>
          <Metric value={fmtInt(metrosCovered)} label="Markets covered" note={`of ${fmtInt(d.byMetro.length)} listed`} />
        </MetricCell>
        <MetricCell>
          <Metric value={fmtInt(d.landingStations.length)} label="Landing stations" note={d.landingStations.length === 0 ? "no licensed connector yet" : "licensed source"} />
        </MetricCell>
      </MetricRow>
      <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="ixps" title="Internet exchanges" description={`Top ${fmtInt(ixps.length)} by facilities where the exchange is present. Network counts are shown only when published.`} className="scroll-mt-28" aside={<Link href={routes.ixps()} className="text-[12.5px] text-ink-3 hover:text-ink">All exchanges →</Link>}>
          {ixps.length === 0 ? (
            <HonestEmpty title="No internet exchange linked to a facility yet" />
          ) : (
            <Table dense mobileCollapse={{ total: ixps.length, label: "exchanges" }}>
              <THead>
                <tr>
                  <Th>Exchange</Th>
                  <Th>Country</Th>
                  <Th className="hidden md:table-cell">Market</Th>
                  <Th numeric className="hidden sm:table-cell">
                    Networks
                  </Th>
                  <Th numeric>Facilities</Th>
                  <Th numeric className="hidden sm:table-cell">
                    Operators
                  </Th>
                </tr>
              </THead>
              <TBody>
                {ixps.map((x) => (
                  <Tr key={x.id}>
                    <Td primary>
                      <RowLink href={routes.ixp(x.slug)}>{x.name}</RowLink>
                      {x.nameLong && x.nameLong !== x.name && <div className="hidden text-[11.5px] text-ink-3 sm:block">{x.nameLong}</div>}
                    </Td>
                    <Td label="Country">
                      <CountryFlag iso2={x.countryIso2} withName className="max-w-[140px] text-ink-2" />
                    </Td>
                    <Td label="Market" className="hidden md:table-cell" muted>
                      {x.metro ? (
                        <Link href={routes.market(x.metro.slug)} className="hover:text-ink hover:underline">
                          {x.metro.name}
                        </Link>
                      ) : (
                        (x.city ?? "—")
                      )}
                    </Td>
                    <Td label="Networks" numeric className="hidden sm:table-cell">
                      {x.networkCount === null ? <span className="text-ink-4">—</span> : fmtInt(x.networkCount)}
                    </Td>
                    <Td label="Facilities" numeric lead>
                      {fmtInt(x.facilityCount)}
                    </Td>
                    <Td label="Operators" numeric className="hidden sm:table-cell">
                      {fmtInt(x.operatorCount)}
                    </Td>
                  </Tr>
                ))}
              </TBody>
            </Table>
          )}
        </Section>

        <Section id="cloud" title="Cloud regions by provider" description="Public cloud regions as published by each provider; regions are associated with a market, not a facility, unless a source says so." className="scroll-mt-28" aside={<Link href={routes.cloudRegions()} className="text-[12.5px] text-ink-3 hover:text-ink">All cloud regions →</Link>}>
          {providers.length === 0 ? (
            <HonestEmpty title="No cloud region indexed" />
          ) : (
            <Bars
              showRank={false}
              items={providers.map((p) => ({
                label: p.provider.name,
                value: p.regions.length,
                href: `${routes.cloudRegions()}?provider=${encodeURIComponent(p.provider.slug)}`,
                secondary: statusSplit(p.regions),
                display: `${fmtInt(p.regions.length)} ${p.regions.length === 1 ? "region" : "regions"}`,
              }))}
            />
          )}
        </Section>

        <Section id="carrier-hotels" title="Carrier hotels" description="Facilities typed carrier hotel or with ≥ 20 published carriers, by carrier count." className="scroll-mt-28">
          {d.carrierHotels.length === 0 ? (
            <HonestEmpty title="No carrier hotel identified" detail="carrier counts come from published facility pages and registries" />
          ) : (
            <Table dense mobileCollapse={{ total: d.carrierHotels.length, label: "facilities" }}>
              <THead>
                <tr>
                  <Th>Facility</Th>
                  <Th className="hidden sm:table-cell">Operator</Th>
                  <Th>Location</Th>
                  <Th numeric>Carriers</Th>
                  <Th numeric className="hidden sm:table-cell">
                    IXPs
                  </Th>
                </tr>
              </THead>
              <TBody>
                {d.carrierHotels.map((f) => (
                  <Tr key={f.id}>
                    <Td primary>
                      <RowLink href={routes.facility(f.slug)}>{f.name}</RowLink>
                      <div className="text-[11.5px] text-ink-3 sm:hidden">{f.operator?.name ?? "Operator unknown"}</div>
                    </Td>
                    <Td label="Operator" className="hidden sm:table-cell">
                      {f.operator ? (
                        <Link href={routes.operator(f.operator.slug)} className="text-ink-2 hover:text-ink hover:underline">
                          {f.operator.name}
                        </Link>
                      ) : (
                        <span className="text-ink-4">—</span>
                      )}
                    </Td>
                    <Td label="Location" muted>
                      <span className="inline-flex items-center gap-1.5">
                        <CountryFlag iso2={f.countryIso2} size={12} />
                        <span className="truncate">{placeLine(f)}</span>
                      </span>
                    </Td>
                    <Td label="Carriers" numeric lead>
                      {f.carriersCount === null || f.carriersCount === undefined ? <span className="text-ink-4">—</span> : fmtInt(f.carriersCount)}
                    </Td>
                    <Td label="IXPs" numeric className="hidden sm:table-cell">
                      {f.ixpCount === null || f.ixpCount === undefined ? <span className="text-ink-4">—</span> : fmtInt(f.ixpCount)}
                    </Td>
                  </Tr>
                ))}
              </TBody>
            </Table>
          )}
        </Section>

        <Section id="metros" title="By market" description="Exchanges, cloud regions and the share of facilities with published carriers, per market." className="scroll-mt-28">
          {d.byMetro.length === 0 ? (
            <HonestEmpty title="No market with connectivity data" />
          ) : (
            <Table dense mobileCollapse={{ total: d.byMetro.length, label: "markets" }}>
              <THead>
                <tr>
                  <Th>Market</Th>
                  <Th numeric>IXPs</Th>
                  <Th numeric>Cloud regions</Th>
                  <Th className="hidden sm:table-cell">Facilities with carriers</Th>
                  <Th numeric className="hidden md:table-cell">
                    Facilities
                  </Th>
                </tr>
              </THead>
              <TBody>
                {d.byMetro.map((m) => (
                  <Tr key={m.id}>
                    <Td primary>
                      <RowLink href={routes.market(m.slug)}>
                        <span className="inline-flex items-center gap-1.5">
                          <CountryFlag iso2={m.countryIso2} size={12} />
                          {m.name}
                        </span>
                      </RowLink>
                    </Td>
                    <Td label="IXPs" numeric lead>
                      {fmtInt(m.ixps)}
                    </Td>
                    <Td label="Cloud regions" numeric>
                      {fmtInt(m.cloudRegions)}
                    </Td>
                    <Td label="Facilities with carriers" className="hidden sm:table-cell">
                      <span className="inline-flex items-center gap-2">
                        <CoverageBar value={m.facilities ? m.facilitiesWithCarriers / m.facilities : null} width="w-[110px]" label="Facilities with published carriers" />
                        <span className="figure text-[11.5px] text-ink-3">
                          {fmtInt(m.facilitiesWithCarriers)}/{fmtInt(m.facilities)}
                        </span>
                      </span>
                    </Td>
                    <Td label="Facilities" numeric className="hidden md:table-cell">
                      {fmtInt(m.facilities)}
                    </Td>
                  </Tr>
                ))}
              </TBody>
            </Table>
          )}
        </Section>

        <Section id="landing" title="Submarine cable landing stations" description="Listed only from a licensed source." className="scroll-mt-28">
          {d.landingStations.length === 0 ? (
            <HonestEmpty title="No landing station indexed" detail="submarine cable landing stations are empty until a licensed connector exists — never inferred from proximity or news" />
          ) : (
            <ul className="divide-y divide-hair">
              {d.landingStations.map((l) => (
                <li key={l.id} className="flex items-center justify-between gap-3 py-2 text-[13px]">
                  <span className="inline-flex items-center gap-1.5 text-ink">
                    <CountryFlag iso2={l.countryIso2} size={12} />
                    {l.name}
                  </span>
                  <span className="text-[11.5px] text-ink-3">{l.sourceName}</span>
                </li>
              ))}
            </ul>
          )}
        </Section>
      </div>

      <SourcesFooter sources={r.sources} note="IXP presence comes from published exchange↔facility links; carrier counts and cloud regions are taken as published. Nothing here is inferred from geography." />
    </Page>
  );
}