{% extends "network/base.html" %}
{% block title %}PPS Matrix — {{ topology.name }}{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">Ports / Protocols / Services Matrix</h1>
    <p class="page-subtitle">{{ topology.name }} — Select two enclaves or a device pair to generate</p>
  </div>
  <div class="page-actions">
    <a href="/network/canvas/{{ topology.id }}" class="btn btn-secondary">Canvas</a>
    <a href="/network/compliance/{{ topology.id }}" class="btn btn-secondary">Compliance</a>
    <button class="btn btn-secondary" id="btn-export-csv" onclick="exportSSP('csv')" style="display:none;">Export CSV</button>
    <button class="btn btn-secondary" id="btn-export-md" onclick="exportSSP('markdown')" style="display:none;">Export Markdown</button>
  </div>
</div>

<!-- Pair Selector -->
<section class="panel panel-wide">
  <div class="panel-header"><h2 class="panel-title">Select Pair</h2></div>
  <div style="padding:1rem;">

    <!-- Mode toggle -->
    <div style="display:flex;gap:12px;margin-bottom:1.2rem;">
      <label style="display:flex;align-items:center;gap:6px;cursor:pointer;">
        <input type="radio" name="sel-mode" value="zone" checked onchange="onModeChange(this.value)">
        Enclave / Zone pair
      </label>
      <label style="display:flex;align-items:center;gap:6px;cursor:pointer;">
        <input type="radio" name="sel-mode" value="node" onchange="onModeChange(this.value)">
        Device pair
      </label>
    </div>

    <!-- Zone selectors -->
    <div id="zone-selectors" class="form-grid" style="max-width:700px;">
      <label>Source Enclave
        <select id="sel-src-zone">
          <option value="">— select —</option>
          {% for e in enclaves %}
          <option value="{{ e.id }}">{{ e.label }} ({{ e.node_count }} nodes)</option>
          {% endfor %}
        </select>
      </label>
      <label>Destination Enclave
        <select id="sel-dst-zone">
          <option value="">— select —</option>
          {% for e in enclaves %}
          <option value="{{ e.id }}">{{ e.label }} ({{ e.node_count }} nodes)</option>
          {% endfor %}
        </select>
      </label>
    </div>

    <!-- Node selectors (hidden by default) -->
    <div id="node-selectors" class="form-grid" style="max-width:700px;display:none;">
      <label>Source Device
        <select id="sel-src-node">
          <option value="">— select —</option>
          {% for n in nodes %}
          <option value="{{ n.id }}" data-zone="{{ n.zone }}">{{ n.label }} [{{ n.type }}] — {{ n.zone }}</option>
          {% endfor %}
        </select>
      </label>
      <label>Destination Device
        <select id="sel-dst-node">
          <option value="">— select —</option>
          {% for n in nodes %}
          <option value="{{ n.id }}" data-zone="{{ n.zone }}">{{ n.label }} [{{ n.type }}] — {{ n.zone }}</option>
          {% endfor %}
        </select>
      </label>
    </div>

    <div style="margin-top:1rem;">
      <button class="btn btn-primary" onclick="generateMatrix()">Generate PPS Matrix</button>
    </div>
  </div>
</section>

<!-- Results: summary bar -->
<div id="pps-summary" style="display:none;margin-bottom:1rem;">
  <div class="stats-bar" id="stats-bar"></div>
</div>

<!-- Results: matrix table -->
<section id="pps-results" class="panel panel-wide" style="display:none;">
  <div class="panel-header">
    <h2 class="panel-title" id="matrix-title">PPS Matrix</h2>
    <div style="display:flex;gap:8px;align-items:center;">
      <input type="text" id="filter-input" placeholder="Filter protocols…"
             style="padding:4px 8px;font-size:0.85rem;background:var(--bg-input,#1e2a3a);border:1px solid var(--border,#334);color:inherit;border-radius:4px;"
             oninput="filterTable()">
    </div>
  </div>
  <div style="overflow-x:auto;">
    <table id="pps-table" class="data-table">
      <thead>
        <tr>
          <th>#</th>
          <th>Protocol</th>
          <th>Port</th>
          <th>Service</th>
          <th>Direction</th>
          <th>Encrypted</th>
          <th>FIPS</th>
          <th>Risk</th>
          <th>Justification</th>
          <th>Endpoints (sample)</th>
        </tr>
      </thead>
      <tbody id="pps-tbody"></tbody>
    </table>
  </div>
</section>

<!-- Firewall rules supplement -->
<section id="fw-results" class="panel panel-wide" style="display:none;margin-top:1rem;">
  <div class="panel-header">
    <h2 class="panel-title">Firewall Rules (at boundary)</h2>
  </div>
  <div style="overflow-x:auto;">
    <table id="fw-table" class="data-table">
      <thead>
        <tr>
          <th>#</th>
          <th>Protocol</th>
          <th>Port</th>
          <th>Service</th>
          <th>Direction (src→dst)</th>
          <th>Encrypted</th>
          <th>Risk</th>
          <th>Justification</th>
        </tr>
      </thead>
      <tbody id="fw-tbody"></tbody>
    </table>
  </div>
</section>

<!-- Empty state -->
<div id="pps-empty" style="display:none;text-align:center;padding:3rem;color:var(--text-dim);">
  <div style="font-size:2rem;margin-bottom:0.5rem;">⊘</div>
  <p>No cross-boundary traffic found between the selected pair.</p>
  <p style="font-size:0.85rem;">Ensure the topology has links annotated with protocols between these enclaves.</p>
</div>

{% endblock %}

{% block scripts %}
<script>
const TOPO_ID = "{{ topology.id }}";
let _lastResult = null;
let _selMode = "zone";

function onModeChange(mode) {
  _selMode = mode;
  document.getElementById("zone-selectors").style.display = mode === "zone" ? "" : "none";
  document.getElementById("node-selectors").style.display = mode === "node" ? "" : "none";
}

function generateMatrix() {
  const source = _selMode === "zone"
    ? document.getElementById("sel-src-zone").value
    : document.getElementById("sel-src-node").value;
  const dest = _selMode === "zone"
    ? document.getElementById("sel-dst-zone").value
    : document.getElementById("sel-dst-node").value;

  if (!source || !dest) {
    alert("Please select both source and destination.");
    return;
  }
  if (source === dest) {
    alert("Source and destination must be different.");
    return;
  }

  // Reset UI
  document.getElementById("pps-results").style.display = "none";
  document.getElementById("fw-results").style.display = "none";
  document.getElementById("pps-summary").style.display = "none";
  document.getElementById("pps-empty").style.display = "none";
  document.getElementById("btn-export-csv").style.display = "none";
  document.getElementById("btn-export-md").style.display = "none";

  fetch(`/network/api/pps/${TOPO_ID}/generate`, {
    method: "POST",
    headers: {"Content-Type": "application/json"},
    body: JSON.stringify({source, dest, selector_type: _selMode}),
  })
  .then(r => r.json())
  .then(data => {
    if (data.error) { alert("Error: " + data.error); return; }
    _lastResult = data;
    renderResults(data);
  })
  .catch(err => alert("Request failed: " + err));
}

function renderResults(data) {
  const total = data.total_protocols + data.total_fw_rules;

  // Summary bar
  const statsBar = document.getElementById("stats-bar");
  statsBar.innerHTML = `
    <div class="stat-card"><div class="stat-value">${data.total_protocols}</div><div class="stat-label">Protocols</div></div>
    <div class="stat-card"><div class="stat-value">${data.encrypted_protocols}</div><div class="stat-label">Encrypted</div></div>
    <div class="stat-card"><div class="stat-value ${data.insecure_protocols > 0 ? 'text-red' : ''}">${data.insecure_protocols}</div><div class="stat-label">Insecure</div></div>
    <div class="stat-card"><div class="stat-value">${data.total_fw_rules}</div><div class="stat-label">FW Rules</div></div>
    <div class="stat-card"><div class="stat-value" style="font-size:0.9rem;">${data.source_label}</div><div class="stat-label">Source</div></div>
    <div class="stat-card"><div class="stat-value" style="font-size:0.9rem;">${data.dest_label}</div><div class="stat-label">Destination</div></div>
  `;
  document.getElementById("pps-summary").style.display = "";

  if (total === 0) {
    document.getElementById("pps-empty").style.display = "";
    return;
  }

  // Matrix table title
  document.getElementById("matrix-title").textContent =
    `PPS Matrix — ${data.source_label} ↔ ${data.dest_label}`;

  // Protocol rows
  const tbody = document.getElementById("pps-tbody");
  tbody.innerHTML = "";
  data.matrix.forEach((row, i) => {
    const riskClass = row.risk === "HIGH" ? "text-red" : row.risk === "LOW" ? "text-green" : "text-yellow";
    const encIcon = row.encrypted ? "🔒" : "⚠";
    const fipsIcon = row.fips_validated ? "✓" : "—";
    const eps = (row.endpoints || []).slice(0, 3).join("<br>");
    tbody.insertAdjacentHTML("beforeend", `
      <tr class="pps-row" data-proto="${row.protocol.toLowerCase()}">
        <td>${i+1}</td>
        <td><strong>${row.protocol}</strong></td>
        <td style="font-family:monospace;font-size:0.82rem;">${row.port}</td>
        <td>${row.service}</td>
        <td style="font-size:0.82rem;">${row.direction}</td>
        <td style="text-align:center;">${encIcon}</td>
        <td style="text-align:center;">${fipsIcon}</td>
        <td><span class="${riskClass}">${row.risk}</span></td>
        <td style="font-size:0.82rem;max-width:280px;">${row.justification}</td>
        <td style="font-size:0.78rem;color:var(--text-dim);">${eps}</td>
      </tr>
    `);
  });
  document.getElementById("pps-results").style.display = "";

  // Firewall rules
  if (data.firewall_rules && data.firewall_rules.length > 0) {
    const fwTbody = document.getElementById("fw-tbody");
    fwTbody.innerHTML = "";
    data.firewall_rules.forEach((row, i) => {
      const riskClass = row.risk === "HIGH" ? "text-red" : "text-yellow";
      const encIcon = row.encrypted ? "🔒" : "—";
      fwTbody.insertAdjacentHTML("beforeend", `
        <tr>
          <td>${i+1}</td>
          <td><strong>${row.protocol}</strong></td>
          <td style="font-family:monospace;font-size:0.82rem;">${row.port}</td>
          <td>${row.service}</td>
          <td style="font-size:0.82rem;">${row.direction}</td>
          <td style="text-align:center;">${encIcon}</td>
          <td><span class="${riskClass}">${row.risk}</span></td>
          <td style="font-size:0.82rem;">${row.justification}</td>
        </tr>
      `);
    });
    document.getElementById("fw-results").style.display = "";
  }

  document.getElementById("btn-export-csv").style.display = "";
  document.getElementById("btn-export-md").style.display = "";
}

function filterTable() {
  const q = document.getElementById("filter-input").value.toLowerCase();
  document.querySelectorAll("#pps-tbody tr.pps-row").forEach(tr => {
    tr.style.display = tr.textContent.toLowerCase().includes(q) ? "" : "none";
  });
}

function exportSSP(fmt) {
  if (!_lastResult) return;
  const source = _lastResult.source_selector;
  const dest = _lastResult.dest_selector;
  fetch(`/network/api/pps/${TOPO_ID}/export`, {
    method: "POST",
    headers: {"Content-Type": "application/json"},
    body: JSON.stringify({source, dest, selector_type: _lastResult.selector_type, format: fmt}),
  })
  .then(async r => {
    const disposition = r.headers.get("Content-Disposition") || "";
    const fnMatch = disposition.match(/filename="(.+?)"/);
    const filename = fnMatch ? fnMatch[1] : `pps_ssp.${fmt === "csv" ? "csv" : "md"}`;
    const blob = await r.blob();
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url; a.download = filename; a.click();
    URL.revokeObjectURL(url);
  })
  .catch(err => alert("Export failed: " + err));
}
</script>
{% endblock %}