{# SDC Compliance Timeline Widget — before/after posture comparison for a design #}
{# Include: {% include "security_canvas/_compliance_timeline.html" %} #}
{# Expects JS variable `timelineDesignId` to be set before include #}
<div id="sc-timeline-widget" style="margin-top:24px;">
  <div style="font-size:13px;font-weight:600;color:var(--text-dim);letter-spacing:1px;text-transform:uppercase;margin-bottom:12px;">
    Compliance Timeline
  </div>
  <div id="sc-timeline-loading" style="color:var(--text-dim);font-size:13px;">Loading timeline...</div>
  <div id="sc-timeline-content" class="hidden"></div>
</div>
<script>
(function() {
  const designId = (typeof timelineDesignId !== 'undefined') ? timelineDesignId : 'demo-design-001';
  fetch('/security/api/compliance-timeline/' + encodeURIComponent(designId))
    .then(r => r.json())
    .then(function(d) {
      document.getElementById('sc-timeline-loading').style.display = 'none';
      const el = document.getElementById('sc-timeline-content');
      if (!d.ok || !d.snapshots || !d.snapshots.length) {
        el.innerHTML = '<span style="color:var(--text-dim);font-size:12px;">No timeline data available.</span>';
        el.classList.remove('hidden');
        return;
      }
      const before = d.snapshots.find(function(s) { return s.snapshot_label === 'before'; });
      const after  = d.snapshots.find(function(s) { return s.snapshot_label === 'after'; });
      let html = '<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">';
      html += renderSnapshot(before, 'Before', '#e74c3c');
      html += renderSnapshot(after,  'After',  '#27ae60');
      html += '</div>';
      if (before && after) {
        const cat1Reduced = (before.cat1_count || 0) - (after.cat1_count || 0);
        const riskReduced = ((before.risk_score || 0) - (after.risk_score || 0)).toFixed(1);
        html += '<div style="margin-top:12px;padding:10px 14px;background:#0d1117;border-radius:6px;display:flex;gap:24px;flex-wrap:wrap;">';
        html += '<span style="font-size:12px;color:#27ae60;">&#9660; ' + cat1Reduced + ' CAT1 resolved</span>';
        html += '<span style="font-size:12px;color:#27ae60;">&#9660; ' + riskReduced + ' risk score</span>';
        html += '<span style="font-size:12px;color:#3498db;">' + (after.controls_implemented||0) + '/' + (after.controls_total||0) + ' controls implemented</span>';
        html += '</div>';
      }
      el.innerHTML = html;
      el.classList.remove('hidden');
    })
    .catch(function() {
      document.getElementById('sc-timeline-loading').innerHTML =
        '<span style="color:var(--text-dim);font-size:12px;">Timeline unavailable.</span>';
    });

  function renderSnapshot(snap, label, color) {
    if (!snap) return '<div style="background:#1e1e2e;border-radius:8px;padding:14px;border:1px solid #333;"><div style="color:var(--text-dim);font-size:12px;">' + label + ': no data</div></div>';
    const grade = snap.posture_grade || '?';
    const gradeColor = grade === 'A' ? '#27ae60' : grade === 'B' ? '#2ecc71' : grade === 'C' ? '#f39c12' : grade === 'D' ? '#e67e22' : '#e74c3c';
    const ctrlPct = snap.controls_total > 0 ? Math.round((snap.controls_implemented / snap.controls_total) * 100) : 0;
    return '<div style="background:#1e1e2e;border-radius:8px;padding:14px;border:1px solid ' + color + '44;">' +
      '<div style="font-size:11px;color:' + color + ';font-weight:700;letter-spacing:1px;margin-bottom:10px;">' + label.toUpperCase() + '</div>' +
      '<div style="display:flex;align-items:center;gap:12px;margin-bottom:12px;">' +
        '<div style="font-size:36px;font-weight:700;color:' + gradeColor + ';">' + grade + '</div>' +
        '<div>' +
          '<div style="font-size:12px;color:var(--text-dim);">Risk Score</div>' +
          '<div style="font-size:20px;font-weight:600;color:' + color + ';">' + (snap.risk_score||0).toFixed(1) + '</div>' +
        '</div>' +
      '</div>' +
      '<div style="margin-bottom:8px;">' +
        '<div style="display:flex;justify-content:space-between;font-size:11px;margin-bottom:3px;">' +
          '<span style="color:var(--text-dim);">Controls</span>' +
          '<span style="color:#ccc;">' + (snap.controls_implemented||0) + '/' + (snap.controls_total||0) + ' (' + ctrlPct + '%)</span>' +
        '</div>' +
        '<div style="background:#333;border-radius:3px;height:4px;">' +
          '<div style="background:' + color + ';width:' + ctrlPct + '%;height:100%;border-radius:3px;transition:width 0.4s;"></div>' +
        '</div>' +
      '</div>' +
      '<div style="display:flex;gap:8px;font-size:11px;">' +
        '<span style="background:#e74c3c22;color:#e74c3c;padding:2px 8px;border-radius:10px;">CAT1: ' + (snap.cat1_count||0) + '</span>' +
        '<span style="background:#f39c1222;color:#f39c12;padding:2px 8px;border-radius:10px;">CAT2: ' + (snap.cat2_count||0) + '</span>' +
        '<span style="background:#e67e2222;color:#e67e22;padding:2px 8px;border-radius:10px;">CAT3: ' + (snap.cat3_count||0) + '</span>' +
      '</div>' +
      '<div style="margin-top:8px;font-size:11px;color:var(--text-dim);">' + (snap.remediation_hours||0) + 'h remediation</div>' +
    '</div>';
  }
})();
</script>