"use client";

import { useEffect, useMemo, useState } from "react";
import { dateFr, dateTimeFr, prob } from "@/lib/format";
import { PARTY_IDS, partyVar, partyLabel } from "@/lib/parties";
import { SeatMeter } from "./charts";

interface Run { id: number; date: string; completedAt: string | null; modelVersion: string; pollCount: number; parties: Record<string, { vote: number; seats: number; seats80: [number, number]; pMajority: number; pMostSeats: number }>; pMinority: number }

export function ForecastHistory({ majority, total }: { majority: number; total: number }) {
  const [runs, setRuns] = useState<Run[]>([]);
  const [i, setI] = useState(0);
  useEffect(() => { fetch("/api/forecast/history").then((r) => r.json()).then((d) => { setRuns(d.runs ?? []); setI(Math.max(0, (d.runs?.length ?? 1) - 1)); }).catch(() => {}); }, []);
  const run = runs[i];
  const W = 640, H = 120;
  const path = useMemo(() => {
    if (runs.length < 2) return null;
    const x = (k: number) => 8 + (k / (runs.length - 1)) * (W - 16);
    const y = (p: number) => 6 + (1 - p) * (H - 12);
    return PARTY_IDS.map((id) => ({ id, d: runs.map((r, k) => `${k ? "L" : "M"}${x(k)},${y(r.parties[id]?.pMajority ?? 0)}`).join(" ") }));
  }, [runs]);
  if (!run) return <div className="text-ink-3 text-[13.5px]">Historique en cours de constitution : un point par jour de recalcul.</div>;
  return (
    <div>
      <div className="flex items-center gap-4 flex-wrap">
        <input type="range" min={0} max={Math.max(0, runs.length - 1)} value={i} onChange={(e) => setI(Number(e.target.value))} className="flex-1 min-w-[200px]" aria-label="Date du run" />
        <div className="num text-[13.5px]"><b>{dateFr(run.date)}</b> <span className="text-ink-3">run #{run.id} · {run.pollCount} sondages · modèle {run.modelVersion}</span></div>
      </div>
      <div className="flex justify-between text-[11px] text-ink-3 num mt-1"><span>{dateFr(runs[0].date, { day: "numeric", month: "short" })}</span><span>{dateFr(runs[runs.length - 1].date, { day: "numeric", month: "short" })}</span></div>
      <div className="mt-4"><SeatMeter seats={Object.fromEntries(PARTY_IDS.map((id) => [id, run.parties[id]?.seats ?? 0]))} total={total} majority={majority} /></div>
      <div className="grid grid-cols-2 md:grid-cols-5 gap-2 mt-4">
        {PARTY_IDS.slice().sort((a, b) => (run.parties[b]?.seats ?? 0) - (run.parties[a]?.seats ?? 0)).map((id) => (
          <div key={id} className="surface-2 rounded-[8px] p-2.5 text-[12.5px]"><b style={{ color: partyVar(id) }}>{partyLabel(id)}</b><div className="num mt-1"><b className="text-[18px]">{run.parties[id]?.seats}</b> <span className="text-ink-3">{run.parties[id]?.seats80?.join("–")}</span></div><div className="num text-ink-2">{run.parties[id]?.vote?.toFixed(1)} % · maj. {prob(run.parties[id]?.pMajority)}</div></div>
        ))}
      </div>
      {path && (
        <div className="mt-5">
          <div className="eyebrow mb-1">P(majorité) par run</div>
          <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-auto" role="img" aria-label="Probabilité de majorité par run">
            {[0, 0.5, 1].map((p) => <line key={p} x1={8} x2={W - 8} y1={6 + (1 - p) * (H - 12)} y2={6 + (1 - p) * (H - 12)} stroke="var(--border)" />)}
            {path.map((p) => <path key={p.id} d={p.d} fill="none" stroke={partyVar(p.id)} strokeWidth={2} />)}
            <line x1={8 + (i / Math.max(1, runs.length - 1)) * (W - 16)} x2={8 + (i / Math.max(1, runs.length - 1)) * (W - 16)} y1={0} y2={H} stroke="var(--text)" strokeDasharray="3 3" />
          </svg>
        </div>
      )}
      <div className="text-[11.5px] text-ink-3 mt-2">Run terminé {dateTimeFr(run.completedAt)}.</div>
    </div>
  );
}