document.addEventListener('DOMContentLoaded', () => {
    const totalMatriculaEl = document.getElementById('totalMatricula');
    const matriculaPorCursoEl = document.getElementById('matriculaPorCurso');
    const anioSelect = document.getElementById('dashboardAnioSelect');

    if (!totalMatriculaEl || !matriculaPorCursoEl) {
        console.error('No se encontraron los elementos del dashboard de matrícula.');
        return;
    }

    async function cargarEstadisticas() {
        try {
            // Obtener el año seleccionado, o el actual si no hay select
            const anio = anioSelect ? anioSelect.value : new Date().getFullYear();

            // Mostrar estado de carga
            totalMatriculaEl.innerHTML = '<div class="spinner-border spinner-border-sm" role="status"></div>';
            matriculaPorCursoEl.innerHTML = '<div class="text-center py-3"><div class="spinner-border spinner-border-sm text-muted" role="status"></div></div>';

            const url = src(`obtener_estadisticas_matricula.php?anio=${anio}`);
            const response = await fetch(url);

            if (!response.ok) {
                throw new Error(`Error del servidor: ${response.statusText}`);
            }

            const data = await response.json();

            if (data.error) {
                throw new Error(data.error);
            }

            // Actualizar total general
            totalMatriculaEl.textContent = data.total_general;

            // Actualizar desglose por curso
            if (data.total_general === 0) {
                matriculaPorCursoEl.innerHTML = '<div class="text-center text-muted py-3"><small>No hay datos para ' + anio + '</small></div>';
            } else if (data.por_curso && data.por_curso.length > 0) {
                // --- INICIO: Lógica de ordenamiento personalizado ---
                const ordenDeseado = [
                    'Pre Kínder', 'Kínder', 'Primer año', 'Segundo año', 'Tercer año',
                    'Cuarto año', 'Quinto año', 'Sexto año', 'Séptimo año', 'Octavo año'
                ];

                const cursosMap = new Map(data.por_curso.map(curso => [curso.nombre, curso]));

                const cursosOrdenados = ordenDeseado.map(nombreCurso => {
                    return cursosMap.get(nombreCurso) || { nombre: nombreCurso, total: 0 };
                });
                // --- FIN: Lógica de ordenamiento personalizado ---

                const statsHtml = cursosOrdenados.map(curso => {
                    const nombreCorto = curso.nombre
                        .replace('Pre Kínder', 'Pre Kínder')
                        .replace('Kínder', 'Kínder')
                        .replace('Primer año', 'Primer año')
                        .replace('Segundo año', 'Segundo año')
                        .replace('Tercer año', 'Tercer año')
                        .replace('Cuarto año', 'Cuarto año')
                        .replace('Quinto año', 'Quinto año')
                        .replace('Sexto año', 'Sexto año')
                        .replace('Séptimo año', 'Séptimo año')
                        .replace('Octavo año', 'Octavo año');

                    if (curso.id) {
                        // Si tenemos ID, generamos el enlace con el año seleccionado
                        const link = view(`libro_matricula.php?anio=${anio}&tipo_ensenanza_id=${curso.tipo_ensenanza_id}&grado_id=${curso.id}`);
                        return `<a href="${link}" class="stat-item-small text-decoration-none text-dark py-2 border-bottom" style="display: block; transition: all 0.2s ease;">
                            <div class="d-flex justify-content-between align-items-center px-2">
                                <span class="course-name small">${nombreCorto}</span>
                                <span class="course-count fw-bold" style="color: #60A5FA; font-size: 1.1em;">${curso.total}</span>
                            </div>
                        </a>`;
                    } else {
                        // Si no hay ID (curso sin matrícula), mostramos solo texto
                        return `<div class="stat-item-small text-muted py-2 border-bottom" style="display: block;">
                            <div class="d-flex justify-content-between align-items-center px-2">
                                <span class="course-name small">${nombreCorto}</span>
                                <span class="course-count fw-bold text-secondary" style="font-size: 1.1em;">${curso.total}</span>
                            </div>
                        </div>`;
                    }
                }).join('');

                matriculaPorCursoEl.innerHTML = statsHtml;
            } else {
                matriculaPorCursoEl.innerHTML = '<div class="text-center text-muted py-3"><small>No hay datos para ' + anio + '</small></div>';
            }

        } catch (error) {
            console.error('Error al cargar estadísticas:', error);
            totalMatriculaEl.innerHTML = '<i class="bi bi-exclamation-triangle-fill text-danger" title="Error"></i>';
            matriculaPorCursoEl.innerHTML = `<div class="alert alert-danger small p-2">${error.message}</div>`;
        }
    }

    // Cargar inicialmente
    cargarEstadisticas();

    // Recargar al cambiar el año
    if (anioSelect) {
        anioSelect.addEventListener('change', cargarEstadisticas);
    }
});