"use strict";

const NS = "http://www.w3.org/2000/svg";
const TYPE_STYLE = {
  run:       { color: "#ff4d5f", size: 26, icon: "RF", order: 0 },
  target:    { color: "#4ad9d9", size: 22, icon: "◎", order: 1 },
  endpoint:  { color: "#58a6ff", size: 13, icon: "↗", order: 2 },
  module:    { color: "#f59e42", size: 12, icon: "m", order: 2 },
  parameter: { color: "#ac7cff", size: 8,  icon: "p", order: 3 },
  document:  { color: "#4fd18b", size: 12, icon: "≡", order: 3 },
  finding:   { color: "#e8c547", size: 12, icon: "!", order: 4 },
  exposure:  { color: "#ff4055", size: 15, icon: "!", order: 4 },
  cve:       { color: "#ff874d", size: 11, icon: "C", order: 5 },
  standard:  { color: "#8491a3", size: 9,  icon: "§", order: 5 },
};
const SEVERITY_COLOR = { critical: "#ff4055", high: "#ff874d", medium: "#e8c547", low: "#58a6ff", info: "#8491a3" };

const state = {
  graph: null,
  nodes: [],
  edges: [],
  nodeMap: new Map(),
  hiddenTypes: new Set(),
  layout: "force",
  selected: null,
  connected: new Set(),
  search: "",
  matches: new Set(),
  transform: { x: 0, y: 0, k: 1 },
  animation: null,
  dragged: null,
  dragStart: null,
  dragMoved: false,
  suppressClick: false,
  panning: null,
};

const svg = document.getElementById("graph");
const viewport = document.getElementById("viewport");
const edgeLayer = document.getElementById("edges");
const edgeLabelLayer = document.getElementById("edge-labels");
const nodeLayer = document.getElementById("nodes");
const tooltip = document.getElementById("tooltip");

function el(tag, attrs = {}, text = null) {
  const node = document.createElementNS(NS, tag);
  for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
  if (text !== null) node.textContent = text;
  return node;
}

function htmlEl(tag, className = "", text = null) {
  const node = document.createElement(tag);
  if (className) node.className = className;
  if (text !== null) node.textContent = text;
  return node;
}

async function boot() {
  const response = await fetch("/api/graph", { cache: "no-store" });
  if (!response.ok) throw new Error(`Graph request failed: ${response.status}`);
  state.graph = await response.json();
  state.nodes = state.graph.nodes.map((node, index) => ({ ...node, x: 0, y: 0, vx: 0, vy: 0, index }));
  state.edges = state.graph.edges.map(edge => ({ ...edge }));
  state.nodeMap = new Map(state.nodes.map(node => [node.id, node]));
  document.getElementById("run-id").textContent = state.graph.metadata.run_id;
  buildStats();
  buildFilters();
  bindControls();
  seedPositions();
  applyLayout("force");
  requestAnimationFrame(() => fitView(false));
}

function buildStats() {
  const meta = state.graph.metadata;
  const stats = document.getElementById("stats");
  stats.replaceChildren();
  const values = [
    [meta.nodes, "nodes"], [meta.edges, "edges"],
    [meta.type_counts.endpoint || 0, "endpoints"],
    [(meta.type_counts.finding || 0) + (meta.type_counts.exposure || 0), "findings"],
  ];
  for (const [value, label] of values) {
    const card = htmlEl("div", "stat");
    card.append(htmlEl("strong", "", String(value)), htmlEl("span", "", label));
    stats.append(card);
  }
}

function buildFilters() {
  const filters = document.getElementById("filters");
  filters.replaceChildren();
  const counts = state.graph.metadata.type_counts;
  const types = Object.keys(counts).sort((a, b) => (TYPE_STYLE[a]?.order ?? 99) - (TYPE_STYLE[b]?.order ?? 99));
  for (const type of types) {
    const row = htmlEl("label", "filter-row");
    const input = document.createElement("input");
    input.type = "checkbox";
    input.checked = true;
    input.dataset.type = type;
    input.addEventListener("change", () => {
      input.checked ? state.hiddenTypes.delete(type) : state.hiddenTypes.add(type);
      applyLayout(state.layout, true);
    });
    const swatch = htmlEl("span", "swatch");
    swatch.style.color = TYPE_STYLE[type]?.color || "#8491a3";
    swatch.style.background = TYPE_STYLE[type]?.color || "#8491a3";
    row.append(input, swatch, htmlEl("span", "", labelFor(type)), htmlEl("span", "filter-count", String(counts[type])));
    filters.append(row);
  }
}

