{% extends "base.html" %}
{% block title %}JA4 SOC — IP {{ ip }}{% endblock %}
{% block content %}
<div class="space-y-6">
    <div class="flex items-center gap-3">
        <a href="/detections" class="text-gray-500 hover:text-gray-300">&larr; Retour</a>
        <h2 class="text-lg font-semibold text-white">Investigation IP : <span class="text-brand-500">{{ ip }}</span></h2>
    </div>
    <!-- KPI Row -->
    <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
        <div class="kpi-card"><div class="text-xs text-gray-500 mb-1">Détections</div><div class="text-xl font-bold text-red-400" id="ip-det-count">—</div></div>
        <div class="kpi-card"><div class="text-xs text-gray-500 mb-1">Pire score</div><div class="text-xl font-bold" id="ip-worst-score">—</div></div>
        <div class="kpi-card"><div class="text-xs text-gray-500 mb-1">Récurrence</div><div class="text-xl font-bold text-yellow-400" id="ip-recurrence">—</div></div>
        <div class="kpi-card"><div class="text-xs text-gray-500 mb-1">Requêtes HTTP</div><div class="text-xl font-bold text-gray-200" id="ip-http-count">—</div></div>
        <div class="kpi-card"><div class="text-xs text-gray-500 mb-1">Scores ML</div><div class="text-xl font-bold text-brand-500" id="ip-score-count">—</div></div>
    </div>

    <!-- Charts Row: Radar + Score timeline -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
        <div class="bg-gray-900 rounded-xl p-5 border border-gray-800">
            <h3 class="text-sm font-medium text-gray-400 mb-3">Profil comportemental (vs baseline)</h3>
            <div id="radar-chart" style="height:320px"></div>
        </div>
        <div class="bg-gray-900 rounded-xl p-5 border border-gray-800">
            <h3 class="text-sm font-medium text-gray-400 mb-3">Scores ML dans le temps</h3>
            <div id="score-chart" style="height:320px"></div>
        </div>
    </div>

    <!-- Detections table -->
    <div class="bg-gray-900 rounded-xl border border-gray-800 overflow-hidden">
        <h3 class="text-sm font-medium text-gray-400 px-5 py-3 border-b border-gray-800">Détections</h3>
        <div class="overflow-x-auto max-h-[40vh] overflow-y-auto">
            <table class="data-table"><thead><tr>
                <th>Date</th><th>Score</th><th>Raw</th><th>Threat</th><th>JA4</th><th>Host</th><th>Hits</th><th>Raison</th>
            </tr></thead><tbody id="det-body"></tbody></table>
        </div>
    </div>

    <!-- AI Features grid -->
    <div class="bg-gray-900 rounded-xl border border-gray-800 overflow-hidden" id="features-section" style="display:none">
        <h3 class="text-sm font-medium text-gray-400 px-5 py-3 border-b border-gray-800">Features AI</h3>
        <div class="p-5 grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3 text-sm" id="features-grid"></div>
    </div>

    <!-- HTTP Logs -->
    <div class="bg-gray-900 rounded-xl border border-gray-800 overflow-hidden">
        <h3 class="text-sm font-medium text-gray-400 px-5 py-3 border-b border-gray-800">Dernières requêtes HTTP (100 max)</h3>
        <div class="overflow-x-auto max-h-[40vh] overflow-y-auto">
            <table class="data-table"><thead><tr>
                <th>Time</th><th>Method</th><th>Host</th><th>Path</th><th>HTTP Ver</th><th>User-Agent</th><th>JA4</th>
            </tr></thead><tbody id="http-body"></tbody></table>
        </div>
    </div>

    <!-- Classify -->
    <div class="bg-gray-900 rounded-xl p-5 border border-gray-800">
        <h3 class="text-sm font-medium text-gray-400 mb-3">Classifier cette IP</h3>
        <div class="flex gap-3 items-center">
            <select id="cls-select" class="px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-sm text-gray-300">
                <option value="bot">🤖 Bot</option><option value="legitimate">✅ Légitime</option><option value="suspicious">⚠️ Suspect</option>
            </select>
            <input type="text" id="cls-comment" placeholder="Commentaire (optionnel)" class="flex-1 px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-sm text-gray-300 focus:border-brand-500 focus:outline-none">
            <button id="cls-btn" class="px-4 py-2 bg-brand-600 text-white rounded-lg text-sm font-medium hover:bg-brand-700">Envoyer</button>
        </div>
        <div id="cls-result" class="mt-2 text-sm"></div>
    </div>
