// Variables globales
let activeEvaluators = [];
let totalPapers = 0;
let assignedPapers = 0;
let pendingPapers = 0;
let isAssigning = false;
// Objeto para datos de carga de trabajo - AÑADIDO
let workloadData = {};

// Función para inicializar los evaluadores activos
function initializeEvaluators(evaluators) {
    activeEvaluators = evaluators;
    console.log("Evaluadores activos cargados:", activeEvaluators);
    
    // Inicializar workloadData obteniendo los trabajos asignados de cada evaluador
    evaluators.forEach(evaluator => {
        // Intentar obtener el contador de trabajos asignados para este evaluador
        // Si la propiedad workload no existe, buscará en el DOM un elemento con el id correspondiente
        if (typeof evaluator.workload !== 'undefined') {
            workloadData[evaluator.id] = evaluator.workload;
        } else {
            // Buscar en la tabla de trabajos para contar asignaciones por evaluador
            const assignedCount = countAssignedPapers(evaluator.id);
            workloadData[evaluator.id] = assignedCount;
        }
    });
    
    console.log("Datos de carga de trabajo inicializados:", workloadData);
    
    // Inicializar contadores
    const totalCountElement = document.getElementById('total-count');
    const assignedCountElement = document.getElementById('assigned-count');
    const pendingCountElement = document.getElementById('pending-count');
    
    if (totalCountElement && assignedCountElement && pendingCountElement) {
        totalPapers = parseInt(totalCountElement.innerText);
        assignedPapers = parseInt(assignedCountElement.innerText);
        pendingPapers = parseInt(pendingCountElement.innerText);
    }
    
    // Inicializar eventos después de que el DOM esté completamente cargado
    initializeEvents();
    
    // Asegurarse de que el contenedor del gráfico de carga existe antes de inicializarlo
    ensureWorkloadChartExists();
    
    // Inicializar gráfico de carga de trabajo después de asegurar que el contenedor existe
    initializeWorkloadChart();
}

// Función para contar los trabajos asignados a un evaluador específico
function countAssignedPapers(evaluatorId) {
    // Buscar en la tabla de trabajos
    const tables = document.querySelectorAll('table');
    let count = 0;
    
    // Revisar todas las tablas en busca de asignaciones
    tables.forEach(table => {
        const rows = table.querySelectorAll('tr.paper-row');
        
        rows.forEach(row => {
            // Buscar el badge del evaluador en esta fila
            const evaluatorBadges = row.querySelectorAll('.evaluator-badge.assigned');
            
            evaluatorBadges.forEach(badge => {
                // Verificar si el badge pertenece al evaluador que estamos contando
                if (badge.getAttribute('data-evaluator-id') == evaluatorId) {
                    count++;
                }
            });
        });
    });
    
    return count;
}

// Asegurarse de que existe el contenedor del gráfico de carga
function ensureWorkloadChartExists() {
    const workloadCard = document.getElementById('evaluator-workload');
    if (workloadCard) {
        // Asegurarse de que el card-body está desplegado/activo
        const cardBody = workloadCard.querySelector('.card-body');
        if (cardBody) {
            cardBody.classList.add('active');
            
            // Verificar si ya existe el contenedor del gráfico
            if (!document.getElementById('workload-chart')) {
                console.log("Creando contenedor para el gráfico de carga de trabajo...");
                const chartDiv = document.createElement('div');
                chartDiv.id = 'workload-chart';
                chartDiv.className = 'workload-chart';
                // Insertarlo como primer hijo del cardBody
                if (cardBody.firstChild) {
                    cardBody.insertBefore(chartDiv, cardBody.firstChild);
                } else {
                    cardBody.appendChild(chartDiv);
                }
                console.log("Contenedor de gráfico de carga añadido");
            } else {
                console.log("El contenedor del gráfico ya existe");
            }
        } else {
            console.warn("No se encontró card-body en evaluator-workload");
        }
    } else {
        console.warn("No se encontró el elemento evaluator-workload");
    }
}

