<!DOCTYPE html>
<html lang="es" class="{{ 'dark' if tema == 1 else '' }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UTRAU - Panel Operativo</title>

    <!-- Favicon y App Icons -->
    <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='apple-touch-icon.png') }}">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon-32x32.png') }}">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicon-16x16.png') }}">
    <link rel="manifest" href="{{ url_for('static', filename='site.webmanifest') }}">
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">

    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script>
        tailwind.config = { darkMode: 'class', theme: { extend: {} } }
    </script>
</head>
<body class="bg-slate-100 dark:bg-slate-950 text-slate-900 dark:text-slate-100 transition-colors duration-300 min-h-screen">

    <!-- ALERTAS BOT (OCULTAS INICIALMENTE) -->
    <div id="toast-bot" class="fixed top-4 left-1/2 transform -translate-x-1/2 z-[100] hidden bg-red-600 text-white px-6 py-3 rounded-full shadow-2xl font-black text-sm uppercase tracking-widest cursor-pointer hover:scale-105 transition" onclick="window.location.reload()">
        <i class="fa-solid fa-bell fa-shake mr-2"></i> ¡Tenés Novedades! Click para ver.
    </div>

    <nav class="bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 p-4 flex justify-between items-center shadow-sm">
        <div class="flex items-center space-x-3">
            <span class="font-black text-blue-600 dark:text-blue-400">UTRAU</span>
            <span class="text-xs uppercase tracking-widest text-slate-500 hidden md:inline">Panel Operativo</span>
        </div>

        <div class="flex items-center space-x-4">
            {% if session.get('user_rol', 0) >= 3 %}
            <a href="{{ url_for('config.panel') }}" class="px-3 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg text-xs font-black uppercase transition shadow-md flex items-center">
                <i class="fa-solid fa-gears md:mr-2"></i>
                <span class="hidden md:inline">Centro de Mando</span>
            </a>
            {% endif %}

            <a href="{{ url_for('auth.toggle_theme') }}" class="p-2 bg-slate-200 dark:bg-slate-800 rounded-lg hover:bg-slate-300 dark:hover:bg-slate-700 transition" title="Cambiar Tema">
                <i class="fa-solid fa-circle-half-stroke"></i>
            </a>

            <span class="text-xs font-bold uppercase border-l border-slate-300 dark:border-slate-700 pl-4">{{ user_nom }}</span>
            <a href="{{ url_for('auth.logout') }}" class="text-xs font-black text-red-500 uppercase hover:text-red-700 transition">Cerrar Sesión</a>
        </div>
    </nav>

    <main class="p-6 max-w-6xl mx-auto mt-4">
        <h1 class="text-2xl font-black mb-6 uppercase tracking-tight">Resumen Ejecutivo</h1>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
            <div class="bg-white dark:bg-slate-900 p-6 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-sm flex flex-col justify-between">
                <h3 class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2">Conflictos Activos</h3>
                <p class="text-4xl font-black text-red-500">{{ total_conflictos }}</p>
            </div>

            <div class="bg-white dark:bg-slate-900 p-6 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-sm flex flex-col justify-between">
                <h3 class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2">Actividades Futuras</h3>
                <p class="text-4xl font-black text-blue-500">{{ actividades_futuras }}</p>
            </div>

            <div class="bg-white dark:bg-slate-900 p-6 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-sm flex flex-col justify-between">
                <h3 class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2">Compañeros (Padrón)</h3>
                <p class="text-4xl font-black text-emerald-500">{{ total_companeros }}</p>
            </div>
        </div>

        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <a href="{{ url_for('agenda.vista_agenda') }}" class="p-6 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl hover:border-blue-500 transition group flex flex-col items-center text-center shadow-sm relative">
                <!-- Punto Rojo Dinámico -->
                <div id="dot-agenda" class="hidden absolute top-3 right-3 w-3 h-3 bg-red-500 rounded-full animate-ping"></div>
                <i class="fa-solid fa-calendar-days text-4xl mb-4 text-blue-500 group-hover:scale-110 transition"></i>
                <span class="text-xs font-black uppercase tracking-widest text-slate-700 dark:text-slate-300">Agenda Operativa</span>
            </a>

            <a href="{{ url_for('conflictos.index') }}" class="p-6 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl hover:border-red-500 transition group flex flex-col items-center text-center shadow-sm relative">
                <!-- Punto Rojo Dinámico -->
                <div id="dot-conflictos" class="hidden absolute top-3 right-3 w-3 h-3 bg-red-500 rounded-full animate-ping"></div>
                <i class="fa-solid fa-scale-balanced text-4xl mb-4 text-red-500 group-hover:scale-110 transition"></i>
                <span class="text-xs font-black uppercase tracking-widest text-slate-700 dark:text-slate-300">Conflictos</span>
            </a>

            {% for item in menu %}
            <a href="{{ item.vista_destino }}" class="p-6 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl hover:border-blue-500 transition group flex flex-col items-center text-center shadow-sm">
                <i class="{{ item.icono }} text-4xl mb-4 text-blue-500 group-hover:scale-110 transition"></i>
                <span class="text-xs font-black uppercase tracking-widest text-slate-700 dark:text-slate-300">{{ item.nombre_boton }}</span>
            </a>
            {% endfor %}
        </div>
    </main>

    <!-- SCRIPT DEL BOT CENTRAL (HEARTBEAT) -->
    <script>
        setInterval(() => {
            fetch('/agenda/api/verificar_cambios')
            .then(res => res.json())
            .then(data => {
                let hayNovedades = false;

                if (data.agenda > 0) {
                    document.getElementById('dot-agenda').classList.remove('hidden');
                    hayNovedades = true;
                }
                
                if (data.conflictos > 0) {
                    document.getElementById('dot-conflictos').classList.remove('hidden');
                    hayNovedades = true;
                }

                if (hayNovedades) {
                    document.getElementById('toast-bot').classList.remove('hidden');
                }
            })
            .catch(err => console.log("Bot en espera de conexión...", err));
        }, 60000); // Revisa cada 1 minuto
    </script>
</body>
</html>