// JS para Citacion con Apoderado - Versión final saneada para producción
// Fecha: 2026-03-17

document.addEventListener('DOMContentLoaded', function () {
    // 1. Elementos DOM persistentes
    const formularioCitacion = document.getElementById('formularioCitacion');
    const formCitacion = document.getElementById('formCitacion');
    const tipoEnsenanza = document.getElementById('tipo_ensenanza');
    const grado = document.getElementById('grado');
    const buscadorAlumno = document.getElementById('buscadorAlumno');
    const resultadosBusqueda = document.getElementById('resultadosBusqueda');
    const familiarCitacion = document.getElementById('familiar_citacion');
    const enviarWhatsapp = document.getElementById('enviar_whatsapp');
    const etiquetaAlumno = document.getElementById('etiqueta_alumno_seleccionado');
    const btnNuevaCitacion = document.getElementById('btnNuevaCitacion');
    const nuevaCitacionBtnWrapper = document.getElementById('nuevaCitacionBtnWrapper');

    // Elementos de Filtros (Nuevos)
    const filtrosCitacionesWrapper = document.getElementById('filtrosCitacionesWrapper');
    const filtroFechaInicio = document.getElementById('filtro_fecha_inicio');
    const filtroFechaFin = document.getElementById('filtro_fecha_fin');
    const filtroFamiliar = document.getElementById('filtro_familiar');
    const btnLimpiarFiltros = document.getElementById('btn_limpiar_filtros') || document.getElementById('btnLimpiarFiltros');

    // Ocultar formulario al inicio
    if (formularioCitacion) formularioCitacion.style.display = 'none';

    // Variales de Estado
    let alumnoSeleccionado = null;
    let familiaresAlumno = [];
    let alumnoSeleccionadoNombre = '';
    let citacionEnEdicionId = null;
    let ordenActual = { campo: 'fecha', direccion: 'DESC' };

    // --- CARGAR GRADOS ---
    function cargarGrados(tipoId) {
        if (!grado) return;
        grado.innerHTML = '<option value="">Cargando grados...</option>';
        grado.disabled = true;
        
        if (!tipoId) {
            grado.innerHTML = '<option value="">Selecciona tipo de enseñanza primero</option>';
            return;
        }

        fetch(`../src/grados_por_ensenanza.php?tipo_ensenanza_id=${encodeURIComponent(tipoId)}`)
            .then(res => res.json())
            .then(data => {
                grado.innerHTML = '<option value="">Selecciona grado</option>';
                if (Array.isArray(data) && data.length > 0) {
                    data.forEach(gr => {
                        grado.innerHTML += `<option value="${gr.id}">${gr.nombre}</option>`;
                    });
                    grado.disabled = false;
                } else {
                    grado.innerHTML = '<option value="">No hay grados disponibles</option>';
                }
            })
            .catch(() => {
                grado.innerHTML = '<option value="">Error al cargar grados</option>';
                console.error("Error en fetch grados_por_ensenanza");
            });
    }

    // --- BUSCAR ALUMNOS ---
    function buscarAlumnos() {
        if (!buscadorAlumno || !resultadosBusqueda) return;
        const tipo_ensenanza_id = tipoEnsenanza ? tipoEnsenanza.value : '';
        const grado_id = grado ? grado.value : '';
        const q = buscadorAlumno.value.trim();

        if (!q && (!tipo_ensenanza_id || !grado_id)) {
            resultadosBusqueda.innerHTML = '';
            resultadosBusqueda.style.display = 'none';
            return;
        }

        resultadosBusqueda.innerHTML = '<div class="text-center text-muted">Buscando alumnos...</div>';
        resultadosBusqueda.style.display = '';

        let url = `../src/buscar_matriculados.php?q=${encodeURIComponent(q)}`;
        if (grado_id) url += `&grado_id=${grado_id}`;
        if (tipo_ensenanza_id) url += `&tipo_ensenanza_id=${tipo_ensenanza_id}`;

        fetch(url)
            .then(res => res.json())
            .then(data => {
                if (!data || data.length === 0) {
                    resultadosBusqueda.innerHTML = '<div class="alert alert-info">No se encontraron alumnos matriculados.</div>';
                    return;
                }
                let html = '<div class="list-group shadow-sm">';
                data.forEach(al => {
                    html += `<button type="button" class="list-group-item list-group-item-action alumno-matriculado-item d-flex justify-content-between align-items-center" data-id="${al.alumno_id}">
                        <span><strong>${al.ap_paterno} ${al.ap_materno}, ${al.nombre}</strong> <small class="text-muted ml-2">${al.run}</small></span>
                        <i class="bi bi-chevron-right small text-primary"></i>
                    </button>`;
                });
                html += '</div>';
                resultadosBusqueda.innerHTML = html;
            })
            .catch(() => {
                resultadosBusqueda.innerHTML = '<div class="alert alert-danger">Error al buscar alumnos.</div>';
            });
    }

    // --- CARGAR FAMILIARES ---
    function cargarFamiliaresAlumno(alumnoId) {
        if (!familiarCitacion) return;
        fetch(`../src/familiares_por_alumno.php?alumno_id=${alumnoId}`)
            .then(res => res.json())
            .then(response => {
                let data = response.familiares || [];
                // Unificar por ID
                const uniqueData = Array.from(new Map(data.map(item => [item.id, item])).values());
                familiaresAlumno = uniqueData;

                familiarCitacion.innerHTML = '<option value="">Seleccione un familiar...</option>';
                if (filtroFamiliar) filtroFamiliar.innerHTML = '<option value="">Todos los apoderados</option>';

                if (uniqueData.length > 0) {
                    uniqueData.forEach(fam => {
                        let label = fam.nombre + (fam.rol ? ` [${fam.rol}]` : '');
                        familiarCitacion.innerHTML += `<option value="${fam.id}">${label}</option>`;
                        if (filtroFamiliar) filtroFamiliar.innerHTML += `<option value="${fam.id}">${label}</option>`;
                    });
                    familiarCitacion.disabled = false;
                } else {
                    familiarCitacion.innerHTML = '<option value="">Sin familiares registrados</option>';
                    familiarCitacion.disabled = true;
                }
            })
            .catch(() => {
                console.error("Error al cargar familiares");
            });
    }

    // --- CARGAR TABLA CITACIONES ---
    function cargarTablaCitacions(alumnoId, campo = 'fecha', direccion = 'DESC') {
        const tablaDiv = document.getElementById('tablaCitacionsAlumno');
        if (!tablaDiv || !alumnoId) return;

        tablaDiv.innerHTML = '<div class="text-center py-3"><div class="spinner-border spinner-border-sm text-primary"></div> Cargando historial...</div>';
        tablaDiv.style.display = '';
        ordenActual = { campo, direccion };

        const fInicio = filtroFechaInicio ? filtroFechaInicio.value : '';
        const fFin = filtroFechaFin ? filtroFechaFin.value : '';
        const fFamiliar = filtroFamiliar ? filtroFamiliar.value : '';

        let url = `../src/listar_citaciones.php?alumno_id=${alumnoId}&orden_campo=${campo}&orden_direccion=${direccion}`;
        if (fInicio) url += `&fecha_inicio=${fInicio}`;
        if (fFin) url += `&fecha_fin=${fFin}`;
        if (fFamiliar) url += `&familiar_id_filtro=${fFamiliar}`;

        fetch(url)
            .then(res => res.json())
            .then(data => {
                if (!data || data.length === 0) {
                    tablaDiv.innerHTML = '<div class="alert alert-info shadow-sm">No hay citaciones registradas para los filtros seleccionados.</div>';
                    return;
                }

                function generarEncabezado(c, t) {
                    const esActivo = ordenActual.campo === c;
                    const icon = esActivo ? (ordenActual.direccion === 'ASC' ? '↑' : '↓') : '↕';
                    return `<th style="cursor:pointer" data-campo="${c}" data-dir="${esActivo && ordenActual.direccion === 'ASC' ? 'DESC' : 'ASC'}">${t} <small>${icon}</small></th>`;
                }

                let html = `<div class="card shadow-sm border-0"><div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            ${generarEncabezado('fecha', 'Fecha')}
                            ${generarEncabezado('motivo', 'Motivo')}
                            ${generarEncabezado('apoderado_nombre_completo', 'Apoderado')}
                            <th>Funcionario</th>
                            <th>Estado</th>
                            <th class="text-end">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>`;

                data.forEach(c => {
                    const fecha = new Date(c.fecha);
                    const fechaStr = fecha.toLocaleDateString('es-CL');
                    const horaStr = fecha.toLocaleTimeString('es-CL', { hour: '2-digit', minute: '2-digit' });
                    
                    html += `<tr data-citacion='${JSON.stringify(c).replace(/'/g, "&apos;")}'>
                        <td><strong>${fechaStr}</strong><br><small class="badge bg-light text-dark border">${horaStr}</small></td>
                        <td>${c.motivo}</td>
                        <td>${c.apoderado_nombre_completo}</td>
                        <td><small>${c.funcionario || 'N/A'}</small></td>
                        <td>
                            <div class="d-flex flex-column gap-1">
                                <span class="badge ${c.estado_envio_email === 'enviado' ? 'bg-success' : 'bg-warning'} px-2" style="font-size:0.75rem"><i class="bi bi-envelope"></i> ${c.estado_envio_email}</span>
                                <span class="badge ${c.estado_envio_whatsapp === 'enviado' ? 'bg-success' : 'bg-warning'} px-2" style="font-size:0.75rem"><i class="bi bi-whatsapp"></i> ${c.estado_envio_whatsapp}</span>
                            </div>
                        </td>
                        <td class="text-end">
                            <div class="btn-group">
                                <button class="btn btn-sm btn-outline-info btn-ver"><i class="bi bi-eye"></i></button>
                                <button class="btn btn-sm btn-outline-primary btn-imprimir"><i class="bi bi-printer"></i></button>
                                <button class="btn btn-sm btn-outline-danger btn-borrar"><i class="bi bi-trash"></i></button>
                            </div>
                        </td>
                    </tr>`;
                });
                html += '</tbody></table></div></div>';
                tablaDiv.innerHTML = html;

                // Listeners tabla
                tablaDiv.querySelectorAll('th[data-campo]').forEach(th => {
                    th.onclick = function() { cargarTablaCitacions(alumnoId, this.dataset.campo, this.dataset.dir); };
                });

                tablaDiv.querySelector('tbody').onclick = function(e) {
                    const btn = e.target.closest('button');
                    if (!btn) return;
                    const tr = btn.closest('tr');
                    const cit = JSON.parse(tr.dataset.citacion.replace(/&apos;/g, "'"));
                    if (btn.classList.contains('btn-ver')) verCitacion(cit);
                    if (btn.classList.contains('btn-borrar')) borrarCitacion(cit);
                    if (btn.classList.contains('btn-imprimir')) imprimirCitacion(cit);
                };
            })
            .catch(() => { tablaDiv.innerHTML = '<div class="alert alert-danger">Error al cargar historial.</div>'; });
    }

    // --- ACCIONES AUXILIARES ---
    function verCitacion(c) {
        alert("Motivo: " + c.motivo + "\n\nComunicación: " + c.comunicacion);
    }

    function imprimirCitacion(c) {
        window.open(`../views/citacion_pdf.php?citacion_id=${c.id}`, '_blank');
    }

    function borrarCitacion(c) {
        if (confirm('¿Eliminar esta citación?')) {
            fetch(`../src/borrar_citacion.php`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ id: c.id })
            }).then(r => r.json()).then(res => {
                if (res.success) cargarTablaCitacions(alumnoSeleccionado);
                else alert(res.msg);
            });
        }
    }

    function resetForm(fullCleanup = false) {
        if (formCitacion) formCitacion.reset();
        citacionEnEdicionId = null;
        if (formularioCitacion) formularioCitacion.style.display = 'none';
        if (nuevaCitacionBtnWrapper) nuevaCitacionBtnWrapper.style.display = 'none'; // Se oculta hasta que se seleccione otro o se re-seleccione
        
        if (fullCleanup) {
            alumnoSeleccionado = null;
            alumnoSeleccionadoNombre = '';
            if (etiquetaAlumno) etiquetaAlumno.style.display = 'none';
            if (filtrosCitacionesWrapper) filtrosCitacionesWrapper.style.display = 'none';
            document.querySelectorAll('.alumno-matriculado-item').forEach(el => el.classList.remove('active'));
            // Scroll al inicio sin borrar filtros de búsqueda
            window.scrollTo({ top: 0, behavior: 'smooth' });
        } else if (alumnoSeleccionado) {
            // Si solo reseteamos tras guardar, mantenemos al alumno seleccionado
            if (nuevaCitacionBtnWrapper) nuevaCitacionBtnWrapper.style.display = '';
        }
    }

    // --- LISTENERS PRINCIPALES ---
    if (tipoEnsenanza) {
        tipoEnsenanza.onchange = function() { 
            cargarGrados(this.value); 
            if (grado) grado.value = '';
            if (buscadorAlumno) buscadorAlumno.value = '';
            if (resultadosBusqueda) resultadosBusqueda.style.display = 'none';
            if (etiquetaAlumno) etiquetaAlumno.style.display = 'none';
        };
    }

    if (grado) {
        grado.onchange = buscarAlumnos;
    }

    if (buscadorAlumno) {
        buscadorAlumno.oninput = function() { if (this.value.length >= 2) buscarAlumnos(); };
    }

    if (resultadosBusqueda) {
        resultadosBusqueda.onclick = function(e) {
            const item = e.target.closest('.alumno-matriculado-item');
            if (item) {
                const id = item.dataset.id;
                alumnoSeleccionado = id;
                alumnoSeleccionadoNombre = item.querySelector('strong').innerText;
                if (etiquetaAlumno) {
                    etiquetaAlumno.innerHTML = `<strong>Alumno:</strong> ${alumnoSeleccionadoNombre}`;
                    etiquetaAlumno.style.display = '';
                }
                if (nuevaCitacionBtnWrapper) nuevaCitacionBtnWrapper.style.display = '';
                if (filtrosCitacionesWrapper) filtrosCitacionesWrapper.style.display = '';
                
                // Resaltar el seleccionado y NO ocultar la lista
                document.querySelectorAll('.alumno-matriculado-item').forEach(el => el.classList.remove('active'));
                item.classList.add('active');
                
                cargarFamiliaresAlumno(id);
                cargarTablaCitacions(id);

                // Scroll suave al botón de nueva citación
                if (btnNuevaCitacion) {
                    setTimeout(() => {
                        btnNuevaCitacion.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    }, 300);
                }
            }
        };
    }

    if (btnNuevaCitacion) {
        btnNuevaCitacion.onclick = function() {
            if (formularioCitacion) {
                formularioCitacion.style.display = '';
                formularioCitacion.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }
            if (nuevaCitacionBtnWrapper) nuevaCitacionBtnWrapper.style.display = 'none';
        };
    }

    const btnCancelarCitacion = document.getElementById('btnCancelarCitacion');
    if (btnCancelarCitacion) {
        btnCancelarCitacion.onclick = function() {
            resetForm(true); // Limpieza completa y scroll arriba
        };
    }

    if (formCitacion) {
        formCitacion.onsubmit = function(e) {
            e.preventDefault();
            const data = {
                alumno_id: alumnoSeleccionado,
                familiar_id: familiarCitacion.value,
                fecha: document.getElementById('fecha_citacion').value,
                hora: document.getElementById('hora_citacion').value,
                motivo: document.getElementById('motivo_citacion').value,
                comunicacion: document.getElementById('comunicacion').value,
                enviar_email: document.getElementById('enviar_email').checked,
                enviar_whatsapp: document.getElementById('enviar_whatsapp').checked
            };

            const btnSubmit = formCitacion.querySelector('button[type="submit"]');
            const btnCancel = document.getElementById('btnCancelarCitacion');
            const originalHtml = btnSubmit.innerHTML;

            // Estado de Carga
            btnSubmit.disabled = true;
            btnCancel.disabled = true;
            btnSubmit.innerHTML = `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Enviando...`;
            btnSubmit.style.minWidth = '200px'; // Evita el estiramiento/encogimiento brusco

            fetch(`../src/guardar_citacion.php`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(data)
            }).then(r => r.json()).then(res => {
                if (res.success) {
                    alert(res.msg);
                    resetForm();
                    cargarTablaCitacions(alumnoSeleccionado);
                    if (res.whatsapp_url) window.open(res.whatsapp_url, '_blank');
                } else {
                    alert(res.msg);
                }
            }).catch(err => {
                console.error(err);
                alert("Error de conexión al procesar la citación.");
            }).finally(() => {
                btnSubmit.disabled = false;
                btnCancel.disabled = false;
                btnSubmit.innerHTML = originalHtml;
                btnSubmit.style.minWidth = '';
            });
        };
    }

    // Filtros
    if (filtroFechaInicio) filtroFechaInicio.onchange = () => cargarTablaCitacions(alumnoSeleccionado);
    if (filtroFechaFin) filtroFechaFin.onchange = () => cargarTablaCitacions(alumnoSeleccionado);
    if (filtroFamiliar) filtroFamiliar.onchange = () => cargarTablaCitacions(alumnoSeleccionado);
    if (btnLimpiarFiltros) {
        btnLimpiarFiltros.onclick = () => {
            if (filtroFechaInicio) filtroFechaInicio.value = '';
            if (filtroFechaFin) filtroFechaFin.value = '';
            if (filtroFamiliar) filtroFamiliar.value = '';
            cargarTablaCitacions(alumnoSeleccionado);
        };
    }
});
