{% extends "network/base.html" %}
{% block title %}Network Intelligence — Network Design Canvas{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">Network Infrastructure Intelligence</h1>
    <p class="page-subtitle">13-dimension analysis: redundancy, EOL, blast radius, capacity, compliance, and more</p>
  </div>
</div>

<!-- Topology Selector -->
<div style="display:flex;gap:12px;align-items:center;margin-bottom:20px;">
  <label style="font-weight:600;color:var(--text-dim);">Topology:</label>
  <select id="ni-topo-select" class="form-control" style="max-width:400px;" onchange="niLoadDevices()">
    <option value="">Select a topology...</option>
  </select>
  <button class="btn btn-secondary" onclick="document.getElementById('ni-upload-modal').style.display='flex'">Import Diagram</button>
</div>

<!-- Query Bar -->
<div style="display:flex;gap:8px;margin-bottom:20px;">
  <input type="text" id="ni-query" class="form-control" placeholder="Ask a question: &quot;Do I need a redundant link in NYC?&quot; or &quot;Add 250 VDI users in Northeast&quot;" style="flex:1;">
  <button class="btn btn-primary" onclick="niQuery()">Ask</button>
</div>
<div id="ni-query-result" style="display:none;" class="panel" style="margin-bottom:16px;">
  <div class="panel-header"><h2 class="panel-title">Analysis Result</h2></div>
  <div id="ni-query-body" style="padding:12px;"></div>
</div>

<!-- Dimension Cards Grid -->
<style>
  .ni-card{border-radius:8px;transition:all .3s}
  .ni-card.expanded{grid-column:1/-1}
  .ni-badge{display:inline-block;padding:3px 10px;border-radius:12px;font-size:11px;font-weight:700;color:#fff}
  .ni-badge-ok{background:#43a047} .ni-badge-warn{background:#f57c00} .ni-badge-crit{background:#e53935} .ni-badge-info{background:#1976d2}
  .ni-meter{height:8px;border-radius:4px;background:var(--bg-body);overflow:hidden;margin:4px 0}
  .ni-meter-fill{height:100%;border-radius:4px;transition:width .6s}
  .ni-spof-row{display:flex;align-items:center;gap:6px;padding:3px 0;font-size:12px}
  .ni-mini-bars{display:flex;gap:2px;align-items:flex-end;height:50px}
  .ni-mini-bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;text-align:center}
  .ni-mini-bar-fill{border-radius:2px 2px 0 0;min-height:2px;transition:height .4s}
  .ni-mini-bar-label{font-size:8px;color:var(--text-dim);margin-top:2px}
  .ni-donut-wrap{position:relative;width:64px;height:64px}
  .ni-donut-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700}
  .ni-ctrl-row{display:flex;align-items:center;gap:4px;padding:2px 0;font-size:11px}
  .ni-expand-body{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px}
  .ni-svg-panel{flex:1;min-width:400px}
  .ni-detail-panel{flex:0 0 320px;max-height:350px;overflow-y:auto}
  @keyframes niPulse{0%,100%{opacity:.5}50%{opacity:1}}
  .ni-pulse{animation:niPulse 2s ease-in-out infinite}
</style>
<div class="dashboard-grid" style="grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:16px;">

  <!-- Redundancy -->
  <section class="panel ni-card" id="ni-redundancy-card">
    <div class="panel-header" style="display:flex;justify-content:space-between;align-items:center;">
      <h2 class="panel-title">Redundancy</h2>
      <button class="btn btn-sm btn-primary" onclick="niRunAnalysis('redundancy')">Analyze</button>
    </div>
    <div style="padding:12px;">
      <div id="ni-redundancy-stats" style="color:var(--text-dim);">Select a topology to analyze</div>
    </div>
  </section>

  <!-- EOL Lifecycle -->
  <section class="panel ni-card" id="ni-eol-card">
    <div class="panel-header" style="display:flex;justify-content:space-between;align-items:center;">
      <h2 class="panel-title">EOL Lifecycle</h2>
      <button class="btn btn-sm btn-primary" onclick="niRunAnalysis('eol')">Analyze</button>
    </div>
    <div style="padding:12px;">
      <div id="ni-eol-stats" style="color:var(--text-dim);">—</div>
    </div>
  </section>

  <!-- Compliance -->
  <section class="panel ni-card" id="ni-compliance-card">
    <div class="panel-header" style="display:flex;justify-content:space-between;align-items:center;">
      <h2 class="panel-title">Compliance</h2>
      <button class="btn btn-sm btn-primary" onclick="niRunAnalysis('compliance')">Analyze</button>
    </div>
    <div style="padding:12px;">
      <div id="ni-compliance-stats" style="color:var(--text-dim);">—</div>
    </div>
  </section>

  <!-- Vendor Risk -->
  <section class="panel ni-card" id="ni-vendor-card">
    <div class="panel-header" style="display:flex;justify-content:space-between;align-items:center;">
      <h2 class="panel-title">Vendor Risk</h2>
      <button class="btn btn-sm btn-primary" onclick="niRunAnalysis('vendor-risk')">Analyze</button>
    </div>
    <div style="padding:12px;">
      <div id="ni-vendor-stats" style="color:var(--text-dim);">—</div>
    </div>
  </section>

  <!-- Cost Projection -->
  <section class="panel ni-card" id="ni-cost-card">
    <div class="panel-header" style="display:flex;justify-content:space-between;align-items:center;">
      <h2 class="panel-title">Cost Projection</h2>
      <button class="btn btn-sm btn-primary" onclick="niRunAnalysis('cost-projection')">Analyze</button>
    </div>
    <div style="padding:12px;">
      <div id="ni-cost-stats" style="color:var(--text-dim);">—</div>
    </div>
  </section>

  <!-- Circuits / Contracts -->
  <section class="panel ni-card" id="ni-circuits-card">
    <div class="panel-header" style="display:flex;justify-content:space-between;align-items:center;">
      <h2 class="panel-title">Circuits / Contracts</h2>
      <button class="btn btn-sm btn-primary" onclick="niRunAnalysis('circuits')">Analyze</button>
    </div>
    <div style="padding:12px;">
      <div id="ni-circuits-stats" style="color:var(--text-dim);">—</div>
    </div>
  </section>

  <!-- Config Management -->
  <section class="panel ni-card" id="ni-config-card">
    <div class="panel-header" style="display:flex;justify-content:space-between;align-items:center;">
      <h2 class="panel-title">Config Management</h2>
      <div style="display:flex;gap:4px;">
        <button class="btn btn-sm btn-primary" onclick="niRunAnalysis('config', 'diff')">Check Drift</button>
        <button class="btn btn-sm btn-secondary" onclick="niRunAnalysis('config', 'generate')">Generate</button>
      </div>
    </div>
    <div style="padding:12px;">
      <div id="ni-config-stats" style="color:var(--text-dim);">—</div>
    </div>
  </section>

  <section class="panel" id="ni-capacity-card" style="grid-column: 1 / -1;">
    <div class="panel-header"><h2 class="panel-title">Capacity Planning &amp; Simulation</h2></div>
    <div style="padding:12px;">
      <div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;">
        <input type="number" id="cap-users" class="form-control" value="250" style="width:100px;" placeholder="Users">
        <input type="text" id="cap-region" class="form-control" value="Site-A" style="width:120px;" placeholder="Region">
        <select id="cap-services" class="form-control" style="width:200px;" multiple title="Hold Ctrl to select multiple">
          <option value="vdi" selected>VDI (4 Mbps)</option>
          <option value="teams" selected>Teams (2 Mbps)</option>
          <option value="o365">O365 (0.5 Mbps)</option>
          <option value="general" selected>General (1 Mbps)</option>
        </select>
        <button class="btn btn-primary" onclick="niCapacityRun()">Simulate Impact</button>
      </div>
      <div id="ni-capacity-result" style="display:none;">
        <!-- Health Badge -->
        <div id="cap-health-badge" style="display:flex;gap:16px;align-items:center;margin-bottom:16px;"></div>
        <!-- Network Graph SVG -->
        <div style="display:flex;gap:16px;flex-wrap:wrap;">
          <div style="flex:1;min-width:500px;">
            <h3 style="margin:0 0 8px;font-size:14px;color:var(--text-dim);">Network Topology — Link Utilization</h3>
            <svg id="cap-graph-svg" viewBox="0 0 900 500" style="width:100%;max-height:500px;background:var(--bg-body);border:1px solid var(--border);border-radius:8px;"></svg>
          </div>
          <div style="flex:0 0 340px;">
            <!-- Demand Breakdown -->
            <h3 style="margin:0 0 8px;font-size:14px;color:var(--text-dim);">Demand Breakdown</h3>
            <table class="data-table" id="cap-demand-table" style="font-size:12px;">
              <thead><tr><th>Service</th><th>Users</th><th>Sustained</th><th>Peak</th></tr></thead>
              <tbody id="cap-demand-body"></tbody>
            </table>
            <!-- Bottlenecks -->
            <h3 style="margin:8px 0;font-size:14px;color:var(--text-dim);">Bottlenecks</h3>
            <div id="cap-bottlenecks" style="font-size:12px;"></div>
            <!-- Upgrades -->
            <h3 style="margin:8px 0;font-size:14px;color:var(--text-dim);">Recommended Upgrades</h3>
            <div id="cap-upgrades" style="font-size:12px;"></div>
          </div>
        </div>
        <!-- 3-Year Projection -->
        <h3 style="margin:16px 0 8px;font-size:14px;color:var(--text-dim);">3-Year Utilization Projection</h3>
        <div id="cap-projections" style="display:flex;gap:8px;flex-wrap:wrap;"></div>
      </div>
      <div id="ni-capacity-stats" style="color:var(--text-dim);">Configure scenario above and click Simulate Impact</div>
    </div>
  </section>

</div>

<!-- Device Table -->
<section class="panel" style="margin-top:20px;" id="ni-devices-panel" style="display:none;">
  <div class="panel-header"><h2 class="panel-title">Device Inventory</h2></div>
  <div style="padding:12px;overflow-x:auto;">
    <table class="data-table" id="ni-devices-table">
      <thead>
        <tr><th>Label</th><th>Type</th><th>Vendor</th><th>Model</th><th>Site</th><th>EOL Date</th><th>Replacement Cost</th><th>Criticality</th></tr>
      </thead>
      <tbody id="ni-devices-body"></tbody>
    </table>
  </div>
</section>

<!-- Recent Analyses -->
<section class="panel" style="margin-top:20px;">
  <div class="panel-header"><h2 class="panel-title">Recent Analyses</h2></div>
  <div style="padding:12px;overflow-x:auto;">
    <table class="data-table" id="ni-analyses-table">
      <thead>
        <tr><th>Type</th><th>Query</th><th>Summary</th><th>Time</th></tr>
      </thead>
      <tbody id="ni-analyses-body"></tbody>
    </table>
  </div>
</section>

<!-- Upload Modal -->
<div id="ni-upload-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:1000;align-items:center;justify-content:center;">
  <div style="background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:24px;max-width:500px;width:90%;">
    <h2 style="margin:0 0 16px;">Import Network Diagram</h2>
    <p style="color:var(--text-dim);font-size:13px;">Supports: Visio (.vsdx/.vdx), Draw.io (.drawio/.xml), PDF, Images</p>
    <form id="ni-upload-form" enctype="multipart/form-data">
      <input type="file" name="file" accept=".vsdx,.vdx,.drawio,.xml,.pdf,.png,.jpg,.jpeg" style="margin:12px 0;">
      <input type="text" name="name" placeholder="Topology name (optional)" class="form-control" style="margin-bottom:12px;">
      <div style="display:flex;gap:8px;justify-content:flex-end;">
        <button type="button" class="btn btn-secondary" onclick="document.getElementById('ni-upload-modal').style.display='none'">Cancel</button>
        <button type="submit" class="btn btn-primary">Import</button>
      </div>
    </form>
  </div>
</div>

{% endblock %}
{% block scripts %}
<script>
const NC_NI = NC_BASE + '/api/network-intelligence';

// Load topologies into selector
async function niLoadTopos() {
  try {
    const r = await fetch(NC_BASE + '/api/topologies');
    const d = await r.json();
    const sel = document.getElementById('ni-topo-select');
    (d.topologies || d || []).forEach(t => {
      const opt = document.createElement('option');
      opt.value = t.id;
      opt.textContent = t.name + ' (' + (t.node_count || '?') + ' nodes)';
      sel.appendChild(opt);
    });
  } catch(e) { console.warn('Failed to load topologies', e); }
}

// Load devices for selected topology
async function niLoadDevices() {
  const tid = document.getElementById('ni-topo-select').value;
  if (!tid) return;
  try {
    const r = await fetch(NC_NI + '/devices/' + tid);
    const devices = await r.json();
    const tbody = document.getElementById('ni-devices-body');
    tbody.innerHTML = devices.map(d => `<tr>
      <td>${esc(d.label)}</td><td>${esc(d.device_type)}</td>
      <td>${esc(d.vendor||'—')}</td><td>${esc(d.model||'—')}</td>
      <td>${esc(d.site||'—')}</td>
      <td class="${d.eol_date && d.eol_date < new Date().toISOString().slice(0,10) ? 'text-danger' : ''}">${esc(d.eol_date||'—')}</td>
      <td>$${(d.replacement_cost||0).toLocaleString()}</td>
      <td>${(d.criticality_score||0).toFixed(2)}</td>
    </tr>`).join('');

    // Load analyses
    const ar = await fetch(NC_NI + '/analyses/' + tid);
    const analyses = await ar.json();
    document.getElementById('ni-analyses-body').innerHTML = analyses.map(a => `<tr>
      <td><span class="badge badge-info">${esc(a.analysis_type)}</span></td>
      <td>${esc(a.query_text||'—')}</td>
      <td>${esc(a.result_summary||'—')}</td>
      <td>${esc(a.created_at||'')}</td>
    </tr>`).join('');
  } catch(e) { console.warn('Device load failed', e); }
}

function esc(s) { const d = document.createElement('div'); d.textContent = s||''; return d.innerHTML; }

// NL Query
async function niQuery() {
  const tid = document.getElementById('ni-topo-select').value;
  const q = document.getElementById('ni-query').value;
  if (!tid || !q) { alert('Select a topology and enter a question'); return; }
  document.getElementById('ni-query-result').style.display = 'block';
  document.getElementById('ni-query-body').innerHTML = '<em>Analyzing...</em>';
  try {
    const r = await fetch(NC_NI + '/query', {
      method: 'POST', headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({topology_id: tid, question: q})
    });
    const d = await r.json();
    document.getElementById('ni-query-body').innerHTML =
      '<strong>Intent:</strong> ' + esc(d.intent) + '<br>' +
      '<pre style="white-space:pre-wrap;max-height:400px;overflow:auto;">' +
      esc(JSON.stringify(d.analysis, null, 2)) + '</pre>';
  } catch(e) {
    document.getElementById('ni-query-body').innerHTML = '<span class="text-danger">Error: ' + e.message + '</span>';
  }
}

// ── Rich Analysis Renderers ───────────────────────────────────────────────

const _tierColor = {RED:'#e53935',ORANGE:'#f57c00',YELLOW:'#fdd835',GREEN:'#43a047'};

// Map analysis type to stats element ID
const _cardIdMap = {
  'redundancy':'ni-redundancy-stats', 'eol':'ni-eol-stats', 'compliance':'ni-compliance-stats',
  'vendor-risk':'ni-vendor-stats', 'cost-projection':'ni-cost-stats', 'circuits':'ni-circuits-stats',
  'config':'ni-config-stats', 'capacity':'ni-capacity-stats'
};

async function niRunAnalysis(type, action) {
  const tid = document.getElementById('ni-topo-select').value;
  if (!tid) { alert('Select a topology first'); return; }
  const card = document.getElementById(_cardIdMap[type] || 'ni-' + type + '-stats');
  if (card) card.innerHTML = '<em style="color:var(--text-dim);">Analyzing...</em>';
  try {
    let url, opts = {};
    if (type === 'config') {
      url = NC_NI + '/config/' + tid;
      opts = {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({action: action||'diff'})};
    } else if (['redundancy','eol','compliance','cost-projection','capacity'].includes(type)) {
      url = NC_NI + '/' + type + '/' + tid;
      opts = {method:'POST', headers:{'Content-Type':'application/json'}, body: '{}'};
    } else {
      url = NC_NI + '/' + type + '/' + tid;
    }
    const r = await fetch(url, opts);
    const ct = r.headers.get('content-type') || '';
    if (!ct.includes('json')) { if (card) card.innerHTML = '<span class="text-danger">Server returned non-JSON (status ' + r.status + '). Select a topology first.</span>'; return; }
    const d = await r.json();
    if (d.error) { card.innerHTML = '<span class="text-danger">' + esc(d.error) + '</span>'; return; }
    // Route to specific renderer
    const renderer = _analysisRenderers[type];
    if (renderer && card) { renderer(card, d); }
    else if (card) { card.innerHTML = '<pre style="white-space:pre-wrap;max-height:200px;overflow:auto;font-size:12px;">' + esc(JSON.stringify(d, null, 2).slice(0, 1200)) + '</pre>'; }
  } catch(e) {
    if (card) card.innerHTML = '<span class="text-danger">' + e.message + '</span>';
  }
}

const _analysisRenderers = {

  // ── Redundancy — SVG topology graph with SPOFs highlighted ──
  'redundancy': function(card, d) {
    const spofs = d.spofs || [], bridges = d.bridges || [], isRedundant = d.fully_redundant;
    const spofIds = new Set(spofs.map(s => s.device_id));
    const bridgeSet = new Set(bridges.map(b => b.source_id + ':' + b.target_id));
    // Expand card
    card.closest('.ni-card').classList.add('expanded');
    let html = '<div style="display:flex;gap:12px;align-items:center;margin-bottom:10px;">' +
      '<span class="ni-badge ' + (isRedundant ? 'ni-badge-ok' : 'ni-badge-crit') + '">' + (isRedundant ? 'FULLY REDUNDANT' : spofs.length + ' SINGLE POINTS OF FAILURE') + '</span>' +
      '<span style="font-size:12px;color:var(--text-dim);">' + d.total_devices + ' devices &bull; ' + bridges.length + ' bridge edges</span></div>';

    html += '<div class="ni-expand-body">';
    // SVG topology
    html += '<div class="ni-svg-panel"><svg id="ni-redundancy-svg" viewBox="0 0 900 400" style="width:100%;background:var(--bg-body);border:1px solid var(--border);border-radius:8px;"></svg></div>';
    // Detail panel
    html += '<div class="ni-detail-panel">';
    if (spofs.length) {
      html += '<h4 style="margin:0 0 6px;font-size:13px;">Single Points of Failure</h4>';
      spofs.forEach(s => {
        const w = Math.min(s.impact_ratio * 100, 100);
        html += '<div class="ni-spof-row">' +
          '<span style="width:48px;font-weight:700;color:' + (_tierColor[s.tier]||'#999') + ';">' + s.tier + '</span>' +
          '<span style="width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="'+esc(s.label)+'">' + esc(s.label) + '</span>' +
          '<div class="ni-meter" style="flex:1;"><div class="ni-meter-fill" style="width:'+w+'%;background:' + (_tierColor[s.tier]||'#999') + ';"></div></div>' +
          '<span style="width:55px;text-align:right;color:var(--text-dim);">' + s.disconnected_devices + ' cut</span></div>';
      });
    }
    if (bridges.length) {
      html += '<h4 style="margin:10px 0 6px;font-size:13px;">Bridge Edges</h4>';
      bridges.forEach(b => {
        html += '<div style="font-size:11px;padding:2px 0;border-left:3px solid #f57c00;padding-left:8px;margin:2px 0;">' + esc(b.source) + ' <span style="color:#f57c00;">↔</span> ' + esc(b.target) + '</div>';
      });
    }
    html += '</div></div>';
    card.innerHTML = html;
    // Render SVG after DOM update
    setTimeout(() => _renderRedundancyGraph(spofIds, bridgeSet), 50);
  },

  // ── EOL — timeline with device cards ──
  'eol': function(card, d) {
    const timeline = d.timeline || [], mc = d.monte_carlo || {}, pcts = mc.total_replacement_cost || {};
    card.closest('.ni-card').classList.add('expanded');
    const hasEOL = d.total_eol_devices > 0;
    let html = '<div style="display:flex;gap:12px;align-items:center;margin-bottom:10px;">' +
      '<span class="ni-badge ' + (hasEOL ? 'ni-badge-warn' : 'ni-badge-ok') + '">' + (d.total_eol_devices||0) + ' EOL DEVICES</span>' +
      '<span style="font-size:12px;color:var(--text-dim);">' + d.horizon_years + '-year horizon &bull; ' + (mc.iterations||0).toLocaleString() + ' Monte Carlo iterations</span></div>';

    html += '<div class="ni-expand-body">';
    // Timeline SVG
    html += '<div class="ni-svg-panel"><svg id="ni-eol-svg" viewBox="0 0 900 250" style="width:100%;background:var(--bg-body);border:1px solid var(--border);border-radius:8px;"></svg></div>';
    // Cost detail
    html += '<div class="ni-detail-panel">';
    html += '<h4 style="margin:0 0 8px;font-size:13px;">Replacement Cost (Monte Carlo)</h4>';
    if (pcts.p50) {
      html += '<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px;">';
      [['P10','p10','#43a047'],['P50','p50','#1976d2'],['P80','p80','#f57c00'],['P90','p90','#e53935']].forEach(([label,key,color]) => {
        html += '<div style="text-align:center;padding:8px;background:var(--bg-body);border-radius:6px;border:1px solid var(--border);">' +
          '<div style="font-size:10px;color:var(--text-dim);">' + label + '</div>' +
          '<div style="font-size:16px;font-weight:700;color:'+color+';">$' + Number(pcts[key]||0).toLocaleString() + '</div></div>';
      });
      html += '</div>';
    }
    // Per-year breakdown
    if (timeline.length) {
      html += '<h4 style="margin:8px 0 6px;font-size:13px;">Year-by-Year EOL Devices</h4>';
      timeline.forEach(y => {
        const devices = y.devices || [];
        html += '<div style="margin:4px 0;padding:6px 8px;border-left:3px solid ' + (devices.length?'#f57c00':'#43a047') + ';background:var(--bg-body);border-radius:0 4px 4px 0;">' +
          '<strong>' + esc(y.year||'') + '</strong>: ' + (y.device_count||0) + ' devices' +
          (devices.length ? '<div style="font-size:10px;color:var(--text-dim);margin-top:2px;">' + devices.map(dd => esc(dd.label||dd.device_id||'')).join(', ') + '</div>' : '') + '</div>';
      });
    }
    html += '</div></div>';
    card.innerHTML = html;
    setTimeout(() => _renderEOLTimeline(timeline), 50);
  },

  // ── Compliance — donut + control matrix ──
  'compliance': function(card, d) {
    const findings = d.findings || d.controls || d.checks || [];
    const passCount = Array.isArray(findings) ? findings.filter(f => (f.status||f.result) === 'pass').length : 0;
    const total = Array.isArray(findings) ? findings.length : 0;
    const pct = total ? Math.round(passCount/total*100) : 0;
    const color = pct >= 80 ? '#43a047' : pct >= 50 ? '#f57c00' : '#e53935';
    card.closest('.ni-card').classList.add('expanded');

    const r=28, c=2*Math.PI*r, offset=c*(1-pct/100);
    let html = '<div style="display:flex;gap:16px;align-items:center;margin-bottom:10px;">' +
      '<div class="ni-donut-wrap" style="width:72px;height:72px;">' +
      '<svg viewBox="0 0 64 64" style="transform:rotate(-90deg);width:100%;height:100%;">' +
      '<circle cx="32" cy="32" r="'+r+'" fill="none" stroke="var(--border)" stroke-width="5"/>' +
      '<circle cx="32" cy="32" r="'+r+'" fill="none" stroke="'+color+'" stroke-width="5" stroke-dasharray="'+c+'" stroke-dashoffset="'+offset+'" stroke-linecap="round" style="transition:stroke-dashoffset .8s;"/></svg>' +
      '<div class="ni-donut-text" style="font-size:16px;color:'+color+';">'+pct+'%</div></div>' +
      '<div><div style="font-weight:700;font-size:15px;">' + passCount + ' / ' + total + ' checks passed</div>' +
      '<div style="font-size:12px;color:var(--text-dim);">Framework: ' + esc(d.framework || 'NIST 800-53') + '</div></div></div>';

    // Control matrix grid
    if (Array.isArray(findings) && findings.length) {
      html += '<div style="display:flex;flex-wrap:wrap;gap:6px;">';
      findings.forEach(f => {
        const s = f.status || f.result || '?';
        const passed = s === 'pass';
        html += '<div style="padding:6px 10px;border-radius:6px;border:1px solid ' + (passed?'#43a047':'#e53935') + ';background:' + (passed?'rgba(67,160,71,0.1)':'rgba(229,57,53,0.1)') + ';font-size:11px;min-width:100px;">' +
          '<div style="font-weight:700;color:' + (passed?'#43a047':'#e53935') + ';">' + (passed?'PASS':'FAIL') + '</div>' +
          '<div style="font-weight:600;">' + esc(f.control||f.rule_id||'') + '</div>' +
          '<div style="color:var(--text-dim);font-size:10px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">' + esc(f.description||f.message||'') + '</div></div>';
      });
      html += '</div>';
    }
    card.innerHTML = html;
  },

  // ── Vendor Risk — pie chart + risk table ──
  'vendor-risk': function(card, d) {
    const vendors = d.vendors || [], highRisk = d.high_risk_vendors || [], total = d.total_devices || 0;
    card.closest('.ni-card').classList.add('expanded');
    let html = '<div style="display:flex;gap:12px;align-items:center;margin-bottom:10px;">' +
      '<span class="ni-badge ' + (highRisk.length ? 'ni-badge-crit' : 'ni-badge-ok') + '">' + (highRisk.length ? highRisk.length + ' HIGH-RISK VENDORS' : 'DIVERSIFIED') + '</span>' +
      '<span style="font-size:12px;color:var(--text-dim);">' + (d.vendor_count||vendors.length) + ' vendors &bull; ' + total + ' devices</span></div>';

    html += '<div class="ni-expand-body">';
    // SVG pie chart
    html += '<div style="flex:0 0 200px;"><svg id="ni-vendor-svg" viewBox="0 0 200 200" style="width:200px;height:200px;"></svg></div>';
    // Vendor table
    html += '<div style="flex:1;">';
    if (vendors.length) {
      html += '<table class="data-table" style="font-size:12px;"><thead><tr><th>Vendor</th><th>Devices</th><th>Share</th><th>Risk</th></tr></thead><tbody>';
      vendors.forEach(v => {
        const pct = total ? Math.round((v.device_count||0)/total*100) : 0;
        const isHigh = pct >= 70;
        html += '<tr><td>' + esc(v.vendor||'Unknown') + '</td><td>' + (v.device_count||0) + '</td>' +
          '<td><div class="ni-meter" style="width:100px;display:inline-block;vertical-align:middle;"><div class="ni-meter-fill" style="width:'+pct+'%;background:'+(isHigh?'#e53935':'#4a90d9')+';"></div></div> '+pct+'%</td>' +
          '<td>' + (isHigh ? '<span style="color:#e53935;font-weight:700;">HIGH</span>' : '<span style="color:#43a047;">OK</span>') + '</td></tr>';
      });
      html += '</tbody></table>';
    } else {
      html += '<div style="color:var(--text-dim);padding:20px;text-align:center;">No vendor data assigned. Edit devices in the canvas to add vendor info.</div>';
    }
    html += '</div></div>';
    card.innerHTML = html;
    setTimeout(() => _renderVendorPie(vendors, total), 50);
  },

  // ── Cost Projection — confidence interval bars ──
  'cost-projection': function(card, d) {
    const mc = d.eol_monte_carlo || d.monte_carlo || {}, pcts = mc.total_replacement_cost || {}, timeline = d.year_breakdown || d.timeline || [];
    const totalTCO = d.total_tco || 0;
    const annualRec = d.annual_recurring || {};
    card.closest('.ni-card').classList.add('expanded');
    let html = '<div style="display:flex;gap:12px;align-items:center;margin-bottom:10px;">' +
      '<span class="ni-badge ni-badge-info">' + (d.projection_years||5) + '-YEAR TCO</span>' +
      '<span style="font-size:16px;font-weight:700;color:#4a90d9;">$' + Number(totalTCO).toLocaleString() + '</span>' +
      '<span style="font-size:12px;color:var(--text-dim);">' + (mc.iterations||0).toLocaleString() + ' Monte Carlo simulations</span></div>';

    html += '<div class="ni-expand-body">';
    // Confidence interval SVG
    html += '<div class="ni-svg-panel"><svg id="ni-cost-svg" viewBox="0 0 600 200" style="width:100%;background:var(--bg-body);border:1px solid var(--border);border-radius:8px;"></svg></div>';
    // Stats
    html += '<div class="ni-detail-panel">';
    html += '<h4 style="margin:0 0 8px;font-size:13px;">Cost Percentiles</h4>';
    html += '<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;">';
    [['P10','p10','#43a047','Best case'],['P50','p50','#1976d2','Median'],['P80','p80','#f57c00','Likely'],['P90','p90','#e53935','Worst case']].forEach(([label,key,color,desc]) => {
      html += '<div style="padding:10px;background:var(--bg-body);border-radius:6px;border-left:4px solid '+color+';">' +
        '<div style="font-size:9px;color:var(--text-dim);">' + label + ' — ' + desc + '</div>' +
        '<div style="font-size:18px;font-weight:700;color:'+color+';">$' + Number(pcts[key]||0).toLocaleString() + '</div></div>';
    });
    html += '</div>';
    if (mc.mean) html += '<div style="margin-top:8px;font-size:12px;color:var(--text-dim);">Mean replacement: <strong>$' + Number(mc.mean).toLocaleString() + '</strong></div>';
    // Annual recurring
    if (annualRec.maintenance || annualRec.circuits) {
      html += '<h4 style="margin:10px 0 4px;font-size:13px;">Annual Recurring</h4>';
      html += '<div style="font-size:12px;">Maintenance: <strong>$' + Number(annualRec.maintenance||0).toLocaleString() + '</strong>/yr</div>';
      if (annualRec.circuits) html += '<div style="font-size:12px;">Circuits: <strong>$' + Number(annualRec.circuits||0).toLocaleString() + '</strong>/yr</div>';
    }
    // Year breakdown
    if (timeline.length) {
      html += '<h4 style="margin:10px 0 4px;font-size:13px;">Yearly Breakdown</h4>';
      html += '<div style="max-height:120px;overflow:auto;font-size:11px;">';
      timeline.forEach(y => {
        html += '<div style="display:flex;justify-content:space-between;padding:2px 0;border-bottom:1px solid var(--border);">' +
          '<span>' + y.year + '</span><span>$' + Number(y.year_total||0).toLocaleString() + '</span><span style="color:var(--text-dim);">cum: $' + Number(y.cumulative||0).toLocaleString() + '</span></div>';
      });
      html += '</div>';
    }
    html += '</div></div>';
    card.innerHTML = html;
    setTimeout(() => _renderCostChart(pcts, mc.mean || 0), 50);
  },

  // ── Circuits / Contracts ──
  'circuits': function(card, d) {
    const circuits = d.circuits || [];
    let html = '<div style="display:flex;gap:12px;align-items:center;margin-bottom:8px;">' +
      '<span class="ni-badge ni-badge-info">' + (circuits.length||0) + ' CIRCUITS</span></div>';
    if (circuits.length) {
      html += '<div style="max-height:200px;overflow:auto;">';
      circuits.forEach(c => {
        html += '<div style="padding:6px 8px;margin:3px 0;border-left:3px solid #1976d2;background:var(--bg-body);border-radius:0 4px 4px 0;font-size:12px;">' +
          '<strong>' + esc(c.circuit_id||c.id||'') + '</strong> — ' + esc(c.provider||c.carrier||'') +
          '<div style="color:var(--text-dim);font-size:10px;">' + esc(c.bandwidth||'') + ' &bull; Expires: ' + esc(c.contract_end||c.expiry||'N/A') + '</div></div>';
      });
      html += '</div>';
    } else {
      html += '<div style="color:var(--text-dim);font-size:12px;">No circuit data. Add circuit/contract info to WAN links in the canvas.</div>';
    }
    card.innerHTML = html;
  },

  // ── Config Drift — device status grid ──
  'config': function(card, d) {
    const drifted = d.drifted_devices || [];
    const total = d.total_devices || 0;
    const synced = total - drifted.length;
    let html = '<div style="display:flex;gap:12px;align-items:center;margin-bottom:8px;">' +
      '<span class="ni-badge ' + (drifted.length ? 'ni-badge-warn' : 'ni-badge-ok') + '">' + (drifted.length ? drifted.length + ' DRIFTED' : 'ALL IN SYNC') + '</span>' +
      '<span style="font-size:12px;color:var(--text-dim);">' + esc(d.action||'') + ' &bull; ' + total + ' devices checked</span></div>';
    if (d.configs_generated) html += '<div style="font-size:12px;color:#43a047;margin-bottom:4px;">' + d.configs_generated + ' golden configs generated and stored</div>';
    // Status icons grid
    if (total > 0) {
      html += '<div style="display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;">';
      const driftedIds = new Set(drifted.map(dd => dd.device_id));
      for (let i = 0; i < Math.max(total, synced + drifted.length); i++) {
        const isDrifted = i >= synced;
        html += '<div style="width:20px;height:20px;border-radius:4px;background:' + (isDrifted?'#f57c00':'#43a047') + ';opacity:0.8;" title="' + (isDrifted ? 'Drifted' : 'In sync') + '"></div>';
      }
      html += '</div>';
    }
    if (drifted.length) {
      html += '<div style="font-size:11px;margin-top:6px;">';
      drifted.forEach(dd => { html += '<div style="color:#f57c00;">⚠ ' + esc(dd.device_id) + ' — ' + esc(dd.status) + '</div>'; });
      html += '</div>';
    }
    card.innerHTML = html;
  }
};

// ── SVG Helper: Redundancy topology graph ─────────────────────────────────
function _renderRedundancyGraph(spofIds, bridgeSet) {
  const svg = document.getElementById('ni-redundancy-svg');
  if (!svg) return;
  const tid = document.getElementById('ni-topo-select').value;
  fetch(NC_BASE + '/api/topologies/' + tid).then(r => r.json()).then(topo => {
    const graph = typeof topo.graph_json === 'string' ? JSON.parse(topo.graph_json) : topo.graph_json;
    const nodes = graph?.nodes || [], edges = graph?.edges || [];
    const typeIcon = {router:'\u2295',switch:'\u2b21',firewall:'\ud83d\udee1',server:'\u25a3',wan_link:'\u2601',vpn_gateway:'\ud83d\udd12'};

    let minX=Infinity,maxX=-Infinity,minY=Infinity,maxY=-Infinity;
    nodes.forEach(n => { minX=Math.min(minX,n.x||0); maxX=Math.max(maxX,(n.x||0)+80); minY=Math.min(minY,n.y||0); maxY=Math.max(maxY,(n.y||0)+60); });
    const pad=50,svgW=900,svgH=400;
    const scale=Math.min((svgW-2*pad)/Math.max(maxX-minX,1),(svgH-2*pad)/Math.max(maxY-minY,1),2);
    function tx(x){return pad+((x||0)-minX)*scale+40;} function ty(y){return pad+((y||0)-minY)*scale+30;}
    const nodeMap = {}; nodes.forEach(n => { nodeMap[n.id] = n; });

    let s = '<defs><style>@keyframes spofPulse{0%,100%{r:26;opacity:.3}50%{r:32;opacity:.6}}.spof-ring{animation:spofPulse 1.5s ease-in-out infinite}</style></defs>';
    // Edges
    edges.forEach(e => {
      const src=nodeMap[e.source], dst=nodeMap[e.target]; if(!src||!dst) return;
      const x1=tx(src.x),y1=ty(src.y),x2=tx(dst.x),y2=ty(dst.y);
      const isBridge = bridgeSet.has(e.source+':'+e.target) || bridgeSet.has(e.target+':'+e.source);
      s += '<line x1="'+x1+'" y1="'+y1+'" x2="'+x2+'" y2="'+y2+'" stroke="'+(isBridge?'#f57c00':'#4a90d9')+'" stroke-width="'+(isBridge?3:2)+'" stroke-opacity="'+(isBridge?1:0.5)+'"'+(isBridge?' stroke-dasharray="8 4"':'')+'/>';
      if(isBridge){ s += '<text x="'+((x1+x2)/2)+'" y="'+((y1+y2)/2-6)+'" text-anchor="middle" font-size="9" fill="#f57c00" font-weight="700">BRIDGE</text>'; }
    });
    // Nodes
    nodes.forEach(n => {
      const cx=tx(n.x),cy=ty(n.y), isSPOF=spofIds.has(n.id);
      if(isSPOF){ s += '<circle cx="'+cx+'" cy="'+cy+'" r="28" fill="none" stroke="#e53935" stroke-width="2" class="spof-ring"/>'; }
      s += '<circle cx="'+cx+'" cy="'+cy+'" r="22" fill="'+(isSPOF?'rgba(229,57,53,0.2)':'rgba(74,144,217,0.15)')+'" stroke="'+(isSPOF?'#e53935':'#4a90d9')+'" stroke-width="2"/>';
      s += '<text x="'+cx+'" y="'+(cy+5)+'" text-anchor="middle" font-size="14">'+(typeIcon[n.type]||'\u25cf')+'</text>';
      s += '<text x="'+cx+'" y="'+(cy+38)+'" text-anchor="middle" font-size="10" fill="'+(isSPOF?'#e53935':'var(--text)')+'" font-weight="'+(isSPOF?'700':'600')+'">'+esc(n.label)+'</text>';
      if(isSPOF){ s += '<text x="'+cx+'" y="'+(cy-28)+'" text-anchor="middle" font-size="9" fill="#e53935" font-weight="700">SPOF</text>'; }
    });
    // Legend
    s += '<g transform="translate(10,10)"><rect width="110" height="50" rx="4" fill="var(--bg-card)" stroke="var(--border)" opacity="0.9"/>';
    s += '<circle cx="14" cy="16" r="5" fill="rgba(229,57,53,0.3)" stroke="#e53935" stroke-width="1.5"/><text x="24" y="20" font-size="9" fill="var(--text)">SPOF device</text>';
    s += '<line x1="8" y1="36" x2="24" y2="36" stroke="#f57c00" stroke-width="2" stroke-dasharray="4 2"/><text x="28" y="40" font-size="9" fill="var(--text)">Bridge edge</text>';
    s += '</g>';
    svg.innerHTML = s;
  }).catch(() => { svg.innerHTML = '<text x="20" y="30" fill="var(--text-dim)">Could not load topology</text>'; });
}

// ── SVG Helper: EOL Timeline ──────────────────────────────────────────────
function _renderEOLTimeline(timeline) {
  const svg = document.getElementById('ni-eol-svg');
  if (!svg || !timeline.length) return;
  const W=900, H=250, pad=60, barW=60;
  const maxDev = Math.max(...timeline.map(y => y.device_count||0), 1);
  const gap = Math.min((W-2*pad) / timeline.length, 120);
  let s = '';
  // Grid lines
  for (let i=0;i<=4;i++){const y=H-pad-(i/4)*(H-2*pad); s+='<line x1="'+pad+'" y1="'+y+'" x2="'+(W-20)+'" y2="'+y+'" stroke="var(--border)" stroke-width="0.5"/><text x="'+(pad-8)+'" y="'+(y+4)+'" text-anchor="end" font-size="9" fill="var(--text-dim)">'+Math.round(maxDev*i/4)+'</text>';}
  // Bars
  timeline.forEach((y, i) => {
    const x = pad + i * gap + gap/2;
    const barH = Math.max(((y.device_count||0)/maxDev)*(H-2*pad), 3);
    const baseY = H - pad;
    const hasDevices = (y.device_count||0) > 0;
    const color = hasDevices ? '#f57c00' : '#43a047';
    // Bar with rounded top
    s += '<rect x="'+(x-barW/2)+'" y="'+(baseY-barH)+'" width="'+barW+'" height="'+barH+'" rx="4" fill="'+color+'" fill-opacity="0.8"/>';
    // Glow effect for critical years
    if (hasDevices) { s += '<rect x="'+(x-barW/2)+'" y="'+(baseY-barH)+'" width="'+barW+'" height="'+barH+'" rx="4" fill="'+color+'" fill-opacity="0.2" class="ni-pulse"/>'; }
    // Count label
    s += '<text x="'+x+'" y="'+(baseY-barH-6)+'" text-anchor="middle" font-size="12" fill="'+color+'" font-weight="700">'+(y.device_count||0)+'</text>';
    // Year label
    s += '<text x="'+x+'" y="'+(baseY+16)+'" text-anchor="middle" font-size="11" fill="var(--text)" font-weight="600">'+(y.year||'')+'</text>';
    // Device names below
    const devs = y.devices || [];
    if (devs.length) {
      devs.slice(0,2).forEach((dd,j) => { s += '<text x="'+x+'" y="'+(baseY+28+j*11)+'" text-anchor="middle" font-size="8" fill="var(--text-dim)">'+esc(dd.label||dd.device_id||'')+'</text>'; });
      if (devs.length > 2) s += '<text x="'+x+'" y="'+(baseY+50)+'" text-anchor="middle" font-size="8" fill="var(--text-dim)">+' + (devs.length-2) + ' more</text>';
    }
  });
  // Axis
  s += '<line x1="'+pad+'" y1="'+(H-pad)+'" x2="'+(W-20)+'" y2="'+(H-pad)+'" stroke="var(--text-dim)" stroke-width="1"/>';
  s += '<text x="'+(W/2)+'" y="'+(H-8)+'" text-anchor="middle" font-size="11" fill="var(--text-dim)">Year</text>';
  svg.innerHTML = s;
}

// ── SVG Helper: Vendor Pie Chart ──────────────────────────────────────────
function _renderVendorPie(vendors, total) {
  const svg = document.getElementById('ni-vendor-svg');
  if (!svg || !vendors.length) { if(svg) svg.innerHTML = '<text x="100" y="100" text-anchor="middle" fill="var(--text-dim)" font-size="12">No vendor data</text>'; return; }
  const colors = ['#4a90d9','#43a047','#f57c00','#e53935','#7b1fa2','#00897b','#8d6e63','#5c6bc0','#29b6f6','#ff7043'];
  const cx=100, cy=100, r=80;
  let s = '', angle = 0;
  vendors.forEach((v, i) => {
    const pct = total ? (v.device_count||0)/total : 0;
    const sweep = pct * 2 * Math.PI;
    const x1 = cx + r * Math.cos(angle);
    const y1 = cy + r * Math.sin(angle);
    const x2 = cx + r * Math.cos(angle + sweep);
    const y2 = cy + r * Math.sin(angle + sweep);
    const large = sweep > Math.PI ? 1 : 0;
    if (pct > 0) {
      s += '<path d="M'+cx+' '+cy+' L'+x1+' '+y1+' A'+r+' '+r+' 0 '+large+' 1 '+x2+' '+y2+' Z" fill="'+colors[i%colors.length]+'" stroke="var(--bg-card)" stroke-width="2">';
      s += '<title>'+esc(v.vendor||'Unknown')+': '+(v.device_count||0)+' devices ('+Math.round(pct*100)+'%)</title></path>';
      // Label
      const midAngle = angle + sweep/2;
      const lx = cx + (r*0.6) * Math.cos(midAngle);
      const ly = cy + (r*0.6) * Math.sin(midAngle);
      if (pct > 0.08) { s += '<text x="'+lx+'" y="'+(ly+4)+'" text-anchor="middle" font-size="9" fill="#fff" font-weight="700">'+Math.round(pct*100)+'%</text>'; }
    }
    angle += sweep;
  });
  // Center hole (donut)
  s += '<circle cx="'+cx+'" cy="'+cy+'" r="40" fill="var(--bg-card)"/>';
  s += '<text x="'+cx+'" y="'+(cy-4)+'" text-anchor="middle" font-size="10" fill="var(--text-dim)">'+total+'</text>';
  s += '<text x="'+cx+'" y="'+(cy+10)+'" text-anchor="middle" font-size="9" fill="var(--text-dim)">devices</text>';
  svg.innerHTML = s;
}

// ── SVG Helper: Cost confidence interval ──────────────────────────────────
function _renderCostChart(pcts, mean) {
  const svg = document.getElementById('ni-cost-svg');
  if (!svg) return;
  const W=600, H=200, pad=50;
  const vals = [pcts.p10||0, pcts.p50||0, pcts.p80||0, pcts.p90||0];
  const maxVal = Math.max(...vals, mean, 1);
  function sx(v) { return pad + (v/maxVal)*(W-2*pad); }
  const cy = H/2;
  let s = '';
  // Confidence range band
  s += '<rect x="'+sx(vals[0])+'" y="'+(cy-30)+'" width="'+(sx(vals[3])-sx(vals[0]))+'" height="60" rx="6" fill="#1976d2" fill-opacity="0.1" stroke="#1976d2" stroke-width="1" stroke-dasharray="4 2"/>';
  s += '<rect x="'+sx(vals[1])+'" y="'+(cy-20)+'" width="'+(sx(vals[2])-sx(vals[1]))+'" height="40" rx="4" fill="#1976d2" fill-opacity="0.2"/>';
  // Point markers
  const labels = ['P10','P50','P80','P90'];
  const clrs = ['#43a047','#1976d2','#f57c00','#e53935'];
  vals.forEach((v, i) => {
    const x = sx(v);
    s += '<circle cx="'+x+'" cy="'+cy+'" r="8" fill="'+clrs[i]+'" stroke="#fff" stroke-width="2"/>';
    s += '<text x="'+x+'" y="'+(cy-36)+'" text-anchor="middle" font-size="10" fill="'+clrs[i]+'" font-weight="700">'+labels[i]+'</text>';
    s += '<text x="'+x+'" y="'+(cy+50)+'" text-anchor="middle" font-size="10" fill="var(--text)" font-weight="600">$'+Number(v).toLocaleString()+'</text>';
  });
  // Mean line
  if (mean) {
    const mx = sx(mean);
    s += '<line x1="'+mx+'" y1="'+(cy-25)+'" x2="'+mx+'" y2="'+(cy+25)+'" stroke="#fff" stroke-width="2" stroke-dasharray="3 2"/>';
    s += '<text x="'+mx+'" y="'+(cy-28)+'" text-anchor="middle" font-size="9" fill="var(--text-dim)">Mean</text>';
  }
  // Axis
  s += '<line x1="'+pad+'" y1="'+(H-20)+'" x2="'+(W-20)+'" y2="'+(H-20)+'" stroke="var(--text-dim)" stroke-width="0.5"/>';
  s += '<text x="'+(W/2)+'" y="'+(H-4)+'" text-anchor="middle" font-size="10" fill="var(--text-dim)">Total Replacement Cost</text>';
  svg.innerHTML = s;
}

// ── Capacity Simulation (rich visualization) ──────────────────────────────

function niCapacityRun() {
  const tid = document.getElementById('ni-topo-select').value;
  if (!tid) { alert('Select a topology first'); return; }
  const users = parseInt(document.getElementById('cap-users').value) || 250;
  const region = document.getElementById('cap-region').value || '';
  const selOpts = document.getElementById('cap-services').selectedOptions;
  const services = Array.from(selOpts).map(o => o.value);
  if (!services.length) services.push('general');

  document.getElementById('ni-capacity-stats').innerHTML = '<em>Running capacity simulation...</em>';
  document.getElementById('ni-capacity-result').style.display = 'none';

  fetch(NC_NI + '/capacity/' + tid, {
    method: 'POST', headers: {'Content-Type':'application/json'},
    body: JSON.stringify({user_count: users, region: region, services: services, description: 'Add ' + users + ' users in ' + region})
  }).then(r => r.json()).then(d => {
    if (d.error) { document.getElementById('ni-capacity-stats').innerHTML = '<span class="text-danger">' + esc(d.error) + '</span>'; return; }
    document.getElementById('ni-capacity-stats').style.display = 'none';
    document.getElementById('ni-capacity-result').style.display = 'block';
    _renderCapacityResult(d, tid);
  }).catch(e => { document.getElementById('ni-capacity-stats').innerHTML = '<span class="text-danger">' + e.message + '</span>'; });
}

function _renderCapacityResult(d, tid) {
  const bw = d.bandwidth_simulation || {};
  const summary = bw.summary || {};
  const links = bw.links || [];

  // Health badge
  const healthColors = {critical:'#e53935',warning:'#f57c00',ok:'#43a047'};
  const health = summary.overall_health || 'ok';
  const badge = document.getElementById('cap-health-badge');
  badge.innerHTML =
    '<div style="display:inline-block;padding:6px 16px;border-radius:20px;background:' + (healthColors[health]||'#666') + ';color:#fff;font-weight:700;font-size:14px;text-transform:uppercase;">' + esc(health) + '</div>' +
    '<span style="color:var(--text-dim);font-size:13px;">' + (d.demand?.total_sustained_mbps||0).toFixed(0) + ' Mbps sustained / ' + (d.demand?.total_peak_mbps||0).toFixed(0) + ' Mbps peak</span>' +
    '<span style="color:var(--text-dim);font-size:13px;">' + (summary.bottleneck_count||0) + ' saturated, ' + (summary.warning_count||0) + ' warning, ' + (summary.ok_count||0) + ' ok</span>';

  // Demand table
  const demandBody = document.getElementById('cap-demand-body');
  const sbd = d.demand?.service_breakdown || [];
  demandBody.innerHTML = sbd.map(s =>
    '<tr><td>' + esc(s.service) + '</td><td>' + s.concurrent_users + '</td><td>' + s.sustained_mbps + ' Mbps</td><td>' + s.peak_mbps + ' Mbps</td></tr>'
  ).join('') +
    '<tr style="font-weight:700;border-top:2px solid var(--border);"><td>Total</td><td>—</td><td>' + (d.demand?.total_sustained_mbps||0).toFixed(0) + ' Mbps</td><td>' + (d.demand?.total_peak_mbps||0).toFixed(0) + ' Mbps</td></tr>';

  // Bottlenecks
  const bnDiv = document.getElementById('cap-bottlenecks');
  const bottlenecks = bw.bottlenecks || [];
  if (!bottlenecks.length) {
    bnDiv.innerHTML = '<div style="color:#43a047;">No bottlenecks — network can absorb the demand.</div>';
  } else {
    bnDiv.innerHTML = bottlenecks.map(b =>
      '<div style="padding:4px 8px;margin:4px 0;border-left:3px solid #e53935;background:rgba(229,57,53,0.1);border-radius:0 4px 4px 0;">' +
      '<strong>' + esc(b.source_label||'') + ' ↔ ' + esc(b.target_label||'') + '</strong><br>' +
      '<span style="color:#e53935;">' + (b.current_util_pct||0) + '% avg / ' + (b.peak_util_pct||0) + '% peak</span> on ' + esc(b.link_bw_label||b.label||'') +
      '</div>'
    ).join('');
  }

  // Upgrades
  const upDiv = document.getElementById('cap-upgrades');
  const upgrades = bw.upgrades_needed || [];
  if (!upgrades.length) {
    upDiv.innerHTML = '<div style="color:#43a047;">No upgrades needed.</div>';
  } else {
    upDiv.innerHTML = upgrades.map(u =>
      '<div style="padding:3px 0;"><span style="color:#f57c00;">↑</span> ' +
      esc(u.link||'') + ': ' + esc(u.current||'') + ' → <strong>' + esc(u.upgrade_to||'') + '</strong>' +
      (u.lag_alternative ? ' <span style="color:var(--text-dim);">or ' + esc(u.lag_alternative) + '</span>' : '') +
      '</div>'
    ).join('');
  }

  // Network Graph SVG
  _renderCapacityGraph(links, tid);

  // 3-Year Projections
  _renderProjections(links);
}

function _renderCapacityGraph(links, tid) {
  const svg = document.getElementById('cap-graph-svg');
  // Fetch topology to get node positions
  fetch(NC_BASE + '/api/topologies/' + tid).then(r => r.json()).then(topo => {
    const graph = typeof topo.graph_json === 'string' ? JSON.parse(topo.graph_json) : topo.graph_json;
    const nodes = graph?.nodes || [];
    const edges = graph?.edges || [];

    // Build link status map
    const linkStatus = {};
    links.forEach(l => {
      linkStatus[l.edge_id] = {status: l.status, util: l.current_util_pct, peak: l.peak_util_pct, bw: l.link_bw_label, label: l.label};
    });

    // Calculate bounding box and scale
    let minX=Infinity, maxX=-Infinity, minY=Infinity, maxY=-Infinity;
    nodes.forEach(n => { minX=Math.min(minX,n.x||0); maxX=Math.max(maxX,(n.x||0)+80); minY=Math.min(minY,n.y||0); maxY=Math.max(maxY,(n.y||0)+60); });
    const padX=60, padY=50, svgW=900, svgH=500;
    const scaleX = (svgW-2*padX)/Math.max(maxX-minX,1);
    const scaleY = (svgH-2*padY)/Math.max(maxY-minY,1);
    const scale = Math.min(scaleX, scaleY, 2);
    function tx(x) { return padX + ((x||0)-minX)*scale + 40; }
    function ty(y) { return padY + ((y||0)-minY)*scale + 30; }

    // Node map
    const nodeMap = {};
    nodes.forEach(n => { nodeMap[n.id] = n; });

    // Device type icons
    const typeIcon = {router:'⊕',switch:'⬡',firewall:'🛡',server:'▣',wan_link:'☁',vpn_gateway:'🔒',load_balancer:'⚖',access_point:'📡',cloud_service:'☁'};
    const typeColor = {router:'#4a90d9',switch:'#43a047',firewall:'#e53935',server:'#7b1fa2',wan_link:'#ff9800',vpn_gateway:'#00897b',load_balancer:'#5c6bc0',access_point:'#8d6e63',cloud_service:'#29b6f6'};

    // Status colors
    const statusColor = {ok:'#43a047',warning:'#f57c00',saturated:'#e53935',critical:'#e53935'};

    let svgHTML = '<defs>';
    // Animated dash pattern for traffic flow
    svgHTML += '<style>';
    svgHTML += '@keyframes flowRight { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }';
    svgHTML += '.link-flow { animation: flowRight 1s linear infinite; }';
    svgHTML += '.link-flow-fast { animation: flowRight 0.4s linear infinite; }';
    svgHTML += '.link-pulse { animation: pulse 2s ease-in-out infinite; }';
    svgHTML += '@keyframes pulse { 0%,100% { opacity:0.6; } 50% { opacity:1; } }';
    svgHTML += '</style>';
    svgHTML += '</defs>';

    // Draw edges
    edges.forEach(e => {
      const src = nodeMap[e.source]; const dst = nodeMap[e.target];
      if (!src || !dst) return;
      const x1=tx(src.x), y1=ty(src.y), x2=tx(dst.x), y2=ty(dst.y);
      const ls = linkStatus[e.id] || {status:'ok',util:0,peak:0};
      const color = statusColor[ls.status] || '#666';
      const width = ls.status === 'saturated' ? 4 : ls.status === 'warning' ? 3 : 2;
      const animClass = ls.status === 'saturated' ? 'link-flow-fast' : ls.status === 'warning' ? 'link-flow' : '';

      // Base line
      svgHTML += '<line x1="'+x1+'" y1="'+y1+'" x2="'+x2+'" y2="'+y2+'" stroke="'+color+'" stroke-width="'+width+'" stroke-opacity="0.3"/>';
      // Animated traffic flow
      if (animClass) {
        svgHTML += '<line x1="'+x1+'" y1="'+y1+'" x2="'+x2+'" y2="'+y2+'" stroke="'+color+'" stroke-width="'+width+'" stroke-dasharray="8 16" class="'+animClass+'"/>';
      }
      // Utilization label on link midpoint
      const mx=(x1+x2)/2, my=(y1+y2)/2;
      svgHTML += '<rect x="'+(mx-28)+'" y="'+(my-9)+'" width="56" height="18" rx="3" fill="'+color+'" fill-opacity="0.9"/>';
      svgHTML += '<text x="'+mx+'" y="'+(my+4)+'" text-anchor="middle" font-size="10" fill="#fff" font-weight="600">' + ls.util + '%/' + ls.peak + '%</text>';
    });

    // Draw nodes
    nodes.forEach(n => {
      const cx = tx(n.x); const cy = ty(n.y);
      const color = typeColor[n.type] || '#999';
      const icon = typeIcon[n.type] || '●';
      svgHTML += '<circle cx="'+cx+'" cy="'+cy+'" r="22" fill="'+color+'" fill-opacity="0.15" stroke="'+color+'" stroke-width="2"/>';
      svgHTML += '<text x="'+cx+'" y="'+(cy+5)+'" text-anchor="middle" font-size="16">'+icon+'</text>';
      svgHTML += '<text x="'+cx+'" y="'+(cy+38)+'" text-anchor="middle" font-size="10" fill="var(--text)" font-weight="600">'+esc(n.label)+'</text>';
    });

    // Legend
    svgHTML += '<g transform="translate(10,10)">';
    svgHTML += '<rect width="140" height="70" rx="4" fill="var(--bg-card)" stroke="var(--border)" opacity="0.9"/>';
    svgHTML += '<circle cx="14" cy="14" r="5" fill="#43a047"/><text x="24" y="18" font-size="10" fill="var(--text)">OK (&lt;60%)</text>';
    svgHTML += '<circle cx="14" cy="32" r="5" fill="#f57c00"/><text x="24" y="36" font-size="10" fill="var(--text)">Warning (60-80%)</text>';
    svgHTML += '<circle cx="14" cy="50" r="5" fill="#e53935"/><text x="24" y="54" font-size="10" fill="var(--text)">Saturated (&gt;80%)</text>';
    svgHTML += '</g>';

    svg.innerHTML = svgHTML;
  }).catch(() => { svg.innerHTML = '<text x="20" y="30" fill="var(--text-dim)">Could not load topology graph</text>'; });
}

function _renderProjections(links) {
  const container = document.getElementById('cap-projections');
  const statusColor = {ok:'#43a047',warning:'#f57c00',saturated:'#e53935',critical:'#e53935'};
  // Show top 5 most loaded links
  const sorted = [...links].sort((a,b) => (b.peak_util_pct||0) - (a.peak_util_pct||0));
  const top = sorted.slice(0, 6);

  container.innerHTML = top.map(l => {
    const projs = l.projections || [];
    const color = statusColor[l.status] || '#666';
    // Mini bar chart for year 0 (now) + 3 years
    const bars = [{label:'Now', val:l.peak_util_pct||0}].concat(projs.map(p => ({label:'Y'+p.year, val:p.peak_util_pct||0})));
    const barHTML = bars.map(b => {
      const h = Math.min(b.val, 100);
      const barColor = h >= 80 ? '#e53935' : h >= 60 ? '#f57c00' : '#43a047';
      return '<div style="text-align:center;flex:1;">' +
        '<div style="height:60px;display:flex;flex-direction:column;justify-content:flex-end;">' +
        '<div style="background:'+barColor+';height:'+h*0.6+'px;border-radius:2px 2px 0 0;min-height:2px;"></div></div>' +
        '<div style="font-size:9px;color:var(--text-dim);">'+b.label+'</div>' +
        '<div style="font-size:9px;font-weight:600;color:'+barColor+';">'+b.val.toFixed(0)+'%</div></div>';
    }).join('');

    return '<div style="flex:0 0 140px;border:1px solid var(--border);border-radius:6px;padding:8px;background:var(--bg-card);">' +
      '<div style="font-size:11px;font-weight:600;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" title="' + esc(l.source_label+' ↔ '+l.target_label) + '">' +
      esc((l.source_label||'').replace(/^(.*?)-/,'')) + ' ↔ ' + esc((l.target_label||'').replace(/^(.*?)-/,'')) + '</div>' +
      '<div style="font-size:10px;color:'+color+';margin-bottom:4px;">' + esc(l.link_bw_label||l.label||'') + ' — ' + esc(l.status) + '</div>' +
      '<div style="display:flex;gap:2px;align-items:flex-end;">' + barHTML + '</div>' +
      (l.recommendation && l.recommendation !== 'none' ? '<div style="font-size:9px;color:#f57c00;margin-top:4px;">↑ '+esc(l.upgrade_to_label||l.recommendation)+'</div>' : '') +
      '</div>';
  }).join('');
}

// Upload
document.getElementById('ni-upload-form').addEventListener('submit', async function(e) {
  e.preventDefault();
  const fd = new FormData(this);
  fd.append('project_id', 'default');
  try {
    const r = await fetch(NC_NI + '/ingest', {method:'POST', body: fd});
    const d = await r.json();
    if (d.error) { alert('Error: ' + d.error); return; }
    alert('Imported: ' + d.node_count + ' devices, ' + d.edge_count + ' links');
    document.getElementById('ni-upload-modal').style.display = 'none';
    location.reload();
  } catch(e) { alert('Upload failed: ' + e.message); }
});

niLoadTopos();
</script>
{% endblock %}