{% extends "base.html" %}
{% block title %}Secure by Design - ICDEV™ Dashboard{% endblock %}
{% block content %}
<div class="container">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" style="margin-bottom:0.5rem;">
        <span><a href="/" style="color:#1976d2;text-decoration:none;">Home</a></span>
        <span style="color:#999;"> &gt; </span>
        <span style="color:#333;">Secure by Design</span>
    </nav>

    <h1>CISA Secure by Design Assessment</h1>
    <p class="text-muted">8-pillar assessment scoring with automated gating across memory safety, default security, secure protocols, and more.</p>

    <!-- Overall Posture Score -->
    <div style="display:flex;justify-content:center;margin:2rem 0;">
        <div style="position:relative;width:180px;height:180px;">
            <div id="posture-gauge" style="width:180px;height:180px;border-radius:50%;background:conic-gradient(#9e9e9e 0deg, #9e9e9e 360deg);display:flex;align-items:center;justify-content:center;">
                <div style="width:130px;height:130px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;">
                    <span id="posture-score" style="font-size:2.5rem;font-weight:bold;color:#333;">--</span>
                    <span style="font-size:0.8rem;color:#666;">Overall Posture</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Stats Grid -->
    <div id="stats-grid" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin:1.5rem 0;">
        <div style="padding:1rem;border:1px solid #ddd;border-radius:8px;text-align:center;">
            <div id="stat-total" style="font-size:2rem;font-weight:bold;">--</div>
            <div style="color:#666;">Total Requirements</div>
        </div>
        <div style="padding:1rem;border:1px solid #ddd;border-radius:8px;text-align:center;">
            <div id="stat-satisfied" style="font-size:2rem;font-weight:bold;color:#4caf50;">--</div>
            <div style="color:#666;">Satisfied</div>
        </div>
        <div style="padding:1rem;border:1px solid #ddd;border-radius:8px;text-align:center;">
            <div id="stat-not-satisfied" style="font-size:2rem;font-weight:bold;color:#f44336;">--</div>
            <div style="color:#666;">Not Satisfied</div>
        </div>
        <div style="padding:1rem;border:1px solid #ddd;border-radius:8px;text-align:center;">
            <div id="stat-exceptions" style="font-size:2rem;font-weight:bold;color:#ff9800;">--</div>
            <div style="color:#666;">Risk Accepted</div>
        </div>
    </div>

    <!-- 8-Pillar Domain Scores -->
    <h2 style="margin-top:2rem;">Domain Scores</h2>
    <div id="domains-grid" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin:1rem 0;">
        <div style="padding:1.5rem;border:1px solid #eee;border-radius:8px;text-align:center;color:#999;">Loading domains...</div>
    </div>

    <!-- Assessments Table -->
    <h2 style="margin-top:2rem;">Assessments</h2>
    <div style="margin-bottom:0.75rem;display:flex;gap:0.5rem;align-items:center;">
        <label style="font-weight:600;font-size:0.9rem;">Filter:</label>
        <select id="filter-domain" onchange="filterAssessments()" style="padding:0.3rem 0.6rem;border:1px solid #ccc;border-radius:4px;background:#fff;font-size:0.85rem;">
            <option value="">All Domains</option>
            <option value="memory_safety">Memory Safety</option>
            <option value="default_security">Default Security</option>
            <option value="secure_protocols">Secure Protocols</option>
            <option value="secure_defaults">Secure Defaults</option>
            <option value="known_vulnerabilities">Known Vulnerabilities</option>
            <option value="mfa">MFA</option>
            <option value="intrusion_evidence">Intrusion Evidence</option>
            <option value="vulnerability_reporting">Vulnerability Reporting</option>
        </select>
        <select id="filter-status" onchange="filterAssessments()" style="padding:0.3rem 0.6rem;border:1px solid #ccc;border-radius:4px;background:#fff;font-size:0.85rem;">
            <option value="">All Status</option>
            <option value="satisfied">Satisfied</option>
            <option value="partially_satisfied">Partially Satisfied</option>
            <option value="not_satisfied">Not Satisfied</option>
            <option value="not_assessed">Not Assessed</option>
            <option value="not_applicable">Not Applicable</option>
            <option value="risk_accepted">Risk Accepted</option>
        </select>
    </div>
    <div class="table-container" style="overflow-x:auto;">
        <table id="tbl-assessments" style="width:100%;border-collapse:collapse;">
            <thead>
                <tr style="border-bottom:2px solid #ddd;">
                    <th style="text-align:left;padding:0.5rem;cursor:pointer;" onclick="sortAssessments('domain')">Domain</th>
                    <th style="text-align:left;padding:0.5rem;cursor:pointer;" onclick="sortAssessments('requirement_id')">Requirement ID</th>
                    <th style="text-align:center;padding:0.5rem;cursor:pointer;" onclick="sortAssessments('status')">Status</th>
                    <th style="text-align:left;padding:0.5rem;cursor:pointer;" onclick="sortAssessments('assessor')">Assessor</th>
                    <th style="text-align:left;padding:0.5rem;">Evidence</th>
                    <th style="text-align:left;padding:0.5rem;cursor:pointer;" onclick="sortAssessments('assessed_at')">Date</th>
                </tr>
            </thead>
            <tbody id="assessments-body">
                <tr><td colspan="6" style="padding:1rem;text-align:center;color:#999;">Loading...</td></tr>
            </tbody>
        </table>
    </div>

    <!-- Exception Lifecycle -->
    <h2 style="margin-top:2rem;">Exception Lifecycle</h2>
    <div class="table-container" style="overflow-x:auto;">
        <table id="tbl-exceptions" style="width:100%;border-collapse:collapse;">
            <thead>
                <tr style="border-bottom:2px solid #ddd;">
                    <th style="text-align:left;padding:0.5rem;">Requirement</th>
                    <th style="text-align:left;padding:0.5rem;">Domain</th>
                    <th style="text-align:center;padding:0.5rem;">Days Since Assessment</th>
                    <th style="text-align:center;padding:0.5rem;">Days Remaining</th>
                    <th style="text-align:center;padding:0.5rem;">Status</th>
                </tr>
            </thead>
            <tbody id="exceptions-body">
                <tr><td colspan="5" style="padding:1rem;text-align:center;color:#999;">Loading...</td></tr>
            </tbody>
        </table>
    </div>

    <!-- Run Assessment -->
    <h2 style="margin-top:2rem;">Run Assessment</h2>
    <div style="margin:1rem 0;padding:1.25rem;border:1px solid #ddd;border-radius:8px;background:#fafafa;">
        <div style="display:flex;gap:1rem;align-items:flex-end;">
            <div style="flex:1;">
                <label for="assess-project" style="display:block;font-weight:600;margin-bottom:0.3rem;">Project ID</label>
                <input id="assess-project" type="text" placeholder="e.g. proj-123" style="width:100%;padding:0.5rem 0.8rem;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;" />
            </div>
            <button onclick="runAssessment()" id="btn-assess" style="padding:0.5rem 1.5rem;background:#1976d2;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:0.95rem;font-weight:600;">Assess</button>
        </div>
        <div id="assess-status" style="margin-top:0.5rem;font-size:0.9rem;color:#666;"></div>
    </div>
