import type { Metadata } from "next";
import { Suspense } from "react";
import { Map as MapIcon } from "lucide-react";
import { FacilityFilterBar } from "@/components/facility-filters";
import { FacilityTable } from "@/components/facility-table";
import { Button } from "@/components/ui/button";
import { Page, PageHeader } from "@/components/ui/card";
import { Pagination } from "@/components/ui/pagination";
import { OfflineNotice } from "@/components/ui/states";
import { api } from "@/lib/api";
import { fmtInt } from "@/lib/format";
import { filtersToQuery, parseFilters } from "@/lib/query";
import { routes } from "@/lib/routes";

export const revalidate = 120;

export const metadata: Metadata = {
  title: "Data centers",
  description: "Filterable index of data center facilities worldwide: operator, market, country, status, capacity, type and confidence.",
  alternates: { canonical: "/datacenters" },
};

const PER_PAGE = 50;

export default async function DatacentersPage({ searchParams }: { searchParams: Promise<Record<string, string | string[] | undefined>> }) {
  const sp = await searchParams;
  const filters = parseFilters(sp);
  const page = filters.page ?? 1;
  const query = { ...filters, page, per_page: filters.per_page ?? PER_PAGE, sort: filters.sort ?? "mw", order: filters.order ?? (filters.sort === "name" ? "asc" : "desc") };
  const res = await api.facilities(query);
  const hrefFor = (p: number) => routes.datacenters(filtersToQuery({ ...filters, page: p }));
  const mapQs = filtersToQuery({ ...filters, page: undefined, per_page: undefined, sort: undefined, order: undefined });

  return (
    <Page>
      <PageHeader
        eyebrow="Index"
        title="Data centers"
        description={res.ok ? `${fmtInt(res.total)} facilities indexed. Figures are sourced; capacity shows the best known figure (IT, total or ≈ planned).` : "Every indexed facility with operator, market, status, capacity and confidence."}
        aside={
          <Button href={routes.map(mapQs)} size="sm">
            <MapIcon className="size-4" strokeWidth={1.75} /> Open in map
          </Button>
        }
      />
      {!res.ok && <OfflineNotice detail={res.error} className="mb-3" />}
      <div className="sticky top-12 z-[20] -mx-3 border-b border-hair bg-paper/95 px-3 py-2 backdrop-blur sm:top-14 sm:mx-0 sm:px-0">
        <Suspense>
          <FacilityFilterBar basePath={routes.datacenters()} total={res.ok ? res.total : null} />
        </Suspense>
      </div>
      <div className="pt-1">
        <FacilityTable items={res.items} filters={query} basePath={routes.datacenters()} emptyTitle={res.ok ? "No facilities match these filters" : "Facilities unavailable"} emptyDescription={res.ok ? "Loosen a filter or clear them all." : "The index API is not reachable right now."} />
      </div>
      <Pagination page={page} perPage={query.per_page} total={res.total} hrefFor={hrefFor} label="facilities" />
    </Page>
  );
}