{% 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>

<!-- Insider-Risk (UBA lite) — card crx-sec-01 -->
<section class="panel panel-wide" id="insider-risk-panel">
  <div class="panel-header">
    <h2 class="panel-title">Insider-Risk (UBA)</h2>
    <button class="btn btn-primary" style="font-size:0.7rem;padding:2px 8px;background:#e94560;" onclick="runInsiderScan()">Run Scan</button>
  </div>
  <p style="padding:0 1rem;font-size:0.75rem;color:var(--text-dim);margin:0.25rem 0;">
    Deterministic behavioral-anomaly rules over existing activity/usage telemetry (read-only).
    Config-gated &amp; default off &mdash; monitors platform users.
  </p>
  <div id="insider-risk-body" style="padding:0.5rem 1rem;color:var(--text-dim);font-size:0.8rem;">Loading&hellip;</div>
</section>

<!-- 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>

{% 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));
}

// ── Insider-Risk (UBA) panel — card crx-sec-01 ──────────────────────────────
var IR_BAND_COLOR = {high:'#e74c3c', elevated:'#f39c12', normal:'#27ae60'};

function renderInsiderRisk(d) {
  var body = document.getElementById('insider-risk-body');
  if (!body) return;
  if (!d.enabled) {
    body.innerHTML = '<em>Disabled.</em> Enable in <code>args/insider_risk_config.yaml</code> after a privacy review.';
    return;
  }
  var f = d.findings || [];
  if (!f.length) {
    body.innerHTML = '<em>Enabled.</em> No anomalies in the latest scan.';
    return;
  }
  var rows = f.map(function(x){
    var c = IR_BAND_COLOR[x.risk_band] || '#888';
    return '<tr><td>' + (x.account_id || '') + '</td>' +
      '<td><span style="color:' + c + ';font-weight:600;">' + x.risk_band + '</span></td>' +
      '<td>' + (x.risk_score != null ? x.risk_score : '') + '</td>' +
      '<td style="font-size:0.7rem;">' + (x.rules_fired || []).join(', ') + '</td></tr>';
  }).join('');
  body.innerHTML = '<table class="data-table"><thead><tr><th>Account</th><th>Band</th><th>Score</th><th>Rules Fired</th></tr></thead><tbody>' + rows + '</tbody></table>';
}

function loadInsiderRisk() {
  fetch(SC_BASE + '/api/insider-risk').then(function(r){return r.json();}).then(renderInsiderRisk)
    .catch(function(){ var b=document.getElementById('insider-risk-body'); if(b) b.textContent='Unavailable.'; });
}

function runInsiderScan() {
  var body = document.getElementById('insider-risk-body');
  if (body) body.textContent = 'Scanning…';
  fetch(SC_BASE + '/api/insider-risk/scan', {method:'POST', headers:{'Content-Type':'application/json'}, body:'{}'})
    .then(function(r){return r.json();})
    .then(function(d){ if (d.skipped) { if(body) body.innerHTML='<em>'+d.skipped+'</em>'; } else { loadInsiderRisk(); } })
    .catch(function(e){ if(body) body.textContent='Error: ' + e; });
}

document.addEventListener('DOMContentLoaded', loadInsiderRisk);

</script>
{% endblock %}