import type { Metadata } from "next";
import { apiSafe, type RidingListItem } from "@/lib/api";
import { RidingsGrid } from "@/components/ridings-grid";
import { Empty } from "@/components/ui";

export const metadata: Metadata = { title: "Circonscriptions — 127 fiches, probabilités de victoire", description: "Les 127 circonscriptions du Québec : favori, probabilité de victoire par parti, sortant·e, région, avec recherche instantanée." };
export const revalidate = 60;

export default async function Page({ searchParams }: { searchParams: Promise<{ tri?: string }> }) {
  const sp = await searchParams;
  const data = await apiSafe<{ ridings: RidingListItem[]; regions: { id: string; name: string }[] }>("/api/ridings");
  if (!data) return <Empty title="Circonscriptions indisponibles" />;
  return (
    <div className="space-y-6">
      <div>
        <div className="eyebrow">Circonscriptions · {data.ridings.length}</div>
        <h1 className="display text-[40px] md:text-[56px] mt-3">127 circonscriptions</h1>
        <p className="text-ink-2 mt-3 max-w-2xl text-[15px] leading-relaxed">Les pourcentages sont des <b>probabilités de victoire</b> issues des simulations, pas des intentions de vote. Nouvelle carte 2026 : Bellefeuille et Marie-Lacoste-Gérin-Lajoie s&apos;ajoutent, 39 circonscriptions sont modifiées.</p>
      </div>
      <RidingsGrid ridings={data.ridings} regions={data.regions} initialSort={sp.tri === "serre" ? "serre" : "nom"} />
    </div>
  );
}