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, partyColor, partyLabel, partyName, sortParties } from "@/lib/parties";
import { SeatDistribution } from "./charts";
import { PartyBadge, PartyDot, PartyLogo } from "./party";
import { Badge, Card, Metric, MetricDelta, ProbabilityBar, SectionHeader, SourceBadge } from "./ui";

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={cls("overflow-x-auto", className)}>
      <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 num text-[18px] font-bold" style={{ color: partyColor(id) }}>{v.seatsMedian}</td>
              <td className="r num">{v.seats80[0]}–{v.seats80[1]}</td>
              <td className="r num 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={partyColor(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>
      <p className="text-[12px] text-ink-3 mt-2">Médiane des {int(f.nSimulations)} simulations ; intervalles = percentiles 10–90 et 2,5–97,5. « Autres » n&apos;est jamais déclaré gagnant dans la version 1 du modèle.</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-[52px_1fr_auto] items-center gap-3">
          <span className="font-semibold num text-[13.5px]" style={{ color: partyColor(id) }}>{partyLabel(id)}</span>
          <div className="relative h-[16px] 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: partyColor(id), opacity: 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: partyColor(id), opacity: 0.3 }} />
            <div className="absolute inset-y-0 w-[2px] bg-ink" style={{ left: `${(v.voteMean / 50) * 100}%` }} />
          </div>
          <div className="flex items-baseline gap-2 num">
            <span className="font-bold text-[16px] w-[58px] text-right">{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]"><span className="font-semibold inline-flex items-center gap-1.5"><PartyDot id={id} />{partyName(id)}</span><span className="text-ink-2">plus de sièges {prob(v.pMostSeats)}</span></div>
          <ProbabilityBar p={v.pMajority} color={partyColor(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="#111827" label="minoritaire" height={12} />
      </div>
    </div>
  );
}

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 cause = d.causes[0];
  return (
    <div className="grid md:grid-cols-[1fr_1.2fr] gap-6">
      <div>
        <div className="eyebrow">Majorité {partyLabel(leader)}</div>
        <div className="num display text-[40px] mt-1">
          <span className="text-ink-3">{prob(f.parties[leader].pMajority - (ch?.p_majority ?? 0))}</span> <span className="text-ink-3 text-[24px]">→</span> {prob(f.parties[leader].pMajority)}
        </div>
        <div className="mt-3 text-[13.5px]">
          <div className="eyebrow mb-1">Cause principale</div>
          {cause?.kind === "new_polls" ? (
            <div>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>)}</div>
          ) : <div className="text-ink-2">{String(cause?.detail ?? "—")}</div>}
        </div>
        <div className="text-[12px] text-ink-3 mt-3">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>
        <table className="data-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>
            {Object.entries(d.changes).filter(([id]) => id !== "aut").sort((a, b) => Math.abs(b[1].seats) - Math.abs(a[1].seats)).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-3 text-[13px]">
            <div className="eyebrow mb-1">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"><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-2">Autre mouvement notable : {partyLabel(biggest[0])} P(majorité) {delta(biggest[1].p_majority * 100, 0, " pt")}.</div>}
      </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="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" style={{ color: partyColor(id) }}>{partyLabel(id)}</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" 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", id === lead && "font-bold")}>{p.results[id]?.toFixed(0) ?? "—"}</td>)}
                {!compact && <td className="r num text-ink-2">{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>
  );
}

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="grid sm:grid-cols-2 lg:grid-cols-5 gap-3">
      {rows.map((r) => (
        <Link key={r.code} href={`/circonscription/${r.slug}`} className="card p-3.5 hover:shadow-md transition-shadow block">
          <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: partyColor(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: partyColor(id) }} /></div><span className="num w-10 text-right">{prob(p)}</span></div>
            ))}
          </div>
        </Link>
      ))}
    </div>
  );
}

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-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-4">
            <div className="flex items-baseline justify-between"><div className="font-semibold">{g.name}</div><div className="text-[12px] text-ink-3 num">{g.ridings} circ.</div></div>
            <div className="flex 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: partyColor(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: partyColor(id) }}>{partyLabel(id)}</b> {n}</span>)}</div>
            <div className="mt-3 space-y-1">
              {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: partyColor(id) }}>{partyLabel(id)}</span><div className="h-[5px] rounded-full bg-surface-3 overflow-hidden"><div className="h-full" style={{ width: `${v * 2}%`, background: partyColor(id) }} /></div><span className="num text-right font-semibold">{v.toFixed(0)} %</span><span className="num text-right text-ink-3">{delta(v - (g.vote2022[id] ?? 0), 0, " pt")}</span></div>
              ))}
            </div>
            <div className="text-[11px] text-ink-3 mt-2">Vote projeté (moyenne des circonscriptions) · variation vs 2022 transposé</div>
          </div>
        );
      })}
    </div>
  );
}

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];
  return (
    <section className="grid lg:grid-cols-[1.1fr_1fr] gap-6 lg:gap-10 items-stretch">
      <div className="card card-lg p-6 md:p-8 flex flex-col">
        <div className="flex items-center justify-between flex-wrap gap-2">
          <div className="eyebrow">QC26 Forecast · Québec · 5 octobre 2026</div>
          <Badge tone="accent">Projection · Modèle {f.modelVersion}</Badge>
        </div>
        <div className="mt-6 flex items-end gap-6 flex-wrap">
          <div>
            <div className="text-[13px] text-ink-2 mb-1">Projection actuelle</div>
            <div className="flex items-center gap-3"><PartyLogo id={leader} height={26} /><span className="text-[15px] font-semibold">{partyName(leader)}</span></div>
            <div className="num display text-[84px] md:text-[112px] mt-1" style={{ color: partyColor(leader) }}>{lp.seatsMedian}</div>
            <div className="text-[14px] text-ink-2 -mt-2">sièges sur {meta.seatsTotal} · intervalle 80 % <span className="num font-semibold text-ink">{lp.seats80[0]}–{lp.seats80[1]}</span></div>
          </div>
          <div className="ml-auto grid grid-cols-2 gap-x-8 gap-y-4">
            <Metric label="Majorité" value={prob(lp.pMajority)} size="lg" 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="lg" delta={ch ? <MetricDelta value={ch.p_most_seats * 100} digits={0} suffix=" pt" /> : undefined} />
            <Metric label="Vote populaire" value={pct(lp.voteMean)} size="md" delta={ch ? <MetricDelta value={ch.vote} /> : undefined} sub={`± ${lp.voteSd.toFixed(1).replace(".", ",")}`} />
            <Metric label="Minoritaire" value={prob(f.summary.p_minority)} size="md" sub="aucun parti à 64" />
          </div>
        </div>
        <div className="mt-auto pt-6 flex flex-wrap items-center gap-x-5 gap-y-2 text-[12.5px] text-ink-3">
          <span className="num">Dernière mise à jour {dateTimeFr(f.completedAt)}</span>
          <span className="num">{f.pollCount} sondages · {int(f.nSimulations)} simulations</span>
          <span className="num">Dernier terrain {dateShort(f.summary.latest_poll)}</span>
          <Link href="/methodologie" className="link">Méthodologie</Link>
        </div>
      </div>
      <div className="card card-lg p-6 md:p-8">
        <div className="eyebrow mb-4">Sièges projetés · médiane et intervalle 80 %</div>
        <div className="space-y-4">
          {rows.map(([id, v]) => (
            <div key={id}>
              <div className="flex items-baseline justify-between text-[13.5px] mb-1">
                <span className="inline-flex items-center gap-2"><PartyLogo id={id} height={16} /><span className="font-semibold">{partyLabel(id)}</span><span className="text-ink-3 hidden sm:inline">{party(id)?.officialName}</span></span>
                <span className="num"><b className="text-[18px]">{v.seatsMedian}</b> <span className="text-ink-3">{v.seats80[0]}–{v.seats80[1]}</span></span>
              </div>
              <div className="relative h-[14px] 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: partyColor(id), opacity: 0.16 }} />
                <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: partyColor(id), opacity: 0.45 }} />
                <div className="absolute inset-y-0 w-[3px] rounded-sm" style={{ left: `calc(${(v.seatsMedian / meta.seatsTotal) * 100}% - 1px)`, background: partyColor(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 num mt-2"><span>0</span><span className="font-bold text-ink">{meta.majority} · majorité</span><span>{meta.seatsTotal}</span></div>
        <div className="mt-5 grid grid-cols-3 gap-3 text-center">
          {rows.slice(0, 3).map(([id, v]) => (
            <div key={id} className="rounded-[8px] surface-2 p-2.5"><div className="text-[11px] text-ink-3">P(majorité)</div><div className="num font-bold text-[18px]" style={{ color: partyColor(id) }}>{prob(v.pMajority)}</div><div className="text-[11px] font-semibold">{partyLabel(id)}</div></div>
          ))}
        </div>
      </div>
    </section>
  );
}

export { SectionHeader, Card };