{% extends "security_canvas/base.html" %}
{% block title %}Attack Path Twin — Security Design Canvas{% endblock %}
{% block head %}
<style>
  .risk-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
  }
  .risk-high   { background: #c0392b; color: #fff; }
  .risk-medium { background: #e67e22; color: #fff; }
  .risk-low    { background: #27ae60; color: #fff; }
  .path-row td { font-size: 12px; }
  .path-chain  { font-family: monospace; font-size: 11px; color: var(--text-dim); }
  #snap-list   { max-height: 320px; overflow-y: auto; }
  .node-pill   { display: inline-block; background: var(--bg2); border: 1px solid var(--border);
                 border-radius: 4px; padding: 1px 6px; margin: 1px 2px; font-size: 11px; }
  .empty-state { text-align: center; padding: 3rem; color: var(--text-dim); }
</style>
{% endblock %}
{% block content %}
<!-- CUI // SP-CTI classification banner is already rendered by base.html config check -->

<div class="page-header">
  <div>
    <h1 class="page-title" style="color:#e94560;">&#x1f578; Attack Path Twin</h1>
    <p class="page-subtitle">
      Real-time SDC attack graph snapshots — BFS path enumeration, risk scoring, and Caldera correlation
    </p>
  </div>
  <div class="page-actions">
    <button class="btn btn-secondary" onclick="loadData()" id="refresh-btn">&#x21bb; Refresh</button>
  </div>
</div>

<!-- Summary stats bar -->
<div class="stats-bar" id="summary-stats">
  <div class="stat-card">
    <div class="stat-value" id="stat-snapshots">—</div>
    <div class="stat-label">Snapshots</div>
  </div>
  <div class="stat-card">
    <div class="stat-value" id="stat-nodes">—</div>
    <div class="stat-label">Total Nodes</div>
  </div>
  <div class="stat-card">
    <div class="stat-value" id="stat-edges">—</div>
    <div class="stat-label">Total Edges</div>
  </div>
  <div class="stat-card">
    <div class="stat-value" id="stat-maxrisk" style="color:#e74c3c;">—</div>
    <div class="stat-label">Max Risk Score</div>
  </div>
  <div class="stat-card">
    <div class="stat-value" id="stat-paths">—</div>
    <div class="stat-label">Attack Paths</div>
  </div>
</div>

<div id="loading" style="text-align:center;padding:2rem;color:var(--text-dim);">
  Loading attack path data&hellip;
</div>
<div id="content" class="hidden">

  <!-- Attack Path BFS table -->
  <section class="panel panel-wide">
    <div class="panel-header">
      <h2 class="panel-title">&#x21a0; Enumerated Attack Paths</h2>
      <span id="paths-count" style="color:var(--text-dim);font-size:12px;"></span>
    </div>
    <div id="paths-empty" class="empty-state hidden">
      No attack path snapshots found. Ingest snapshots via the SDC graph builder or Caldera adapter.
    </div>
    <div id="paths-table-wrap">
      <table class="data-table" id="paths-table">
        <thead>
          <tr>
            <th>Source</th>
            <th>Goal</th>
            <th>Hops</th>
            <th>Path</th>
            <th>Risk</th>
          </tr>
        </thead>
        <tbody id="paths-tbody"></tbody>
      </table>
    </div>
  </section>

  <!-- Snapshots accordion -->
  <section class="panel panel-wide">
    <div class="panel-header">
      <h2 class="panel-title">&#x1f4f8; Snapshots</h2>
    </div>
    <div id="snap-list"></div>
  </section>

</div>

<script>
/* CUI // SP-CTI */
const BASE = '/security';

function riskBadge(score) {
  const s = parseFloat(score) || 0;
  const cls = s >= 8 ? 'risk-high' : s >= 5 ? 'risk-medium' : 'risk-low';
  return `<span class="risk-badge ${cls}">${s.toFixed(1)}</span>`;
}

function setText(id, val) {
  const el = document.getElementById(id);
  if (el) el.textContent = val;
}

function renderPaths(paths) {
  const tbody = document.getElementById('paths-tbody');
  const emptyEl = document.getElementById('paths-empty');
  if (!paths || paths.length === 0) {
    document.getElementById('paths-table-wrap').classList.add('hidden');
    emptyEl.classList.remove('hidden');
    setText('stat-paths', '0');
    return;
  }
  emptyEl.classList.add('hidden');
  document.getElementById('paths-table-wrap').classList.remove('hidden');
  setText('stat-paths', paths.length);
  document.getElementById('paths-count').textContent = `${paths.length} paths`;
  tbody.innerHTML = '';
  paths.forEach(p => {
    const chain = (p.path || []).join(' &rarr; ');
    const tr = document.createElement('tr');
    tr.className = 'path-row';
    tr.innerHTML = `
      <td>${p.src || '—'}</td>
      <td>${p.goal || '—'}</td>
      <td style="text-align:center;">${p.hops || 0}</td>
      <td class="path-chain">${chain}</td>
      <td>—</td>`;
    tbody.appendChild(tr);
  });
}

function renderSnapshots(snapshots) {
  const wrap = document.getElementById('snap-list');
  wrap.innerHTML = '';
  if (!snapshots || snapshots.length === 0) {
    wrap.innerHTML = '<div class="empty-state">No snapshots ingested yet.</div>';
    return;
  }
  snapshots.forEach((snap, idx) => {
    const div = document.createElement('div');
    div.style.cssText = 'border:1px solid var(--border);border-radius:8px;margin-bottom:10px;overflow:hidden;';
    const header = `
      <div style="padding:10px 14px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;background:var(--bg2);"
           onclick="this.nextElementSibling.classList.toggle('hidden')">
        <span style="font-size:13px;font-weight:600;">
          ${snap.component_id || snap.id}
          <span style="font-size:11px;font-weight:400;color:var(--text-dim);margin-left:8px;">${snap.created_at ? snap.created_at.slice(0,16) : ''}</span>
        </span>
        <span style="display:flex;gap:8px;align-items:center;">
          <span style="font-size:11px;color:var(--text-dim);">${snap.node_count} nodes / ${snap.edge_count} edges</span>
          ${riskBadge(snap.max_risk_score)}
        </span>
      </div>`;
    const nodes = (snap.nodes || []).map(n =>
      `<span class="node-pill" title="${n.node_type || ''}">${n.label || n.id}</span>`
    ).join('');
    const edgesHtml = (snap.edges || []).map(e => {
      const rs = e.risk_score != null ? e.risk_score : '—';
      return `<tr><td style="font-size:11px;font-family:monospace;">${e.source || '—'}</td>
                  <td style="font-size:11px;">&rarr;</td>
                  <td style="font-size:11px;font-family:monospace;">${e.target || '—'}</td>
                  <td>${riskBadge(rs)}</td></tr>`;
    }).join('');
    const body = `
      <div class="hidden" style="padding:12px 14px;">
        <div style="margin-bottom:8px;">
          <div style="font-size:11px;color:var(--text-dim);margin-bottom:4px;">NODES</div>
          <div>${nodes || '<em style="color:var(--text-dim)">none</em>'}</div>
        </div>
        <div>
          <div style="font-size:11px;color:var(--text-dim);margin-bottom:4px;">EDGES</div>
          ${snap.edges && snap.edges.length > 0
            ? `<table class="data-table"><thead><tr><th>Source</th><th></th><th>Target</th><th>Risk</th></tr></thead><tbody>${edgesHtml}</tbody></table>`
            : '<em style="color:var(--text-dim);font-size:12px;">none</em>'}
        </div>
      </div>`;
    div.innerHTML = header + body;
    wrap.appendChild(div);
    // Auto-expand first snapshot
    if (idx === 0) {
      div.querySelector('.hidden')?.classList.remove('hidden');
    }
  });
}

function loadData() {
  document.getElementById('loading').classList.remove('hidden');
  document.getElementById('content').classList.add('hidden');

  fetch(`${BASE}/api/attackpath`)
    .then(r => r.json())
    .then(d => {
      const s = d.summary || {};
      setText('stat-snapshots', s.total_snapshots ?? 0);
      setText('stat-nodes',     s.total_nodes ?? 0);
      setText('stat-edges',     s.total_edges ?? 0);
      const maxRisk = s.max_risk_score ?? 0;
      setText('stat-maxrisk',   maxRisk.toFixed ? maxRisk.toFixed(1) : maxRisk);
      renderPaths(d.paths || []);
      renderSnapshots(d.snapshots || []);
      document.getElementById('loading').classList.add('hidden');
      document.getElementById('content').classList.remove('hidden');
    })
    .catch(err => {
      document.getElementById('loading').textContent = 'Error loading attack path data: ' + err.message;
    });
}

document.addEventListener('DOMContentLoaded', loadData);
</script>

{# MITRE ATT&CK Tactic Sidebar Overlay #}
<div id="attck-sidebar" style="position:fixed;right:0;top:60px;width:220px;background:#12111a;border-left:1px solid #333;border-bottom:1px solid #333;padding:12px;z-index:100;max-height:calc(100vh - 80px);overflow-y:auto;border-radius:0 0 0 8px;">
  <div style="font-size:11px;font-weight:700;color:#e74c3c;letter-spacing:1px;margin-bottom:10px;">MITRE ATT&CK</div>
  <button id="attck-load-btn" onclick="loadAttckOverlay()"
    style="width:100%;padding:6px;border-radius:4px;border:1px solid #e74c3c44;background:#1a0a0a;color:#e74c3c;font-size:11px;cursor:pointer;margin-bottom:10px;">
    Load Overlay
  </button>
  <div id="attck-content" style="display:none;"></div>
</div>
<script>
function loadAttckOverlay() {
  document.getElementById('attck-load-btn').textContent = 'Loading...';
  fetch('/security/api/attack-ttp-coverage/demo-design-001')
    .then(function(r) { return r.json(); })
    .then(function(d) {
      if (!d.ok) { document.getElementById('attck-load-btn').textContent = 'Error'; return; }
      document.getElementById('attck-load-btn').style.display = 'none';
      const el = document.getElementById('attck-content');
      const colors = {
        'Initial Access': '#e74c3c', 'Credential Access': '#9b59b6',
        'Privilege Escalation': '#e67e22', 'Lateral Movement': '#3498db',
        'Exfiltration': '#1abc9c', 'Impact': '#e74c3c'
      };
      let html = '';
      Object.entries(d.tactics).forEach(function(entry) {
        const tactic = entry[0], ttps = entry[1];
        if (!ttps.length) return;
        const color = colors[tactic] || '#666';
        html += '<div style="margin-bottom:10px;">';
        html += '<div style="font-size:10px;color:' + color + ';font-weight:700;margin-bottom:4px;">' + tactic + '</div>';
        ttps.forEach(function(ttp) {
          html += '<span style="display:inline-block;background:' + color + '22;color:' + color + ';border:1px solid ' + color + '44;border-radius:4px;padding:1px 6px;font-size:10px;margin:2px;">' + ttp + '</span>';
        });
        html += '</div>';
      });
      el.innerHTML = html;
      el.style.display = 'block';
    })
    .catch(function() { document.getElementById('attck-load-btn').textContent = 'Unavailable'; });
}
</script>
{% endblock %}