// Inicializar todos los eventos
// Inicializar todos los eventos
function initializeEvents() {
    console.log("Inicializando eventos...");
    
    // Asignar eventos para los botones de toggle de las tarjetas
    const toggleButtons = document.querySelectorAll('.card-toggle');
    toggleButtons.forEach(button => {
        // Eliminar eventos anteriores si existen para evitar duplicados
        button.removeEventListener('click', function() {
            toggleCard(this);
        });
        
        // Agregar el evento de clic
        button.addEventListener('click', function(event) {
            // Prevenir comportamiento por defecto
            event.preventDefault();
            // Llamar a la función toggle pasando el botón como referencia
            toggleCard(this);
        });
        
        console.log("Evento toggle asignado a:", button);
    });
    
    // Asignar evento para el botón de asignación
    const assignBtn = document.getElementById('assign-btn');
    if (assignBtn) {
        assignBtn.addEventListener('click', function(event) {
            event.preventDefault();
            showAssignmentAnimation();
        });
        console.log("Evento asignado al botón de asignación");
    } else {
        console.warn("No se encontró el botón de asignación");
    }
    
    // Asignar evento para el botón de reinicio
    const resetBtn = document.getElementById('reset-btn');
    if (resetBtn) {
        resetBtn.addEventListener('click', function(event) {
            event.preventDefault();
            resetAssignments();
        });
        console.log("Evento asignado al botón de reinicio");
    } else {
        console.warn("No se encontró el botón de reinicio");
    }
    
    // Buscar tarjetas que deberían estar abiertas por defecto
    const defaultOpenCards = document.querySelectorAll('.card.default-open');
    defaultOpenCards.forEach(card => {
        const body = card.querySelector('.card-body');
        const toggleBtn = card.querySelector('.card-toggle');
        
        if (body && !body.classList.contains('active')) {
            body.classList.add('active');
            
            // Actualizar el botón si existe
            if (toggleBtn) {
                const icon = toggleBtn.querySelector('i');
                const text = toggleBtn.querySelector('span');
                
                if (icon) {
                    icon.classList.remove('fa-chevron-down');
                    icon.classList.add('fa-chevron-up');
                }
                
                if (text) {
                    text.innerText = 'Ocultar';
                }
            }
        }
    });
    
    console.log("Eventos inicializados correctamente");
}

// Función para toggle de los paneles de áreas
// Función para toggle de los paneles de áreas
function toggleCard(button) {
    console.log("Toggle card llamado", button);
    
    // Obtener la tarjeta (card) relacionada con el botón
    const card = button.closest('.card');
    if (!card) {
        console.error("No se pudo encontrar el elemento card padre");
        return;
    }
    
    // Obtener el cuerpo (body) de la tarjeta
    const body = card.querySelector('.card-body');
    if (!body) {
        console.error("No se pudo encontrar el elemento card-body dentro de la tarjeta");
        return;
    }
    
    // Obtener elementos de icono y texto si existen
    const icon = button.querySelector('i');
    const text = button.querySelector('span');
    
    // Realizar el toggle de la clase active en el cuerpo
    body.classList.toggle('active');
    
    // Actualizar el icono y el texto según el estado
    if (body.classList.contains('active')) {
        // La tarjeta está abierta
        if (icon) {
            icon.classList.remove('fa-chevron-down');
            icon.classList.add('fa-chevron-up');
        }
        if (text) {
            text.innerText = 'Ocultar';
        }
        
        // Si es la tarjeta de workload, inicializar el gráfico cuando se abre
        if (card.id === 'evaluator-workload') {
            setTimeout(() => {
                ensureWorkloadChartExists();
                initializeWorkloadChart();
            }, 300); // Pequeño retraso para permitir que se muestre el contenedor
        }
    } else {
        // La tarjeta está cerrada
        if (icon) {
            icon.classList.remove('fa-chevron-up');
            icon.classList.add('fa-chevron-down');
        }
        if (text) {
            text.innerText = 'Mostrar';
        }
    }
}

// Función para obtener iniciales de un nombre
function getInitials(name) {
    // Función auxiliar para obtener iniciales - AÑADIDO
    if (!name) return "?";
    return name
        .split(' ')
        .map(word => word.charAt(0))
        .join('')
        .substring(0, 2)
        .toUpperCase();
}

