{% extends "base.html" %}
{% block title %}JA4 SOC — Features ML{% endblock %}
{% block content %}
<div class="space-y-6">
    <h2 class="text-lg font-semibold text-white">Features ML — Statistiques agrégées</h2>
    <!-- AI Features -->
    <div class="bg-gray-900 rounded-xl p-5 border border-gray-800">
        <h3 class="text-sm font-medium text-gray-400 mb-3">Features AI (view_ai_features_1h)</h3>
        <div id="ai-stats" class="text-gray-500 text-sm">Chargement...</div>
    </div>
    <!-- Thesis Features -->
    <div class="bg-gray-900 rounded-xl p-5 border border-gray-800">
        <h3 class="text-sm font-medium text-gray-400 mb-3">Features Thèse §5 (view_thesis_features_1h)</h3>
        <div id="thesis-stats" class="text-gray-500 text-sm">Chargement...</div>
    </div>
    <!-- Score distribution chart -->
    <div class="bg-gray-900 rounded-xl p-5 border border-gray-800">
        <h3 class="text-sm font-medium text-gray-400 mb-3">Distribution des scores d'anomalie</h3>
        <canvas id="score-dist-chart" height="200"></canvas>
    </div>
</div>
{% endblock %}
{% block scripts %}
<script>
function renderStats(data, containerId) {
    const el = document.getElementById(containerId);
    if (!data || Object.keys(data).length === 0) { el.textContent = 'Aucune donnée disponible'; return; }
    el.innerHTML = '<div class="grid grid-cols-2 md:grid-cols-4 gap-3">' +
        Object.entries(data).map(([k,v]) => {
            let val = typeof v === 'number' ? v.toFixed(4) : v;
            return `<div class="bg-gray-800 rounded-lg p-3"><div class="text-[10px] text-gray-500 truncate">${k}</div><div class="text-sm text-gray-200 font-mono">${val}</div></div>`;
        }).join('') + '</div>';
}
async function loadFeatures() {
    try {
        const r = await fetch('/api/features'); const d = await r.json();
        renderStats(d.ai_features, 'ai-stats');
        renderStats(d.thesis_features, 'thesis-stats');
    } catch(e) { console.error(e); }
}
loadFeatures();
</script>
{% endblock %}