// Variables para gráficos
let progressChart = null;
let evaluationStatusChart = null;
let scoreDistributionChart = null;
let monthlyProgressChart = null;
let evaluatorsChart = null;
let presentationTypesChart = null;

document.addEventListener('DOMContentLoaded', function() {
    // Inicializar los gráficos con datos dinámicos
    initializeCharts();
    
    // Configurar funcionalidad expandir/colapsar
    setupCollapseButtons();
    
    // Mostrar toast de notificación al cargar
    setupToastNotification();
    
    // Configurar perfiles de evaluadores
    setupEvaluatorProfiles();
    
    // Inicializar funcionalidades adicionales
    setupSearchFunctionality();
    setupTableSorting();
    setupExportFunctions();
    setupRefreshButtons();
    
    // Animaciones de entrada
    animateElements();
});

/**
 * Inicializa los gráficos del dashboard
 */
function initializeCharts() {
    // Paletas de colores
    const colorPalettes = {
        primary: ['rgba(57, 112, 252, 0.8)', 'rgba(14, 165, 233, 0.8)', 'rgba(56, 189, 248, 0.8)'],
        status: ['rgba(24, 197, 139, 0.8)', 'rgba(244, 90, 90, 0.8)'],
        score: ['rgba(24, 197, 139, 0.8)', 'rgba(57, 112, 252, 0.8)', 'rgba(255, 162, 23, 0.8)', 'rgba(244, 90, 90, 0.8)'],
        monthly: ['rgba(57, 112, 252, 0.8)'],
        evaluators: ['rgba(57, 112, 252, 0.8)', 'rgba(156, 163, 175, 0.8)']
    };
    
    // Gráfico de estado de evaluación
    const ctxEvaluationStatus = document.getElementById('evaluationStatusChart');
    if (ctxEvaluationStatus) {
        evaluationStatusChart = new Chart(ctxEvaluationStatus, {
            type: 'doughnut',
            data: {
                labels: chartData.evaluationStatusLabels || ['Completado', 'Pendiente'],
                datasets: [{
                    data: chartData.evaluationStatus || [70, 30],
                    backgroundColor: colorPalettes.status,
                    borderColor: colorPalettes.status.map(color => color.replace('0.8', '1')),
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            usePointStyle: true,
                            pointStyle: 'circle',
                            padding: 15
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const label = context.label || '';
                                const value = context.raw || 0;
                                const total = context.chart.data.datasets[0].data.reduce((a, b) => a + b, 0);
                                const percentage = Math.round((value / total) * 100);
                                return `${label}: ${value} (${percentage}%)`;
                            }
                        }
                    }
                },
                cutout: '70%'
            }
        });
    }
    
    // Gráfico de distribución de calificaciones
    const ctxScoreDistribution = document.getElementById('scoreDistributionChart');
    if (ctxScoreDistribution) {
        scoreDistributionChart = new Chart(ctxScoreDistribution, {
            type: 'pie',
            data: {
                labels: chartData.scoreDistributionLabels || ['Excelente (4.5-5.0)', 'Bueno (4.0-4.4)', 'Regular (3.0-3.9)', 'Deficiente (<3.0)'],
                datasets: [{
                    data: chartData.scoreDistribution || [25, 40, 20, 15],
                    backgroundColor: colorPalettes.score,
                    borderColor: colorPalettes.score.map(color => color.replace('0.8', '1')),
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            usePointStyle: true,
                            pointStyle: 'circle',
                            padding: 15
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const label = context.label || '';
                                const value = context.raw || 0;
                                const total = context.chart.data.datasets[0].data.reduce((a, b) => a + b, 0);
                                const percentage = Math.round((value / total) * 100);
                                return `${label}: ${value} (${percentage}%)`;
                            }
                        }
                    }
                }
            }
        });
    }
    
    // Gráfico de progreso mensual
    const ctxMonthlyProgress = document.getElementById('monthlyProgressChart');
    if (ctxMonthlyProgress) {
        monthlyProgressChart = new Chart(ctxMonthlyProgress, {
            type: 'bar',
            data: {
                labels: chartData.monthlyProgressLabels || ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun'],
                datasets: [{
                    label: 'Evaluaciones completadas',
                    data: chartData.monthlyProgress || [12, 19, 25, 32, 40, 45],
                    backgroundColor: colorPalettes.monthly,
                    borderColor: colorPalettes.monthly.map(color => color.replace('0.8', '1')),
                    borderWidth: 1,
                    borderRadius: 4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: {
                            display: true,
                            drawBorder: false,
                            color: 'rgba(226, 232, 240, 0.5)'
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        backgroundColor: 'rgba(17, 24, 39, 0.8)',
                        titleFont: {
                            size: 13
                        },
                        bodyFont: {
                            size: 12
                        },
                        callbacks: {
                            label: function(context) {
                                return `${context.formattedValue} evaluaciones`;
                            }
                        }
                    }
                }
            }
        });
    }
    
    // Gráfico de evaluadores
    const ctxEvaluators = document.getElementById('evaluatorsChart');
    if (ctxEvaluators) {
        // Usar los datos proporcionados por PHP en lugar de extraerlos del DOM
        const activosEvaluadores = chartData.evaluadoresActivos || 0;
        const totalEvaluadores = chartData.totalEvaluadores || 0;
        
        evaluatorsChart = new Chart(ctxEvaluators, {
            type: 'doughnut',
            data: {
                labels: ['Activos', 'Inactivos'],
                datasets: [{
                    data: [activosEvaluadores, totalEvaluadores - activosEvaluadores],
                    backgroundColor: colorPalettes.evaluators,
                    borderColor: colorPalettes.evaluators.map(color => color.replace('0.8', '1')),
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const label = context.label || '';
                                const value = context.raw || 0;
                                const percentage = Math.round((value / totalEvaluadores) * 100);
                                return `${label}: ${value} (${percentage}%)`;
                            }
                        }
                    }
                },
                cutout: '70%'
            }
        });
    }
    
    // Gráfico de tipos de presentación
    const ctxPresentationTypes = document.getElementById('presentationTypesChart');
    if (ctxPresentationTypes) {
        // Usar los datos de la base de datos enviados por PHP
        // En lugar de datos simulados
        presentationTypesChart = new Chart(ctxPresentationTypes, {
            type: 'bar',
            data: {
                // Usar los datos proporcionados por PHP a través de la variable chartData global
                labels: chartData.presentationTypesLabels || [],
                datasets: [{
                    label: 'Trabajos por tipo',
                    data: chartData.presentationTypesData || [],
                    backgroundColor: [
                        'rgba(57, 112, 252, 0.8)',
                        'rgba(24, 197, 139, 0.8)',
                        'rgba(255, 162, 23, 0.8)',
                        'rgba(124, 58, 237, 0.8)'
                    ],
                    borderWidth: 1,
                    borderRadius: 4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: 'rgba(226, 232, 240, 0.5)'
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    }
                }
            }
        });
    }
}

