{% extends "security_canvas/base.html" %}
{% block title %}Security Design Canvas — Dashboard{% endblock %}
{% block content %}
{% from "includes/classification_macros.html" import design_classification_badge %}
<div class="page-header">
  <div>
    <h1 class="page-title" style="color:#e94560;">&#x1f6e1; Security Design Canvas</h1>
    <p class="page-subtitle">Visual security architecture, threat modeling, STRIDE analysis, and remediation planning</p>
  </div>
  <div class="page-actions">
    <a href="/security/canvas/new" class="btn btn-primary" style="background:#e94560;border-color:#c0392b;">+ New Security Design</a>
    <a href="/simulate/chat?canvas_type=sdc" class="btn btn-secondary" title="Digital Program Twin — AI-assisted simulation chat">Simulate Chat</a>
    {% set wf_canvas_id = 'sdc' %}
    {% set wf_context_label = '' %}
    {% include 'includes/workflow_trigger_btn.html' %}
  </div>
</div>

<!-- Risk Posture Overview -->
<div class="stats-bar" id="posture-stats">
  <div class="stat-card"><div class="stat-value">{{ designs|length }}</div><div class="stat-label">Designs</div></div>
  <div class="stat-card"><div class="stat-value">{{ recent_assessments|length }}</div><div class="stat-label">Assessments</div></div>
</div>

<!-- Recent Assessments -->
{% if recent_assessments %}
<section class="panel panel-wide">
  <div class="panel-header">
    <h2 class="panel-title">Recent Assessments</h2>
    <button class="btn btn-secondary" style="font-size:0.7rem;padding:2px 8px;color:#e74c3c;" onclick="clearAllAssessments()">Clear All</button>
  </div>
  <table class="data-table"><thead><tr><th>Design</th><th>Type</th><th>Risk Score</th><th>Grade</th><th>Date</th><th>Actions</th></tr></thead><tbody>
  {% for a in recent_assessments %}
  <tr id="assess-row-{{ a.id }}">
    <td><a href="/security/canvas/{{ a.design_id }}">{{ a.design_name or a.design_id }}</a></td>
    <td>{{ a.assessment_type }}</td>
    <td><span style="color:{{ '#e74c3c' if a.risk_score < 40 else '#f39c12' if a.risk_score < 70 else '#27ae60' }}">{{ a.risk_score|round(1) }}</span></td>
    <td><strong style="color:{{ '#27ae60' if a.posture_grade in ['A','B'] else '#f39c12' if a.posture_grade == 'C' else '#e74c3c' }}">{{ a.posture_grade }}</strong></td>
    <td>{{ a.ran_at[:16] if a.ran_at else '—' }}</td>
    <td><button class="btn btn-secondary" style="font-size:0.65rem;padding:1px 6px;color:#e74c3c;" onclick="deleteAssessment('{{ a.id }}')">&#x2715;</button></td>
  </tr>
  {% endfor %}
  </tbody></table>
</section>
{% endif %}

<!-- Security Designs -->
<section class="panel panel-wide">
  <div class="panel-header">
    <h2 class="panel-title">Security Designs</h2>
    {% if designs %}<button class="btn btn-secondary" style="font-size:0.7rem;padding:2px 8px;color:#e74c3c;" onclick="clearAllDesigns()">Clear All</button>{% endif %}
  </div>
  {% if designs %}
  <table class="data-table"><thead><tr><th>Name</th><th>Classification</th><th>Source</th><th>Updated</th><th>Actions</th></tr></thead><tbody>
  {% for d in designs %}
  <tr>
    <td><a href="/security/canvas/{{ d.id }}"><strong>{{ d.name }}</strong></a><br><span style="font-size:0.75rem;color:var(--text-dim);">{{ d.description[:80] if d.description else '' }}</span></td>
    <td>{{ design_classification_badge(d) }}</td>
    <td>{% if d.source_topology_id %}<a href="/network/canvas/{{ d.source_topology_id }}" style="font-size:0.8rem;">NDC Import</a>{% else %}Manual{% endif %}</td>
    <td>{{ d.updated_at[:16] if d.updated_at else '—' }}</td>
    <td>
      <a href="/security/canvas/{{ d.id }}" class="btn btn-secondary" style="font-size:0.7rem;padding:2px 8px;">Edit</a>
      <button class="btn btn-primary" style="font-size:0.7rem;padding:2px 8px;background:#e94560;" onclick="runAssess('{{ d.id }}')">Assess</button>
      <a href="/security/twin/{{ d.id }}" class="btn btn-secondary" style="font-size:0.7rem;padding:2px 8px;color:#00bcd4;" title="Attack Path Digital Twin">DT</a>
      <button class="btn btn-secondary" style="font-size:0.65rem;padding:1px 6px;color:#e74c3c;" onclick="deleteDesign('{{ d.id }}','{{ d.name }}')">&#x2715;</button>
    </td>
  </tr>
  {% endfor %}
  </tbody></table>
  {% else %}
  <p style="padding:1rem;color:var(--text-dim);">No security designs yet. <a href="/security/canvas/new">Create one</a> or import from Network Design Canvas.</p>
  {% endif %}
</section>