// Inicializar visualización del gráfico de carga de trabajo
function initializeWorkloadChart() {
    console.log("Inicializando gráfico de carga de trabajo...");
    
    const chartContainer = document.getElementById('workload-chart');
    if (!chartContainer) {
        console.error("No se encuentra el contenedor del gráfico de carga");
        return;
    }
    
    // Verificar que tengamos datos de evaluadores
    if (!activeEvaluators || activeEvaluators.length === 0) {
        console.error("No hay evaluadores activos para mostrar en el gráfico");
        chartContainer.innerHTML = '<div class="no-data">No hay datos de evaluadores disponibles</div>';
        return;
    }
    
    // Verificar que tengamos datos de workload o buscar asignaciones en la tabla
    if (Object.keys(workloadData).length === 0) {
        console.log("No hay datos de carga de trabajo, obteniendo asignaciones actuales...");
        activeEvaluators.forEach(evaluator => {
            workloadData[evaluator.id] = countAssignedPapers(evaluator.id);
        });
    }
    
    console.log("Datos de carga para el gráfico:", workloadData);
    
    // Limpiar contenido existente
    chartContainer.innerHTML = '';
    
    // Encontrar carga máxima para escalar
    const workloadValues = Object.values(workloadData);
    const maxWorkload = workloadValues.length > 0 && Math.max(...workloadValues) > 0 ? 
                        Math.max(...workloadValues) : 
                        1; // Asegurarse de que maxWorkload nunca sea 0
    
    console.log("Carga máxima:", maxWorkload);
    
    // Crear barras para cada evaluador
    activeEvaluators.forEach((evaluator, index) => {
        const workload = workloadData[evaluator.id] || 0;
        const percentage = (workload / maxWorkload) * 100;
        
        console.log(`Evaluador ${evaluator.id}: ${evaluator.nombre}, Trabajos asignados: ${workload}, Porcentaje: ${percentage}%`);
        
        // Crear contenedor de barra
        const barContainer = document.createElement('div');
        barContainer.className = 'workload-bar';
        
        // Crear la barra
        const bar = document.createElement('div');
        bar.className = 'workload-value';
        bar.style.height = '0%'; // Empezar en 0 para animación
        bar.setAttribute('data-value', workload);
        
        // Crear etiqueta con avatar y nombre
        const label = document.createElement('div');
        label.className = 'workload-label';
        
        // Añadir avatar si está disponible
        if (evaluator.avatar) {
            const avatar = document.createElement('img');
            avatar.className = 'workload-avatar';
            avatar.src = `dist/pages/evaluadores/acciones_evaluador/fotos_empleados/${evaluator.avatar}`;
            avatar.alt = evaluator.nombre;
            label.appendChild(avatar);
        } else {
            // Usar iniciales si no hay avatar
            const initials = document.createElement('div');
            initials.className = 'evaluator-badge';
            initials.style.width = '28px';
            initials.style.height = '28px';
            initials.style.fontSize = '12px';
            initials.innerHTML = `<span>${getInitials(evaluator.nombre)}</span>`;
            label.appendChild(initials);
        }
        
        // Añadir nombre (abreviado)
        const nameParts = evaluator.nombre.split(' ');
        let shortName = nameParts[0];
        if (nameParts.length > 1) {
            shortName += ` ${nameParts[1].charAt(0)}.`;
        }
        
        const nameSpan = document.createElement('span');
        nameSpan.textContent = shortName;
        nameSpan.title = evaluator.nombre;
        label.appendChild(nameSpan);
        
        // Añadir contador de trabajos asignados
        const countSpan = document.createElement('div');
        countSpan.className = 'workload-count';
        countSpan.textContent = `${workload} trabajos`;
        countSpan.style.fontSize = '0.8rem';
        countSpan.style.color = 'var(--primary-dark)';
        countSpan.style.fontWeight = 'bold';
        countSpan.style.marginTop = '4px';
        label.appendChild(countSpan);
        
        // Ensamblar la barra
        barContainer.appendChild(bar);
        barContainer.appendChild(label);
        chartContainer.appendChild(barContainer);
        
        // Animar la altura de la barra con un retraso secuencial
        setTimeout(() => {
            bar.style.height = `${percentage}%`;
        }, index * 100);
    });
    
    console.log("Gráfico de carga de trabajo inicializado");
    
    // Añadir leyenda o título si no existe
    if (!document.getElementById('workload-title')) {
        const titleDiv = document.createElement('div');
        titleDiv.id = 'workload-title';
        titleDiv.style.textAlign = 'center';
        titleDiv.style.marginBottom = '15px';
        titleDiv.style.fontWeight = 'bold';
        titleDiv.style.color = 'var(--primary-dark)';
        titleDiv.textContent = 'Trabajos asignados por evaluador';
        
        chartContainer.parentNode.insertBefore(titleDiv, chartContainer);
    }
}

