document.addEventListener('DOMContentLoaded', function() {
    console.log('Iniciando buscador...');
    
    // Obtener elementos del DOM
    const buscador = document.getElementById('buscador');
    const searchButton = document.getElementById('search-button');
    const articleList = document.querySelector('.articleList');
    const contenedorProductos = document.getElementById('productos-container');
    const totElement = document.querySelector('.tot');
    
    // Verificación de elementos con logging
    console.log('Elementos encontrados:', {
        buscador: !!buscador,
        articleList: !!articleList,
        contenedorProductos: !!contenedorProductos,
        totElement: !!totElement
    });

    if (!buscador || !articleList || !contenedorProductos) {
        console.error('Elementos necesarios no encontrados');
        return;
    }

    let timeoutId;

    // Evento input para búsqueda en tiempo real
    buscador.addEventListener('input', function(e) {
        console.log('Input detectado:', e.target.value);
        clearTimeout(timeoutId);
        const query = e.target.value;
        
        if (query.length < 2) {
            contenedorProductos.innerHTML = '';
            articleList.style.display = 'grid';
            return;
        }

        timeoutId = setTimeout(() => {
            articleList.style.display = 'none';
            buscarProductos(query);
        }, 300);
    });

    // Evento click para el botón de búsqueda
    if (searchButton) {
        searchButton.addEventListener('click', function(e) {
            e.preventDefault();
            buscarProductos(buscador.value.trim());
        });
    }

    // Función para realizar la búsqueda
    function buscarProductos(query) {
        console.log('Buscando:', query);
        contenedorProductos.innerHTML = '<div class="loading">Buscando productos...</div>';

        // Modificar la URL para incluir un parámetro que nos diga si el usuario está logueado
        const usuarioLogueado = document.querySelector('.user-name') !== null;
        fetch(`ajax/buscar_productos.php?q=${encodeURIComponent(query)}&logged=${usuarioLogueado ? 1 : 0}`)
            .then(response => {
                if (!response.ok) throw new Error('Error en la respuesta del servidor');
                return response.text();
            })
            .then(html => {
                contenedorProductos.innerHTML = html;
                initializeCuotasEvents();
                
                const productCards = contenedorProductos.querySelectorAll('.product-card');
                if (totElement) {
                    totElement.textContent = `${productCards.length} artículos`;
                }
                console.log('Resultados encontrados:', productCards.length);
            })
            .catch(error => {
                console.error('Error en la búsqueda:', error);
                contenedorProductos.innerHTML = '<div class="error">Error al buscar productos</div>';
            });
    }

    // Inicializar eventos de cuotas
    function initializeCuotasEvents() {
        document.querySelectorAll('.cuotas-selector').forEach(select => {
            select.addEventListener('change', function() {
                actualizarPrecioCuota(this);
            });
        });
    }
    
    function construirTarjetaProducto(producto, config) {
        const imagenes = JSON.parse(producto.imagenes);
        const primera_imagen = imagenes.length > 0 ? imagenes[0] : 'no_imagen.png';
        const timestamp = Date.now();
    
        // Verificar si el usuario está logueado buscando el elemento .user-name
        const usuarioLogueado = document.querySelector('.user-name') !== null;
    
        let cuotasHTML = '<option value="contado" data-precio="' + producto.precio_venta1 + '">Contado</option>';
        if (producto.cuota1 > 0) cuotasHTML += `<option value="1" data-precio="${producto.cuota1}">Cuota 1</option>`;
        if (producto.cuota2 > 0) cuotasHTML += `<option value="2" data-precio="${producto.cuota2}">2 cuotas</option>`;
        if (producto.cuota3 > 0) cuotasHTML += `<option value="3" data-precio="${producto.cuota3}">3 cuotas</option>`;
        if (producto.cuota6 > 0) cuotasHTML += `<option value="6" data-precio="${producto.cuota6}">6 cuotas</option>`;
        if (producto.cuota10 > 0) cuotasHTML += `<option value="10" data-precio="${producto.cuota10}">10 cuotas</option>`;
        if (producto.cuota12 > 0) cuotasHTML += `<option value="12" data-precio="${producto.cuota12}">12 cuotas</option>`;
        if (producto.cuota15 > 0) cuotasHTML += `<option value="15" data-precio="${producto.cuota15}">15 cuotas</option>`;
        if (producto.cuota18 > 0) cuotasHTML += `<option value="18" data-precio="${producto.cuota18}">18 cuotas</option>`;
    
        return `
            <div class="product-card" data-id="${producto.id}">
                <a href="producto.php?id=${producto.id}">
                    <img src="uploads/productos/${primera_imagen}?v=${timestamp}" 
                         alt="${producto.descripcion}" 
                         class="product-image"
                         loading="lazy">
                </a>
                <div class="product-info">
                    <h3 class="product-title">${producto.titulo}</h3>
                    <div class="prices-container">
                        <div class="product-price active">
                            ${config.moneda} ${formatNumber(producto.precio_venta1, config.con_decimales)}.-
                        </div>
                        <div class="precio-cuota"></div>
                    </div>
                    <select class="cuotas-selector" onchange="actualizarPrecioCuota(this)">
                        ${cuotasHTML}
                    </select>
                    ${usuarioLogueado ? `
                        <button class="btn-vender" 
                                data-producto-id="${producto.id}"
                                onclick="iniciarVenta(${producto.id})">
                            <i class="fas fa-shopping-cart"></i> Vender
                        </button>
                    ` : ''}
                </div>
            </div>
        `;
    }
    
    // Agregar la función iniciarVenta si no existe
    function iniciarVenta(productoId) {
        window.location.href = `venta.php?producto_id=${productoId}`;
    }
    
    // Función auxiliar para formatear números si no existe
    function formatNumber(num, conDecimales) {
        return num.toLocaleString('es-PY', {
            minimumFractionDigits: conDecimales ? 2 : 0,
            maximumFractionDigits: conDecimales ? 2 : 0
        }).replace(',', '.');
    }
});