/**
 * Configura los botones expandir/colapsar para las áreas
 */
function setupCollapseButtons() {
    const expandAllBtn = document.getElementById('expandAllAreas');
    const collapseAllBtn = document.getElementById('collapseAllAreas');
    
    if (expandAllBtn) {
        expandAllBtn.addEventListener('click', function() {
            document.querySelectorAll('.collapse').forEach(function(el) {
                const collapse = new bootstrap.Collapse(el, {
                    toggle: false
                });
                collapse.show();
            });
            
            // Rotar iconos
            document.querySelectorAll('.collapser-icon').forEach(function(icon) {
                icon.style.transform = 'rotate(180deg)';
            });
        });
    }
    
    if (collapseAllBtn) {
        collapseAllBtn.addEventListener('click', function() {
            document.querySelectorAll('.collapse').forEach(function(el) {
                const collapse = new bootstrap.Collapse(el, {
                    toggle: false
                });
                collapse.hide();
            });
            
            // Rotar iconos de vuelta
            document.querySelectorAll('.collapser-icon').forEach(function(icon) {
                icon.style.transform = 'rotate(0deg)';
            });
        });
    }
    
    // Animar rotación de iconos en clic
    document.querySelectorAll('.collapser-header').forEach(function(header) {
        header.addEventListener('click', function() {
            const collapseId = this.getAttribute('data-bs-target');
            const isExpanded = document.querySelector(collapseId).classList.contains('show');
            const icon = this.querySelector('.collapser-icon');
            
            if (icon) {
                icon.style.transform = isExpanded ? 'rotate(0deg)' : 'rotate(180deg)';
            }
        });
    });
}

