{% extends "base.html" %}
{% block title %}JA4 SOC — Détections{% endblock %}
{% block content %}
<div class="space-y-4">
    <div class="flex items-center gap-3 flex-wrap">
        <h2 class="text-lg font-semibold text-white">Anomalies détectées</h2>
        <div class="flex gap-1.5" id="threat-filters">
            <button class="filter-btn active" data-filter="">Tous</button>
            <button class="filter-btn" data-filter="CRITICAL">Critical</button>
            <button class="filter-btn" data-filter="HIGH">High</button>
            <button class="filter-btn" data-filter="MEDIUM">Medium</button>
            <button class="filter-btn" data-filter="KNOWN_BOT">Known Bot</button>
            <button class="filter-btn" data-filter="ANUBIS_DENY">Anubis Deny</button>
        </div>
        <div class="flex-1"></div>
        <input type="text" id="search-input" placeholder="Rechercher IP, host..."
               class="px-3 py-1.5 bg-gray-800 border border-gray-700 rounded-lg text-sm text-gray-300 w-64 focus:border-brand-500 focus:outline-none">
    </div>
    <div class="bg-gray-900 rounded-xl border border-gray-800 overflow-hidden">
        <div class="overflow-x-auto max-h-[70vh] overflow-y-auto">
            <table class="data-table">
                <thead><tr>
                    <th class="cursor-pointer" data-sort="detected_at">Date ↕</th>
                    <th>IP</th>
                    <th class="cursor-pointer" data-sort="anomaly_score">Score ↕</th>
                    <th>Threat</th>
                    <th>JA4</th>
                    <th>Host</th>
                    <th>Hits</th>
                    <th>ASN</th>
                    <th>Pays</th>
                    <th>Récurrence</th>
                    <th>Raison</th>
                </tr></thead>
                <tbody id="detections-body"></tbody>
            </table>
        </div>
        <div class="flex items-center justify-between px-4 py-3 border-t border-gray-800">
            <span class="text-xs text-gray-500" id="det-info">—</span>
            <div class="flex gap-2">
                <button id="prev-btn" class="px-3 py-1 bg-gray-800 rounded text-sm text-gray-400 hover:text-white disabled:opacity-30">&larr; Précédent</button>
                <button id="next-btn" class="px-3 py-1 bg-gray-800 rounded text-sm text-gray-400 hover:text-white disabled:opacity-30">Suivant &rarr;</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block scripts %}
<script>
let dPage=1, dSort='detected_at', dOrder='DESC', dThreat='', dSearch='';
async function loadDetections() {
    const params = new URLSearchParams({page:dPage,per_page:50,sort:dSort,order:dOrder});
    if(dThreat) params.set('threat_level',dThreat);
    if(dSearch) params.set('search',dSearch);
    try {
        const r = await fetch('/api/detections?'+params);
        const d = await r.json();
        const tbody = document.getElementById('detections-body');
        tbody.innerHTML = (d.data||[]).map(row => `<tr>
            <td class="text-xs whitespace-nowrap">${row.detected_at||''}</td>
            <td class="whitespace-nowrap">${fmtIP(row.src_ip)}</td>
            <td>${fmtScore(row.anomaly_score)}</td>
            <td>${threatBadge(row.threat_level)}</td>
            <td class="text-xs font-mono max-w-[120px] truncate" title="${row.ja4||''}">${row.ja4||''}</td>
            <td class="text-xs max-w-[150px] truncate" title="${row.host||''}">${row.host||''}</td>
            <td>${row.hits||0}</td>
            <td class="text-xs max-w-[150px] truncate">${row.asn_org||''}</td>
            <td>${row.country_code||''}</td>
            <td>${row.recurrence||0}</td>
            <td class="text-xs max-w-[200px] truncate" title="${row.reason||''}">${row.reason||''}</td>
        </tr>`).join('') || '<tr><td colspan="11" class="text-center text-gray-500 py-8">Aucune détection</td></tr>';
        const total = d.total||0;
        document.getElementById('det-info').textContent = `${total} résultats — page ${dPage}/${Math.max(1,Math.ceil(total/50))}`;
        document.getElementById('prev-btn').disabled = dPage <= 1;
        document.getElementById('next-btn').disabled = dPage * 50 >= total;
    } catch(e) { console.error(e); }
}
document.getElementById('prev-btn').onclick = () => { if(dPage>1){dPage--;loadDetections();} };
document.getElementById('next-btn').onclick = () => { dPage++;loadDetections(); };
document.querySelectorAll('[data-sort]').forEach(th => th.onclick = () => {
    const s = th.dataset.sort;
    if(dSort===s) dOrder = dOrder==='DESC'?'ASC':'DESC'; else { dSort=s; dOrder='DESC'; }
    dPage=1; loadDetections();
});
document.querySelectorAll('[data-filter]').forEach(btn => btn.onclick = () => {
    document.querySelectorAll('[data-filter]').forEach(b=>b.classList.remove('active'));
    btn.classList.add('active');
    dThreat = btn.dataset.filter; dPage=1; loadDetections();
});
let searchTimeout;
document.getElementById('search-input').oninput = (e) => {
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(() => { dSearch=e.target.value; dPage=1; loadDetections(); }, 300);
};
loadDetections();
</script>
{% endblock %}