"use client";

import { useEffect, useState } from "react";
import { int, pct, prob, statusLabel, timeFr } from "@/lib/format";
import { partyVar, partyLabel } from "@/lib/parties";
import { PartyDot } from "./party";
import { Badge, Card, LiveBadge, SectionHeader } from "./ui";

interface Live { status: string; updatedAt: string | null; bureaux: [number, number]; votesValid: number; turnout: number | null; leader: string | null; marginVotes: number | null; marginPct: number | null; candidates: { name: string; party_id: string; votes: number; share: number }[] | null; final: boolean }

export function RidingLive({ code, initial, forecast }: { code: number; initial: Live; forecast: { favorite: string; p: number } | null }) {
  const [live, setLive] = useState<Live>(initial);
  useEffect(() => {
    const load = () => fetch(`/api/ridings/${code}`, { cache: "no-store" }).then((r) => r.json()).then((d) => d.live && setLive(d.live)).catch(() => {});
    const t = setInterval(load, 20000);
    let es: EventSource | null = null;
    try { es = new EventSource("/api/live/stream"); es.addEventListener("snapshot", load); } catch { /* polling */ }
    return () => { clearInterval(t); es?.close(); };
  }, [code]);
  const total = live.candidates?.reduce((a, c) => a + c.votes, 0) ?? 0;
  return (
    <section>
      <SectionHeader eyebrow="Soirée électorale" title="Résultats officiels" description="Données d'Élections Québec ; « Projeté QC26 » est une inférence du nowcast, « Élu·e / Final » provient du dépouillement complet." action={<LiveBadge label={live.final ? "Final" : "Direct"} />} />
      <Card>
        <div className="flex flex-wrap items-center gap-3 text-[13.5px]"><Badge tone={live.status === "PROJECTED" ? "accent" : live.status === "ELECTED" || live.status === "FINAL" ? "ok" : "neutral"}>{statusLabel(live.status)}</Badge><span className="num">{live.bureaux[0]} / {live.bureaux[1]} bureaux ({live.bureaux[1] ? Math.round((100 * live.bureaux[0]) / live.bureaux[1]) : 0} %)</span><span className="num text-ink-2">{int(live.votesValid)} votes valides</span>{live.turnout && <span className="num text-ink-2">participation {pct(live.turnout)}</span>}<span className="num text-ink-3 ml-auto">màj {timeFr(live.updatedAt)}</span></div>
        <div className="mt-4 space-y-2">
          {(live.candidates ?? []).map((c, i) => (
            <div key={c.name} className="grid grid-cols-[1fr_120px_70px_60px] items-center gap-3 text-[13.5px]">
              <span className="inline-flex items-center gap-2 truncate"><PartyDot id={c.party_id} />{c.name} <span className="text-ink-3">{partyLabel(c.party_id)}</span>{i === 0 && live.leader && <span className="text-[10.5px] uppercase font-semibold text-ink-2">en tête</span>}</span>
              <div className="h-[12px] bg-surface-3 rounded-[4px] overflow-hidden"><div className="h-full" style={{ width: `${total ? (c.votes / total) * 100 : 0}%`, background: partyVar(c.party_id) }} /></div>
              <span className="num text-right">{int(c.votes)}</span><span className="num text-right font-semibold">{pct(total ? (100 * c.votes) / total : 0)}</span>
            </div>
          ))}
        </div>
        {live.marginVotes !== null && <div className="text-[12.5px] text-ink-2 mt-3 num">Marge : {int(live.marginVotes)} votes ({pct(live.marginPct)}){forecast && <> · Forecast QC26 avant 20 h : {partyLabel(forecast.favorite)} favori à {prob(forecast.p)}</>}</div>}
      </Card>
    </section>
  );
}