/**
 * Sistema Dinámico de Productos Basado en Altura del Sidebar
 * Solo para escritorio (min-width: 992px)
 */

class DynamicProductLoader {
    constructor() {
        this.isDesktop = false;
        this.sidebar = null;
        this.productContainer = null;
        this.currentProductCount = 0;
        this.maxProducts = 50; // Límite máximo de productos
        this.productHeight = 300; // Altura aproximada de cada producto en píxeles (reducida)
        this.productsPerRow = 4; // Productos por fila en escritorio
        this.lastCalculatedHeight = 0;
        this.isLoading = false;
        this.minHeightDifference = 100; // Reducido de 200px a 100px
        
        this.init();
    }
    
    init() {
        console.log('🚀 DynamicProductLoader: Iniciando...');
        
        // Solo ejecutar en escritorio
        this.checkIfDesktop();
        console.log('📱 Es escritorio:', this.isDesktop, '(Ancho:', window.innerWidth + 'px)');
        
        if (this.isDesktop) {
            this.findElements();
            console.log('🔍 Elementos encontrados:', {
                sidebar: !!this.sidebar,
                productContainer: !!this.productContainer,
                currentProductCount: this.currentProductCount
            });
            
            if (this.sidebar && this.productContainer) {
                this.setupEventListeners();
                // Esperar un poco para que se carguen los elementos
                setTimeout(() => {
                    this.calculateAndLoadProducts();
                }, 1000);
            } else {
                console.warn('⚠️ No se encontraron los elementos necesarios');
            }
        }
    }
    
    checkIfDesktop() {
        this.isDesktop = window.innerWidth >= 992;
    }
    
    findElements() {
        this.sidebar = document.getElementById('secondary');
        this.productContainer = document.querySelector('.articleList');
        
        if (this.productContainer) {
            this.currentProductCount = this.productContainer.querySelectorAll('.product-card').length;
        }
    }
    
    setupEventListeners() {
        // Recalcular al redimensionar la ventana
        let resizeTimeout;
        window.addEventListener('resize', () => {
            clearTimeout(resizeTimeout);
            resizeTimeout = setTimeout(() => {
                this.checkIfDesktop();
                if (this.isDesktop) {
                    this.calculateAndLoadProducts();
                }
            }, 250);
        });
        
        // Observar cambios en el sidebar (si se agregan/quitan elementos)
        if (this.sidebar && window.MutationObserver) {
            const observer = new MutationObserver(() => {
                if (this.isDesktop) {
                    setTimeout(() => this.calculateAndLoadProducts(), 100);
                }
            });
            
            observer.observe(this.sidebar, {
                childList: true,
                subtree: true
            });
        }
    }
    
    calculateAndLoadProducts() {
        if (!this.isDesktop || !this.sidebar || !this.productContainer || this.isLoading) {
            console.log('❌ No se puede calcular:', {
                isDesktop: this.isDesktop,
                sidebar: !!this.sidebar,
                productContainer: !!this.productContainer,
                isLoading: this.isLoading
            });
            return;
        }
        
        // Calcular altura del sidebar
        const sidebarHeight = this.sidebar.offsetHeight;
        console.log('📏 Altura del sidebar:', sidebarHeight + 'px');
        
        // Solo proceder si la altura cambió significativamente
        if (Math.abs(sidebarHeight - this.lastCalculatedHeight) < 50) {
            console.log('⏸️ Altura no cambió significativamente');
            return;
        }
        
        this.lastCalculatedHeight = sidebarHeight;
        
        // Calcular altura del contenedor de productos
        const productContainerHeight = this.productContainer.offsetHeight;
        console.log('📏 Altura del contenedor de productos:', productContainerHeight + 'px');
        
        // Si el sidebar es más alto, calcular cuántos productos adicionales necesitamos
        const heightDifference = sidebarHeight - productContainerHeight;
        console.log('📐 Diferencia de altura:', heightDifference + 'px');
        
        if (heightDifference > this.minHeightDifference) {
            const additionalHeight = heightDifference - this.minHeightDifference;
            const additionalRows = Math.max(1, Math.floor(additionalHeight / this.productHeight)); // Mínimo 1 fila
            const additionalProducts = additionalRows * this.productsPerRow;
            
            console.log('📊 Cálculo de productos adicionales:', {
                additionalHeight: additionalHeight + 'px',
                additionalRows,
                additionalProducts,
                currentCount: this.currentProductCount,
                maxProducts: this.maxProducts
            });
            
            if (additionalProducts > 0 && (this.currentProductCount + additionalProducts) <= this.maxProducts) {
                console.log('✅ Cargando', additionalProducts, 'productos adicionales');
                this.loadMoreProducts(additionalProducts);
            } else {
                console.log('⚠️ No se cargan productos:', additionalProducts <= 0 ? 'Cantidad inválida' : 'Límite máximo alcanzado');
            }
        } else {
            console.log('ℹ️ El sidebar no es suficientemente más alto que el contenido');
        }
    }
    
