{% extends "base.html" %}

{% block title %}XAI Dashboard - ICDEV™ Dashboard{% endblock %}

{% block content %}
<div class="container">
    <h1>Explainable AI Dashboard</h1>
    <p class="text-muted">NIST AI RMF compliance, AgentSHAP tool attribution, and observability posture (Phase 46).</p>

    <!-- XAI Assessment -->
    <h2>XAI Compliance Assessment</h2>
    <div style="margin:1rem 0;display:flex;gap:0.5rem;align-items:center;">
        <label for="xai-project">Project ID:</label>
        <input type="text" id="xai-project" placeholder="proj-123" style="padding:0.4rem;border:1px solid #ccc;border-radius:4px;width:200px;">
        <button onclick="runAssessment()" style="padding:0.4rem 1rem;background:#1976d2;color:#fff;border:none;border-radius:4px;cursor:pointer;">Assess</button>
    </div>

    <!-- Coverage gauge -->
    <div id="xai-gauge" style="margin:1.5rem 0;text-align:center;display:none;">
        <svg id="gauge-svg" width="200" height="120" role="img" aria-label="XAI coverage gauge"></svg>
        <div id="gauge-label" style="font-size:1.2rem;font-weight:bold;margin-top:0.5rem;"></div>
    </div>

    <!-- Check results table -->
    <div class="table-container">
        <table id="xai-table" aria-label="XAI compliance checks">
            <thead>
                <tr>
                    <th>Check</th>
                    <th>Status</th>
                    <th>Category</th>
                    <th>Severity</th>
                    <th>NIST Controls</th>
                </tr>
            </thead>
            <tbody id="xai-body">
                <tr><td colspan="5" style="text-align:center;color:#999;">Run an assessment to see results.</td></tr>
            </tbody>
        </table>
    </div>

    <!-- Observability Summary -->
    <h2 style="margin-top:2rem;">Observability Summary</h2>
    <div class="stat-grid" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin:1.5rem 0;">
        <div class="stat-card" style="padding:1rem;border:1px solid #ddd;border-radius:8px;text-align:center;">
            <div class="stat-value" id="sum-spans" style="font-size:2rem;font-weight:bold;">--</div>
            <div class="stat-label" style="color:#666;">Total Spans</div>
        </div>
        <div class="stat-card" style="padding:1rem;border:1px solid #ddd;border-radius:8px;text-align:center;">
            <div class="stat-value" id="sum-prov" style="font-size:2rem;font-weight:bold;">--</div>
            <div class="stat-label" style="color:#666;">Prov Entities</div>
        </div>
        <div class="stat-card" style="padding:1rem;border:1px solid #ddd;border-radius:8px;text-align:center;">
            <div class="stat-value" id="sum-shap" style="font-size:2rem;font-weight:bold;">--</div>
            <div class="stat-label" style="color:#666;">SHAP Analyses</div>
        </div>
    </div>

    <!-- SHAP Analysis -->
    <h2>AgentSHAP Tool Attribution</h2>
    <div style="margin:1rem 0;display:flex;gap:0.5rem;align-items:center;">
        <label for="shap-trace">Trace ID:</label>
        <input type="text" id="shap-trace" placeholder="trace ID" style="padding:0.4rem;border:1px solid #ccc;border-radius:4px;width:300px;">
        <button onclick="runSHAP()" style="padding:0.4rem 1rem;background:#7b1fa2;color:#fff;border:none;border-radius:4px;cursor:pointer;">Analyze</button>
    </div>

    <div id="shap-chart" style="margin:1.5rem 0;"></div>
    <div id="shap-results" style="margin-top:1rem;"></div>
</div>
{% endblock %}