/**
 * Muestra el toast de notificación al cargar la página
 */
function setupToastNotification() {
    setTimeout(function() {
        const successToast = document.getElementById('successToast');
        if (successToast) {
            const toast = new bootstrap.Toast(successToast);
            toast.show();
            
            // Reproducir sonido de notificación
            try {
                const audio = new Audio('assets/sounds/notification.mp3');
                audio.play().catch(e => console.log('Audio notification blocked or failed:', e));
            } catch (error) {
                console.log('Audio notification not supported:', error);
            }
        }
    }, 800);
}

/**
 * Configura los eventos para mostrar perfiles de evaluadores
 */
function setupEvaluatorProfiles() {
    // Seleccionar todas las imágenes de avatar de evaluadores
    document.querySelectorAll('.evaluator-avatar').forEach(avatar => {
        avatar.style.cursor = 'pointer';
        avatar.setAttribute('title', 'Haga clic para ver perfil del evaluador');
        
        avatar.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            // Obtener datos del evaluador
            const evaluatorName = this.querySelector('img').getAttribute('alt');
            const evaluatorStatus = this.closest('.evaluator-card').querySelector('.evaluator-info span').textContent;
            const evaluatorAvatar = this.querySelector('img').getAttribute('src');
            
            // Mostrar el modal con los datos del evaluador
            showEvaluatorProfile(evaluatorName, evaluatorStatus, evaluatorAvatar);
        });
    });
}

/**
 * Muestra el modal con el perfil de un evaluador
 * @param {string} name - Nombre del evaluador
 * @param {string} status - Estado (Completado/Pendiente)
 * @param {string} avatar - URL del avatar
 */
function showEvaluatorProfile(name, status, avatar) {
    // Preparar el contenido del modal
    const modalContent = document.getElementById('evaluatorModalContent');
    const viewFullProfileBtn = document.getElementById('viewFullProfileBtn');
    
    if (!modalContent || !viewFullProfileBtn) return;
    
    // Actualizar el enlace del botón de ver perfil completo
    viewFullProfileBtn.href = `evaluadores.php?id=${name.toLowerCase().replace(/\s+/g, '')}`;
    
    // Simular datos del evaluador para demostración
    const username = name.toLowerCase().replace(/\s+/g, '_');
    const password = generateFakePassword(); // Contraseña aleatoria para demostración
    const email = `${name.toLowerCase().replace(/\s+/g, '.').normalize('NFD').replace(/[\u0300-\u036f]/g, '')}@traumatologia.org`;
    const cargo = status === 'Completado' ? 'Evaluador Senior' : 'Evaluador Junior';
    const idioma = 'Español';
    const pais = 'Colombia';
    const trabajosAsignados = Math.floor(Math.random() * 10) + 10; // Número aleatorio entre 10 y 20
    
    // Contenido del modal
    modalContent.innerHTML = `
        <div class="mb-3">
            <img src="${avatar}" class="rounded-circle" alt="${name}" style="width: 100px; height: 100px; object-fit: cover;">
        </div>
        <h4>${name}</h4>
        <p class="badge ${status === 'Completado' ? 'badge-success' : 'badge-warning'}">${status}</p>
        <div class="mt-3 text-start">
            <p class="mb-2"><strong>Nombre:</strong> ${name}</p>
            <p class="mb-2"><strong>Cargo:</strong> ${cargo}</p>
            <p class="mb-2"><strong>Usuario:</strong> ${username}</p>
            <p class="mb-2"><strong>Contraseña:</strong> <span class="text-muted">${password}</span> 
                <button class="btn btn-sm btn-outline-secondary ms-2" onclick="copyToClipboard('${password}')">
                    <i class="fas fa-copy"></i>
                </button>
            </p>
            <p class="mb-2"><strong>Correo:</strong> ${email}</p>
            <p class="mb-2"><strong>Idioma:</strong> ${idioma}</p>
            <p class="mb-2"><strong>País:</strong> ${pais}</p>
            <hr>
            <p class="mb-2"><strong>Trabajos Asignados:</strong> ${trabajosAsignados}</p>
            <div class="progress mt-2 mb-3" style="height: 8px;">
                <div class="progress-bar bg-success" role="progressbar" style="width: ${status === 'Completado' ? '100%' : '67%'}" 
                     aria-valuenow="${status === 'Completado' ? '100' : '67'}" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>
    `;
    
    // Mostrar el modal
    const evaluatorModal = new bootstrap.Modal(document.getElementById('evaluatorProfileModal'));
    evaluatorModal.show();
}

