{% extends "base.html" %}
{% block title %}Network map{% endblock %}
{% block content %}
<h1>Network map</h1>

<div class="stats-strip">
  <div class="stat"><span class="n" id="stat-agents">{{ graph.stats.agents }}</span><span class="label">agents online</span></div>
  <div class="stat"><span class="n" id="stat-tasks">{{ graph.stats.recent_tasks }}</span><span class="label">recent tasks</span></div>
  <div class="stat" id="stat-denied-card"><span class="n" id="stat-denied">{{ graph.stats.denied_recent }}</span><span class="label">denied (recent)</span></div>
  <div class="stat"><span class="n" id="stat-approvals">{{ graph.stats.pending_approvals }}</span><span class="label">pending approvals</span></div>
</div>

<svg id="graph"></svg>
<p class="muted">Node color = department. Edge thickness = recent call volume between two agents; hover an edge or node for detail. Updates every few seconds.</p>

<table>
  <tr><th>Agent</th><th>Department</th><th>Framework</th><th>Endpoint</th><th>Skills</th></tr>
  {% for agent in agents %}
  <tr>
    <td>{{ agent.name }}</td>
    <td>{{ agent.department }}</td>
    <td>{{ agent.framework }}</td>
    <td>{{ agent.endpoint }}</td>
    <td>{% for s in agent.skills %}{{ s.skill_id }}{% if not loop.last %}, {% endif %}{% endfor %}</td>
  </tr>
  {% else %}
  <tr><td colspan="5" class="muted">No agents registered.</td></tr>
  {% endfor %}
</table>
{% endblock %}

{% block scripts %}
<script>
  function deptColor(name) {
    let hash = 0;
    for (const ch of String(name)) hash = (hash * 31 + ch.charCodeAt(0)) >>> 0;
    return `hsl(${hash % 360}, 60%, 55%)`;
  }

  function edgeClass(state) {
    if (state === 'FAILED' || state === 'TIMED_OUT') return 'edge hot';
    if (state === 'WAITING_APPROVAL' || state === 'ROUTING' || state === 'RUNNING') return 'edge warm';
    return 'edge';
  }

  function renderGraph(data) {
    const svg = document.getElementById('graph');
    const w = svg.clientWidth || 800, h = svg.clientHeight || 360;
    const cx = w / 2, cy = h / 2;
    const r = Math.max(60, Math.min(w, h) / 2 - 70);
    const nodes = data.nodes || [];
    const n = nodes.length;
    const pos = {};
    nodes.forEach((node, i) => {
      const angle = (2 * Math.PI * i) / Math.max(n, 1) - Math.PI / 2;
      pos[node.name] = {x: cx + r * Math.cos(angle), y: cy + r * Math.sin(angle)};
    });

    let out = '<defs><marker id="arrow" viewBox="0 0 10 10" refX="22" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse"><path d="M0,0 L10,5 L0,10 z" fill="#8886"/></marker></defs>';

    const maxCount = Math.max(1, ...(data.edges || []).map(e => e.count));
    for (const edge of (data.edges || [])) {
      const a = pos[edge.source], b = pos[edge.target];
      if (!a || !b) continue;
      const weight = (1 + 3 * (edge.count / maxCount)).toFixed(1);
      out += `<line class="${edgeClass(edge.last_state)}" x1="${a.x.toFixed(1)}" y1="${a.y.toFixed(1)}" x2="${b.x.toFixed(1)}" y2="${b.y.toFixed(1)}" stroke-width="${weight}" marker-end="url(#arrow)"><title>${escapeHtml(edge.source)} → ${escapeHtml(edge.target)}: ${edge.count} recent call(s), last state ${escapeHtml(edge.last_state)}</title></line>`;
    }

    for (const node of nodes) {
      const p = pos[node.name];
      out += `<g class="node" transform="translate(${p.x.toFixed(1)},${p.y.toFixed(1)})">
        <circle r="16" fill="${deptColor(node.department)}" stroke="#fff"><title>${escapeHtml(node.name)} — ${escapeHtml(node.department)} / ${escapeHtml(node.framework)}\nSkills: ${escapeHtml((node.skills || []).join(', ') || 'none')}</title></circle>
        <text text-anchor="middle" dy="30">${escapeHtml(node.name)}</text>
      </g>`;
    }

    svg.innerHTML = out;
  }

  function renderStats(stats) {
    document.getElementById('stat-agents').textContent = stats.agents;
    document.getElementById('stat-tasks').textContent = stats.recent_tasks;
    document.getElementById('stat-denied').textContent = stats.denied_recent;
    document.getElementById('stat-approvals').textContent = stats.pending_approvals;
    document.getElementById('stat-denied-card').classList.toggle('warn', stats.denied_recent > 0);
  }

  conetPoll('/dashboard/api/network', data => { renderGraph(data); renderStats(data.stats); }, 4000);
</script>
{% endblock %}