'use client';
import { forceCenter, forceCollide, forceLink, forceManyBody, forceSimulation, type SimulationLinkDatum, type SimulationNodeDatum } from 'd3-force';
import { useRouter } from 'next/navigation';
import { useEffect, useMemo, useState } from 'react';
import { cn } from '@/lib/cn';
import { predicateLabel, routes, TYPE_COLOR_KEY, typeLabel } from '@/lib/site';
import type { GraphEdge, GraphNode } from '@/lib/types';

type SimNode = SimulationNodeDatum & GraphNode & { degree: number; isRoot: boolean };
type SimLink = SimulationLinkDatum<SimNode> & { predicate: string };

const W = 960;
const H = 640;
const LABEL_LIMIT = 40;
const EDGE_LABEL_LIMIT = 40;

function colorOf(type: string): string {
  return `var(--type-${TYPE_COLOR_KEY[type] ?? 'tool'})`;
}
function short(s: string, n = 26): string {
  return s.length > n ? `${s.slice(0, n - 1)}…` : s;
}

/**
 * Force-directed neighbourhood graph (d3-force run for a fixed number of ticks, deterministic seed, no animation).
 * Server render: the SVG frame + legend only; the layout is computed on the client after mount so markup stays stable.
 * Click / Enter → the entity page; hover / focus highlights the neighbourhood and reveals edge labels.
 */
