/**
 * Dashboard.js - Script principal para el panel administrativo
 * 
 * Este archivo contiene las funcionalidades JavaScript para:
 * - Control de la expansión/colapso de las áreas de trabajos
 * - Funcionalidades interactivas del panel de administración
 * - Animaciones y efectos visuales
 */

document.addEventListener('DOMContentLoaded', function() {
    // Referencias a los botones de expandir/colapsar
    const expandAllBtn = document.getElementById('expandAllAreas');
    const collapseAllBtn = document.getElementById('collapseAllAreas');
    
    // Inicialización de tooltips si existen
    if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
        const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
    }
    
    // Manejar el botón de expandir todo
    if (expandAllBtn) {
        expandAllBtn.addEventListener('click', function() {
            document.querySelectorAll('.collapse').forEach(function(collapseEl) {
                // Obtener o crear instancia de colapso de Bootstrap
                let collapse = bootstrap.Collapse.getInstance(collapseEl);
                if (!collapse) {
                    collapse = new bootstrap.Collapse(collapseEl, {
                        toggle: false
                    });
                }
                collapse.show();
                
                // Actualizar el ícono
                const iconId = 'icon_' + collapseEl.id.replace('collapse_', '');
                const icon = document.getElementById(iconId);
                if (icon) {
                    icon.style.transform = 'rotate(180deg)';
                }
                
                // Actualizar aria-expanded en el encabezado
                const header = document.querySelector(`[aria-controls="${collapseEl.id}"]`);
                if (header) {
                    header.setAttribute('aria-expanded', 'true');
                }
            });
        });
    }
    
    // Manejar el botón de colapsar todo
    if (collapseAllBtn) {
        collapseAllBtn.addEventListener('click', function() {
            document.querySelectorAll('.collapse').forEach(function(collapseEl) {
                // Obtener o crear instancia de colapso de Bootstrap
                let collapse = bootstrap.Collapse.getInstance(collapseEl);
                if (!collapse) {
                    collapse = new bootstrap.Collapse(collapseEl, {
                        toggle: false
                    });
                }
                collapse.hide();
                
                // Actualizar el ícono
                const iconId = 'icon_' + collapseEl.id.replace('collapse_', '');
                const icon = document.getElementById(iconId);
                if (icon) {
                    icon.style.transform = 'rotate(0deg)';
                }
                
                // Actualizar aria-expanded en el encabezado
                const header = document.querySelector(`[aria-controls="${collapseEl.id}"]`);
                if (header) {
                    header.setAttribute('aria-expanded', 'false');
                }
            });
        });
    }
    
    // Manejar la rotación de íconos en los encabezados de tarjetas
    document.querySelectorAll('.card-header[data-bs-toggle="collapse"]').forEach(function(header) {
        header.addEventListener('click', function() {
            const icon = this.querySelector('.transition-icon');
            if (icon) {
                // El toggle de clase se manejará automáticamente por el cambio de aria-expanded
                const isExpanded = this.getAttribute('aria-expanded') === 'true';
                icon.style.transform = isExpanded ? 'rotate(0deg)' : 'rotate(180deg)';
            }
        });
    });
    
    // Inicializar los modal de evaluadores
    initializeEvaluatorModals();
    
    // Efecto hover en las tarjetas
    document.querySelectorAll('.stat-card, .card').forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-5px)';
            this.style.boxShadow = '0 8px 20px rgba(0, 0, 0, 0.15)';
        });
        
        card.addEventListener('mouseleave', function() {
            this.style.transform = '';
            this.style.boxShadow = '';
        });
    });
    
    // Verificar si hay tarjetas que deban estar expandidas por defecto
    const urlParams = new URLSearchParams(window.location.search);
    const expandArea = urlParams.get('expand');
    if (expandArea) {
        const areaToExpand = document.getElementById('collapse_area_' + expandArea);
        if (areaToExpand) {
            const bsCollapse = new bootstrap.Collapse(areaToExpand, {
                toggle: true
            });
            
            // Scroll to the expanded area
            areaToExpand.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }
    }
    
    // Log para verificación de inicialización
    console.log('Dashboard script inicializado correctamente');
});

/**
 * Función para inicializar los modales de detalles de evaluadores
 * Esta función maneja la creación y visualización de modales al hacer clic
 * en las imágenes de avatar de los evaluadores
 */
