{% extends "base.html" %}
{% block title %}Components Map - ICDEV™ Dashboard{% endblock %}
{% block content %}
<style>
  /* ── Layout ─────────────────────────────────────────────────────────── */
  #cmap-root {
    display: grid;
    grid-template-columns: 20% 1fr 20%;
    grid-template-rows: auto 1fr;
    height: calc(100vh - 120px);
    gap: 0;
    margin-top: 0.5rem;
  }
  #cmap-header {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 6px 6px 0 0;
    flex-wrap: wrap;
  }
  #cmap-header h2 { margin: 0; font-size: 1.1rem; color: #333; flex: 1; }

  /* ── Left sidebar tree ────────────────────────────────────────────────── */
  #cmap-sidebar {
    border: 1px solid #ddd;
    border-top: none;
    border-right: none;
    overflow-y: auto;
    background: #fff;
    padding: 0.5rem;
  }
  #cmap-sidebar details {
    margin-bottom: 0.25rem;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    overflow: hidden;
  }
  #cmap-sidebar summary {
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    user-select: none;
  }
  #cmap-sidebar summary:hover { background: #e8f0fb; }
  .sidebar-cat-dot {
    width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0;
  }
  .sidebar-cat-count {
    margin-left: auto; font-size: 0.75rem; color: #888; font-weight: 400;
  }
  .sidebar-item {
    padding: 0.3rem 0.6rem 0.3rem 1.6rem;
    font-size: 0.82rem;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 0.3rem;
  }
  .sidebar-item:hover { background: #e8f0fb; color: #1976d2; }
  .sidebar-item.selected { background: #1976d2; color: #fff; }
  .sidebar-item.disabled-node { opacity: 0.5; }
  .sidebar-item.disabled-node .item-label { text-decoration: line-through; }
  #cmap-sidebar .cat-filter-btn {
    display: block; width: 100%; text-align: left;
    padding: 0.25rem 0.6rem 0.25rem 0.6rem;
    background: none; border: none; cursor: pointer;
    font-size: 0.82rem; color: #555;
    border-bottom: 1px solid #eee;
  }
  #cmap-sidebar .cat-filter-btn:hover { background: #e8f0fb; color: #1976d2; }
  #cmap-sidebar .cat-filter-btn.active { background: #e3f2fd; color: #1565c0; font-weight: 600; }

  /* ── Graph canvas ─────────────────────────────────────────────────────── */
  #cmap-graph-wrap {
    border: 1px solid #ddd;
    border-top: none;
    position: relative;
    overflow: hidden;
    background: #fafafa;
  }
  #cmap-paper { width: 100%; height: 100%; }
  #cmap-tooltip {
    position: absolute;
    background: rgba(30,30,30,0.92);
    color: #fff;
    padding: 0.4rem 0.7rem;
    border-radius: 6px;
    font-size: 0.8rem;
    pointer-events: none;
    max-width: 260px;
    z-index: 100;
    display: none;
    line-height: 1.45;
  }
  #cmap-legend {
    position: absolute;
    top: 8px; right: 8px;
    background: rgba(255,255,255,0.95);
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 0.78rem;
    z-index: 50;
    min-width: 130px;
  }
  #cmap-legend h4 { margin: 0 0 0.3rem; font-size: 0.8rem; color: #555; }
  .legend-row { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.2rem; }
  .legend-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
  #cmap-loading {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    font-size: 0.9rem; color: #888;
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    z-index: 10;
  }
  .cmap-spinner {
    width: 32px; height: 32px;
    border: 3px solid #ddd; border-top-color: #1976d2;
    border-radius: 50%; animation: spin 0.8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* ── Right drawer ─────────────────────────────────────────────────────── */
  #cmap-drawer {
    border: 1px solid #ddd;
    border-top: none;
    border-left: none;
    overflow-y: auto;
    background: #fff;
    padding: 0.6rem;
    font-size: 0.83rem;
  }
  #cmap-drawer h3 { margin: 0 0 0.5rem; font-size: 0.95rem; color: #333; }
  .drawer-placeholder { color: #aaa; font-size: 0.82rem; margin-top: 2rem; text-align: center; }
  .drawer-field { margin-bottom: 0.5rem; }
  .drawer-field label { display: block; font-weight: 600; color: #666; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.15rem; }
  .drawer-field .val { word-break: break-all; color: #222; }
  .drawer-field .val a { color: #1976d2; }
  .health-badge {
    display: inline-block; padding: 0.1rem 0.45rem; border-radius: 4px;
    font-size: 0.75rem; font-weight: 600;
  }
  .health-ok { background: #e8f5e9; color: #2e7d32; }
  .health-warn { background: #fff8e1; color: #f57f17; }
  .health-err { background: #ffebee; color: #c62828; }
  .health-unknown { background: #f5f5f5; color: #9e9e9e; }
  .enabled-badge {
    display: inline-block; padding: 0.1rem 0.45rem; border-radius: 4px;
    font-size: 0.75rem; font-weight: 600;
  }
  .enabled-yes { background: #e3f2fd; color: #1565c0; }
  .enabled-no { background: #fce4ec; color: #880e4f; }

  /* ── Header controls ──────────────────────────────────────────────────── */
  .cmap-btn {
    padding: 0.3rem 0.8rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: 0.82rem;
    color: #333;
  }
  .cmap-btn:hover { background: #e8f0fb; border-color: #1976d2; color: #1976d2; }
  .cmap-btn.active { background: #1976d2; color: #fff; border-color: #1976d2; }
  .cmap-stat { font-size: 0.82rem; color: #666; }
  .cmap-stat strong { color: #1976d2; }
</style>

<div style="padding:0 0 0.3rem;">
  <nav aria-label="breadcrumb" style="font-size:0.82rem;color:#999;">
    <a href="/" style="color:#1976d2;text-decoration:none;">Home</a>
    <span style="margin:0 0.3rem;">&gt;</span>
    <span>Components Map</span>
  </nav>
</div>

<div id="cmap-root">
  <!-- ── Header ── -->
  <div id="cmap-header">
    <h2>Components Map</h2>
    <span class="cmap-stat">
      Total: <strong id="stat-total">{{ stats.total }}</strong> &nbsp;|&nbsp;
      Enabled: <strong id="stat-enabled">{{ stats.enabled }}</strong> &nbsp;|&nbsp;
      Disabled: <strong id="stat-disabled">{{ stats.disabled }}</strong>
    </span>
    <button class="cmap-btn" onclick="refreshGraph()" title="Re-index and reload">&#8635; Refresh</button>
    <button class="cmap-btn" id="btn-show-disabled" onclick="toggleDisabled()" title="Show / hide disabled nodes">Show Disabled</button>
    <button class="cmap-btn" id="btn-layout" onclick="toggleLayout()" title="Switch layout mode">Tree Layout</button>
    <button class="cmap-btn" id="btn-reset" onclick="resetScope()" title="Clear category filter">All Categories</button>
  </div>

  <!-- ── Left sidebar ── -->
  <div id="cmap-sidebar">
    <div style="font-size:0.78rem;color:#999;margin-bottom:0.4rem;padding:0 0.2rem;">Click category to filter</div>
    <div id="sidebar-tree">
      <div style="color:#ccc;font-size:0.82rem;text-align:center;margin-top:1rem;">Loading&hellip;</div>
    </div>
  </div>

  <!-- ── Graph canvas ── -->
  <div id="cmap-graph-wrap">
    <div id="cmap-loading">
      <div class="cmap-spinner"></div>
      <span>Loading graph&hellip;</span>
    </div>
    <div id="cmap-paper"></div>
    <div id="cmap-tooltip"></div>
    <div id="cmap-legend">
      <h4>Node Types</h4>
      <div class="legend-row"><div class="legend-dot" style="background:#42a5f5;"></div><span>skill</span></div>
      <div class="legend-row"><div class="legend-dot" style="background:#ff7043;"></div><span>mcp_server</span></div>
      <div class="legend-row"><div class="legend-dot" style="background:#66bb6a;"></div><span>canvas_module</span></div>
      <div class="legend-row"><div class="legend-dot" style="background:#ab47bc;"></div><span>goal</span></div>
      <div class="legend-row"><div class="legend-dot" style="background:#26c6da;"></div><span>tool</span></div>
      <div class="legend-row"><div class="legend-dot" style="background:#ef5350;"></div><span>reflex</span></div>
      <div class="legend-row"><div class="legend-dot" style="background:#78909c;"></div><span>other</span></div>
      <div class="legend-row" style="margin-top:0.4rem;">
        <div style="width:12px;height:12px;background:#bbb;border:2px dashed #999;flex-shrink:0;border-radius:2px;"></div>
        <span style="color:#999;">disabled</span>
      </div>
    </div>
  </div>

  <!-- ── Right drawer ── -->
  <div id="cmap-drawer">
    <h3>Node Details</h3>
    <div class="drawer-placeholder" id="drawer-placeholder">
      Click a node to view details
    </div>
    <div id="drawer-content" style="display:none;"></div>
  </div>
</div>

<!-- ── Scripts ──
     Load order is critical: Backbone depends on both jQuery AND
     underscore/lodash, so lodash MUST come before backbone. JointJS
     needs all three to be present at global scope. Original Phase 1f
     load order (jquery → backbone → lodash → joint) caused a
     "Cannot read properties of undefined (reading 'extend')" error
     because backbone ran before lodash was available. Fixed 2026-04-11
     (Phase 1g E2E regression). -->
<link rel="stylesheet" href="/static/vendor/jointjs/joint.css">
<script src="/static/vendor/jquery/jquery.min.js"></script>
<script src="/static/vendor/lodash/lodash.min.js"></script>
<script src="/static/vendor/backbone/backbone-min.js"></script>
<script src="/static/vendor/jointjs/joint.js"></script>

<script>
/* ── State ──────────────────────────────────────────────────────────────── */
var graph = null;
var paper = null;
var currentScope = null;
var showDisabled = false;
var useTreeLayout = false;
var nodeData = {};      // id -> node record
var selectedCell = null;

/* ── Colors ─────────────────────────────────────────────────────────────── */
var TYPE_COLORS = {
  skill:         '#42a5f5',
  mcp_server:    '#ff7043',
  canvas_module: '#66bb6a',
  goal:          '#ab47bc',
  tool:          '#26c6da',
  reflex:        '#ef5350'
};
function typeColor(t) { return TYPE_COLORS[t] || '#78909c'; }

/* ── JointJS init ────────────────────────────────────────────────────────── */
function initJoint() {
  graph = new joint.dia.Graph();

  var wrap = document.getElementById('cmap-graph-wrap');
  paper = new joint.dia.Paper({
    el: document.getElementById('cmap-paper'),
    model: graph,
    width: wrap.clientWidth,
    height: wrap.clientHeight,
    gridSize: 1,
    background: { color: '#fafafa' },
    interactive: { vertexAdd: false }
  });

  /* Resize on window resize */
  window.addEventListener('resize', function() {
    paper.setDimensions(wrap.clientWidth, wrap.clientHeight);
  });

  /* Hover tooltip */
  paper.on('element:mouseenter', function(cellView, evt) {
    var id = cellView.model.id;
    var nd = nodeData[id];
    if (!nd) return;
    var tip = document.getElementById('cmap-tooltip');
    var rect = wrap.getBoundingClientRect();
    tip.style.left = (evt.clientX - rect.left + 10) + 'px';
    tip.style.top  = (evt.clientY - rect.top  + 10) + 'px';
    var enabled = nd.properties && nd.properties.enabled !== undefined ? nd.properties.enabled : true;
    tip.innerHTML = '<strong>' + escHtml(nd.label) + '</strong><br>' +
      '<span style="color:#aaa;">' + nd.entity_type + '</span>' +
      (nd.properties && nd.properties.description ? '<br>' + escHtml((nd.properties.description||'').substring(0,120)) + (nd.properties.description.length > 120 ? '&hellip;' : '') : '') +
      '<br><em style="color:' + (enabled ? '#81d4fa' : '#ef9a9a') + '">' + (enabled ? 'enabled' : 'disabled') + '</em>';
    tip.style.display = 'block';
  });
  paper.on('element:mouseleave', function() {
    document.getElementById('cmap-tooltip').style.display = 'none';
  });

  /* Click -> detail drawer */
  paper.on('element:pointerclick', function(cellView) {
    var id = cellView.model.id;
    highlightCell(id);
    fetchNodeDetail(id);
  });

  /* Click on blank -> deselect */
  paper.on('blank:pointerclick', function() {
    clearSelection();
  });
}

/* ── Highlight ───────────────────────────────────────────────────────────── */
function highlightCell(id) {
  if (selectedCell && selectedCell !== id) {
    var prev = graph.getCell(selectedCell);
    if (prev) {
      var nd = nodeData[selectedCell];
      var enabled = nd && nd.properties && nd.properties.enabled !== undefined ? nd.properties.enabled : true;
      resetCellStyle(prev, nd, enabled);
    }
  }
  selectedCell = id;
  var cell = graph.getCell(id);
  if (cell) {
    cell.attr('body/strokeWidth', 3);
    cell.attr('body/stroke', '#ff6f00');
  }
}

function clearSelection() {
  if (selectedCell) {
    var cell = graph.getCell(selectedCell);
    if (cell) {
      var nd = nodeData[selectedCell];
      var enabled = nd && nd.properties && nd.properties.enabled !== undefined ? nd.properties.enabled : true;
      resetCellStyle(cell, nd, enabled);
    }
    selectedCell = null;
  }
  document.getElementById('drawer-placeholder').style.display = '';
  document.getElementById('drawer-content').style.display = 'none';
}

function resetCellStyle(cell, nd, enabled) {
  var color = typeColor(nd ? nd.entity_type : 'other');
  cell.attr('body/strokeWidth', enabled ? 1.5 : 1);
  cell.attr('body/stroke', enabled ? color : '#bbb');
}

/* ── Build JointJS cells from API response ───────────────────────────────── */
function buildGraph(data) {
  graph.clear();
  nodeData = {};

  var cells = [];
  var nodes = (data.cells || []).filter(function(c) { return c.type === 'node'; });
  var edges = (data.cells || []).filter(function(c) { return c.type === 'edge'; });

  /* Compute layout positions */
  var positions = layoutPositions(nodes, edges);

  nodes.forEach(function(n) {
    var enabled = n.enabled !== false;
    var color = enabled ? typeColor(n.entity_type) : '#bbb';
    var pos = positions[n.id] || { x: 50, y: 50 };

    var rect = new joint.shapes.standard.Rectangle({
      id: n.id,
      position: { x: pos.x, y: pos.y },
      size: { width: 120, height: 36 },
      attrs: {
        body: {
          fill: enabled ? color + '22' : '#f5f5f5',
          stroke: color,
          strokeWidth: 1.5,
          strokeDasharray: enabled ? '' : '4 2',
          rx: 5, ry: 5
        },
        label: {
          text: truncate(n.label, 16),
          fontSize: 10,
          fill: enabled ? '#333' : '#aaa',
          fontFamily: 'monospace'
        }
      }
    });
    cells.push(rect);
    nodeData[n.id] = n;
  });

  edges.forEach(function(e) {
    var link = new joint.shapes.standard.Link({
      source: { id: e.source },
      target: { id: e.target },
      attrs: {
        line: {
          stroke: '#90a4ae',
          strokeWidth: 1,
          targetMarker: { type: 'path', d: 'M 5 -3 L 0 0 L 5 3 Z', fill: '#90a4ae' }
        }
      },
      labels: e.label ? [{ position: 0.5, attrs: { text: { text: e.label, fontSize: 9 } } }] : []
    });
    cells.push(link);
  });

  graph.addCells(cells);
  paper.scaleContentToFit({ padding: 40, maxScale: 1.2 });
}

/* ── Simple grid/tree layout ─────────────────────────────────────────────── */
function layoutPositions(nodes, edges) {
  var positions = {};
  if (nodes.length === 0) return positions;

  if (useTreeLayout) {
    /* Group by entity_type, stack categories vertically */
    var groups = {};
    nodes.forEach(function(n) {
      var t = n.entity_type || 'other';
      if (!groups[t]) groups[t] = [];
      groups[t].push(n);
    });
    var catKeys = Object.keys(groups);
    var catX = 20;
    catKeys.forEach(function(cat) {
      var catNodes = groups[cat];
      var startY = 20;
      catNodes.forEach(function(n, i) {
        positions[n.id] = { x: catX, y: startY + i * 50 };
      });
      catX += 160;
    });
  } else {
    /* Force-like: spiral / grid by entity_type */
    var groups = {};
    nodes.forEach(function(n) {
      var t = n.entity_type || 'other';
      if (!groups[t]) groups[t] = [];
      groups[t].push(n);
    });
    var catKeys = Object.keys(groups);
    var COLS_PER_CAT = 5;
    var COL_W = 140, ROW_H = 55;
    var catX = 20;
    catKeys.forEach(function(cat) {
      var catNodes = groups[cat];
      catNodes.forEach(function(n, i) {
        var col = i % COLS_PER_CAT;
        var row = Math.floor(i / COLS_PER_CAT);
        positions[n.id] = { x: catX + col * COL_W, y: 20 + row * ROW_H };
      });
      var rows = Math.ceil(catNodes.length / COLS_PER_CAT);
      catX += COLS_PER_CAT * COL_W + 60;
    });
  }
  return positions;
}

/* ── API calls ───────────────────────────────────────────────────────────── */
function loadGraph(scope) {
  document.getElementById('cmap-loading').style.display = 'flex';
  var url = '/api/components-map/graph';
  var params = [];
  if (scope) params.push('scope=' + encodeURIComponent(scope));
  if (showDisabled) params.push('show_disabled=1');
  if (params.length) url += '?' + params.join('&');

  fetch(url)
    .then(function(r) { return r.json(); })
    .then(function(data) {
      buildGraph(data);
      document.getElementById('cmap-loading').style.display = 'none';
    })
    .catch(function(err) {
      console.error('Graph load error:', err);
      document.getElementById('cmap-loading').innerHTML = '<span style="color:#c62828;">Error loading graph. See console.</span>';
    });
}

function loadTree() {
  fetch('/api/components-map/tree')
    .then(function(r) { return r.json(); })
    .then(function(data) { renderTree(data); })
    .catch(function(err) { console.error('Tree error:', err); });
}

function fetchNodeDetail(id) {
  fetch('/api/components-map/node/' + encodeURIComponent(id))
    .then(function(r) { return r.json(); })
    .then(function(nd) { renderDrawer(nd); })
    .catch(function(err) { console.error('Node detail error:', err); });
}

/* ── Sidebar tree render ─────────────────────────────────────────────────── */
function renderTree(data) {
  var container = document.getElementById('sidebar-tree');
  container.innerHTML = '';

  var categories = Object.keys(data);
  categories.forEach(function(cat) {
    var nodes = data[cat];
    var color = typeColor(cat);

    var details = document.createElement('details');
    details.setAttribute('open', '');

    var summary = document.createElement('summary');
    summary.innerHTML =
      '<span class="sidebar-cat-dot" style="background:' + color + ';"></span>' +
      '<button class="cat-filter-btn" onclick="setScope(\'' + escAttr(cat) + '\', event)" title="Filter graph to ' + escAttr(cat) + ' nodes">' +
        escHtml(cat) +
      '</button>' +
      '<span class="sidebar-cat-count">' + nodes.length + '</span>';
    details.appendChild(summary);

    nodes.forEach(function(n) {
      var div = document.createElement('div');
      div.className = 'sidebar-item' + (n.enabled === false ? ' disabled-node' : '');
      div.innerHTML = '<span class="item-label">' + escHtml(n.label) + '</span>';
      div.title = n.label;
      div.onclick = function() { sidebarSelectNode(n.id, div); };
      details.appendChild(div);
    });

    container.appendChild(details);
  });
}

function setScope(cat, evt) {
  if (evt) evt.stopPropagation();
  currentScope = cat;
  document.querySelectorAll('.cat-filter-btn').forEach(function(b) { b.classList.remove('active'); });
  if (evt && evt.target) evt.target.classList.add('active');
  loadGraph(cat);
}

function resetScope() {
  currentScope = null;
  document.querySelectorAll('.cat-filter-btn').forEach(function(b) { b.classList.remove('active'); });
  loadGraph(null);
}

function sidebarSelectNode(id, el) {
  document.querySelectorAll('.sidebar-item.selected').forEach(function(e) { e.classList.remove('selected'); });
  el.classList.add('selected');
  var cell = graph.getCell(id);
  if (cell) {
    highlightCell(id);
    paper.scrollToElement(cell, { animation: { duration: 300 } });
  }
  fetchNodeDetail(id);
}

/* ── Detail drawer render ────────────────────────────────────────────────── */
function renderDrawer(nd) {
  var ph = document.getElementById('drawer-placeholder');
  var dc = document.getElementById('drawer-content');
  ph.style.display = 'none';
  dc.style.display = '';

  var props = nd.properties || {};
  var enabled = props.enabled !== undefined ? props.enabled : true;
  var health = nd.health || 'unknown';

  var healthClass = { ok: 'health-ok', warn: 'health-warn', error: 'health-err', unknown: 'health-unknown' }[health] || 'health-unknown';
  var enabledClass = enabled ? 'enabled-yes' : 'enabled-no';

  var fp = props.file_path || '';
  var fpHtml = fp ? '<a href="/file?path=' + encodeURIComponent(fp) + '" target="_blank">' + escHtml(fp) + '</a>' : '<span style="color:#ccc;">—</span>';

  var neighborsLink = '<a href="#" onclick="loadNeighbors(\'' + escAttr(nd.id) + '\'); return false;">' +
    (nd.relationships_count || 0) + ' edges</a>';

  var lastIdx = nd.last_indexed_at || nd.created_at || '—';
  if (lastIdx !== '—') {
    try { lastIdx = new Date(lastIdx).toLocaleString(); } catch(e) {}
  }

  dc.innerHTML =
    '<div class="drawer-field"><label>Label</label><div class="val" style="font-weight:600;font-size:0.95rem;">' + escHtml(nd.label) + '</div></div>' +
    '<div class="drawer-field"><label>Type</label><div class="val"><span style="background:' + typeColor(nd.entity_type) + '22;color:' + typeColor(nd.entity_type) + ';padding:0.1rem 0.4rem;border-radius:3px;font-weight:600;">' + escHtml(nd.entity_type) + '</span></div></div>' +
    '<div class="drawer-field"><label>Enabled</label><div class="val"><span class="enabled-badge ' + enabledClass + '">' + (enabled ? 'yes' : 'no') + '</span></div></div>' +
    (props.enabled_value !== undefined ? '<div class="drawer-field"><label>Enabled value</label><div class="val">' + escHtml(String(props.enabled_value)) + '</div></div>' : '') +
    '<div class="drawer-field"><label>Health</label><div class="val"><span class="health-badge ' + healthClass + '">' + health + '</span></div></div>' +
    '<div class="drawer-field"><label>Relationships</label><div class="val">' + neighborsLink + '</div></div>' +
    '<div class="drawer-field"><label>File path</label><div class="val" style="font-size:0.76rem;">' + fpHtml + '</div></div>' +
    '<div class="drawer-field"><label>Last indexed</label><div class="val">' + escHtml(lastIdx) + '</div></div>' +
    (props.description ? '<div class="drawer-field"><label>Description</label><div class="val" style="color:#444;line-height:1.45;">' + escHtml(props.description) + '</div></div>' : '') +
    (nd.centrality !== undefined ? '<div class="drawer-field"><label>Centrality</label><div class="val">' + (nd.centrality || 0).toFixed(4) + '</div></div>' : '') +
    '<div class="drawer-field"><label>Node ID</label><div class="val" style="font-family:monospace;font-size:0.73rem;color:#999;">' + escHtml(nd.id) + '</div></div>';
}

/* ── Neighbor expand ─────────────────────────────────────────────────────── */
function loadNeighbors(id) {
  fetch('/api/components-map/neighbors/' + encodeURIComponent(id))
    .then(function(r) { return r.json(); })
    .then(function(data) {
      buildGraph(data);
      document.getElementById('cmap-loading').style.display = 'none';
      /* highlight the focal node */
      if (graph.getCell(id)) highlightCell(id);
    })
    .catch(function(err) { console.error('Neighbors error:', err); });
}

/* ── Header actions ──────────────────────────────────────────────────────── */
function refreshGraph() {
  fetch('/api/components-map/refresh', { method: 'POST' })
    .then(function() {
      loadTree();
      loadGraph(currentScope);
    })
    .catch(function() { loadGraph(currentScope); });
}

function toggleDisabled() {
  showDisabled = !showDisabled;
  var btn = document.getElementById('btn-show-disabled');
  btn.classList.toggle('active', showDisabled);
  btn.textContent = showDisabled ? 'Hide Disabled' : 'Show Disabled';
  loadGraph(currentScope);
}

function toggleLayout() {
  useTreeLayout = !useTreeLayout;
  var btn = document.getElementById('btn-layout');
  btn.classList.toggle('active', useTreeLayout);
  btn.textContent = useTreeLayout ? 'Force Layout' : 'Tree Layout';
  /* Rebuild from existing graph data */
  var nodes = graph.getElements().map(function(el) {
    return nodeData[el.id] || { id: el.id, label: el.id, entity_type: 'other', enabled: true };
  });
  var positions = layoutPositions(nodes, []);
  graph.getElements().forEach(function(el) {
    var pos = positions[el.id];
    if (pos) el.position(pos.x, pos.y);
  });
  paper.scaleContentToFit({ padding: 40, maxScale: 1.2 });
}

/* ── Utilities ───────────────────────────────────────────────────────────── */
function truncate(s, n) { return (s || '').length > n ? s.substring(0, n) + '\u2026' : (s || ''); }
function escHtml(s) {
  return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}
function escAttr(s) { return String(s||'').replace(/'/g,"\\'").replace(/"/g,'&quot;'); }

/* ── Boot ────────────────────────────────────────────────────────────────── */
document.addEventListener('DOMContentLoaded', function() {
  initJoint();
  loadTree();
  loadGraph(null);
});
</script>
{% endblock %}