// NUEVA FUNCIÓN: Mostrar animación de asignación
function showAssignmentAnimation() {
    console.log("Mostrando animación de asignación...");
    
    // Prevenir múltiples clics
    if (isAssigning) return;
    isAssigning = true;
    
    // Cambiar estado del botón
    const assignBtn = document.getElementById('assign-btn');
    const originalBtnContent = assignBtn.innerHTML;
    assignBtn.disabled = true;
    assignBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Preparando...';
    
    // Crear el contenedor de la animación
    const animationContainer = document.createElement('div');
    animationContainer.className = 'assignment-animation-overlay';
    document.body.appendChild(animationContainer);
    
    // Contenido de la animación
    animationContainer.innerHTML = `
        <div class="animation-content">
            <h2 class="animation-title">Asignación de Trabajos en Progreso</h2>
            <div class="animation-canvas">
                <div class="evaluators-container">
                    ${generateEvaluatorHTML()}
                </div>
                <div class="papers-container" id="papers-container"></div>
            </div>
            <div class="animation-progress">
                <div class="progress-bar">
                    <div class="progress-value" id="animation-progress"></div>
                </div>
                <div class="progress-label" id="progress-status">Asignando trabajos...</div>
            </div>
        </div>
    `;
    
    // Mostrar la animación con un efecto fade-in
    setTimeout(() => {
        animationContainer.classList.add('active');
        
        // Iniciar la secuencia de animación
        runAssignmentAnimation(animationContainer);
    }, 100);
}

// Función para generar HTML para evaluadores en la animación
function generateEvaluatorHTML() {
    // Usar evaluadores reales si están disponibles, o contenido por defecto
    if (activeEvaluators && activeEvaluators.length > 0) {
        return activeEvaluators.slice(0, 3).map((evaluator, index) => `
            <div class="evaluator" id="evaluator-${index + 1}">
                <div class="evaluator-icon">${getInitials(evaluator.nombre)}</div>
                <div class="evaluator-label">${evaluator.nombre.split(' ')[0]}</div>
                <div class="evaluator-counter">0</div>
            </div>
        `).join('');
    } else {
        // Contenido por defecto
        return `
            <div class="evaluator" id="evaluator-1">
                <div class="evaluator-icon">E1</div>
                <div class="evaluator-label">Evaluador 1</div>
                <div class="evaluator-counter">0</div>
            </div>
            <div class="evaluator" id="evaluator-2">
                <div class="evaluator-icon">E2</div>
                <div class="evaluator-label">Evaluador 2</div>
                <div class="evaluator-counter">0</div>
            </div>
            <div class="evaluator" id="evaluator-3">
                <div class="evaluator-icon">E3</div>
                <div class="evaluator-label">Evaluador 3</div>
                <div class="evaluator-counter">0</div>
            </div>
        `;
    }
}