</div>

<script>
(function() {
    const DOMAIN_META = {
        memory_safety:           { label: 'Memory Safety',           icon: '\u{1F6E1}', color: '#1565c0' },
        default_security:        { label: 'Default Security',        icon: '\u{1F512}', color: '#2e7d32' },
        secure_protocols:        { label: 'Secure Protocols',        icon: '\u{1F310}', color: '#6a1b9a' },
        secure_defaults:         { label: 'Secure Defaults',         icon: '\u{2699}',  color: '#ef6c00' },
        known_vulnerabilities:   { label: 'Known Vulnerabilities',   icon: '\u{1F41B}', color: '#c62828' },
        mfa:                     { label: 'MFA',                     icon: '\u{1F511}', color: '#00838f' },
        intrusion_evidence:      { label: 'Intrusion Evidence',      icon: '\u{1F50D}', color: '#4e342e' },
        vulnerability_reporting: { label: 'Vulnerability Reporting', icon: '\u{1F4E2}', color: '#37474f' }
    };

    const STATUS_COLORS = {
        satisfied:            { bg: '#e8f5e9', fg: '#2e7d32' },
        partially_satisfied:  { bg: '#fff8e1', fg: '#f9a825' },
        not_satisfied:        { bg: '#ffebee', fg: '#c62828' },
        not_assessed:         { bg: '#f5f5f5', fg: '#757575' },
        not_applicable:       { bg: '#eceff1', fg: '#90a4ae' },
        risk_accepted:        { bg: '#fff3e0', fg: '#e65100' }
    };

    let allAssessments = [];
    let sortCol = '';
    let sortAsc = true;

    function gaugeColor(pct) {
        if (pct >= 80) return '#4caf50';
        if (pct >= 50) return '#ff9800';
        return '#f44336';
    }

    function setGauge(pct) {
        var el = document.getElementById('posture-gauge');
        var scoreEl = document.getElementById('posture-score');
        var c = gaugeColor(pct);
        var deg = (pct / 100) * 360;
        el.style.background = 'conic-gradient(' + c + ' 0deg, ' + c + ' ' + deg + 'deg, #e0e0e0 ' + deg + 'deg, #e0e0e0 360deg)';
        scoreEl.textContent = pct + '%';
        scoreEl.style.color = c;
    }

    function statusBadge(status) {
        var s = STATUS_COLORS[status] || { bg: '#f5f5f5', fg: '#757575' };
        var label = status.replace(/_/g, ' ').replace(/\b\w/g, function(c) { return c.toUpperCase(); });
        return '<span style="display:inline-block;padding:2px 8px;border-radius:12px;font-size:0.8rem;background:' + s.bg + ';color:' + s.fg + ';">' + label + '</span>';
    }

    async function loadStats() {
        try {
            var r = await fetch('/api/sbd/stats');
            var d = await r.json();
            document.getElementById('stat-total').textContent = d.total_requirements != null ? d.total_requirements : '--';
            document.getElementById('stat-satisfied').textContent = d.satisfied != null ? d.satisfied : '--';
            document.getElementById('stat-not-satisfied').textContent = d.not_satisfied != null ? d.not_satisfied : '--';
            document.getElementById('stat-exceptions').textContent = d.risk_accepted != null ? d.risk_accepted : '--';
            if (d.overall_score != null) {
                setGauge(Math.round(d.overall_score));
            }
        } catch (e) {
            console.warn('SBD stats load failed:', e);
        }
    }

    async function loadDomains() {
        try {
            var r = await fetch('/api/sbd/domains');
            var domains = await r.json();
            var grid = document.getElementById('domains-grid');
            if (!domains || !domains.length) {
                grid.innerHTML = '<div style="padding:1.5rem;border:1px solid #eee;border-radius:8px;text-align:center;color:#999;">No domain data available.</div>';
                return;
            }
            var html = '';
            for (var i = 0; i < domains.length; i++) {
                var d = domains[i];
                var meta = DOMAIN_META[d.domain] || { label: d.domain, icon: '\u{2705}', color: '#607d8b' };
                var score = d.score != null ? Math.round(d.score) : 0;
                var c = gaugeColor(score);
                var sat = d.satisfied || 0;
                var partial = d.partially_satisfied || 0;
                var notsat = d.not_satisfied || 0;
                var na = d.not_assessed || 0;
                var napp = d.not_applicable || 0;
                var ra = d.risk_accepted || 0;
                var total = sat + partial + notsat + na + napp + ra || 1;
                html += '<div style="padding:1.25rem;border:1px solid #ddd;border-radius:8px;border-left:4px solid ' + meta.color + ';">'
                    + '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.75rem;">'
                    + '<div style="font-weight:700;font-size:1rem;">' + meta.icon + ' ' + meta.label + '</div>'
                    + '<div style="font-size:1.5rem;font-weight:bold;color:' + c + ';">' + score + '%</div>'
                    + '</div>'
                    + '<div style="display:flex;height:10px;border-radius:5px;overflow:hidden;background:#eee;">'
                    + '<div style="width:' + (sat / total * 100) + '%;background:#4caf50;" title="Satisfied: ' + sat + '"></div>'
                    + '<div style="width:' + (partial / total * 100) + '%;background:#ff9800;" title="Partially Satisfied: ' + partial + '"></div>'
                    + '<div style="width:' + (notsat / total * 100) + '%;background:#f44336;" title="Not Satisfied: ' + notsat + '"></div>'
                    + '<div style="width:' + (ra / total * 100) + '%;background:#ff6d00;" title="Risk Accepted: ' + ra + '"></div>'
                    + '<div style="width:' + (na / total * 100) + '%;background:#bdbdbd;" title="Not Assessed: ' + na + '"></div>'
                    + '<div style="width:' + (napp / total * 100) + '%;background:#e0e0e0;" title="Not Applicable: ' + napp + '"></div>'
                    + '</div>'
                    + '<div style="margin-top:0.5rem;font-size:0.75rem;color:#999;display:flex;gap:0.5rem;flex-wrap:wrap;">'
                    + '<span style="color:#4caf50;">' + sat + ' sat</span>'
                    + '<span style="color:#ff9800;">' + partial + ' partial</span>'
                    + '<span style="color:#f44336;">' + notsat + ' fail</span>'
                    + '<span style="color:#ff6d00;">' + ra + ' except</span>'
                    + '</div>'
                    + '</div>';
            }
            grid.innerHTML = html;
        } catch (e) {
            console.warn('SBD domains load failed:', e);
            document.getElementById('domains-grid').innerHTML = '<div style="padding:1rem;color:#c62828;">Failed to load domain scores.</div>';
        }
    }

    async function loadAssessments() {
        try {
            var r = await fetch('/api/sbd/assessments');
            var data = await r.json();
            allAssessments = data.assessments || [];
            renderAssessments();
        } catch (e) {
            console.warn('SBD assessments load failed:', e);
            document.getElementById('assessments-body').innerHTML = '<tr><td colspan="6" style="padding:1rem;text-align:center;color:#c62828;">Failed to load assessments.</td></tr>';
        }
    }

    function renderAssessments() {
        var domain = document.getElementById('filter-domain').value;
        var status = document.getElementById('filter-status').value;
        var rows = allAssessments.filter(function(a) {
            if (domain && a.domain !== domain) return false;
            if (status && a.status !== status) return false;
            return true;
        });
        if (sortCol) {
            rows.sort(function(a, b) {
                var va = (a[sortCol] || '').toString().toLowerCase();
                var vb = (b[sortCol] || '').toString().toLowerCase();
                if (va < vb) return sortAsc ? -1 : 1;
                if (va > vb) return sortAsc ? 1 : -1;
                return 0;
            });
        }
        var tbody = document.getElementById('assessments-body');
        if (!rows.length) {
            tbody.innerHTML = '<tr><td colspan="6" style="padding:1rem;text-align:center;color:#999;">No assessments found.</td></tr>';
            return;
        }
        var html = '';
        for (var i = 0; i < rows.length; i++) {
            var a = rows[i];
            var meta = DOMAIN_META[a.domain] || { label: a.domain };
            html += '<tr style="border-bottom:1px solid #eee;">'
                + '<td style="padding:0.5rem;">' + (meta.label || a.domain) + '</td>'
                + '<td style="padding:0.5rem;font-family:monospace;font-size:0.85rem;">' + (a.requirement_id || '--') + '</td>'
                + '<td style="padding:0.5rem;text-align:center;">' + statusBadge(a.status) + '</td>'
                + '<td style="padding:0.5rem;font-size:0.85rem;">' + (a.assessor || '--') + '</td>'
                + '<td style="padding:0.5rem;font-size:0.85rem;max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="' + ((a.evidence || '').replace(/"/g, '&quot;')) + '">' + (a.evidence || '--') + '</td>'
                + '<td style="padding:0.5rem;font-size:0.85rem;color:#666;">' + (a.assessed_at ? a.assessed_at.substring(0, 16) : '--') + '</td>'
                + '</tr>';
        }
        tbody.innerHTML = html;
    }

    window.filterAssessments = renderAssessments;

    window.sortAssessments = function(col) {
        if (sortCol === col) {
            sortAsc = !sortAsc;
        } else {
            sortCol = col;
            sortAsc = true;
        }
        renderAssessments();
    };

    async function loadExceptions() {
        try {
            var r = await fetch('/api/sbd/exceptions');
            var exceptions = await r.json();
            var tbody = document.getElementById('exceptions-body');
            if (!exceptions || !exceptions.length) {
                tbody.innerHTML = '<tr><td colspan="5" style="padding:1rem;text-align:center;color:#999;">No risk-accepted exceptions.</td></tr>';
                return;
            }
            var html = '';
            var now = Date.now();
            for (var i = 0; i < exceptions.length; i++) {
                var ex = exceptions[i];
                var daysSince = ex.days_since != null ? ex.days_since : 0;
                var daysRemaining = Math.max(0, 365 - daysSince);
                var expired = daysRemaining <= 0;
                var pct = Math.min(100, (daysSince / 365) * 100);
                var barColor = expired ? '#f44336' : (daysRemaining < 60 ? '#ff9800' : '#4caf50');
                var rowStyle = expired ? 'border-bottom:1px solid #eee;background:#ffebee;' : 'border-bottom:1px solid #eee;';
                var meta = DOMAIN_META[ex.domain] || { label: ex.domain };
                html += '<tr style="' + rowStyle + '">'
                    + '<td style="padding:0.5rem;font-family:monospace;font-size:0.85rem;">' + (ex.requirement_id || '--') + '</td>'
                    + '<td style="padding:0.5rem;">' + (meta.label || ex.domain) + '</td>'
                    + '<td style="padding:0.5rem;text-align:center;">' + daysSince + '</td>'
                    + '<td style="padding:0.5rem;text-align:center;">'
                    + '<div style="display:flex;align-items:center;gap:0.5rem;justify-content:center;">'
                    + '<div style="flex:1;max-width:120px;height:8px;background:#eee;border-radius:4px;overflow:hidden;">'
                    + '<div style="width:' + pct + '%;height:100%;background:' + barColor + ';border-radius:4px;"></div>'
                    + '</div>'
                    + '<span style="font-size:0.85rem;font-weight:600;color:' + (expired ? '#c62828' : '#333') + ';">' + daysRemaining + '</span>'
                    + '</div>'
                    + '</td>'
                    + '<td style="padding:0.5rem;text-align:center;">' + (expired ? '<span style="color:#c62828;font-weight:bold;">EXPIRED</span>' : '<span style="color:#4caf50;">Active</span>') + '</td>'
                    + '</tr>';
            }
            tbody.innerHTML = html;
        } catch (e) {
            console.warn('SBD exceptions load failed:', e);
            document.getElementById('exceptions-body').innerHTML = '<tr><td colspan="5" style="padding:1rem;text-align:center;color:#c62828;">Failed to load exceptions.</td></tr>';
        }
    }

    window.runAssessment = async function() {
        var projectId = document.getElementById('assess-project').value.trim();
        if (!projectId) {
            document.getElementById('assess-status').textContent = 'Please enter a Project ID.';
            document.getElementById('assess-status').style.color = '#c62828';
            return;
        }
        var btn = document.getElementById('btn-assess');
        btn.disabled = true;
        btn.textContent = 'Assessing...';
        document.getElementById('assess-status').textContent = 'Running assessment...';
        document.getElementById('assess-status').style.color = '#666';
        try {
            var r = await fetch('/api/sbd/assess', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ project_id: projectId })
            });
            var d = await r.json();
            if (r.ok) {
                document.getElementById('assess-status').textContent = 'Assessment complete. Refreshing data...';
                document.getElementById('assess-status').style.color = '#2e7d32';
                loadAll();
            } else {
                document.getElementById('assess-status').textContent = 'Error: ' + (d.error || 'Unknown error');
                document.getElementById('assess-status').style.color = '#c62828';
            }
        } catch (e) {
            document.getElementById('assess-status').textContent = 'Request failed: ' + e.message;
            document.getElementById('assess-status').style.color = '#c62828';
        } finally {
            btn.disabled = false;
            btn.textContent = 'Assess';
        }
    };

    function loadAll() {
        loadStats();
        loadDomains();
        loadAssessments();
        loadExceptions();
    }

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