import type { Metadata } from "next";
import Link from "next/link";
import { apiSafe, type Party } from "@/lib/api";
import { PartyLogo } from "@/components/party";
import { Empty } from "@/components/ui";
import { dateFr, int, pct, prob } from "@/lib/format";
import { partyVar } from "@/lib/parties";

export const metadata: Metadata = { title: "Partis — chefs, candidatures, projections, documents", description: "Les cinq principaux partis de l'élection québécoise 2026 : chef·fe (registre DGEQ), candidatures officielles, sièges projetés, documents et propositions." };
export const revalidate = 120;

export default async function Page() {
  const data = await apiSafe<{ parties: Party[] }>("/api/parties");
  if (!data) return <Empty title="Partis indisponibles" />;
  return (
    <div className="space-y-6">
      <div className="flex items-end justify-between flex-wrap gap-3">
        <div><div className="eyebrow eyebrow-accent">Partis · registre officiel des partis autorisés (REPAQ)</div><h1 className="display text-[40px] md:text-[56px] mt-3">Party Explorer</h1></div>
        <Link href="/partis/comparateur" className="inline-flex items-center rounded-[8px] bg-brand text-white px-4 py-2.5 text-[14px] font-semibold">Comparateur des positions →</Link>
      </div>
      <div className="grid md:grid-cols-2 xl:grid-cols-3 gap-4">
        {data.parties.sort((a, b) => (b.forecast?.seatsMedian ?? 0) - (a.forecast?.seatsMedian ?? 0)).map((p) => (
          <Link key={p.id} href={`/partis/${p.id}`} className="card card-lg p-5 block hover:shadow-md transition-shadow" style={{ borderTop: `4px solid ${p.color}` }}>
            <div className="flex items-center justify-between gap-3"><PartyLogo id={p.id} height={30} /><span className="text-[11px] uppercase tracking-wide text-ink-3">{p.abbreviation}</span></div>
            <div className="font-bold text-[18px] mt-3 leading-tight">{p.officialName}</div>
            <div className="text-[13px] text-ink-2 mt-1">{p.leader ? <>Chef·fe : <b className="text-ink">{p.leader}</b>{p.leaderSince ? <span className="text-ink-3"> · depuis {dateFr(p.leaderSince, { month: "long", year: "numeric" })}</span> : null}</> : "—"}</div>
            <div className="grid grid-cols-3 gap-3 mt-4 text-center">
              <div className="surface-2 rounded-[8px] p-2.5"><div className="text-[11px] text-ink-3">Sièges projetés</div><div className="num font-bold text-[22px]" style={{ color: partyVar(p.id) }}>{p.forecast?.seatsMedian ?? "—"}</div><div className="text-[11px] text-ink-3 num">{p.forecast ? `${p.forecast.seats80[0]}–${p.forecast.seats80[1]}` : ""}</div></div>
              <div className="surface-2 rounded-[8px] p-2.5"><div className="text-[11px] text-ink-3">Vote projeté</div><div className="num font-bold text-[22px]">{p.forecast ? pct(p.forecast.voteMean, 1, "") : "—"}<span className="text-[13px]"> %</span></div><div className="text-[11px] text-ink-3 num">2022 : {pct(p.vote2022, 1)}</div></div>
              <div className="surface-2 rounded-[8px] p-2.5"><div className="text-[11px] text-ink-3">P(majorité)</div><div className="num font-bold text-[22px]">{prob(p.forecast?.pMajority)}</div><div className="text-[11px] text-ink-3 num">2022 : {p.seats2022} sièges</div></div>
            </div>
            <div className="flex justify-between text-[12.5px] text-ink-2 mt-4 num"><span>{int(p.candidatesCount)} candidatures</span><span>{p.documents} documents · {p.proposals} propositions</span></div>
          </Link>
        ))}
      </div>
      <p className="text-[12px] text-ink-3">Chef·fe et nom officiel tels qu&apos;inscrits au registre des partis autorisés d&apos;Élections Québec (pp_autorises.json). Logos officiels tirés des sites des partis, non modifiés.</p>
    </div>
  );
}