function bindControls() {
  document.querySelectorAll(".layout-button").forEach(button => button.addEventListener("click", () => applyLayout(button.dataset.layout)));
  document.getElementById("fit-view").addEventListener("click", () => fitView(true));
  document.getElementById("reset-focus").addEventListener("click", clearFocus);
  document.getElementById("show-all").addEventListener("click", () => {
    state.hiddenTypes.clear();
    document.querySelectorAll("#filters input").forEach(input => { input.checked = true; });
    applyLayout(state.layout, true);
  });
  const search = document.getElementById("graph-search");
  search.addEventListener("input", () => { state.search = search.value.trim().toLowerCase(); updateSearch(); renderClasses(); });
  document.addEventListener("keydown", event => {
    if (event.key === "Escape") clearFocus();
    if (event.key === "/" && document.activeElement !== search) { event.preventDefault(); search.focus(); }
    if (event.key.toLowerCase() === "f" && document.activeElement !== search) fitView(true);
  });

  svg.addEventListener("wheel", event => {
    event.preventDefault();
    const point = svgPoint(event.clientX, event.clientY);
    const old = state.transform.k;
    const next = clamp(old * (event.deltaY < 0 ? 1.12 : .89), .12, 5);
    state.transform.x = event.clientX - svg.getBoundingClientRect().left - (point.x * next);
    state.transform.y = event.clientY - svg.getBoundingClientRect().top - (point.y * next);
    state.transform.k = next;
    applyTransform();
  }, { passive: false });

  svg.addEventListener("pointerdown", event => {
    if (event.target.closest?.(".node")) return;
    state.panning = { x: event.clientX, y: event.clientY, tx: state.transform.x, ty: state.transform.y };
    svg.classList.add("panning");
    svg.setPointerCapture(event.pointerId);
  });
  svg.addEventListener("pointermove", event => {
    if (state.dragged) {
      if (state.dragStart && Math.hypot(event.clientX - state.dragStart.x, event.clientY - state.dragStart.y) > 4) state.dragMoved = true;
      const point = svgPoint(event.clientX, event.clientY);
      state.dragged.x = point.x;
      state.dragged.y = point.y;
      state.dragged.fx = point.x;
      state.dragged.fy = point.y;
      updateGeometry();
    } else if (state.panning) {
      state.transform.x = state.panning.tx + event.clientX - state.panning.x;
      state.transform.y = state.panning.ty + event.clientY - state.panning.y;
      applyTransform();
    }
  });
  svg.addEventListener("pointerup", event => {
    if (state.dragged) { state.dragged.fx = null; state.dragged.fy = null; }
    state.suppressClick = state.dragMoved;
    state.dragged = null;
    state.dragStart = null;
    state.dragMoved = false;
    state.panning = null;
    svg.classList.remove("panning");
    try { if (svg.hasPointerCapture(event.pointerId)) svg.releasePointerCapture(event.pointerId); } catch (_) {}
  });
  svg.addEventListener("click", event => { if (event.target === svg) clearFocus(); });
  new ResizeObserver(() => { if (state.layout !== "force") applyLayout(state.layout, true); }).observe(svg);
}

function visibleGraph() {
  const nodes = state.nodes.filter(node => !state.hiddenTypes.has(node.type));
  const ids = new Set(nodes.map(node => node.id));
  const edges = state.edges.filter(edge => ids.has(edge.source) && ids.has(edge.target));
  return { nodes, edges, ids };
}

function applyLayout(layout, preserveTransform = false) {
  state.layout = layout;
  document.querySelectorAll(".layout-button").forEach(button => button.classList.toggle("active", button.dataset.layout === layout));
  if (state.animation) cancelAnimationFrame(state.animation);
  const graph = visibleGraph();
  document.getElementById("visible-count").textContent = `${graph.nodes.length} nodes · ${graph.edges.length} edges`;
  document.getElementById("empty-state").classList.toggle("hidden", graph.nodes.length > 0);
  document.getElementById("graph-stage").classList.toggle("dense", graph.nodes.length > 75);
  if (layout === "tree") layoutTree(graph.nodes, graph.edges);
  else if (layout === "radial") layoutRadial(graph.nodes, graph.edges);
  else startForce(graph.nodes, graph.edges);
  renderGraph(graph.nodes, graph.edges);
  updateSearch();
  renderClasses();
  if (!preserveTransform && layout !== "force") requestAnimationFrame(() => fitView(true));
}

