document.addEventListener('DOMContentLoaded', function () {
    const tipoEnsenanzaSelect = document.getElementById('filtro_tipo_ensenanza');
    const gradoSelect = document.getElementById('filtro_grado');
    const anioSelect = document.getElementById('filtro_anio');
    const btnLimpiar = document.getElementById('btnLimpiarFiltros');
    const contenedorResultados = document.getElementById('contenedorResultados');
    const contenedorReportes = document.getElementById('contenedorReportes');
    const btnVolverArriba = document.getElementById('btnVolverArriba');

    // NO usar Bootstrap Modal - manejo manual
    const modalCarga = document.getElementById('modalCarga');

    // --- LÓGICA DE FILTROS ---

    tipoEnsenanzaSelect.addEventListener('change', function () {
        cargarGrados(this.value);
    });

    btnLimpiar.addEventListener('click', function () {
        tipoEnsenanzaSelect.value = '';
        gradoSelect.value = '';
        gradoSelect.innerHTML = '<option value="">Seleccione tipo de enseñanza</option>';
        gradoSelect.disabled = true;
        anioSelect.value = '';
        contenedorResultados.style.display = 'none';
        contenedorResultados.innerHTML = '';
    });

    function cargarGrados(tipoId) {
        gradoSelect.innerHTML = '<option value="">Cargando...</option>';
        gradoSelect.disabled = true;

        if (!tipoId) {
            gradoSelect.innerHTML = '<option value="">Seleccione tipo de enseñanza</option>';
            return;
        }

        fetch(src(`grados_por_ensenanza.php?tipo_ensenanza_id=${tipoId}`))
            .then(res => res.json())
            .then(data => {
                gradoSelect.innerHTML = '<option value="">Todos</option>';
                data.forEach(grado => {
                    gradoSelect.innerHTML += `<option value="${grado.id}">${grado.nombre}</option>`;
                });
                gradoSelect.disabled = false;
            })
            .catch(error => {
                gradoSelect.innerHTML = '<option value="">Error al cargar</option>';
                console.error('Error cargando grados:', error);
            });
    }

    // --- FUNCIONES DE MODAL MANUAL ---

    function mostrarModalCarga() {
        modalCarga.style.display = 'block';
        modalCarga.classList.add('show');
        modalCarga.setAttribute('aria-hidden', 'false');
        modalCarga.setAttribute('aria-modal', 'true');

        // Agregar backdrop
        const backdrop = document.createElement('div');
        backdrop.className = 'modal-backdrop fade show';
        backdrop.id = 'modal-backdrop-custom';
        document.body.appendChild(backdrop);

        document.body.classList.add('modal-open');
        document.body.style.overflow = 'hidden';
    }

    function cerrarModalCarga() {
        console.log('Cerrando modal...');

        // Remover modal
        modalCarga.style.display = 'none';
        modalCarga.classList.remove('show');
        modalCarga.setAttribute('aria-hidden', 'true');
        modalCarga.removeAttribute('aria-modal');

        // Remover backdrop personalizado
        const backdrop = document.getElementById('modal-backdrop-custom');
        if (backdrop) {
            backdrop.remove();
        }

        // Limpiar body
        document.body.classList.remove('modal-open');
        document.body.style.overflow = '';
        document.body.style.paddingRight = '';

        console.log('Modal cerrado');
    }

    // --- LÓGICA DE GENERACIÓN DE REPORTES ---

    function generarReporte(tipoReporte) {
        const anio = anioSelect.value;
        const gradoId = gradoSelect.value;
        const tipoEnsenanzaId = tipoEnsenanzaSelect.value;

        if (!anio) {
            alert('Por favor, seleccione un año escolar.');
            return;
        }

        // Mostrar modal de carga (sin Bootstrap)
        mostrarModalCarga();
        contenedorResultados.style.display = 'none';

        if (tipoReporte === 'consolidado') {
            // Para el reporte consolidado, la descarga es directa
            const params = new URLSearchParams({
                tipo: tipoReporte,
                anio: anio,
                grado_id: gradoId,
                tipo_ensenanza_id: tipoEnsenanzaId
            });

            const url = src(`generar_reporte.php?${params.toString()}`);

            // Crear enlace de descarga temporal
            const link = document.createElement('a');
            link.href = url;
            link.download = `reporte_${tipoReporte}_${new Date().toISOString().split('T')[0]}.xls`;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);

            // Cerrar modal después de breve pausa
            setTimeout(() => {
                cerrarModalCarga();
            }, 800);

        } else {
            // Para otros reportes, usar POST y esperar JSON
            const datosReporte = {
                tipo_reporte: tipoReporte,
                filtros: {
                    anio: anio,
                    tipo_ensenanza_id: tipoEnsenanzaId,
                    grado_id: gradoId
                }
            };

            fetch(src('generar_reporte.php'), {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(datosReporte)
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`Error HTTP: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    // Cerrar modal ANTES de procesar resultados
                    cerrarModalCarga();

                    if (data.success) {
                        // Mostrar el HTML del reporte
                        contenedorResultados.innerHTML = data.html;
                        contenedorResultados.style.display = 'block';
                        contenedorResultados.scrollIntoView({ behavior: 'smooth' });
                        console.log(`Reporte generado: ${data.total_registros} registros encontrados`);
                    } else {
                        contenedorResultados.innerHTML = `<div class="alert alert-danger">Error al generar el reporte: ${data.error}</div>`;
                        contenedorResultados.style.display = 'block';
                        console.error('Error en el reporte:', data.error);
                    }
                })
                .catch(error => {
                    // Cerrar modal en caso de error
                    cerrarModalCarga();

                    contenedorResultados.innerHTML = `<div class="alert alert-danger">Error de conexión al generar el reporte: ${error.message}</div>`;
                    contenedorResultados.style.display = 'block';
                    console.error('Error de fetch:', error);
                });
        }
    }

    // Usar event delegation para manejar los clics en los botones de generar reporte
    if (contenedorReportes) {
        contenedorReportes.addEventListener('click', function (e) {
            const btn = e.target.closest('.btn-generar');
            if (btn && btn.dataset.tipo) {
                generarReporte(btn.dataset.tipo);
            }
        });
    }

    // --- BOTÓN VOLVER ARRIBA ---

    window.onscroll = function () {
        if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
            btnVolverArriba.style.display = "block";
        } else {
            btnVolverArriba.style.display = "none";
        }
    };

    window.volverArriba = function () {
        window.scrollTo({ top: 0, behavior: 'smooth' });
    }

    // Exponer función globalmente para debugging
    window.cerrarModalCarga = cerrarModalCarga;

});