    async loadMoreProducts(count) {
        if (this.isLoading) {
            console.log('⏳ Ya hay una carga en progreso');
            return;
        }
        
        this.isLoading = true;
        console.log('🔄 Iniciando carga de', count, 'productos adicionales');
        
        try {
            // Mostrar indicador de carga
            this.showLoadingIndicator();
            
            // Obtener parámetros actuales de la URL
            const urlParams = new URLSearchParams(window.location.search);
            urlParams.set('offset', this.currentProductCount);
            urlParams.set('limit', count);
            urlParams.set('ajax', '1');
            
            const url = `index.php?${urlParams.toString()}`;
            console.log('🌐 URL de petición:', url);
            
            const response = await fetch(url, {
                method: 'GET',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            });
            
            console.log('📡 Respuesta del servidor:', response.status, response.statusText);
            
            if (!response.ok) {
                throw new Error(`Error ${response.status}: ${response.statusText}`);
            }
            
            const data = await response.json();
            console.log('📦 Datos recibidos:', data);
            
            if (data.success && data.products && data.products.length > 0) {
                this.appendProducts(data.products);
                this.currentProductCount += data.products.length;
                
                console.log(`✅ Cargados ${data.products.length} productos adicionales. Total: ${this.currentProductCount}`);
            } else {
                console.log('⚠️ No se recibieron productos:', data);
            }
            
        } catch (error) {
            console.error('❌ Error cargando productos dinámicos:', error);
        } finally {
            this.hideLoadingIndicator();
            this.isLoading = false;
        }
    }
    
    appendProducts(products) {
        products.forEach((product, index) => {
            const productElement = this.createProductElement(product);
            productElement.classList.add('dynamic-loaded');
            
            // Añadir un pequeño delay escalonado para la animación
            setTimeout(() => {
                this.productContainer.appendChild(productElement);
            }, index * 100);
        });
    }
    
    createProductElement(product) {
        const div = document.createElement('div');
        div.className = 'product-card';
        div.dataset.id = product.id;
        
        // Construir HTML del producto (similar al PHP original)
        div.innerHTML = `
            ${product.visible == 0 ? `
                <span class="producto-oculto-badge" title="Este producto solo es visible para usuarios autenticados">
                    <i class="fas fa-eye-slash"></i> Oculto
                </span>
            ` : ''}
            <a href="producto.php?id=${product.id}">
                <img src="${product.imagen}" 
                     alt="${this.escapeHtml(product.descripcion)}" 
                     class="product-image"
                     loading="lazy">
            </a>
            <div class="product-info">
                <h3 class="product-title">${this.escapeHtml(product.titulo)}</h3>
                <div class="prices-container">
                    ${this.generatePriceHTML(product)}
                </div>
                <div class="product-actions">
                    <button class="btn btn-primary add-to-cart" data-id="${product.id}">
                        <i class="fas fa-shopping-cart"></i> Agregar
                    </button>
                </div>
            </div>
        `;
        
        return div;
    }
    
    generatePriceHTML(product) {
        if (product.precio_venta1 == 0) {
            return '<div class="product-out-of-stock active">En falta</div>';
        }
        
        if (product.oferta && product.oferta > 0) {
            const precioOriginal = Math.max(product.precio_venta1, product.precio_venta2 || 0, product.precio_venta3 || 0);
            return `
                <div class="price-offer">
                    <span class="original-price">₲ ${this.formatNumber(precioOriginal)}</span>
                    <span class="offer-price">₲ ${this.formatNumber(product.oferta)}</span>
                    <span class="discount-badge">OFERTA</span>
                </div>
            `;
        }
        
        return `<div class="price">₲ ${this.formatNumber(product.precio_venta1)}</div>`;
    }
    
    escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
    
    formatNumber(number) {
        return new Intl.NumberFormat('es-PY').format(number);
    }
    
    showLoadingIndicator() {
        if (!document.querySelector('.dynamic-loading')) {
            const loader = document.createElement('div');
            loader.className = 'dynamic-loading';
            loader.innerHTML = `
                <div style="text-align: center; padding: 20px; color: #666;">
                    <i class="fas fa-spinner fa-spin"></i> Cargando más productos...
                </div>
            `;
            this.productContainer.appendChild(loader);
        }
    }
    
    hideLoadingIndicator() {
        const loader = document.querySelector('.dynamic-loading');
        if (loader) {
            loader.remove();
        }
    }
    
    // Método para debugging - llamar desde la consola
    forceCalculation() {
        console.log('🔧 Forzando cálculo manual...');
        this.lastCalculatedHeight = 0; // Reset para forzar cálculo
        this.calculateAndLoadProducts();
    }
    
    // Método para ver estado actual
    getStatus() {
        return {
            isDesktop: this.isDesktop,
            sidebar: !!this.sidebar,
            productContainer: !!this.productContainer,
            sidebarHeight: this.sidebar?.offsetHeight,
            productContainerHeight: this.productContainer?.offsetHeight,
            currentProductCount: this.currentProductCount,
            isLoading: this.isLoading
        };
    }
}

// Inicializar cuando el DOM esté listo
document.addEventListener('DOMContentLoaded', function() {
    console.log('🌐 DOM cargado - URL actual:', window.location.pathname);
    
    // Solo en escritorio y en la página principal
    const isMainPage = window.location.pathname.includes('index.php') || 
                      window.location.pathname === '/' || 
                      window.location.pathname === '' ||
                      window.location.pathname.endsWith('jkeas.com.py/');
    
    console.log('📄 Es página principal:', isMainPage);
    
    if (window.innerWidth >= 992 && isMainPage) {
        console.log('✅ Iniciando DynamicProductLoader');
        window.dynamicProductLoader = new DynamicProductLoader(); // Hacer accesible globalmente
    } else {
        console.log('❌ No se inicia DynamicProductLoader:', {
            isDesktop: window.innerWidth >= 992,
            isMainPage: isMainPage,
            currentWidth: window.innerWidth
        });
    }
});