import type { Metadata } from "next";
import Link from "next/link";
import { apiSafe } from "@/lib/api";
import { AskBox } from "@/components/ask-box";
import { Card, Empty } from "@/components/ui";
import { PARTY_IDS, partyVar, partyLabel } from "@/lib/parties";

export const metadata: Metadata = { title: "Enjeux — ce que proposent les partis", description: "Positions et propositions des partis par enjeu (santé, logement, immigration, langue, environnement…), tirées de leurs documents officiels." };
export const revalidate = 300;

interface Matrix { topics: { id: string; label: string; counts: Record<string, number> }[] }

export default async function Page() {
  const m = await apiSafe<Matrix>("/api/matrix");
  if (!m) return <Empty title="Enjeux indisponibles" />;
  return (
    <div className="space-y-8">
      <div><div className="eyebrow eyebrow-accent">Issues tracker · {m.topics.length} enjeux documentés</div><h1 className="display text-[40px] md:text-[56px] mt-3">Enjeux</h1><p className="text-ink-2 mt-3 max-w-2xl text-[15px] leading-relaxed">Les principaux enjeux détectés dans les documents officiels des partis. Le nombre indique les propositions extraites (avec page et citation) par parti.</p></div>
      <AskBox />
      {m.topics.length === 0 ? <Empty title="Extraction en cours" /> : (
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-3">
          {m.topics.sort((a, b) => Object.values(b.counts).reduce((x, y) => x + y, 0) - Object.values(a.counts).reduce((x, y) => x + y, 0)).map((t) => {
            const total = Object.values(t.counts).reduce((x, y) => x + y, 0);
            return (
              <Link key={t.id} href={`/enjeux/${t.id}`} className="card p-4 block hover:shadow-md">
                <div className="flex items-baseline justify-between"><div className="font-semibold text-[15px]">{t.label}</div><div className="num text-[12px] text-ink-3">{total} propositions</div></div>
                <div className="flex h-[8px] rounded-full overflow-hidden mt-3 bg-surface-3">{PARTY_IDS.map((id) => <div key={id} style={{ width: `${((t.counts[id] ?? 0) / Math.max(total, 1)) * 100}%`, background: partyVar(id) }} />)}</div>
                <div className="flex flex-wrap gap-x-3 mt-2 text-[12px] num">{PARTY_IDS.map((id) => <span key={id}><b style={{ color: partyVar(id) }}>{partyLabel(id)}</b> {t.counts[id] ?? 0}</span>)}</div>
              </Link>
            );
          })}
        </div>
      )}
    </div>
  );
}