let filterButtons = [];
let productCards = [];
let cartCounter = null;

function filterProducts(category) {
    const products = document.querySelectorAll('.product-card');
    const buttons = document.querySelectorAll('.filter-btn');

    // Update active button styling
    buttons.forEach(btn => {
        btn.classList.remove('active');
        btn.classList.remove('bg-gradient-to-r', 'from-[var(--primary-color)]', 'to-[var(--accent2-color)]', 'text-white');
        
        // Restore original styling for inactive buttons
        if (btn.textContent.includes('Cuidado Personal')) {
            btn.classList.add('bg-gradient-to-r', 'from-purple-100', 'to-pink-100', 'text-purple-700');
        } else if (btn.textContent.includes('Electrodomésticos')) {
            btn.classList.add('bg-gradient-to-r', 'from-orange-100', 'to-red-100', 'text-orange-700');
        } else if (btn.textContent.includes('Tecnología')) {
            btn.classList.add('bg-gradient-to-r', 'from-blue-100', 'to-cyan-100', 'text-blue-700');
        }
    });

    // Set active button
    const activeButton = event ? event.target : buttons[0];
    activeButton.classList.add('active');
    activeButton.classList.remove('bg-gradient-to-r', 'from-purple-100', 'to-pink-100', 'text-purple-700');
    activeButton.classList.remove('bg-gradient-to-r', 'from-orange-100', 'to-red-100', 'text-orange-700');
    activeButton.classList.remove('bg-gradient-to-r', 'from-blue-100', 'to-cyan-100', 'text-blue-700');
    activeButton.classList.add('bg-gradient-to-r', 'from-[var(--primary-color)]', 'to-[var(--accent2-color)]', 'text-white');

    // Filter products with smooth animations
    products.forEach((product, index) => {
        if (category === 'all' || product.dataset.category === category) {
            // Show product
            product.style.display = 'block';
            product.style.opacity = '0';
            product.style.transform = 'translateY(20px)';
            
            setTimeout(() => {
                product.style.opacity = '1';
                product.style.transform = 'translateY(0)';
                product.style.transition = 'all 0.5s ease';
            }, index * 50); // Staggered animation
        } else {
            // Hide product
            product.style.opacity = '0';
            product.style.transform = 'translateY(20px)';
            product.style.transition = 'all 0.3s ease';
            
            setTimeout(() => {
                product.style.display = 'none';
            }, 300);
        }
    });

    // Update counter in stats section
    setTimeout(() => {
        const visibleProducts = document.querySelectorAll('.product-card[style*="display: block"], .product-card:not([style*="display: none"])').length;
        const statsCounter = document.querySelector('.text-3xl.font-bold.text-[var(--secondary-button-bg-color)]');
        if (statsCounter) {
            statsCounter.textContent = category === 'all' ? '14+' : visibleProducts + '+';
        }
    }, 500);
}

function addToCart(productId, productName, productPrice) {
    let cart = JSON.parse(localStorage.getItem('shopping-cart') || '[]');

    let existingProduct = cart.find(item => item.id === productId);

    if (existingProduct) {
        existingProduct.quantity += 1;
    } else {
        cart.push({
            id: productId,
            name: productName,
            price: productPrice,
            quantity: 1
        });
    }

    localStorage.setItem('shopping-cart', JSON.stringify(cart));

    // Enhanced success feedback
    const button = event.target;
    const originalText = button.innerHTML;
    const originalClasses = button.className;
    
    button.innerHTML = '<i class="fas fa-check mr-2"></i>¡Agregado!';
    button.className = originalClasses.replace(/bg-gradient-to-r.*?text-white/, '') + ' bg-gradient-to-r from-green-500 to-green-600 text-white';
    
    // Add pulse animation
    button.style.animation = 'pulse 0.5s ease-in-out';

    setTimeout(() => {
        button.innerHTML = originalText;
        button.className = originalClasses;
        button.style.animation = '';
    }, 2000);

    updateCartCounter();
}

function updateCartCounter() {
    let cart = JSON.parse(localStorage.getItem('shopping-cart') || '[]');
    let totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);

    // Update cart counter in header
    const cartCounters = document.querySelectorAll('[class*="cart-counter"], .fa-shopping-cart + span, [data-cart-counter]');
    cartCounters.forEach(counter => {
        if (counter) {
            counter.textContent = totalItems;
            
            // Add bounce animation
            counter.classList.add('animate-pulse');
            setTimeout(() => {
                counter.classList.remove('animate-pulse');
            }, 1000);
        }
    });
}

// Initialize the page functionality
function init() {
    filterButtons = document.querySelectorAll('.filter-btn');
    productCards = document.querySelectorAll('.product-card');
    cartCounter = document.querySelector('.fa-shopping-cart + span');

    // Make functions globally available
    window.filterProducts = filterProducts;
    window.addToCart = addToCart;
    window.updateCartCounter = updateCartCounter;

    // Set initial state
    updateCartCounter();
    
    // Add keyboard navigation for accessibility
    filterButtons.forEach(button => {
        button.addEventListener('keydown', function(e) {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                button.click();
            }
        });
    });

    console.log('Filtro de categorías inicializado correctamente');
}

function teardown() {
    // Clean up any event listeners if needed
    filterButtons.forEach(button => {
        button.removeEventListener('keydown', function() {});
    });
    
    // Clear global functions
    delete window.filterProducts;
    delete window.addToCart;
    delete window.updateCartCounter;
}

export { init, teardown };