/**
 * Genera una contraseña falsa para propósitos de demostración
 * @returns {string} Contraseña generada
 */
function generateFakePassword() {
    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*';
    let password = '';
    for (let i = 0; i < 8; i++) {
        password += chars.charAt(Math.floor(Math.random() * chars.length));
    }
    return password;
}

/**
 * Copiar texto al portapapeles
 * @param {string} text - Texto a copiar
 */
function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(() => {
        // Mostrar mensaje de éxito
        const toast = new bootstrap.Toast(Object.assign(document.createElement('div'), {
            className: 'toast position-fixed bottom-0 end-0 m-3',
            innerHTML: `
                <div class="toast-header bg-success text-white">
                    <i class="fas fa-check-circle me-2"></i>
                    <strong class="me-auto">Contraseña Copiada</strong>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"></button>
                </div>
                <div class="toast-body">La contraseña se ha copiado al portapapeles.</div>
            `
        }));
        document.body.appendChild(toast.element);
        toast.show();
        
        // Eliminar el toast después de que se oculte
        toast.element.addEventListener('hidden.bs.toast', () => {
            document.body.removeChild(toast.element);
        });
    }).catch(err => {
        console.error('No se pudo copiar el texto: ', err);
    });
}

/**
 * Configura la funcionalidad de búsqueda en la barra superior
 */
function setupSearchFunctionality() {
    const searchInput = document.querySelector('.search-box input');
    if (!searchInput) return;
    
    searchInput.addEventListener('input', function() {
        const searchTerm = this.value.toLowerCase().trim();
        
        // Si está vacío, mostrar todo
        if (searchTerm === '') {
            document.querySelectorAll('.collapse').forEach(el => {
                el.classList.remove('show');
            });
            document.querySelectorAll('.collapser-header').forEach(header => {
                header.style.display = '';
                header.querySelector('.collapser-icon').style.transform = 'rotate(0deg)';
            });
            return;
        }
        
        // Buscar en áreas y trabajos
        let foundResults = false;
        document.querySelectorAll('.collapser-header').forEach(header => {
            const areaTitle = header.textContent.toLowerCase();
            const targetId = header.getAttribute('data-bs-target');
            const content = document.querySelector(targetId);
            
            let showArea = areaTitle.includes(searchTerm);
            
            // Buscar en los trabajos dentro del área
            if (content) {
                const rows = content.querySelectorAll('tbody tr');
                let foundInRows = false;
                
                rows.forEach(row => {
                    const rowText = row.textContent.toLowerCase();
                    const showRow = rowText.includes(searchTerm);
                    
                    row.style.display = showRow ? '' : 'none';
                    if (showRow) foundInRows = true;
                });
                
                // Mostrar área si se encuentra en los trabajos
                if (foundInRows) {
                    showArea = true;
                    // Abrir el área si hay resultados dentro
                    const collapse = new bootstrap.Collapse(content, {toggle: false});
                    collapse.show();
                    header.querySelector('.collapser-icon').style.transform = 'rotate(180deg)';
                }
            }
            
            header.style.display = showArea ? '' : 'none';
            if (showArea) foundResults = true;
        });
        
        // Mostrar mensaje si no hay resultados
        if (!foundResults) {
            // Si no hay un contenedor de mensaje, crearlo
            if (!document.getElementById('noResultsMessage')) {
                const message = document.createElement('div');
                message.id = 'noResultsMessage';
                message.className = 'alert alert-info mt-3';
                message.innerHTML = '<i class="fas fa-info-circle me-2"></i> No se encontraron resultados para la búsqueda.';
                
                const containerParent = document.querySelector('.card-body');
                if (containerParent) {
                    containerParent.appendChild(message);
                }
            }
        } else {
            // Eliminar mensaje si existe
            const message = document.getElementById('noResultsMessage');
            if (message) message.remove();
        }
    });
    
    // Limpiar búsqueda con ESC
    searchInput.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            this.value = '';
            this.dispatchEvent(new Event('input'));
        }
    });
}