// Función para ejecutar la animación de asignación
function runAssignmentAnimation(container) {
    const progressBar = container.querySelector('#animation-progress');
    const progressStatus = container.querySelector('#progress-status');
    const papersContainer = container.querySelector('#papers-container');
    
    // Obtener elementos de evaluadores
    const evaluatorsContainer = container.querySelector('.evaluators-container');
    const evaluators = Array.from(evaluatorsContainer.querySelectorAll('.evaluator'));
    
    // Configuración de la animación
    const animationDuration = 10000; // 10 segundos
    const totalPapers = 50; // Número total de papers a animar
    const startTime = Date.now();
    
    // Contadores para los evaluadores
    let counters = evaluators.map(() => 0);
    
    // Función para crear un paper
    function createPaper(index) {
        const paper = document.createElement('div');
        paper.className = 'paper';
        paper.innerHTML = `<span>P${index}</span>`;
        paper.style.left = `${Math.random() * 60}%`;
        paper.style.top = '-50px';
        papersContainer.appendChild(paper);
        
        // Animación del paper
        setTimeout(() => {
            paper.style.top = '150px';
            paper.style.opacity = '1';
        }, 10);
        
        // Asignar el paper a un evaluador aleatorio
        const evaluatorIndex = Math.floor(Math.random() * evaluators.length);
        const delay = Math.random() * 500 + 300; // Retraso aleatorio
        
        setTimeout(() => {
            // Crear línea de conexión
            createConnection(paper, evaluators[evaluatorIndex]);
            
            // Actualizar contador
            counters[evaluatorIndex]++;
            const evaluatorCounter = evaluators[evaluatorIndex].querySelector('.evaluator-counter');
            if (evaluatorCounter) {
                evaluatorCounter.textContent = counters[evaluatorIndex];
                evaluatorCounter.style.opacity = '1';
                evaluatorCounter.style.transform = 'scale(1)';
            }
            
            // Añadir efecto de recepción
            evaluators[evaluatorIndex].classList.add('receiving');
            setTimeout(() => evaluators[evaluatorIndex].classList.remove('receiving'), 300);
            
            // Eliminar el paper
            setTimeout(() => {
                paper.style.opacity = '0';
                setTimeout(() => paper.remove(), 300);
            }, 500);
        }, delay);
    }
    
    // Función para crear una conexión entre paper y evaluador
    function createConnection(paper, evaluator) {
        const paperRect = paper.getBoundingClientRect();
        const evaluatorRect = evaluator.getBoundingClientRect();
        
        // Calcular puntos de inicio y fin
        const startX = paperRect.left + paperRect.width / 2;
        const startY = paperRect.top + paperRect.height / 2;
        const endX = evaluatorRect.left + evaluatorRect.width / 2;
        const endY = evaluatorRect.top + evaluatorRect.height / 2;
        
        // Crear elemento SVG para la línea
        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.style.position = 'absolute';
        svg.style.top = '0';
        svg.style.left = '0';
        svg.style.width = '100%';
        svg.style.height = '100%';
        svg.style.pointerEvents = 'none';
        svg.style.zIndex = '5';
        
        // Crear línea
        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        line.setAttribute('x1', startX);
        line.setAttribute('y1', startY);
        line.setAttribute('x2', startX);
        line.setAttribute('y2', startY);
        line.setAttribute('stroke', '#37b698'); // Actualizado al color verde de la primera paleta
        line.setAttribute('stroke-width', '2');
        svg.appendChild(line);
        
        // Añadir SVG al contenedor
        container.querySelector('.animation-canvas').appendChild(svg);
        
        // Animar la línea
        setTimeout(() => {
            line.setAttribute('x2', endX);
            line.setAttribute('y2', endY);
            line.style.transition = 'all 0.3s ease-out';
            line.classList.add('animated');
        }, 10);
        
        // Eliminar SVG después de completar la animación
        setTimeout(() => {
            svg.remove();
        }, 600);
    }
    
    // Función para actualizar la animación basada en el tiempo transcurrido
    function updateAnimation() {
        const elapsedTime = Date.now() - startTime;
        const progress = Math.min(elapsedTime / animationDuration, 1);
        
        // Actualizar barra de progreso
        progressBar.style.width = `${progress * 100}%`;
        
        // Crear papers en función del progreso
        const papersToShow = Math.floor(progress * totalPapers);
        
        // Mostrar mensaje según el progreso
        if (progress < 0.3) {
            progressStatus.textContent = "Analizando trabajos pendientes...";
        } else if (progress < 0.6) {
            progressStatus.textContent = "Optimizando carga de evaluadores...";
        } else if (progress < 0.9) {
            progressStatus.textContent = "Finalizando asignaciones...";
        } else {
            progressStatus.textContent = "¡Asignación completa!";
        }
        
        // Si aún no ha terminado la animación, seguir actualizando
        if (progress < 1) {
            // Crear un nuevo paper cada cierto tiempo
            if (Math.random() < 0.2) { // Probabilidad para controlar la frecuencia
                createPaper(Math.floor(Math.random() * 100) + 1);
            }
            
            requestAnimationFrame(updateAnimation);
        } else {
            // Animación terminada, iniciar proceso real de asignación
            finishAnimation(container);
        }
    }
    
    // Iniciar la animación
    updateAnimation();
}

