document.addEventListener('DOMContentLoaded', () => {
    const searchInput = document.getElementById('contactsSearchInput');
    const resultsContainer = document.getElementById('resultsContainer');
    const modalElement = document.getElementById('modalVistaPrevia');
    const modalVistaPrevia = new bootstrap.Modal(modalElement);
    let searchTimeout;

    if (!searchInput || !resultsContainer) {
        console.error('Elementos del DOM no encontrados: searchInput o resultsContainer');
        return;
    }

    searchInput.addEventListener('input', () => {
        // Cancelar el timeout anterior para no hacer peticiones en cada tecla
        clearTimeout(searchTimeout);

        const query = searchInput.value.trim();

        if (query.length < 3) {
            resultsContainer.innerHTML = '<div class="alert alert-info text-center">Ingresa al menos 3 caracteres para buscar.</div>';
            return;
        }

        // Establecer un nuevo timeout para esperar a que el usuario termine de escribir
        searchTimeout = setTimeout(() => {
            fetchContacts(query);
        }, 300); // 300ms de espera
    });

    // --- SOLUCIÓN AL BUG DE MODAL COLGADO ---
    // Escuchar cuando el modal se ha terminado de ocultar.
    modalElement.addEventListener('hidden.bs.modal', function () {
        // Devolver el foco al cuerpo del documento para evitar que un elemento
        // dentro del modal oculto lo retenga, lo que causa el bloqueo.
        document.body.focus();
    });

    // --- NUEVO: Listener para botones de vista previa ---
    resultsContainer.addEventListener('click', function (e) {
        const btn = e.target.closest('.btn-vista-previa');
        if (btn) {
            e.preventDefault();
            const matriculaId = btn.dataset.matriculaId;
            abrirVistaPrevia(matriculaId);
        }
    });

    async function fetchContacts(query) {
        resultsContainer.innerHTML = '<div class="text-center p-4"><div class="spinner-border" role="status"><span class="visually-hidden">Buscando...</span></div></div>';

        try {
            // Usar la función src() para construir la URL dinámicamente y que funcione en local y producción.
            const url = src(`buscar_contactos.php?q=${encodeURIComponent(query)}`);

            const response = await fetch(url);
            const data = await response.json();

            if (!response.ok) {
                throw new Error(data.error || `Error del servidor: ${response.statusText}`);
            }
            renderResults(data);
        } catch (error) {
            console.error('Error en fetchContacts:', error);
            resultsContainer.innerHTML = `<div class="alert alert-danger text-center">Error al realizar la búsqueda: ${error.message}</div>`;
        }
    }

    function renderResults(data) {
        if (!data || data.length === 0) {
            resultsContainer.innerHTML = '<div class="alert alert-warning text-center">No se encontraron alumnos que coincidan con la búsqueda.</div>';
            return;
        }

        const accordionHtml = data.map((alumno, index) => {
            const alumnoNombreCompleto = `${alumno.alumno_ap_paterno} ${alumno.alumno_ap_materno}, ${alumno.alumno_nombre}`;

            // Agrupar familiares únicos por nombre completo
            const familiaresAgrupados = {};

            if (alumno.familiares && alumno.familiares.length > 0 && alumno.familiares[0] !== null) {
                alumno.familiares.forEach(fam => {
                    const nombreCompleto = `${fam.nombre || ''} ${fam.ap_paterno || ''} ${fam.ap_materno || ''}`.trim();

                    if (!familiaresAgrupados[nombreCompleto]) {
                        familiaresAgrupados[nombreCompleto] = {
                            nombre: nombreCompleto,
                            parentesco: fam.parentesco || 'N/A',
                            telefono: [fam.telefono, fam.telefono2].filter(Boolean).join(' / ') || 'N/A',
                            email: fam.email || 'N/A',
                            roles: []
                        };
                    }

                    // Agregar el rol si no está ya en la lista
                    if (fam.rol && !familiaresAgrupados[nombreCompleto].roles.includes(fam.rol)) {
                        familiaresAgrupados[nombreCompleto].roles.push(fam.rol);
                    }
                });
            }

            const familiaresArray = Object.values(familiaresAgrupados);

            // Ordenar familiares por prioridad de rol: Titular > Suplente > Apoderado 3 > Otros
            familiaresArray.sort((a, b) => {
                const getPriority = (roles) => {
                    if (roles.some(rol => rol.includes('TITULAR'))) return 1;
                    if (roles.some(rol => rol.includes('SUPLENTE'))) return 2;
                    if (roles.some(rol => rol.includes('APODERADO 3'))) return 3;
                    if (roles.some(rol => rol === 'PADRE')) return 4;
                    if (roles.some(rol => rol === 'MADRE')) return 5;
                    // Los contactos de emergencia y otros roles van después
                    if (roles.some(rol => rol.includes('EMERGENCIA'))) return 6;
                    return 7; // Otros roles
                };

                const priorityA = getPriority(a.roles);
                const priorityB = getPriority(b.roles);
                return priorityA - priorityB;
            });

            // Función para obtener el color del badge según el rol
            function getColorForRole(rol) {
                if (rol.includes('TITULAR')) return 'bg-primary'; // Azul
                if (rol.includes('SUPLENTE')) return 'bg-success'; // Verde
                if (rol.includes('APODERADO 3')) return 'bg-warning text-dark'; // Naranja
                if (rol === 'PADRE') return 'bg-info text-dark'; // Celeste
                if (rol === 'MADRE') return 'bg-info text-dark'; // Celeste
                if (rol.includes('EMERGENCIA')) return 'bg-danger'; // Rojo
                return 'bg-secondary'; // Gris para otros
            }

            const familiaresHtml = familiaresArray.length > 0
                ? familiaresArray.map(fam => `
                    <div class="border rounded p-3 mb-2 bg-light">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <h6 class="mb-1 text-primary fw-bold">${fam.nombre}</h6>
                            <div>
                                ${fam.roles.map(rol => `<span class="badge ${getColorForRole(rol)} me-1">${rol}</span>`).join('')}
                            </div>
                        </div>
                        <div class="row g-2">
                            <div class="col-md-6">
                                <small class="text-muted d-block">Parentesco:</small>
                                <span class="fw-medium">${fam.parentesco}</span>
                            </div>
                            <div class="col-md-6">
                                <small class="text-muted d-block">Teléfono:</small>
                                <span class="fw-medium">${fam.telefono}</span>
                            </div>
                            <div class="col-12">
                                <small class="text-muted d-block">Email:</small>
                                <span class="fw-medium">${fam.email}</span>
                            </div>
                        </div>
                    </div>
                `).join('')
                : '<div class="alert alert-info mb-0">No hay información de familiares disponible.</div>';

            return `
                <div class="accordion-item border-0 shadow-sm mb-3">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed bg-gradient" type="button" data-bs-toggle="collapse" data-bs-target="#collapse${index}" aria-expanded="false" style="background: linear-gradient(90deg, #e3f2fd 0%, #bbdefb 100%); border: none; font-weight: 600;">
                            <div>
                                <span class="text-primary">${alumnoNombreCompleto}</span>
                                ${alumno.grado_nombre ? `<span class="badge bg-info text-dark ms-2">${alumno.grado_nombre}</span>` : ''}
                                <small class="text-muted d-block fw-normal">RUN: ${alumno.alumno_run || 'N/A'}</small>
                            </div>
                        </button>
                    </h2>
                    <div id="collapse${index}" class="accordion-collapse collapse">
                        <div class="accordion-body">
                            <div class="d-flex justify-content-end mb-3">
                                ${alumno.matricula_id ? `
                                    <button class="btn btn-sm btn-success btn-vista-previa d-flex align-items-center justify-content-center" data-matricula-id="${alumno.matricula_id}" title="Ver Ficha Social y de Salud">
                                        <i class="bi bi-eye-fill me-1"></i> Social / Salud
                                    </button>
                                ` : ''}
                            </div>
                            ${familiaresHtml}
                        </div>
                    </div>
                </div>
            `;
        }).join('');

        resultsContainer.innerHTML = `<div class="accordion">${accordionHtml}</div>`;
    }

    // --- NUEVO: Lógica para la vista previa ---
    function abrirVistaPrevia(matriculaId) {
        const modalLabel = document.getElementById('modalVistaPreviaLabel');
        const modalBody = document.getElementById('contenidoVistaPrevia');

        modalLabel.textContent = `Ficha de Matrícula`;
        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);
                    modalLabel.textContent = `Ficha de: ${data.alumno.nombre} ${data.alumno.ap_paterno}`;
                } 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');
        const fecha = (value) => value ? new Date(value + 'T00:00:00').toLocaleDateString('es-CL') : 'N/A';

        let html = `<h4 class="mb-3">Datos del Estudiante</h4>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr><th style="width: 25%;">Nombre Completo</th><td>${val(alumno.nombre)} ${val(alumno.ap_paterno)} ${val(alumno.ap_materno)}</td></tr>
                <tr><th>RUN</th><td>${val(alumno.run)}</td></tr>
                <tr><th>Fecha de Nacimiento</th><td>${fecha(alumno.fecha_nac)}</td></tr>
                <tr><th>Nacionalidad</th><td>${val(alumno.nacionalidad)}</td></tr>
                <tr><th>Domicilio</th><td>${val(alumno.domicilio)}</td></tr>
                <tr><th>Curso / Grado</th><td>${val(alumno.grado_nombre)}</td></tr>
                <tr><th>Fecha de Matrícula</th><td>${fecha(alumno.fecha_matricula)}</td></tr>
            </tbody>
        </table>

        <h4 class="mt-4 mb-3">Información Social</h4>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr><th style="width: 25%;">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>
            </tbody>
        </table>

        <h4 class="mt-4 mb-3">Información de Salud</h4>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr><th style="width: 25%;">Sistema de Salud</th><td>${val(alumno.sistema_salud)}</td></tr>
                <tr><th>Alergias</th><td>${val(alumno.alergias)}</td></tr>
                <tr><th>Enfermedad de Cuidado</th><td>${val(alumno.enfermedad_cuidado)}</td></tr>
                <tr><th>Medicamento Contraindicado</th><td>${val(alumno.medicamento_contraindicado)}</td></tr>
                <tr><th>Medicamento de Uso Diario</th><td>${val(alumno.medicamento_uso_diario)}</td></tr>
                <tr><th>Observaciones</th><td>${val(alumno.observaciones)}</td></tr>
            </tbody>
        </table>`;

        return html;
    }
});