{% extends "network/base.html" %}
{% block title %}Peering Agreements — Network Design Canvas{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">Peering Agreements</h1>
    <p class="page-subtitle">Track peering lifecycle from evaluation to operational — BGP, static, OSPF, L2</p>
  </div>
  <div class="page-actions">
    <button class="btn btn-primary" onclick="document.getElementById('peer-modal').style.display='flex'">+ New Agreement</button>
    <button class="btn btn-secondary" onclick="document.getElementById('eval-modal').style.display='flex'">+ Evaluate Peer</button>
  </div>
</div>
<div id="peer-stats" class="stats-bar"></div>
<div id="peer-list"></div>
<div id="eval-list" style="margin-top:16px;"></div>

<!-- New Agreement Modal -->
<div id="peer-modal" class="modal" style="display:none;">
  <div class="modal-content" style="max-width:700px;">
    <h3>New Peering Agreement</h3>
    <form onsubmit="return createPeering(event)">
      <div class="form-grid">
        <label>Peer Name <input name="peer_name" required placeholder="e.g., CloudFlare, AWS"></label>
        <label>Peer ASN <input name="peer_asn" placeholder="e.g., 13335"></label>
        <label>Our ASN <input name="our_asn" placeholder="e.g., 64512"></label>
        <label>Type <select name="peering_type"><option value="settlement_free">Settlement-Free</option><option value="paid">Paid Peering</option><option value="transit">Transit</option><option value="partial_transit">Partial Transit</option></select></label>
        <label>Routing Method <select name="routing_method"><option value="bgp">BGP</option><option value="static">Static Route</option><option value="ospf">OSPF</option><option value="isis">IS-IS</option><option value="l2">Layer 2</option><option value="pbr">Policy-Based</option><option value="none">None / Manual</option></select></label>
        <label>Port Speed <input name="port_speed" placeholder="10G, 100G"></label>
        <label>Purpose Category <select name="purpose_category"><option value="connectivity">Connectivity</option><option value="cost_optimization">Cost Optimization</option><option value="redundancy">Redundancy</option><option value="cloud_onramp">Cloud On-Ramp</option><option value="customer">Customer</option><option value="partner">Partner</option><option value="regulatory">Regulatory</option><option value="content_delivery">Content Delivery</option></select></label>
        <label>Monthly Cost ($) <input name="monthly_cost" type="number" value="0"></label>
        <label style="grid-column:span 2">Purpose <input name="purpose" placeholder="Why does this peering exist?"></label>
        <label style="grid-column:span 2">Business Justification <textarea name="business_justification" rows="2" style="width:100%;background:var(--bg3);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:6px;font-size:12px;" placeholder="Justification for ARB/ERB review"></textarea></label>
      </div>
      <div class="form-actions">
        <button type="submit" class="btn btn-primary">Create</button>
        <button type="button" class="btn btn-secondary" onclick="this.closest('.modal').style.display='none'">Cancel</button>
      </div>
    </form>
  </div>
</div>

<!-- Evaluate Peer Modal -->
<div id="eval-modal" class="modal" style="display:none;">
  <div class="modal-content">
    <h3>Evaluate Potential Peer</h3>
    <form onsubmit="return evalPeer(event)">
      <div class="form-grid">
        <label>Peer Name <input name="peer_name" required placeholder="Peer organization"></label>
        <label>Peer ASN <input name="peer_asn" placeholder="ASN"></label>
        <label>Traffic Volume (Mbps) <input name="traffic_volume" type="number" value="0" placeholder="Current via transit"></label>
        <label>Geographic Overlap <select name="geographic_overlap"><option>low</option><option selected>medium</option><option>high</option></select></label>
        <label>NOC Quality <select name="noc_quality"><option>unknown</option><option>poor</option><option>fair</option><option>good</option><option>excellent</option></select></label>
        <label>Prefix Count <input name="prefix_count" type="number" value="0"></label>
      </div>
      <div class="form-actions">
        <button type="submit" class="btn btn-primary">Evaluate</button>
        <button type="button" class="btn btn-secondary" onclick="this.closest('.modal').style.display='none'">Cancel</button>
      </div>
    </form>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>
async function load() {
  const agreements = await fetch(NC_BASE + '/api/peering-agreements').then(r => r.json());
  const evals = await fetch(NC_BASE + '/api/peering-evaluations').then(r => r.json());
  // Stats
  const operational = agreements.filter(a => a.status === 'operational').length;
  const totalCost = agreements.reduce((s, a) => s + (a.monthly_cost || 0), 0);
  document.getElementById('peer-stats').innerHTML =
    '<div class="stat-card"><div class="stat-value">' + agreements.length + '</div><div class="stat-label">Agreements</div></div>' +
    '<div class="stat-card"><div class="stat-value">' + operational + '</div><div class="stat-label">Operational</div></div>' +
    '<div class="stat-card"><div class="stat-value">$' + totalCost.toLocaleString() + '/mo</div><div class="stat-label">Total Cost</div></div>' +
    '<div class="stat-card"><div class="stat-value">' + evals.length + '</div><div class="stat-label">Evaluations</div></div>';
  // Agreements
  const el = document.getElementById('peer-list');
  if (!agreements.length) { el.innerHTML = '<section class="panel panel-wide"><div style="padding:16px;color:var(--text-dim);">No peering agreements yet.</div></section>'; }
  else {
    el.innerHTML = '<section class="panel panel-wide"><div class="panel-header"><h2 class="panel-title">Agreements</h2></div><table class="data-table"><thead><tr><th>Peer</th><th>ASN</th><th>Type</th><th>Routing</th><th>Status</th><th>Port</th><th>Purpose</th><th>Cost/mo</th><th>Actions</th></tr></thead><tbody>' +
      agreements.map(a => '<tr><td><strong>' + a.peer_name + '</strong></td><td>' + (a.peer_asn || '') + '</td><td>' + a.peering_type + '</td><td><span class="badge">' + a.routing_method + '</span></td><td><span class="badge badge-' + (a.status === 'operational' ? 'public' : 'info') + '">' + a.status + '</span></td><td>' + (a.port_speed || '') + '</td><td>' + (a.purpose_category || '') + '</td><td>$' + (a.monthly_cost || 0).toLocaleString() + '</td><td class="actions"><button class="action-btn danger" onclick="delPeer(\'' + a.id + '\')">&#x2715;</button></td></tr>').join('') +
      '</tbody></table></section>';
  }
  // Evaluations
  const el2 = document.getElementById('eval-list');
  if (evals.length) {
    el2.innerHTML = '<section class="panel panel-wide"><div class="panel-header"><h2 class="panel-title">Peer Evaluations</h2></div><table class="data-table"><thead><tr><th>Peer</th><th>ASN</th><th>Traffic (Mbps)</th><th>Geo Overlap</th><th>NOC</th><th>Score</th><th>Recommendation</th></tr></thead><tbody>' +
      evals.map(e => '<tr><td>' + e.peer_name + '</td><td>' + (e.peer_asn || '') + '</td><td>' + e.traffic_volume + '</td><td>' + e.geographic_overlap + '</td><td>' + e.noc_quality + '</td><td><strong>' + e.score + '</strong></td><td><span class="health-pill ' + (e.recommendation === 'peer' ? 'pill-green' : e.recommendation === 'evaluate' ? 'pill-yellow' : 'pill-red') + '">' + e.recommendation + '</span></td></tr>').join('') +
      '</tbody></table></section>';
  }
}
function createPeering(e) { e.preventDefault(); const fd = new FormData(e.target), d = {}; fd.forEach((v,k) => d[k] = v);
  d.monthly_cost = parseFloat(d.monthly_cost) || 0;
  fetch(NC_BASE + '/api/peering-agreements', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(d)}).then(() => location.reload()); return false; }
function evalPeer(e) { e.preventDefault(); const fd = new FormData(e.target), d = {}; fd.forEach((v,k) => d[k] = v);
  d.traffic_volume = parseFloat(d.traffic_volume) || 0; d.prefix_count = parseInt(d.prefix_count) || 0;
  fetch(NC_BASE + '/api/peering-evaluations', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(d)}).then(() => location.reload()); return false; }
async function delPeer(id) { if(!confirm('Delete?')) return; await fetch(NC_BASE + '/api/peering-agreements/' + id, {method:'DELETE'}); location.reload(); }
load();
</script>
{% endblock %}