/**
 * Configura la funcionalidad de ordenamiento de tablas
 */
function setupTableSorting() {
    document.querySelectorAll('table th').forEach((header, index) => {
        if (!header.classList.contains('no-sort')) {
            header.style.cursor = 'pointer';
            header.title = 'Clic para ordenar';
            
            // Agregar indicador visual sutil
            if (!header.querySelector('.sort-indicator')) {
                header.innerHTML += ' <span class="sort-indicator ms-1 text-muted"><i class="fas fa-sort fa-xs"></i></span>';
            }
            
            header.addEventListener('click', function() {
                const table = this.closest('table');
                sortTable(table, index);
            });
        }
    });
}

/**
 * Función para ordenar una tabla
 * @param {HTMLElement} table - Tabla a ordenar
 * @param {number} columnIndex - Índice de la columna para ordenar
 */
function sortTable(table, columnIndex) {
    if (!table) return;
    
    const tbody = table.querySelector('tbody');
    if (!tbody) return;
    
    const rows = Array.from(tbody.querySelectorAll('tr'));
    if (rows.length <= 1) return;
    
    // Determinar la dirección de ordenamiento (asc o desc)
    const currentDir = table.getAttribute('data-sort-dir') || 'asc';
    const newDir = currentDir === 'asc' ? 'desc' : 'asc';
    table.setAttribute('data-sort-dir', newDir);
    
    // Actualizar indicadores visuales
    table.querySelectorAll('th .sort-indicator').forEach(ind => {
        ind.innerHTML = '<i class="fas fa-sort fa-xs"></i>';
    });
    
    const currentHeader = table.querySelectorAll('th')[columnIndex];
    if (currentHeader && currentHeader.querySelector('.sort-indicator')) {
        currentHeader.querySelector('.sort-indicator').innerHTML = 
            `<i class="fas fa-sort-${newDir === 'asc' ? 'up' : 'down'} fa-xs"></i>`;
    }
    
    // Determinar tipo de datos (numérico o texto)
    const isNumeric = rows.length > 0 && rows[0].cells.length > columnIndex && 
                      !isNaN(parseFloat(rows[0].cells[columnIndex].textContent.trim().replace(/[^\d.-]/g, '')));
    
    // Ordenar filas
    rows.sort((a, b) => {
        if (a.cells.length <= columnIndex || b.cells.length <= columnIndex) {
            return 0;
        }
        
        let aValue = a.cells[columnIndex].textContent.trim();
        let bValue = b.cells[columnIndex].textContent.trim();
        
        if (isNumeric) {
            aValue = parseFloat(aValue.replace(/[^\d.-]/g, '')) || 0;
            bValue = parseFloat(bValue.replace(/[^\d.-]/g, '')) || 0;
            
            return newDir === 'asc' ? aValue - bValue : bValue - aValue;
        } else {
            return newDir === 'asc' ? 
                aValue.localeCompare(bValue, undefined, { sensitivity: 'base' }) : 
                bValue.localeCompare(aValue, undefined, { sensitivity: 'base' });
        }
    });
    
    // Volver a agregar filas ordenadas
    rows.forEach(row => {
        tbody.appendChild(row);
    });
}

/**
 * Configura los botones de exportación
 */
function setupExportFunctions() {
    // Si se necesita implementar funcionalidad de exportación a PDF o CSV
    // Aquí se puede agregar esa funcionalidad
}

/**
 * Configura los botones de actualización/refresco
 */
function setupRefreshButtons() {
    document.querySelectorAll('.refresh-btn').forEach(btn => {
        if (!btn) return;
        
        btn.addEventListener('click', function() {
            this.disabled = true;
            this.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Actualizando...';
            
            // Simular tiempo de actualización
            setTimeout(() => {
                this.disabled = false;
                this.innerHTML = '<i class="fas fa-sync-alt me-1"></i> Actualizar';
                
                // Mostrar notificación
                showNotification('Datos actualizados correctamente', 'success');
            }, 1500);
        });
    });
}