</div>
{% endblock %}
{% block scripts %}
<script>
const IP = "{{ ip }}";
let charts = {};
function initChart(id) {
    const el = document.getElementById(id);
    if (!el) return null;
    if (charts[id]) charts[id].dispose();
    charts[id] = echarts.init(el);
    return charts[id];
}

async function loadIP() {
    try {
        const [d, radar] = await Promise.all([
            fetch(`/api/ip/${encodeURIComponent(IP)}`).then(r=>r.json()),
            fetch(`/api/ip/${encodeURIComponent(IP)}/radar`).then(r=>r.json()),
        ]);

        // KPIs
        document.getElementById('ip-det-count').textContent = d.detections?.length ?? 0;
        document.getElementById('ip-http-count').textContent = d.http_logs?.length ?? 0;
        document.getElementById('ip-score-count').textContent = d.scores?.length ?? 0;
        if (d.recurrence?.length) {
            document.getElementById('ip-recurrence').textContent = d.recurrence[0].recurrence || 0;
            document.getElementById('ip-worst-score').innerHTML = fmtScore(d.recurrence[0].worst_score);
        }

        // Radar chart
        if (radar.features?.length && Object.keys(radar.ip_values).length) {
            const labels = radar.features.map(f => f.replace('_',' '));
            const ipVals = radar.features.map(f => radar.ip_values[f] ?? 0);
            const humanVals = radar.features.map(f => radar.human_baseline[f] ?? 0);
            const botVals = radar.features.map(f => radar.bot_baseline[f] ?? 0);
            // Normalize to 0-1
            const maxVals = radar.features.map((f,i) => Math.max(ipVals[i], humanVals[i], botVals[i], 0.001));
            const norm = (arr) => arr.map((v,i) => +(v/maxVals[i]).toFixed(3));

            const ch = initChart('radar-chart');
            ch.setOption(ecBase({
                tooltip: ecTooltip({}),
                legend: {data:['Cette IP','Humain moyen','Bot moyen'], bottom:0, textStyle:{color:EC_TEXT,fontSize:11}},
                radar: {
                    indicator: labels.map((l,i) => ({name:l, max:1})),
                    shape:'polygon',
                    splitArea:{areaStyle:{color:['rgba(99,102,241,0.02)','rgba(99,102,241,0.04)']}},
                    splitLine:{lineStyle:{color:EC_GRID}},
                    axisLine:{lineStyle:{color:EC_GRID}},
                    axisName:{color:EC_TEXT,fontSize:10},
                },
                series: [{
                    type:'radar',
                    data: [
                        {value:norm(ipVals), name:'Cette IP', lineStyle:{color:'#f97316',width:2}, areaStyle:{color:'rgba(249,115,22,0.15)'}, itemStyle:{color:'#f97316'}},
                        {value:norm(humanVals), name:'Humain moyen', lineStyle:{color:'#22c55e',width:1,type:'dashed'}, areaStyle:{color:'rgba(34,197,94,0.05)'}, itemStyle:{color:'#22c55e'}},
                        {value:norm(botVals), name:'Bot moyen', lineStyle:{color:'#ef4444',width:1,type:'dashed'}, areaStyle:{color:'rgba(239,68,68,0.05)'}, itemStyle:{color:'#ef4444'}},
                    ]
                }]
            }));
        }

        // Score timeline
        if (d.scores?.length) {
            const scores = [...d.scores].reverse();
            const ch = initChart('score-chart');
            ch.setOption(ecBase({
                tooltip: ecTooltip({trigger:'axis'}),
                grid: {left:50,right:20,top:20,bottom:30},
                xAxis: {type:'category', data:scores.map(s=>(s.detected_at||'').substring(11,16)), axisLine:{lineStyle:{color:EC_GRID}}, axisLabel:{color:EC_TEXT}},
                yAxis: {type:'value', min:0, max:1, splitLine:{lineStyle:{color:EC_GRID,type:'dashed'}}, axisLabel:{color:EC_TEXT}},
                series: [{
                    type:'line', data:scores.map(s=>s.anomaly_score), smooth:true,
                    areaStyle:{color:new echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:'rgba(99,102,241,0.3)'},{offset:1,color:'rgba(99,102,241,0.02)'}])},
                    lineStyle:{color:'#6366f1',width:2}, itemStyle:{color:'#6366f1'}, symbol:'circle', symbolSize:4,
                }]
            }));
        }

        // Detections table
        document.getElementById('det-body').innerHTML = (d.detections||[]).map(row => `<tr>
            <td class="text-xs whitespace-nowrap">${row.detected_at||''}</td>
            <td>${fmtScore(row.anomaly_score)}</td>
            <td>${fmtScore(row.raw_anomaly_score)}</td>
            <td>${fmtThreatLink(row.threat_level)}</td>
            <td class="text-xs font-mono max-w-[100px] truncate">${fmtJA4(row.ja4)}</td>
            <td class="text-xs max-w-[120px] truncate">${row.host||''}</td>
            <td>${row.hits||0}</td>
            <td class="text-xs max-w-[200px] truncate">${row.reason||''}</td>
        </tr>`).join('') || '<tr><td colspan="8" class="text-center text-gray-500 py-4">Aucune détection</td></tr>';

        // AI Features
        if (d.ai_features?.length) {
            const f = d.ai_features[0];
            const grid = document.getElementById('features-grid');
            const skip = new Set(['src_ip','window_start','ja4','host','bot_name','src_ip_str']);
            grid.innerHTML = Object.entries(f).filter(([k])=>!skip.has(k)).map(([k,v]) => {
                let val = typeof v === 'number' ? v.toFixed(4) : v;
                let color = 'text-gray-200';
                if (typeof v === 'number' && v > 0.7) color = 'text-red-400';
                else if (typeof v === 'number' && v > 0.4) color = 'text-orange-400';
                let display = `<span class="text-sm ${color} font-mono">${val}</span>`;
                if (k === 'asn_org' && v) display = `<span class="text-sm">${fmtASN(v)}</span>`;
                else if (k === 'country_code' && v) display = `<span class="text-sm">${fmtCountry(v)}</span>`;
                else if (k === 'asn_label' && v) display = `<span class="text-sm">${fmtLabel(v)}</span>`;
                return `<div class="bg-gray-800 rounded-lg p-2"><div class="text-[10px] text-gray-500 truncate">${k}</div>${display}</div>`;
            }).join('');
            document.getElementById('features-section').style.display = '';
        }

        // HTTP logs
        document.getElementById('http-body').innerHTML = (d.http_logs||[]).map(row => `<tr>
            <td class="text-xs whitespace-nowrap">${row.time||''}</td>
            <td class="font-mono text-xs">${row.method||''}</td>
            <td class="text-xs max-w-[120px] truncate">${row.host||''}</td>
            <td class="text-xs max-w-[250px] truncate font-mono" title="${row.path||''}">${row.path||''}</td>
            <td class="font-mono text-xs">${row.http_version||''}</td>
            <td class="text-xs max-w-[200px] truncate">${row.header_user_agent||''}</td>
            <td class="text-xs font-mono">${row.ja4||''}</td>
        </tr>`).join('') || '<tr><td colspan="7" class="text-center text-gray-500 py-4">Aucun log</td></tr>';

    } catch(e) { console.error(e); }
}

// Classify button
document.getElementById('cls-btn').onclick = async () => {
    try {
        const r = await fetch('/api/classify', {method:'POST', headers:{'Content-Type':'application/json'},
            body:JSON.stringify({src_ip:IP, classification:document.getElementById('cls-select').value, comment:document.getElementById('cls-comment').value})});
        const d = await r.json();
        document.getElementById('cls-result').innerHTML = r.ok
            ? `<span class="text-green-400">✓ Classifié : ${d.classification}</span>`
            : `<span class="text-red-400">✗ Erreur : ${d.detail||'unknown'}</span>`;
    } catch(e) { document.getElementById('cls-result').innerHTML = `<span class="text-red-400">✗ ${e}</span>`; }
};

loadIP();
window.addEventListener('resize', () => Object.values(charts).forEach(c => c?.resize()));
</script>
{% endblock %}