"use client";

import { geoMercator, geoPath } from "d3-geo";
import type { FeatureCollection, Geometry } from "geojson";
import { useRouter } from "next/navigation";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { cls, pct, prob, ratingLabel, statusLabel } from "@/lib/format";
import { partyAlpha, partyLabel, partyVar } from "@/lib/parties";

export type MapMode = "projection" | "probabilite" | "marge" | "variation" | "2022" | "live";

export interface MapRiding {
  code: number; name: string; slug: string; region: string | null;
  forecast: { favorite: string; p: number; runnerUp: string | null; margin: number; rating: string; swing: number; pWin: Record<string, number> } | null;
  baseline2022?: string | null;
  live?: { status: string; leader: string | null; bureaux: [number, number]; marginPct: number | null } | null;
}

interface Props {
  geo: FeatureCollection<Geometry, { code: number; name: string; slug: string }>;
  ridings: Record<number, MapRiding>;
  mode: MapMode;
  height?: number;
  interactive?: boolean;
  focus?: number | null;
  className?: string;
  onSelect?: (code: number) => void;
  compact?: boolean;
  /** overlay = encarts superposés (desktop) ; below = encarts rendus sous la carte (mobile) */
  insets?: "overlay" | "below" | "none";
}

function fillFor(r: MapRiding | undefined, mode: MapMode): string {
  if (!r) return "var(--p-none)";
  if (mode === "live") {
    const l = r.live;
    if (!l || l.status === "NOT_STARTED" || !l.leader) return "var(--p-none)";
    const strong = l.status === "ELECTED" || l.status === "FINAL" || l.status === "PROJECTED";
    return strong ? partyVar(l.leader) : partyAlpha(l.leader, 0.45);
  }
  if (mode === "2022") return r.baseline2022 ? partyVar(r.baseline2022) : "var(--p-none)";
  const f = r.forecast;
  if (!f) return "var(--p-none)";
  if (mode === "projection") return partyAlpha(f.favorite, 0.35 + 0.65 * Math.min(1, (f.p - 0.4) / 0.6));
  if (mode === "probabilite") return partyAlpha(f.favorite, 0.25 + 0.75 * f.p);
  if (mode === "marge") return partyAlpha(f.favorite, Math.min(1, 0.25 + f.margin / 30));
  if (mode === "variation") {
    if (r.baseline2022 && r.baseline2022 !== f.favorite) return partyVar(f.favorite);
    return partyAlpha(f.favorite, 0.18);
  }
  return partyVar(f.favorite);
}

