document.addEventListener('DOMContentLoaded', function () {
    const anioOrigenSelect = document.getElementById('anio_origen');
    const anioDestinoSelect = document.getElementById('anio_destino');
    const contenedorCursos = document.getElementById('contenedorCursos');
    const modalElement = document.getElementById('modalPromocion');
    const modalPromocion = new bootstrap.Modal(modalElement);
    const listaAlumnosPromover = document.getElementById('listaAlumnosPromover');
    const seleccionarTodosCheckbox = document.getElementById('seleccionarTodos');
    const btnConfirmarPromocion = document.getElementById('btnConfirmarPromocion');
    const btnMarcarNoSigue = document.getElementById('btnMarcarNoSigue');

    let cursoOrigenActual = null;

    function cargarCursos() {
        const anio = anioOrigenSelect.value;
        if (!anio) {
            contenedorCursos.innerHTML = '<div class="alert alert-info">Seleccione un año de origen.</div>';
            return;
        }

        contenedorCursos.innerHTML = '<div class="text-center p-4"><div class="spinner-border" role="status"></div></div>';

        fetch(src(`get_cursos_con_alumnos.php?anio=${anio}`))
            .then(res => res.json())
            .then(data => {
                if (data.error) throw new Error(data.error);
                renderizarCursos(data);
            })
            .catch(error => {
                contenedorCursos.innerHTML = `<div class="alert alert-danger">Error al cargar cursos: ${error.message}</div>`;
            });
    }

    function renderizarCursos(cursos) {
        if (cursos.length === 0) {
            contenedorCursos.innerHTML = '<div class="alert alert-warning">No se encontraron cursos con alumnos para el año seleccionado.</div>';
            return;
        }

        const html = cursos.map(curso => `
            <div class="col">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="card-title">${curso.grado_nombre}</h5>
                        <h6 class="card-subtitle mb-2 text-muted">${curso.tipo_ensenanza_nombre}</h6>
                        <p class="card-text">
                            <i class="bi bi-people-fill me-2"></i>${curso.cantidad_alumnos} alumnos matriculados
                        </p>
                        <button class="btn btn-primary w-100 btn-promover" 
                                data-grado-id="${curso.grado_id}" 
                                data-grado-nombre="${curso.grado_nombre}">
                            <i class="bi bi-arrow-right-circle me-2"></i>Promover / Gestionar
                        </button>
                    </div>
                </div>
            </div>
        `).join('');

        contenedorCursos.innerHTML = html;
    }

    function abrirModalPromocion(gradoId, gradoNombre) {
        cursoOrigenActual = { id: gradoId, nombre: gradoNombre };
        document.getElementById('nombreCursoOrigen').textContent = gradoNombre;

        // Cargar alumnos del curso
        listaAlumnosPromover.innerHTML = '<div class="text-center"><div class="spinner-border text-primary" role="status"></div></div>';
        fetch(src(`alumnos_por_grado.php?grado_id=${gradoId}&anio=${anioOrigenSelect.value}`))
            .then(res => res.json())
            .then(alumnos => {
                renderizarAlumnosModal(alumnos);
            })
            .catch(error => {
                listaAlumnosPromover.innerHTML = `<div class="alert alert-danger">${error.message}</div>`;
            });

        modalPromocion.show();
    }

    function renderizarAlumnosModal(alumnos) {
        if (alumnos.length === 0) {
            listaAlumnosPromover.innerHTML = '<div class="alert alert-warning">No hay alumnos en este curso.</div>';
            return;
        }
        let html = '';
        alumnos.forEach(alumno => {
            let estadoBadge = '';
            let isDisabled = false;

            if (alumno.estado === 'PROMOVIDO') {
                estadoBadge = '<span class="badge bg-success float-end">Promovido</span>';
                isDisabled = true;
            } else if (alumno.estado === 'NO SIGUE') {
                estadoBadge = '<span class="badge bg-danger float-end">No Sigue</span>';
                isDisabled = true;
            } else if (alumno.estado === 'RETIRADO') {
                estadoBadge = '<span class="badge bg-secondary float-end">Retirado</span>';
                isDisabled = true;
            }

            html += `
            <label class="list-group-item">
                <input class="form-check-input me-1" type="checkbox" value="${alumno.id}" data-matricula-id="${alumno.matricula_id}" ${isDisabled ? 'disabled' : ''}>
                ${alumno.ap_paterno} ${alumno.ap_materno}, ${alumno.nombre}
                ${estadoBadge}
            </label>
            `;
        });
        listaAlumnosPromover.innerHTML = html;
        seleccionarTodosCheckbox.checked = !alumnos.some(a => a.estado === 'ACTIVA'); // Marcar si todos ya están gestionados
    }

    function procesarAlumnos(accion) {
        const anioDestino = anioDestinoSelect.value;
        const alumnosSeleccionados = Array.from(listaAlumnosPromover.querySelectorAll('input:checked')).map(input => ({
            alumno_id: input.value,
            matricula_id_origen: input.dataset.matriculaId
        }));

        if (alumnosSeleccionados.length === 0) {
            alert('Debe seleccionar al menos un alumno.');
            return;
        }

        const payload = {
            accion,
            anio_origen: anioOrigenSelect.value,
            anio_destino: anioDestino,
            alumnos: alumnosSeleccionados
        };

        fetch(src('promover_alumnos.php'), {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload)
        })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    alert(data.message);
                    modalPromocion.hide();
                    cargarCursos(anioOrigenSelect.value); // Recargar vista de cursos
                } else {
                    throw new Error(data.error || 'Ocurrió un error desconocido.');
                }
            })
            .catch(error => {
                alert('Error al procesar la solicitud: ' + error.message);
            });
    }

    // --- Event Listeners ---

    anioOrigenSelect.addEventListener('change', cargarCursos);

    contenedorCursos.addEventListener('click', function (e) {
        const btn = e.target.closest('.btn-promover');
        if (btn) {
            abrirModalPromocion(btn.dataset.gradoId, btn.dataset.gradoNombre);
        }
    });

    seleccionarTodosCheckbox.addEventListener('change', function () {
        // Modificación: Solo seleccionar los checkboxes que NO están deshabilitados.
        const checkboxesVisibles = listaAlumnosPromover.querySelectorAll('input[type="checkbox"]:not(:disabled)');

        checkboxesVisibles.forEach(checkbox => {
            checkbox.checked = this.checked; // Aplica el estado del checkbox "Seleccionar Todos"
        });
    });

    btnConfirmarPromocion.addEventListener('click', () => procesarAlumnos('promover'));
    btnMarcarNoSigue.addEventListener('click', () => procesarAlumnos('no_sigue'));

    // Carga inicial
    cargarCursos();
});