{% extends "base.html" %}
{% block title %}Topology — Ops Hub{% endblock %}
{% block extra_css %}
<style>
.ohc-page-header{background:linear-gradient(135deg,#0f172a,#1e3a5f);padding:22px 28px;border-radius:10px;margin-bottom:24px;}
.ohc-page-header h1{margin:0;font-size:1.4rem;font-weight:700;color:#e0f2fe;}
.ohc-page-header p{margin:4px 0 0;color:#7dd3fc;font-size:.85rem;}
.stat-card{background:#1e293b;border:1px solid #334155;border-radius:10px;padding:18px 22px;text-align:center;}
.stat-card .val{font-size:1.8rem;font-weight:700;color:#e0e7ff;}
.stat-card .lbl{font-size:.75rem;color:#64748b;margin-top:2px;}
.section-card{background:#1e293b;border:1px solid #334155;border-radius:10px;padding:20px 24px;margin-bottom:16px;}
.section-card h4{margin:0 0 14px;font-size:.95rem;color:#e2e8f0;}
#topology-graph{background:#0a0f1a;border:1px solid #1e293b;border-radius:8px;width:100%;height:420px;}
.node-legend{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px;}
.legend-item{display:flex;align-items:center;gap:6px;font-size:.78rem;color:#94a3b8;}
.legend-dot{width:10px;height:10px;border-radius:50%;}
.spof-row{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#450a0a;border:1px solid #7f1d1d;border-radius:6px;margin-bottom:6px;font-size:.82rem;}
.node-row{display:flex;align-items:center;gap:10px;padding:7px 10px;background:#0f172a;border-radius:6px;margin-bottom:4px;font-size:.8rem;}
.back-link{color:#7dd3fc;text-decoration:none;font-size:.85rem;}
</style>
{% endblock %}
{% block content %}
<a class="back-link" href="/ops">← Ops Hub</a>
<div class="ohc-page-header mt-2">
  <h1>🕸️ Topology</h1>
  <p>Agent Graph · SPOF Analysis · Dependency Map — {{ classification }}</p>
</div>

{% set topo = data.topology %}
{% set nodes = topo.get('nodes', []) if topo else [] %}
{% set edges = topo.get('edges', []) if topo else [] %}
{% set spofs = topo.get('spof_nodes', []) if topo else [] %}

<!-- Stats Row -->
<div class="row g-3 mb-4">
  <div class="col-6 col-md-3"><div class="stat-card">
    <div class="val">{{ nodes|length }}</div>
    <div class="lbl">Nodes</div>
  </div></div>
  <div class="col-6 col-md-3"><div class="stat-card">
    <div class="val">{{ edges|length }}</div>
    <div class="lbl">Edges</div>
  </div></div>
  <div class="col-6 col-md-3"><div class="stat-card">
    <div class="val" style="color:{{ '#ef4444' if spofs|length > 0 else '#22c55e' }}">{{ spofs|length }}</div>
    <div class="lbl">SPOFs</div>
  </div></div>
  <div class="col-6 col-md-3"><div class="stat-card">
    <div class="val">{{ topo.get('tiers', {})|length if topo else '—' }}</div>
    <div class="lbl">Tiers</div>
  </div></div>
</div>

<!-- SPOF Alerts -->
{% if spofs %}
<div class="section-card" style="border-color:#7f1d1d;">
  <h4 style="color:#fca5a5;">⚠️ Single Points of Failure</h4>
  {% for spof in spofs %}
  <div class="spof-row">
    <span style="color:#fca5a5;font-weight:600;">{{ spof.get('name', spof.get('id', '?')) }}</span>
    <span style="color:#94a3b8;">{{ spof.get('type', '') }}</span>
    {% if spof.get('dependents') %}
    <span style="color:#64748b;font-size:.75rem;">{{ spof.dependents|length }} dependents</span>
    {% endif %}
    {% if spof.get('tier') %}<span style="color:#64748b;font-size:.75rem;">Tier {{ spof.tier }}</span>{% endif %}
  </div>
  {% endfor %}
</div>
{% endif %}

<!-- Graph Visualization -->
<div class="section-card">
  <h4>Agent Dependency Graph</h4>
  <div class="node-legend">
    <div class="legend-item"><div class="legend-dot" style="background:#22c55e;"></div>Core Agent</div>
    <div class="legend-item"><div class="legend-dot" style="background:#38bdf8;"></div>Domain Agent</div>
    <div class="legend-item"><div class="legend-dot" style="background:#a78bfa;"></div>Support Agent</div>
    <div class="legend-item"><div class="legend-dot" style="background:#ef4444;"></div>SPOF</div>
    <div class="legend-item"><div class="legend-dot" style="background:#64748b;"></div>Unknown</div>
  </div>
  <canvas id="topology-graph"></canvas>
</div>

<!-- Node List -->
<div class="section-card">
  <h4>Nodes</h4>
  {% if nodes %}
    {% for node in nodes[:20] %}
    {% set is_spof = node.get('id') in (spofs | map(attribute='id') | list) %}
    <div class="node-row" style="{{ 'background:#1a0000;border:1px solid #450a0a;' if is_spof else '' }}">
      <div style="width:8px;height:8px;border-radius:50%;background:{{ '#ef4444' if is_spof else ('#22c55e' if node.get('tier') == 1 else '#38bdf8' if node.get('tier') == 2 else '#a78bfa') }};flex-shrink:0;"></div>
      <span style="color:#e2e8f0;flex:1;">{{ node.get('name', node.get('id','?')) }}</span>
      {% if node.get('tier') %}<span style="color:#64748b;font-size:.75rem;">T{{ node.tier }}</span>{% endif %}
      {% if node.get('type') %}<span style="color:#475569;font-size:.72rem;">{{ node.type }}</span>{% endif %}
      {% if is_spof %}<span style="color:#fca5a5;font-size:.72rem;font-weight:600;">SPOF</span>{% endif %}
    </div>
    {% endfor %}
    {% if nodes|length > 20 %}
    <p class="text-muted small mt-2 mb-0">+ {{ nodes|length - 20 }} more nodes</p>
    {% endif %}
  {% else %}
    <p class="text-muted small mb-0">No topology data available.</p>
  {% endif %}
  <a href="/api/ops/topology" class="small text-muted mt-2 d-block">View full JSON →</a>
</div>

{% include "includes/iqe_query_widget.html" %}
{% endblock %}
{% block extra_js %}
<script>
(function(){
  const canvas = document.getElementById('topology-graph');
  const ctx = canvas.getContext('2d');
  const nodes = {{ (topo.get('nodes', []) if topo else []) | tojson }};
  const edges = {{ (topo.get('edges', []) if topo else []) | tojson }};
  const spofIds = new Set({{ (spofs | map(attribute='id') | list) | tojson }});

  function resizeCanvas() {
    canvas.width = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight;
  }
  resizeCanvas();

  if (nodes.length === 0) {
    ctx.fillStyle = '#334155';
    ctx.font = '14px sans-serif';
    ctx.textAlign = 'center';
    ctx.fillText('No topology data', canvas.width/2, canvas.height/2);
    return;
  }

  // Simple force-directed layout approximation
  const W = canvas.width, H = canvas.height;
  const positions = {};
  const n = nodes.length;
  nodes.forEach((node, i) => {
    const angle = (2 * Math.PI * i) / n;
    const r = Math.min(W, H) * 0.35;
    positions[node.id] = {
      x: W/2 + r * Math.cos(angle),
      y: H/2 + r * Math.sin(angle)
    };
  });

  function draw() {
    ctx.clearRect(0, 0, W, H);

    // Draw edges
    ctx.strokeStyle = '#1e293b';
    ctx.lineWidth = 1;
    edges.forEach(edge => {
      const src = positions[edge.source || edge.from];
      const tgt = positions[edge.target || edge.to];
      if (!src || !tgt) return;
      ctx.beginPath();
      ctx.moveTo(src.x, src.y);
      ctx.lineTo(tgt.x, tgt.y);
      ctx.stroke();
    });

    // Draw nodes
    nodes.forEach(node => {
      const pos = positions[node.id];
      if (!pos) return;
      const isSPOF = spofIds.has(node.id);
      const tier = node.tier || 3;
      const color = isSPOF ? '#ef4444' : tier === 1 ? '#22c55e' : tier === 2 ? '#38bdf8' : '#a78bfa';
      const r = isSPOF ? 10 : 7;

      ctx.beginPath();
      ctx.arc(pos.x, pos.y, r, 0, 2 * Math.PI);
      ctx.fillStyle = color + '33';
      ctx.fill();
      ctx.strokeStyle = color;
      ctx.lineWidth = isSPOF ? 2 : 1.5;
      ctx.stroke();

      ctx.fillStyle = '#e2e8f0';
      ctx.font = '10px sans-serif';
      ctx.textAlign = 'center';
      const label = (node.name || node.id || '').substring(0, 14);
      ctx.fillText(label, pos.x, pos.y + r + 12);
    });
  }
  draw();
  window.addEventListener('resize', () => { resizeCanvas(); draw(); });
})();
</script>
{% endblock %}