console.log('🚀 Contactos.js cargado - versión simplificada');

document.addEventListener('DOMContentLoaded', () => {
    console.log('🔧 DOM cargado');
    console.log('🔧 Función src disponible:', typeof window.src);
    console.log('🔧 GGEE_CONFIG:', window.GGEE_CONFIG);
    
    const searchInput = document.getElementById('searchInput');
    const resultsContainer = document.getElementById('resultsContainer');
    let searchTimeout;

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

    console.log('✅ Elementos encontrados correctamente');

    searchInput.addEventListener('input', () => {
        console.log('📝 Input detectado');
        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;
        }

        searchTimeout = setTimeout(() => {
            console.log('🔍 Iniciando búsqueda para:', query);
            fetchContacts(query);
        }, 300);
    });

    async function fetchContacts(query) {
        console.log('📡 fetchContacts llamado con:', 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 ruta absoluta como fallback si src() no funciona
            let url;
            if (typeof window.src === 'function') {
                url = `${src("buscar_contactos.php")}?q=${encodeURIComponent(query)}`;
                console.log('🔧 Usando función src()');
            } else {
                url = `/src/buscar_contactos.php?q=${encodeURIComponent(query)}`;
                console.log('🔧 Usando ruta absoluta como fallback');
            }
            
            console.log('🌐 URL completa:', url);
            
            const response = await fetch(url);
            console.log('📡 Response status:', response.status);
            console.log('📡 Response ok:', response.ok);
            
            const data = await response.json();
            console.log('📦 Response data:', data);

            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) {
        console.log('🎨 Renderizando resultados:', 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;
        }

        // Versión simplificada del renderizado para debugging
        const html = data.map((alumno, index) => {
            const alumnoNombre = `${alumno.alumno_ap_paterno || ''} ${alumno.alumno_ap_materno || ''}, ${alumno.alumno_nombre || ''}`.trim();
            
            return `
                <div class="card mb-3">
                    <div class="card-body">
                        <h5 class="card-title">${alumnoNombre}</h5>
                        <p class="card-text"><strong>RUN:</strong> ${alumno.alumno_run || 'N/A'}</p>
                        <div class="text-muted">
                            <small>Datos encontrados: ${JSON.stringify(alumno)}</small>
                        </div>
                    </div>
                </div>
            `;
        }).join('');

        resultsContainer.innerHTML = html;
        console.log('✅ Resultados renderizados correctamente');
    }
});

console.log('📄 Fin del archivo contactos.js');
