<?php
// Iniciar o reanudar la sesión
session_start();

// Verificar si el usuario está autenticado
if (!isset($_SESSION['AccesoConcedido']) || $_SESSION['AccesoConcedido'] !== true) {
    // Si no está autenticado, redirigir a la página de login
    header("Location: index.php");
    exit;
}

// Aquí puedes añadir cualquier preparación adicional que necesites
// Estas variables ya deberían estar establecidas desde login.php:
// - $_SESSION['usr'] - El nombre de usuario
// - $_SESSION['AccesoConcedido'] - Booleano que indica si el acceso fue concedido
// - $_SESSION['estado_acceso'] - El estado del acceso (1 = exitoso)
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cargando Sistema</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* Estilos para la pantalla de carga */
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            font-family: 'Arial', sans-serif;
        }
        
        .fullscreen-loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #1a2733 0%, #0f3552 100%);
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            opacity: 1;
            transition: opacity 0.5s ease-out;
        }

        .loader-content {
            text-align: center;
            color: white;
        }

        .loader-logo {
            position: relative;
            width: 120px;
            height: 120px;
            margin: 0 auto 30px;
        }

        .loader-circle {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #4BC0C0;
            animation: spin 2s linear infinite;
        }

        .loader-circle:nth-child(2) {
            width: 80%;
            height: 80%;
            top: 10%;
            left: 10%;
            border-top-color: #37b698;
            animation: spin 3s linear infinite;
        }

        .loader-circle:nth-child(3) {
            width: 60%;
            height: 60%;
            top: 20%;
            left: 20%;
            border-top-color: #2e86de;
            animation: spin 1.5s linear infinite;
        }

        .loader-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 30px;
            color: white;
            z-index: 2;
        }

        .progress-container {
            width: 300px;
            height: 4px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
            overflow: hidden;
            margin: 35px auto 15px;
            position: relative;
        }

        .progress-bar {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, #2e86de, #00b894);
            border-radius: 4px;
            transition: width 0.5s ease;
            position: relative;
            overflow: hidden;
        }

        .progress-bar::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(
                90deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.4) 50%,
                rgba(255, 255, 255, 0) 100%
            );
            animation: shimmer 2s infinite;
            transform: translateX(-100%);
        }

        .load-percentage {
            font-size: 18px;
            font-weight: 500;
            margin: 5px 0 20px;
            color: rgba(255, 255, 255, 0.9);
        }

        .loading-text {
            font-size: 14px;
            opacity: 0.7;
            margin-bottom: 5px;
            height: 20px;
        }

        .welcome-message {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: white;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }

        .welcome-message h2 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            font-weight: 600;
        }

        .welcome-message p {
            font-size: 1.2rem;
            opacity: 0.8;
            max-width: 600px;
            margin: 0 auto;
        }

        .pulse {
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }

        .floating-dots {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            overflow: hidden;
            z-index: 1;
        }

        .dot {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            pointer-events: none;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes shimmer {
            100% { transform: translateX(100%); }
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        @keyframes float {
            0% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0); }
        }
        
        /* Este iframe estará oculto pero cargará el dashboard en segundo plano */
        #dashboardFrame {
            position: absolute;
            width: 0;
            height: 0;
            border: 0;
            opacity: 0;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <!-- Pantalla de carga -->
    <div id="fullscreenLoader" class="fullscreen-loader">
        <div class="floating-dots"></div>
        
        <div class="loader-content">
            <div class="loader-logo">
                <i class="fas fa-microscope loader-icon pulse"></i>
                <div class="loader-circle"></div>
                <div class="loader-circle"></div>
                <div class="loader-circle"></div>
            </div>
            
            <h3>Cargando sistema</h3>
            
            <div class="progress-container">
                <div id="progressBar" class="progress-bar"></div>
            </div>
            
            <div id="loadPercentage" class="load-percentage">0%</div>
            <div id="loadingText" class="loading-text">Iniciando sesión...</div>
        </div>
        
        <div id="welcomeMessage" class="welcome-message">
            <h2>¡Bienvenido al Sistema!</h2>
            <p>El portal de evaluación está listo para su uso.</p>
        </div>
    </div>
    
    <!-- iframe oculto para precargar el dashboard -->
    <iframe id="dashboardFrame" src="dashboard.php"></iframe>
    
    <script>
    // Variables globales
    let dashboardLoaded = false;
    let animationComplete = false;
    let dashboardContent = null;
    
    document.addEventListener('DOMContentLoaded', function() {
        // Iniciar la animación de carga y la precarga del dashboard
        startLoadingAnimation();
        
        // Detectar cuando el iframe ha terminado de cargar
        const dashboardFrame = document.getElementById('dashboardFrame');
        dashboardFrame.onload = function() {
            console.log('Dashboard cargado en segundo plano');
            dashboardLoaded = true;
            // Incrementar el progreso más rápido si la animación aún no ha terminado
            accelerateLoadingIfNeeded();
        };

        // También intentar cargar el contenido del dashboard mediante AJAX como respaldo
        loadDashboardContent()
            .then(content => {
                console.log('Dashboard precargado exitosamente mediante AJAX');
                dashboardContent = content;
            })
            .catch(err => {
                console.error('Error precargando dashboard mediante AJAX:', err);
            });
    });

    // Función para cargar el contenido del dashboard mediante AJAX
    function loadDashboardContent() {
        return new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            xhr.open('GET', 'dashboard.php', true);
            xhr.onload = function() {
                if (this.status >= 200 && this.status < 300) {
                    resolve(xhr.response);
                } else {
                    reject({
                        status: this.status,
                        statusText: xhr.statusText
                    });
                }
            };
            xhr.onerror = function() {
                reject({
                    status: this.status,
                    statusText: xhr.statusText
                });
            };
            xhr.send();
        });
    }

    // Función para mostrar el dashboard al final de la animación
    function showDashboard() {
        // Establecer una cookie para indicar que ya se mostró la animación
        document.cookie = "dashboardLoaded=true; path=/";
        
        // Redirigir a dashboard.php
        window.location.href = 'dashboard.php';
    }

    // Función para la animación de carga
    function startLoadingAnimation() {
        // Capturar referencias a elementos DOM
        const loader = document.getElementById('fullscreenLoader');
        const progressBar = document.getElementById('progressBar');
        const loadPercentage = document.getElementById('loadPercentage');
        const loadingText = document.getElementById('loadingText');
        const welcomeMessage = document.getElementById('welcomeMessage');
        
        // Crear el efecto de partículas flotantes
        createFloatingDots();
        
        // Mensajes que se mostrarán durante la carga
        const loadingMessages = [
            "Iniciando sesión...",
            "Verificando credenciales...",
            "Cargando interfaz del sistema...",
            "Estableciendo conexión segura...",
            "Preparando datos de usuario...",
            "Cargando módulos de evaluación...",
            "Sincronizando información...",
            "Cargando trabajos científicos...",
            "Casi listo...",
            "¡Bienvenido al sistema!"
        ];
        
        // Contador para el progreso y velocidad
        let progress = 0;
        let speed = dashboardLoaded ? 15 : 10; // Más rápido si el dashboard ya está cargado
        
        // Actualizar progreso y mensaje periódicamente
        const interval = setInterval(() => {
            progress += speed;
            
            // Si el dashboard ya se cargó, aceleramos
            if (dashboardLoaded && progress < 70) {
                progress = 70; // Saltar a 70%
            }
            
            // Limitar al 100%
            if (progress > 100) progress = 100;
            
            // Actualizar barra de progreso con animación suave
            progressBar.style.width = `${progress}%`;
            
            // Actualizar porcentaje
            loadPercentage.textContent = `${progress}%`;
            
            // Actualizar mensaje de carga con animación
            const messageIndex = Math.floor((progress / 100) * loadingMessages.length - 1);
            if (messageIndex >= 0 && messageIndex < loadingMessages.length) {
                updateLoadingMessage(loadingMessages[messageIndex]);
            }
            
            // Si llegamos al 100%
            if (progress >= 100) {
                clearInterval(interval);
                animationComplete = true;
                
                // Mostrar mensaje de bienvenida final
                loadingText.style.opacity = '0';
                welcomeMessage.style.opacity = '1';
                
                // Después de 1.5 segundos
                setTimeout(() => {
                    // Mostrar el dashboard
                    showDashboard();
                }, 1500);
            }
        }, 300); // Actualizar cada 300ms para una animación más rápida
    }
    
    // Función para acelerar la carga si el dashboard ya está listo
    function accelerateLoadingIfNeeded() {
        if (animationComplete) return; // No hacer nada si la animación ya terminó
        
        const progressBar = document.getElementById('progressBar');
        const loadPercentage = document.getElementById('loadPercentage');
        const currentProgress = parseInt(loadPercentage.textContent);
        
        // Si el progreso es bajo, saltar al 70%
        if (currentProgress < 70) {
            progressBar.style.width = '70%';
            loadPercentage.textContent = '70%';
        }
    }

    // Función para crear los puntos flotantes en el fondo
    function createFloatingDots() {
        const dotsContainer = document.querySelector('.floating-dots');
        const numberOfDots = 50;
        
        // Limpiar dots existentes
        while (dotsContainer.firstChild) {
            dotsContainer.removeChild(dotsContainer.firstChild);
        }
        
        for (let i = 0; i < numberOfDots; i++) {
            const dot = document.createElement('div');
            dot.classList.add('dot');
            
            // Tamaño aleatorio
            const size = Math.random() * 8 + 2; // entre 2px y 10px
            dot.style.width = `${size}px`;
            dot.style.height = `${size}px`;
            
            // Posición aleatoria
            const x = Math.random() * 100;
            const y = Math.random() * 100;
            dot.style.left = `${x}%`;
            dot.style.top = `${y}%`;
            
            // Agregar algo de animación
            dot.style.animation = `float ${Math.random() * 6 + 3}s ease-in-out infinite`;
            dot.style.animationDelay = `${Math.random() * 5}s`;
            
            // Agregar el punto al contenedor
            dotsContainer.appendChild(dot);
        }
    }

    // Función para actualizar el mensaje de carga con animación
    function updateLoadingMessage(message) {
        const loadingText = document.getElementById('loadingText');
        
        // Animación para desvanecer el texto actual
        loadingText.style.opacity = '0';
        
        setTimeout(() => {
            // Actualizar el texto
            loadingText.textContent = message;
            
            // Mostrar el nuevo texto
            loadingText.style.opacity = '1';
        }, 200);
    }
    </script>
</body>
</html>