import Link from "next/link";
import type { Forecast, Poll, RidingListItem } from "@/lib/api";
import { cls, dateShort, dateTimeFr, delta, int, pct, prob, ratingLabel } from "@/lib/format";
import { PARTY_IDS, party, partyAlpha, partyLabel, partyName, partyVar, sortParties } from "@/lib/parties";
import { DotComparison, SeatDistribution, SeatWaffle } from "./charts";
import { PartyBadge, PartyDot, PartyLogo } from "./party";
import { Badge, Card, Dual, Metric, MetricDelta, ProbabilityBar, SectionHeader, SourceBadge } from "./ui";

// ------------------------------------------------------- SEAT PROJECTION
export function SeatProjectionTable({ f, className }: { f: Forecast; className?: string }) {
  const rows = sortParties(f.parties, (v) => v.seatsMean);
  const maj = f.summary.majority;
  return (
    <div className={className}>
      {/* mobile : une carte par parti */}
      <div className="md:hidden space-y-2">
        {rows.map(([id, v]) => (
          <Link key={id} href={`/partis/${id}`} className="block inset p-3" style={{ borderLeft: `4px solid ${partyVar(id)}` }}>
            <div className="flex items-center justify-between gap-3">
              <div className="flex items-center gap-2 min-w-0"><PartyLogo id={id} height={16} /><span className="font-semibold text-[14px]">{partyLabel(id)}</span></div>
              <div className="flex items-baseline gap-2"><span className="figure text-[30px]" style={{ color: partyVar(id) }}>{v.seatsMedian}</span><span className="mono text-[12px] text-ink-2">{v.seats80[0]}–{v.seats80[1]}</span></div>
            </div>
            <div className="grid grid-cols-3 gap-2 mt-2 text-[12px]">
              <div><div className="text-ink-3 text-[10.5px] mono uppercase tracking-[0.06em]">95 %</div><div className="mono font-semibold">{v.seats95[0]}–{v.seats95[1]}</div></div>
              <div><div className="text-ink-3 text-[10.5px] mono uppercase tracking-[0.06em]">Plus de sièges</div><div className="mono font-semibold">{prob(v.pMostSeats)}</div></div>
              <div><div className="text-ink-3 text-[10.5px] mono uppercase tracking-[0.06em]">Majorité</div><div className="mono font-semibold">{prob(v.pMajority)}</div></div>
            </div>
            {v.seatDistribution && <div className="mt-2 -mb-1"><SeatDistribution dist={v.seatDistribution} color={partyVar(id)} majority={maj} median={v.seatsMedian} lo80={v.seats80[0]} hi80={v.seats80[1]} lo95={v.seats95[0]} hi95={v.seats95[1]} height={56} total={f.summary.seats_total} width={320} /></div>}
          </Link>
        ))}
      </div>
      <div className="hidden md:block overflow-x-auto">
        <table className="data-table min-w-[640px]">
          <thead>
            <tr><th>Parti</th><th className="r">Projection</th><th className="r">Intervalle 80 %</th><th className="r">Intervalle 95 %</th><th className="r">Plus de sièges</th><th className="r">Majorité ({maj})</th><th className="w-[220px]">Distribution</th></tr>
          </thead>
          <tbody>
            {rows.map(([id, v]) => (
              <tr key={id}>
                <td><Link href={`/partis/${id}`} className="inline-flex items-center gap-2.5"><PartyLogo id={id} height={18} /><span className="font-semibold">{partyLabel(id)}</span></Link></td>
                <td className="r figure text-[22px]" style={{ color: partyVar(id) }}>{v.seatsMedian}</td>
                <td className="r num mono">{v.seats80[0]}–{v.seats80[1]}</td>
                <td className="r num mono text-ink-2">{v.seats95[0]}–{v.seats95[1]}</td>
                <td className="r num font-semibold">{prob(v.pMostSeats)}</td>
                <td className="r num font-semibold">{prob(v.pMajority)}</td>
                <td>{v.seatDistribution && <SeatDistribution dist={v.seatDistribution} color={partyVar(id)} majority={maj} median={v.seatsMedian} lo80={v.seats80[0]} hi80={v.seats80[1]} lo95={v.seats95[0]} hi95={v.seats95[1]} height={44} total={f.summary.seats_total} />}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <p className="text-[12px] text-ink-3 mt-2">Médiane pondérée des {int(f.nSimulations)} simulations ; intervalles = percentiles 10–90 et 2,5–97,5. « Autres » n&apos;est jamais déclaré gagnant.</p>
    </div>
  );
}

export function PopularVoteTable({ f, className }: { f: Forecast; className?: string }) {
  const rows = sortParties(f.parties, (v) => v.voteMean, true);
  const ch = f.diff?.changes;
  return (
    <div className={cls("space-y-2.5", className)}>
      {rows.map(([id, v]) => (
        <div key={id} className="grid grid-cols-[44px_1fr_auto] sm:grid-cols-[52px_1fr_auto] items-center gap-2 sm:gap-3">
          <span className="font-semibold num text-[13px] inline-flex items-center gap-1.5"><span className="w-2 h-2 rounded-full" style={{ background: partyVar(id) }} />{partyLabel(id)}</span>
          <div className="relative h-[14px] bg-surface-3 rounded-[4px] overflow-hidden">
            <div className="absolute inset-y-0 rounded-[4px]" style={{ left: `${(v.vote95[0] / 50) * 100}%`, width: `${((v.vote95[1] - v.vote95[0]) / 50) * 100}%`, background: partyAlpha(id, 0.15) }} />
            <div className="absolute inset-y-0 rounded-[4px]" style={{ left: `${(v.vote80[0] / 50) * 100}%`, width: `${((v.vote80[1] - v.vote80[0]) / 50) * 100}%`, background: partyAlpha(id, 0.35) }} />
            <div className="absolute inset-y-0 w-[2px] bg-ink" style={{ left: `${(v.voteMean / 50) * 100}%` }} />
          </div>
          <div className="flex items-baseline gap-1.5 num">
            <span className="font-bold text-[15px] w-[46px] text-right mono">{v.voteMean.toFixed(1).replace(".", ",")}</span>
            {ch?.[id] ? <MetricDelta value={ch[id].vote} /> : <span className="w-[54px]" />}
          </div>
        </div>
      ))}
      <p className="text-[12px] text-ink-3">Vote populaire projeté au jour du scrutin (%, moyenne ± intervalles 80/95 %). Variation depuis le run précédent.</p>
    </div>
  );
}

export function MajorityPanel({ f }: { f: Forecast }) {
  const rows = sortParties(f.parties, (v) => v.pMajority).filter(([, v]) => v.pMostSeats > 0.005 || v.pMajority > 0.005);
  return (
    <div className="space-y-3">
      {rows.map(([id, v]) => (
        <div key={id}>
          <div className="flex items-baseline justify-between mb-1 text-[13px] gap-2"><span className="font-semibold inline-flex items-center gap-1.5 min-w-0"><PartyDot id={id} /><span className="truncate">{partyName(id)}</span></span><span className="text-ink-2 shrink-0 text-[12.5px]">plus de sièges {prob(v.pMostSeats)}</span></div>
          <ProbabilityBar p={v.pMajority} color={partyVar(id)} label={`majorité ${partyLabel(id)}`} height={12} />
        </div>
      ))}
      <div>
        <div className="flex items-baseline justify-between mb-1 text-[13px]"><span className="font-semibold">Aucune majorité (gouvernement minoritaire)</span></div>
        <ProbabilityBar p={f.summary.p_minority} color="var(--text)" label="minoritaire" height={12} />
      </div>
    </div>
  );
}

// ------------------------------------------------------------ WHAT CHANGED
export function WhatChanged({ f, ridingNames }: { f: Forecast; ridingNames?: Record<number, { name: string; slug: string }> }) {
  const d = f.diff;
  if (!d) return <p className="text-ink-2 text-[14px]">Premier run publié : pas de comparaison disponible.</p>;
  const leader = f.summary.leader;
  const ch = d.changes[leader];
  const biggest = Object.entries(d.changes).sort((a, b) => Math.abs(b[1].p_majority) - Math.abs(a[1].p_majority))[0];
  const changes = Object.entries(d.changes).filter(([id]) => id !== "aut").sort((a, b) => Math.abs(b[1].seats) - Math.abs(a[1].seats));
  return (
    <div className="grid md:grid-cols-[1fr_1.2fr] gap-6 md:gap-8">
      <div>
        <div className="eyebrow">Majorité {partyLabel(leader)}</div>
        <div className="figure text-[38px] md:text-[44px] mt-2">
          <span className="text-ink-3">{prob(f.parties[leader].pMajority - (ch?.p_majority ?? 0))}</span> <span className="text-ink-3 text-[22px] serif">→</span> {prob(f.parties[leader].pMajority)}
        </div>
        <div className="mt-4 text-[13.5px]">
          <div className="eyebrow mb-1.5">Causes identifiées</div>
          <ul className="space-y-1">
            {d.causes.map((cause, i) => (
              <li key={i}>
                {cause.kind === "new_polls" ? <span>Nouveau{(cause.detail as string[]).length > 1 ? "x" : ""} sondage{(cause.detail as string[]).length > 1 ? "s" : ""} : {(cause.detail as string[]).map((id) => <Link key={id} href={`/sondages/${id}`} className="link mr-2">{id}</Link>)}</span>
                  : cause.kind === "markets" ? <span>Marchés de prédiction : {Object.entries(cause.detail as unknown as Record<string, number>).map(([p, v]) => `${partyLabel(p)} ${delta(v * 100, 0, " pt")}`).join(" · ")}</span>
                  : <span className="text-ink-2">{String(cause.detail ?? "—")}</span>}
              </li>
            ))}
          </ul>
        </div>
        <div className="text-[12px] text-ink-3 mt-4">Comparé au run précédent{d.previous_at ? ` (${dateTimeFr(d.previous_at)})` : ""}. Les causes listées sont les seules différences d&apos;entrée entre les deux runs ; QC26 n&apos;infère pas de causalité au-delà.</div>
      </div>
      <div>
        <div className="eyebrow mb-2">Variations par parti</div>
        <div className="md:hidden divide-y divide-border">
          {changes.map(([id, c]) => (
            <div key={id} className="py-2 flex items-center justify-between gap-2">
              <PartyBadge id={id} size="sm" />
              <div className="flex flex-wrap justify-end gap-1 text-[11px]"><span className="text-ink-3 mr-0.5">vote</span><MetricDelta value={c.vote} /><span className="text-ink-3 ml-1 mr-0.5">sièges</span><MetricDelta value={c.seats} digits={0} suffix="" /><span className="text-ink-3 ml-1 mr-0.5">maj.</span><MetricDelta value={c.p_majority * 100} digits={0} suffix=" pt" /></div>
            </div>
          ))}
        </div>
        <table className="data-table hidden md:table"><thead><tr><th>Parti</th><th className="r">Vote</th><th className="r">Sièges</th><th className="r">P(majorité)</th><th className="r">P(1er)</th></tr></thead>
          <tbody>
            {changes.map(([id, c]) => (
              <tr key={id}><td><PartyBadge id={id} size="sm" /></td><td className="r"><MetricDelta value={c.vote} /></td><td className="r"><MetricDelta value={c.seats} digits={0} suffix="" /></td><td className="r"><MetricDelta value={c.p_majority * 100} digits={0} suffix=" pt" /></td><td className="r"><MetricDelta value={c.p_most_seats * 100} digits={0} suffix=" pt" /></td></tr>
            ))}
          </tbody></table>
        {d.flips.length > 0 && (
          <div className="mt-4 text-[13px]">
            <div className="eyebrow mb-1.5">Circonscriptions qui changent de favori</div>
            <ul className="space-y-1">
              {d.flips.slice(0, 8).map((fl) => (
                <li key={fl.code} className="flex items-center gap-2 flex-wrap"><Link href={`/circonscription/${ridingNames?.[fl.code]?.slug ?? fl.code}`} className="link">{ridingNames?.[fl.code]?.name ?? fl.code}</Link><PartyBadge id={fl.from} size="sm" /> → <PartyBadge id={fl.to} size="sm" /> <span className="num text-ink-3">{prob(fl.p)}</span></li>
              ))}
            </ul>
          </div>
        )}
        {biggest && biggest[0] !== leader && <div className="text-[12.5px] text-ink-2 mt-3">Autre mouvement notable : {partyLabel(biggest[0])} P(majorité) {delta(biggest[1].p_majority * 100, 0, " pt")}.</div>}
      </div>
    </div>
  );
}

// ------------------------------------------------------------- LATEST POLLS
export function PollRowMobile({ p, showSource = true }: { p: Poll; showSource?: boolean }) {
  const lead = Object.entries(p.results).filter(([k]) => k !== "aut").sort((a, b) => b[1] - a[1])[0]?.[0];
  return (
    <div className="poll-row">
      <div className="min-w-0">
        <Link href={`/sondages/${p.id}`} className="font-semibold text-[14px] hover:underline">{p.pollster.name}</Link>
        {p.sponsor && <span className="text-ink-3 text-[12px]"> · {p.sponsor}</span>}
        {!p.validated && <span className="ml-1.5 text-[10px] uppercase tracking-wide text-warn font-semibold mono" title="Document original en cours de vérification">index</span>}
        {p.excluded && <span className="ml-1.5 text-[10px] uppercase tracking-wide text-live font-semibold mono">exclu</span>}
      </div>
      <div className="text-right text-[12px] text-ink-2 num whitespace-nowrap">{p.fieldworkStart ? `${dateShort(p.fieldworkStart)} – ` : ""}{dateShort(p.fieldworkEnd)}<div className="text-ink-3">n = {int(p.sampleSize)}</div></div>
      <div className="poll-vals">
        {PARTY_IDS.map((id) => (
          <div key={id} style={{ borderTop: `3px solid ${partyVar(id)}` }}>
            <div className="lbl text-ink-2">{partyLabel(id)}</div>
            <div className={cls("val", id === lead ? "text-ink" : "text-ink-2")}>{p.results[id] !== undefined ? p.results[id].toFixed(p.results[id] % 1 ? 1 : 0).replace(".", ",") : "—"}</div>
          </div>
        ))}
      </div>
      {showSource && (
        <div className="col-span-2 flex items-center justify-between text-[11px] text-ink-3 mt-1">
          <span>{p.sourceTier === "primary" ? "PDF archivé" : "index tiers, document en attente"}{p.weight ? ` · poids ${p.weight.weight.toFixed(2)}` : ""}</span>
          <SourceBadge source={{ name: p.document ? "Document original (PDF de la firme)" : "Index tiers en attente du document original", url: p.sourceUrl, archiveUrl: p.document?.archiveUrl, retrievedAt: p.document?.downloadedAt, page: p.resultsPage, tier: p.sourceTier === "primary" ? "Primaire (firme)" : "Secondaire (index)", detail: p.methodology ?? undefined }} />
        </div>
      )}
    </div>
  );
}

export function LatestPolls({ polls, limit = 6, compact = false }: { polls: Poll[]; limit?: number; compact?: boolean }) {
  const rows = polls.slice(0, limit);
  return (
    <>
      <div className="md:hidden">{rows.map((p) => <PollRowMobile key={p.id} p={p} showSource={false} />)}</div>
      <div className="hidden md:block overflow-x-auto">
        <table className="data-table min-w-[560px]">
          <thead><tr><th>Firme</th><th>Terrain</th><th className="r">n</th>{PARTY_IDS.map((id) => <th key={id} className="r"><span className="inline-flex items-center gap-1"><span className="w-1.5 h-1.5 rounded-full" style={{ background: partyVar(id) }} />{partyLabel(id)}</span></th>)}{!compact && <th className="r">Poids</th>}<th></th></tr></thead>
          <tbody>
            {rows.map((p) => {
              const lead = Object.entries(p.results).filter(([k]) => k !== "aut").sort((a, b) => b[1] - a[1])[0]?.[0];
              return (
                <tr key={p.id}>
                  <td><Link href={`/sondages/${p.id}`} className="font-semibold hover:underline">{p.pollster.name}</Link>{p.sponsor && <span className="text-ink-3 text-[12px]"> · {p.sponsor}</span>}{!p.validated && <span className="ml-1.5 text-[10px] uppercase tracking-wide text-warn font-semibold mono" title="Document original en cours de vérification">index</span>}</td>
                  <td className="num whitespace-nowrap">{p.fieldworkStart ? `${dateShort(p.fieldworkStart)} – ` : ""}{dateShort(p.fieldworkEnd)}</td>
                  <td className="r num">{int(p.sampleSize)}</td>
                  {PARTY_IDS.map((id) => <td key={id} className={cls("r num mono", id === lead && "font-bold")}>{p.results[id]?.toFixed(0) ?? "—"}</td>)}
                  {!compact && <td className="r num text-ink-2 mono">{p.weight ? p.weight.weight.toFixed(2) : "—"}</td>}
                  <td className="r"><SourceBadge source={{ name: p.document ? "Document original (PDF de la firme)" : "Index tiers en attente du document original", url: p.sourceUrl, archiveUrl: p.document?.archiveUrl, retrievedAt: p.document?.downloadedAt, page: p.resultsPage, tier: p.sourceTier === "primary" ? "Primaire (firme)" : "Secondaire (index)", detail: p.methodology ?? undefined }} /></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </>
  );
}

// ------------------------------------------------------------ BATTLEGROUNDS
export function Battlegrounds({ ridings, codes, limit = 10 }: { ridings: RidingListItem[]; codes: number[]; limit?: number }) {
  const by = new Map(ridings.map((r) => [r.code, r]));
  const rows = codes.map((c) => by.get(c)).filter((r): r is RidingListItem => !!r && !!r.forecast).slice(0, limit);
  return (
    <div className="rail sm:grid-cols-2 lg:grid-cols-5 sm:gap-3">
      {rows.map((r) => (
        <Link key={r.code} href={`/circonscription/${r.slug}`} className="card card-hover p-4 block" style={{ borderTop: `3px solid ${partyVar(r.forecast!.favorite)}` }}>
          <div className="flex items-start justify-between gap-2"><div className="font-semibold text-[14px] leading-tight">{r.name}</div><Badge tone={r.forecast!.rating === "tossup" ? "warn" : "neutral"}>{ratingLabel(r.forecast!.rating)}</Badge></div>
          <div className="text-[11.5px] text-ink-3 mt-0.5">{r.regionName}</div>
          <div className="mt-3 space-y-1">
            {Object.entries(r.forecast!.pWin).filter(([k]) => k !== "aut").sort((a, b) => b[1] - a[1]).slice(0, 3).map(([id, p]) => (
              <div key={id} className="flex items-center gap-2 text-[12.5px]"><span className="w-8 font-semibold num" style={{ color: partyVar(id) }}>{partyLabel(id)}</span><div className="flex-1 h-[6px] rounded-full bg-surface-3 overflow-hidden"><div className="h-full" style={{ width: `${p * 100}%`, background: partyVar(id) }} /></div><span className="num w-10 text-right mono">{prob(p)}</span></div>
            ))}
          </div>
        </Link>
      ))}
    </div>
  );
}

// ------------------------------------------------------------ REGIONAL GRID
export function RegionalGrid({ regions }: { regions: { id: string; name: string; ridings: number; favorites: Record<string, number>; voteNow: Record<string, number>; vote2022: Record<string, number> }[] }) {
  return (
    <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-2 sm:gap-3">
      {regions.map((g) => {
        const favs = Object.entries(g.favorites).sort((a, b) => b[1] - a[1]);
        const top = Object.entries(g.voteNow).filter(([k]) => k !== "aut").sort((a, b) => b[1] - a[1]).slice(0, 4);
        return (
          <div key={g.id} className="card p-3.5 sm:p-4">
            <div className="flex items-baseline justify-between"><div className="font-semibold text-[14px]">{g.name}</div><div className="text-[12px] text-ink-3 num mono">{g.ridings} circ.</div></div>
            <div className="flex gap-[2px] h-[8px] rounded-full overflow-hidden mt-2 bg-surface-3">{favs.map(([id, n]) => <div key={id} style={{ width: `${(n / g.ridings) * 100}%`, background: partyVar(id) }} title={`${partyLabel(id)} ${n}`} />)}</div>
            <div className="flex flex-wrap gap-x-3 mt-1.5 text-[12px] num">{favs.map(([id, n]) => <span key={id}><b style={{ color: partyVar(id) }}>{partyLabel(id)}</b> {n}</span>)}</div>
            <div className="mt-3 space-y-1 hidden sm:block">
              {top.map(([id, v]) => (
                <div key={id} className="grid grid-cols-[34px_1fr_44px_54px] items-center gap-2 text-[12px]"><span className="font-semibold num" style={{ color: partyVar(id) }}>{partyLabel(id)}</span><div className="h-[5px] rounded-full bg-surface-3 overflow-hidden"><div className="h-full" style={{ width: `${v * 2}%`, background: partyVar(id) }} /></div><span className="num text-right font-semibold mono">{v.toFixed(0)} %</span><span className="num text-right text-ink-3 mono">{delta(v - (g.vote2022[id] ?? 0), 0, " pt")}</span></div>
              ))}
            </div>
            <div className="mt-2 text-[12px] text-ink-2 sm:hidden">{top.slice(0, 3).map(([id, v]) => `${partyLabel(id)} ${v.toFixed(0)} % (${delta(v - (g.vote2022[id] ?? 0), 0)})`).join(" · ")}</div>
            <div className="text-[11px] text-ink-3 mt-2 hidden sm:block">Vote projeté (moyenne des circonscriptions) · variation vs 2022 transposé</div>
          </div>
        );
      })}
    </div>
  );
}

// ------------------------------------------------------------------- HERO
export function HeroForecast({ f, meta }: { f: Forecast; meta: { seatsTotal: number; majority: number; daysToElection: number } }) {
  const leader = f.summary.leader;
  const lp = f.parties[leader];
  const rows = sortParties(f.parties, (v) => v.seatsMean);
  const ch = f.diff?.changes?.[leader];
  const seats = Object.fromEntries(Object.entries(f.parties).map(([k, v]) => [k, v.seatsMedian]));
  const comp = f.summary.components;
  const pollsOnly = comp?.pollsOnly?.parties?.[leader];
  const nSources = comp ? [comp.fundamentals?.enabled, comp.momentum?.enabled, comp.markets?.enabled, comp.byelections?.enabled].filter(Boolean).length : 0;
  return (
    <section className="relative overflow-hidden rounded-[var(--radius-lg)] border border-border card hero-glow p-5 md:p-10">
      <div className="grid lg:grid-cols-[1.05fr_1fr] gap-8 lg:gap-10 items-start">
        <div className="fade-up">
          <div className="flex items-center gap-2 flex-wrap">
            <span className="eyebrow eyebrow-accent">Prévision QC26</span>
            <span className="text-ink-3 text-[11px] mono">·</span>
            <span className="eyebrow">Modèle {f.modelVersion} · run #{f.id}</span>
          </div>
          <h1 className="display text-[34px] sm:text-[40px] md:text-[54px] mt-4 max-w-[14ch]">
            Le <span style={{ color: partyVar(leader) }}>{partyLabel(leader)}</span> favori, {lp.pMajority >= 0.5 ? "une majorité plus probable qu'improbable" : lp.pMajority >= 0.3 ? "la majorité en jeu" : "un gouvernement minoritaire probable"}.
          </h1>
          <div className="mt-5 sm:mt-6 flex flex-col sm:flex-row sm:items-end gap-5 sm:gap-8">
            <div>
              <div className="flex items-center gap-2 text-[13px] text-ink-2"><PartyLogo id={leader} height={18} /> <span className="hidden sm:inline">{partyName(leader)}</span></div>
              <div className="figure text-[84px] sm:text-[110px] md:text-[136px] mt-1" style={{ color: partyVar(leader) }}>{lp.seatsMedian}</div>
              <div className="text-[13px] sm:text-[14px] text-ink-2 -mt-1">sièges sur {meta.seatsTotal}<br className="sm:hidden" /> <span className="hidden sm:inline">· </span>80 % : <span className="mono font-semibold text-ink">{lp.seats80[0]}–{lp.seats80[1]}</span></div>
            </div>
            <div className="grid grid-cols-2 gap-x-6 sm:gap-x-8 gap-y-4 sm:gap-y-5 mb-2 sm:self-end">
              <Metric label="Majorité" value={prob(lp.pMajority)} size="md" delta={ch ? <MetricDelta value={ch.p_majority * 100} digits={0} suffix=" pt" /> : undefined} sub={`seuil ${meta.majority}`} />
              <Metric label="Plus de sièges" value={prob(lp.pMostSeats)} size="md" delta={ch ? <MetricDelta value={ch.p_most_seats * 100} digits={0} suffix=" pt" /> : undefined} />
              <Metric label="Vote populaire" value={pct(lp.voteMean)} size="sm" delta={ch ? <MetricDelta value={ch.vote} /> : undefined} sub={`± ${lp.voteSd.toFixed(1).replace(".", ",")}`} />
              <Metric label="Minoritaire" value={prob(f.summary.p_minority)} size="sm" sub={`aucun à ${meta.majority}`} />
            </div>
          </div>
          <div className="mt-6 md:mt-8 flex flex-wrap items-center gap-x-4 gap-y-1.5 text-[12px] md:text-[12.5px] text-ink-3">
            <span className="num">Mis à jour {dateTimeFr(f.completedAt)}</span>
            <span className="num">{f.pollCount} sondages · {int(f.nSimulations)} simulations{comp?.ess ? ` · ESS ${int(comp.ess)}` : ""}</span>
            {nSources > 0 && <Link href="/signaux" className="link">{nSources} source{nSources > 1 ? "s" : ""} au-delà des sondages →</Link>}
            <Link href="/methodologie" className="link">Méthodologie</Link>
          </div>
        </div>
        <div className="fade-up fade-up-2">
          <div className="flex items-center justify-between mb-3 gap-2">
            <div className="eyebrow">Assemblée nationale · médiane</div>
            <div className="text-[11px] mono text-ink-3 whitespace-nowrap">{meta.seatsTotal} sièges · maj. {meta.majority}</div>
          </div>
          <SeatWaffle seats={seats} total={meta.seatsTotal} majority={meta.majority} cols={16} />
          <div className="mt-5 space-y-3">
            {rows.map(([id, v]) => (
              <div key={id}>
                <div className="flex items-baseline justify-between text-[13px] mb-1 gap-2">
                  <span className="inline-flex items-center gap-2 min-w-0"><span className="w-2.5 h-2.5 rounded-[3px] shrink-0" style={{ background: partyVar(id) }} /><span className="font-semibold">{partyLabel(id)}</span><span className="text-ink-3 hidden sm:inline truncate">{party(id)?.officialName}</span></span>
                  <span className="num whitespace-nowrap"><b className="mono text-[16px]">{v.seatsMedian}</b> <span className="text-ink-3 mono text-[12px]">{v.seats80[0]}–{v.seats80[1]}</span>{pollsOnly && comp?.pollsOnly?.parties?.[id] && Math.abs(comp.pollsOnly.parties[id].seats - v.seatsMedian) >= 2 ? <span className="text-ink-3 text-[11px] ml-1.5" title="Sondages seuls">(sond. {comp.pollsOnly.parties[id].seats})</span> : null}</span>
                </div>
                <div className="relative h-[10px] rounded-[4px] bg-surface-3 overflow-hidden">
                  <div className="absolute inset-y-0 rounded-[4px]" style={{ left: `${(v.seats95[0] / meta.seatsTotal) * 100}%`, width: `${((v.seats95[1] - v.seats95[0]) / meta.seatsTotal) * 100}%`, background: partyAlpha(id, 0.18) }} />
                  <div className="absolute inset-y-0 rounded-[4px]" style={{ left: `${(v.seats80[0] / meta.seatsTotal) * 100}%`, width: `${((v.seats80[1] - v.seats80[0]) / meta.seatsTotal) * 100}%`, background: partyAlpha(id, 0.5) }} />
                  <div className="absolute inset-y-0 w-[3px] rounded-sm" style={{ left: `calc(${(v.seatsMedian / meta.seatsTotal) * 100}% - 1px)`, background: partyVar(id) }} />
                  <div className="absolute inset-y-0 w-[1.5px] bg-ink" style={{ left: `${(meta.majority / meta.seatsTotal) * 100}%` }} />
                </div>
              </div>
            ))}
          </div>
          <div className="flex justify-between text-[11px] text-ink-3 mono mt-2"><span>0</span><span className="font-bold text-ink">{meta.majority} · majorité</span><span>{meta.seatsTotal}</span></div>
        </div>
      </div>
    </section>
  );
}

// ------------------------------------------------------ BEYOND POLLS (accueil / prévision)
export function ComponentsCompare({ f, compact = false }: { f: Forecast; compact?: boolean }) {
  const comp = f.summary.components;
  if (!comp) return null;
  const ids = PARTY_IDS.filter((id) => (f.parties[id]?.pMostSeats ?? 0) > 0.005 || (comp.pollsOnly.parties[id]?.p_most_seats ?? 0) > 0.005 || (comp.markets.mostSeatsMarket?.[id] ?? 0) > 0.005);
  const rows = ids.map((id) => ({ id, label: partyLabel(id), values: { polls: comp.pollsOnly.parties[id]?.p_most_seats, market: comp.markets.enabled ? comp.markets.mostSeatsMarket?.[id] : undefined, ensemble: f.parties[id]?.pMostSeats } }));
  const series = [{ key: "polls", label: "Sondages seuls", shape: "ring" as const }, ...(comp.markets.enabled ? [{ key: "market", label: "Marchés (Polymarket)", shape: "diamond" as const }] : []), { key: "ensemble", label: "Ensemble QC26", shape: "dot" as const }];
  const leader = f.summary.leader;
  return (
    <div className={cls("grid gap-6", !compact && "lg:grid-cols-[1.2fr_1fr]")}>
      <div>
        <div className="eyebrow mb-2">Probabilité d&apos;obtenir le plus de sièges</div>
        <Dual narrow={<DotComparison rows={rows} series={series} width={340} />} wide={<DotComparison rows={rows} series={series} />} />
      </div>
      <div className="grid grid-cols-2 gap-2 sm:gap-3 content-start">
        <div className="inset p-3"><div className="text-[11px] text-ink-3">Majorité {partyLabel(leader)} · sondages seuls</div><div className="figure text-[26px] mt-1">{prob(comp.pollsOnly.parties[leader]?.p_majority)}</div></div>
        <div className="inset p-3"><div className="text-[11px] text-ink-3">Majorité {partyLabel(leader)} · marchés</div><div className="figure text-[26px] mt-1">{comp.markets.enabled && comp.markets.majorityMarket?.[leader] !== undefined ? prob(comp.markets.majorityMarket[leader]) : "—"}</div></div>
        <div className="inset p-3"><div className="text-[11px] text-ink-3">Majorité {partyLabel(leader)} · ensemble</div><div className="figure text-[26px] mt-1" style={{ color: partyVar(leader) }}>{prob(f.parties[leader].pMajority)}</div></div>
        <div className="inset p-3"><div className="text-[11px] text-ink-3">Poids des marchés</div><div className="figure text-[26px] mt-1">{comp.markets.enabled ? `${Math.round(comp.markets.weight * 100)} %` : "0 %"}</div></div>
        <div className="col-span-2 text-[12px] text-ink-3 leading-relaxed">
          Fondamentaux {comp.fundamentals.enabled ? `poids ${Math.round(comp.fundamentals.weight * 100)} % (satisfaction ${String(comp.fundamentals.satisfaction).replace(".", ",")} %)` : "inactifs"} · momentum {comp.momentum.enabled ? Object.entries(comp.momentum.shiftPp).filter(([k]) => k !== "aut").map(([k, v]) => `${partyLabel(k)} ${delta(v, 1)}`).join(", ") : "inactif"} · partielles {comp.byelections.enabled ? `${comp.byelections.ridings.length} circonscriptions` : "aucune"}.
          {!compact && <> <Link href="/signaux" className="link">Voir tous les signaux →</Link></>}
        </div>
      </div>
    </div>
  );
}

export { SectionHeader, Card };