{% extends "base.html" %}
{% block title %}Compliance Debt Burndown - 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;">Compliance Debt</span>
    </nav>

    <h1>Compliance Debt Burndown</h1>
    <p class="text-muted">Track and reduce compliance debt across POAMs, controls, STIG findings, and ATO expirations.</p>

    <!-- ── 1. Debt Score Gauge ──────────────────────────────── -->
    <div style="display:flex;justify-content:center;margin:2rem 0;">
        <div style="position:relative;width:200px;height:200px;">
            <div id="debt-gauge" style="width:200px;height:200px;border-radius:50%;background:conic-gradient(#9e9e9e 0deg,#9e9e9e 360deg);display:flex;align-items:center;justify-content:center;">
                <div style="width:150px;height:150px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;">
                    <span id="debt-score" style="font-size:2.8rem;font-weight:bold;color:#333;">--</span>
                    <span style="font-size:0.8rem;color:#666;">Debt Points</span>
                    <span id="debt-trend" style="font-size:0.75rem;color:#999;margin-top:2px;">--</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Sub-bars for debt categories -->
    <div id="debt-categories" style="max-width:600px;margin:0 auto 2rem;">
        <div style="margin-bottom:0.5rem;">
            <div style="display:flex;justify-content:space-between;font-size:0.85rem;">
                <span>POAM Debt</span><span id="cat-poam-val">0</span>
            </div>
            <div style="background:#e0e0e0;border-radius:4px;height:8px;overflow:hidden;">
                <div id="cat-poam-bar" style="height:100%;background:#f44336;width:0%;transition:width 0.5s;"></div>
            </div>
        </div>
        <div style="margin-bottom:0.5rem;">
            <div style="display:flex;justify-content:space-between;font-size:0.85rem;">
                <span>Control Debt</span><span id="cat-controls-val">0</span>
            </div>
            <div style="background:#e0e0e0;border-radius:4px;height:8px;overflow:hidden;">
                <div id="cat-controls-bar" style="height:100%;background:#ff9800;width:0%;transition:width 0.5s;"></div>
            </div>
        </div>
        <div style="margin-bottom:0.5rem;">
            <div style="display:flex;justify-content:space-between;font-size:0.85rem;">
                <span>STIG Debt</span><span id="cat-stig-val">0</span>
            </div>
            <div style="background:#e0e0e0;border-radius:4px;height:8px;overflow:hidden;">
                <div id="cat-stig-bar" style="height:100%;background:#2196f3;width:0%;transition:width 0.5s;"></div>
            </div>
        </div>
        <div style="margin-bottom:0.5rem;">
            <div style="display:flex;justify-content:space-between;font-size:0.85rem;">
                <span>ATO Risk</span><span id="cat-ato-val">0</span>
            </div>
            <div style="background:#e0e0e0;border-radius:4px;height:8px;overflow:hidden;">
                <div id="cat-ato-bar" style="height:100%;background:#9c27b0;width:0%;transition:width 0.5s;"></div>
            </div>
        </div>
    </div>

    <!-- ── 2. Stats Grid ───────────────────────────────────── -->
    <div id="stats-grid" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1rem;margin:1.5rem 0;">
        <div style="padding:1rem;border:1px solid #ddd;border-radius:8px;text-align:center;">
            <div id="stat-open-poams" style="font-size:2rem;font-weight:bold;">--</div>
            <div style="color:#666;">Open POAMs</div>
        </div>
        <div style="padding:1rem;border:1px solid #ddd;border-radius:8px;text-align:center;">
            <div id="stat-overdue" style="font-size:2rem;font-weight:bold;color:#f44336;">--</div>
            <div style="color:#666;">Overdue POAMs</div>
        </div>
        <div style="padding:1rem;border:1px solid #ddd;border-radius:8px;text-align:center;">
            <div id="stat-unimpl-controls" style="font-size:2rem;font-weight:bold;color:#ff9800;">--</div>
            <div style="color:#666;">Unimplemented Controls</div>
        </div>
        <div style="padding:1rem;border:1px solid #ddd;border-radius:8px;text-align:center;">
            <div id="stat-open-stigs" style="font-size:2rem;font-weight:bold;color:#2196f3;">--</div>
            <div style="color:#666;">Open STIGs</div>
        </div>
        <div style="padding:1rem;border:1px solid #ddd;border-radius:8px;text-align:center;">
            <div id="stat-expiring-atos" style="font-size:2rem;font-weight:bold;color:#9c27b0;">--</div>
            <div style="color:#666;">Expiring ATOs</div>
        </div>
    </div>

    <!-- ── 3. Burndown Chart ───────────────────────────────── -->
    <h2 style="margin-top:2rem;">Burndown Chart</h2>
    <div style="background:#fafafa;border:1px solid #eee;border-radius:8px;padding:1rem;overflow-x:auto;">
        <svg id="burndown-svg" width="800" height="320" style="display:block;margin:0 auto;">
            <text x="400" y="160" text-anchor="middle" fill="#999" font-size="14">Loading burndown data...</text>
        </svg>
    </div>

    <!-- ── 4. SLA Compliance ───────────────────────────────── -->
    <h2 style="margin-top:2rem;">SLA Compliance</h2>
    <div id="sla-bars" style="max-width:700px;">
        <div style="padding:1rem;text-align:center;color:#999;">Loading SLA data...</div>
    </div>

    <!-- ── 5. Overdue POAMs Table ──────────────────────────── -->
    <h2 style="margin-top:2rem;">Overdue POAMs</h2>
    <div class="table-container" style="overflow-x:auto;">
        <table id="tbl-overdue" style="width:100%;border-collapse:collapse;">
            <thead>
                <tr style="border-bottom:2px solid #ddd;">
                    <th style="text-align:left;padding:0.5rem;">Weakness ID</th>
                    <th style="text-align:left;padding:0.5rem;">Description</th>
                    <th style="text-align:center;padding:0.5rem;">Severity</th>
                    <th style="text-align:left;padding:0.5rem;">Control</th>
                    <th style="text-align:left;padding:0.5rem;">Milestone</th>
                    <th style="text-align:center;padding:0.5rem;">Days Overdue</th>
                    <th style="text-align:left;padding:0.5rem;">Responsible</th>
                </tr>
            </thead>
            <tbody id="overdue-body">
                <tr><td colspan="7" style="padding:1rem;text-align:center;color:#999;">Loading...</td></tr>
            </tbody>
        </table>
    </div>

    <!-- ── 6. Expiring ATOs ────────────────────────────────── -->
    <h2 style="margin-top:2rem;">Expiring ATOs</h2>
    <div id="ato-cards" 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...</div>
    </div>

    <!-- ── 7. Control Coverage ─────────────────────────────── -->
    <h2 style="margin-top:2rem;">Control Coverage by Family</h2>
    <div id="control-coverage" style="max-width:800px;">
        <div style="padding:1rem;text-align:center;color:#999;">Loading control data...</div>
    </div>