<!-- IQE Query Widget -->
{% set iqe_canvas = "security" %}
{% set iqe_api_route = "/security/api/iqe-query" %}
{% set iqe_title = "IQE Query — Attack Graph" %}
{% set iqe_examples = [
  {"label": "All attack nodes", "query": "foreach n in attack.nodes select *"},
  {"label": "High-risk edges", "query": "foreach e in attack.edges where e.risk_score > 7 select e.source, e.target, e.risk_score"},
  {"label": "Lateral movement", "query": "foreach e in attack.edges where e.technique_id contains \"T1021\" select e.source, e.target, e.technique_id"},
  {"label": "All attack paths", "query": "foreach p in attack.paths select p.src, p.goal, p.hops"}
] %}
{% include "includes/iqe_query_widget.html" %}

<!-- ZIG Summary Card -->
<div id="zigSummaryCard" style="background:#1a1a2e;border-radius:10px;padding:20px;margin-top:24px;border:1px solid #e94560;display:none;">
  <div style="display:flex;justify-content:space-between;align-items:center;">
    <div>
      <h3 style="margin:0 0 4px;color:#fff;font-size:1rem;">&#x1f6e1; NSA ZIG Maturity</h3>
      <div id="zigMaturityLevel" style="font-size:0.8rem;color:#aaa;"></div>
    </div>
    <div style="text-align:right;">
      <div id="zigScore" style="font-size:1.8rem;font-weight:700;color:#e94560;"></div>
      <a href="/security/zig/" style="font-size:0.8rem;color:#60a5fa;">View ZIG Dashboard &rarr;</a>
    </div>
  </div>
  <div id="zigPillarBars" style="margin-top:12px;display:grid;grid-template-columns:repeat(7,1fr);gap:8px;"></div>
  <div style="margin-top:10px;font-size:0.75rem;color:#666;" id="zigFY2027"></div>
</div>

{% endblock %}
{% block scripts %}
<script>
function runAssess(designId) {
  fetch(SC_BASE + '/api/designs/' + designId + '/assess', {method:'POST', headers:{'Content-Type':'application/json'}, body:'{}'})
    .then(r => r.json()).then(d => {
      alert('Assessment complete: Grade ' + d.posture_grade + ' (Score: ' + d.risk_score + ')');
      location.reload();
    }).catch(e => alert('Error: ' + e));
}

function apiCall(url, method) {
  return fetch(url, {method, headers:{'Content-Type':'application/json'}})
    .then(r => { if (!r.ok) throw new Error(r.status + ' ' + r.statusText); return r.json(); });
}

function deleteDesign(id, name) {
  if (!confirm('Delete security design "' + (name||id) + '"? This cannot be undone.')) return;
  apiCall(SC_BASE + '/api/designs/' + id, 'DELETE').then(() => location.reload()).catch(e => alert('Error: ' + e.message));
}

function clearAllDesigns() {
  if (!confirm('Delete ALL security designs? This cannot be undone.')) return;
  apiCall(SC_BASE + '/api/clear-designs', 'DELETE').then(() => location.reload()).catch(e => alert('Error: ' + e.message));
}

function deleteAssessment(id) {
  apiCall(SC_BASE + '/api/delete-assessment/' + id, 'DELETE').then(() => {
    const row = document.getElementById('assess-row-' + id);
    if (row) row.remove();
  }).catch(e => alert('Error: ' + e.message));
}

function clearAllAssessments() {
  if (!confirm('Clear ALL assessment history?')) return;
  apiCall(SC_BASE + '/api/clear-assessments', 'DELETE').then(() => location.reload()).catch(e => alert('Error: ' + e.message));
}

// Load ZIG summary card
(async () => {
  try {
    const resp = await fetch('/security/api/zig/maturity');
    const data = await resp.json();
    if (!data.ok) return;
    const card = document.getElementById('zigSummaryCard');
    const agg = data.aggregate;
    card.style.display = 'block';
    document.getElementById('zigScore').textContent = Math.round(agg.score * 100) + '%';
    document.getElementById('zigMaturityLevel').textContent = 'Maturity: ' + agg.maturity_level.charAt(0).toUpperCase() + agg.maturity_level.slice(1);
    const barsEl = document.getElementById('zigPillarBars');
    data.pillar_scores.forEach(ps => {
      const div = document.createElement('div');
      div.style.cssText = 'text-align:center;';
      div.innerHTML = `<div style="font-size:0.65rem;color:#888;margin-bottom:4px;">${ps.pillar_slug || ps.slug}</div>
        <div style="height:40px;background:#2a2a4a;border-radius:4px;overflow:hidden;display:flex;align-items:flex-end;">
          <div style="width:100%;height:${Math.max(4,Math.round((ps.score||0)*100))}%;background:#e94560;border-radius:4px;"></div>
        </div>
        <div style="font-size:0.65rem;color:#aaa;margin-top:2px;">${Math.round((ps.score||0)*100)}%</div>`;
      barsEl.appendChild(div);
    });
    if (data.fy2027) {
      document.getElementById('zigFY2027').textContent = `FY2027 Readiness: ${data.fy2027.pct_complete}% — ${data.fy2027.complete_activities}/${data.fy2027.fy2027_target_activities} activities`;
    }
  } catch(e) { /* ZIG not loaded yet */ }
})();
</script>
{% endblock %}