// Función para finalizar la animación y comenzar la asignación real
function finishAnimation(container) {
    // Mostrar mensaje de finalización
    const progressStatus = container.querySelector('#progress-status');
    progressStatus.textContent = "Guardando asignaciones...";
    
    // Efecto de confeti
    createConfetti(container);
    
    // Cerrar animación después de 2 segundos y comenzar asignación real
    setTimeout(() => {
        container.classList.remove('active');
        
        // Eliminar el contenedor después de la animación de cierre
        setTimeout(() => {
            container.remove();
            
            // Iniciar el proceso real de asignación
            startAssignment();
        }, 500);
    }, 2000);
}

// Función para crear efecto de confeti
function createConfetti(container) {
    // Utilizar colores de la paleta verde
    const colors = ['#7fd1b6', '#58c4a5', '#37b698', '#2a9a80', '#198754', '#569e8f'];
    
    for (let i = 0; i < 150; i++) {
        const confetti = document.createElement('div');
        confetti.className = `confetti-piece c${i % 4 + 1}`;
        confetti.style.left = `${Math.random() * 100}%`;
        confetti.style.width = `${Math.random() * 10 + 5}px`;
        confetti.style.height = `${Math.random() * 20 + 5}px`;
        confetti.style.animationDuration = `${Math.random() * 3 + 2}s`;
        confetti.style.animationDelay = `${Math.random() * 0.5}s`;
        confetti.style.setProperty('--random', Math.random());
        
        container.appendChild(confetti);
    }
}

// Función para iniciar el proceso de asignación real
function startAssignment() {
    console.log("Iniciando asignación real...");
    
    const assignBtn = document.getElementById('assign-btn');
    assignBtn.innerHTML = '<div class="spinner"></div> Asignando...';
    
    // Realizar petición AJAX para la asignación automática
    fetch(window.location.href, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: 'ajax_action=auto_assign'
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Mostrar notificación de éxito
            showNotification('Éxito', data.message, 'success');
            
            // Recargar la página después de 2 segundos
            setTimeout(() => {
                window.location.reload();
            }, 2000);
        } else {
            // Mostrar notificación de error
            showNotification('Error', data.message, 'error');
            
            // Restablecer botón
            assignBtn.innerHTML = '<i class="fas fa-random"></i> Asignar Evaluadores';
            assignBtn.disabled = false;
            isAssigning = false;
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showNotification('Error', 'Ocurrió un error al procesar la solicitud', 'error');
        
        // Restablecer botón
        assignBtn.innerHTML = '<i class="fas fa-random"></i> Asignar Evaluadores';
        assignBtn.disabled = false;
        isAssigning = false;
    });
}

// Función para mostrar notificaciones
function showNotification(title, message, type) {
    // Crear el elemento de notificación
    const notification = document.createElement('div');
    notification.className = 'notification';
    
    // Icono según el tipo
    let iconClass = 'fas fa-info-circle';
    let iconColor = 'var(--primary)';
    
    if (type === 'success') {
        iconClass = 'fas fa-check-circle';
        iconColor = 'var(--success)';
    } else if (type === 'error') {
        iconClass = 'fas fa-exclamation-circle';
        iconColor = 'var(--danger)';
    }
    
    notification.innerHTML = `
        <div class="notification-icon" style="background-color: ${iconColor}">
            <i class="${iconClass}"></i>
        </div>
        <div class="notification-content">
            <div class="notification-title">${title}</div>
            <div class="notification-message">${message}</div>
        </div>
        <button class="notification-close">
            <i class="fas fa-times"></i>
        </button>
    `;
    
    // Agregar al DOM
    document.body.appendChild(notification);
    
    // Mostrar con animación
    setTimeout(() => {
        notification.classList.add('show');
    }, 10);
    
    // Configurar cierre
    const closeBtn = notification.querySelector('.notification-close');
    closeBtn.addEventListener('click', () => {
        notification.classList.remove('show');
        setTimeout(() => {
            notification.remove();
        }, 300);
    });
    
    // Cerrar automáticamente después de 5 segundos
    setTimeout(() => {
        if (document.body.contains(notification)) {
            notification.classList.remove('show');
            setTimeout(() => {
                notification.remove();
            }, 300);
        }
    }, 5000);
}