function seedPositions() {
  const { width, height } = dimensions();
  state.nodes.forEach((node, index) => {
    const angle = (index / Math.max(1, state.nodes.length)) * Math.PI * 2;
    const ring = 70 + (TYPE_STYLE[node.type]?.order || 1) * 65;
    node.x = width / 2 + Math.cos(angle) * ring + (Math.random() - .5) * 50;
    node.y = height / 2 + Math.sin(angle) * ring + (Math.random() - .5) * 50;
  });
}

function startForce(nodes, edges) {
  const { width, height } = dimensions();
  const nodeMap = new Map(nodes.map(node => [node.id, node]));
  let alpha = 1;
  const step = () => {
    alpha *= .965;
    const n = nodes.length;
    if (n <= 480) {
      for (let i = 0; i < n; i++) for (let j = i + 1; j < n; j++) repel(nodes[i], nodes[j], alpha);
    } else {
      for (let i = 0; i < n; i++) for (let offset = 1; offset <= 36; offset++) repel(nodes[i], nodes[(i + offset * 17) % n], alpha * .7);
    }
    for (const edge of edges) {
      const source = nodeMap.get(edge.source), target = nodeMap.get(edge.target);
      if (!source || !target) continue;
      const dx = target.x - source.x, dy = target.y - source.y;
      const distance = Math.sqrt(dx * dx + dy * dy) || 1;
      const desired = edge.type === "maps_to" ? 115 : edge.type === "accepts" ? 75 : 145;
      const force = (distance - desired) * .012 * alpha;
      source.vx += dx / distance * force; source.vy += dy / distance * force;
      target.vx -= dx / distance * force; target.vy -= dy / distance * force;
    }
    for (const node of nodes) {
      if (node.fx != null) { node.x = node.fx; node.y = node.fy; node.vx = node.vy = 0; continue; }
      node.vx += (width / 2 - node.x) * .0009 * alpha;
      node.vy += (height / 2 - node.y) * .0009 * alpha;
      node.vx *= .84; node.vy *= .84;
      node.x += node.vx; node.y += node.vy;
    }
    updateGeometry();
    if (alpha > .025 && state.layout === "force") state.animation = requestAnimationFrame(step);
  };
  state.animation = requestAnimationFrame(step);
}

function repel(a, b, alpha) {
  if (a === b) return;
  let dx = b.x - a.x, dy = b.y - a.y;
  let d2 = dx * dx + dy * dy;
  if (d2 < 1) { dx = Math.random() - .5; dy = Math.random() - .5; d2 = 1; }
  const min = radius(a) + radius(b) + 16;
  const strength = (d2 < min * min ? 6800 : 2300) * alpha / d2;
  a.vx -= dx * strength; a.vy -= dy * strength;
  b.vx += dx * strength; b.vy += dy * strength;
}

function levelsFor(nodes, edges) {
  const ids = new Set(nodes.map(node => node.id));
  const incoming = new Map(nodes.map(node => [node.id, 0]));
  const children = new Map(nodes.map(node => [node.id, []]));
  for (const edge of edges) if (ids.has(edge.source) && ids.has(edge.target)) {
    children.get(edge.source).push(edge.target);
    incoming.set(edge.target, (incoming.get(edge.target) || 0) + 1);
  }
  const roots = nodes.filter(node => node.type === "run" || incoming.get(node.id) === 0);
  const levels = new Map();
  const queue = roots.map(node => [node.id, 0]);
  while (queue.length) {
    const [id, level] = queue.shift();
    if (levels.has(id) && levels.get(id) <= level) continue;
    levels.set(id, level);
    for (const child of children.get(id) || []) queue.push([child, level + 1]);
  }
  for (const node of nodes) if (!levels.has(node.id)) levels.set(node.id, TYPE_STYLE[node.type]?.order || 5);
  return levels;
}

