document.addEventListener('DOMContentLoaded', function () {
    const tipoEnsenanzaSelect = document.getElementById('filtro_tipo_ensenanza');
    const gradoSelect = document.getElementById('filtro_grado');
    const anioSelect = document.getElementById('filtro_anio');
    const contenedorAlumnos = document.getElementById('contenedorAlumnos');
    const modalVistaPrevia = new bootstrap.Modal(document.getElementById('modalVistaPrevia'));
    const modalRetirarElement = document.getElementById('modalRetirarMatricula');
    const modalRetirar = modalRetirarElement ? new bootstrap.Modal(modalRetirarElement) : null;
    const container = document.getElementById('libroMatriculaContainer');
    // Leer el rol del usuario desde el data-attribute
    const userRol = container ? container.dataset.userRol : '';

    // --- VERIFICACIÓN DE ROBUSTEZ ---
    if (!tipoEnsenanzaSelect || !gradoSelect || !anioSelect || !contenedorAlumnos || !modalRetirar) {
        console.error("Error: Faltan elementos esenciales del DOM.");
        return;
    }

    // --- MANEJO DE EVENTOS CENTRALIZADO (DELEGACIÓN) ---
    contenedorAlumnos.addEventListener('click', function (e) {
        const target = e.target.closest('button, a');
        if (!target) return;

        const isReadOnly = userRol === 'convivencia' || userRol === 'inspector';

        // Acción: Editar Matrícula
        if (target.matches('.btn-editar-matricula')) {
            if (isReadOnly) {
                e.preventDefault();
                alert('Sin permisos para editar matrícula.');
            } else if (!confirm('¿Desea editar esta matrícula?')) {
                e.preventDefault();
            }
        }

        // Acción: Dar de Baja Matrícula
        else if (target.matches('.btn-retirar')) {
            e.preventDefault();
            if (isReadOnly) {
                alert('Sin permisos para dar de baja matrícula.');
                return;
            }
            const matriculaId = target.dataset.matriculaId;
            const nombreAlumno = target.dataset.nombreAlumno;
            prepararModalRetiro(matriculaId, nombreAlumno);
        }

        // Acción: Vista Previa
        else if (target.matches('.btn-vista-previa')) {
            e.preventDefault();
            const matriculaId = target.dataset.matriculaId;
            const nombreAlumno = target.dataset.nombreAlumno;
            abrirVistaPrevia(matriculaId, nombreAlumno);
        }

        // Acción: Eliminar Alumno Permanentemente
        else if (target.matches('.btn-eliminar-permanente')) {
            e.preventDefault();
            if (userRol !== 'administrador') {
                alert('Solo los administradores pueden eliminar alumnos permanentemente.');
                return;
            }
            const alumnoId = target.dataset.alumnoId;
            const nombreAlumno = target.dataset.nombreAlumno;
            eliminarAlumnoPermanentemente(alumnoId, nombreAlumno);
        }
    });

    // --- LÓGICA DE FILTROS ---
    tipoEnsenanzaSelect.addEventListener('change', () => cargarGrados());
    gradoSelect.addEventListener('change', cargarAlumnos);
    anioSelect.addEventListener('change', cargarAlumnos);

    function cargarGrados(onCompleteCallback) {
        const tipoId = tipoEnsenanzaSelect.value;
        gradoSelect.innerHTML = '<option value="">Cargando...</option>';
        gradoSelect.disabled = true;
        cargarAlumnos();
        if (!tipoId) {
            gradoSelect.innerHTML = '<option value="">Seleccione tipo de enseñanza</option>';
            if (onCompleteCallback) onCompleteCallback();
            return;
        }
        fetch(src(`grados_por_ensenanza.php?tipo_ensenanza_id=${tipoId}`))
            .then(res => res.ok ? res.json() : Promise.reject(res.statusText))
            .then(data => {
                gradoSelect.innerHTML = '<option value="">Seleccione un grado</option>';
                data.forEach(grado => gradoSelect.innerHTML += `<option value="${grado.id}">${grado.nombre}</option>`);
                gradoSelect.disabled = false;
            })
            .catch(error => {
                gradoSelect.innerHTML = `<option value="">Error: ${error}</option>`;
                gradoSelect.disabled = true;
            })
            .finally(() => {
                if (onCompleteCallback) onCompleteCallback();
            });
    }

    function restaurarFiltros() {
        const params = new URLSearchParams(window.location.search);
        const gradoId = params.get('grado_id');
        const anio = params.get('anio');
        const tipoId = params.get('tipo_ensenanza_id');

        if (gradoId && anio && tipoId) {
            anioSelect.value = anio;
            tipoEnsenanzaSelect.value = tipoId;
            cargarGrados(() => {
                gradoSelect.value = gradoId;
                cargarAlumnos();
            });
        }
    }

    function cargarAlumnos() {
        const gradoId = gradoSelect.value;
        const anio = anioSelect.value;

        if (!gradoId || !anio) {
            contenedorAlumnos.innerHTML = '<div class="alert alert-info">Por favor, seleccione un año y un grado para ver los alumnos matriculados.</div>';
            return;
        }

        contenedorAlumnos.innerHTML = '<div class="text-center p-4"><div class="spinner-border" role="status"><span class="visually-hidden">Cargando...</span></div></div>';
        fetch(src(`alumnos_por_grado.php?grado_id=${gradoId}&anio=${anio}`))
            .then(res => res.ok ? res.json() : Promise.reject(res.statusText))
            .then(alumnos => {
                if (alumnos.error) throw new Error(alumnos.error);
                renderizarTablaAlumnos(alumnos, gradoId, anio);
            })
            .catch(error => {
                contenedorAlumnos.innerHTML = `<div class="alert alert-danger">Error al cargar los alumnos: ${error}</div>`;
            });
    }

    function renderizarTablaAlumnos(alumnos, gradoId, anio) {
        if (alumnos.length === 0) {
            contenedorAlumnos.innerHTML = '<div class="alert alert-warning">No se encontraron alumnos matriculados en este grado.</div>';
            return;
        }
        const tipoEnsenanzaId = tipoEnsenanzaSelect.value;
        const tablaHtml = `
            <div class="card shadow-sm">
                <div class="card-body table-responsive">
                    <table class="table table-hover table-striped">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>RUN</th>
                                <th>Nombre Completo</th>
                                <th>Fecha Matrícula</th>
                                <th class="text-end">Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            ${alumnos.map((alumno, index) => `
                                <tr>
                                    <td>${index + 1}</td>
                                    <td>${alumno.run || 'N/A'}</td>
                                    <td>${alumno.ap_paterno} ${alumno.ap_materno}, ${alumno.nombre}</td>
                                    <td>${alumno.fecha_matricula ? new Date(alumno.fecha_matricula + 'T00:00:00').toLocaleDateString('es-CL') : 'N/A'}</td>
                                    <td class="text-end">
                                        <button class="btn btn-sm btn-primary btn-vista-previa" data-matricula-id="${alumno.matricula_id}" data-nombre-alumno="${alumno.nombre} ${alumno.ap_paterno}" title="Ver Ficha"><i class="bi bi-eye-fill"></i></button>
                                        <a href="${view(`editar_matricula.php?matricula_id=${alumno.matricula_id}&grado_id=${gradoId}&anio=${anio}&tipo_ensenanza_id=${tipoEnsenanzaId}`)}" class="btn btn-sm btn-warning btn-editar-matricula" title="Editar Ficha"><i class="bi bi-pencil-fill"></i></a>
                                        <a href="${view(`ficha_pdf.php?matricula_id=${alumno.matricula_id}&nocache=${Date.now()}`)}" target="_blank" class="btn btn-sm btn-info" title="Imprimir Ficha Completa"><i class="bi bi-printer-fill"></i></a>
                                        <a href="${view(`comprobante_matricula_pdf.php?matricula_id=${alumno.matricula_id}&nocache=${Date.now()}`)}" target="_blank" class="btn btn-sm btn-success" title="Imprimir Comprobante"><i class="bi bi-receipt"></i></a>
                                        <a href="${view(`solicitud_transporte_pdf.php?matricula_id=${alumno.matricula_id}&nocache=${Date.now()}`)}" target="_blank" class="btn btn-sm" style="background-color: #fd7e14; color: white;" title="Solicitud Transporte"><i class="bi bi-bus-front"></i></a>
                                        <button class="btn btn-sm btn-danger btn-retirar" data-matricula-id="${alumno.matricula_id}" data-nombre-alumno="${alumno.nombre} ${alumno.ap_paterno}" title="Dar de Baja Matrícula"><i class="bi bi-trash-fill"></i></button>
                                        ${(window.userRol === 'administrador') ? `<button class="btn btn-sm btn-dark btn-eliminar-permanente" data-alumno-id="${alumno.id}" data-nombre-alumno="${alumno.nombre} ${alumno.ap_paterno}" title="Eliminar Alumno Permanentemente"><i class="bi bi-x-octagon-fill"></i></button>` : ''}
                                    </td>
                                </tr>
                            `).join('')}
                        </tbody>
                    </table>
                </div>
            </div>`;
        contenedorAlumnos.innerHTML = tablaHtml;
    }

    // --- LÓGICA DEL MODAL DE RETIRO (ÚNICA INSTANCIA) ---
    const btnConfirmarRetiro = document.getElementById('btnConfirmarRetiro');
    const handleConfirmarRetiro = () => {
        const matriculaId = document.getElementById('matriculaIdRetirar').value;
        const fechaRetiro = document.getElementById('fechaRetiro').value;
        const motivoRetiro = document.getElementById('motivoRetiro').value;

        if (!fechaRetiro || !motivoRetiro) {
            alert('Por favor, completa la fecha y el motivo del retiro.');
            return;
        }

        modalRetirar.hide();

        fetch(src('retirar_matricula.php'), {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ matricula_id: matriculaId, fecha_retiro: fechaRetiro, motivo_retiro: motivoRetiro })
        })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    alert('Matrícula dada de baja correctamente.');
                    cargarAlumnos();
                } else {
                    alert(`Error al dar de baja: ${data.error || 'Error desconocido.'}`);
                }
            })
            .catch(error => alert(`Error de conexión: ${error.message}`));
    };

    // Se adjunta el listener UNA SOLA VEZ al cargar la página.
    btnConfirmarRetiro.addEventListener('click', handleConfirmarRetiro);

    function prepararModalRetiro(matriculaId, nombreAlumno) {
        document.getElementById('nombreAlumnoRetirar').textContent = nombreAlumno;
        document.getElementById('matriculaIdRetirar').value = matriculaId;
        document.getElementById('fechaRetiro').value = new Date().toISOString().split('T')[0];
        document.getElementById('motivoRetiro').value = '';
        modalRetirar.show();
    }

    function eliminarAlumnoPermanentemente(alumnoId, nombreAlumno) {
        if (confirm(`ADVERTENCIA: Esta acción es irreversible.\n\n¿Estás seguro de que deseas eliminar permanentemente al alumno "${nombreAlumno}" y todos sus datos asociados (matrículas, información social, etc.)?`)) {
            fetch(src('eliminar_alumno.php'), {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ alumno_id: alumnoId })
            })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        alert('Alumno eliminado correctamente.');
                        cargarAlumnos();
                    } else {
                        alert(`Error al eliminar: ${data.error || 'Error desconocido.'}`);
                    }
                }).catch(error => alert(`Error de conexión: ${error.message}`));
        }
    }

    function abrirVistaPrevia(matriculaId, nombreAlumno) {
        const modalLabel = document.getElementById('modalVistaPreviaLabel');
        const modalBody = document.getElementById('contenidoVistaPrevia');
        modalLabel.textContent = `Ficha de: ${nombreAlumno}`;
        modalBody.innerHTML = '<div class="text-center p-5"><div class="spinner-border" role="status"><span class="visually-hidden">Cargando...</span></div></div>';
        modalVistaPrevia.show();
        fetch(view(`ficha_pdf.php?matricula_id=${matriculaId}&output=json`))
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    modalBody.innerHTML = renderizarContenidoFicha(data.alumno, data.familiares);
                } else {
                    throw new Error(data.error || 'No se pudo cargar la información.');
                }
            })
            .catch(error => {
                modalBody.innerHTML = `<div class="alert alert-danger">Error: ${error.message}</div>`;
            });
    }

    function renderizarContenidoFicha(alumno, familiares) {
        const val = (value, fallback = 'N/A') => value || fallback;
        const si_no = (value) => (parseInt(value, 10) === 1 ? 'Sí' : 'No');
        let html = `<h4>Datos del Estudiante</h4>
        <table class="table table-sm table-bordered">
            <tr><th>Nombre</th><td>${val(alumno.nombre)} ${val(alumno.ap_paterno)} ${val(alumno.ap_materno)}</td><th>RUN</th><td>${val(alumno.run)}</td></tr>
            <tr><th>Fecha Nac.</th><td>${val(alumno.fecha_nac)}</td><th>Nacionalidad</th><td>${val(alumno.nacionalidad)}</td></tr>
            <tr><th>Domicilio</th><td colspan="3">${val(alumno.domicilio)}</td></tr>
            <tr><th>Curso</th><td>${val(alumno.grado_nombre)}</td><th>Fecha Matrícula</th><td>${val(alumno.fecha_matricula)}</td></tr>
        </table>
        <h4>Información Social</h4>
        <table class="table table-sm table-bordered">
            <tr><th>Vive con</th><td>${val(alumno.vive_con)}</td><th>Integrantes Familia</th><td>${val(alumno.integrantes_familia)}</td></tr>
            <tr><th>Repitente</th><td>${si_no(alumno.repitente)}</td><th>Grado Repitencia</th><td>${val(alumno.grado_repitencia)}</td></tr>
            <tr><th>Colegio Procedencia</th><td colspan="3">${val(alumno.colegio_procedencia)}</td></tr>
            <tr><th>Opta Religión</th><td>${si_no(alumno.opta_religion)}</td><th>Religión</th><td>${val(alumno.religion)}</td></tr>
            <tr><th>Transporte</th><td>${si_no(alumno.transporte)}</td><th>Sector</th><td>${val(alumno.sector)}</td></tr>
            <tr><th>Beneficio JUNAEB</th><td>${si_no(alumno.junaeb)}</td><th>Uso de Imagen</th><td>${si_no(alumno.uso_imagen)}</td></tr>
        </table>
        <h4>Información de Salud</h4>
        <table class="table table-sm table-bordered">
            <tr><th>Sistema Salud</th><td>${val(alumno.sistema_salud)}</td></tr>
            <tr><th>Alergias</th><td>${val(alumno.alergias)}</td></tr>
            <tr><th>Enfermedad Cuidado</th><td>${val(alumno.enfermedad_cuidado)}</td></tr>
            <tr><th>Medicamento Diario</th><td>${val(alumno.medicamento_uso_diario)}</td></tr>
            <tr><th>Observaciones</th><td>${val(alumno.observaciones)}</td></tr>
        </table>
        <h4>Familiares</h4>`;
        if (familiares && familiares.length > 0) {
            familiares.forEach(f => {
                html += `<div class="card mb-3">
                    <div class="card-header"><b>${val(f.roles, 'Familiar')}</b> - ${val(f.parentesco_mostrar)}</div>
                    <div class="card-body">
                        <table class="table table-sm table-borderless">
                            <tr><td style="width:120px;"><b>Nombre:</b></td><td>${val(f.nombre)} ${val(f.ap_paterno)} ${val(f.ap_materno)}</td></tr>
                            <tr><td><b>RUN:</b></td><td>${val(f.run)}</td></tr>
                            <tr><td><b>Teléfono:</b></td><td>${val(f.telefono)}</td></tr>
                            <tr><td><b>Email:</b></td><td>${val(f.email)}</td></tr>
                        </table>
                    </div>
                </div>`;
            });
        } else {
            html += '<div class="alert alert-secondary">No hay familiares registrados.</div>';
        }
        return html;
    }

    // Iniciar la restauración de filtros al cargar la página.
    restaurarFiltros();
});