{% extends 'generic/_base.html' %}
{% load i18n static %}

{% block title %}{% trans "Object Analyzer" %}{% endblock %}

{% block content %}
<style>
/* ── Search / Picker ─────────────────────────────────── */
.nsm-oa-wrap  { position: relative; }
.nsm-oa-input {
  width: 100%; padding: .38rem .8rem; font-size: .85rem;
  border: 1px solid var(--bs-secondary); border-radius: .35rem;
  background: var(--bs-body-bg); color: var(--bs-body-color);
}
.nsm-oa-input:focus { outline: 0; border-color: var(--bs-primary); box-shadow: 0 0 0 .15rem rgba(13,110,253,.2); }
.nsm-oa-drop {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--tblr-bg-surface, var(--bs-body-bg, #fff));
  border: 1px solid var(--tblr-border-color, var(--bs-border-color));
  border-top: 0; border-radius: 0 0 .35rem .35rem;
  max-height: 18rem; overflow-y: auto; z-index: 400;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.nsm-oa-drop-item {
  padding: .32rem .8rem; cursor: pointer; font-size: .83rem;
  display: flex; align-items: baseline; gap: .4rem;
  background: var(--tblr-bg-surface, var(--bs-body-bg, #fff));
}
.nsm-oa-drop-item:hover {
  background: var(--tblr-bg-surface-secondary, var(--bs-tertiary-bg, #f1f5f9));
}
.nsm-oa-drop-type { font-size: .7rem; color: var(--tblr-secondary-color, var(--bs-secondary-color)); }
.nsm-oa-drop-msg {
  padding: .4rem .8rem; font-size: .8rem;
  color: var(--tblr-secondary-color, var(--bs-secondary-color));
  background: var(--tblr-bg-surface, var(--bs-body-bg, #fff));
}
.nsm-oa-sel {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--bs-primary-bg-subtle); border: 1px solid var(--bs-primary-border-subtle);
  border-radius: .35rem; padding: .25rem .6rem; font-size: .83rem; font-weight: 600;
}
.nsm-oa-sel-clear { cursor: pointer; opacity: .6; font-size: .9rem; line-height: 1; }
.nsm-oa-sel-clear:hover { opacity: 1; }

/* ── Graph Canvas — full viewport height ─────────────── */
.page-wrapper:has(#nsm-oa-graph) {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  height: 100dvh;
  max-height: 100dvh;
}
.page-wrapper:has(#nsm-oa-graph) #page-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.page-wrapper:has(#nsm-oa-graph) .page-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  min-height: 0;
  overflow: hidden;
}
.page-wrapper:has(#nsm-oa-graph) .page-body > .container-fluid.tab-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding-bottom: 0 !important;
  min-height: 0;
  overflow: hidden;
}
.nsm-oa-layout {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.nsm-oa-layout > .card,
.nsm-oa-layout > .nsm-oa-legend {
  flex-shrink: 0;
}
#nsm-oa-graph {
  flex: 1 1 auto;
  min-height: 12rem;
  position: relative;
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  overflow: hidden;
  background: var(--bs-body-bg);
}
/* React Flow overrides for dark/light mode */
.nsm-oa-graph-wrap .react-flow { isolation: isolate; }
.react-flow__background {
  opacity: 1;
  z-index: 0;
}
.react-flow__controls-button {
  background: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
  fill: var(--bs-body-color);
}
.react-flow__controls-button:hover {
  background: var(--tblr-bg-surface-secondary, var(--bs-tertiary-bg, #f1f5f9));
}
[data-bs-theme="dark"] .react-flow__controls-button:hover {
  background: var(--tblr-bg-surface-secondary, #1e2736);
}
.react-flow__minimap {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: .35rem;
  overflow: hidden;
}
.react-flow__node.nsm-oa-node { overflow: visible; }
.react-flow__edges { z-index: 1; }
.react-flow__edge-path { stroke-width: 2; }
.nsm-oa-toggle { touch-action: manipulation; }
.nsm-oa-toggle-row { display: flex; gap: 4px; align-items: center; justify-content: center; }
.nsm-oa-graph-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  overflow: hidden;
}
.nsm-oa-graph-wrap .react-flow { width: 100%; height: 100%; }
.nsm-oa-link-picker-backdrop {
  position: absolute; inset: 0; z-index: 30;
  background: rgba(15, 23, 42, .45);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.nsm-oa-link-picker {
  width: min(28rem, 100%);
  max-height: min(32rem, 90%);
  display: flex; flex-direction: column;
  background: var(--tblr-bg-surface, var(--bs-body-bg, #fff));
  border: 1px solid var(--tblr-border-color, var(--bs-border-color));
  border-radius: .5rem;
  box-shadow: 0 12px 32px rgba(0,0,0,.28);
  overflow: hidden;
}
.nsm-oa-link-picker-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .55rem .75rem;
  border-bottom: 1px solid var(--tblr-border-color, var(--bs-border-color));
  font-size: .85rem; font-weight: 600;
}
.nsm-oa-link-picker-body {
  overflow-y: auto; padding: .35rem 0;
  font-size: .8rem;
}
.nsm-oa-link-picker-row {
  display: flex; align-items: center; gap: .45rem;
  padding: .22rem .75rem;
}
.nsm-oa-link-picker-row:hover { background: var(--tblr-bg-surface-secondary, var(--bs-tertiary-bg, #f1f5f9)); }
.nsm-oa-link-picker-row.depth-1 { padding-left: 1.35rem; }
.nsm-oa-link-picker-row.depth-2 { padding-left: 2.1rem; }
.nsm-oa-link-picker-group-head {
  display: flex; align-items: center; gap: .4rem;
  width: 100%;
  padding: .32rem .75rem;
  font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em;
  color: var(--tblr-secondary-color, var(--bs-secondary-color));
  user-select: none; text-align: left;
}
.nsm-oa-link-picker-group-head:hover {
  background: var(--tblr-bg-surface-secondary, var(--bs-tertiary-bg, #f1f5f9));
}
[data-bs-theme="dark"] .nsm-oa-link-picker-group-head:hover {
  background: var(--tblr-bg-surface-secondary, #1e2736);
}
.nsm-oa-link-picker-group-checkbox {
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
  accent-color: var(--bs-primary);
}
.nsm-oa-link-picker-group-toggle {
  display: flex; align-items: center; gap: .4rem;
  flex: 1; min-width: 0;
  padding: 0; border: none; background: transparent;
  font: inherit;
  color: inherit;
  text-transform: inherit; letter-spacing: inherit;
  cursor: pointer; user-select: none; text-align: left;
}
.nsm-oa-link-picker-group-chevron {
  flex-shrink: 0;
  font-size: .65rem;
  width: .85rem;
  opacity: .75;
}
.nsm-oa-link-picker-group-count {
  flex-shrink: 0;
  margin-left: auto;
  font-size: .68rem;
  font-weight: 600;
  color: var(--tblr-secondary-color, var(--bs-secondary-color));
  background: var(--tblr-bg-surface-secondary, var(--bs-tertiary-bg, #f1f5f9));
  border-radius: 999px;
  padding: .05rem .45rem;
  line-height: 1.35;
}
.nsm-oa-link-picker-row-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nsm-oa-link-picker-l2-count {
  flex-shrink: 0;
  font-size: .68rem;
  font-weight: 600;
  color: var(--tblr-secondary-color, var(--bs-secondary-color));
  background: var(--tblr-bg-surface-secondary, var(--bs-tertiary-bg, #f1f5f9));
  border-radius: 999px;
  padding: .05rem .45rem;
  line-height: 1.35;
}
.nsm-oa-link-picker-foot {
  display: flex; justify-content: flex-end; gap: .4rem;
  padding: .55rem .75rem;
  border-top: 1px solid var(--tblr-border-color, var(--bs-border-color));
}

.nsm-oa-legend { font-size: .75rem; }
.nsm-oa-legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; }

/* ── Toolbar / mode selector ─────────────────────────── */
.nsm-oa-toolbar .form-label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  margin-bottom: .25rem;
  color: var(--tblr-secondary-color, var(--bs-secondary-color));
  text-transform: uppercase;
}
.nsm-oa-mode-selector.btn-group { flex-wrap: nowrap; }
.nsm-oa-mode-selector .btn {
  min-width: 4.75rem;
  font-size: .78rem;
  font-weight: 600;
  padding-inline: .65rem;
}
.nsm-oa-mode-selector .btn-check:checked + .btn {
  z-index: 1;
}
.nsm-oa-mode-hint {
  border-left: 3px solid var(--bs-primary-border-subtle, #cfe2ff);
  padding-left: .65rem;
  line-height: 1.45;
}
[data-bs-theme="dark"] .nsm-oa-mode-hint {
  border-left-color: rgba(var(--bs-primary-rgb, 13, 110, 253), .45);
}
.nsm-oa-legend-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem 1rem;
}
.nsm-oa-legend-item {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  color: var(--tblr-secondary-color, var(--bs-secondary-color));
}
.nsm-oa-empty-icon { font-size: 3rem; opacity: .55; }
.nsm-oa-empty-title { font-size: 1.05rem; font-weight: 600; }
</style>

{{ api_types|json_script:"nsm-oa-api-types" }}

<div class="container-fluid nsm-oa-layout">

  {# ── Search card ─────────────────────────────────────────────── #}
  <div class="card mb-3">
    <div class="card-header d-flex align-items-center gap-2 py-2">
      <i class="mdi mdi-graph text-primary" aria-hidden="true"></i>
      <strong>{% trans "Object Analyzer" %}</strong>
    </div>
    <div class="card-body p-3">
      <form method="get" id="nsm-oa-form">
        <input type="hidden" name="ct" id="nsm-oa-ct" value="{{ sel_ct }}">
        <input type="hidden" name="pk" id="nsm-oa-pk" value="{{ sel_pk }}">
        <input type="hidden" name="name" id="nsm-oa-name" value="{{ sel_name }}">

        <div class="row g-2 align-items-end nsm-oa-toolbar">
          <div class="col-md col-lg">
            <label for="nsm-oa-search" class="form-label">{% trans "Object" %}</label>
            <div class="nsm-oa-wrap">
              <input type="text" class="form-control form-control-sm" id="nsm-oa-search"
                     placeholder="{{ search_placeholder }}"
                     autocomplete="off"
                     value="{% if sel_pk %}{{ sel_name }}{% endif %}">
              <div class="nsm-oa-drop" id="nsm-oa-drop" hidden></div>
            </div>
          </div>

          <div class="col-auto">
            <span class="form-label d-block">{% trans "View" %}</span>
            <div id="nsm-oa-mode-group"
                 class="btn-group btn-group-sm nsm-oa-mode-selector flex-shrink-0"
                 role="group"
                 aria-label="{% trans 'Analyzer view' %}">
              <input type="radio" class="btn-check" name="mode" id="nsm-oa-mode-all" value="all"
                     autocomplete="off"{% if sel_mode != 'security' %} checked{% endif %}>
              <label class="btn btn-outline-secondary" for="nsm-oa-mode-all">{% trans "All" %}</label>
              <input type="radio" class="btn-check" name="mode" id="nsm-oa-mode-security" value="security"
                     autocomplete="off"{% if sel_mode == 'security' %} checked{% endif %}>
              <label class="btn btn-outline-secondary" for="nsm-oa-mode-security">{% trans "Security" %}</label>
            </div>
          </div>

          <div class="col-auto">
            <span class="form-label d-block" aria-hidden="true">&nbsp;</span>
            <div class="d-flex gap-2 flex-nowrap">
              <button type="submit" class="btn btn-sm btn-primary flex-shrink-0">
                <i class="mdi mdi-graph-outline" aria-hidden="true"></i> {% trans "Analyze" %}
              </button>
              {% if sel_pk %}
                <button type="button" class="btn btn-sm btn-outline-secondary flex-shrink-0" id="nsm-oa-clear"
                        title="{% trans 'Clear selection' %}" aria-label="{% trans 'Clear selection' %}">
                  <i class="mdi mdi-close" aria-hidden="true"></i>
                </button>
              {% endif %}
            </div>
          </div>
        </div>

        {% if mode_hint %}
          <p class="nsm-oa-mode-hint text-muted small mb-0 mt-2">{{ mode_hint }}</p>
        {% endif %}

        <div class="nsm-oa-legend mt-2 pt-2 border-top" id="nsm-oa-legend">
          <div class="nsm-oa-legend-row">
            {% for item in legend %}
              <span class="nsm-oa-legend-item">
                <span class="nsm-oa-legend-dot" style="background:{{ item.color }};"></span>{{ item.label }}
              </span>
            {% endfor %}
          </div>
        </div>

        {% if sel_pk %}
          <div class="mt-2 d-flex align-items-center gap-2 flex-wrap">
            <span class="nsm-oa-sel">
              <i class="mdi mdi-check-circle text-primary" aria-hidden="true"></i>
              {{ sel_name }}
            </span>
            <span class="text-muted small">— {% trans "Click a node in the graph to load its connections." %}</span>
          </div>
        {% endif %}
      </form>
    </div>
  </div>

  {# ── Graph ────────────────────────────────────────────────────── #}
  <div id="nsm-oa-graph"
       data-ct="{{ sel_ct }}"
       data-pk="{{ sel_pk }}"
       data-mode="{{ sel_mode }}">
    {% if not sel_pk %}
      <div class="h-100 d-flex flex-column align-items-center justify-content-center text-muted px-3 text-center">
        <i class="mdi mdi-graph-outline nsm-oa-empty-icon" aria-hidden="true"></i>
        <p class="nsm-oa-empty-title mt-3 mb-1">{{ empty_title }}</p>
        <p class="small mb-0" style="max-width: 32rem;">{{ empty_subtitle }}</p>
      </div>
    {% endif %}
  </div>

</div>{# /container #}

{# ── React Flow via ESM ───────────────────────────────────────────── #}
<script src="{% url 'plugins:netbox_nsm:plugin_asset' asset_path='js/nsm_branch_api.js' %}?v=1"></script>
<script type="importmap">
{
  "imports": {
    "react":            "https://esm.sh/react@18.3.1",
    "react/jsx-runtime":"https://esm.sh/react@18.3.1/jsx-runtime",
    "react-dom":        "https://esm.sh/react-dom@18.3.1",
    "react-dom/client": "https://esm.sh/react-dom@18.3.1/client",
    "@xyflow/react":    "https://esm.sh/@xyflow/react@12?deps=react@18.3.1,react-dom@18.3.1"
  }
}
</script>
<link rel="stylesheet" href="https://esm.sh/@xyflow/react@12/dist/style.css">

<script>
window.NSM_OA_I18N = {
  searching: "{% trans 'Searching…'|escapejs %}",
  noResults: "{% trans 'No results'|escapejs %}",
  collapse: "{% trans 'Collapse'|escapejs %}",
  expand: "{% trans 'Expand'|escapejs %}",
  collapseAll: "{% trans 'Collapse all'|escapejs %}",
  openObject: "{% trans 'Open object'|escapejs %}",
  removeNode: "{% trans 'Remove node'|escapejs %}",
  errorPrefix: "{% trans 'Error:'|escapejs %}",
  allOption: "{% trans '-- all --'|escapejs %}",
  viewLinks: "{% trans 'View'|escapejs %}",
  linkPickerTitle: "{% trans 'Select links'|escapejs %}",
  cancel: "{% trans 'Cancel'|escapejs %}",
  loadingLinks: "{% trans 'Loading links…'|escapejs %}",
  cloudLinks: "{% trans 'links'|escapejs %}",
  secondaryLinks: "{% trans 'Secondary links'|escapejs %}",
  typePlural: {
    device: "{% trans 'Devices'|escapejs %}",
    vm: "{% trans 'VMs'|escapejs %}",
    interface: "{% trans 'Interfaces'|escapejs %}",
    ip: "{% trans 'IPs'|escapejs %}",
    prefix: "{% trans 'Prefixes'|escapejs %}",
    iprange: "{% trans 'IP ranges'|escapejs %}",
    vlan: "{% trans 'VLANs'|escapejs %}",
    vrf: "{% trans 'VRFs'|escapejs %}",
    label: "{% trans 'Labels'|escapejs %}",
    zone: "{% trans 'Zones'|escapejs %}",
    group: "{% trans 'Groups'|escapejs %}",
    rule: "{% trans 'Rules'|escapejs %}",
    rulebook: "{% trans 'Rulebooks'|escapejs %}",
    site: "{% trans 'Sites'|escapejs %}",
    tenant: "{% trans 'Tenants'|escapejs %}",
    object: "{% trans 'Objects'|escapejs %}",
  },
};
</script>

<script type="module">
import React, { useState, useCallback, useEffect, useRef } from 'react';
import { createRoot } from 'react-dom/client';
import {
  ReactFlow, ReactFlowProvider, useNodesState, useEdgesState,
  Background, BackgroundVariant, Controls, MiniMap, MarkerType, Panel,
  Handle, Position,
  BaseEdge, EdgeLabelRenderer, getBezierPath,
} from '@xyflow/react';

function oaT(key, fallback) {
  const bag = window.NSM_OA_I18N || {};
  return bag[key] != null ? bag[key] : (fallback || key);
}
function oaTypePlural(nodeType, fallback) {
  const bag = (window.NSM_OA_I18N || {}).typePlural || {};
  return bag[nodeType] != null ? bag[nodeType] : (fallback || nodeType);
}
function oaColorMode() {
  return document.documentElement.getAttribute('data-bs-theme') === 'dark' ? 'dark' : 'light';
}
function oaCanvasColors(mode) {
  const dark = (mode || oaColorMode()) === 'dark';
  return dark
    ? { bg: '#0f172a', grid: '#475569' }
    : { bg: '#f8fafc', grid: '#cbd5e1' };
}
function useOaTheme() {
  const [mode, setMode] = useState(oaColorMode);
  useEffect(() => {
    const root = document.documentElement;
    const sync = () => setMode(oaColorMode());
    sync();
    const obs = new MutationObserver(sync);
    obs.observe(root, { attributes: true, attributeFilter: ['data-bs-theme'] });
    return () => obs.disconnect();
  }, []);
  return { mode, colors: oaCanvasColors(mode) };
}

/* ─────────── Node styles ─────────────────────────────────────── */
const NS = {
  device:   { icon: '🖥',  color: '#0d6efd', bg: '#dbeafe' },
  vm:       { icon: '☁',   color: '#0891b2', bg: '#cffafe' },
  interface:{ icon: '🔌',  color: '#6c757d', bg: '#e9ecef' },
  ip:       { icon: '●',   color: '#16a34a', bg: '#dcfce7' },
  prefix:   { icon: '⊞',  color: '#0d9488', bg: '#ccfbf1' },
  iprange:  { icon: '↔',   color: '#d97706', bg: '#fef3c7' },
  vlan:     { icon: '📡',  color: '#ea580c', bg: '#ffedd5' },
  vrf:      { icon: '⇄',   color: '#7c3aed', bg: '#ede9fe' },
  label:    { icon: '🏷',  color: '#c026d3', bg: '#fae8ff' },
  zone:     { icon: '🛡',  color: '#dc3545', bg: '#ffe4e6' },
  group:    { icon: '⬡',   color: '#78716c', bg: '#f5f5f4' },
  rule:     { icon: '⚡',  color: '#e85f00', bg: '#fff7ed' },
  rulebook: { icon: '📘',  color: '#374151', bg: '#f3f4f6' },
  site:     { icon: '📍',  color: '#0369a1', bg: '#eff6ff' },
  tenant:   { icon: '🏢',  color: '#15803d', bg: '#f0fdf4' },
  object:   { icon: '◆',   color: '#64748b', bg: '#f8fafc' },
  cloud:    { icon: '☁',   color: '#94a3b8', bg: '#f8fafc' },
};

const L2_CLOUD_THRESHOLD = 3;

/* ─────────── Edge factory ────────────────────────────────────── */
function mkEdge(id, source, target, label) {
  return {
    id, source, target, label, type: 'nsm',
    markerEnd: { type: MarkerType.ArrowClosed, width: 12, height: 12, color: '#94a3b8' },
    style: { stroke: '#94a3b8', strokeWidth: 1.5 },
  };
}

/* shared graph callbacks — set by App, used by NsmNode / NsmEdge */
const _graphCb = {};

function branchTargetId(parentId, label, count) {
  const slug = label.replace(/[^a-zA-Z0-9_-]/g, '_');
  return count === 1 ? null : `grp:${parentId}:${slug}`;
}

function rebuildCloudData(cloudId, apiChildrenCache) {
  if (!cloudId.startsWith('cloud:')) return null;
  const l1Id = cloudId.slice(6);
  if (!l1Id) return null;
  const cached = apiChildrenCache[l1Id];
  if (!cached || !cached.length) return null;
  return { children: cached };
}

function rebuildGroupData(grpId, apiChildrenCache) {
  if (!grpId.startsWith('grp:')) return null;
  const rest = grpId.slice(4);
  const sep = rest.lastIndexOf(':');
  if (sep < 0) return null;
  const parentId = rest.slice(0, sep);
  const slug = rest.slice(sep + 1);
  const cached = apiChildrenCache[parentId];
  if (!cached) return null;
  const byLabel = {};
  cached.forEach(c => {
    (byLabel[c.edge_label] = byLabel[c.edge_label] || []).push(c);
  });
  for (const [label, group] of Object.entries(byLabel)) {
    if (label.replace(/[^a-zA-Z0-9_-]/g, '_') === slug) {
      return { children: group };
    }
  }
  return null;
}

/* ─────────── Custom edge component ──────────────────────────── */
function NsmEdge({ id, source, target, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, markerEnd, style, label }) {
  const [edgePath, labelX, labelY] = getBezierPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition });
  return React.createElement(React.Fragment, null,
    React.createElement(BaseEdge, { id, path: edgePath, markerEnd, style }),
    React.createElement(EdgeLabelRenderer, null,
      React.createElement('div', {
        style: { position: 'absolute', transform: `translate(-50%,-50%) translate(${labelX}px,${labelY}px)`, pointerEvents: 'all', textAlign: 'center' },
        className: 'nodrag nopan',
      },
        label ? React.createElement('span', {
          style: { display: 'block', fontSize: 10, fontWeight: 600, color: '#475569', background: 'rgba(248,250,252,.92)', padding: '1px 5px', borderRadius: 3, cursor: 'pointer' },
          title: oaT('collapse', 'Collapse'),
          onClick: (e) => { e.stopPropagation(); _graphCb.collapseEdge?.(source, target); },
        }, label + ' ▾') : null,
      )
    )
  );
}
/* ─────────── Plural labels ─────────────────────────────────────── */
const TYPE_PLURAL = {
  device: oaTypePlural('device', 'Devices'),
  vm: oaTypePlural('vm', 'VMs'),
  interface: oaTypePlural('interface', 'Interfaces'),
  ip: oaTypePlural('ip', 'IPs'),
  prefix: oaTypePlural('prefix', 'Prefixes'),
  iprange: oaTypePlural('iprange', 'IP ranges'),
  vlan: oaTypePlural('vlan', 'VLANs'),
  vrf: oaTypePlural('vrf', 'VRFs'),
  label: oaTypePlural('label', 'Labels'),
  zone: oaTypePlural('zone', 'Zones'),
  group: oaTypePlural('group', 'Groups'),
  rule: oaTypePlural('rule', 'Rules'),
  rulebook: oaTypePlural('rulebook', 'Rulebooks'),
  site: oaTypePlural('site', 'Sites'),
  tenant: oaTypePlural('tenant', 'Tenants'),
  object: oaTypePlural('object', 'Objects'),
};
/* ─────────── Layout helper ──────────────────────────────────── */
const NODE_W = 250, NODE_H = 220;
const HGAP = NODE_W + 80;
const VGAP = NODE_H + 80;
const BRANCH_PAD = 36;

function childPositions(parentPos, count) {
  if (!count) return [];
  const totalW = (count - 1) * HGAP;
  return Array.from({ length: count }, (_, i) => ({
    x: parentPos.x - totalW / 2 + i * HGAP,
    y: parentPos.y + VGAP,
  }));
}

function buildChildMap(allEdges, childrenOrderMap) {
  const edgeChildMap = {};
  allEdges.forEach(e => {
    (edgeChildMap[e.source] = edgeChildMap[e.source] || []);
    if (!edgeChildMap[e.source].includes(e.target)) edgeChildMap[e.source].push(e.target);
  });
  const childMap = {};
  Object.keys(edgeChildMap).forEach(src => {
    const order = childrenOrderMap[src];
    if (order && order.length) {
      const ordered = order.filter(id => edgeChildMap[src].includes(id));
      const extras = edgeChildMap[src].filter(id => !ordered.includes(id));
      childMap[src] = [...ordered, ...extras];
    } else {
      childMap[src] = edgeChildMap[src];
    }
  });
  return childMap;
}

/* ─────────── Alternating L/R tree (picker order, no overlap) ─ */
function treeLayout(allNodes, allEdges, childrenOrderMap) {
  childrenOrderMap = childrenOrderMap || {};
  if (!allNodes.length) return allNodes;
  if (allNodes.length === 1) {
    const n = allNodes[0];
    return [{ ...n, data: { ...n.data, layoutSide: 0 } }];
  }

  const childMap = buildChildMap(allEdges, childrenOrderMap);
  const parentOf = {};
  allEdges.forEach(e => { parentOf[e.target] = e.source; });
  const nodeIds = new Set(allNodes.map(n => n.id));
  let roots = allNodes.filter(n => !parentOf[n.id]);
  if (!roots.length) roots = [allNodes[0]];

  const hCache = {};
  function subtreeH(id, visiting) {
    visiting = visiting || new Set();
    if (hCache[id] !== undefined) return hCache[id];
    if (visiting.has(id)) return NODE_H;
    visiting.add(id);
    const kids = (childMap[id] || []).filter(k => nodeIds.has(k));
    if (!kids.length) {
      hCache[id] = NODE_H;
      visiting.delete(id);
      return hCache[id];
    }
    hCache[id] = kids.reduce((sum, k, i) => sum + subtreeH(k, visiting) + (i ? BRANCH_PAD : 0), 0);
    visiting.delete(id);
    return hCache[id];
  }

  const pos = {};
  const sideMap = {};

  function placeChildren(parentId) {
    const kids = (childMap[parentId] || []).filter(k => nodeIds.has(k));
    if (!kids.length) return;

    const parentPos = pos[parentId];
    const parentSide = sideMap[parentId] ?? 0;

    if (parentSide === 0) {
      let leftY = parentPos.y;
      let rightY = parentPos.y;
      kids.forEach((kidId, i) => {
        const side = i % 2 === 0 ? -1 : 1;
        sideMap[kidId] = side;
        const h = subtreeH(kidId);
        const bandY = side === -1 ? leftY : rightY;
        pos[kidId] = {
          x: parentPos.x + side * HGAP,
          y: bandY + h / 2 - NODE_H / 2,
        };
        placeChildren(kidId);
        if (side === -1) leftY += h + BRANCH_PAD;
        else rightY += h + BRANCH_PAD;
      });
      return;
    }

    const side = parentSide;
    const totalH = kids.reduce((s, k, i) => s + subtreeH(k) + (i ? BRANCH_PAD : 0), 0);
    let y = parentPos.y - totalH / 2;
    kids.forEach(kidId => {
      sideMap[kidId] = side;
      const h = subtreeH(kidId);
      pos[kidId] = {
        x: parentPos.x + side * HGAP,
        y: y + h / 2,
      };
      placeChildren(kidId);
      y += h + BRANCH_PAD;
    });
  }

  roots.forEach((root, ri) => {
    const rootOrig = allNodes.find(n => n.id === root.id);
    const rootX = (rootOrig?.position?.x ?? 400) + ri * HGAP * 2;
    const rootY = rootOrig?.position?.y ?? 50;
    pos[root.id] = { x: rootX, y: rootY };
    sideMap[root.id] = 0;
    placeChildren(root.id);
  });

  /* Fallback: place nodes missed by traversal (never leave at 0,0) */
  allNodes.forEach((n, ni) => {
    if (pos[n.id] !== undefined) return;
    const par = parentOf[n.id];
    if (par && pos[par]) {
      const pSide = sideMap[par] ?? 0;
      const sibs = (childMap[par] || []).filter(k => nodeIds.has(k));
      const idx = Math.max(0, sibs.indexOf(n.id));
      const side = pSide === 0 ? (idx % 2 === 0 ? -1 : 1) : pSide;
      sideMap[n.id] = side;
      pos[n.id] = {
        x: pos[par].x + side * HGAP,
        y: pos[par].y + idx * (NODE_H + BRANCH_PAD),
      };
      return;
    }
    sideMap[n.id] = 0;
    pos[n.id] = { x: 400 + (ni % 4) * HGAP, y: 50 + Math.floor(ni / 4) * VGAP };
  });

  return allNodes.map(n => ({
    ...n,
    position: pos[n.id],
    data: { ...n.data, layoutSide: sideMap[n.id] ?? 0 },
  }));
}

function layoutGraph(allNodes, allEdges, childrenOrderMap) {
  return treeLayout(allNodes, allEdges, childrenOrderMap);
}

function assignRootSourceHandles(nodes, edges) {
  const parentOf = {};
  edges.forEach(e => { parentOf[e.target] = e.source; });
  const roots = new Set(nodes.filter(n => !parentOf[n.id]).map(n => n.id));
  const sideById = {};
  nodes.forEach(n => {
    if (n.data?.layoutSide != null) sideById[n.id] = n.data.layoutSide;
  });
  return edges.map(e => {
    if (!roots.has(e.source)) return e;
    const side = sideById[e.target];
    if (side === -1) return { ...e, sourceHandle: 'sl' };
    if (side === 1) return { ...e, sourceHandle: 'sr' };
    return e;
  });
}

/* ─────────── Link picker modal ──────────────────────────────── */
function LinkPickerModal({ picker, onToggle, onToggleAll, onToggleGroup, onClose, onView }) {
  const [collapsedGroups, setCollapsedGroups] = React.useState(new Set());
  React.useEffect(() => { setCollapsedGroups(new Set()); }, [picker?.nodeId]);

  if (!picker) return null;
  const selectable = picker.rows.filter(r => r.kind === 'l1');
  const allChecked = selectable.length > 0 && selectable.every(r => picker.checked.has(r.key));

  function toggleGroup(groupKey) {
    setCollapsedGroups(prev => {
      const next = new Set(prev);
      if (next.has(groupKey)) next.delete(groupKey);
      else next.add(groupKey);
      return next;
    });
  }

  function renderRow(row) {
    if (row.kind === 'group') {
      const l1Keys = pickerGroupL1Keys(picker.rows, row.groupKey);
      const checkState = pickerGroupCheckState(picker.checked, l1Keys);
      const isCollapsed = collapsedGroups.has(row.groupKey);
      return React.createElement('div', {
        key: row.key,
        className: 'nsm-oa-link-picker-group-head nodrag nopan',
      },
        React.createElement('input', {
          type: 'checkbox',
          className: 'nsm-oa-link-picker-group-checkbox nodrag nopan',
          checked: checkState === 'all',
          ref: el => { if (el) el.indeterminate = checkState === 'partial'; },
          onClick: e => e.stopPropagation(),
          onChange: e => {
            e.stopPropagation();
            onToggleGroup(row.groupKey, e.target.checked);
          },
          'aria-label': row.label,
        }),
        React.createElement('button', {
          type: 'button',
          className: 'nsm-oa-link-picker-group-toggle nodrag nopan',
          onClick: () => toggleGroup(row.groupKey),
          'aria-expanded': !isCollapsed,
        },
          React.createElement('span', { className: 'nsm-oa-link-picker-group-chevron' }, isCollapsed ? '▸' : '▾'),
          React.createElement('span', null, row.label),
          React.createElement('span', { className: 'nsm-oa-link-picker-group-count' }, row.count),
        ),
      );
    }
    if (row.groupKey && collapsedGroups.has(row.groupKey)) return null;
    return React.createElement('label', {
      key: row.key,
      className: `nsm-oa-link-picker-row depth-${row.depth}`,
    },
      React.createElement('input', {
        type: 'checkbox',
        checked: row.kind === 'all' ? allChecked : picker.checked.has(row.key),
        onChange: e => row.kind === 'all' ? onToggleAll(e.target.checked) : onToggle(row.key, e.target.checked),
      }),
      React.createElement('span', { className: 'nsm-oa-link-picker-row-label' }, row.label),
      row.l2Count > 0
        ? React.createElement('span', {
            className: 'nsm-oa-link-picker-l2-count',
            title: oaT('secondaryLinks', 'Secondary links'),
          }, row.l2Count)
        : null,
    );
  }

  return React.createElement('div', {
    className: 'nsm-oa-link-picker-backdrop nodrag nopan',
    onClick: e => { if (e.target === e.currentTarget) onClose(); },
  },
    React.createElement('div', { className: 'nsm-oa-link-picker nodrag nopan', onClick: e => e.stopPropagation() },
      React.createElement('div', { className: 'nsm-oa-link-picker-head' },
        React.createElement('span', null, oaT('linkPickerTitle', 'Select links'), picker.nodeLabel ? ` — ${picker.nodeLabel}` : ''),
        React.createElement('button', {
          type: 'button', className: 'btn-close btn-close-sm', 'aria-label': 'Close',
          onClick: onClose,
        }),
      ),
      React.createElement('div', { className: 'nsm-oa-link-picker-body' },
        picker.loading
          ? React.createElement('div', { style: { padding: '1rem .75rem', color: '#64748b' } }, oaT('loadingLinks', 'Loading links…'))
          : picker.error
            ? React.createElement('div', { style: { padding: '1rem .75rem', color: '#dc3545' } }, picker.error)
            : picker.rows.map(renderRow).filter(Boolean),
        (!picker.loading && !picker.error && picker.l2Loading)
          ? React.createElement('div', {
              style: { padding: '.4rem .75rem', color: '#64748b', fontSize: '.72rem' },
            }, oaT('loadingLinks', 'Loading links…'))
          : null,
      ),
      React.createElement('div', { className: 'nsm-oa-link-picker-foot' },
        React.createElement('button', { type: 'button', className: 'btn btn-sm btn-outline-secondary', onClick: onClose },
          oaT('cancel', 'Cancel')),
        React.createElement('button', {
          type: 'button', className: 'btn btn-sm btn-primary',
          disabled: picker.loading || !!picker.error || picker.checked.size === 0,
          onClick: onView,
        }, oaT('viewLinks', 'View')),
      ),
    ),
  );
}

/* ─────────── Custom node component ──────────────────────────── */
function nsmUsesBranchLinks(id, data) {
  return (data.childCount > 0)
    && !id.startsWith('grp:')
    && !id.startsWith('cloud:')
    && data.nodeType !== 'group'
    && data.nodeType !== 'cloud';
}

function nsmToggleExpand(id, expanded, data) {
  if (expanded) {
    _graphCb.collapse?.(id);
  } else {
    _graphCb.expand?.(id);
  }
}

function nsmHandlePositions(layoutSide) {
  if (layoutSide === -1) return { target: Position.Right, source: Position.Left };
  if (layoutSide === 1) return { target: Position.Left, source: Position.Right };
  return { target: Position.Top, source: Position.Bottom };
}

function NsmNode({ id, data, selected }) {
  const s = NS[data.nodeType] || NS.object;
  const textColor = selected ? '#fff' : '#1a202c';
  const isCloud = data.nodeType === 'cloud';
  const handles = nsmHandlePositions(data.layoutSide ?? 0);
  const isRoot = (data.layoutSide ?? 0) === 0;

  return React.createElement('div', {
    className: 'nsm-oa-node' + (isCloud ? ' nsm-oa-node-cloud' : ''),
    style: {
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      fontFamily: 'system-ui, -apple-system, sans-serif',
      minWidth: isCloud ? 120 : 140,
      maxWidth: isCloud ? 160 : 210,
    },
  },
    /* ── target handle ── */
    React.createElement(Handle, {
      type: 'target', position: handles.target,
      style: { background: s.color, width: 8, height: 8, border: '2px solid #fff' },
    }),
    /* ── node body ── */
    React.createElement('div', {
      style: {
        width: '100%',
        padding: isCloud ? '22px 16px 14px' : '18px 12px 8px',
        borderRadius: isCloud ? '55% 55% 45% 45% / 50% 50% 50% 50%' : 10,
        position: 'relative',
        background: selected ? s.color : s.bg,
        border: isCloud ? `2px dashed ${s.color}` : `2px solid ${s.color}`,
        color: textColor,
        boxShadow: data.loading ? `0 0 0 3px ${s.color}88`
          : isCloud ? `0 4px 14px ${s.color}33`
          : selected ? `0 0 0 3px ${s.color}44` : '0 2px 8px rgba(0,0,0,.12)',
        transition: 'all .15s', userSelect: 'none',
        cursor: 'default',
        textAlign: 'center',
      },
    },
      /* top-left: link to object */
      data.url && data.url !== '#'
        ? React.createElement('a', {
            href: data.url, target: '_blank', rel: 'noreferrer',
            onClick: e => e.stopPropagation(),
            style: {
              position: 'absolute', top: 3, left: 5,
              fontSize: 10, lineHeight: 1,
              color: selected ? 'rgba(255,255,255,.75)' : s.color,
              textDecoration: 'none', opacity: .8,
            },
            title: oaT('openObject', 'Open object'),
          }, '↗')
        : null,
      /* top-right: remove button */
      React.createElement('button', {
        style: {
          position: 'absolute', top: 1, right: 3,
          background: 'transparent', border: 'none',
          cursor: 'pointer', fontSize: 14, lineHeight: 1, padding: '0 2px',
          color: selected ? 'rgba(255,255,255,.8)' : '#dc3545',
        },
        title: oaT('removeNode', 'Remove node'),
        className: 'nodrag nopan',
        onClick: (e) => { e.stopPropagation(); _graphCb.remove?.(id); },
      }, '×'),
      /* name — full card width */
      React.createElement('div', {
        style: {
          width: '100%',
          fontWeight: 700,
          fontSize: 12,
          lineHeight: 1.25,
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          whiteSpace: 'nowrap',
          paddingLeft: data.url && data.url !== '#' ? 12 : 0,
          paddingRight: 12,
          textAlign: 'center',
        },
      }, data.loading ? '…' : (isCloud ? `☁ ${data.label}` : data.label)),
      /* meta row: icon · type · counter */
      !data.loading
        ? React.createElement('div', {
            style: {
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              gap: 5,
              width: '100%',
              marginTop: 5,
              fontSize: 10,
              opacity: 0.72,
              letterSpacing: '.2px',
              flexWrap: 'nowrap',
            },
          },
          React.createElement('span', { style: { fontSize: 15, lineHeight: 1, flexShrink: 0 } }, s.icon),
          React.createElement('span', {
            style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '58%' },
          }, data.typeLabel || data.nodeType),
          data.childCount != null
            ? React.createElement('span', { style: { flexShrink: 0, fontWeight: 600 } }, `\u00b7 ${data.childCount}`)
            : null,
          data.expanded
            ? React.createElement('span', {
                style: {
                  width: 6, height: 6, borderRadius: '50%', flexShrink: 0,
                  background: selected ? '#fff' : s.color,
                },
              })
            : null,
        )
        : React.createElement('div', {
            style: { marginTop: 5, fontSize: 15, lineHeight: 1, textAlign: 'center' },
          }, '⏳'),
    ),
    /* ── connector + expand/collapse (inside node bounds for React Flow hit-testing) ── */
    !data.loading
      ? React.createElement('div', {
          className: 'nodrag nopan nsm-oa-toggle',
          style: {
            display: 'flex', flexDirection: 'column', alignItems: 'center',
            marginTop: 2, paddingBottom: 2,
            pointerEvents: 'all',
          },
        },
        React.createElement('div', {
          style: { width: 2, height: 14, background: s.color, opacity: 0.65, borderRadius: 1 },
        }),
        nsmUsesBranchLinks(id, data)
          ? React.createElement('div', { className: 'nsm-oa-toggle-row' },
              React.createElement('div', {
                role: 'button',
                tabIndex: 0,
                title: oaT('expand', 'Expand'),
                onClick: e => { e.stopPropagation(); _graphCb.openLinkPicker?.(id); },
                onKeyDown: e => {
                  if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    e.stopPropagation();
                    _graphCb.openLinkPicker?.(id);
                  }
                },
                style: {
                  width: 22, height: 22, borderRadius: '50%', flexShrink: 0,
                  background: s.color, color: '#fff',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 15, fontWeight: 700, lineHeight: 1, cursor: 'pointer',
                  boxShadow: '0 1px 4px rgba(0,0,0,.25)',
                },
              }, '+'),
              data.expanded
                ? React.createElement('div', {
                    role: 'button',
                    tabIndex: 0,
                    title: oaT('collapseAll', 'Collapse all'),
                    onClick: e => { e.stopPropagation(); _graphCb.collapse?.(id); },
                    onKeyDown: e => {
                      if (e.key === 'Enter' || e.key === ' ') {
                        e.preventDefault();
                        e.stopPropagation();
                        _graphCb.collapse?.(id);
                      }
                    },
                    style: {
                      width: 22, height: 22, borderRadius: '50%', flexShrink: 0,
                      background: selected ? '#fff' : s.bg,
                      color: s.color,
                      border: `2px solid ${s.color}`,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontSize: 15, fontWeight: 700, lineHeight: 1, cursor: 'pointer',
                    },
                  }, '\u2212')
                : null,
            )
          : React.createElement('div', {
              role: 'button',
              tabIndex: 0,
              title: data.expanded ? oaT('collapse', 'Collapse') : oaT('expand', 'Expand'),
              onClick: e => { e.stopPropagation(); nsmToggleExpand(id, data.expanded, data); },
              onKeyDown: e => {
                if (e.key === 'Enter' || e.key === ' ') {
                  e.preventDefault();
                  e.stopPropagation();
                  nsmToggleExpand(id, data.expanded, data);
                }
              },
              style: {
                width: 22, height: 22, borderRadius: '50%', flexShrink: 0,
                background: s.color, color: '#fff',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 15, fontWeight: 700, lineHeight: 1, cursor: 'pointer',
                boxShadow: '0 1px 4px rgba(0,0,0,.25)',
              },
            }, data.expanded ? '\u2212' : '+'),
      )
      : null,
    /* ── source handle(s) ── */
    isRoot
      ? React.createElement(React.Fragment, null,
          React.createElement(Handle, {
            type: 'source', position: Position.Left, id: 'sl',
            style: {
              background: s.color, border: '2px solid #fff',
              width: data.expanded ? 8 : 0, height: data.expanded ? 8 : 0,
              opacity: data.expanded ? 1 : 0,
            },
          }),
          React.createElement(Handle, {
            type: 'source', position: Position.Right, id: 'sr',
            style: {
              background: s.color, border: '2px solid #fff',
              width: data.expanded ? 8 : 0, height: data.expanded ? 8 : 0,
              opacity: data.expanded ? 1 : 0,
            },
          }),
        )
      : React.createElement(Handle, {
          type: 'source', position: handles.source,
          style: {
            background: s.color, border: '2px solid #fff',
            width: data.loading || data.expanded ? 8 : 0,
            height: data.loading || data.expanded ? 8 : 0,
            opacity: data.loading || data.expanded ? 1 : 0,
          },
        }),
  );
}

const nodeTypes = { nsm: NsmNode };
const edgeTypes = { nsm: NsmEdge };

/* ─────────── Helpers ─────────────────────────────────────────── */
function getCsrf() {
  const m = document.cookie.match(/csrftoken=([^;]+)/);
  return m ? m[1] : '';
}
function apiHeaders(extra) {
  return (window.NSM_BRANCH_API && window.NSM_BRANCH_API.mergeBranchHeaders(extra)) || extra;
}
async function fetchNodeData(ctId, pk, mode) {
  const url = `/plugins/netbox-nsm/api/analyzer/?ct=${ctId}&pk=${pk}&mode=${encodeURIComponent(mode || 'all')}`;
  const opts = {
    headers: apiHeaders({ Accept: 'application/json', 'X-CSRFToken': getCsrf() }),
    credentials: 'same-origin',
  };
  const r = (window.NSM_BRANCH_API && window.NSM_BRANCH_API.fetch)
    ? await window.NSM_BRANCH_API.fetch(url, opts)
    : await fetch(url, opts);
  if (!r.ok) throw new Error(`HTTP ${r.status}`);
  return r.json();
}

/* Batched link-picker tree: one request for L1 (depth=1) or L1+L2 (depth=2),
   replacing the old 1+N per-child fetch storm. */
async function fetchPickerTree(ctId, pk, depth, mode) {
  const url = `/plugins/netbox-nsm/api/analyzer/picker/?ct=${ctId}&pk=${pk}&depth=${depth || 2}&mode=${encodeURIComponent(mode || 'all')}`;
  const opts = {
    headers: apiHeaders({ Accept: 'application/json', 'X-CSRFToken': getCsrf() }),
    credentials: 'same-origin',
  };
  const r = (window.NSM_BRANCH_API && window.NSM_BRANCH_API.fetch)
    ? await window.NSM_BRANCH_API.fetch(url, opts)
    : await fetch(url, opts);
  if (!r.ok) throw new Error(`HTTP ${r.status}`);
  return r.json();
}

/* normalize a server child payload to the {edge_label,edge_type,node} cache shape */
function pickerChildCacheShape(list) {
  return (list || []).map(c => ({ edge_label: c.edge_label, edge_type: c.edge_type, node: c.node }));
}

function dedupeSortLinks(list) {
  const seen = new Set();
  return (list || [])
    .filter(c => seen.has(c.node.id) ? false : (seen.add(c.node.id), true))
    .sort((a, b) => `${a.edge_label} ${a.node.label}`.localeCompare(`${b.edge_label} ${b.node.label}`));
}

/* Canvas edge filter for link picker (mirrors analyzer/picker.py for unit tests). */
function pickerEdgeKey(source, target) {
  return `${source}|${target}`;
}
function canvasEdgeKeysFromEdges(edges) {
  return new Set((edges || []).map(e => pickerEdgeKey(e.source, e.target)));
}
function pickerEdgeExists(parentId, targetId, edgeKeys) {
  return edgeKeys.has(pickerEdgeKey(parentId, targetId))
    || edgeKeys.has(pickerEdgeKey(targetId, parentId));
}
function filterPickerChildrenForCanvas(children, parentId, edgeKeys, linkedNeighborIds) {
  const linked = linkedNeighborIds ? new Set(linkedNeighborIds) : null;
  return (children || []).filter(c => !pickerEdgeExists(parentId, c.node.id, edgeKeys)).map(c => {
    if (!Array.isArray(c.l2)) return c;
    const l1Id = c.node.id;
    const l2 = c.l2.filter(l2c => {
      if (pickerEdgeExists(l1Id, l2c.node.id, edgeKeys)) return false;
      if (linked && linked.has(l2c.node.id)) return false;
      return true;
    });
    return { ...c, l2, l2_count: l2.length };
  });
}
function filterPickerTreeForCanvas(tree, parentId, edgeKeys, linkedNeighborIds) {
  const neighbors = linkedNeighborIds || tree.linked_neighbor_ids;
  const children = filterPickerChildrenForCanvas(tree.children || tree, parentId, edgeKeys, neighbors);
  return { ...tree, children, groups: groupPickerChildrenFromItems(children) };
}
function groupPickerChildrenFromItems(children) {
  const buckets = {};
  (children || []).forEach(c => {
    const label = c.edge_label || 'Other';
    const key = label.toLowerCase().replace(/-/g, '_').replace(/ /g, '_');
    if (!buckets[key]) buckets[key] = { key, label, items: [] };
    buckets[key].items.push(c);
  });
  const groups = Object.values(buckets);
  groups.forEach(g => {
    g.items.sort((a, b) => String(a.node?.label || '').localeCompare(String(b.node?.label || ''), undefined, { sensitivity: 'base' }));
  });
  groups.sort((a, b) => a.label.localeCompare(b.label, undefined, { sensitivity: 'base' }));
  return groups;
}

function pickerL1Row(c, groupKey, grouped) {
  const hasL2 = Array.isArray(c.l2);
  const l2 = hasL2 ? dedupeSortLinks(c.l2) : null;
  return {
    key: `l1:${c.node.id}`,
    depth: grouped ? 2 : 1,
    kind: 'l1',
    groupKey: groupKey || null,
    label: grouped ? c.node.label : `${c.edge_label} · ${c.node.label}`,
    item: c,
    l1Item: c,
    l2Count: l2 ? l2.length : null,
    l2Items: l2,
    l2Pending: !hasL2,
    useCloud: l2 ? l2.length > L2_CLOUD_THRESHOLD : false,
  };
}

/* Build picker rows from server groups (preferred) or flat children array. When
   children carry `l2` (depth=2) the rows get secondary-link counts + items;
   otherwise the rows are rendered immediately with L2 marked pending. */
function buildPickerRows(children, groups) {
  const rows = [{ key: '__all__', depth: 0, kind: 'all', label: oaT('allOption', '-- all --') }];
  if (groups && groups.length) {
    groups.forEach(g => {
      const items = dedupeSortLinks(g.items);
      rows.push({
        key: `grp:${g.key}`,
        depth: 0,
        kind: 'group',
        groupKey: g.key,
        label: g.label,
        count: items.length,
      });
      items.forEach(c => rows.push(pickerL1Row(c, g.key, true)));
    });
    return rows;
  }
  dedupeSortLinks(children).forEach(c => rows.push(pickerL1Row(c, null, false)));
  return rows;
}

/* Group / all-row selection helpers (mirrors analyzer/picker.py for unit tests). */
function pickerGroupL1Keys(rows, groupKey) {
  return rows.filter(r => r.kind === 'l1' && r.groupKey === groupKey).map(r => r.key);
}
function pickerGroupCheckState(checked, l1Keys) {
  if (!l1Keys.length) return 'none';
  const n = l1Keys.filter(k => checked.has(k)).length;
  if (n === 0) return 'none';
  if (n === l1Keys.length) return 'all';
  return 'partial';
}
function pickerSyncAllCheckbox(checked, rows) {
  const selectable = rows.filter(r => r.kind === 'l1');
  if (selectable.length && selectable.every(r => checked.has(r.key))) checked.add('__all__');
  else checked.delete('__all__');
  return checked;
}

/* ─────────── Main App ────────────────────────────────────────── */
function App({ initialCt, initialPk, analyzerMode }) {
  const [nodes, setNodes, onNodesChange] = useNodesState([]);
  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
  const [status, setStatus] = useState('');
  const [linkPicker, setLinkPicker] = useState(null);
  const { mode: oaThemeMode, colors: oaCanvas } = useOaTheme();

  /* stable refs */
  const rfInstanceRef  = useRef(null);
  const expandedRef    = useRef(new Set());
  const posMap         = useRef({});
  const childrenMapRef = useRef({});   /* nodeId → [directChildId, …] */
  const groupDataRef   = useRef({});   /* groupNodeId → { children: API-edge-list } */
  const apiChildrenCacheRef = useRef({}); /* nodeId → last API children payload */
  const expandFnRef    = useRef(null);
  const collapseFnRef  = useRef(null);
  const collapseEdgeFnRef = useRef(null);
  const removeFnRef    = useRef(null);
  const resetFnRef     = useRef(null);
  const applyChildrenRef = useRef(null);
  const openLinkPickerRef = useRef(null);
  const applyLinkPickerRef = useRef(null);
  const pickerL2PromiseRef = useRef(null);  /* in-flight depth=2 fetch for open picker */
  const pickerRowsRef      = useRef(null);  /* latest rows for the open picker */

  /* stable callbacks passed into node data */
  const stableExpand   = useCallback((id) => expandFnRef.current?.(id),  []);
  const stableCollapse = useCallback((id) => collapseFnRef.current?.(id), []);
  const stableRemove   = useCallback((id) => removeFnRef.current?.(id),   []);

  function mkNodeData(base) {
    return { ...base, onExpand: stableExpand, onCollapse: stableCollapse, onRemove: stableRemove };
  }
  function mkNode(id, pos, base) {
    return { id, type: 'nsm', position: pos, className: 'nsm-oa-node', data: mkNodeData(base) };
  }

  /* ── Collapse edge (per-connection) ──────────────────────── */
  const collapseEdge = useCallback((sourceId, targetId) => {
    function getAllDescendants(id, visited) {
      visited = visited || new Set();
      if (visited.has(id)) return [];
      visited.add(id);
      const kids = childrenMapRef.current[id] || [];
      return kids.flatMap(k => [k, ...getAllDescendants(k, visited)]);
    }
    /* gone = target + all its descendants */
    const gone = new Set([targetId, ...getAllDescendants(targetId)]);

    /* survivors: nodes in gone that have edges to nodes outside gone
       (excluding sourceId, whose edge to target is being removed) */
    const currentEdges = rfInstanceRef.current?.getEdges() || [];
    const survivors = new Set();
    for (const gid of gone) {
      const hasExternalEdge = currentEdges.some(e =>
        (e.source === gid && !gone.has(e.target) && e.target !== sourceId) ||
        (e.target === gid && !gone.has(e.source) && e.source !== sourceId)
      );
      if (hasExternalEdge) survivors.add(gid);
    }
    survivors.forEach(id => gone.delete(id));

    /* clean refs */
    for (const id of gone) {
      expandedRef.current.delete(id);
      delete childrenMapRef.current[id];
      delete groupDataRef.current[id];
    }
    for (const sid of survivors) {
      const kids = childrenMapRef.current[sid];
      if (kids) {
        const remaining = kids.filter(k => !gone.has(k));
        remaining.length === 0
          ? (delete childrenMapRef.current[sid], expandedRef.current.delete(sid))
          : (childrenMapRef.current[sid] = remaining);
      }
    }

    /* remove target from source's children list */
    if (childrenMapRef.current[sourceId]) {
      childrenMapRef.current[sourceId] = childrenMapRef.current[sourceId]
        .filter(id => !gone.has(id) && id !== targetId);
      if (childrenMapRef.current[sourceId].length === 0) {
        delete childrenMapRef.current[sourceId];
        expandedRef.current.delete(sourceId);
        setNodes(ns => ns.map(n => n.id === sourceId
          ? { ...n, data: { ...n.data, expanded: false } } : n));
      }
    }

    setNodes(ns => ns.filter(n => !gone.has(n.id)));
    setEdges(es => es.filter(e => {
      if (gone.has(e.source) || gone.has(e.target)) return false;
      if (e.source === sourceId && e.target === targetId) return false;
      return true;
    }));
    syncParentExpandedRef.current?.(sourceId);
    setTimeout(() => rfInstanceRef.current?.fitView({ duration: 300, padding: 0.15 }), 80);
  }, []);

  const syncParentExpandedRef = useRef(null);

  function buildBranchCatalog(parentId) {
    const children = apiChildrenCacheRef.current[parentId] || [];
    const byLabel = {};
    children.forEach(c => {
      (byLabel[c.edge_label] = byLabel[c.edge_label] || []).push(c);
    });
    const directKids = new Set(childrenMapRef.current[parentId] || []);
    return Object.keys(byLabel).sort().map(label => {
      const group = byLabel[label];
      const visible = group.every(c => directKids.has(c.node.id));
      return { label, count: group.length, visible };
    });
  }

  function syncParentExpanded(parentId) {
    const hasKids = (childrenMapRef.current[parentId] || []).length > 0;
    const catalog = buildBranchCatalog(parentId);
    const hasHiddenBranches = catalog.some(b => !b.visible);
    if (hasKids) {
      expandedRef.current.add(parentId);
    } else {
      expandedRef.current.delete(parentId);
    }
    setNodes(ns => ns.map(n => n.id === parentId
      ? { ...n, data: { ...n.data, expanded: hasKids, hasHiddenBranches } }
      : n));
  }
  syncParentExpandedRef.current = syncParentExpanded;

  function runTreeLayoutPatch(nodeId, newNodes, newEdges) {
    const curEdges = rfInstanceRef.current?.getEdges() || [];
    const allEdgesForLayout = [...curEdges, ...newEdges];
    let laidNodes = null;
    setNodes(ns => {
      const ids = new Set(ns.map(n => n.id));
      laidNodes = layoutGraph(
        [...ns, ...newNodes.filter(n => !ids.has(n.id))],
        allEdgesForLayout,
        childrenMapRef.current,
      );
      return laidNodes;
    });
    setEdges(es => {
      const ids = new Set(es.map(e => e.id));
      const merged = [...es, ...newEdges.filter(e => !ids.has(e.id))];
      const nodesForHandles = laidNodes || rfInstanceRef.current?.getNodes() || [];
      return assignRootSourceHandles(nodesForHandles, merged);
    });
    const newIds = newNodes.map(n => n.id);
    setTimeout(() => {
      const rfi = rfInstanceRef.current;
      if (rfi?.updateNodeInternals) {
        [nodeId, ...newIds].forEach(id => rfi.updateNodeInternals(id));
      }
      rfi?.fitView({ duration: 400, padding: 0.18 });
    }, 120);
  }

  function mkNodeFromApiChild(c, pos) {
    const cid = c.node.id;
    const childCache = apiChildrenCacheRef.current[cid];
    return mkNode(cid, pos || { x: 0, y: 0 }, {
      label: c.node.label, nodeType: c.node.node_type, typeLabel: c.node.type_label,
      ctId: c.node.ct_id, objectId: c.node.object_id,
      url: c.node.url, loading: false, expanded: false,
      childCount: childCache ? childCache.length : null,
      hasHiddenBranches: childCache ? childCache.length > 0 : false,
    });
  }

  function syncChildrenMapFromPicker(rows, keys, rootId) {
    const l1Needed = new Set();
    rows.filter(r => r.kind === 'l1' && keys.has(r.key)).forEach(r => l1Needed.add(r.item.node.id));

    const pickerL1 = rows.filter(r => r.kind === 'l1').map(r => r.item.node.id);
    const prevRootKids = childrenMapRef.current[rootId] || [];
    const allL1 = new Set([...prevRootKids, ...l1Needed]);
    childrenMapRef.current[rootId] = [
      ...pickerL1.filter(id => allL1.has(id)),
      ...prevRootKids.filter(id => !pickerL1.includes(id) && allL1.has(id)),
    ];

    pickerL1.forEach(l1Id => {
      const l1Row = rows.find(r => r.kind === 'l1' && r.item.node.id === l1Id);
      if (!l1Row || !keys.has(l1Row.key) || !(l1Row.l2Count > 0)) return;
      childrenMapRef.current[l1Id] = l1Row.useCloud
        ? [`cloud:${l1Id}`]
        : (l1Row.l2Items || []).map(c2 => c2.node.id);
    });
  }

  function addBranchChildren(nodeId, label, items) {
    if (!items.length) return;
    const existingIds = new Set((rfInstanceRef.current?.getNodes() || []).map(n => n.id));
    const existingEdges = new Set((rfInstanceRef.current?.getEdges() || []).map(e => `${e.source}|${e.target}`));
    const newNodes = [];
    const newEdges = [];
    const directKids = [...(childrenMapRef.current[nodeId] || [])];

    const canvasIds = new Set(existingIds);
    items.forEach(c => {
      const cid = c.node.id;
      if (canvasIds.has(cid)) return;
      if (!existingIds.has(cid)) {
        newNodes.push(mkNodeFromApiChild(c));
        existingIds.add(cid);
      }
      const ek = `${nodeId}|${cid}`;
      if (!existingEdges.has(ek)) {
        newEdges.push(mkEdge(`e-${nodeId}-${cid}`, nodeId, cid, label));
        existingEdges.add(ek);
      }
      if (!directKids.includes(cid)) directKids.push(cid);
    });

    childrenMapRef.current[nodeId] = directKids;
    runTreeLayoutPatch(nodeId, newNodes, newEdges);
    syncParentExpanded(nodeId);
  }

  const openLinkPicker = useCallback(async (nodeId) => {
    const rfNode = rfInstanceRef.current?.getNode(nodeId);
    if (!rfNode || rfNode.data.loading) return;
    const ctId = rfNode.data.ctId;
    const objectId = rfNode.data.objectId;

    pickerL2PromiseRef.current = null;
    pickerRowsRef.current = null;

    setLinkPicker({
      nodeId,
      nodeLabel: rfNode.data.label,
      rows: [],
      checked: new Set(),
      loading: true,
      error: null,
    });

    const edgeKeys = canvasEdgeKeysFromEdges(rfInstanceRef.current?.getEdges());

    /* group/cloud nodes have no backing object → use cached children only */
    if (!ctId || !objectId) {
      const cached = filterPickerChildrenForCanvas(
        apiChildrenCacheRef.current[nodeId] || [], nodeId, edgeKeys, null,
      );
      const rows = buildPickerRows(cached);
      pickerRowsRef.current = rows;
      setLinkPicker({
        nodeId, nodeLabel: rfNode.data.label, rows,
        checked: new Set(), loading: false,
        error: rows.length <= 1 ? oaT('noResults', 'No results') : null,
      });
      return;
    }

    try {
      /* ── Phase 1: direct links only (depth=1) → fast first paint ── */
      const d1raw = await fetchPickerTree(ctId, objectId, 1, analyzerMode);
      const d1 = filterPickerTreeForCanvas(d1raw, nodeId, edgeKeys);
      const l1children = pickerChildCacheShape(d1.children);
      apiChildrenCacheRef.current[nodeId] = l1children;
      const rows1 = buildPickerRows(d1.children || [], d1.groups);
      pickerRowsRef.current = rows1;

      setNodes(ns => ns.map(n => n.id === nodeId
        ? {
            ...n,
            data: {
              ...n.data,
              loading: false,
              childCount: l1children.length,
              hasHiddenBranches: buildBranchCatalog(nodeId).some(b => !b.visible),
            },
          }
        : n));

      const hasL1 = rows1.length > 1;
      setLinkPicker({
        nodeId,
        nodeLabel: rfNode.data.label,
        rows: rows1,
        checked: new Set(),
        loading: false,
        l2Loading: hasL1,
        error: hasL1 ? null : oaT('noResults', 'No results'),
      });
      if (!hasL1) { pickerL2PromiseRef.current = null; return; }

      /* ── Phase 2: secondary links (depth=2) → fill badges + expansion ── */
      const p = (async () => {
        const d2raw = await fetchPickerTree(ctId, objectId, 2, analyzerMode);
        const d2 = filterPickerTreeForCanvas(d2raw, nodeId, edgeKeys);
        (d2.children || []).forEach(c => {
          apiChildrenCacheRef.current[c.node.id] = pickerChildCacheShape(c.l2);
        });
        const rows2 = buildPickerRows(d2.children || [], d2.groups);
        pickerRowsRef.current = rows2;
        setLinkPicker(prev => (prev && prev.nodeId === nodeId)
          ? { ...prev, rows: rows2, l2Loading: false }
          : prev);
        return rows2;
      })();
      pickerL2PromiseRef.current = p;
      p.catch(() => {
        /* L2 failed: keep L1 usable, just clear the loading flag */
        setLinkPicker(prev => (prev && prev.nodeId === nodeId)
          ? { ...prev, l2Loading: false }
          : prev);
      });
    } catch (e) {
      setStatus(oaT('errorPrefix', 'Error:') + ' ' + e.message);
      setNodes(ns => ns.map(n => n.id === nodeId
        ? { ...n, data: { ...n.data, loading: false } }
        : n));
      setLinkPicker(prev => prev ? { ...prev, loading: false, error: e.message } : null);
    }
  }, []);

  const applyLinkPicker = useCallback((nodeId, rows, checked) => {
    const selectable = rows.filter(r => r.kind !== 'all');
    const keys = checked.has('__all__')
      ? new Set(selectable.map(r => r.key))
      : new Set([...checked].filter(k => k !== '__all__'));
    if (!keys.size) return;

    const l1Needed = rows.filter(r => r.kind === 'l1' && keys.has(r.key));

    const existingIds = new Set((rfInstanceRef.current?.getNodes() || []).map(n => n.id));
    const canvasIds = new Set(existingIds);
    const existingEdges = new Set((rfInstanceRef.current?.getEdges() || []).map(e => `${e.source}|${e.target}`));
    const newNodes = [];
    const newEdges = [];

    function ensureNode(c) {
      const cid = c.node.id;
      if (!existingIds.has(cid)) {
        newNodes.push(mkNodeFromApiChild(c));
        existingIds.add(cid);
      }
      return cid;
    }
    function ensureEdge(src, tgt, label) {
      const ek = `${src}|${tgt}`;
      if (existingEdges.has(ek)) return;
      if (canvasIds.has(tgt)) return;
      newEdges.push(mkEdge(`e-${src}-${tgt}`, src, tgt, label));
      existingEdges.add(ek);
    }

    l1Needed.forEach(r => {
      const l1Id = ensureNode(r.item);
      ensureEdge(nodeId, l1Id, r.item.edge_label);
      const l2Items = r.l2Items || [];
      if (!l2Items.length) return;
      if (r.useCloud) {
        const cloudId = `cloud:${l1Id}`;
        if (!existingIds.has(cloudId)) {
          newNodes.push(mkNode(cloudId, { x: 0, y: 0 }, {
            label: String(l2Items.length),
            nodeType: 'cloud',
            typeLabel: l2Items[0]?.edge_label || oaT('cloudLinks', 'links'),
            ctId: null, objectId: null, url: null,
            loading: false, expanded: false,
            childCount: l2Items.length,
          }));
          groupDataRef.current[cloudId] = { children: l2Items };
          existingIds.add(cloudId);
        }
        ensureEdge(l1Id, cloudId, oaT('cloudLinks', 'links'));
        return;
      }
      l2Items.forEach(c2 => {
        const cid = ensureNode(c2);
        ensureEdge(l1Id, cid, c2.edge_label);
      });
    });

    syncChildrenMapFromPicker(rows, keys, nodeId);
    runTreeLayoutPatch(nodeId, newNodes, newEdges);
    syncParentExpanded(nodeId);
    setLinkPicker(null);
    setTimeout(() => rfInstanceRef.current?.fitView({ duration: 400, padding: 0.2 }), 120);
  }, []);

  /* ── Collapse all (legacy, kept for completeness) ──────────── */
  const collapseNode = useCallback((nodeId) => {
    const rfNode = rfInstanceRef.current?.getNode(nodeId);
    if (!rfNode?.data?.expanded) {
      expandedRef.current.delete(nodeId);
      return;
    }
    /* Phase 1: collect all descendants WITHOUT touching refs yet */
    function getAllDescendants(id, visited) {
      visited = visited || new Set();
      if (visited.has(id)) return [];
      visited.add(id);
      const kids = childrenMapRef.current[id] || [];
      return kids.flatMap(k => [k, ...getAllDescendants(k, visited)]);
    }
    const gone = new Set(getAllDescendants(nodeId));

    /* Phase 2: keep any descendant that has an edge to a node outside
       the collapsed subtree (gone ∪ {nodeId}) */
    const currentEdges = rfInstanceRef.current?.getEdges() || [];
    const survivors = new Set();
    for (const gid of gone) {
      const hasExternalEdge = currentEdges.some(e =>
        (e.source === gid && !gone.has(e.target) && e.target !== nodeId) ||
        (e.target === gid && !gone.has(e.source) && e.source !== nodeId)
      );
      if (hasExternalEdge) survivors.add(gid);
    }
    survivors.forEach(id => gone.delete(id));

    /* Phase 3: clean refs only for truly removed nodes */
    for (const id of gone) {
      expandedRef.current.delete(id);
      delete childrenMapRef.current[id];
      delete groupDataRef.current[id];
    }
    /* For survivors: remove any of their children that were deleted */
    for (const sid of survivors) {
      const kids = childrenMapRef.current[sid];
      if (kids) {
        const remaining = kids.filter(k => !gone.has(k));
        if (remaining.length === 0) {
          delete childrenMapRef.current[sid];
          expandedRef.current.delete(sid);
        } else {
          childrenMapRef.current[sid] = remaining;
        }
      }
    }
    const directKids = new Set(childrenMapRef.current[nodeId] || []);
    delete childrenMapRef.current[nodeId];
    expandedRef.current.delete(nodeId);

    /* Phase 4: update graph */
    setNodes(ns => ns
      .filter(n => !gone.has(n.id))
      .map(n => n.id === nodeId ? { ...n, data: { ...n.data, expanded: false } } : n));
    setEdges(es => es.filter(e => {
      if (gone.has(e.source) || gone.has(e.target)) return false;
      /* also remove the tree-edges from nodeId to its direct children
         (even survivors are no longer attached here) */
      if (e.source === nodeId && directKids.has(e.target)) return false;
      return true;
    }));
    syncParentExpanded(nodeId);
  }, []);

  /* ── Place children into graph (groups by edge_label) ──────── */
  function applyChildren(nodeId, parentPos, apiChildren, opts) {
    opts = opts || {};
    /* deduplicate by node id */
    const seenIds = new Set();
    const unique  = apiChildren.filter(c => seenIds.has(c.node.id) ? false : (seenIds.add(c.node.id), true));

    /* group by edge_label */
    const byLabel = {};
    unique.forEach(c => {
      (byLabel[c.edge_label] = byLabel[c.edge_label] || []).push(c);
    });
    const labelKeys     = Object.keys(byLabel);
    const typePositions = childPositions(parentPos, labelKeys.length);

    const directKids = [];
    const newNodes   = [];
    const newEdges   = [];

    labelKeys.forEach((label, li) => {
      const group        = byLabel[label];
      const typePos      = typePositions[li];
      const firstType    = group[0].node.node_type;

      if (group.length === 1) {
        /* single child → add directly */
        const c   = group[0];
        const cid = c.node.id;
        newNodes.push(mkNode(cid, typePos, {
          label: c.node.label, nodeType: c.node.node_type, typeLabel: c.node.type_label,
          ctId: c.node.ct_id, objectId: c.node.object_id,
          url: c.node.url, loading: false, expanded: false, childCount: null,
        }));
        newEdges.push(mkEdge(`e-${nodeId}-${cid}`, nodeId, cid, label));
        directKids.push(cid);
      } else {
        /* multiple → group node labelled after edge_label */
        const gid = `grp:${nodeId}:${label.replace(/[^a-zA-Z0-9_-]/g, '_')}`;
        newNodes.push(mkNode(gid, typePos, {
          label: `${label} · ${group.length}`, nodeType: 'group', typeLabel: group[0].node.type_label,
          ctId: null, objectId: null, url: null,
          loading: false, expanded: false, childCount: group.length,
        }));
        newEdges.push(mkEdge(`e-${nodeId}-${gid}`, nodeId, gid, label));
        groupDataRef.current[gid] = { children: group };
        directKids.push(gid);
      }
    });

    childrenMapRef.current[nodeId] = directKids;
    const curEdges = rfInstanceRef.current?.getEdges() || [];
    const allEdgesForLayout = [...curEdges, ...newEdges];
    let laidNodes = null;
    setNodes(ns => {
      const ids = new Set(ns.map(n => n.id));
      const merged = [...ns, ...newNodes.filter(n => !ids.has(n.id))].map(n => {
        if (!opts.markExpanded || n.id !== nodeId) return n;
        return {
          ...n,
          data: {
            ...n.data,
            loading: false,
            expanded: true,
            childCount: apiChildren.length,
          },
        };
      });
      laidNodes = layoutGraph(merged, allEdgesForLayout, childrenMapRef.current);
      return laidNodes;
    });
    setEdges(es => {
      const ids = new Set(es.map(e => e.id));
      const merged = [...es, ...newEdges.filter(e => !ids.has(e.id))];
      return assignRootSourceHandles(laidNodes || [], merged);
    });
    const newIds = newNodes.map(n => n.id);
    setTimeout(() => {
      const rfi = rfInstanceRef.current;
      if (rfi?.updateNodeInternals) {
        [nodeId, ...newIds].forEach(id => rfi.updateNodeInternals(id));
      }
      rfi?.fitView({ duration: 400, padding: 0.22 });
    }, 120);
  }
  applyChildrenRef.current = applyChildren;

  /* ── Expand ─────────────────────────────────────────────────── */
  const expandNode = useCallback(async (nodeId) => {
    const rfNode = rfInstanceRef.current?.getNode(nodeId);
    if (rfNode?.data?.loading) return;
    if (rfNode?.data?.expanded) return;
    if (expandedRef.current.has(nodeId)) expandedRef.current.delete(nodeId);
    expandedRef.current.add(nodeId);

    /* group/cloud node → place all children directly (no re-grouping) */
    if (!groupDataRef.current[nodeId] && nodeId.startsWith('grp:')) {
      const rebuilt = rebuildGroupData(nodeId, apiChildrenCacheRef.current);
      if (rebuilt) groupDataRef.current[nodeId] = rebuilt;
    }
    if (!groupDataRef.current[nodeId] && nodeId.startsWith('cloud:')) {
      const rebuilt = rebuildCloudData(nodeId, apiChildrenCacheRef.current);
      if (rebuilt) groupDataRef.current[nodeId] = rebuilt;
    }
    if (groupDataRef.current[nodeId]) {
      const gd = groupDataRef.current[nodeId];
      const seenIds = new Set();
      const unique = gd.children.filter(c => seenIds.has(c.node.id) ? false : (seenIds.add(c.node.id), true));
      const existingIds = new Set((rfInstanceRef.current?.getNodes() || []).map(n => n.id));
      const canvasIds = new Set(existingIds);
      const existingEdges = new Set((rfInstanceRef.current?.getEdges() || []).map(e => `${e.source}|${e.target}`));
      const newNodes = [];
      const newEdges = [];
      const directKids = [];
      unique.forEach(c => {
        const cid = c.node.id;
        if (canvasIds.has(cid)) return;
        if (!existingIds.has(cid)) {
          newNodes.push(mkNodeFromApiChild(c));
          existingIds.add(cid);
        }
        const ek = `${nodeId}|${cid}`;
        if (!existingEdges.has(ek)) {
          newEdges.push(mkEdge(`e-${nodeId}-${cid}`, nodeId, cid, c.edge_label));
          existingEdges.add(ek);
        }
        directKids.push(cid);
      });
      childrenMapRef.current[nodeId] = directKids;
      runTreeLayoutPatch(nodeId, newNodes, newEdges);
      setNodes(ns => ns.map(n => n.id === nodeId
        ? { ...n, data: { ...n.data, expanded: true, childCount: directKids.length || gd.children.length } }
        : n));
      return;
    }

    /* API node */
    const parts = nodeId.split(':');
    const ctId  = Number(parts[0]);
    const pk    = Number(parts[1]);
    if (!ctId || !pk) {
      expandedRef.current.delete(nodeId);
      setStatus(oaT('errorPrefix', 'Error:') + ' cannot expand "' + nodeId + '"');
      return;
    }

    openLinkPickerRef.current?.(nodeId);
  }, []);

  /* ── Remove single node + its edges ─────────────────────── */
  const removeNode = useCallback((nodeId) => {
    expandedRef.current.delete(nodeId);
    delete childrenMapRef.current[nodeId];
    delete groupDataRef.current[nodeId];
    setNodes(ns => ns.filter(n => n.id !== nodeId));
    setEdges(es => es.filter(e => e.source !== nodeId && e.target !== nodeId));
  }, []);

  /* ── Reset graph (called on mode change) ────────────────── */
  const resetGraph = useCallback(() => {
    if (!initialCt || !initialPk) return;
    expandedRef.current.clear();
    posMap.current        = {};
    childrenMapRef.current = {};
    groupDataRef.current   = {};
    apiChildrenCacheRef.current = {};
    const rootId  = `${initialCt}:${initialPk}`;
    const rootPos = { x: 400, y: 50 };
    posMap.current[rootId] = rootPos;
    setEdges([]);
    setNodes([mkNode(rootId, rootPos, {
      label: '…', nodeType: 'object', ctId: initialCt, objectId: initialPk,
      url: '#', loading: true, expanded: false,
    })]);
    fetchNodeData(initialCt, initialPk, analyzerMode)
      .then(d => {
        const children = d.children || [];
        apiChildrenCacheRef.current[rootId] = children;
        setNodes([mkNode(rootId, rootPos, {
          label: d.node.label, nodeType: d.node.node_type, typeLabel: d.node.type_label,
          ctId: d.node.ct_id, objectId: d.node.object_id,
          url: d.node.url, loading: false, expanded: false,
          childCount: children.length,
          hasHiddenBranches: children.length > 0,
        })]);
        setTimeout(() => rfInstanceRef.current?.fitView({ duration: 300, padding: 0.25 }), 80);
      })
      .catch(e => setStatus('Fehler: ' + e.message));
  }, [initialCt, initialPk, analyzerMode]);

  /* auto-initialize when component mounts */
  useEffect(() => { const t = setTimeout(() => resetGraph(), 50); return () => clearTimeout(t); }, [resetGraph]);

  /* keep fn-refs current (stable handlers for nodes rendered outside App re-renders) */
  expandFnRef.current = expandNode;
  collapseFnRef.current = collapseNode;
  collapseEdgeFnRef.current = collapseEdge;
  removeFnRef.current = removeNode;
  resetFnRef.current = resetGraph;
  openLinkPickerRef.current = openLinkPicker;
  applyLinkPickerRef.current = applyLinkPicker;
  _graphCb.expand = (id) => expandFnRef.current?.(id);
  _graphCb.collapse = (id) => collapseFnRef.current?.(id);
  _graphCb.collapseEdge = (s, t) => collapseEdgeFnRef.current?.(s, t);
  _graphCb.remove = (id) => removeFnRef.current?.(id);
  _graphCb.openLinkPicker = (id) => openLinkPickerRef.current?.(id);

  const onNodeClick = useCallback((evt, node) => {
    const target = evt?.target;
    if (target?.closest?.('a, button, .nsm-oa-toggle, .nsm-oa-link-picker')) return;
    if (node?.data?.loading) return;
    if (nsmUsesBranchLinks(node.id, node.data)) {
      _graphCb.openLinkPicker?.(node.id);
      return;
    }
    if (node?.data?.expanded) return;
    _graphCb.expand?.(node.id);
  }, []);

  const togglePickerRow = useCallback((key, on) => {
    setLinkPicker(prev => {
      if (!prev) return prev;
      const next = new Set(prev.checked);
      if (on) next.add(key); else next.delete(key);
      pickerSyncAllCheckbox(next, prev.rows);
      return { ...prev, checked: next };
    });
  }, []);

  const togglePickerAll = useCallback((on) => {
    setLinkPicker(prev => {
      if (!prev) return prev;
      const next = new Set();
      if (on) {
        prev.rows.forEach(r => { if (r.kind === 'l1') next.add(r.key); });
        next.add('__all__');
      }
      return { ...prev, checked: next };
    });
  }, []);

  const togglePickerGroup = useCallback((groupKey, on) => {
    setLinkPicker(prev => {
      if (!prev) return prev;
      const l1Keys = pickerGroupL1Keys(prev.rows, groupKey);
      const next = new Set(prev.checked);
      l1Keys.forEach(key => { if (on) next.add(key); else next.delete(key); });
      pickerSyncAllCheckbox(next, prev.rows);
      return { ...prev, checked: next };
    });
  }, []);

  return React.createElement('div', { className: 'nsm-oa-graph-wrap' },
    React.createElement(ReactFlow, {
      nodes, edges, onNodesChange, onEdgesChange,
      nodeTypes, edgeTypes,
      onInit: (rfi) => { rfInstanceRef.current = rfi; },
      onNodeClick,
      colorMode: oaThemeMode,
      fitView: true, minZoom: 0.1, maxZoom: 3,
      nodesDraggable: true, nodesConnectable: false,
      noDragClassName: 'nodrag',
      noPanClassName: 'nopan',
      nodeClickDistance: 8,
      style: { width: '100%', height: '100%' },
    },
      React.createElement(Background, {
        id: 'nsm-oa-grid',
        variant: BackgroundVariant.Dots,
        gap: 18,
        size: 2,
        color: oaCanvas.grid,
        bgColor: oaCanvas.bg,
      }),
      React.createElement(Controls),
      React.createElement(MiniMap, {
        nodeColor: n => (NS[n.data?.nodeType] || NS.object).color,
        nodeStrokeWidth: 3, zoomable: true, pannable: true,
      }),
      status ? React.createElement(Panel, { position: 'top-center' },
        React.createElement('div', {
          style: { background: '#dc354599', color: '#fff', padding: '5px 14px', borderRadius: 6, fontSize: 12 },
        }, status)
      ) : null,
    ),
    React.createElement(LinkPickerModal, {
      picker: linkPicker,
      onToggle: togglePickerRow,
      onToggleAll: togglePickerAll,
      onToggleGroup: togglePickerGroup,
      onClose: () => setLinkPicker(null),
      onView: () => {
        if (!linkPicker) return;
        const nodeId = linkPicker.nodeId;
        const checked = linkPicker.checked;
        const apply = (rows) => applyLinkPickerRef.current?.(
          nodeId, rows || pickerRowsRef.current || linkPicker.rows, checked);
        const pending = pickerL2PromiseRef.current;
        if (pending) {
          /* secondary links still loading → wait so selected L1 get their L2 */
          setLinkPicker(prev => prev ? { ...prev, l2Loading: true } : prev);
          pending.then(apply).catch(() => apply(null));
        } else {
          apply(null);
        }
      },
    }),
  );
}

/* ─────────── Bootstrap ───────────────────────────────────────── */
function ObjectAnalyzerRoot(props) {
  return React.createElement(ReactFlowProvider, null,
    React.createElement(App, props),
  );
}

const graphEl = document.getElementById('nsm-oa-graph');
if (graphEl && graphEl.dataset.pk) {
  const ct = parseInt(graphEl.dataset.ct);
  const pk = parseInt(graphEl.dataset.pk);
  const analyzerMode = graphEl.dataset.mode === 'security' ? 'security' : 'all';
  createRoot(graphEl).render(React.createElement(ObjectAnalyzerRoot, { initialCt: ct, initialPk: pk, analyzerMode }));
}
</script>

{# ── Picker JS (vanilla) ──────────────────────────────────────── #}
<script>
(function () {
  'use strict';
  var oaI18n = window.NSM_OA_I18N || {};
  var apiTypes = [];
  try { apiTypes = JSON.parse(document.getElementById('nsm-oa-api-types').textContent) || []; } catch (_) {}

  function esc(s) {
    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
  }
  function getCsrf() { var m = document.cookie.match(/csrftoken=([^;]+)/); return m ? m[1] : ''; }
  function apiHeaders(extra) {
    return (window.NSM_BRANCH_API && window.NSM_BRANCH_API.mergeBranchHeaders(extra)) || (extra || {});
  }
  function debounce(fn, ms) { var t; return function() { clearTimeout(t); var a=arguments,ctx=this; t=setTimeout(function(){fn.apply(ctx,a);},ms); }; }

  var searchEl = document.getElementById('nsm-oa-search');
  var dropEl   = document.getElementById('nsm-oa-drop');
  var ctEl     = document.getElementById('nsm-oa-ct');
  var pkEl     = document.getElementById('nsm-oa-pk');
  var nameEl   = document.getElementById('nsm-oa-name');
  var formEl   = document.getElementById('nsm-oa-form');
  var clearEl  = document.getElementById('nsm-oa-clear');

  if (!searchEl) return;
  var _ctrl = null;

  function closeDrop() { dropEl.innerHTML=''; dropEl.hidden=true; }

  function pick(ctId, pk, name) {
    ctEl.value=ctId; pkEl.value=pk; nameEl.value=name;
    searchEl.value=name; closeDrop(); formEl.submit();
  }

  var doSearch = debounce(function(q) {
    if (!q.trim()) { closeDrop(); return; }
    if (_ctrl) _ctrl.abort();
    _ctrl = new AbortController();
    dropEl.innerHTML = "<div class='nsm-oa-drop-msg'>" + (oaI18n.searching || 'Searching\u2026') + "</div>";
    dropEl.hidden = false;

    var fetches = apiTypes.map(function(t) {
      var url = t.api_url + '?q=' + encodeURIComponent(q) + '&limit=15&brief=1';
      return fetch(url, { signal: _ctrl.signal, headers: apiHeaders({ Accept: 'application/json', 'X-CSRFToken': getCsrf() })})
        .then(function(r){return r.json();})
        .then(function(d){return (d.results||[]).map(function(o){return {ct:t.ct_id,pk:o.id,name:o.display||o.name||String(o.id),type:t.name};});})
        .catch(function(e){if(e.name!=='AbortError')console.warn(e);return [];});
    });

    Promise.all(fetches).then(function(all) {
      if (_ctrl && _ctrl.signal.aborted) return;
      var items = [].concat.apply([], all);
      if (!items.length) { dropEl.innerHTML="<div class='nsm-oa-drop-msg'>" + (oaI18n.noResults || 'No results') + "</div>"; dropEl.hidden=false; return; }
      var html = '';
      items.forEach(function(item) {
        html += "<div class='nsm-oa-drop-item' data-ct='"+esc(item.ct)+"' data-pk='"+esc(item.pk)+"' data-name='"+esc(item.name)+"'>"
              + esc(item.name)+" <span class='nsm-oa-drop-type'>"+esc(item.type)+"</span></div>";
      });
      dropEl.innerHTML=html; dropEl.hidden=false;
      dropEl.querySelectorAll('.nsm-oa-drop-item').forEach(function(el){
        el.addEventListener('click', function(){pick(el.dataset.ct,el.dataset.pk,el.dataset.name);});
      });
    });
  }, 250);

  searchEl.addEventListener('input', function(){ctEl.value='';pkEl.value='';nameEl.value='';doSearch(searchEl.value);});
  searchEl.addEventListener('focus', function(){if(searchEl.value.trim()&&!ctEl.value)doSearch(searchEl.value);});
  document.addEventListener('click', function(e){if(!dropEl.contains(e.target)&&e.target!==searchEl)closeDrop();});
  searchEl.addEventListener('keydown', function(e){
    if(e.key==='Escape')closeDrop();
    if(e.key==='Enter'){e.preventDefault();var f=dropEl.querySelector('.nsm-oa-drop-item');if(f)f.click();}
  });
  if (clearEl) clearEl.addEventListener('click', function(){ctEl.value='';pkEl.value='';nameEl.value='';formEl.submit();});

  /* Mode persistence: URL wins; otherwise restore from localStorage */
  var modeGroup = document.getElementById('nsm-oa-mode-group');
  var modeRadios = modeGroup ? modeGroup.querySelectorAll('input[name="mode"]') : [];
  if (modeRadios.length) {
    var params = new URLSearchParams(window.location.search);
    var storageKey = 'nsm_oa_mode';
    var activeMode = 'all';

    if (params.has('mode')) {
      activeMode = params.get('mode') === 'security' ? 'security' : 'all';
      try { localStorage.setItem(storageKey, activeMode); } catch (_) {}
    } else {
      try {
        var stored = localStorage.getItem(storageKey);
        if (stored === 'security' || stored === 'all') {
          activeMode = stored;
        }
      } catch (_) {}
    }

    modeRadios.forEach(function(radio) {
      radio.checked = radio.value === activeMode;
      radio.addEventListener('change', function() {
        if (!radio.checked) return;
        try { localStorage.setItem(storageKey, radio.value); } catch (_) {}
        formEl.submit();
      });
    });

    if (!params.has('mode') && activeMode === 'security') {
      formEl.submit();
    }
  }
})();

</script>
{% endblock %}