import type { Metadata } from "next";
import Link from "next/link";
import { ExtLink } from "@/components/entity/kv";
import { Button } from "@/components/ui/button";
import { Page, PageHeader } from "@/components/ui/card";
import { CountryFlag } from "@/components/ui/country-flag";
import { FilterChips, type Chip } from "@/components/ui/filter-chips";
import { Pagination } from "@/components/ui/pagination";
import { EmptyState, OfflineNotice } from "@/components/ui/states";
import { RowLink, TBody, THead, Table, Td, Th, Tr } from "@/components/ui/table";
import { api } from "@/lib/api";
import { countryName, fmtInt } from "@/lib/format";
import { routes } from "@/lib/routes";
import { pageMetadata } from "@/lib/seo";
import { hrefWith, spGet, spInt, type SearchParams } from "@/lib/sort";

export const revalidate = 120;

export const metadata: Metadata = pageMetadata({
  title: "Internet exchanges",
  description: "Internet exchange points (IXPs) with connected networks and the data centers where they are present.",
  path: routes.ixps(),
});

const BASE = routes.ixps();
const PER_PAGE = 100;
const input = "h-9 rounded-sm border border-hair-2 bg-surface px-2 text-[13px] text-ink placeholder:text-ink-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent";

export default async function IxpsPage({ searchParams }: { searchParams: Promise<SearchParams> }) {
  const sp = await searchParams;
  const q = spGet(sp, "q");
  const country = spGet(sp, "country")?.toUpperCase();
  const page = spInt(sp, "page", 1);
  const [res, dash, countries] = await Promise.all([api.ixps({ q, country, page, per_page: PER_PAGE }), api.dashboard(), api.countries()]);
  const ok = res.total > 0 || res.items.length > 0 || (!q && !country && dash.ok);
  const total = res.total;
  const statIxps = dash.ok ? dash.data.stats.ixps : null;
  const countryOptions = countries.items.filter((c) => c.facilityCount > 0).sort((a, b) => a.name.localeCompare(b.name));

  const chips: Chip[] = [];
  if (q) chips.push({ key: "q", label: "Search", value: q, removeHref: hrefWith(BASE, sp, { q: undefined }) });
  if (country) chips.push({ key: "country", label: "Country", value: countryName(country), removeHref: hrefWith(BASE, sp, { country: undefined }) });

  return (
    <Page>
      <PageHeader
        eyebrow="Index"
        title="Internet exchanges"
        description={total > 0 ? `${fmtInt(total)} internet exchange points indexed with their connected networks and the facilities where they are present.` : "Internet exchange points (IXPs), the networks they connect and the data centers where they are present."}
        aside={
          <Button href={routes.datacenters()} size="sm">
            Data centers
          </Button>
        }
      />
      {!ok && <OfflineNotice className="mb-3" />}

      <form method="get" action={BASE} className="flex flex-wrap items-center gap-2">
        <label className="sr-only" htmlFor="ixp-q">
          Search
        </label>
        <input id="ixp-q" name="q" type="search" defaultValue={q ?? ""} placeholder="Name, e.g. DE-CIX" className={`${input} w-full sm:w-64`} />
        <label className="sr-only" htmlFor="ixp-country">
          Country
        </label>
        <select id="ixp-country" name="country" defaultValue={country ?? ""} className={`${input} max-w-[60vw]`}>
          <option value="">All countries</option>
          {countryOptions.map((c) => (
            <option key={c.iso2} value={c.iso2}>
              {c.name}
            </option>
          ))}
        </select>
        <Button type="submit" size="sm" variant="primary">
          Apply
        </Button>
      </form>
      <FilterChips chips={chips} resetHref={BASE} className="mt-2" />

      <div className="mt-4">
        {res.items.length === 0 ? (
          q || country ? (
            <EmptyState title="No internet exchange matches these filters" description="Loosen a filter or clear them all." />
          ) : (
            <EmptyState
              title="No internet exchange indexed yet"
              description={
                <>
                  PeeringDB IXP data is being ingested; facilities&apos; IXP presence appears on facility pages as soon as it is observed.
                  {statIxps !== null && statIxps > 0 && <> The index currently counts {fmtInt(statIxps)} exchanges.</>}
                </>
              }
              action={
                <Link href={routes.datacenters()} className="text-[13px] text-ink underline decoration-hair-2 hover:text-accent">
                  Browse data centers
                </Link>
              }
            />
          )
        ) : (
          <>
            <Table dense>
              <THead>
                <tr>
                  <Th>Exchange</Th>
                  <Th className="hidden sm:table-cell">City</Th>
                  <Th>Country</Th>
                  <Th numeric>Networks</Th>
                  <Th numeric>Facilities</Th>
                  <Th className="hidden md:table-cell">Website</Th>
                </tr>
              </THead>
              <TBody>
                {res.items.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="text-[11.5px] text-ink-3">{x.nameLong}</div>}
                      {x.city && <div className="text-[11.5px] text-ink-3 sm:hidden">{x.city}</div>}
                    </Td>
                    <Td label="City" className="hidden text-ink-3 sm:table-cell">
                      {x.city ?? "—"}
                    </Td>
                    <Td label="Country">
                      <CountryFlag iso2={x.countryIso2} withName className="max-w-[160px] text-ink-2" />
                    </Td>
                    <Td label="Networks" numeric lead>
                      {x.networkCount === null ? <span className="text-ink-4">—</span> : fmtInt(x.networkCount)}
                    </Td>
                    <Td label="Facilities" numeric>
                      {fmtInt(x.facilityCount)}
                    </Td>
                    <Td label="Website" className="hidden text-[12.5px] md:table-cell">
                      {x.website ? <ExtLink href={x.website} className="text-ink-2 no-underline hover:underline" /> : <span className="text-ink-4">—</span>}
                    </Td>
                  </Tr>
                ))}
              </TBody>
            </Table>
            <Pagination page={page} perPage={PER_PAGE} total={total} hrefFor={(p) => hrefWith(BASE, sp, { page: p > 1 ? p : undefined })} label="exchanges" className="mt-3" />
          </>
        )}
      </div>
      <p className="mt-8 text-[12px] text-ink-4">Exchange and network data: PeeringDB (attribution requested) and exchange operators. Network counts are as published by the source at the last observation.</p>
    </Page>
  );
}