import type { ApiEndpointDoc } from "@dci/core";
import type { Metadata } from "next";
import Link from "next/link";
import { Breadcrumbs } from "@/components/entity/breadcrumbs";
import { ExtLink, KeyValueList } from "@/components/entity/kv";
import { SectionNav } from "@/components/entity/section-nav";
import { SourcesFooter } from "@/components/entity/sources-footer";
import { CodeTabs } from "@/components/intelligence/developers/code-tabs";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Page, PageHeader, Section } from "@/components/ui/card";
import { EmptyState, OfflineNotice } from "@/components/ui/states";
import { TBody, THead, Table, Td, Th, Tr } from "@/components/ui/table";
import { api } from "@/lib/api";
import { fmtInt } from "@/lib/format";
import { routes, SITE_URL } from "@/lib/routes";
import { pageMetadata } from "@/lib/seo";

export const revalidate = 600;

export const metadata: Metadata = pageMetadata({
  title: "API",
  description: "DataCenterIndex public REST API: every endpoint with parameters, response types and copy-ready curl / JavaScript / Python examples. Envelope { data, meta, sources }, weak ETags, per-IP rate limits, OpenAPI 3.1.",
  path: routes.apiDocsPage(),
});

const GROUP_LABEL: Record<string, string> = {
  facilities: "Facilities",
  projects: "Projects",
  operators: "Operators",
  countries: "Countries",
  metros: "Markets",
  "cloud-regions": "Cloud regions",
  ixps: "Internet exchanges",
  events: "Events",
  rankings: "Rankings",
  dashboard: "Dashboard",
  stats: "Stats",
  map: "Map",
  search: "Search",
  nearby: "Nearby",
  explore: "Explore",
  compare: "Compare",
  ai: "AI infrastructure",
  pulse: "Pulse",
  power: "Power",
  connectivity: "Connectivity",
  coverage: "Coverage",
  "time-machine": "Time machine",
  sources: "Sources",
  download: "Download",
  watchlist: "Watchlist",
  sitemap: "Sitemap",
  docs: "Docs",
};
const GROUP_ORDER = ["facilities", "projects", "operators", "countries", "metros", "cloud-regions", "ixps", "events", "rankings", "dashboard", "stats", "pulse", "ai", "power", "connectivity", "coverage", "explore", "compare", "search", "map", "nearby", "time-machine", "sources", "download", "watchlist", "sitemap", "docs"];

const linkCls = "text-ink underline decoration-hair-2 hover:text-accent";

function rewrite(s: string): string {
  return s.replace(/https?:\/\/localhost:8310/g, SITE_URL).replace(/https?:\/\/127\.0\.0\.1:8311/g, SITE_URL);
}

function MethodBadge({ method }: { method: ApiEndpointDoc["method"] }) {
  return (
    <Badge tone={method === "GET" ? "ok" : method === "POST" ? "accent" : "danger"} size="xs" mono>
      {method}
    </Badge>
  );
}

export default async function DevelopersPage() {
  const r = await api.docsMeta();
  const docs = r.ok ? r.data : [];
  const groups = Array.from(new Set(docs.map((d) => d.group))).sort((a, b) => {
    const ia = GROUP_ORDER.indexOf(a);
    const ib = GROUP_ORDER.indexOf(b);
    return (ia === -1 ? 99 : ia) - (ib === -1 ? 99 : ib) || a.localeCompare(b);
  });
  const byGroup = new Map(groups.map((g) => [g, docs.filter((d) => d.group === g).sort((a, b) => a.path.localeCompare(b.path) || a.method.localeCompare(b.method))]));

  return (
    <Page>
      <Breadcrumbs items={[{ name: "API", href: routes.apiDocsPage() }]} className="pt-3" />
      <PageHeader
        eyebrow="Developers"
        title="Public API"
        description={`${docs.length ? `${fmtInt(docs.length)} endpoints. ` : ""}Read-only JSON over HTTPS, the same data the site renders — every figure carries its sources.`}
        className="pt-3"
        aside={
          <div className="flex flex-wrap gap-2">
            <Button size="sm" href={routes.apiDocs()} external>
              Swagger UI
            </Button>
            <Button size="sm" variant="ghost" href="/api/v1/openapi.json" external>
              OpenAPI 3.1 JSON
            </Button>
          </div>
        }
      />
      {!r.ok && <OfflineNotice detail={r.error} className="mb-3" />}

      <div className="rounded-sm border border-hair bg-surface px-3 py-3 sm:px-4">
        <KeyValueList
          items={[
            { label: "Base URL", value: <span className="figure text-[12.5px]">{SITE_URL}/api/v1</span> },
            {
              label: "Envelope",
              value: (
                <span>
                  Every response is <span className="figure text-[12.5px]">{"{ data, meta, sources }"}</span> — <em>data</em> is the typed payload, <em>meta</em> carries pagination (<span className="figure text-[12px]">total, page, perPage</span>), <span className="figure text-[12px]">generatedAt</span> and a <span className="figure text-[12px]">methodology</span> sentence when a figure needs one, <em>sources</em> lists the sources (licence, attribution) behind the rows. Downloads stream without an envelope.
                </span>
              ),
            },
            { label: "Caching", value: "Weak ETags + s-maxage on every GET — send If-None-Match and expect 304 on unchanged data; lists revalidate within minutes, the change feed within 30 s." },
            { label: "Rate limits", value: "Rate-limited per IP; the current window is reported in the x-ratelimit-limit and x-ratelimit-remaining response headers. Bulk use should go through the download endpoints." },
            { label: "Errors", value: <span className="figure text-[12.5px]">{'{ "error": "…", "statusCode": 400 | 404 | 429 }'}</span> },
            { label: "Partial dates", value: <span className="figure text-[12.5px]">2027 · 2027-06 · 2027-06-15 · 2027-Q2 · 2027-H1</span> },
            { label: "Honesty", value: "null means not published — never zero. Estimates carry isEstimate; MW figures come with capacityScope / capacitySemantics; coverage fields say how much of an aggregate is backed by a figure." },
          ]}
        />
        <p className="mt-2 text-[11.5px] text-ink-3">
          Types are named after the shared contract (<span className="figure">packages/core/src/api-types.ts</span>); the <Link href={routes.methodology()} className={linkCls}>methodology</Link> explains how each value is produced. Re-use terms per source on <Link href={routes.sources()} className={linkCls}>/sources</Link>.
        </p>
      </div>

      {docs.length === 0 ? (
        <EmptyState className="mt-6" title="Endpoint catalogue unavailable" description="The API did not return /docs-meta; the Swagger UI link above still works when the API is up." />
      ) : (
        <>
          <SectionNav items={groups.map((g) => ({ id: `g-${g}`, label: GROUP_LABEL[g] ?? g, count: byGroup.get(g)?.length ?? 0 }))} className="mt-4" />
          <div className="mt-6 flex flex-col gap-10">
            {groups.map((g) => (
              <Section key={g} id={`g-${g}`} title={GROUP_LABEL[g] ?? g} description={`${byGroup.get(g)?.length ?? 0} ${(byGroup.get(g)?.length ?? 0) === 1 ? "endpoint" : "endpoints"}`} className="scroll-mt-28">
                <div className="flex flex-col gap-6">
                  {(byGroup.get(g) ?? []).map((d) => (
                    <Endpoint key={`${d.method} ${d.path}`} d={d} />
                  ))}
                </div>
              </Section>
            ))}
          </div>
        </>
      )}

      <SourcesFooter sources={r.ok ? r.sources : undefined} note="The API serves reconciled, validated records with their provenance; the same limits (published figures only, coverage caveats) apply to every payload." />
    </Page>
  );
}

