<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Panel Administrador</title>
    <!-- Importar SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <?php 
    // Incluir verificación de administrador
    include 'verificar_admin.php'; 
    ?>
    <link rel="stylesheet" href="panel_admin.css" />
</head>
<body>
    <div class="container">
        <!-- Header -->
        <div class="header">
            <h1>Panel de Administrador</h1>
            <div class="user-session">
                <div class="usuario-label">
                Admin: <?php echo htmlspecialchars($_SESSION['nombre']); ?>
                </div>
                <button class="btn cerrar" onclick="location.href='logout.php'">Cerrar Sesión</button>
            </div>
        </div>

        <!-- Navegación -->
        <div class="section">
            <div class="section-header">
                <h2>Módulos de Registros</h2>
            </div>
            <div class="section-content">
                <div class="nav-grid">
                    <a href="registro_crud.php" class="nav-card users">
                        <div class="nav-card-icon">👥</div>
                        <div class="nav-card-content">
                            <h3>Usuarios</h3>
                            <p>Gestión de usuarios del sistema SIAPOL</p>
                        </div>
                    </a>
                    <a href="registro_crud_accesos.php" class="nav-card accesos">
                        <div class="nav-card-icon">🔐</div>
                        <div class="nav-card-content">
                            <h3>Tipos de Acceso</h3>
                            <p>Gestión de perfiles de acceso al SIAPOL</p>
                        </div>
                    </a>
                    <a href="registro_crud_materias.php" class="nav-card materias">
                        <div class="nav-card-icon">📚</div>
                        <div class="nav-card-content">
                            <h3>Materias</h3>
                            <p>Gestión de materias por tipo de acceso</p>
                        </div>
                    </a>
                    <a href="registro_crud_preguntas.php" class="nav-card preguntas">
                        <div class="nav-card-icon">❓</div>    
                        <div class="nav-card-content">
                            <h3>Preguntas</h3>
                            <p>Gestión del banco de preguntas por materia</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>


        <!-- herramientas admin -->
        <div class="section">
            <div class="section-header">
                <h2>Mensajeria Masiva</h2>
                <button onclick="window.location.href='envio_whatsapp.php'" class="btn-envio-whatsapp">WhatsApp</button>
            </div>
        </div>


        <!-- Estadísticas -->
        <div class="section">
            <div class="section-header">
                <h2>Resumen General</h2>
                <div class="btn-derecha">
                    <button class="refresh-btn" onclick="refreshData()">Actualizar</button>
                    
                </div>
            </div>

            <div class="section-content">
                <div class="stats-grid">
                    <div class="stat-card usuarios">
                        <div class="stat-icon">👥</div>
                        <div class="stat-number" id="total-usuarios">0</div>
                        <div class="stat-label">Usuarios</div>
                    </div>
                    <div class="stat-card accesos">
                        <div class="stat-icon">🔐</div>
                        <div class="stat-number" id="total-accesos">0</div>
                        <div class="stat-label">Accesos</div>
                    </div>
                    <div class="stat-card materias">
                        <div class="stat-icon">📚</div>
                        <div class="stat-number" id="total-materias">0</div>
                        <div class="stat-label">Materias</div>
                    </div>
                    <div class="stat-card preguntas">
                        <div class="stat-icon">❓</div>
                        <div class="stat-number" id="total-preguntas">0</div>
                        <div class="stat-label">Preguntas</div>
                    </div>                    
                </div>
            </div>
        </div>

        <!-- Tablas Detalladas -->
        <div class="section">
            <div class="section-header">
                <h2>Análisis Detallado</h2>
            </div>
            <div class="section-content">
                <div class="tables-grid">
                    <!-- Usuarios por Tipo de Acceso -->
                    <div class="table-container">
                        <div class="table-header">
                            <h3>Usuarios por Tipo de Acceso</h3>
                        </div>
                        <div class="table-wrapper">
                            <table>
                                <thead>
                                    <tr>
                                        <th>Código</th>
                                        <th>Tipo de Acceso</th>
                                        <th>Usuarios</th>
                                        <th>Estado</th>
                                    </tr>
                                </thead>
                                <tbody id="usuarios-por-acceso">
                                    <tr>
                                        <td colspan="4" style="text-align: center; padding: 20px; color: #666;">
                                            Cargando datos...
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Preguntas por Materia -->
                    <div class="table-container">
                        <div class="table-header">
                            <h3>Preguntas por Materia</h3>
                        </div>
                        <div class="table-wrapper">
                            <table>
                                <thead>
                                    <tr>
                                        <th>Código</th>
                                        <th>Materia</th>
                                        <th>Preguntas</th>
                                        <th>Config. Examen</th>
                                    </tr>
                                </thead>
                                <tbody id="preguntas-por-materia">
                                    <tr>
                                        <td colspan="4" style="text-align: center; padding: 20px; color: #666;">
                                            Cargando datos...
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Variable para controlar si es carga inicial o actualización manual
        let isManualRefresh = false;

        function cargarDatosIniciales() {
            console.log('Cargando datos iniciales...');
            
            fetch('obtener_estadisticas.php')
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.error) {
                        throw new Error(data.error);
                    }
                    actualizarDatosReales(data);
                })
                .catch(error => {
                    console.error('Error al cargar datos iniciales:', error);
                    mostrarTablasSinDatos();
                });
        }

        function refreshData() {
            console.log('Actualizando datos desde la base de datos...');
            
            // Marcar como actualización manual
            isManualRefresh = true;

            fetch('obtener_estadisticas.php')
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.error) {
                        throw new Error(data.error);
                    }
                    actualizarDatosReales(data);

                    // Solo mostrar mensaje si es actualización manual
                    if (isManualRefresh) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Datos actualizados',
                            text: 'La información se ha refrescado correctamente.',
                            timer: 4000,
                            timerProgressBar: true,
                            showConfirmButton: false,
                            width: '400px'
                        });
                        isManualRefresh = false; // Resetear la bandera
                    }
                })
                .catch(error => {
                    console.error('Error al obtener datos:', error);
                    
                    // Solo mostrar error si es actualización manual
                    if (isManualRefresh) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'No se pudo actualizar los datos: ' + error.message,
                            confirmButtonText: 'Cerrar',
                            width: '400px'
                        });
                        isManualRefresh = false; // Resetear la bandera
                    }
                    
                    // Mostrar tablas vacías en lugar de datos de ejemplo
                    mostrarTablasSinDatos();
                });
        }

        function mostrarTablasSinDatos() {
            // Mostrar 0 en estadísticas
            document.getElementById('total-usuarios').textContent = '0';
            document.getElementById('total-preguntas').textContent = '0';
            document.getElementById('total-materias').textContent = '0';
            document.getElementById('total-accesos').textContent = '0';

            // Mostrar mensaje de sin datos en tablas
            const tbodyUsuarios = document.getElementById('usuarios-por-acceso');
            tbodyUsuarios.innerHTML = `
                <tr>
                    <td colspan="4" style="text-align: center; padding: 20px; color: #666;">
                        No hay datos disponibles
                    </td>
                </tr>
            `;

            const tbodyPreguntas = document.getElementById('preguntas-por-materia');
            tbodyPreguntas.innerHTML = `
                <tr>
                    <td colspan="4" style="text-align: center; padding: 20px; color: #666;">
                        No hay datos disponibles
                    </td>
                </tr>
            `;
        }

        function actualizarDatosReales(data) {
            // Actualizar estadísticas generales
            document.getElementById('total-usuarios').textContent = data.total_usuarios || '0';
            document.getElementById('total-preguntas').textContent = data.total_preguntas || '0';
            document.getElementById('total-materias').textContent = data.total_materias || '0';
            document.getElementById('total-accesos').textContent = data.total_accesos || '0';

            // Actualizar tabla de usuarios por acceso
            const tbodyUsuarios = document.getElementById('usuarios-por-acceso');
            tbodyUsuarios.innerHTML = '';
            
            if (data.usuarios_por_acceso && data.usuarios_por_acceso.length > 0) {
                data.usuarios_por_acceso.forEach(tipo => {
                    const row = document.createElement('tr');
                    const estado = tipo.total_usuarios > 0 ? 'active' : 'inactive';
                    const estadoTexto = `${tipo.usuarios_habilitados || 0}/${tipo.total_usuarios || 0}`;
                    
                    row.innerHTML = `
                        <td><strong>${tipo.cod_acceso || '-'}</strong></td>
                        <td>${tipo.tipo_acceso || '-'}</td>
                        <td>${tipo.total_usuarios || 0}</td>
                        <td>
                            <span class="badge ${estado}">
                                ${estadoTexto} habilitados
                            </span>
                        </td>
                    `;
                    tbodyUsuarios.appendChild(row);
                });
                
                // Fila total usuarios
                const totalRow = document.createElement('tr');
                totalRow.className = 'total-row';
                totalRow.innerHTML = `
                    <td><strong>TOTAL</strong></td>
                    <td><strong>Todos los tipos</strong></td>
                    <td><strong>${data.total_usuarios || 0}</strong></td>
                    <td><strong>-</strong></td>
                `;
                tbodyUsuarios.appendChild(totalRow);
            } else {
                tbodyUsuarios.innerHTML = `
                    <tr>
                        <td colspan="4" style="text-align: center; padding: 20px; color: #666;">
                            No hay tipos de acceso registrados
                        </td>
                    </tr>
                `;
            }

            // Actualizar tabla de preguntas por materia
            const tbodyPreguntas = document.getElementById('preguntas-por-materia');
            tbodyPreguntas.innerHTML = '';
            
            if (data.preguntas_por_materia && data.preguntas_por_materia.length > 0) {
                data.preguntas_por_materia.forEach(materia => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td><strong>${materia.cod_materia || '-'}</strong></td>
                        <td>${materia.nom_materia || '-'}</td>
                        <td>${materia.total_preguntas_reales || 0}</td>
                        <td>${materia.cant_pregunta || 0} (examen)</td>
                    `;
                    tbodyPreguntas.appendChild(row);
                });
                
                // Fila total preguntas
                const totalPreguntasRow = document.createElement('tr');
                totalPreguntasRow.className = 'total-row';
                totalPreguntasRow.innerHTML = `
                    <td><strong>TOTAL</strong></td>
                    <td><strong>Todas las materias</strong></td>
                    <td><strong>${data.total_preguntas || 0}</strong></td>
                    <td><strong>-</strong></td>
                `;
                tbodyPreguntas.appendChild(totalPreguntasRow);
            } else {
                tbodyPreguntas.innerHTML = `
                    <tr>
                        <td colspan="4" style="text-align: center; padding: 20px; color: #666;">
                            No hay materias registradas
                        </td>
                    </tr>
                `;
            }

            console.log('Datos actualizados correctamente:', data.ultima_actualizacion || 'Sin timestamp');
        }

        // Inicializar cuando la página esté cargada
        document.addEventListener('DOMContentLoaded', function() {
            // Cargar datos iniciales sin mostrar mensaje
            cargarDatosIniciales();
            
            // Auto-refresh cada 5 minutos (solo carga silenciosa)
            setInterval(() => {
                isManualRefresh = false; // Asegurar que sea silencioso
                cargarDatosIniciales();
            }, 5 * 60 * 1000);
        });
    </script>
</body>
</html>