{% extends "base.html" %}
{% block title %}Route Policies — PMC{% 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-filter-square me-2"></i>Route Policies</h4>
    <button class="btn btn-sm btn-outline-success" onclick="openAddPolicyModal()">+ Add Policy</button>
  </div>

  <div class="row g-3 mb-3">
    <div class="col-md-6">
      <div class="card bg-dark border-secondary">
        <div class="card-header border-secondary text-info">Import Policies</div>
        <div class="card-body p-0">
          <table class="table table-dark table-sm mb-0">
            <thead><tr><th>Name</th><th>Action</th><th>Priority</th><th>Active</th></tr></thead>
            <tbody id="import-tbody"></tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card bg-dark border-secondary">
        <div class="card-header border-secondary text-warning">Export Policies</div>
        <div class="card-body p-0">
          <table class="table table-dark table-sm mb-0">
            <thead><tr><th>Name</th><th>Action</th><th>Priority</th><th>Active</th></tr></thead>
            <tbody id="export-tbody"></tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <!-- RPSL / aut-num Generator -->
  <div class="card bg-dark border-secondary mb-3">
    <div class="card-header border-secondary">aut-num RPSL Generator</div>
    <div class="card-body">
      <div class="row g-2 mb-2">
        <div class="col-md-3">
          <input type="number" class="form-control form-control-sm bg-dark text-white border-secondary" id="autnum-asn" placeholder="Our ASN">
        </div>
        <div class="col-md-4">
          <input type="text" class="form-control form-control-sm bg-dark text-white border-secondary" id="autnum-org" placeholder="Org Name">
        </div>
        <div class="col-md-3">
          <input type="text" class="form-control form-control-sm bg-dark text-white border-secondary" id="autnum-as-set" placeholder="AS-SET Name">
        </div>
        <div class="col-md-2">
          <button class="btn btn-sm btn-outline-info w-100" onclick="generateAutNum()">Generate</button>
        </div>
      </div>
      <pre id="autnum-output" style="display:none;font-size:12px;background:#000;color:#22c55e;padding:12px;border-radius:4px;max-height:300px;overflow-y:auto;"></pre>
    </div>
  </div>

  <!-- Add Policy Modal -->
  <div class="modal fade" id="addPolicyModal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content bg-dark border-secondary">
        <div class="modal-header border-secondary">
          <h5 class="modal-title">Add Route Policy</h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3"><label class="form-label">Policy Name *</label>
            <input type="text" class="form-control bg-dark text-white border-secondary" id="pol-name" placeholder="IMPORT-PEER-DEFAULT"></div>
          <div class="mb-3"><label class="form-label">Our ASN</label>
            <input type="number" class="form-control bg-dark text-white border-secondary" id="pol-asn"></div>
          <div class="mb-3"><label class="form-label">Type</label>
            <select class="form-select bg-dark text-white border-secondary" id="pol-type">
              <option value="import">Import</option>
              <option value="export">Export</option>
            </select></div>
          <div class="mb-3"><label class="form-label">Action</label>
            <select class="form-select bg-dark text-white border-secondary" id="pol-action">
              <option value="accept">Accept</option>
              <option value="reject">Reject</option>
              <option value="prepend">Prepend</option>
              <option value="set-community">Set Community</option>
            </select></div>
          <div class="mb-3"><label class="form-label">Priority</label>
            <input type="number" class="form-control bg-dark text-white border-secondary" id="pol-priority" value="100"></div>
        </div>
        <div class="modal-footer border-secondary">
          <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button class="btn btn-success" onclick="submitPolicy()">Add</button>
        </div>
      </div>
    </div>
  </div>

  {% include 'includes/iqe_query_widget.html' %}
</div>

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

function loadPolicies() {
  fetch('/api/pmc/policies').then(r=>r.json()).then(rows=>{
    const data = Array.isArray(rows) ? rows : (rows.policies || []);
    const imports = data.filter(p=>p.policy_type==='import');
    const exports = data.filter(p=>p.policy_type==='export');
    renderPols(imports, 'import-tbody');
    renderPols(exports, 'export-tbody');
  }).catch(()=>{});
}

function renderPols(rows, tbodyId) {
  const tbody = document.getElementById(tbodyId);
  tbody.innerHTML = rows.map(p=>`
    <tr>
      <td>${p.policy_name}</td>
      <td>${p.action}</td>
      <td>${p.priority}</td>
      <td>${(p.active===true||p.active===1)?'<span class="text-success">●</span>':'<span class="text-muted">○</span>'}</td>
    </tr>`).join('');
}

function openAddPolicyModal() { new bootstrap.Modal(document.getElementById('addPolicyModal')).show(); }

function submitPolicy() {
  const body = {
    policy_name: document.getElementById('pol-name').value,
    our_asn: parseInt(document.getElementById('pol-asn').value)||0,
    policy_type: document.getElementById('pol-type').value,
    action: document.getElementById('pol-action').value,
    priority: parseInt(document.getElementById('pol-priority').value)||100,
  };
  fetch('/api/pmc/policies',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)})
    .then(r=>r.json()).then(()=>{
      bootstrap.Modal.getInstance(document.getElementById('addPolicyModal')).hide();
      loadPolicies();
    }).catch(()=>{});
}

function generateAutNum() {
  const body = {
    our_asn: parseInt(document.getElementById('autnum-asn').value)||0,
    org_name: document.getElementById('autnum-org').value,
    as_set: document.getElementById('autnum-as-set').value,
  };
  fetch('/api/pmc/export/aut-num',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)})
    .then(r=>r.json()).then(d=>{
      const pre = document.getElementById('autnum-output');
      pre.textContent = d.rpsl || d.error || '';
      pre.style.display = 'block';
    }).catch(()=>{});
}

loadPolicies();
</script>
{% endblock %}