document.addEventListener('DOMContentLoaded', function () {
    // Helper para las rutas (en base a patrones existentes)
    const src = (path) => `../src/${path}`;

    // Elementos DOM
    const formularioLlamada = document.getElementById('formularioLlamada');
    const formLlamada = document.getElementById('formLlamada');
    const tipoEnsenanza = document.getElementById('tipo_ensenanza');
    const grado = document.getElementById('grado');
    const buscadorAlumno = document.getElementById('buscadorAlumno');
    const resultadosBusqueda = document.getElementById('resultadosBusqueda');
    const etiquetaAlumno = document.getElementById('etiqueta_alumno_seleccionado');
    const btnNuevaLlamada = document.getElementById('btnNuevaLlamada');
    const nuevaLlamadaBtnWrapper = document.getElementById('nuevaLlamadaBtnWrapper');
    const tablaLlamadasAlumno = document.getElementById('tablaLlamadasAlumno');
    const familiarLlamada = document.getElementById('familiar_llamada');
    const formLlamadaTitle = document.getElementById('formLlamadaTitle');

    let alumnoSeleccionado = null;
    let alumnoSeleccionadoNombre = '';
    let llamadaEnEdicionId = null;

    // --- Cargar grados según tipo de enseñanza ---
    if (tipoEnsenanza) {
        tipoEnsenanza.addEventListener('change', function () {
            const tipoId = this.value;
            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>';
                    }
                });
        });
    }

    if (grado) {
        grado.addEventListener('change', buscarAlumnos);
    }

    if (buscadorAlumno) {
        buscadorAlumno.addEventListener('input', function () {
            if (this.value.trim().length >= 2) {
                buscarAlumnos();
            } else if (this.value.trim().length === 0) {
                resultadosBusqueda.innerHTML = '';
                resultadosBusqueda.style.display = 'none';
            }
        });
    }

    function buscarAlumnos() {
        const q = buscadorAlumno.value.trim();
        const grado_id = grado.value;
        const tipo_id = tipoEnsenanza.value;

        if (!q && !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_id) url += `&tipo_ensenanza_id=${tipo_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.</div>';
                    return;
                }
                let html = '<div class="list-group">';
                data.forEach(al => {
                    const isActive = alumnoSeleccionado == al.alumno_id ? 'active' : '';
                    html += `<button type="button" class="list-group-item list-group-item-action alumno-item ${isActive}" data-id="${al.alumno_id}">
                        <strong>${al.ap_paterno} ${al.ap_materno}, ${al.nombre}</strong> <span class="text-muted">(${al.run})</span>
                    </button>`;
                });
                html += '</div>';
                resultadosBusqueda.innerHTML = html;
            });
    }

    resultadosBusqueda.addEventListener('click', function (e) {
        const btn = e.target.closest('.alumno-item');
        if (btn) {
            const alumnoId = btn.getAttribute('data-id');
            alumnoSeleccionadoNombre = btn.querySelector('strong').innerText;
            seleccionarAlumno(alumnoId);
        }
    });

    function seleccionarAlumno(id) {
        alumnoSeleccionado = id;
        etiquetaAlumno.innerHTML = `<strong>Alumno seleccionado:</strong> ${alumnoSeleccionadoNombre}`;
        etiquetaAlumno.style.display = '';

        // No ocultamos la lista para permitir seleccionar otros fácilmente
        // resultadosBusqueda.style.display = 'none'; 

        // Resaltar el alumno seleccionado en la lista
        document.querySelectorAll('.alumno-item').forEach(item => {
            if (item.getAttribute('data-id') === id) {
                item.classList.add('active');
            } else {
                item.classList.remove('active');
            }
        });

        nuevaLlamadaBtnWrapper.style.display = '';
        formularioLlamada.style.display = 'none';

        cargarFamiliares(id);
        listarLlamadas(id);

        // Auto-scroll suave hacia el botón de registro
        setTimeout(() => {
            nuevaLlamadaBtnWrapper.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }, 300);
    }

    function cargarFamiliares(alumnoId) {
        fetch(src(`familiares_por_alumno.php?alumno_id=${alumnoId}`))
            .then(res => res.json())
            .then(response => {
                const data = response.familiares || [];
                familiarLlamada.innerHTML = '<option value="">Seleccione un familiar...</option>';
                if (data.length > 0) {
                    const labelsVistos = new Set();
                    data.forEach(fam => {
                        // Fallback por si display_text no está definido (compatibilidad/errores)
                        const label = fam.display_text || `${fam.nombre} (${fam.rol})`;

                        // Si ya vimos esta etiqueta (nombre+rol), la ignoramos para evitar duplicados visuales
                        if (!labelsVistos.has(label)) {
                            familiarLlamada.innerHTML += `<option value="${fam.id}">${label}</option>`;
                            labelsVistos.add(label);
                        }
                    });

                    // Log de depuración para confirmar versión del backend
                    if (data[0] && data[0].v) console.log(`✓ Backend familiares: v${data[0].v}`);
                }
            });
    }

    function listarLlamadas(alumnoId) {
        tablaLlamadasAlumno.innerHTML = '<div class="text-center text-muted">Cargando historial de llamadas...</div>';
        tablaLlamadasAlumno.style.display = '';

        fetch(src(`listar_llamadas.php?alumno_id=${alumnoId}`))
            .then(res => res.json())
            .then(data => {
                if (!data || data.length === 0) {
                    tablaLlamadasAlumno.innerHTML = '<div class="alert alert-info">Sin llamadas registradas.</div>';
                    return;
                }
                let html = `
                    <div class="card shadow-sm">
                        <div class="card-header bg-light">Historial de Llamadas</div>
                        <div class="table-responsive">
                            <table class="table table-hover table-striped mb-0">
                                <thead>
                                    <tr>
                                        <th>Fecha/Hora</th>
                                        <th>Familiar</th>
                                        <th>Teléfonos</th>
                                        <th>Motivo / Resultado</th>
                                        <th>Por</th>
                                        <th class="text-end">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>`;
                data.forEach(l => {
                    const telefonos = [l.telefono, l.telefono2].filter(t => t).join(' / ') || 'No registrado';
                    html += `
                        <tr data-llamada='${JSON.stringify(l).replace(/'/g, "&#39;")}'>
                            <td>${l.fecha} <span class="badge bg-secondary">${l.hora}</span></td>
                            <td>${l.apoderado_nombre_completo}</td>
                            <td><span class="text-primary fw-bold"><i class="bi bi-telephone"></i> ${telefonos}</span></td>
                            <td>${l.motivo}</td>
                            <td>${l.funcionario}</td>
                            <td class="text-end">
                                <button class="btn btn-sm btn-warning btn-editar" title="Editar"><i class="bi bi-pencil"></i></button>
                                <button class="btn btn-sm btn-danger btn-borrar" title="Eliminar"><i class="bi bi-trash"></i></button>
                            </td>
                        </tr>`;
                });
                html += '</tbody></table></div></div>';
                tablaLlamadasAlumno.innerHTML = html;
            });
    }

    btnNuevaLlamada.addEventListener('click', function () {
        resetForm();
        formLlamadaTitle.innerText = 'Registrar Nueva Llamada';
        formularioLlamada.style.display = '';
        nuevaLlamadaBtnWrapper.style.display = 'none';

        // Pre-set today's date and current time
        const now = new Date();
        document.getElementById('fecha_llamada').value = now.toISOString().split('T')[0];
        document.getElementById('hora_llamada').value = now.toTimeString().slice(0, 5);

        formularioLlamada.scrollIntoView({ behavior: 'smooth' });
    });

    document.getElementById('btnCancelarLlamada').addEventListener('click', function () {
        formularioLlamada.style.display = 'none';
        nuevaLlamadaBtnWrapper.style.display = '';
        resetForm();
    });

    formLlamada.addEventListener('submit', function (e) {
        e.preventDefault();
        const esEdicion = llamadaEnEdicionId !== null;
        const url = esEdicion ? src('actualizar_llamada.php') : src('guardar_llamada.php');

        const payload = {
            alumno_id: alumnoSeleccionado,
            familiar_id: familiarLlamada.value,
            fecha: document.getElementById('fecha_llamada').value,
            hora: document.getElementById('hora_llamada').value,
            motivo: document.getElementById('motivo_llamada').value
        };

        if (esEdicion) payload.id = llamadaEnEdicionId;

        fetch(url, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload)
        })
            .then(res => res.json())
            .then(resp => {
                if (resp.success) {
                    alert(resp.msg);
                    formularioLlamada.style.display = 'none';
                    nuevaLlamadaBtnWrapper.style.display = '';
                    listarLlamadas(alumnoSeleccionado);
                    resetForm();
                } else {
                    alert('Error: ' + resp.msg);
                }
            })
            .catch(err => {
                alert('Error al intentar guardar.');
                console.error(err);
            });
    });

    tablaLlamadasAlumno.addEventListener('click', function (e) {
        const btnEditar = e.target.closest('.btn-editar');
        const btnBorrar = e.target.closest('.btn-borrar');

        if (btnEditar) {
            const tr = btnEditar.closest('tr');
            const llamada = JSON.parse(tr.getAttribute('data-llamada').replace(/&#39;/g, "'"));
            editarLlamada(llamada);
        } else if (btnBorrar) {
            const tr = btnBorrar.closest('tr');
            const llamada = JSON.parse(tr.getAttribute('data-llamada').replace(/&#39;/g, "'"));
            borrarLlamada(llamada);
        }
    });

    function editarLlamada(l) {
        llamadaEnEdicionId = l.id;
        formLlamadaTitle.innerText = 'Editar Registro de Llamada';

        familiarLlamada.value = l.familiar_id;
        document.getElementById('fecha_llamada').value = l.fecha;
        document.getElementById('hora_llamada').value = l.hora;
        document.getElementById('motivo_llamada').value = l.motivo;

        // Locked fields in edit mode
        familiarLlamada.disabled = true;
        document.getElementById('fecha_llamada').disabled = true;
        document.getElementById('hora_llamada').disabled = true;

        formularioLlamada.style.display = '';
        nuevaLlamadaBtnWrapper.style.display = 'none';
        formularioLlamada.scrollIntoView({ behavior: 'smooth' });
    }

    function borrarLlamada(l) {
        if (confirm('¿Está seguro de eliminar este registro de llamada?')) {
            fetch(src('borrar_llamada.php'), {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ id: l.id })
            })
                .then(res => res.json())
                .then(resp => {
                    if (resp.success) {
                        alert('Registro eliminado.');
                        listarLlamadas(alumnoSeleccionado);
                    } else {
                        alert('Error al eliminar.');
                    }
                });
        }
    }

    function resetForm() {
        formLlamada.reset();
        llamadaEnEdicionId = null;
        familiarLlamada.disabled = false;
        document.getElementById('fecha_llamada').disabled = false;
        document.getElementById('hora_llamada').disabled = false;
    }
});