/**
 * Anima elementos al cargar la página
 */
function animateElements() {
    // Animación de fade-in para cards
    document.querySelectorAll('.card').forEach((card, index) => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px)';
        card.style.transition = 'opacity 0.4s ease, transform 0.4s ease';
        
        setTimeout(() => {
            card.style.opacity = '1';
            card.style.transform = 'translateY(0)';
        }, 100 + (index * 100));
    });
}

/**
 * Muestra una notificación en la interfaz
 * @param {string} message - Mensaje a mostrar
 * @param {string} type - Tipo de notificación (success, info, warning, danger)
 */
function showNotification(message, type = 'info') {
    const icons = {
        success: 'check-circle',
        info: 'info-circle',
        warning: 'exclamation-triangle',
        danger: 'exclamation-circle'
    };
    
    const notificationDiv = document.createElement('div');
    notificationDiv.className = `alert alert-${type} alert-dismissible fade show position-fixed`;
    notificationDiv.style.top = '20px';
    notificationDiv.style.right = '20px';
    notificationDiv.style.zIndex = '9999';
    notificationDiv.style.boxShadow = '0 5px 15px rgba(0, 0, 0, 0.15)';
    notificationDiv.style.minWidth = '300px';
    notificationDiv.style.maxWidth = '400px';
    
    notificationDiv.innerHTML = `
        <i class="fas fa-${icons[type] || 'info-circle'} me-2"></i>
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    `;
    
    document.body.appendChild(notificationDiv);
    
    // Auto-dismiss después de 3 segundos
    setTimeout(() => {
        notificationDiv.classList.remove('show');
        setTimeout(() => {
            notificationDiv.remove();
        }, 300);
    }, 3000);
}

// Función para actualizar el reloj elegante
function updateElegantClock() {
    const now = new Date();
    
    // Formatear la hora (HH:MM:SS)
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const seconds = String(now.getSeconds()).padStart(2, '0');
    
    // Actualizar el elemento de hora
    const timeElement = document.getElementById('elegant-time');
    if (timeElement) {
        timeElement.textContent = `${hours}:${minutes}:${seconds}`;
    }
    
    // Formatear la fecha (DD de Mes de YYYY)
    const day = now.getDate();
    const year = now.getFullYear();
    
    // Meses en español
    const monthNames = [
        'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio',
        'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre'
    ];
    const month = monthNames[now.getMonth()];
    
    // Actualizar el elemento de fecha
    const dateElement = document.getElementById('elegant-date');
    if (dateElement) {
        dateElement.textContent = `${day} de ${month} de ${year}`;
    }
}

// Iniciar el reloj cuando el documento esté listo
document.addEventListener('DOMContentLoaded', function() {
    // Actualizar inmediatamente
    updateElegantClock();
    
    // Actualizar cada segundo
    setInterval(updateElegantClock, 1000);
});