// Función para reiniciar las asignaciones
function resetAssignments() {
    console.log("Reiniciando asignaciones...");
    if (isAssigning) return;
    
    // Show confirmation dialog
    if (!confirm('¿Está seguro que desea reiniciar todas las asignaciones? Esta acción eliminará los evaluadores asignados de la base de datos.')) {
        return;
    }
    
    // Show loading state
    const resetBtn = document.getElementById('reset-btn');
    if (!resetBtn) return;
    
    const originalText = resetBtn.innerHTML;
    resetBtn.innerHTML = '<div class="spinner"></div> Reiniciando...';
    resetBtn.disabled = true;
    
    // Send AJAX request to reset assignments in database
    fetch(window.location.href, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: 'ajax_action=reset_all'
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Mostrar notificación de éxito
            showNotification('Éxito', data.message, 'success');
            
            // Recargar la página después de 2 segundos
            setTimeout(() => {
                window.location.reload();
            }, 2000);
        } else {
            // Mostrar notificación de error
            showNotification('Error', data.message, 'error');
            
            // Restablecer botón
            resetBtn.innerHTML = originalText;
            resetBtn.disabled = false;
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showNotification('Error', 'Ocurrió un error al procesar la solicitud', 'error');
        
        resetBtn.innerHTML = originalText;
        resetBtn.disabled = false;
    });
}

// Función para cargar datos de prueba (solo para desarrollo)
function loadDemoData() {
    if (!activeEvaluators || activeEvaluators.length === 0) {
        console.log("Cargando datos de evaluadores de prueba");
        activeEvaluators = [
            { id: 1, nombre: "Ana Martínez", workload: 5 },
            { id: 2, nombre: "Carlos López", workload: 8 },
            { id: 3, nombre: "María Rodríguez", workload: 3 },
            { id: 4, nombre: "Juan Pérez", workload: 12 },
            { id: 5, nombre: "Elena Gómez", workload: 7 }
        ];
        
     // Inicializar workloadData
        activeEvaluators.forEach(evaluator => {
            workloadData[evaluator.id] = evaluator.workload;
        });
        
        // Mostrar gráfico con datos de prueba
        ensureWorkloadChartExists();
        initializeWorkloadChart();
    }
}

// Exportar las funciones para que sean accesibles globalmente
window.initializeEvaluators = initializeEvaluators;
window.toggleCard = toggleCard;
window.showAssignmentAnimation = showAssignmentAnimation;
window.startAssignment = startAssignment;
window.resetAssignments = resetAssignments;
window.loadDemoData = loadDemoData; // Para pruebas

// Auto-inicialización cuando el DOM esté completamente cargado
// Auto-inicialización cuando el DOM esté completamente cargado
document.addEventListener('DOMContentLoaded', function() {
    console.log("DOM completamente cargado, inicializando sistema...");
    
    // Configurar manualmente el estado de las tarjetas al inicio
    setupInitialCardStates();
    
    // Inicializar los eventos para todos los elementos
    initializeEvents();
    
    // Si workloadData no tiene datos, intentar cargar del DOM
    const workloadCard = document.getElementById('evaluator-workload');
    if (workloadCard) {
        ensureWorkloadChartExists();
    }
    
    // Si activeEvaluators está vacío, verificar si window.evaluatorsData existe
    if ((!activeEvaluators || activeEvaluators.length === 0) && window.evaluatorsData) {
        console.log("Usando evaluatorsData existente");
        initializeEvaluators(window.evaluatorsData);
    } else if (!activeEvaluators || activeEvaluators.length === 0) {
        // Si no hay datos, intentar cargarlos de otras formas
        tryToExtractEvaluatorsData();
    }
});