function layoutTree(nodes, edges) {
  const { width } = dimensions();
  const levels = levelsFor(nodes, edges);
  const groups = new Map();
  nodes.forEach(node => { const level = levels.get(node.id); if (!groups.has(level)) groups.set(level, []); groups.get(level).push(node); });
  const maxLevel = Math.max(0, ...groups.keys());
  for (const [level, group] of groups) {
    group.sort((a, b) => a.type.localeCompare(b.type) || a.label.localeCompare(b.label));
    group.forEach((node, index) => {
      node.x = ((index + 1) / (group.length + 1)) * Math.max(width, group.length * 115);
      node.y = 90 + level * 145;
    });
  }
  viewport.dataset.height = String(180 + maxLevel * 145);
}

function layoutRadial(nodes, edges) {
  const { width, height } = dimensions();
  const levels = levelsFor(nodes, edges);
  const groups = new Map();
  nodes.forEach(node => { const level = levels.get(node.id); if (!groups.has(level)) groups.set(level, []); groups.get(level).push(node); });
  const cx = width / 2, cy = height / 2;
  for (const [level, group] of groups) {
    const ring = level * 125;
    group.sort((a, b) => a.type.localeCompare(b.type) || a.label.localeCompare(b.label));
    group.forEach((node, index) => {
      const angle = (index / Math.max(1, group.length)) * Math.PI * 2 - Math.PI / 2;
      node.x = cx + Math.cos(angle) * ring;
      node.y = cy + Math.sin(angle) * ring;
    });
  }
}

function renderGraph(nodes, edges) {
  edgeLayer.replaceChildren(); edgeLabelLayer.replaceChildren(); nodeLayer.replaceChildren();
  const nodeMap = new Map(nodes.map(node => [node.id, node]));
  for (const edge of edges) {
    const source = nodeMap.get(edge.source), target = nodeMap.get(edge.target);
    if (!source || !target) continue;
    const line = el("line", { class: "edge", "data-id": edge.id });
    line.__data__ = edge;
    edgeLayer.append(line);
    if (edge.type !== "contains" && edge.type !== "serves") {
      const label = el("text", { class: "edge-label", "data-id": edge.id }, edge.label || edge.type);
      label.__data__ = edge;
      edgeLabelLayer.append(label);
    }
  }
  for (const node of nodes) {
    const style = TYPE_STYLE[node.type] || { color: "#8491a3", size: 10, icon: "?" };
    const color = node.severity ? SEVERITY_COLOR[node.severity] || style.color : style.color;
    const group = el("g", { class: "node", "data-id": node.id, "data-type": node.type, tabindex: "0", role: "button", "aria-label": `${node.type}: ${node.label}` });
    group.__data__ = node;
    group.append(el("circle", { class: "node-ring", r: style.size + 5 }));
    group.append(el("circle", { class: "node-circle", r: style.size, fill: color }));
    group.append(el("text", { class: "node-icon", y: 1 }, style.icon));
    group.append(el("text", { class: "node-label", y: style.size + 15 }, truncate(node.label, node.type === "endpoint" ? 32 : 24)));
    if (node.type === "exposure") {
      group.append(el("circle", { class: "node-badge", cx: style.size - 1, cy: -style.size + 1, r: 6 }));
      group.append(el("text", { class: "node-badge-text", x: style.size - 1, y: -style.size + 1 }, "!"));
    }
    group.addEventListener("pointerdown", event => {
      event.stopPropagation();
      state.dragged = node;
      state.dragStart = { x: event.clientX, y: event.clientY };
      state.dragMoved = false;
      group.setPointerCapture(event.pointerId);
    });
    group.addEventListener("click", event => {
      event.stopPropagation();
      if (state.suppressClick) { state.suppressClick = false; return; }
      selectNode(node.id);
    });
    group.addEventListener("dblclick", event => { event.stopPropagation(); selectNode(node.id); centerOnNode(node); });
    group.addEventListener("keydown", event => { if (event.key === "Enter" || event.key === " ") selectNode(node.id); });
    group.addEventListener("mouseenter", event => showTooltip(event, node));
    group.addEventListener("mousemove", moveTooltip);
    group.addEventListener("mouseleave", hideTooltip);
    nodeLayer.append(group);
  }
  updateGeometry();
}