// Función para inicializar los modales de evaluadores (actualizada)
function initializeEvaluatorModals() {
    // Mostrar información del evaluador en modal cuando se hace clic en un avatar
    const evaluatorAvatars = document.querySelectorAll('.evaluator-avatar img');
    evaluatorAvatars.forEach(avatar => {
        avatar.addEventListener('click', function(e) {
            e.preventDefault();
            
            // Obtener el ID del evaluador desde los datos del evaluador
            const evaluatorCard = this.closest('.evaluator-card');
            const evaluatorName = evaluatorCard.querySelector('.evaluator-info h6').textContent;
            
            // Buscar el ID del evaluador basado en la entrada en el DOM o en atributos de datos
            let evaluatorId = '';
            
            // Verificar si tenemos un atributo data-evaluator-id
            if (evaluatorCard.dataset.evaluatorId) {
                evaluatorId = evaluatorCard.dataset.evaluatorId;
            } else {
                // Si no hay atributo de datos, intentamos encontrar el ID en el contexto
                const evaluatorElement = evaluatorCard.closest('[data-evaluator-id]');
                if (evaluatorElement && evaluatorElement.dataset.evaluatorId) {
                    evaluatorId = evaluatorElement.dataset.evaluatorId;
                } else {
                    // Como último recurso, intentamos extraer el ID de los datos del evaluador
                    // Esta opción depende de la estructura del HTML y puede necesitar ajustes
                    const row = evaluatorCard.closest('tr');
                    if (row) {
                        const actionLink = row.querySelector('a[href*="evaluador"]');
                        if (actionLink) {
                            const urlParams = new URLSearchParams(new URL(actionLink.href).search);
                            evaluatorId = urlParams.get('id') || urlParams.get('U');
                        }
                    }
                }
            }
            
            // Si estamos en el contexto de un trabajo, podríamos tener el ID en variables globales o en la estructura
            // Aquí extraemos el ID del evaluador basado en el índice (1, 2 o 3) en la estructura
            if (!evaluatorId) {
                const index = evaluatorCard.dataset.index || '';
                if (index === '1' && typeof evaluador1 !== 'undefined') evaluatorId = evaluador1;
                else if (index === '2' && typeof evaluador2 !== 'undefined') evaluatorId = evaluador2;
                else if (index === '3' && typeof evaluador3 !== 'undefined') evaluatorId = evaluador3;
            }
            
            // Actualizar el título del modal
            document.getElementById('evaluatorProfileModalLabel').textContent = 'Ficha de ' + evaluatorName;
            
            // Mostrar el modal con estado de carga
            const modalContent = document.getElementById('evaluatorModalContent');
            modalContent.innerHTML = `
                <div class="text-center p-4">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Cargando...</span>
                    </div>
                    <p class="mt-2">Cargando información del evaluador...</p>
                </div>
            `;
            
            // Abrir modal
            const evaluatorModal = new bootstrap.Modal(document.getElementById('evaluatorProfileModal'));
            evaluatorModal.show();
            
            // Cargar datos del evaluador desde obtenerevaluador.php
            if (evaluatorId) {
                fetch('obtenerevaluador.php?id=' + evaluatorId)
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Error al cargar los datos del evaluador');
                        }
                        return response.text();
                    })
                    .then(html => {
                        // Actualizar el contenido del modal con los datos recibidos
                        modalContent.innerHTML = html;
                        
                        // Actualizar el botón para ver perfil completo
                        const viewFullProfileBtn = document.getElementById('viewFullProfileBtn');
                        if (viewFullProfileBtn) {
                            viewFullProfileBtn.href = 'crud_evaluadores.php?id=' + evaluatorId + '&action=view';
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        modalContent.innerHTML = `
                            <div class="alert alert-danger">
                                <i class="fas fa-exclamation-circle me-2"></i>
                                Error al cargar los datos del evaluador. Por favor, inténtalo de nuevo.
                            </div>
                        `;
                    });
            } else {
                // Si no se pudo encontrar el ID del evaluador
                modalContent.innerHTML = `
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        No se pudo identificar al evaluador. Por favor, inténtalo de nuevo o contacta al administrador.
                    </div>
                `;
            }
        });
    });
}

// Modificar las tarjetas de evaluadores para incluir el atributo data-evaluator-id
function enhanceEvaluatorCards() {
    // Para cada trabajo en la tabla
    document.querySelectorAll('[data-trabajo-id]').forEach(trabajoRow => {
        const trabajoId = trabajoRow.dataset.trabajoId;
        
        // Para cada evaluador en este trabajo
        const evaluatorCards = trabajoRow.querySelectorAll('.evaluator-card');
        evaluatorCards.forEach((card, index) => {
            // Añadir atributos de datos para el index del evaluador (1, 2, 3)
            card.dataset.index = index + 1;
            
            // Intentar encontrar el ID del evaluador
            const evaluatorIdElement = card.querySelector('[data-evaluator-id]');
            if (evaluatorIdElement) {
                const evaluatorId = evaluatorIdElement.dataset.evaluatorId;
                card.dataset.evaluatorId = evaluatorId;
            }
        });
    });
}

// Llamar a esta función después de que el DOM esté cargado
document.addEventListener('DOMContentLoaded', function() {
    // Inicializar módulos
    initializeEvaluatorModals();
    enhanceEvaluatorCards();
});

