{% extends "network/base.html" %}
{% block title %}Topology Diff — Network Design Canvas{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">Topology Diff</h1>
    <p class="page-subtitle">Compare two topologies side-by-side</p>
  </div>
</div>

<div class="diff-controls" style="display:flex;gap:12px;margin-bottom:20px;align-items:flex-end;">
  <label style="flex:1;">Topology A
    <select id="topo-a" style="width:100%;background:var(--bg3);color:var(--text);border:1px solid var(--border);padding:6px;border-radius:4px;font-size:13px;">
      {% for t in topologies %}<option value="{{ t.id }}">{{ t.name }}{% if t.project_name %} ({{ t.project_name }}){% endif %}</option>{% endfor %}
    </select>
  </label>
  <label style="flex:1;">Topology B
    <select id="topo-b" style="width:100%;background:var(--bg3);color:var(--text);border:1px solid var(--border);padding:6px;border-radius:4px;font-size:13px;">
      {% for t in topologies %}<option value="{{ t.id }}" {% if loop.index == 2 %}selected{% endif %}>{{ t.name }}{% if t.project_name %} ({{ t.project_name }}){% endif %}</option>{% endfor %}
    </select>
  </label>
  <button class="btn btn-primary" onclick="runDiff()">Compare</button>
</div>

<div id="diff-results" style="display:none;">
  <div class="stats-bar" id="diff-stats"></div>
  <div class="dashboard-grid">
    <section class="panel panel-wide" id="diff-nodes-panel">
      <div class="panel-header"><h2 class="panel-title">Node Differences</h2></div>
      <div id="diff-nodes" style="padding:12px;"></div>
    </section>
    <div class="panel-stack">
      <section class="panel" id="diff-types-panel">
        <div class="panel-header"><h2 class="panel-title">Type Distribution</h2></div>
        <div id="diff-types" style="padding:12px;"></div>
      </section>
    </div>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>
async function runDiff() {
  const a = document.getElementById('topo-a').value;
  const b = document.getElementById('topo-b').value;
  if (a === b) { alert('Select two different topologies'); return; }
  const r = await fetch(NC_BASE + '/api/topology-diff', {
    method: 'POST', headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({topology_a: a, topology_b: b})
  });
  const d = await r.json();
  if (d.error) { alert(d.error); return; }
  document.getElementById('diff-results').style.display = 'block';

  document.getElementById('diff-stats').innerHTML = `
    <div class="stat-card"><div class="stat-value">${d.similarity_pct}%</div><div class="stat-label">Similarity</div></div>
    <div class="stat-card"><div class="stat-value">${d.topology_a.nodes}</div><div class="stat-label">${d.topology_a.name} Nodes</div></div>
    <div class="stat-card"><div class="stat-value">${d.topology_b.nodes}</div><div class="stat-label">${d.topology_b.name} Nodes</div></div>
    <div class="stat-card"><div class="stat-value">${d.nodes_common}</div><div class="stat-label">Common Nodes</div></div>
    <div class="stat-card"><div class="stat-value">${d.edges_common}</div><div class="stat-label">Common Edges</div></div>
  `;

  let nodesHtml = '<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">';
  nodesHtml += `<div><h4 style="color:var(--danger);margin-bottom:8px;">Only in ${d.topology_a.name} (${d.nodes_only_a.length})</h4>`;
  nodesHtml += d.nodes_only_a.map(n => `<div class="diff-node diff-removed">${n.label} <span style="color:var(--text-dim);font-size:10px;">${n.type}</span></div>`).join('') || '<div style="color:var(--text-dim);font-size:12px;">None</div>';
  nodesHtml += '</div>';
  nodesHtml += `<div><h4 style="color:var(--success);margin-bottom:8px;">Only in ${d.topology_b.name} (${d.nodes_only_b.length})</h4>`;
  nodesHtml += d.nodes_only_b.map(n => `<div class="diff-node diff-added">${n.label} <span style="color:var(--text-dim);font-size:10px;">${n.type}</span></div>`).join('') || '<div style="color:var(--text-dim);font-size:12px;">None</div>';
  nodesHtml += '</div></div>';
  document.getElementById('diff-nodes').innerHTML = nodesHtml;

  // Type comparison
  const allTypes = new Set([...Object.keys(d.topology_a.types || {}), ...Object.keys(d.topology_b.types || {})]);
  let typesHtml = '<table class="data-table"><thead><tr><th>Type</th><th>' + d.topology_a.name + '</th><th>' + d.topology_b.name + '</th><th>Delta</th></tr></thead><tbody>';
  [...allTypes].sort().forEach(t => {
    const a = (d.topology_a.types || {})[t] || 0;
    const b = (d.topology_b.types || {})[t] || 0;
    const delta = b - a;
    typesHtml += `<tr><td>${t}</td><td>${a}</td><td>${b}</td><td class="${delta > 0 ? 'text-success' : delta < 0 ? 'text-danger' : ''}">${delta > 0 ? '+' : ''}${delta}</td></tr>`;
  });
  typesHtml += '</tbody></table>';
  document.getElementById('diff-types').innerHTML = typesHtml;
}
</script>
{% endblock %}