"use client";

import Link from "next/link";
import { useEffect, useMemo, useRef, useState } from "react";
import type { Forecast, LiveState, Meta } from "@/lib/api";
import { cls, dateTimeFr, int, pct, prob, relTime, statusLabel, timeFr } from "@/lib/format";
import { PARTY_IDS, partyVar, partyLabel, partyName } from "@/lib/parties";
import { SeatMeter } from "./charts";
import { MapSection } from "./map-section";
import { PartyBadge, PartyDot, PartyLogo } from "./party";
import { Badge, Card, LiveBadge, ProbabilityBar, ProjectionBadge, SectionHeader } from "./ui";

interface LiveEvent { id: number; ts: string; kind: string; message: string; ridingCode: number | null; riding?: string | null; party: string | null }

/** Hook : état live + événements, rafraîchi par SSE (repli : polling 20 s). */
export function useLive(initial?: LiveState | null) {
  const [state, setState] = useState<LiveState | null>(initial ?? null);
  const [events, setEvents] = useState<LiveEvent[]>([]);
  const [connected, setConnected] = useState(false);
  const [lastMsg, setLastMsg] = useState<string | null>(null);
  const lastId = useRef(0);
  const refresh = async () => {
    try {
      const [st, ev] = await Promise.all([fetch("/api/live/state", { cache: "no-store" }).then((r) => r.json()), fetch(`/api/live/events?since=${lastId.current}&limit=60`, { cache: "no-store" }).then((r) => r.json())]);
      setState(st);
      if (ev.events?.length) {
        setEvents((prev) => { const merged = [...ev.events, ...prev]; const seen = new Set<number>(); return merged.filter((e) => !seen.has(e.id) && seen.add(e.id)).slice(0, 200); });
        lastId.current = Math.max(lastId.current, ...ev.events.map((e: LiveEvent) => e.id));
      }
      setLastMsg(new Date().toISOString());
    } catch { /* garder le dernier état valide */ }
  };
  useEffect(() => {
    refresh();
    let es: EventSource | null = null;
    let poll: ReturnType<typeof setInterval> | null = null;
    try {
      es = new EventSource("/api/live/stream");
      es.onopen = () => setConnected(true);
      es.onerror = () => setConnected(false);
      es.addEventListener("snapshot", () => refresh());
      es.addEventListener("nowcast", () => refresh());
      es.addEventListener("status", () => refresh());
    } catch { setConnected(false); }
    poll = setInterval(refresh, 20000);
    return () => { es?.close(); if (poll) clearInterval(poll); };
  }, []);
  return { state, events, connected, lastMsg };
}