</div>

<script>
(async function() {
    // ── Helpers ──
    function sevBadge(sev) {
        const colors = {critical:'#d32f2f',high:'#f57c00',moderate:'#fbc02d',low:'#4caf50',
                        CAT1:'#d32f2f',CAT2:'#f57c00',CAT3:'#4caf50'};
        const bg = colors[(sev||'').toLowerCase()] || colors[sev] || '#9e9e9e';
        return '<span style="display:inline-block;padding:2px 8px;border-radius:4px;color:#fff;font-size:0.8rem;font-weight:600;background:'+bg+';">'+(sev||'N/A')+'</span>';
    }
    function debtColor(pts) {
        if (pts < 50) return '#4caf50';
        if (pts <= 200) return '#ff9800';
        return '#f44336';
    }
    function slaColor(pct) {
        if (pct >= 90) return '#4caf50';
        if (pct >= 70) return '#ff9800';
        return '#f44336';
    }
    function trendArrow(t) {
        if (t === 'improving') return 'Improving ↓';
        if (t === 'worsening') return 'Worsening ↑';
        return 'Stable →';
    }

    // ── 1. Summary ──
    try {
        const res = await fetch('/api/compliance-debt/summary');
        const d = await res.json();
        if (!d.error) {
            const total = d.total_debt_points;
            const color = debtColor(total);
            document.getElementById('debt-score').textContent = total;
            document.getElementById('debt-score').style.color = color;
            document.getElementById('debt-trend').textContent = trendArrow(d.debt_trend);
            document.getElementById('debt-trend').style.color = d.debt_trend === 'improving' ? '#4caf50' : d.debt_trend === 'worsening' ? '#f44336' : '#999';

            // Gauge
            const pct = Math.min(total / 500 * 360, 360);
            document.getElementById('debt-gauge').style.background = 'conic-gradient('+color+' 0deg, '+color+' '+pct+'deg, #e0e0e0 '+pct+'deg, #e0e0e0 360deg)';

            // Category bars
            const cats = d.debt_by_category;
            const maxCat = Math.max(cats.poam, cats.controls, cats.stig, cats.ato, 1);
            ['poam','controls','stig','ato'].forEach(function(k) {
                document.getElementById('cat-'+k+'-val').textContent = cats[k];
                document.getElementById('cat-'+k+'-bar').style.width = (cats[k]/maxCat*100)+'%';
            });

            // Stats: open POAMs from overdue endpoint total, open STIGs from summary
            // These are approximate from debt points
        }
    } catch(e) { console.error('Summary error:', e); }

    // ── Stats: open poams ──
    try {
        const res = await fetch('/api/compliance-debt/poams?status=open&per_page=1');
        const d = await res.json();
        const openRes = await fetch('/api/compliance-debt/poams?per_page=1');
        const openD = await openRes.json();
        document.getElementById('stat-open-poams').textContent = openD.total || 0;
    } catch(e) { document.getElementById('stat-open-poams').textContent = '0'; }

    try {
        const res = await fetch('/api/compliance-debt/poams?overdue=true&per_page=1');
        const d = await res.json();
        document.getElementById('stat-overdue').textContent = d.total || 0;
    } catch(e) { document.getElementById('stat-overdue').textContent = '0'; }

    try {
        const res = await fetch('/api/compliance-debt/controls');
        const d = await res.json();
        document.getElementById('stat-unimpl-controls').textContent = d.total_needing_attention || 0;
    } catch(e) { document.getElementById('stat-unimpl-controls').textContent = '0'; }

    try {
        const res = await fetch('/api/compliance-debt/expiring-atos');
        const d = await res.json();
        document.getElementById('stat-expiring-atos').textContent = d.total || 0;
    } catch(e) { document.getElementById('stat-expiring-atos').textContent = '0'; }

    // Open STIGs — derive from summary STIG debt / weight
    try {
        const res = await fetch('/api/compliance-debt/summary');
        const d = await res.json();
        // Rough count: stig debt points exist
        document.getElementById('stat-open-stigs').textContent = d.debt_by_category ? d.debt_by_category.stig : 0;
    } catch(e) { document.getElementById('stat-open-stigs').textContent = '0'; }

    // ── 3. Burndown Chart ──
    try {
        const res = await fetch('/api/compliance-debt/burndown?months=6');
        const d = await res.json();
        const svg = document.getElementById('burndown-svg');
        svg.innerHTML = '';

        const months = d.months || [];
        const projected = d.projected || [];
        const all = months.concat(projected.map(function(p){ return {month:p.month, cumulative_open:p.projected_open, _projected:true}; }));

        if (all.length === 0) {
            svg.innerHTML = '<text x="400" y="160" text-anchor="middle" fill="#999" font-size="14">No burndown data available</text>';
        } else {
            const W = 800, H = 320, pad = {top:30, right:30, bottom:60, left:60};
            const chartW = W - pad.left - pad.right;
            const chartH = H - pad.top - pad.bottom;
            const maxVal = Math.max.apply(null, all.map(function(m){ return m.cumulative_open || 0; }).concat([1]));

            // Axes
            svg.innerHTML += '<line x1="'+pad.left+'" y1="'+(H-pad.bottom)+'" x2="'+(W-pad.right)+'" y2="'+(H-pad.bottom)+'" stroke="#ccc" stroke-width="1"/>';
            svg.innerHTML += '<line x1="'+pad.left+'" y1="'+pad.top+'" x2="'+pad.left+'" y2="'+(H-pad.bottom)+'" stroke="#ccc" stroke-width="1"/>';

            // Y-axis labels
            for (var yi = 0; yi <= 4; yi++) {
                var yVal = Math.round(maxVal * yi / 4);
                var yPos = H - pad.bottom - (chartH * yi / 4);
                svg.innerHTML += '<text x="'+(pad.left-8)+'" y="'+(yPos+4)+'" text-anchor="end" fill="#666" font-size="11">'+yVal+'</text>';
                if (yi > 0) svg.innerHTML += '<line x1="'+pad.left+'" y1="'+yPos+'" x2="'+(W-pad.right)+'" y2="'+yPos+'" stroke="#eee" stroke-width="1"/>';
            }

            // Goal line at zero
            var zeroY = H - pad.bottom;
            svg.innerHTML += '<line x1="'+pad.left+'" y1="'+zeroY+'" x2="'+(W-pad.right)+'" y2="'+zeroY+'" stroke="#4caf50" stroke-width="1" stroke-dasharray="6,3"/>';
            svg.innerHTML += '<text x="'+(W-pad.right+5)+'" y="'+(zeroY+4)+'" fill="#4caf50" font-size="10">Goal</text>';

            // X-axis labels
            all.forEach(function(m, i) {
                var xPos = pad.left + (chartW * i / Math.max(all.length - 1, 1));
                svg.innerHTML += '<text x="'+xPos+'" y="'+(H-pad.bottom+20)+'" text-anchor="middle" fill="#666" font-size="10" transform="rotate(-30,'+xPos+','+(H-pad.bottom+20)+')">'+m.month+'</text>';
            });

            // Axis titles
            svg.innerHTML += '<text x="'+(W/2)+'" y="'+(H-5)+'" text-anchor="middle" fill="#666" font-size="12">Month</text>';
            svg.innerHTML += '<text x="15" y="'+(H/2)+'" text-anchor="middle" fill="#666" font-size="12" transform="rotate(-90,15,'+(H/2)+')">Open Items</text>';

            // Actual line (solid)
            if (months.length > 1) {
                var pts = months.map(function(m, i) {
                    var x = pad.left + (chartW * i / Math.max(all.length - 1, 1));
                    var y = H - pad.bottom - (chartH * (m.cumulative_open || 0) / maxVal);
                    return x+','+y;
                }).join(' ');
                svg.innerHTML += '<polyline points="'+pts+'" fill="none" stroke="#1976d2" stroke-width="2.5"/>';

                // Dots
                months.forEach(function(m, i) {
                    var x = pad.left + (chartW * i / Math.max(all.length - 1, 1));
                    var y = H - pad.bottom - (chartH * (m.cumulative_open || 0) / maxVal);
                    svg.innerHTML += '<circle cx="'+x+'" cy="'+y+'" r="4" fill="#1976d2"/>';
                });
            }

            // Projected line (dashed)
            if (projected.length > 0 && months.length > 0) {
                var startIdx = months.length - 1;
                var projPts = [];
                // Connect from last actual point
                var lx = pad.left + (chartW * startIdx / Math.max(all.length - 1, 1));
                var ly = H - pad.bottom - (chartH * (months[months.length-1].cumulative_open || 0) / maxVal);
                projPts.push(lx+','+ly);

                projected.forEach(function(p, i) {
                    var idx = months.length + i;
                    var x = pad.left + (chartW * idx / Math.max(all.length - 1, 1));
                    var y = H - pad.bottom - (chartH * (p.projected_open || 0) / maxVal);
                    projPts.push(x+','+y);
                });
                svg.innerHTML += '<polyline points="'+projPts.join(" ")+'" fill="none" stroke="#f44336" stroke-width="2" stroke-dasharray="8,4"/>';

                // Dots
                projected.forEach(function(p, i) {
                    var idx = months.length + i;
                    var x = pad.left + (chartW * idx / Math.max(all.length - 1, 1));
                    var y = H - pad.bottom - (chartH * (p.projected_open || 0) / maxVal);
                    svg.innerHTML += '<circle cx="'+x+'" cy="'+y+'" r="3" fill="#f44336" stroke="#fff" stroke-width="1"/>';
                });
            }

            // Legend
            svg.innerHTML += '<rect x="'+(pad.left+10)+'" y="8" width="16" height="3" fill="#1976d2"/>';
            svg.innerHTML += '<text x="'+(pad.left+30)+'" y="13" fill="#333" font-size="11">Actual</text>';
            svg.innerHTML += '<rect x="'+(pad.left+90)+'" y="8" width="16" height="3" fill="#f44336" stroke-dasharray="4,2"/>';
            svg.innerHTML += '<line x1="'+(pad.left+90)+'" y1="9" x2="'+(pad.left+106)+'" y2="9" stroke="#f44336" stroke-width="2" stroke-dasharray="4,2"/>';
            svg.innerHTML += '<text x="'+(pad.left+112)+'" y="13" fill="#333" font-size="11">Projected</text>';
        }
    } catch(e) { console.error('Burndown error:', e); }

    // ── 4. SLA Compliance ──
    try {
        const res = await fetch('/api/compliance-debt/sla');
        const d = await res.json();
        const container = document.getElementById('sla-bars');
        if (d.sla && d.sla.length > 0) {
            var html = '';
            d.sla.forEach(function(s) {
                var color = slaColor(s.compliance_pct);
                var label = s.severity.charAt(0).toUpperCase() + s.severity.slice(1);
                html += '<div style="margin-bottom:1rem;">';
                html += '<div style="display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px;">';
                html += '<span style="font-weight:600;font-size:0.9rem;">'+label+' <span style="font-weight:400;color:#999;">('+s.sla_days+' day SLA)</span></span>';
                html += '<span style="font-weight:bold;color:'+color+';">'+s.compliance_pct+'%</span>';
                html += '</div>';
                html += '<div style="background:#e0e0e0;border-radius:4px;height:22px;overflow:hidden;position:relative;">';
                html += '<div style="height:100%;background:'+color+';width:'+s.compliance_pct+'%;transition:width 0.5s;border-radius:4px;"></div>';
                html += '</div>';
                html += '<div style="font-size:0.75rem;color:#888;margin-top:2px;">'+s.within_sla+' within SLA / '+(s.total_completed + s.open_past_sla)+' total | '+s.open_past_sla+' open past SLA</div>';
                html += '</div>';
            });
            container.innerHTML = html;
        } else {
            container.innerHTML = '<div style="padding:1rem;text-align:center;color:#999;">No SLA data available</div>';
        }
    } catch(e) { console.error('SLA error:', e); }

    // ── 5. Overdue POAMs Table ──
    try {
        const res = await fetch('/api/compliance-debt/poams?overdue=true&per_page=50');
        const d = await res.json();
        const tbody = document.getElementById('overdue-body');
        if (d.poam_items && d.poam_items.length > 0) {
            var html = '';
            d.poam_items.forEach(function(p) {
                html += '<tr style="border-bottom:1px solid #eee;">';
                html += '<td style="padding:0.5rem;font-family:monospace;font-size:0.85rem;">'+(p.weakness_id||'--')+'</td>';
                html += '<td style="padding:0.5rem;max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">'+(p.weakness_description||'--')+'</td>';
                html += '<td style="padding:0.5rem;text-align:center;">'+sevBadge(p.severity)+'</td>';
                html += '<td style="padding:0.5rem;font-family:monospace;font-size:0.85rem;">'+(p.control_id||'--')+'</td>';
                html += '<td style="padding:0.5rem;">'+(p.milestone_date||'--')+'</td>';
                html += '<td style="padding:0.5rem;text-align:center;font-weight:bold;color:#f44336;">'+(p.days_overdue||0)+'</td>';
                html += '<td style="padding:0.5rem;">'+(p.responsible_party||'--')+'</td>';
                html += '</tr>';
            });
            tbody.innerHTML = html;
        } else {
            tbody.innerHTML = '<tr><td colspan="7" style="padding:1rem;text-align:center;color:#4caf50;">No overdue POAMs</td></tr>';
        }
    } catch(e) { console.error('Overdue error:', e); }

    // ── 6. Expiring ATOs ──
    try {
        const res = await fetch('/api/compliance-debt/expiring-atos?days=90');
        const d = await res.json();
        const container = document.getElementById('ato-cards');
        if (d.expiring && d.expiring.length > 0) {
            var html = '';
            d.expiring.forEach(function(a) {
                var remaining = a.days_remaining || 0;
                var pct = Math.max(0, Math.min(100, (90 - remaining) / 90 * 100));
                var barColor = remaining <= 30 ? '#f44336' : remaining <= 60 ? '#ff9800' : '#4caf50';
                html += '<div style="padding:1.25rem;border:1px solid #ddd;border-radius:8px;background:#fff;">';
                html += '<div style="font-weight:bold;font-size:1.1rem;margin-bottom:0.5rem;">Project: '+(a.project_id||'--')+'</div>';
                html += '<div style="font-size:0.85rem;color:#666;margin-bottom:0.25rem;">Status: <strong>'+(a.status||'--')+'</strong></div>';
                html += '<div style="font-size:0.85rem;color:#666;margin-bottom:0.75rem;">Expires: <strong>'+(a.expiration_date||'--')+'</strong></div>';
                html += '<div style="display:flex;justify-content:space-between;font-size:0.8rem;margin-bottom:4px;">';
                html += '<span style="color:'+barColor+';font-weight:600;">'+remaining+' days remaining</span>';
                html += '</div>';
                html += '<div style="background:#e0e0e0;border-radius:4px;height:10px;overflow:hidden;">';
                html += '<div style="height:100%;background:'+barColor+';width:'+pct+'%;transition:width 0.5s;border-radius:4px;"></div>';
                html += '</div>';
                html += '</div>';
            });
            container.innerHTML = html;
        } else {
            container.innerHTML = '<div style="padding:1.5rem;border:1px solid #eee;border-radius:8px;text-align:center;color:#4caf50;">No ATOs expiring within 90 days</div>';
        }
    } catch(e) { console.error('ATO error:', e); }

    // ── 7. Control Coverage ──
    try {
        const res = await fetch('/api/compliance-debt/controls');
        const d = await res.json();
        const container = document.getElementById('control-coverage');
        if (d.families && d.families.length > 0) {
            var html = '';
            d.families.forEach(function(f) {
                var implPct = f.total > 0 ? (f.implemented / f.total * 100) : 0;
                var partialPct = f.total > 0 ? (f.partially_implemented / f.total * 100) : 0;
                var barColor = implPct >= 80 ? '#4caf50' : implPct >= 50 ? '#ff9800' : '#f44336';
                html += '<div style="margin-bottom:1rem;">';
                html += '<div style="display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px;">';
                html += '<span style="font-weight:600;font-size:0.9rem;">'+f.family+'</span>';
                html += '<span style="font-size:0.8rem;color:#666;">'+f.implemented+' / '+f.total+' implemented</span>';
                html += '</div>';
                html += '<div style="background:#e0e0e0;border-radius:4px;height:18px;overflow:hidden;position:relative;display:flex;">';
                html += '<div style="height:100%;background:#4caf50;width:'+implPct+'%;"></div>';
                html += '<div style="height:100%;background:#ff9800;width:'+partialPct+'%;"></div>';
                html += '</div>';
                html += '<div style="font-size:0.7rem;color:#888;margin-top:2px;">Planned: '+f.planned+' | Partial: '+f.partially_implemented+' | Compensating: '+f.compensating+' | N/A: '+f.not_applicable+'</div>';
                html += '</div>';
            });
            container.innerHTML = html;
        } else {
            container.innerHTML = '<div style="padding:1rem;text-align:center;color:#999;">No control data available</div>';
        }
    } catch(e) { console.error('Controls error:', e); }

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