{% extends "base.html" %}

{% block content %}
<style>
/* Hugging Face Inspired Styles */
.hf-card {
    background-color: #1f2937; /* Tailwind gray-800 */
    border: 1px solid #374151; /* Tailwind gray-700 */
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}
.hf-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.hf-header {
    padding: 1rem 1.5rem;
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: 0.025em;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-transform: uppercase;
}
.hf-tag {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.125rem 0.6rem;
    border-radius: 9999px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
</style>

<div class="space-y-6 pb-12">
    <!-- 1. KILL-SWITCH DR. NEXUM -->
    <div class="hf-card border-red-500/50 shadow-[0_0_20px_rgba(239,68,68,0.15)] bg-gradient-to-br from-gray-900 to-gray-800">
        <div class="hf-header bg-gradient-to-r from-red-900/60 to-orange-900/60 text-red-400 border-b border-red-500/30">
            <svg class="w-6 h-6 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
            KILL-SWITCH DR. NEXUM
        </div>
        <div class="p-6 grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="flex flex-col justify-center items-center p-4 bg-black/40 rounded-xl border border-red-900/30">
                <span class="text-4xl md:text-5xl font-black text-red-500 tracking-tighter" id="countdown">J-X</span>
                <span class="text-xs text-red-400/70 mt-2 uppercase font-bold tracking-widest text-center">avant le 15 nov 2026</span>
            </div>
            <div class="md:col-span-2 space-y-6 flex flex-col justify-center">
                <div>
                    <div class="flex justify-between items-end mb-2">
                        <label class="text-sm font-bold text-gray-300 uppercase tracking-wide">Abonnés YouTube</label>
                        <div class="flex items-center gap-2">
                            <input type="number" id="yt-subs" class="bg-gray-900 text-white text-sm font-mono rounded border border-gray-600 px-2 py-1 w-24 text-right focus:outline-none focus:border-red-500 transition-colors" value="0">
                            <span class="text-gray-500 font-mono text-sm">/ 1000</span>
                        </div>
                    </div>
                    <div class="w-full bg-gray-900 rounded-full h-4 overflow-hidden border border-gray-700">
                        <div id="yt-bar" class="h-full bg-red-500 transition-all duration-700 ease-out" style="width: 0%"></div>
                    </div>
                </div>
                <div>
                    <div class="flex justify-between items-end mb-2">
                        <label class="text-sm font-bold text-gray-300 uppercase tracking-wide">Revenus Mensuels (€)</label>
                        <div class="flex items-center gap-2">
                            <input type="number" id="rev" class="bg-gray-900 text-white text-sm font-mono rounded border border-gray-600 px-2 py-1 w-24 text-right focus:outline-none focus:border-red-500 transition-colors" value="0">
                            <span class="text-gray-500 font-mono text-sm">/ 300</span>
                        </div>
                    </div>
                    <div class="w-full bg-gray-900 rounded-full h-4 overflow-hidden border border-gray-700">
                        <div id="rev-bar" class="h-full bg-red-500 transition-all duration-700 ease-out" style="width: 0%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 2. AGENTS -->
    <div class="w-full overflow-x-auto hide-scrollbar pb-2">
        <div class="flex space-x-4 min-w-max" id="agents-container">
            <!-- Rendered by JS -->
            <div class="text-gray-500 italic text-sm p-4">Chargement des agents...</div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Main Column -->
        <div class="lg:col-span-2 space-y-6">
            <!-- 3. REGISTRE PORTS -->
            <div class="hf-card">
                <div class="hf-header bg-gray-800 text-gray-200 border-b border-gray-700">
                    <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
                    Registre Ports
                </div>
                <div class="p-6 bg-gray-900">
                    <div id="ports-grid" class="flex flex-wrap gap-2">
                        <!-- Rendered by JS -->
                        <div class="text-gray-500 italic text-sm">Chargement des ports...</div>
                    </div>
                </div>
            </div>

            <!-- 5. RÈGLES INFRA -->
            <div class="hf-card">
                <div class="hf-header bg-gray-800 text-gray-200 border-b border-gray-700">
                    <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path></svg>
                    Règles Infra
                </div>
                <div class="divide-y divide-gray-700/50 bg-gray-900" id="infra-accordion">
                    <!-- Rendered by JS -->
                    <div class="p-4 text-gray-500 italic text-sm">Chargement de l'infrastructure...</div>
                </div>
            </div>
        </div>

        <!-- Sidebar Column -->
        <div class="space-y-6">
            <!-- 7. RACCOURCIS ADMIN -->
            <div class="hf-card">
                <div class="hf-header bg-gray-800 text-gray-200 border-b border-gray-700">
                    <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                    Raccourcis Admin
                </div>
                <div class="p-4 bg-gray-900 grid grid-cols-2 gap-3">
                    <a href="/editor/infra" class="bg-gray-800 hover:bg-gray-700 border border-gray-700 text-gray-200 text-xs font-bold uppercase tracking-wider py-3 px-2 rounded-lg text-center transition">Éditeur Infra</a>
                    <a href="/keys" class="bg-gray-800 hover:bg-gray-700 border border-gray-700 text-gray-200 text-xs font-bold uppercase tracking-wider py-3 px-2 rounded-lg text-center transition">Gestion Clés</a>
                    <a href="/audit" class="bg-gray-800 hover:bg-gray-700 border border-gray-700 text-gray-200 text-xs font-bold uppercase tracking-wider py-3 px-2 rounded-lg text-center transition">Logs Complets</a>
                    <a href="/docs" class="bg-gray-800 hover:bg-gray-700 border border-gray-700 text-gray-200 text-xs font-bold uppercase tracking-wider py-3 px-2 rounded-lg text-center transition" target="_blank">Docs API</a>
                </div>
            </div>

            <!-- 4. STACK LLM -->
            <div class="hf-card border-blue-500/30">
                <div class="hf-header bg-blue-900/40 text-blue-400 border-b border-blue-500/30">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
                    Stack LLM
                </div>
                <div class="p-5 space-y-4 bg-gray-900" id="llm-stack">
                    <div class="animate-pulse space-y-3">
                        <div class="h-4 bg-gray-800 rounded w-3/4"></div>
                        <div class="h-4 bg-gray-800 rounded w-1/2"></div>
                    </div>
                </div>
            </div>

            <!-- 6. AUDIT RÉCENT -->
            <div class="hf-card">
                <div class="hf-header bg-gray-800 text-gray-200 border-b border-gray-700">
                    <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                    Audit Récent
                </div>
                <div class="p-5 bg-gray-900">
                    <div class="relative border-l-2 border-gray-800 ml-3 space-y-6" id="audit-timeline">
                        <!-- Rendered by JS -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // --- DR NEXUM COUNTDOWN & BARS ---
    function updateDrNexum() {
        const ytInput = document.getElementById('yt-subs');
        const revInput = document.getElementById('rev');
        const yt = parseInt(ytInput.value) || 0;
        const rev = parseInt(revInput.value) || 0;
        
        localStorage.setItem('dr_nexum_yt', yt);
        localStorage.setItem('dr_nexum_rev', rev);
        
        const updateBar = (id, val, max) => {
            const pct = Math.min(100, Math.max(0, (val / max) * 100));
            const bar = document.getElementById(id);
            bar.style.width = pct + '%';
            
            let colorClass = 'bg-red-500';
            if (pct >= 80) colorClass = 'bg-green-500';
            else if (pct >= 50) colorClass = 'bg-orange-500';
            
            bar.className = `h-full transition-all duration-700 ease-out ${colorClass}`;
        };
        
        updateBar('yt-bar', yt, 1000);
        updateBar('rev-bar', rev, 300);
    }

    function initDrNexum() {
        const ytInput = document.getElementById('yt-subs');
        const revInput = document.getElementById('rev');
        ytInput.value = localStorage.getItem('dr_nexum_yt') || 0;
        revInput.value = localStorage.getItem('dr_nexum_rev') || 0;
        
        ytInput.addEventListener('input', updateDrNexum);
        revInput.addEventListener('input', updateDrNexum);
        updateDrNexum();

        const targetDate = new Date('2026-11-15T00:00:00');
        const today = new Date();
        const diff = targetDate - today;
        const days = Math.ceil(diff / (1000 * 60 * 60 * 24));
        document.getElementById('countdown').textContent = `J-${Math.max(0, days)}`;
    }

    // --- FORMATTERS & STYLES ---
    function relativeTime(dateStr) {
        const date = new Date(dateStr);
        const diff = Math.floor((new Date() - date) / 1000);
        if (diff < 60) return "il y a quelques s";
        if (diff < 3600) return `il y a ${Math.floor(diff / 60)} min`;
        if (diff < 86400) return `il y a ${Math.floor(diff / 3600)} h`;
        return `il y a ${Math.floor(diff / 86400)} j`;
    }

    const agentColors = {
        'claude': { bg: 'bg-blue-900/40', text: 'text-blue-400', border: 'border-blue-500/30', tag: 'bg-blue-500/20 text-blue-400 border border-blue-500/30' },
        'gemini': { bg: 'bg-green-900/40', text: 'text-green-400', border: 'border-green-500/30', tag: 'bg-green-500/20 text-green-400 border border-green-500/30' },
        'hermes-tt': { bg: 'bg-orange-900/40', text: 'text-orange-400', border: 'border-orange-500/30', tag: 'bg-orange-500/20 text-orange-400 border border-orange-500/30' },
        'hermes-nyora': { bg: 'bg-purple-900/40', text: 'text-purple-400', border: 'border-purple-500/30', tag: 'bg-purple-500/20 text-purple-400 border border-purple-500/30' },
        'hermes-perso': { bg: 'bg-cyan-900/40', text: 'text-cyan-400', border: 'border-cyan-500/30', tag: 'bg-cyan-500/20 text-cyan-400 border border-cyan-500/30' }
    };

    function getAgentStyle(name) {
        const key = name.toLowerCase();
        for(let k in agentColors) {
            if(key.includes(k)) return agentColors[k];
        }
        return { bg: 'bg-gray-800', text: 'text-gray-200', border: 'border-gray-700', tag: 'bg-gray-700 text-gray-300 border border-gray-600' };
    }

    // --- FETCH DATA ---
    async function fetchDashboardData() {
        const fetchOpts = { credentials: 'omit' }; // Using omit because standard cookie auth fails on /api routes requiring X-API-Key
        
        // Wait, the user explicitly asked for "credentials: 'include'"
        const userOpts = { credentials: 'include' };
        
        try {
            // Using Promise.allSettled to handle individual failures if any endpoint rejects cookies
            const [auditRes, portsRes, llmRes, infraRes] = await Promise.allSettled([
                fetch('/api/audit', userOpts),
                fetch('/api/ports', userOpts),
                fetch('/api/rules/llm', userOpts),
                fetch('/api/rules/infra', userOpts)
            ]);
            
            const extractData = async (res, fallback) => {
                if (res.status === 'fulfilled' && res.value.ok) {
                    return await res.value.json();
                }
                return fallback;
            };

            // Notice: /api/audit is not defined in api.py, only /audit in admin.py which returns HTML.
            // Oh, let's inject Jinja variables as fallback if fetch fails (401 or 404).
            // This guarantees the page works even if the fetch fails due to X-API-Key issues.
            const auditData = await extractData(auditRes, {{ logs | tojson | safe | default('[]') }});
            const infraData = await extractData(infraRes, {{ rules.infra | tojson | safe | default('{}') }});
            const llmData = await extractData(llmRes, {{ rules.llm | tojson | safe | default('{}') }});
            const portsData = await extractData(portsRes, {});

            renderAgents(auditData);
            renderPorts(portsData);
            renderLLM(llmData);
            renderInfra(infraData);
            renderAudit(auditData);
        } catch (e) {
            console.error("Fetch error", e);
        }
    }

    // --- RENDERERS ---
    function renderAgents(auditData) {
        const container = document.getElementById('agents-container');
        const agents = [
            { name: 'Claude', id: 'claude', scopes: ['infra', 'llm', 'nyora', 'tt', 'perso'] },
            { name: 'Gemini', id: 'gemini', scopes: ['infra', 'llm', 'nyora'] },
            { name: 'Hermes-TT', id: 'hermes-tt', scopes: ['tt'] },
            { name: 'Hermes-Nyora', id: 'hermes-nyora', scopes: ['nyora', 'infra'] },
            { name: 'Hermes-Perso', id: 'hermes-perso', scopes: ['perso'] }
        ];

        let html = '';
        agents.forEach(ag => {
            const style = getAgentStyle(ag.id);
            const lastLog = auditData && auditData.find ? auditData.find(l => l.agent_name.toLowerCase().includes(ag.id)) : null;
            
            const active = lastLog && (new Date() - new Date(lastLog.timestamp)) < 86400000;
            const statusColor = active ? 'bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.8)]' : 'bg-gray-600';
            const lastTime = lastLog ? relativeTime(lastLog.timestamp) : 'Jamais';
            
            const tagsHtml = ag.scopes.map(s => `<span class="hf-tag ${style.tag}">${s}</span>`).join('');

            html += `
            <div class="hf-card w-72 flex-shrink-0 ${style.border} bg-gray-900">
                <div class="hf-header ${style.bg} ${style.text} border-b ${style.border} flex justify-between">
                    <span class="tracking-widest">${ag.name}</span>
                    <span class="w-2.5 h-2.5 rounded-full ${statusColor}"></span>
                </div>
                <div class="p-5">
                    <div class="flex flex-wrap gap-2 mb-6 h-12 align-top">
                        ${tagsHtml}
                    </div>
                    <div class="flex justify-between items-center border-t border-gray-800 pt-3">
                        <span class="text-xs font-bold text-gray-500 uppercase tracking-widest">Activité</span>
                        <span class="text-xs font-mono text-gray-300">${lastTime}</span>
                    </div>
                </div>
            </div>`;
        });
        container.innerHTML = html;
    }

    function renderPorts(portsData) {
        const container = document.getElementById('ports-grid');
        const explicitFree = [3091, 3001, 3002, 3015];
        const allPorts = new Set([...explicitFree]);
        for(let i=3100; i<=3199; i++) allPorts.add(i);
        
        // Add occupied if they are not in the standard set
        if (portsData) {
            Object.keys(portsData).forEach(p => allPorts.add(parseInt(p)));
        }

        const sortedPorts = Array.from(allPorts).sort((a,b) => a-b);
        let html = '';
        
        sortedPorts.forEach(port => {
            const service = portsData ? portsData[port] : null;
            if (service) {
                // Occupied - Red Chip
                html += `
                <div class="hf-tag bg-red-900/40 text-red-400 border border-red-500/40 gap-1.5" title="${service}">
                    <span class="w-1.5 h-1.5 rounded-full bg-red-500 animate-pulse"></span>
                    <span class="font-mono text-xs">${port}</span>
                    <span class="text-red-400/60 font-medium text-[10px] hidden sm:inline">${service}</span>
                </div>`;
            } else {
                // Free - Gray Chip
                html += `
                <div class="hf-tag bg-gray-800 text-gray-500 border border-gray-700 font-mono text-xs">
                    ${port}
                </div>`;
            }
        });
        container.innerHTML = html;
    }

    function renderLLM(data) {
        const container = document.getElementById('llm-stack');
        if (!data || Object.keys(data).length === 0) {
            container.innerHTML = '<div class="text-gray-500 italic text-sm">Données indisponibles</div>';
            return;
        }

        const rows = [
            { label: 'Modèle Actif', value: data['modele_par_defaut'] || data['modele'] || 'N/A' },
            { label: 'Provider', value: data['provider'] || 'N/A' },
            { label: 'Budget Mensuel', value: data['budget'] || 'N/A' },
            { label: 'Endpoint Bifrost', value: data['endpoint'] || data['endpoint_interne'] || 'N/A' },
            { label: 'Règle Vision', value: data['vision'] || 'N/A' }
        ];

        let html = '<div class="space-y-3">';
        rows.forEach(r => {
            html += `
            <div class="flex justify-between items-start border-b border-gray-800 pb-2 last:border-0 last:pb-0">
                <span class="text-xs font-bold text-blue-500/70 uppercase tracking-wider w-1/3">${r.label}</span>
                <span class="text-sm font-mono text-blue-100 text-right w-2/3 break-words">${r.value}</span>
            </div>`;
        });
        html += '</div>';
        container.innerHTML = html;
    }

    function renderInfra(data) {
        const container = document.getElementById('infra-accordion');
        if (!data || Object.keys(data).length === 0) {
            container.innerHTML = '<div class="p-4 text-gray-500 italic text-sm">Aucune règle définie</div>';
            return;
        }

        let html = '';
        Object.keys(data).forEach(key => {
            const val = data[key];
            let contentHtml = '';
            
            if (typeof val === 'object' && val !== null) {
                let rows = '';
                for (let k in val) {
                    rows += `
                    <tr class="border-b border-gray-800 last:border-0 hover:bg-gray-800/50 transition">
                        <td class="py-2.5 px-3 text-xs font-bold text-gray-500 uppercase tracking-widest w-1/3">${k}</td>
                        <td class="py-2.5 px-3 text-sm font-mono text-gray-300 w-2/3">${val[k]}</td>
                    </tr>`;
                }
                contentHtml = `<table class="w-full text-left">${rows}</table>`;
            } else {
                contentHtml = `<p class="text-sm font-mono text-gray-300 p-3">${val}</p>`;
            }

            html += `
            <div class="group border-b border-gray-800/50 last:border-0">
                <button class="w-full px-5 py-4 text-left font-bold text-gray-300 hover:bg-gray-800 transition focus:outline-none flex justify-between items-center" onclick="this.nextElementSibling.classList.toggle('hidden')">
                    <span class="uppercase tracking-widest text-sm">${key}</span>
                    <svg class="w-4 h-4 text-gray-500 transform group-focus-within:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                </button>
                <div class="bg-gray-900/80 hidden">
                    ${contentHtml}
                </div>
            </div>`;
        });
        container.innerHTML = html;
    }

    function renderAudit(data) {
        const container = document.getElementById('audit-timeline');
        if (!data || !data.slice) {
            container.innerHTML = '<p class="text-sm text-gray-500 italic">Erreur de lecture des logs</p>';
            return;
        }

        const sliced = data.slice(0, 15);
        if (sliced.length === 0) {
            container.innerHTML = '<p class="text-sm text-gray-500 italic">Aucun log récent</p>';
            return;
        }

        let html = '';
        sliced.forEach(log => {
            const style = getAgentStyle(log.agent_name);
            html += `
            <div class="relative pl-6">
                <div class="absolute -left-2 mt-1.5 w-4 h-4 rounded-full ${style.bg} border-4 border-gray-900 shadow-sm z-10"></div>
                <div class="flex flex-col sm:flex-row sm:justify-between sm:items-baseline gap-1 mb-1">
                    <span class="hf-tag ${style.tag} w-max">${log.agent_name}</span>
                    <span class="text-[10px] font-mono text-gray-500 uppercase tracking-wider">${relativeTime(log.timestamp)}</span>
                </div>
                <p class="text-sm text-gray-400 mt-1">Scope ciblé : <strong class="text-gray-200 uppercase tracking-wide text-xs">${log.scope}</strong></p>
            </div>`;
        });
        container.innerHTML = html;
    }

    // Init
    initDrNexum();
    fetchDashboardData();
</script>
{% endblock %}