import Link from 'next/link';
import { predicateLabel } from '@/lib/site';

/*
  Compact layered SVG graph for lineage edges among a known set of nodes (family members): roots left, derived models to the right.
  Server-rendered, links on nodes, accessible edge list. For the interactive explorer use /graph.
*/

export type MiniNode = { id: string; label: string; href?: string; sub?: string };
export type MiniEdge = { source: string; target: string; predicate: string };

const W = 720;
const BOX_W = 168;
const BOX_H = 26;
const ROW = 32;
const PAD = 8;
const trunc = (s: string, n: number) => (s.length > n ? `${s.slice(0, n - 1)}…` : s);

export function MiniGraph({ nodes, edges, className, title = 'Lineage' }: { nodes: MiniNode[]; edges: MiniEdge[]; className?: string; title?: string }) {
  const ids = new Set(nodes.map((n) => n.id));
  const E = edges.filter((e) => ids.has(e.source) && ids.has(e.target));
  if (!E.length) return <p className="text-sm text-ink-3">No lineage relation recorded among these members.</p>;
  const involved = new Set(E.flatMap((e) => [e.source, e.target]));
  const N = nodes.filter((n) => involved.has(n.id));
  // depth = longest chain from a root; edges point source (derived) → target (base): the base is upstream, so depth(source) = depth(target) + 1
  const depth = new Map<string, number>();
  const upstream = new Map<string, string[]>();
  for (const e of E) upstream.set(e.source, [...(upstream.get(e.source) ?? []), e.target]);
  const visit = (id: string, seen: Set<string>): number => {
    if (depth.has(id)) return depth.get(id) as number;
    if (seen.has(id)) return 0;
    seen.add(id);
    const ups = upstream.get(id) ?? [];
    const d = ups.length ? 1 + Math.max(...ups.map((u) => visit(u, seen))) : 0;
    depth.set(id, d);
    return d;
  };
  for (const n of N) visit(n.id, new Set());
  const maxD = Math.max(...N.map((n) => depth.get(n.id) ?? 0));
  const cols = Array.from({ length: maxD + 1 }, () => [] as MiniNode[]);
  for (const n of N) cols[depth.get(n.id) ?? 0]!.push(n);
  const rows = Math.max(...cols.map((c) => c.length));
  const H = PAD * 2 + rows * ROW;
  const colX = (d: number) => (maxD === 0 ? W / 2 - BOX_W / 2 : PAD + (d * (W - PAD * 2 - BOX_W)) / maxD);
  const pos = new Map<string, { x: number; y: number }>();
  cols.forEach((c, d) => c.forEach((n, i) => pos.set(n.id, { x: colX(d), y: PAD + ((H - PAD * 2) / Math.max(1, c.length)) * (i + 0.5) - BOX_H / 2 })));
  const tooMany = N.length > 40;
  return (
    <div className={className} data-mini-graph>
      <svg viewBox={`0 0 ${W} ${Math.min(H, 640)}`} className="block w-full" role="img" aria-label={`${title}: ${N.length} models, ${E.length} relations`}>
        <title>{title}</title>
        {E.map((e, i) => {
          const a = pos.get(e.target);
          const b = pos.get(e.source);
          if (!a || !b) return null;
          const x1 = a.x + BOX_W;
          const y1 = a.y + BOX_H / 2;
          const x2 = b.x;
          const y2 = b.y + BOX_H / 2;
          return (
            <g key={i}>
              <path d={`M${x1},${y1} C${(x1 + x2) / 2},${y1} ${(x1 + x2) / 2},${y2} ${x2},${y2}`} fill="none" stroke="var(--rule-strong)" strokeWidth={1.1} strokeDasharray={e.predicate === 'quantized_from' ? '3 2' : undefined} />
              <title>{`${nodes.find((n) => n.id === e.source)?.label} ${predicateLabel(e.predicate, 'out').toLowerCase()} ${nodes.find((n) => n.id === e.target)?.label}`}</title>
            </g>
          );
        })}
        {N.map((n) => {
          const p = pos.get(n.id)!;
          const body = (
            <g>
              <rect x={p.x} y={p.y} width={BOX_W} height={BOX_H} rx={3} fill="var(--surface)" stroke="var(--rule-strong)" />
              <text x={p.x + 7} y={p.y + 11} fontSize={10.5} fontWeight={500} fill="var(--ink)">
                {trunc(n.label, 26)}
              </text>
              {n.sub && (
                <text x={p.x + 7} y={p.y + 21} fontSize={8.5} fill="var(--ink-3)">
                  {trunc(n.sub, 30)}
                </text>
              )}
              <title>{n.label}</title>
            </g>
          );
          return n.href ? (
            <a key={n.id} href={n.href} className="hover:opacity-80">
              {body}
            </a>
          ) : (
            <g key={n.id}>{body}</g>
          );
        })}
      </svg>
      {tooMany && <p className="text-[11px] text-ink-3">Large family — open the interactive graph for the full picture.</p>}
      <ul className="sr-only">
        {E.map((e, i) => (
          <li key={i}>
            <Link href={nodes.find((n) => n.id === e.source)?.href ?? '#'}>{nodes.find((n) => n.id === e.source)?.label}</Link> {predicateLabel(e.predicate, 'out').toLowerCase()} <Link href={nodes.find((n) => n.id === e.target)?.href ?? '#'}>{nodes.find((n) => n.id === e.target)?.label}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}