"use client";

import type { FeatureCollection, Geometry } from "geojson";
import Link from "next/link";
import { useEffect, useMemo, useState } from "react";
import { useMeasure } from "@/lib/use-measure";
import { cls } from "@/lib/format";
import { PARTY_IDS, partyVar, partyLabel } from "@/lib/parties";
import { QuebecMap, type MapMode, type MapRiding } from "./map";

const MODES: { id: MapMode; label: string; hint: string }[] = [
  { id: "projection", label: "Projection", hint: "Favori par circonscription ; intensité = certitude" },
  { id: "probabilite", label: "Probabilité", hint: "Opacité proportionnelle à la probabilité de victoire" },
  { id: "marge", label: "Marge", hint: "Écart projeté entre le favori et le 2e" },
  { id: "variation", label: "Variation", hint: "Circonscriptions qui changeraient de parti vs 2022" },
  { id: "2022", label: "2022", hint: "Résultat 2022 transposé sur la carte 2026" },
];

interface RidingsPayload { ridings: (MapRiding & { incumbent?: { party: string | null } })[]; regions: { id: string; name: string }[] }

export function MapSection({ height = 560, compact = false, initialMode = "projection", showModes = true, live = false, liveState }: {
  height?: number; compact?: boolean; initialMode?: MapMode; showModes?: boolean; live?: boolean;
  liveState?: Record<string, { status: string; leader: string | null; bureaux: [number, number]; marginPct: number | null }> | null;
}) {
  const [geo, setGeo] = useState<FeatureCollection<Geometry, { code: number; name: string; slug: string }> | null>(null);
  const [data, setData] = useState<RidingsPayload | null>(null);
  const [mode, setMode] = useState<MapMode>(live ? "live" : initialMode);
  const { ref, width } = useMeasure<HTMLDivElement>(1000);
  const mobile = width < 640;
  useEffect(() => {
    fetch("/api/geo").then((r) => r.json()).then(setGeo).catch(() => {});
    fetch("/api/ridings").then((r) => r.json()).then(setData).catch(() => {});
  }, []);
  // « 2022 » = parti du député sortant de la circonscription contributrice principale (résultat 2022 transposé)
  const ridings = useMemo(() => {
    const out: Record<number, MapRiding> = {};
    data?.ridings.forEach((r) => {
      out[r.code] = { ...r, baseline2022: r.incumbent?.party ?? null, live: liveState?.[String(r.code)] ?? r.live ?? null };
    });
    return out;
  }, [data, liveState]);
  const counts = useMemo(() => {
    const c: Record<string, number> = {};
    Object.values(ridings).forEach((r) => {
      const id = mode === "live" ? r.live?.leader : mode === "2022" ? r.baseline2022 : r.forecast?.favorite;
      if (id) c[id] = (c[id] ?? 0) + 1;
    });
    return c;
  }, [ridings, mode]);
  if (!geo || !data) return <div ref={ref} className="rounded-[10px] bg-surface-2 animate-pulse" style={{ height: mobile ? 380 : height }} aria-busy />;
  return (
    <div ref={ref}>
      {showModes && (
        <div className="flex flex-nowrap sm:flex-wrap overflow-x-auto scrollbar-none items-center gap-1.5 mb-3 -mx-1 px-1">
          {(live ? [{ id: "live" as MapMode, label: "2026 Live", hint: "Résultats officiels en cours" }, ...MODES.filter((m) => m.id === "projection" || m.id === "2022")] : MODES).map((m) => (
            <button key={m.id} onClick={() => setMode(m.id)} title={m.hint} className={cls("chip !py-1.5 !px-3 !text-[12.5px] shrink-0", mode === m.id && "chip-active")}>{m.label}</button>
          ))}
          <span className="text-[12px] text-ink-3 ml-1 hidden md:inline">{(live ? [{ id: "live", hint: "Résultats officiels en cours" }, ...MODES] : MODES).find((m) => m.id === mode)?.hint}</span>
        </div>
      )}
      <QuebecMap geo={geo} ridings={ridings} mode={mode} height={mobile ? 820 : height} compact={compact || mobile} interactive insets={mobile ? "below" : "overlay"} />
      <div className="flex flex-wrap items-center gap-x-4 gap-y-1 mt-3 text-[12.5px]">
        {PARTY_IDS.filter((id) => counts[id]).sort((a, b) => (counts[b] ?? 0) - (counts[a] ?? 0)).map((id) => (
          <span key={id} className="inline-flex items-center gap-1.5 num"><span className="w-2.5 h-2.5 rounded-[3px]" style={{ background: partyVar(id) }} /><b>{partyLabel(id)}</b> {counts[id]}</span>
        ))}
        <span className="text-ink-3">{mode === "live" ? "En tête / élu" : mode === "2022" ? "Sièges 2022 transposés" : "Favoris (probabilité, pas certitude)"}</span>
        <Link href="/carte" className="link ml-auto text-[12.5px]">Carte complète →</Link>
      </div>
    </div>
  );
}