{% extends "base.html" %}
{# CUI // SP-CTI — AI-ify Canvas: Compliance Posture #}
{% block content %}
<style>
  .ap-wrap{max-width:1100px;margin:0 auto;padding:8px 4px 60px;color:#e2e8f0;}
  .ap-wrap h1{font-size:22px;margin:0 0 2px;}
  .ap-sub{color:#94a3b8;font-size:13px;margin-bottom:18px;}
  .ap-hero{display:flex;gap:18px;align-items:stretch;flex-wrap:wrap;margin-bottom:20px;}
  .ap-grade{flex:0 0 180px;background:#0f172a;border:1px solid #1e293b;border-radius:12px;padding:18px;text-align:center;}
  .ap-grade .g{font-size:64px;font-weight:800;line-height:1;}
  .ap-grade .s{font-size:13px;color:#94a3b8;margin-top:6px;}
  .ap-grade .band{margin-top:8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
  .ap-counts{flex:1;min-width:280px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
  .ap-stat{background:#0f172a;border:1px solid #1e293b;border-radius:10px;padding:12px;}
  .ap-stat .v{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;}
  .ap-stat .l{font-size:11px;color:#94a3b8;margin-top:2px;}
  .ap-actions{margin-bottom:18px;display:flex;gap:10px;align-items:center;}
  .btn{background:#1e293b;border:1px solid #334155;color:#e2e8f0;border-radius:8px;padding:8px 14px;font-size:13px;cursor:pointer;}
  .btn:hover{border-color:#475569;} .btn.primary{background:#2563eb;border-color:#2563eb;color:#fff;}
  .ap-sec{font-size:15px;font-weight:600;margin:24px 0 10px;color:#e2e8f0;}
  .dims{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
  .dim{background:#0f172a;border:1px solid #1e293b;border-radius:10px;padding:14px;}
  .dim-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
  .dim-name{font-weight:600;font-size:14px;}
  .dim-score{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;}
  .dim-bar{height:6px;background:#1e293b;border-radius:3px;overflow:hidden;margin:10px 0 8px;}
  .dim-bar > span{display:block;height:100%;border-radius:3px;}
  .dim-detail{font-size:12px;color:#cbd5e1;}
  .dim-rat{font-size:11px;color:#64748b;margin-top:6px;font-style:italic;}
  .fw{margin-top:8px;display:flex;flex-wrap:wrap;gap:5px;}
  .fw .chip{font-size:10px;padding:2px 7px;border-radius:6px;background:#1e293b;border:1px solid #334155;color:#a5b4fc;}
  .wpill{font-size:10px;color:#64748b;border:1px solid #334155;border-radius:999px;padding:1px 7px;}
  .recs{background:#0f172a;border:1px solid #1e293b;border-radius:10px;padding:14px;}
  .recs li{font-size:13px;color:#fcd34d;margin-bottom:8px;}
  .recs li b{color:#e2e8f0;}
  .trend{width:100%;border-collapse:collapse;font-size:12px;}
  .trend th,.trend td{border:1px solid #1e293b;padding:6px 9px;text-align:left;}
  .trend th{background:#1e293b;color:#94a3b8;font-weight:600;}
  .muted{color:#64748b;font-size:12px;}
  .na{opacity:.55;}
</style>
<div class="ap-wrap">
  <h1>AI-ify Compliance Posture</h1>
  <p class="ap-sub">Deterministic AI-governance grade across six control dimensions —
    mapped to NIST AI RMF, OMB M-25-21, DoD AI Ethics, and NIST 800-53. No LLM; reproducible &amp; audit-defensible.</p>

  <div class="ap-actions">
    <button class="btn primary" id="snap-btn">Capture Snapshot</button>
    <a class="btn" href="/ai-ify/">&#8592; Back to AI-ify</a>
    <a class="btn" href="/compliance">Compliance Hub</a>
    <span class="muted" id="snap-msg"></span>
  </div>

  <div id="ap-loading" class="muted">Loading posture…</div>
  <div id="ap-content" style="display:none;"></div>

  {% include "includes/iqe_query_widget.html" ignore missing %}
</div>
<script>
(function(){
  var COLORS = {green:'#16a34a', amber:'#d97706', red:'#dc2626', na:'#475569'};
  var BAND = {strong:'#16a34a', moderate:'#d97706', weak:'#ea580c', critical:'#dc2626', unrated:'#475569'};

  function gradeColor(g){ return (g==='A'||g==='B') ? '#16a34a' : g==='C' ? '#d97706' : g==='D' ? '#ea580c' : '#dc2626'; }
  function esc(s){ return String(s==null?'':s).replace(/[&<>]/g, function(c){return {'&':'&amp;','<':'&lt;','>':'&gt;'}[c];}); }

  function render(d){
    var html = '';
    var gc = gradeColor(d.grade);
    var bandColor = BAND[d.posture] || '#475569';
    // Hero
    html += '<div class="ap-hero">';
    html += '<div class="ap-grade"><div class="g" style="color:'+gc+';">'+esc(d.grade)+'</div>';
    html += '<div class="s">'+(d.overall_score||0).toFixed(1)+' / 100</div>';
    html += '<div class="band" style="color:'+bandColor+';">'+esc(d.posture)+'</div></div>';
    var c = d.counts || {};
    html += '<div class="ap-counts">';
    html += stat(c.total_scans, 'Scans');
    html += stat(c.total_opportunities, 'Opportunities');
    html += stat(c.opportunities_with_il_model, 'IL Model Routed');
    html += stat(c.opportunities_scored, 'Risk-Scored');
    html += stat(c.hitl_decisions + (c.reviewed_promotions||0), 'Governance Actions');
    html += stat(c.audit_events, 'Audit Events');
    html += '</div></div>';

    // Recommendations
    if (d.recommendations && d.recommendations.length){
      html += '<div class="ap-sec">Top Remediation Levers</div>';
      html += '<div class="recs"><ul style="margin:0;padding-left:18px;">';
      d.recommendations.forEach(function(r){
        html += '<li><b>'+esc(r.dimension)+'</b> ('+(r.score!=null?r.score.toFixed(0):'—')+'/100) — '+esc(r.advice)+'</li>';
      });
      html += '</ul></div>';
    }

    // Dimensions
    html += '<div class="ap-sec">Governance Dimensions ('+d.applicable_dimensions+'/'+d.total_dimensions+' applicable)</div>';
    html += '<div class="dims">';
    (d.dimensions||[]).forEach(function(dim){
      var col = COLORS[dim.status] || '#475569';
      var na = dim.score==null;
      html += '<div class="dim'+(na?' na':'')+'">';
      html += '<div class="dim-head"><span class="dim-name">'+esc(dim.label)+'</span>';
      html += '<span class="wpill">w '+dim.weight_pct+'%</span></div>';
      html += '<div class="dim-head" style="margin-top:6px;">';
      html += '<span class="dim-score" style="color:'+col+';">'+(na?'N/A':dim.score.toFixed(0))+'</span></div>';
      html += '<div class="dim-bar"><span style="width:'+(na?0:dim.score)+'%;background:'+col+';"></span></div>';
      html += '<div class="dim-detail">'+esc(dim.detail)+'</div>';
      if (dim.rationale){ html += '<div class="dim-rat">'+esc(dim.rationale)+'</div>'; }
      if (dim.frameworks && dim.frameworks.length){
        html += '<div class="fw">';
        dim.frameworks.forEach(function(f){ html += '<span class="chip">'+esc(f.framework)+' · '+esc(f.control)+'</span>'; });
        html += '</div>';
      }
      html += '</div>';
    });
    html += '</div>';

    // Trend
    if (d.trend && d.trend.length){
      html += '<div class="ap-sec">Posture History</div>';
      html += '<table class="trend"><thead><tr><th>Captured</th><th>Grade</th><th>Score</th><th>Band</th><th>Scans</th><th>Opportunities</th></tr></thead><tbody>';
      d.trend.forEach(function(t){
        html += '<tr><td>'+esc(t.created_at)+'</td><td style="color:'+gradeColor(t.grade)+';font-weight:700;">'+esc(t.grade)+'</td>';
        html += '<td>'+(t.overall_score!=null?Number(t.overall_score).toFixed(1):'—')+'</td><td>'+esc(t.posture)+'</td>';
        html += '<td>'+esc(t.scan_count)+'</td><td>'+esc(t.opportunity_count)+'</td></tr>';
      });
      html += '</tbody></table>';
    } else {
      html += '<div class="ap-sec">Posture History</div><div class="muted">No snapshots captured yet. Click “Capture Snapshot” to record audit evidence.</div>';
    }

    var el = document.getElementById('ap-content');
    el.innerHTML = html;
    el.style.display = 'block';
    document.getElementById('ap-loading').style.display = 'none';
  }

  function stat(v, l){
    return '<div class="ap-stat"><div class="v">'+(v==null?0:v)+'</div><div class="l">'+l+'</div></div>';
  }

  function load(){
    fetch('/ai-ify/api/posture-summary').then(function(r){return r.json();}).then(render).catch(function(e){
      document.getElementById('ap-loading').textContent = 'Failed to load posture: '+e;
    });
  }

  document.getElementById('snap-btn').addEventListener('click', function(){
    var msg = document.getElementById('snap-msg');
    msg.textContent = 'Capturing…';
    fetch('/ai-ify/api/posture/snapshot', {method:'POST'}).then(function(r){return r.json();}).then(function(j){
      msg.textContent = 'Snapshot saved (grade '+(j.posture&&j.posture.grade||'?')+').';
      load();
    }).catch(function(e){ msg.textContent = 'Snapshot failed: '+e; });
  });

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