function updateGeometry() {
  edgeLayer.querySelectorAll(".edge").forEach(line => {
    const edge = line.__data__, source = state.nodeMap.get(edge.source), target = state.nodeMap.get(edge.target);
    if (!source || !target) return;
    line.setAttribute("x1", source.x); line.setAttribute("y1", source.y); line.setAttribute("x2", target.x); line.setAttribute("y2", target.y);
  });
  edgeLabelLayer.querySelectorAll(".edge-label").forEach(label => {
    const edge = label.__data__, source = state.nodeMap.get(edge.source), target = state.nodeMap.get(edge.target);
    if (!source || !target) return;
    label.setAttribute("x", (source.x + target.x) / 2); label.setAttribute("y", (source.y + target.y) / 2);
  });
  nodeLayer.querySelectorAll(".node").forEach(group => {
    const node = group.__data__; group.setAttribute("transform", `translate(${node.x},${node.y})`);
  });
}

function selectNode(id) {
  state.selected = id;
  state.connected = new Set([id]);
  for (const edge of state.edges) {
    if (edge.source === id) state.connected.add(edge.target);
    if (edge.target === id) state.connected.add(edge.source);
  }
  renderClasses();
  renderDetails(state.nodeMap.get(id));
}

function clearFocus() {
  state.selected = null; state.connected.clear();
  document.getElementById("detail").classList.add("hidden");
  document.getElementById("detail-empty").classList.remove("hidden");
  renderClasses();
}

function renderClasses() {
  nodeLayer.querySelectorAll(".node").forEach(group => {
    const id = group.dataset.id;
    group.classList.toggle("focused", id === state.selected);
    group.classList.toggle("dimmed", state.selected !== null && !state.connected.has(id));
    group.classList.toggle("match", state.matches.has(id));
  });
  edgeLayer.querySelectorAll(".edge").forEach(line => {
    const edge = line.__data__;
    const connected = state.selected && (edge.source === state.selected || edge.target === state.selected);
    line.classList.toggle("focused", Boolean(connected));
    line.classList.toggle("dimmed", state.selected !== null && !connected);
  });
  edgeLabelLayer.querySelectorAll(".edge-label").forEach(label => {
    const edge = label.__data__;
    label.classList.toggle("focused", Boolean(state.selected && (edge.source === state.selected || edge.target === state.selected)));
  });
}

function updateSearch() {
  state.matches.clear();
  if (state.search) for (const node of state.nodes) {
    const haystack = `${node.label} ${node.type} ${node.severity || ""} ${JSON.stringify(node.info || {})}`.toLowerCase();
    if (haystack.includes(state.search)) state.matches.add(node.id);
  }
  document.getElementById("search-count").textContent = state.search ? String(state.matches.size) : "";
}

function renderDetails(node) {
  if (!node) return;
  document.getElementById("detail-empty").classList.add("hidden");
  document.getElementById("detail").classList.remove("hidden");
  const style = TYPE_STYLE[node.type] || { icon: "?" };
  document.getElementById("detail-icon").textContent = style.icon;
  document.getElementById("detail-title").textContent = node.label;
  const type = document.getElementById("detail-type");
  type.textContent = node.severity ? `${node.type} · ${node.severity}` : node.type;
  type.className = `pill ${node.severity || ""}`;

  const links = document.getElementById("detail-links"); links.replaceChildren();
  const urls = findUrls(node.info);
  urls.slice(0, 8).forEach((candidate, index) => links.append(referenceLink(candidate, index)));
  if (urls.length > 8) links.append(htmlEl("span", "link-overflow", `+${urls.length - 8} more below`));
  const copyAll = htmlEl("button", "copy-button", "copy evidence");
  copyAll.type = "button";
  copyAll.addEventListener("click", () => copyText(JSON.stringify(node.info || {}, null, 2), copyAll));
  links.append(copyAll);
  const props = document.getElementById("detail-properties"); props.replaceChildren();
  appendPropertyGroups(props, node.info || {});
  const relations = document.getElementById("detail-relations"); relations.replaceChildren();
  for (const edge of state.edges.filter(edge => edge.source === node.id || edge.target === node.id)) {
    const otherId = edge.source === node.id ? edge.target : edge.source;
    const other = state.nodeMap.get(otherId); if (!other) continue;
    const row = htmlEl("div", "relation");
    row.append(htmlEl("span", "relation-type", edge.type), htmlEl("span", "", other.label));
    row.addEventListener("click", () => selectNode(otherId));
    relations.append(row);
  }
}