export function LiveHome({ meta, forecast, initial }: { meta: Meta; forecast: Forecast; initial?: LiveState | null }) {
  const { state, events, connected } = useLive(initial);
  const seatsNow = state?.seatsNow ?? {};
  const totalNow = (id: string) => (seatsNow[id]?.elected ?? 0) + (seatsNow[id]?.leading ?? 0);
  const leaderNow = PARTY_IDS.slice().sort((a, b) => totalNow(b) - totalNow(a))[0];
  const nc = state?.nowcast;
  const reporting = state?.snapshot?.reporting ?? 0;
  const archive = meta.mode === "archive";
  return (
    <div className="space-y-12">
      <section className="card card-lg p-6 md:p-8 grid lg:grid-cols-[1fr_1fr] gap-8">
        <div>
          <div className="flex items-center gap-3 flex-wrap">{archive ? <Badge tone="ink">Archive · Résultats</Badge> : <LiveBadge />}{state?.simulation && <Badge tone="warn">Simulation (données synthétiques 2022)</Badge>}{state?.quarantine && <Badge tone="warn">Flux en quarantaine</Badge>}</div>
          <h1 className="display text-[40px] md:text-[56px] mt-4">Québec 2026<br /><span className="text-ink-2">{archive ? "Résultats officiels" : "Résultats en direct"}</span></h1>
          <div className="mt-6 flex items-end gap-8 flex-wrap">
            <div><div className="num display text-[72px] md:text-[96px]">{reporting}<span className="text-ink-3 text-[32px]"> / {meta.seatsTotal}</span></div><div className="text-[13.5px] text-ink-2 -mt-1">circonscriptions rapportent</div></div>
            <div><div className="num display text-[56px]">{meta.majority}</div><div className="text-[13.5px] text-ink-2">majorité</div></div>
          </div>
          <FeedStatus state={state} connected={connected} />
        </div>
        <div>
          <div className="eyebrow mb-3">{archive ? "Résultat final" : "Résultat live"} · élus + en avance</div>
          <SeatMeter seats={Object.fromEntries(PARTY_IDS.map((id) => [id, totalNow(id)]))} total={meta.seatsTotal} majority={meta.majority} showLabels={false} title="Sièges en avance ou élus" />
          <div className="mt-4 space-y-2.5">
            {PARTY_IDS.slice().sort((a, b) => totalNow(b) - totalNow(a)).map((id) => (
              <div key={id} className="grid grid-cols-[86px_1fr_auto] items-center gap-3 text-[13.5px]">
                <PartyLogo id={id} height={16} />
                <div className="text-ink-2 num"><b className="text-ink">{seatsNow[id]?.elected ?? 0}</b> élus · <b className="text-ink">{seatsNow[id]?.leading ?? 0}</b> en avance</div>
                <div className="num font-bold text-[22px]" style={{ color: partyVar(id) }}>{totalNow(id)}</div>
              </div>
            ))}
          </div>
          {nc && (
            <div className="mt-5 pt-4 border-t border-border">
              <div className="flex items-baseline justify-between"><div className="eyebrow">Probabilité de majorité {partyLabel(leaderNow)} · Nowcast QC26</div><ProjectionBadge>Nowcast</ProjectionBadge></div>
              <div className="num display text-[44px] mt-1" style={{ color: partyVar(leaderNow) }}>{prob(nc.parties[leaderNow]?.p_majority)}</div>
              <ProbabilityBar p={nc.parties[leaderNow]?.p_majority ?? 0} color={partyVar(leaderNow)} height={14} showValue={false} />
              <div className="text-[12px] text-ink-3 mt-1 num">Minoritaire {prob(nc.p_minority)} · couverture {pct(nc.coverage * 100, 0)} · {relTime(nc.ts)}</div>
            </div>
          )}
        </div>
      </section>

      <section className="grid lg:grid-cols-[1.3fr_1fr] gap-6">
        <div>
          <SectionHeader eyebrow="Forecast vs Live" title="Prévision QC26 contre les résultats" description="La colonne Forecast est la dernière projection publiée avant 20 h. La colonne Live ne contient que des données officielles." action={<Link href="/live/model-vs-reality" className="link text-[13.5px]">Modèle vs réalité →</Link>} />
          <Card pad={false}>
            <table className="data-table"><thead><tr><th>Parti</th><th className="r">Forecast</th><th className="r">Élus</th><th className="r">En avance</th><th className="r">Live</th><th className="r">Nowcast</th><th className="r">P(maj)</th></tr></thead>
              <tbody>
                {PARTY_IDS.slice().sort((a, b) => totalNow(b) - totalNow(a) || forecast.parties[b].seatsMedian - forecast.parties[a].seatsMedian).map((id) => (
                  <tr key={id}>
                    <td><span className="inline-flex items-center gap-2"><PartyDot id={id} /><b>{partyLabel(id)}</b></span></td>
                    <td className="r num text-ink-2">{forecast.parties[id].seatsMedian} <span className="text-ink-3 text-[11px]">({forecast.parties[id].seats80[0]}–{forecast.parties[id].seats80[1]})</span></td>
                    <td className="r num">{seatsNow[id]?.elected ?? 0}</td>
                    <td className="r num">{seatsNow[id]?.leading ?? 0}</td>
                    <td className="r num font-bold text-[16px]" style={{ color: partyVar(id) }}>{totalNow(id)}</td>
                    <td className="r num">{nc ? `${nc.parties[id]?.seats_median} ` : "—"}{nc && <span className="text-ink-3 text-[11px]">({nc.parties[id]?.seats80[0]}–{nc.parties[id]?.seats80[1]})</span>}</td>
                    <td className="r num">{nc ? prob(nc.parties[id]?.p_majority) : "—"}</td>
                  </tr>
                ))}
              </tbody></table>
          </Card>
          <div className="mt-6"><SectionHeader eyebrow="Carte live" title="Le Québec, bureau par bureau" description="Gris : aucun résultat. Couleur pâle : dépouillement en cours. Couleur pleine : élu·e, final ou projeté QC26." /><Card pad={false} className="p-3 md:p-4"><MapSection height={520} compact live liveState={state?.ridings as never} /></Card></div>
        </div>
        <div className="space-y-6">
          <div><SectionHeader eyebrow="Fil des résultats" title="Ticker" description="Événements construits uniquement à partir des données officielles." /><Ticker events={events} /></div>
          <MajorityTimeline />
        </div>
      </section>
      <section>
        <SectionHeader eyebrow="Battlegrounds live" title="Courses les plus serrées" description="Circonscriptions rapportées où la marge est la plus faible." />
        <CloseRaces state={state} />
      </section>
    </div>
  );
}