function initializeEvaluatorModals() {
    // Comprobar si existe el modal en el DOM
    let evaluatorModal = document.getElementById('evaluatorDetailModal');
    
    // Si no existe, crearlo
    if (!evaluatorModal) {
        const modalHTML = `
        <div class="modal fade" id="evaluatorDetailModal" tabindex="-1" aria-labelledby="evaluatorDetailModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <div class="modal-header bg-primary text-white">
                        <h5 class="modal-title" id="evaluatorDetailModalLabel">Detalles del Evaluador</h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="text-center mb-3">
                            <img id="evaluatorAvatar" src="" alt="Avatar" class="rounded-circle" width="80" height="80">
                            <h4 id="evaluatorName" class="mt-2 mb-0">Nombre del Evaluador</h4>
                            <p id="evaluatorType" class="text-muted">Evaluador</p>
                        </div>
                        <div id="evaluatorInfo">
                            <div class="loading-spinner text-center">
                                <div class="spinner-border text-primary" role="status">
                                    <span class="visually-hidden">Cargando...</span>
                                </div>
                                <p class="mt-2">Cargando información...</p>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                        <a id="evaluatorEditLink" href="#" class="btn btn-primary">Editar</a>
                    </div>
                </div>
            </div>
        </div>`;
        
        // Agregar el modal al final del body
        document.body.insertAdjacentHTML('beforeend', modalHTML);
        evaluatorModal = document.getElementById('evaluatorDetailModal');
    }
    
    // Inicializar instancia de Bootstrap Modal
    const modal = new bootstrap.Modal(evaluatorModal);
    
    // Agregar event listeners a todas las imágenes de avatar
    document.querySelectorAll('.avatar-img').forEach(img => {
        img.addEventListener('click', function() {
            const evaluatorId = this.getAttribute('data-evaluator-id');
            const evaluatorName = this.getAttribute('data-evaluator-name');
            const avatarSrc = this.getAttribute('data-avatar-src');
            
            // Actualizar el contenido del modal
            document.getElementById('evaluatorName').textContent = evaluatorName || 'Evaluador';
            document.getElementById('evaluatorAvatar').src = avatarSrc || '';
            
            // Actualizar el enlace de edición
            const editLink = document.getElementById('evaluatorEditLink');
            if (editLink && evaluatorId) {
                editLink.href = `crud_evaluadores.php?id=${evaluatorId}`;
            } else if (editLink) {
                editLink.classList.add('disabled');
            }
            
            // Mostrar el modal
            modal.show();
            
            // Si hay ID, cargar los detalles del evaluador desde el servidor
            if (evaluatorId) {
                loadEvaluatorDetails(evaluatorId);
            } else {
                document.getElementById('evaluatorInfo').innerHTML = 
                    '<div class="alert alert-info">No hay información adicional disponible para este evaluador.</div>';
            }
        });
    });
    
    // También agregar eventos a los nombres de evaluadores
    document.querySelectorAll('.evaluator-name').forEach(el => {
        if (!el.querySelector('.avatar-img')) { // Solo si no contiene ya una imagen clickeable
            el.style.cursor = 'pointer';
            el.addEventListener('click', function() {
                const evaluatorId = this.getAttribute('data-evaluator-id');
                if (evaluatorId) {
                    // Buscar si hay una imagen relacionada
                    const img = this.querySelector('img');
                    if (img) {
                        img.click(); // Simular clic en la imagen
                    } else {
                        // Extraer nombre del contenido de texto
                        const evaluatorName = this.textContent.trim();
                        
                        // Actualizar el contenido del modal
                        document.getElementById('evaluatorName').textContent = evaluatorName || 'Evaluador';
                        document.getElementById('evaluatorAvatar').src = 
                            `https://ui-avatars.com/api/?name=${encodeURIComponent(evaluatorName)}&background=2c3e50&color=ffffff&size=80&rounded=true`;
                        
                        // Actualizar el enlace de edición
                        const editLink = document.getElementById('evaluatorEditLink');
                        if (editLink) {
                            editLink.href = `crud_evaluadores.php?id=${evaluatorId}`;
                        }
                        
                        // Mostrar el modal
                        modal.show();
                        
                        // Cargar los detalles del evaluador
                        loadEvaluatorDetails(evaluatorId);
                    }
                }
            });
        }
    });
}

/**
 * Función para cargar los detalles de un evaluador
 * @param {string} evaluatorId - ID del evaluador
 */
function loadEvaluatorDetails(evaluatorId) {
    const infoContainer = document.getElementById('evaluatorInfo');
    
    // Mostrar spinner de carga
    infoContainer.innerHTML = `
        <div class="text-center p-3">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Cargando...</span>
            </div>
            <p class="mt-2 text-muted">Cargando información...</p>
        </div>`;
    
    // CORRECCIÓN: Cambiamos get_evaluator_info.php por obtenerevaluador.php
    fetch(`obtenerevaluador.php?id=${evaluatorId}`)
        .then(response => {
            if (!response.ok) {
                throw new Error('Error al cargar los datos del evaluador');
            }
            return response.text(); // Cambiamos a text() porque obtenerevaluador.php devuelve HTML, no JSON
        })
        .then(html => {
            // Insertamos directamente el HTML devuelto por el servidor
            infoContainer.innerHTML = html;
        })
        .catch(error => {
            console.error('Error:', error);
            infoContainer.innerHTML = `
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    No se pudo cargar la información detallada del evaluador.
                    <hr>
                    <p class="mb-0">Asegúrese de que el evaluador existe en el sistema.</p>
                </div>`;
        });
}