"use client";
import { useEffect, useMemo, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import { forceCenter, forceCollide, forceLink, forceManyBody, forceSimulation, type SimulationLinkDatum, type SimulationNodeDatum } from "d3-force";
import { href, t, type Locale } from "@/lib/i18n";

export type GNode = { slug: string; identifier: string; title: string; year: number | null; domain: string | null; accent: string | null; views: number };
export type GEdge = { source: string; target: string; kind: string; weight: number; inferred: boolean; explanation: string | null; explanation_fr: string | null };
type N = GNode & SimulationNodeDatum; type L = SimulationLinkDatum<N> & { kind: string; weight: number; inferred: boolean; explanation: string | null; explanation_fr: string | null };
const KIND_COLOR: Record<string, string> = { topic: "#1f3a5f", method: "#2d4a3e", dataset: "#6b4e16", author: "#5c4b6b", semantic: "#6b2737", lexical: "#8a6d7a", curated: "#9b2c2c" };
/** Deterministic pseudo-random for stable initial positions (same layout on every load). */
function seeded(s: string) { let h = 2166136261; for (let i = 0; i < s.length; i++) { h ^= s.charCodeAt(i); h = Math.imul(h, 16777619) >>> 0; } return (h % 10000) / 10000; }

export function Constellation({ locale, nodes, edges, height = 520, compact = false, kinds: initialKinds }: { locale: Locale; nodes: GNode[]; edges: GEdge[]; height?: number; compact?: boolean; kinds?: string[] }) {
  const d = t(locale); const router = useRouter(); const ref = useRef<SVGSVGElement>(null);
  const allKinds = useMemo(() => [...new Set(edges.map((e) => e.kind))], [edges]);
  const [kinds, setKinds] = useState<Set<string>>(new Set(initialKinds ?? allKinds));
  const [pos, setPos] = useState<{ nodes: N[]; links: L[] } | null>(null);
  const [hover, setHover] = useState<string | null>(null); const [sel, setSel] = useState<L | null>(null);
  const [view, setView] = useState({ x: 0, y: 0, k: 1 }); const drag = useRef<{ x: number; y: number; vx: number; vy: number } | null>(null);
  const W = 960, H = height;
  useEffect(() => {
    const ns: N[] = nodes.map((n) => ({ ...n, x: W / 2 + (seeded(n.slug) - 0.5) * W * 0.8, y: H / 2 + (seeded(n.slug + "y") - 0.5) * H * 0.8 }));
    const idx = new Map(ns.map((n) => [n.slug, n]));
    const ls: L[] = edges.filter((e) => kinds.has(e.kind) && idx.has(e.source) && idx.has(e.target)).map((e) => ({ source: idx.get(e.source)!, target: idx.get(e.target)!, kind: e.kind, weight: e.weight, inferred: e.inferred, explanation: e.explanation, explanation_fr: e.explanation_fr }));
    const sim = forceSimulation(ns).force("link", forceLink<N, L>(ls).id((n) => n.slug).distance((l) => 70 + (1 - Math.min(1, l.weight)) * 90).strength((l) => 0.2 + Math.min(1, l.weight) * 0.5))
      .force("charge", forceManyBody().strength(-220)).force("center", forceCenter(W / 2, H / 2)).force("collide", forceCollide(22)).stop();
    for (let i = 0; i < 300; i++) sim.tick();
    setPos({ nodes: ns, links: ls });
  }, [nodes, edges, kinds, H]);
  const neighbours = useMemo(() => { const m = new Map<string, Set<string>>(); pos?.links.forEach((l) => { const s = (l.source as N).slug, tt = (l.target as N).slug; (m.get(s) ?? m.set(s, new Set()).get(s)!).add(tt); (m.get(tt) ?? m.set(tt, new Set()).get(tt)!).add(s); }); return m; }, [pos]);
  const onWheel = (e: React.WheelEvent) => { e.preventDefault(); setView((v) => ({ ...v, k: Math.min(4, Math.max(0.4, v.k * (e.deltaY < 0 ? 1.1 : 0.9))) })); };
  const onDown = (e: React.PointerEvent) => { drag.current = { x: e.clientX, y: e.clientY, vx: view.x, vy: view.y }; };
  const onMove = (e: React.PointerEvent) => { if (!drag.current) return; setView((v) => ({ ...v, x: drag.current!.vx + (e.clientX - drag.current!.x), y: drag.current!.vy + (e.clientY - drag.current!.y) })); };
  const onUp = () => { drag.current = null; };
  return (
    <div className="card overflow-hidden">
      {!compact && (
        <div className="flex flex-wrap items-center gap-2 p-3 border-b border-line text-xs">
          <span className="label mr-1">{d.map.filter}</span>
          {allKinds.map((k) => <label key={k} className="chip cursor-pointer select-none"><input type="checkbox" className="mr-1 accent-[var(--navy)]" checked={kinds.has(k)} onChange={(e) => setKinds((s) => { const n = new Set(s); if (e.target.checked) n.add(k); else n.delete(k); return n; })} /><span className="inline-block w-2.5 h-2.5 rounded-full mr-1" style={{ background: KIND_COLOR[k] ?? "#888" }} />{(d.map as Record<string, string>)[k] ?? k}</label>)}
          <span className="ml-auto text-fg-3">{nodes.length} {d.map.nodes} · {pos?.links.length ?? 0} {d.map.edges}</span>
          <button type="button" className="btn btn-sm" onClick={() => setView({ x: 0, y: 0, k: 1 })}>{d.map.reset}</button>
        </div>
      )}
      <svg ref={ref} viewBox={`0 0 ${W} ${H}`} role="img" aria-label={d.map.title} className="w-full touch-none select-none bg-bg-2" style={{ height: compact ? 420 : "min(70vh, 640px)" }} onWheel={onWheel} onPointerDown={onDown} onPointerMove={onMove} onPointerUp={onUp} onPointerLeave={onUp}>
        <g transform={`translate(${view.x},${view.y}) scale(${view.k})`}>
          {pos?.links.map((l, i) => { const s = l.source as N, tt = l.target as N; const dim = hover && hover !== s.slug && hover !== tt.slug; return <line key={i} x1={s.x} y1={s.y} x2={tt.x} y2={tt.y} stroke={KIND_COLOR[l.kind] ?? "#888"} strokeOpacity={dim ? 0.08 : 0.35 + Math.min(1, l.weight) * 0.4} strokeWidth={0.8 + Math.min(1, l.weight) * 1.6} strokeDasharray={l.inferred ? "4 3" : undefined} onClick={() => setSel(l)} className="cursor-pointer" />; })}
          {pos?.nodes.map((n) => { const dim = hover && hover !== n.slug && !neighbours.get(hover)?.has(n.slug); const r = 7 + Math.min(6, Math.log1p(n.views)); return (
            <g key={n.slug} transform={`translate(${n.x},${n.y})`} opacity={dim ? 0.25 : 1} className="cursor-pointer" onMouseEnter={() => setHover(n.slug)} onMouseLeave={() => setHover(null)} onClick={() => router.push(href(locale, `/papers/${n.slug}`))} tabIndex={0} role="link" aria-label={`${n.identifier}: ${n.title}`} onKeyDown={(e) => { if (e.key === "Enter") router.push(href(locale, `/papers/${n.slug}`)); }}>
              <circle r={r} fill={n.accent ?? "#1f3a5f"} stroke="var(--bg-2)" strokeWidth={1.5} />
              <text y={r + 11} textAnchor="middle" fontSize={10} fill="var(--fg-2)" fontFamily="var(--font-mono)">{n.identifier}</text>
              {hover === n.slug && <text y={-r - 6} textAnchor="middle" fontSize={11} fill="var(--fg)" style={{ paintOrder: "stroke", stroke: "var(--bg-2)", strokeWidth: 3 }}>{n.title.length > 70 ? n.title.slice(0, 68) + "…" : n.title}</text>}
            </g>); })}
        </g>
      </svg>
      {sel && <div className="p-3 border-t border-line text-sm flex gap-3 items-start"><span className="inline-block mt-1 w-2.5 h-2.5 rounded-full shrink-0" style={{ background: KIND_COLOR[sel.kind] }} /><span className="text-fg-2">{(sel.source as N).identifier} ↔ {(sel.target as N).identifier} — {locale === "fr" ? sel.explanation_fr ?? sel.explanation : sel.explanation}{sel.inferred ? ` (${d.paper.inferred})` : ""}</span><button type="button" className="ml-auto btn btn-sm" onClick={() => setSel(null)}>×</button></div>}
    </div>
  );
}