export function QuebecMap({ geo, ridings, mode, height = 560, interactive = true, focus = null, className, onSelect, compact = false, insets = "overlay" }: Props) {
  const router = useRouter();
  const W = 900, H = height;
  const [hover, setHover] = useState<number | null>(null);
  const [tip, setTip] = useState<{ x: number; y: number } | null>(null);
  const [view, setView] = useState<{ k: number; x: number; y: number }>({ k: 1, x: 0, y: 0 });
  const svgRef = useRef<SVGSVGElement>(null);
  const drag = useRef<{ x: number; y: number; vx: number; vy: number } | null>(null);
  const pinch = useRef<{ d: number; k: number } | null>(null);

  const { path, byCode } = useMemo(() => {
    // Cadrage sur le Québec habité : Ungava (Nord-du-Québec, code 831) est volontairement tronqué au nord,
    // sinon il occupe les deux tiers de la carte. Il reste visible et cliquable dans la partie haute.
    const south = { type: "FeatureCollection", features: geo.features.filter((f) => f.properties.code !== 831) } as FeatureCollection<Geometry>;
    const proj = geoMercator().fitExtent([[8, 40], [W - 8, H - 8]], south);
    const p = geoPath(proj);
    const m = new Map<number, string>();
    geo.features.forEach((f) => m.set(f.properties.code, p(f) ?? ""));
    return { path: p, byCode: m };
  }, [geo, H]);

  // insets : Montréal (zoom) — bounding box calculée sur les circonscriptions de l'île + Laval
  const insetMtl = useMemo(() => {
    const feats = geo.features.filter((f) => ["montreal", "laval"].includes((ridings[f.properties.code]?.region ?? "")));
    if (!feats.length) return null;
    const fc = { type: "FeatureCollection", features: feats } as FeatureCollection<Geometry>;
    const size = compact ? 200 : 260;
    const proj = geoMercator().fitExtent([[4, 4], [size - 4, size - 4]], fc);
    const p = geoPath(proj);
    return { size, paths: feats.map((f) => [f.properties.code, p(f) ?? ""] as const) };
  }, [geo, ridings, compact]);
  const insetQc = useMemo(() => {
    const feats = geo.features.filter((f) => ["capitale-nationale", "chaudiere-appalaches"].includes(ridings[f.properties.code]?.region ?? ""));
    if (!feats.length) return null;
    const fc = { type: "FeatureCollection", features: feats } as FeatureCollection<Geometry>;
    const size = compact ? 150 : 200;
    const proj = geoMercator().fitExtent([[4, 4], [size - 4, size - 4]], fc);
    const p = geoPath(proj);
    return { size, paths: feats.map((f) => [f.properties.code, p(f) ?? ""] as const) };
  }, [geo, ridings, compact]);

  useEffect(() => {
    if (!focus) return;
    const f = geo.features.find((x) => x.properties.code === focus);
    if (!f) return;
    const [[x0, y0], [x1, y1]] = path.bounds(f);
    const k = Math.min(8, 0.5 / Math.max((x1 - x0) / W, (y1 - y0) / H));
    setView({ k, x: W / 2 - (k * (x0 + x1)) / 2, y: H / 2 - (k * (y0 + y1)) / 2 });
  }, [focus, geo, path, H]);

  const onWheel = useCallback((e: React.WheelEvent) => {
    if (!interactive) return;
    e.preventDefault();
    const rect = svgRef.current!.getBoundingClientRect();
    const mx = ((e.clientX - rect.left) / rect.width) * W, my = ((e.clientY - rect.top) / rect.height) * H;
    setView((v) => {
      const k = Math.max(1, Math.min(12, v.k * (e.deltaY < 0 ? 1.15 : 0.87)));
      return { k, x: mx - ((mx - v.x) / v.k) * k, y: my - ((my - v.y) / v.k) * k };
    });
  }, [interactive]);

  const toSvg = (cx: number, cy: number) => { const r = svgRef.current!.getBoundingClientRect(); return [((cx - r.left) / r.width) * W, ((cy - r.top) / r.height) * H]; };
  const onPointerDown = (e: React.PointerEvent) => { if (!interactive) return; drag.current = { x: e.clientX, y: e.clientY, vx: view.x, vy: view.y }; };
  const onPointerMove = (e: React.PointerEvent) => {
    if (drag.current && e.buttons) {
      const r = svgRef.current!.getBoundingClientRect();
      const dx = ((e.clientX - drag.current.x) / r.width) * W, dy = ((e.clientY - drag.current.y) / r.height) * H;
      if (Math.abs(dx) + Math.abs(dy) > 2) setView((v) => ({ ...v, x: drag.current!.vx + dx, y: drag.current!.vy + dy }));
    }
    setTip({ x: e.clientX, y: e.clientY });
  };
  const onPointerUp = () => { drag.current = null; };
  const onTouchMove = (e: React.TouchEvent) => {
    if (e.touches.length === 2) {
      const d = Math.hypot(e.touches[0].clientX - e.touches[1].clientX, e.touches[0].clientY - e.touches[1].clientY);
      if (!pinch.current) pinch.current = { d, k: view.k };
      else {
        const k = Math.max(1, Math.min(12, (pinch.current.k * d) / pinch.current.d));
        const [mx, my] = toSvg((e.touches[0].clientX + e.touches[1].clientX) / 2, (e.touches[0].clientY + e.touches[1].clientY) / 2);
        setView((v) => ({ k, x: mx - ((mx - v.x) / v.k) * k, y: my - ((my - v.y) / v.k) * k }));
      }
    }
  };
  const onTouchEnd = () => { pinch.current = null; };

  const r = hover !== null ? ridings[hover] : undefined;
  const select = (code: number) => { if (onSelect) onSelect(code); else router.push(`/circonscription/${ridings[code]?.slug ?? code}`); };

  const renderPath = (code: number, d: string, key?: string) => {
    const rr = ridings[code];
    return (
      <path key={key ?? code} d={d} fill={fillFor(rr, mode)} stroke={hover === code ? "var(--text)" : "var(--surface)"} strokeWidth={hover === code ? 1.6 / view.k : 0.6 / view.k}
        className={interactive ? "cursor-pointer" : undefined} onMouseEnter={() => setHover(code)} onMouseLeave={() => setHover(null)}
        onClick={() => interactive && select(code)} tabIndex={interactive ? 0 : -1} role={interactive ? "button" : undefined} aria-label={rr ? `${rr.name}${rr.forecast ? ` — ${partyLabel(rr.forecast.favorite)} favori ${prob(rr.forecast.p)}` : ""}` : undefined}
        onKeyDown={(e) => { if (e.key === "Enter") select(code); }} onFocus={() => setHover(code)} onBlur={() => setHover(null)} />
    );
  };

  return (
    <div className={cls("relative select-none", className)} style={{ touchAction: interactive ? "none" : "auto" }}>
      <svg ref={svgRef} viewBox={`0 0 ${W} ${H}`} className="w-full h-auto block rounded-[10px] bg-surface-2" onWheel={onWheel} onPointerDown={onPointerDown} onPointerMove={onPointerMove} onPointerUp={onPointerUp} onPointerLeave={() => { onPointerUp(); setHover(null); }} onTouchMove={onTouchMove} onTouchEnd={onTouchEnd} role="img" aria-label="Carte électorale du Québec, 127 circonscriptions">
        <g transform={`translate(${view.x},${view.y}) scale(${view.k})`}>
          {geo.features.map((f) => renderPath(f.properties.code, byCode.get(f.properties.code) ?? ""))}
        </g>
        {insets === "overlay" && insetMtl && view.k < 1.8 && (
          <g transform={`translate(${W - insetMtl.size - 10},${H - insetMtl.size - 10})`}>
            <rect width={insetMtl.size} height={insetMtl.size} rx={8} fill="var(--surface)" stroke="var(--border-strong)" />
            <text x={8} y={14} fontSize={10} fontWeight={700} fill="var(--text-2)" letterSpacing={1}>MONTRÉAL · LAVAL</text>
            <g>{insetMtl.paths.map(([code, d]) => renderPath(code, d, `m${code}`))}</g>
          </g>
        )}
        {insets === "overlay" && insetQc && view.k < 1.8 && (
          <g transform={`translate(${W - (insetMtl?.size ?? 0) - insetQc.size - 20},${H - insetQc.size - 10})`}>
            <rect width={insetQc.size} height={insetQc.size} rx={8} fill="var(--surface)" stroke="var(--border-strong)" />
            <text x={8} y={14} fontSize={10} fontWeight={700} fill="var(--text-2)" letterSpacing={1}>QUÉBEC · LÉVIS</text>
            <g>{insetQc.paths.map(([code, d]) => renderPath(code, d, `q${code}`))}</g>
          </g>
        )}
      </svg>
      {insets === "below" && (insetMtl || insetQc) && (
        <div className="grid grid-cols-2 gap-2 mt-2">
          {insetMtl && (
            <div className="card p-2">
              <div className="mono text-[10px] font-semibold tracking-[0.08em] text-ink-2 mb-1">MONTRÉAL · LAVAL</div>
              <svg viewBox={`0 0 ${insetMtl.size} ${insetMtl.size}`} className="w-full h-auto block" role="img" aria-label="Encart Montréal et Laval">{insetMtl.paths.map(([code, d]) => renderPath(code, d, `mb${code}`))}</svg>
            </div>
          )}
          {insetQc && (
            <div className="card p-2">
              <div className="mono text-[10px] font-semibold tracking-[0.08em] text-ink-2 mb-1">QUÉBEC · LÉVIS</div>
              <svg viewBox={`0 0 ${insetQc.size} ${insetQc.size}`} className="w-full h-auto block" role="img" aria-label="Encart Québec et Lévis">{insetQc.paths.map(([code, d]) => renderPath(code, d, `qb${code}`))}</svg>
            </div>
          )}
        </div>
      )}
      {interactive && (
        <div className="absolute top-2 right-2 flex flex-col gap-1">
          <button className="w-9 h-9 md:w-8 md:h-8 card text-[16px] font-bold" onClick={() => setView((v) => ({ k: Math.min(12, v.k * 1.4), x: W / 2 - ((W / 2 - v.x) / v.k) * Math.min(12, v.k * 1.4), y: H / 2 - ((H / 2 - v.y) / v.k) * Math.min(12, v.k * 1.4) }))} aria-label="Zoom avant">+</button>
          <button className="w-9 h-9 md:w-8 md:h-8 card text-[16px] font-bold" onClick={() => setView((v) => { const k = Math.max(1, v.k / 1.4); return { k, x: W / 2 - ((W / 2 - v.x) / v.k) * k, y: H / 2 - ((H / 2 - v.y) / v.k) * k }; })} aria-label="Zoom arrière">−</button>
          <button className="w-9 h-9 md:w-8 md:h-8 card text-[11px] font-bold" onClick={() => setView({ k: 1, x: 0, y: 0 })} aria-label="Réinitialiser">⤢</button>
        </div>
      )}
      {r && tip && (
        <div className="pointer-events-none fixed z-50 card p-3 text-[12.5px] shadow-md min-w-[210px] max-md:left-3 max-md:right-3 max-md:bottom-[calc(var(--bottom-nav-h)+env(safe-area-inset-bottom)+12px)] max-md:top-auto" style={typeof window !== "undefined" && window.innerWidth >= 768 ? { left: Math.min(tip.x + 14, window.innerWidth - 240), top: tip.y + 14 } : undefined}>
          <div className="font-semibold text-[13.5px]">{r.name}</div>
          {mode === "live" && r.live ? (
            <div className="mt-1 space-y-0.5">
              <div className="flex justify-between gap-3"><span className="text-ink-2">Statut</span><span>{statusLabel(r.live.status)}</span></div>
              <div className="flex justify-between gap-3"><span className="text-ink-2">En tête</span><span className="font-semibold" style={{ color: partyVar(r.live.leader) }}>{partyLabel(r.live.leader)}</span></div>
              <div className="flex justify-between gap-3"><span className="text-ink-2">Bureaux</span><span className="num">{r.live.bureaux[0]} / {r.live.bureaux[1]}</span></div>
              {r.live.marginPct !== null && <div className="flex justify-between gap-3"><span className="text-ink-2">Marge</span><span className="num">{pct(r.live.marginPct)}</span></div>}
            </div>
          ) : mode === "2022" ? (
            <div className="mt-1 text-ink-2">2022 (transposé) : <span className="font-semibold" style={{ color: partyVar(r.baseline2022) }}>{partyLabel(r.baseline2022)}</span></div>
          ) : r.forecast ? (
            <div className="mt-1 space-y-0.5">
              {Object.entries(r.forecast.pWin).filter(([id]) => id !== "aut").sort((a, b) => b[1] - a[1]).slice(0, 4).map(([id, p]) => (
                <div key={id} className="flex justify-between gap-3"><span className="font-semibold" style={{ color: partyVar(id) }}>{partyLabel(id)}</span><span className="num">{prob(p)}</span></div>
              ))}
              <div className="text-ink-3 pt-1 border-t border-border mt-1">Probabilité de victoire · {ratingLabel(r.forecast.rating)} · marge {r.forecast.margin.toFixed(1).replace(".", ",")} pt</div>
            </div>
          ) : <div className="text-ink-3 mt-1">Pas de projection.</div>}
        </div>
      )}
    </div>
  );
}