export function FeedStatus({ state, connected }: { state: LiveState | null; connected: boolean }) {
  const lv = state?.lastValid;
  return (
    <div className="mt-6 text-[12.5px] text-ink-2 space-y-1">
      <div className="flex items-center gap-2"><span className={cls("w-2 h-2 rounded-full", connected ? "bg-ok" : "bg-warn")} />Flux Élections Québec · {state?.quarantine ? <span className="text-warn font-semibold">actualisation temporairement retardée (anomalie détectée)</span> : lv ? <span>dernière donnée officielle reçue <b className="num">{timeFr(lv.at)}</b>{lv.source_updated_at ? ` (horodatage DGEQ ${lv.source_updated_at.slice(11, 19)})` : ""}</span> : <span>en attente des premiers résultats</span>}</div>
      <div className="text-ink-3">Source : donnees.electionsquebec.qc.ca (JSON officiel, mis à jour toutes les 2 à 5 min après 20 h). QC26 conserve toujours la dernière donnée valide ; l&apos;absence de données n&apos;est jamais affichée comme un zéro.</div>
    </div>
  );
}

export function Ticker({ events, limit = 30 }: { events: LiveEvent[]; limit?: number }) {
  return (
    <Card pad={false} className="max-h-[560px] overflow-auto">
      {events.length === 0 && <div className="p-6 text-center text-ink-3 text-[13.5px]">Aucun événement pour l&apos;instant.</div>}
      <ul>
        {events.slice(0, limit).map((e) => (
          <li key={e.id} className="ticker-in flex gap-3 px-4 py-2.5 border-b border-border last:border-0 text-[13px]">
            <span className="num text-ink-3 shrink-0 w-[60px]">{timeFr(e.ts).slice(0, 5)}</span>
            <span className={cls("shrink-0 w-2 h-2 rounded-full mt-1.5", e.kind === "lead_change" ? "bg-warn" : e.kind === "riding_complete" ? "bg-ok" : e.kind === "quarantine" ? "bg-live" : "bg-ink-3")} style={e.party ? { background: partyVar(e.party) } : undefined} />
            <span className="min-w-0">{e.ridingCode ? <Link href={`/circonscription/${e.ridingCode}`} className="hover:underline">{e.message}</Link> : e.message}</span>
          </li>
        ))}
      </ul>
    </Card>
  );
}

