import type { Metadata } from "next";
import Link from "next/link";
import { Page, PageHeader, Section } from "@/components/ui/section";
import { StatusBadge } from "@/components/ui/status-badge";
import { api } from "@/lib/api";
import type { Country } from "@/lib/types";

type Row = Country & { exchanges: Array<{ id: string; name: string; status: string }>; instruments_tracked: number };

export const metadata: Metadata = { title: "Countries", description: "Market atlas by country: exchanges, indices, rates and currencies observed by Market Atlas.", alternates: { canonical: "/countries" } };
export const dynamic = "force-dynamic";

export default async function CountriesPage() {
  const rows = await api<Row[]>("/v1/countries");
  const regions = [...new Set(rows.map((r) => r.region))].sort();
  return (
    <Page wide>
      <PageHeader kicker="World" title="Countries" lead="Every country in the atlas with its venues and what Market Atlas currently tracks there. Coverage is a measure of Market Atlas observation, not of market size." />
      {regions.map((region) => (
        <Section key={region} title={region}>
          <ul className="grid grid-cols-1 [&>*]:min-w-0 gap-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
            {rows
              .filter((r) => r.region === region)
              .sort((a, b) => b.instruments_tracked - a.instruments_tracked || a.name.localeCompare(b.name))
              .map((r) => (
                <li key={r.code} className="rounded-md border border-rule bg-surface px-3 py-2.5 hover:border-rule-strong">
                  <Link href={`/countries/${r.code}`} className="flex items-baseline justify-between gap-2">
                    <span className="font-medium">{r.name}</span>
                    <span className="mono text-xs text-ink-3">
                      {r.code} · {r.currency ?? "—"}
                    </span>
                  </Link>
                  <div className="mt-1 flex flex-wrap items-center gap-1.5 text-[11px] text-ink-3">
                    {r.exchanges.slice(0, 3).map((e) => (
                      <span key={e.id} className="inline-flex items-center gap-1">
                        <StatusBadge status={e.status} label={e.status.toLowerCase()} /> {e.name}
                      </span>
                    ))}
                    {!r.exchanges.length && <span>no venue in the atlas</span>}
                  </div>
                  <div className="mono mt-1 text-[11px] text-ink-3">{r.instruments_tracked.toLocaleString("en-US")} instruments tracked</div>
                </li>
              ))}
          </ul>
        </Section>
      ))}
    </Page>
  );
}