function Endpoint({ d }: { d: ApiEndpointDoc }) {
  const id = `${d.method}-${d.path.replace(/[^a-z0-9]+/gi, "-")}`;
  return (
    <article id={id} className="rounded-sm border border-hair bg-surface" aria-labelledby={`${id}-h`}>
      <div className="flex flex-wrap items-center gap-2 border-b border-hair px-3 py-2.5 sm:px-4">
        <MethodBadge method={d.method} />
        <h3 id={`${id}-h`} className="figure min-w-0 break-all text-[13.5px] font-semibold text-ink">
          {d.path}
        </h3>
        <span className="ml-auto figure text-[11.5px] text-ink-3" title="Response type (data)">
          → {d.responseSchema}
        </span>
      </div>
      <div className="grid gap-4 px-3 py-3 sm:px-4 lg:grid-cols-2">
        <div className="min-w-0">
          <p className="text-[13px] leading-relaxed text-ink-2">{d.summary}</p>
          {d.params.length > 0 ? (
            <div className="mt-3">
              <Table dense>
                <THead>
                  <tr>
                    <Th>Parameter</Th>
                    <Th className="hidden sm:table-cell">In</Th>
                    <Th>Type</Th>
                    <Th className="hidden md:table-cell">Description</Th>
                  </tr>
                </THead>
                <TBody>
                  {d.params.map((p) => (
                    <Tr key={`${p.in}-${p.name}`}>
                      <Td primary>
                        <span className="figure text-[12.5px] font-medium">{p.name}</span>
                        {p.example && (
                          <div className="figure text-[11px] text-ink-4 md:hidden">
                            e.g. {p.example}
                          </div>
                        )}
                      </Td>
                      <Td label="In" className="hidden text-[12px] text-ink-3 sm:table-cell">
                        {p.in}
                      </Td>
                      <Td label="Type" className="figure text-[12px] text-ink-2">
                        {p.type}
                      </Td>
                      <Td label="Description" className="hidden text-[12px] text-ink-2 md:table-cell">
                        {p.description || <span className="text-ink-4">—</span>}
                        {p.example && <span className="figure text-ink-4"> · e.g. {p.example}</span>}
                      </Td>
                    </Tr>
                  ))}
                </TBody>
              </Table>
            </div>
          ) : (
            <p className="mt-2 text-[11.5px] text-ink-4">No parameters.</p>
          )}
          <p className="mt-2 text-[11.5px] text-ink-3">
            Try it: <ExtLink href={`${SITE_URL}${d.path.replace(/:[a-z]+/gi, (m) => (d.params.find((p) => p.in === "path" && `:${p.name}` === m)?.example ?? m))}`} className="figure text-[11.5px]" />
          </p>
        </div>
        <div className="min-w-0">
          <CodeTabs id={d.path} example={{ curl: rewrite(d.example.curl), js: rewrite(d.example.js), python: rewrite(d.example.python) }} />
        </div>
      </div>
    </article>
  );
}