export function MajorityTimeline() {
  const [hist, setHist] = useState<{ ts: string; reporting: number; parties: Record<string, { pMajority: number }>; pMinority: number }[]>([]);
  useEffect(() => {
    const load = () => fetch("/api/live/nowcast/history", { cache: "no-store" }).then((r) => r.json()).then((d) => setHist(d.history ?? [])).catch(() => {});
    load();
    const t = setInterval(load, 30000);
    return () => clearInterval(t);
  }, []);
  if (hist.length < 2) return null;
  const W = 420, H = 160, pl = 30, pb = 22;
  const x = (i: number) => pl + (i / (hist.length - 1)) * (W - pl - 8);
  const y = (p: number) => 8 + (1 - p) * (H - pb - 8);
  return (
    <div>
      <SectionHeader eyebrow="Nowcast" title="Probabilité de majorité dans le temps" />
      <Card>
        <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-auto" role="img" aria-label="Évolution de la probabilité de majorité par parti">
          {[0, 0.5, 1].map((p) => (<g key={p}><line x1={pl} x2={W - 8} y1={y(p)} y2={y(p)} stroke="var(--border)" /><text x={pl - 4} y={y(p) + 3} fontSize={9.5} textAnchor="end" fill="var(--text-3)">{Math.round(p * 100)}</text></g>))}
          {PARTY_IDS.map((id) => (<polyline key={id} fill="none" stroke={partyVar(id)} strokeWidth={2} points={hist.map((h, i) => `${x(i)},${y(h.parties[id]?.pMajority ?? 0)}`).join(" ")} />))}
          <polyline fill="none" stroke="var(--text)" strokeWidth={1.5} strokeDasharray="3 3" points={hist.map((h, i) => `${x(i)},${y(h.pMinority ?? 0)}`).join(" ")} />
          {[0, Math.floor(hist.length / 2), hist.length - 1].map((i) => (<text key={i} x={x(i)} y={H - 6} fontSize={9.5} textAnchor="middle" fill="var(--text-3)" className="num">{timeFr(hist[i].ts).slice(0, 5)}</text>))}
        </svg>
        <div className="flex flex-wrap gap-x-3 text-[11.5px] mt-1">{PARTY_IDS.map((id) => <span key={id} className="inline-flex items-center gap-1"><PartyDot id={id} />{partyLabel(id)}</span>)}<span className="inline-flex items-center gap-1"><span className="w-3 border-t border-dashed border-ink" />Minoritaire</span></div>
      </Card>
    </div>
  );
}

export function CloseRaces({ state, limit = 10 }: { state: LiveState | null; limit?: number }) {
  const [names, setNames] = useState<Record<string, { name: string; slug: string }>>({});
  useEffect(() => { fetch("/api/ridings").then((r) => r.json()).then((d) => setNames(Object.fromEntries(d.ridings.map((r: { code: number; name: string; slug: string }) => [String(r.code), { name: r.name, slug: r.slug }])))).catch(() => {}); }, []);
  const rows = useMemo(() => Object.entries(state?.ridings ?? {}).filter(([, r]) => r.bureaux[0] > 0 && r.marginPct !== null && !r.final).sort((a, b) => (a[1].marginPct ?? 99) - (b[1].marginPct ?? 99)).slice(0, limit), [state, limit]);
  if (!rows.length) return <Card><div className="text-ink-3 text-[13.5px] text-center py-4">Aucune circonscription en dépouillement.</div></Card>;
  return (
    <div className="grid sm:grid-cols-2 lg:grid-cols-5 gap-3">
      {rows.map(([code, r]) => (
        <Link key={code} href={`/circonscription/${names[code]?.slug ?? code}`} className="card p-3.5 block hover:shadow-md">
          <div className="font-semibold text-[14px] leading-tight">{names[code]?.name ?? code}</div>
          <div className="text-[11.5px] text-ink-3 mt-0.5 num">{statusLabel(r.status)} · {r.bureaux[0]}/{r.bureaux[1]} bureaux</div>
          <div className="mt-2 space-y-1">{(r.candidates ?? []).slice(0, 3).map((c) => (<div key={c.name} className="flex justify-between text-[12.5px]"><span className="inline-flex items-center gap-1.5 truncate"><PartyDot id={c.party_id} />{c.name}</span><span className="num">{int(c.votes)}</span></div>))}</div>
          <div className="text-[12px] mt-2 num">Marge <b>{pct(r.marginPct)}</b> · {int(r.marginVotes)} votes</div>
        </Link>
      ))}
    </div>
  );
}

export { PartyBadge, partyName, dateTimeFr };