function referenceLink(candidate, index = 0) {
  const url = new URL(candidate);
  let label = url.hostname.replace(/^www\./, "");
  if (url.hostname.includes("nvd.nist.gov")) label = "NVD record";
  else if (url.hostname.includes("cve.org")) label = "CVE record";
  else if (url.hostname.includes("cwe.mitre.org")) label = "CWE / MITRE";
  else if (url.hostname.includes("owasp.org")) label = "OWASP reference";
  else if (index > 0) label = truncate(label, 20);
  const anchor = htmlEl("a", "pill", label);
  anchor.href = candidate; anchor.target = "_blank"; anchor.rel = "noopener noreferrer";
  anchor.title = candidate;
  return anchor;
}

function appendPropertyGroups(parent, info) {
  if (!info || typeof info !== "object" || Array.isArray(info)) return appendProperties(parent, info);
  const entries = Object.entries(info);
  for (const [key, value] of entries) {
    if (value && typeof value === "object") {
      const details = htmlEl("details", "property-group");
      details.open = ["evidence", "references", "standards"].includes(key.toLowerCase());
      const summary = htmlEl("summary", "property-group-title");
      summary.append(htmlEl("span", "", labelFor(key)), htmlEl("span", "group-count", collectionCount(value)));
      details.append(summary);
      const content = htmlEl("div", "property-group-content");
      if (Array.isArray(value) && value.every(item => typeof item === "string" && /^https?:\/\//i.test(item))) appendUrlPages(content, value);
      else appendProperties(content, value);
      details.append(content); parent.append(details);
    } else appendProperties(parent, value, key);
  }
}

function appendProperties(parent, value, prefix = "") {
  if (value === null || value === undefined) return;
  if (Array.isArray(value)) {
    if (value.every(item => typeof item === "string" && /^https?:\/\//i.test(item))) {
      appendUrlPages(parent, value);
      return;
    }
    value.forEach((item, index) => appendProperties(parent, item, `${prefix}[${index + 1}]`));
    return;
  }
  if (typeof value === "object") {
    for (const [key, item] of Object.entries(value)) appendProperties(parent, item, prefix ? `${prefix}.${key}` : key);
    return;
  }
  const row = htmlEl("div", "property");
  const heading = htmlEl("div", "property-key");
  heading.append(htmlEl("span", "", prefix));
  const copy = htmlEl("button", "property-copy", "copy");
  copy.type = "button"; copy.addEventListener("click", () => copyText(String(value), copy)); heading.append(copy);
  const rendered = htmlEl("div", "property-value");
  if (typeof value === "string" && /^https?:\/\//i.test(value)) rendered.append(referenceLink(value));
  else rendered.textContent = String(value);
  row.append(heading, rendered);
  parent.append(row);
}

function appendUrlPages(parent, values) {
  const unique = [...new Set(values)];
  const pageSize = 20; let shown = Math.min(pageSize, unique.length);
  const list = htmlEl("div", "url-list");
  const paint = () => {
    list.replaceChildren();
    unique.slice(0, shown).forEach((url, index) => {
      const row = htmlEl("div", "url-row");
      row.append(htmlEl("span", "url-index", String(index + 1)), referenceLink(url, index));
      const copy = htmlEl("button", "property-copy", "copy"); copy.type = "button";
      copy.addEventListener("click", () => copyText(url, copy)); row.append(copy); list.append(row);
    });
  };
  paint(); parent.append(list);
  if (unique.length > shown) {
    const more = htmlEl("button", "load-more", `show next ${Math.min(pageSize, unique.length - shown)} of ${unique.length}`);
    more.type = "button"; more.addEventListener("click", () => {
      shown = Math.min(unique.length, shown + pageSize); paint();
      more.textContent = shown < unique.length ? `show next ${Math.min(pageSize, unique.length - shown)} of ${unique.length}` : "all URLs shown";
      more.disabled = shown >= unique.length;
    }); parent.append(more);
  }
}

function collectionCount(value) {
  if (Array.isArray(value)) return `${value.length} items`;
  if (value && typeof value === "object") return `${Object.keys(value).length} fields`;
  return "";
}

async function copyText(value, button) {
  try {
    await navigator.clipboard.writeText(value);
    const previous = button.textContent; button.textContent = "copied";
    setTimeout(() => { button.textContent = previous; }, 1100);
  } catch (_) { button.textContent = "copy failed"; }
}

function findUrls(value, found = new Set()) {
  if (typeof value === "string" && /^https?:\/\//i.test(value)) found.add(value);
  else if (Array.isArray(value)) value.forEach(item => findUrls(item, found));
  else if (value && typeof value === "object") Object.values(value).forEach(item => findUrls(item, found));
  return [...found];
}

function showTooltip(event, node) {
  tooltip.textContent = `${node.label}\n${labelFor(node.type)}${node.severity ? ` · ${node.severity}` : ""}\nClick to inspect relationships`;
  tooltip.classList.add("visible"); moveTooltip(event);
}
function moveTooltip(event) { tooltip.style.left = `${event.clientX + 14}px`; tooltip.style.top = `${event.clientY + 12}px`; }
function hideTooltip() { tooltip.classList.remove("visible"); }

function fitView(animate = true) {
  const graph = visibleGraph(); if (!graph.nodes.length) return;
  const xs = graph.nodes.map(node => node.x), ys = graph.nodes.map(node => node.y);
  const minX = Math.min(...xs) - 55, maxX = Math.max(...xs) + 55, minY = Math.min(...ys) - 55, maxY = Math.max(...ys) + 55;
  const { width, height } = dimensions();
  const k = clamp(Math.min(width / Math.max(1, maxX - minX), height / Math.max(1, maxY - minY)) * .9, .12, 2.2);
  const next = { x: width / 2 - ((minX + maxX) / 2) * k, y: height / 2 - ((minY + maxY) / 2) * k, k };
  if (!animate) { state.transform = next; applyTransform(); return; }
  const start = { ...state.transform }, started = performance.now();
  const frame = now => {
    const t = Math.min(1, (now - started) / 280), eased = 1 - Math.pow(1 - t, 3);
    state.transform = { x: lerp(start.x, next.x, eased), y: lerp(start.y, next.y, eased), k: lerp(start.k, next.k, eased) };
    applyTransform(); if (t < 1) requestAnimationFrame(frame);
  };
  requestAnimationFrame(frame);
}

function centerOnNode(node) {
  const { width, height } = dimensions();
  const next = { x: width / 2 - node.x * Math.max(1.35, state.transform.k), y: height / 2 - node.y * Math.max(1.35, state.transform.k), k: Math.max(1.35, state.transform.k) };
  const start = { ...state.transform }, started = performance.now();
  const frame = now => {
    const t = Math.min(1, (now - started) / 240), eased = 1 - Math.pow(1 - t, 3);
    state.transform = { x: lerp(start.x, next.x, eased), y: lerp(start.y, next.y, eased), k: lerp(start.k, next.k, eased) };
    applyTransform(); if (t < 1) requestAnimationFrame(frame);
  };
  requestAnimationFrame(frame);
}

function applyTransform() { viewport.setAttribute("transform", `translate(${state.transform.x},${state.transform.y}) scale(${state.transform.k})`); }
function svgPoint(clientX, clientY) { const rect = svg.getBoundingClientRect(); return { x: (clientX - rect.left - state.transform.x) / state.transform.k, y: (clientY - rect.top - state.transform.y) / state.transform.k }; }
function dimensions() { const rect = svg.getBoundingClientRect(); return { width: Math.max(400, rect.width), height: Math.max(320, rect.height) }; }
function radius(node) { return TYPE_STYLE[node.type]?.size || 10; }
function truncate(value, length) { value = String(value || ""); return value.length > length ? value.slice(0, length - 1) + "…" : value; }
function labelFor(value) { return String(value).replaceAll("_", " ").replace(/\b\w/g, letter => letter.toUpperCase()); }
function clamp(value, min, max) { return Math.max(min, Math.min(max, value)); }
function lerp(a, b, t) { return a + (b - a) * t; }

boot().catch(error => {
  document.getElementById("run-id").textContent = "Unable to load run";
  document.getElementById("graph-status").textContent = "error";
  document.getElementById("empty-state").textContent = error.message;
  document.getElementById("empty-state").classList.remove("hidden");
});