export function GraphExplorer({ nodes, edges, rootId }: { nodes: GraphNode[]; edges: GraphEdge[]; rootId: string }) {
  const router = useRouter();
  const [mounted, setMounted] = useState(false);
  const [hover, setHover] = useState<string | null>(null);
  useEffect(() => setMounted(true), []);

  const layout = useMemo(() => {
    if (!mounted) return null;
    const ids = new Set(nodes.map((n) => n.id));
    const degree = new Map<string, number>();
    const links: SimLink[] = [];
    for (const e of edges) {
      if (!ids.has(e.source) || !ids.has(e.target)) continue;
      degree.set(e.source, (degree.get(e.source) ?? 0) + 1);
      degree.set(e.target, (degree.get(e.target) ?? 0) + 1);
      links.push({ source: e.source, target: e.target, predicate: e.predicate });
    }
    // Deterministic seed: nodes on a ring ordered by type, root at the centre.
    const sim: SimNode[] = nodes.map((n, i) => {
      const ang = (i / Math.max(1, nodes.length)) * Math.PI * 2;
      const isRoot = n.id === rootId;
      return { ...n, degree: degree.get(n.id) ?? 0, isRoot, x: isRoot ? W / 2 : W / 2 + Math.cos(ang) * 220, y: isRoot ? H / 2 : H / 2 + Math.sin(ang) * 220, fx: isRoot ? W / 2 : undefined, fy: isRoot ? H / 2 : undefined };
    });
    const byId = new Map(sim.map((n) => [n.id, n]));
    const radius = (n: SimNode) => (n.isRoot ? 14 : 5 + Math.min(6, Math.sqrt(n.degree)));
    const s = forceSimulation<SimNode>(sim)
      .force('link', forceLink<SimNode, SimLink>(links).id((d) => d.id).distance((l) => {
        const a = l.source as SimNode;
        const b = l.target as SimNode;
        const hub = Math.max(a.degree, b.degree);
        return 70 + Math.min(90, hub * 3) + (a.isRoot || b.isRoot ? 60 : 0);
      }).strength(0.6))
      .force('charge', forceManyBody<SimNode>().strength((d) => (d.isRoot ? -900 : -220)))
      .force('center', forceCenter(W / 2, H / 2))
      .force('collide', forceCollide<SimNode>().radius((d) => radius(d) + 14).iterations(2))
      .stop();
    for (let i = 0; i < 300; i++) s.tick();
    // Clamp into the viewBox.
    for (const n of sim) {
      n.x = Math.max(24, Math.min(W - 24, n.x ?? W / 2));
      n.y = Math.max(24, Math.min(H - 24, n.y ?? H / 2));
    }
    const neighbours = new Map<string, Set<string>>();
    for (const l of links) {
      const a = (l.source as SimNode).id;
      const b = (l.target as SimNode).id;
      (neighbours.get(a) ?? neighbours.set(a, new Set()).get(a)!).add(b);
      (neighbours.get(b) ?? neighbours.set(b, new Set()).get(b)!).add(a);
    }
    return { sim, links, byId, radius, neighbours };
  }, [mounted, nodes, edges, rootId]);

  const showAllLabels = nodes.length <= LABEL_LIMIT;
  const showAllEdgeLabels = edges.length <= EDGE_LABEL_LIMIT;

  const go = (n: GraphNode) => router.push(routes.entity(n));
  const active = (id: string) => !hover || hover === id || (layout?.neighbours.get(hover)?.has(id) ?? false);

  return (
    <div className="relative">
      <svg viewBox={`0 0 ${W} ${H}`} className="block h-auto w-full border border-rule bg-surface" role="img" aria-label="Relationship graph" onMouseLeave={() => setHover(null)}>
        {!layout && (
          <text x={W / 2} y={H / 2} textAnchor="middle" fontSize={14} fill="var(--ink-3)">
            Laying out {nodes.length} nodes…
          </text>
        )}
        {layout && (
          <>
            <g>
              {layout.links.map((l, i) => {
                const a = l.source as SimNode;
                const b = l.target as SimNode;
                const on = !hover || hover === a.id || hover === b.id;
                const label = showAllEdgeLabels || (hover && (hover === a.id || hover === b.id));
                const mx = ((a.x ?? 0) + (b.x ?? 0)) / 2;
                const my = ((a.y ?? 0) + (b.y ?? 0)) / 2;
                return (
                  <g key={i} opacity={on ? 1 : 0.12}>
                    <line x1={a.x} y1={a.y} x2={b.x} y2={b.y} stroke={on && hover ? 'var(--accent)' : 'var(--rule-strong)'} strokeWidth={on && hover ? 1.4 : 1} />
                    {label && (
                      <text x={mx} y={my - 3} textAnchor="middle" fontSize={9} fill="var(--ink-3)" className="pointer-events-none select-none">
                        {predicateLabel(l.predicate, 'out')}
                      </text>
                    )}
                  </g>
                );
              })}
            </g>
            <g>
              {layout.sim.map((n) => {
                const r = layout.radius(n);
                const on = active(n.id);
                const label = n.isRoot || showAllLabels || (hover && (hover === n.id || layout.neighbours.get(hover)?.has(n.id)));
                const color = colorOf(n.entity_type);
                return (
                  <g
                    key={n.id}
                    transform={`translate(${n.x},${n.y})`}
                    opacity={on ? 1 : 0.2}
                    tabIndex={0}
                    role="link"
                    aria-label={`${n.name} (${typeLabel(n.entity_type)})`}
                    className="cursor-pointer outline-none focus-visible:[&>circle]:stroke-accent"
                    onMouseEnter={() => setHover(n.id)}
                    onFocus={() => setHover(n.id)}
                    onBlur={() => setHover(null)}
                    onClick={() => go(n)}
                    onKeyDown={(e) => {
                      if (e.key === 'Enter' || e.key === ' ') {
                        e.preventDefault();
                        go(n);
                      }
                    }}
                  >
                    <circle r={Math.max(16, r + 10)} fill="transparent" data-hit="" />
                    {n.isRoot && <circle r={r + 6} fill="none" stroke={color} strokeWidth={1} opacity={0.5} />}
                    <circle r={r} fill={color} stroke="var(--canvas)" strokeWidth={1.5} />
                    {label && (
                      <text x={0} y={r + 11} textAnchor="middle" fontSize={n.isRoot ? 12 : 10} fontWeight={n.isRoot ? 600 : 400} fill={n.isRoot ? 'var(--ink)' : 'var(--ink-2)'} className="pointer-events-none select-none" style={{ paintOrder: 'stroke', stroke: 'var(--surface)', strokeWidth: 3 }}>
                        {short(n.name, n.isRoot ? 40 : 26)}
                      </text>
                    )}
                  </g>
                );
              })}
            </g>
          </>
        )}
      </svg>
      {layout && hover && layout.byId.get(hover) && (
        <p className="pointer-events-none absolute left-2 top-2 max-w-[70%] truncate bg-canvas/90 px-2 py-1 text-xs text-ink-2 backdrop-blur">
          <span className="font-medium text-ink">{layout.byId.get(hover)!.name}</span> · {typeLabel(layout.byId.get(hover)!.entity_type)}
          {layout.byId.get(hover)!.organization_name ? ` · ${layout.byId.get(hover)!.organization_name}` : ''} · {layout.byId.get(hover)!.degree} link{layout.byId.get(hover)!.degree === 1 ? '' : 's'}
        </p>
      )}
      {!showAllLabels && <p className={cn('mt-1 text-xs text-ink-3')}>Labels are shown on hover or focus beyond {LABEL_LIMIT} nodes; the list below names every node.</p>}
    </div>
  );
}