{% block scripts %}
<script>
(function() {
    // XAI requirements catalog (from xai_requirements.json)
    const XAI_CATALOG = {
        'XAI-001': {title: 'Tracing Active', category: 'tracing', severity: 'critical', controls: 'AU-2, AU-3, AU-12'},
        'XAI-002': {title: 'MCP Instrumentation', category: 'tracing', severity: 'high', controls: 'AU-2, AU-3'},
        'XAI-003': {title: 'A2A Distributed Tracing', category: 'tracing', severity: 'high', controls: 'AU-2, AU-14'},
        'XAI-004': {title: 'Provenance Graph', category: 'provenance', severity: 'critical', controls: 'AU-3, AU-10, SA-12'},
        'XAI-005': {title: 'Content Tracing Policy', category: 'policy', severity: 'medium', controls: 'AU-11, PL-4'},
        'XAI-006': {title: 'SHAP Analysis Recent', category: 'explainability', severity: 'high', controls: 'AU-6, CA-7'},
        'XAI-007': {title: 'Decision Rationale', category: 'explainability', severity: 'medium', controls: 'AU-3, AU-12'},
        'XAI-008': {title: 'Trace Retention', category: 'policy', severity: 'medium', controls: 'AU-11, SI-12'},
        'XAI-009': {title: 'AI Telemetry Active', category: 'monitoring', severity: 'high', controls: 'AU-2, AU-6, SI-4'},
        'XAI-010': {title: 'Agent Trust Scoring', category: 'trust', severity: 'medium', controls: 'CA-7, IA-1'},
    };

    const STATUS_COLORS = {
        satisfied: '#4caf50',
        partially_satisfied: '#ff9800',
        not_satisfied: '#f44336',
        not_assessed: '#9e9e9e',
    };

    // Load summary
    fetch('/api/xai/summary')
        .then(r => r.json())
        .then(data => {
            document.getElementById('sum-spans').textContent = data.total_spans || 0;
            document.getElementById('sum-prov').textContent = data.prov_entities || 0;
            document.getElementById('sum-shap').textContent = data.shap_analyses || 0;
        }).catch(() => {});

    // Run XAI assessment
    window.runAssessment = function() {
        const projectId = document.getElementById('xai-project').value.trim();
        if (!projectId) return;

        fetch('/api/xai/assess', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({project_id: projectId}),
        })
        .then(r => r.json())
        .then(data => {
            if (data.error) {
                document.getElementById('xai-body').innerHTML = `<tr><td colspan="5" style="color:red;">${data.error}</td></tr>`;
                return;
            }

            // Draw gauge
            const pct = data.total > 0 ? Math.round((data.satisfied / data.total) * 100) : 0;
            drawGauge(pct);

            // Fill table
            const tbody = document.getElementById('xai-body');
            tbody.innerHTML = Object.entries(data.checks).map(([id, status]) => {
                const info = XAI_CATALOG[id] || {};
                const color = STATUS_COLORS[status] || '#999';
                return `<tr>
                    <td><strong>${id}</strong>: ${info.title || ''}</td>
                    <td><span style="color:${color};font-weight:bold;">${status}</span></td>
                    <td>${info.category || ''}</td>
                    <td>${info.severity || ''}</td>
                    <td><code>${info.controls || ''}</code></td>
                </tr>`;
            }).join('');
        }).catch(() => {});
    };

    function drawGauge(pct) {
        const container = document.getElementById('xai-gauge');
        container.style.display = 'block';
        const color = pct >= 80 ? '#4caf50' : pct >= 50 ? '#ff9800' : '#f44336';
        const angle = (pct / 100) * Math.PI;
        const cx = 100, cy = 100, r = 80;
        const x = cx + r * Math.cos(Math.PI - angle);
        const y = cy - r * Math.sin(Math.PI - angle);
        const largeArc = pct > 50 ? 1 : 0;

        document.getElementById('gauge-svg').innerHTML = `
            <path d="M ${cx-r} ${cy} A ${r} ${r} 0 0 1 ${cx+r} ${cy}" fill="none" stroke="#e0e0e0" stroke-width="16"/>
            <path d="M ${cx-r} ${cy} A ${r} ${r} 0 ${largeArc} 1 ${x} ${y}" fill="none" stroke="${color}" stroke-width="16" stroke-linecap="round"/>
            <text x="${cx}" y="${cy-10}" text-anchor="middle" font-size="28" font-weight="bold" fill="${color}">${pct}%</text>
        `;
        document.getElementById('gauge-label').textContent = `XAI Coverage: ${pct}%`;
        document.getElementById('gauge-label').style.color = color;
    }

    // SHAP analysis
    window.runSHAP = function() {
        const traceId = document.getElementById('shap-trace').value.trim();
        if (!traceId) return;

        fetch('/api/xai/shap/analyze', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({trace_id: traceId, iterations: 500}),
        })
        .then(r => r.json())
        .then(data => {
            if (data.error) {
                document.getElementById('shap-results').innerHTML = `<p style="color:red;">${data.error}</p>`;
                return;
            }

            // Draw horizontal bar chart
            const attrs = data.attributions || {};
            const tools = Object.entries(attrs).sort((a, b) => b[1].normalized - a[1].normalized);
            const barH = 30, pad = 4, labelW = 180;
            const svgW = 700, svgH = tools.length * (barH + pad) + 20;

            let svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${svgW}" height="${svgH}" role="img" aria-label="SHAP tool attribution">`;
            svg += `<style>text{font-family:monospace;font-size:12px;}</style>`;

            tools.forEach(([name, attr], i) => {
                const y = i * (barH + pad) + 10;
                const w = Math.max(2, attr.normalized * (svgW - labelW - 40));
                svg += `<text x="4" y="${y + 20}" fill="#333">${name}</text>`;
                svg += `<rect x="${labelW}" y="${y}" width="${w}" height="${barH}" rx="3" fill="#7b1fa2" opacity="0.8"/>`;
                svg += `<text x="${labelW + w + 8}" y="${y + 20}" fill="#666">${(attr.normalized * 100).toFixed(1)}%</text>`;
            });
            svg += '</svg>';
            document.getElementById('shap-chart').innerHTML = svg;

            // Results table
            let html = '<table class="table-container"><thead><tr><th>Tool</th><th>Shapley Value</th><th>Normalized</th><th>CI Low</th><th>CI High</th></tr></thead><tbody>';
            tools.forEach(([name, attr]) => {
                html += `<tr><td>${name}</td><td>${attr.shapley_value}</td><td>${(attr.normalized * 100).toFixed(1)}%</td><td>${attr.confidence_low}</td><td>${attr.confidence_high}</td></tr>`;
            });
            html += '</tbody></table>';
            document.getElementById('shap-results').innerHTML = html;
        }).catch(() => {});
    };
})();
</script>
{% endblock %}