// Shopping cart functionality
let cart = [];
let selectedOptions = {};

function updateCart() {
    const cartItems = document.getElementById('cart-items');
    const cartTotal = document.getElementById('cart-total');
    const cartCount = document.getElementById('cart-count');
    const cartToggle = document.getElementById('cart-toggle');
    
    // Clear current items
    cartItems.innerHTML = '';
    
    let total = 0;
    cart.forEach((item, index) => {
        const itemElement = document.createElement('div');
        itemElement.className = 'flex justify-between items-center p-2 bg-gray-50 rounded-lg';
        itemElement.innerHTML = `
            <div class="text-sm">
                <div class="font-semibold">${item.product} ${item.dosage}</div>
                <div class="text-gray-600">$${item.price}</div>
            </div>
            <button onclick="removeFromCart(${index})" class="text-red-500 hover:text-red-700">
                <i class="fas fa-trash text-xs"></i>
            </button>
        `;
        cartItems.appendChild(itemElement);
        total += parseInt(item.price);
    });
    
    cartTotal.textContent = '$' + total;
    cartCount.textContent = cart.length;
    
    // Show/hide cart button
    if (cart.length > 0) {
        cartToggle.style.display = 'inline-flex';
    } else {
        cartToggle.style.display = 'none';
        document.getElementById('cart-summary').style.display = 'none';
    }
    
    // Save cart to localStorage for checkout page
    localStorage.setItem('slimcore_cart', JSON.stringify(cart));
}

function removeFromCart(index) {
    cart.splice(index, 1);
    updateCart();
}

function addToCart(product, dosage, price) {
    const item = {
        product: product.charAt(0).toUpperCase() + product.slice(1),
        dosage: dosage,
        price: price
    };
    
    cart.push(item);
    updateCart();
    
    // Show success feedback
    showCartFeedback();
}

function showCartFeedback() {
    const cartToggle = document.getElementById('cart-toggle');
    const originalText = cartToggle.innerHTML;
    
    cartToggle.innerHTML = '<i class="fas fa-check mr-2"></i>Added to Cart!';
    cartToggle.classList.add('bg-green-500');
    cartToggle.classList.remove('bg-orange-400');
    
    setTimeout(() => {
        cartToggle.innerHTML = originalText;
        cartToggle.classList.remove('bg-green-500');
        cartToggle.classList.add('bg-orange-400');
    }, 1500);
}

function handleDosageSelection(element, product) {
    // Remove selection from other options in the same product group
    const productCard = element.closest('.group');
    const allOptions = productCard.querySelectorAll('.dosage-option');
    const addButton = productCard.querySelector('.add-to-cart-btn');
    
    allOptions.forEach(option => {
        option.classList.remove('border-orange-400', 'bg-orange-50');
        option.classList.add('border-gray-200');
    });
    
    // Add selection to clicked option
    element.classList.remove('border-gray-200');
    element.classList.add('border-orange-400', 'bg-orange-50');
    
    // Store selected option
    selectedOptions[product] = {
        dosage: element.dataset.dosage,
        price: element.dataset.price,
        element: element
    };
    
    // Enable add to cart button
    addButton.disabled = false;
    addButton.classList.remove('opacity-50', 'cursor-not-allowed');
    addButton.classList.add('hover:scale-105');
    addButton.textContent = 'Add to Cart - $' + element.dataset.price;
    
    // Add click handler
    addButton.onclick = () => {
        addToCart(product, selectedOptions[product].dosage, selectedOptions[product].price);
    };
}

function toggleCart() {
    const cartSummary = document.getElementById('cart-summary');
    const isVisible = cartSummary.style.display !== 'none';
    
    if (isVisible) {
        cartSummary.style.display = 'none';
    } else {
        cartSummary.style.display = 'block';
        cartSummary.classList.remove('translate-x-full');
        cartSummary.classList.add('translate-x-0');
    }
}

function closeCart() {
    const cartSummary = document.getElementById('cart-summary');
    cartSummary.classList.remove('translate-x-0');
    cartSummary.classList.add('translate-x-full');
    setTimeout(() => {
        cartSummary.style.display = 'none';
    }, 300);
}

// Event listeners
function addEventListeners() {
    // Dosage selection
    document.querySelectorAll('.dosage-option').forEach(option => {
        option.addEventListener('click', function() {
            const product = this.dataset.product;
            handleDosageSelection(this, product);
        });
    });
    
    // Cart toggle
    const cartToggle = document.getElementById('cart-toggle');
    if (cartToggle) {
        cartToggle.addEventListener('click', toggleCart);
    }
    
    // Close cart
    const closeCartBtn = document.getElementById('close-cart');
    if (closeCartBtn) {
        closeCartBtn.addEventListener('click', closeCart);
    }
}

// Initialize
export function init() {
    // Load cart from localStorage if it exists
    const savedCart = localStorage.getItem('slimcore_cart');
    if (savedCart) {
        cart = JSON.parse(savedCart);
        updateCart();
    }
    
    addEventListeners();
}

export function teardown() {
    // Remove event listeners
    document.querySelectorAll('.dosage-option').forEach(option => {
        option.removeEventListener('click', handleDosageSelection);
    });
    
    const cartToggle = document.getElementById('cart-toggle');
    if (cartToggle) {
        cartToggle.removeEventListener('click', toggleCart);
    }
    
    const closeCartBtn = document.getElementById('close-cart');
    if (closeCartBtn) {
        closeCartBtn.removeEventListener('click', closeCart);
    }
}

// Make functions globally available
window.removeFromCart = removeFromCart;