{% extends "base.html" %}
{% block title %}Peering Management Canvas — ICDEV™{% endblock %}
{% block extra_head %}
<style>
.pmc-badge { display:inline-block; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:600; }
.badge-active { background:#dcfce7; color:#166534; }
.badge-evaluation { background:#e0f2fe; color:#075985; }
.badge-requested { background:#fef9c3; color:#854d0e; }
.pmc-stat-card { background:#1e293b; border:1px solid #334155; border-radius:8px; padding:16px; }
.pmc-stat-value { font-size:2rem; font-weight:700; color:#f8fafc; }
.pmc-stat-label { font-size:0.75rem; color:#94a3b8; text-transform:uppercase; letter-spacing:.05em; }
.rpki-bar { height:8px; border-radius:4px; overflow:hidden; background:#1e293b; display:flex; }
.rpki-valid { background:#22c55e; }
.rpki-invalid { background:#ef4444; }
.rpki-notfound { background:#f59e0b; }
.rpki-unknown { background:#6b7280; }
</style>
{% endblock %}
{% block content %}
<div class="container-fluid px-4 py-3">
  <div class="d-flex align-items-center justify-content-between mb-3">
    <h4 class="mb-0" style="color:#38bdf8;">
      <i class="bi bi-diagram-3-fill me-2"></i>Peering Management Canvas
    </h4>
    <span class="badge bg-secondary">CUI // SP-CTI</span>
  </div>

  <!-- Stat cards -->
  <div class="row g-3 mb-4">
    <div class="col-6 col-md-3">
      <div class="pmc-stat-card text-center">
        <div class="pmc-stat-value" id="stat-active-peers">–</div>
        <div class="pmc-stat-label">Active Peers</div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="pmc-stat-card text-center">
        <div class="pmc-stat-value" id="stat-total-ix">–</div>
        <div class="pmc-stat-label">IX Memberships</div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="pmc-stat-card text-center">
        <div class="pmc-stat-value" id="stat-rpki-coverage" style="color:#22c55e;">–</div>
        <div class="pmc-stat-label">RPKI Coverage</div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="pmc-stat-card text-center">
        <div class="pmc-stat-value" id="stat-pending-req" style="color:#f59e0b;">–</div>
        <div class="pmc-stat-label">Pending Requests</div>
      </div>
    </div>
  </div>

  <div class="row g-3 mb-4">
    <!-- RPKI Summary -->
    <div class="col-md-6">
      <div class="card bg-dark border-secondary">
        <div class="card-header border-secondary d-flex justify-content-between">
          <span>RPKI Coverage</span>
          <a href="/pmc/rpki" class="btn btn-sm btn-outline-info">Details</a>
        </div>
        <div class="card-body">
          <div class="rpki-bar mb-2" id="rpki-bar"></div>
          <div class="row text-center" id="rpki-legend" style="font-size:12px;"></div>
        </div>
      </div>
    </div>
    <!-- Top Peers -->
    <div class="col-md-6">
      <div class="card bg-dark border-secondary">
        <div class="card-header border-secondary d-flex justify-content-between">
          <span>Top Peers by Traffic Ratio</span>
          <a href="/pmc/peers" class="btn btn-sm btn-outline-info">All Peers</a>
        </div>
        <div class="card-body p-0">
          <table class="table table-dark table-sm mb-0">
            <thead><tr><th>ASN</th><th>Org</th><th>Ratio</th></tr></thead>
            <tbody id="top-peers-table"></tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <!-- IQE Widget -->
  {% include 'includes/iqe_query_widget.html' %}
</div>

<script>
const IQE_CANVAS = 'pmc';
const IQE_COLLECTION = 'pmc.peers';

fetch('/api/pmc/overview')
  .then(r => r.json())
  .then(d => {
    document.getElementById('stat-active-peers').textContent = d.peers?.active ?? '0';
    document.getElementById('stat-total-ix').textContent = d.ix?.total ?? '0';
    document.getElementById('stat-rpki-coverage').textContent = (d.rpki?.coverage_pct ?? 0) + '%';
    document.getElementById('stat-pending-req').textContent = d.requests?.pending ?? '0';

    // RPKI bar
    const rpki = d.rpki || {};
    const total = rpki.total_prefixes || 1;
    const bar = document.getElementById('rpki-bar');
    bar.innerHTML = `
      <div class="rpki-valid" style="width:${(rpki.valid||0)/total*100}%"></div>
      <div class="rpki-invalid" style="width:${(rpki.invalid||0)/total*100}%"></div>
      <div class="rpki-notfound" style="width:${(rpki.not_found||0)/total*100}%"></div>
      <div class="rpki-unknown" style="flex:1"></div>`;
    document.getElementById('rpki-legend').innerHTML = `
      <div class="col-3"><span style="color:#22c55e">●</span> Valid: ${rpki.valid||0}</div>
      <div class="col-3"><span style="color:#ef4444">●</span> Invalid: ${rpki.invalid||0}</div>
      <div class="col-3"><span style="color:#f59e0b">●</span> Not Found: ${rpki.not_found||0}</div>
      <div class="col-3"><span style="color:#6b7280">●</span> Unknown: ${rpki.unknown||0}</div>`;

    // Top peers
    const tbody = document.getElementById('top-peers-table');
    (d.top_peers || []).forEach(p => {
      const tr = document.createElement('tr');
      tr.innerHTML = `<td>AS${p.asn}</td><td>${p.org_name||'–'}</td><td>${(p.traffic_ratio||0).toFixed(2)}x</td>`;
      tbody.appendChild(tr);
    });
  })
  .catch(() => {});
</script>
{% endblock %}