// Configurar el estado inicial de las tarjetas
function setupInitialCardStates() {
    console.log("Configurando estados iniciales de las tarjetas...");
    
    // Obtener todas las tarjetas
    const cards = document.querySelectorAll('.card');
    
    cards.forEach(card => {
        const cardBody = card.querySelector('.card-body');
        const toggleBtn = card.querySelector('.card-toggle');
        
        // Si la tarjeta ya tiene un estado definido, mantenerlo
        if (cardBody && cardBody.classList.contains('active')) {
            // La tarjeta ya está abierta, asegurarse de que el botón de toggle también lo refleje
            if (toggleBtn) {
                const icon = toggleBtn.querySelector('i');
                const text = toggleBtn.querySelector('span');
                
                if (icon) {
                    icon.classList.remove('fa-chevron-down');
                    icon.classList.add('fa-chevron-up');
                }
                
                if (text) {
                    text.innerText = 'Ocultar';
                }
            }
        }
        // No cerrar explícitamente ninguna tarjeta que ya esté abierta
    });
    
    // Específicamente para tarjetas de áreas temáticas, asegurarse de que están abiertas
    const areaCards = document.querySelectorAll('.area-card');
    areaCards.forEach(card => {
        const cardBody = card.querySelector('.card-body');
        if (cardBody && !cardBody.classList.contains('active')) {
            cardBody.classList.add('active');
            
            const toggleBtn = card.querySelector('.card-toggle');
            if (toggleBtn) {
                const icon = toggleBtn.querySelector('i');
                const text = toggleBtn.querySelector('span');
                
                if (icon) {
                    icon.classList.remove('fa-chevron-down');
                    icon.classList.add('fa-chevron-up');
                }
                
                if (text) {
                    text.innerText = 'Ocultar';
                }
            }
        }
    });
    
    console.log("Estados iniciales de tarjetas configurados");
}

// Intenta extraer datos de evaluadores del DOM si están disponibles
function tryToExtractEvaluatorsData() {
    console.log("Intentando extraer datos de evaluadores del DOM...");
    
    // Buscar evaluadores mostrados en los badges de evaluadores
    const evaluatorBadges = document.querySelectorAll('.evaluator-badge');
    const evaluatorsFound = new Map();
    
    evaluatorBadges.forEach(badge => {
        const evaluatorId = badge.getAttribute('data-evaluator-id');
        const evaluatorName = badge.getAttribute('title') || badge.getAttribute('data-original-title');
        
        if (evaluatorId && evaluatorName) {
            if (!evaluatorsFound.has(evaluatorId)) {
                evaluatorsFound.set(evaluatorId, {
                    id: evaluatorId,
                    nombre: evaluatorName,
                    workload: 0
                });
            }
            
            // Si el badge está asignado, incrementar el contador de workload
            if (badge.classList.contains('assigned')) {
                const evaluator = evaluatorsFound.get(evaluatorId);
                evaluator.workload++;
                evaluatorsFound.set(evaluatorId, evaluator);
            }
        }
    });
    
    if (evaluatorsFound.size > 0) {
        console.log("Datos de evaluadores extraídos del DOM:", Array.from(evaluatorsFound.values()));
        initializeEvaluators(Array.from(evaluatorsFound.values()));
    } else {
        // Como último recurso, cargar datos de demostración
        console.log("No se encontraron datos en el DOM, cargando datos de demostración");
        loadDemoData();
    }
}

// Evento para actualizar el gráfico cuando cambie el tamaño de la ventana
window.addEventListener('resize', function() {
    // Retrasar la actualización para evitar múltiples redibujados
    if (this.resizeTimeout) clearTimeout(this.resizeTimeout);
    this.resizeTimeout = setTimeout(function() {
        initializeWorkloadChart();
    }, 300);
});

// Función para actualizar el gráfico después de una asignación manual
function updateWorkloadAfterAssignment(evaluatorId) {
    // Incrementar el contador de trabajos asignados para este evaluador
    if (workloadData[evaluatorId] !== undefined) {
        workloadData[evaluatorId]++;
        
        // Actualizar el gráfico
        initializeWorkloadChart();
        
        // También actualizar contador global de asignados/pendientes
        if (assignedPapers !== undefined && pendingPapers !== undefined) {
            assignedPapers++;
            pendingPapers = Math.max(0, pendingPapers - 1);
            
            // Actualizar elementos en el DOM si existen
            const assignedCountElement = document.getElementById('assigned-count');
            const pendingCountElement = document.getElementById('pending-count');
            
            if (assignedCountElement) {
                assignedCountElement.textContent = assignedPapers;
            }
            
            if (pendingCountElement) {
                pendingCountElement.textContent = pendingPapers;
            }
        }
    }
}

// Exportar función adicional para actualizar workload
window.updateWorkloadAfterAssignment = updateWorkloadAfterAssignment;