"use client";

import { geoMercator, geoPath } from "d3-geo";
import type { FeatureCollection, Geometry } from "geojson";
import { useEffect, useMemo, useState } from "react";

/** Mini-carte de localisation : la circonscription en accent sur la silhouette du Québec + zoom local. */
export function RidingMap({ code }: { code: number }) {
  const [geo, setGeo] = useState<FeatureCollection<Geometry, { code: number; name: string }> | null>(null);
  useEffect(() => { fetch("/api/geo").then((r) => r.json()).then(setGeo).catch(() => {}); }, []);
  const svg = useMemo(() => {
    if (!geo) return null;
    const W = 360, H = 300;
    const proj = geoMercator().fitExtent([[6, 6], [W - 6, H - 6]], geo);
    const path = geoPath(proj);
    const f = geo.features.find((x) => x.properties.code === code);
    if (!f) return null;
    const [[x0, y0], [x1, y1]] = path.bounds(f);
    const local = geoMercator().fitExtent([[8, 8], [W - 8, H - 8]], { type: "FeatureCollection", features: [f] } as FeatureCollection<Geometry>);
    const lp = geoPath(local);
    const neighbors = geo.features.filter((g) => { const b = lp.bounds(g); return b[0][0] < W && b[1][0] > 0 && b[0][1] < H && b[1][1] > 0; });
    return { W, H, all: geo.features.map((g) => path(g) ?? ""), me: path(f) ?? "", box: [x0, y0, x1 - x0, y1 - y0], localMe: lp(f) ?? "", neighbors: neighbors.map((g) => lp(g) ?? "") };
  }, [geo, code]);
  if (!svg) return <div className="h-[300px] bg-surface-2 animate-pulse" />;
  return (
    <div className="grid grid-cols-2">
      <svg viewBox={`0 0 ${svg.W} ${svg.H}`} className="w-full h-auto bg-surface-2" role="img" aria-label="Localisation au Québec">
        {svg.all.map((d, i) => <path key={i} d={d} fill="var(--p-none)" stroke="var(--surface)" strokeWidth={0.5} />)}
        <path d={svg.me} fill="var(--qc26-accent)" stroke="var(--qc26-accent)" strokeWidth={4} strokeLinejoin="round" />
        <rect x={svg.box[0] - 8} y={svg.box[1] - 8} width={svg.box[2] + 16} height={svg.box[3] + 16} fill="none" stroke="var(--text)" strokeWidth={1} strokeDasharray="3 2" />
      </svg>
      <svg viewBox={`0 0 ${svg.W} ${svg.H}`} className="w-full h-auto bg-surface border-l border-border" role="img" aria-label="Zoom sur la circonscription">
        {svg.neighbors.map((d, i) => <path key={i} d={d} fill="var(--surface-3)" stroke="var(--border-strong)" strokeWidth={0.8} />)}
        <path d={svg.localMe} fill="rgba(37,99,235,.18)" stroke="var(--qc26-accent)" strokeWidth={2} />
      </svg>
    </div>
  );
}