// Shopping Cart and Checkout System for SlimCore Weight Loss
let cart = [];

// DOM Elements
let cartCountEl;
let cartItemsEl;
let cartEmptyEl;
let cartSummaryEl;
let cartSubtotalEl;
let cartTotalEl;
let checkoutBtnEl;
let checkoutModal;
let closeCheckoutEl;
let checkoutForm;
let checkoutItemsEl;
let checkoutSubtotalEl;
let checkoutTotalEl;

// Initialize cart functionality
function initializeCart() {
    cartCountEl = document.getElementById('cart-count');
    cartItemsEl = document.getElementById('cart-items');
    cartEmptyEl = document.getElementById('cart-empty');
    cartSummaryEl = document.getElementById('cart-summary');
    cartSubtotalEl = document.getElementById('cart-subtotal');
    cartTotalEl = document.getElementById('cart-total');
    checkoutBtnEl = document.getElementById('checkout-btn');
    checkoutModal = document.getElementById('checkout-modal');
    closeCheckoutEl = document.getElementById('close-checkout');
    checkoutForm = document.getElementById('checkout-form');
    checkoutItemsEl = document.getElementById('checkout-items');
    checkoutSubtotalEl = document.getElementById('checkout-subtotal');
    checkoutTotalEl = document.getElementById('checkout-total');

    // Add event listeners for "Add to Cart" buttons
    const addToCartButtons = document.querySelectorAll('.add-to-cart');
    addToCartButtons.forEach(button => {
        button.addEventListener('click', handleAddToCart);
    });

    // Checkout button event listener
    if (checkoutBtnEl) {
        checkoutBtnEl.addEventListener('click', openCheckoutModal);
    }

    // Close checkout modal
    if (closeCheckoutEl) {
        closeCheckoutEl.addEventListener('click', closeCheckoutModal);
    }

    // Close modal when clicking outside
    if (checkoutModal) {
        checkoutModal.addEventListener('click', function(e) {
            if (e.target === checkoutModal) {
                closeCheckoutModal();
            }
        });
    }

    // Form submission
    if (checkoutForm) {
        checkoutForm.addEventListener('submit', handleCheckoutSubmission);
    }

    updateCartDisplay();
}

// Handle adding items to cart
function handleAddToCart(e) {
    const button = e.target;
    const program = button.getAttribute('data-program');
    const name = button.getAttribute('data-name');
    const price = parseInt(button.getAttribute('data-price'));
    const weeks = button.getAttribute('data-weeks');

    // Check if item already exists in cart
    const existingItem = cart.find(item => item.program === program);
    
    if (existingItem) {
        // Update quantity if item exists
        existingItem.quantity += 1;
    } else {
        // Add new item to cart
        cart.push({
            program: program,
            name: name,
            price: price,
            weeks: weeks,
            quantity: 1
        });
    }

    // Visual feedback
    button.innerHTML = '<i class="fas fa-check"></i> Added!';
    button.style.backgroundColor = '#10B981';
    
    setTimeout(() => {
        button.innerHTML = 'Add to Cart';
        button.style.backgroundColor = '';
    }, 2000);

    updateCartDisplay();
}

// Update cart display
function updateCartDisplay() {
    const itemCount = cart.reduce((total, item) => total + item.quantity, 0);
    const subtotal = cart.reduce((total, item) => total + (item.price * item.quantity), 0);

    // Update cart count
    if (cartCountEl) {
        cartCountEl.textContent = itemCount;
    }

    // Show/hide empty state and summary
    if (cart.length === 0) {
        if (cartEmptyEl) cartEmptyEl.style.display = 'block';
        if (cartSummaryEl) cartSummaryEl.style.display = 'none';
        if (cartItemsEl) {
            cartItemsEl.innerHTML = `
                <div id="cart-empty" class="text-center py-8">
                    <i class="fas fa-shopping-cart text-gray-400 text-4xl mb-4"></i>
                    <p class="text-gray-500">Your cart is empty</p>
                    <p class="text-sm text-gray-400 mt-2">Select a program above to get started</p>
                </div>
            `;
        }
    } else {
        if (cartEmptyEl) cartEmptyEl.style.display = 'none';
        if (cartSummaryEl) cartSummaryEl.style.display = 'block';
        
        // Update cart items
        if (cartItemsEl) {
            cartItemsEl.innerHTML = cart.map(item => `
                <div class="flex items-center justify-between p-4 bg-gray-50 rounded-2xl">
                    <div class="flex-1">
                        <h4 class="font-bold text-blue-900 text-sm">${item.name}</h4>
                        <p class="text-gray-600 text-xs">${item.weeks}-week supply</p>
                        <div class="flex items-center space-x-2 mt-2">
                            <button class="w-6 h-6 bg-gray-200 rounded-full flex items-center justify-center text-xs hover:bg-gray-300" onclick="changeQuantity('${item.program}', -1)">
                                <i class="fas fa-minus"></i>
                            </button>
                            <span class="text-sm font-semibold">${item.quantity}</span>
                            <button class="w-6 h-6 bg-gray-200 rounded-full flex items-center justify-center text-xs hover:bg-gray-300" onclick="changeQuantity('${item.program}', 1)">
                                <i class="fas fa-plus"></i>
                            </button>
                        </div>
                    </div>
                    <div class="text-right ml-4">
                        <div class="font-bold text-blue-900">$${(item.price * item.quantity).toLocaleString()}</div>
                        <button class="text-red-500 hover:text-red-700 text-xs mt-1" onclick="removeFromCart('${item.program}')">
                            <i class="fas fa-trash"></i> Remove
                        </button>
                    </div>
                </div>
            `).join('');
        }

        // Update totals
        if (cartSubtotalEl) cartSubtotalEl.textContent = '$' + subtotal.toLocaleString();
        if (cartTotalEl) cartTotalEl.textContent = '$' + subtotal.toLocaleString();
    }
}

// Change item quantity
function changeQuantity(program, change) {
    const item = cart.find(item => item.program === program);
    if (item) {
        item.quantity += change;
        if (item.quantity <= 0) {
            removeFromCart(program);
        } else {
            updateCartDisplay();
        }
    }
}

// Remove item from cart
function removeFromCart(program) {
    cart = cart.filter(item => item.program !== program);
    updateCartDisplay();
}

// Open checkout modal
function openCheckoutModal() {
    if (cart.length === 0) {
        alert('Please add items to your cart before checking out.');
        return;
    }

    // Populate checkout items
    if (checkoutItemsEl) {
        checkoutItemsEl.innerHTML = cart.map(item => `
            <div class="flex justify-between items-center">
                <div>
                    <h4 class="font-semibold text-blue-900">${item.name}</h4>
                    <p class="text-sm text-gray-600">${item.weeks}-week supply × ${item.quantity}</p>
                </div>
                <div class="font-bold">$${(item.price * item.quantity).toLocaleString()}</div>
            </div>
        `).join('');
    }

    // Update checkout totals
    const subtotal = cart.reduce((total, item) => total + (item.price * item.quantity), 0);
    if (checkoutSubtotalEl) checkoutSubtotalEl.textContent = '$' + subtotal.toLocaleString();
    if (checkoutTotalEl) checkoutTotalEl.textContent = '$' + subtotal.toLocaleString();

    // Show modal
    if (checkoutModal) {
        checkoutModal.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }
}

// Close checkout modal
function closeCheckoutModal() {
    if (checkoutModal) {
        checkoutModal.classList.add('hidden');
        document.body.style.overflow = 'auto';
    }
}

// Handle checkout form submission
function handleCheckoutSubmission(e) {
    e.preventDefault();
    
    // Get form data
    const formData = new FormData(checkoutForm);
    const orderData = {
        // Contact Information
        firstName: formData.get('first_name'),
        lastName: formData.get('last_name'),
        email: formData.get('email'),
        phone: formData.get('phone'),
        
        // Address
        address: formData.get('address'),
        city: formData.get('city'),
        state: formData.get('state'),
        zip: formData.get('zip'),
        
        // Payment
        paymentMethod: formData.get('payment_method'),
        cardNumber: formData.get('card_number'),
        cardExpiry: formData.get('card_expiry'),
        cardCVV: formData.get('card_cvv'),
        cardName: formData.get('card_name'),
        
        // Cart items
        programs: cart.map(item => ({
            name: item.name,
            program: item.program,
            price: item.price,
            quantity: item.quantity,
            weeks: item.weeks
        })),
        
        // Totals
        subtotal: cart.reduce((total, item) => total + (item.price * item.quantity), 0),
        total: cart.reduce((total, item) => total + (item.price * item.quantity), 0)
    };

    // Show processing state
    const submitBtn = checkoutForm.querySelector('button[type="submit"]');
    const originalText = submitBtn.innerHTML;
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
    submitBtn.disabled = true;

    // Simulate order processing (in real implementation, this would make an API call)
    setTimeout(() => {
        // Reset form and cart
        cart = [];
        updateCartDisplay();
        closeCheckoutModal();
        
        // Show success message
        alert(`Order placed successfully! \n\nOrder Summary:\n- Customer: ${orderData.firstName} ${orderData.lastName}\n- Email: ${orderData.email}\n- Total: $${orderData.total.toLocaleString()}\n\nYou will receive a confirmation email shortly. Our medical team will contact you within 24 hours to schedule your FREE telehealth consultation.`);
        
        // Reset submit button
        submitBtn.innerHTML = originalText;
        submitBtn.disabled = false;
        
        // Reset form
        checkoutForm.reset();
        
    }, 2000);
}

// Export the init function
function init() {
    initializeCart();
}

// Export the teardown function
function teardown() {
    // Remove event listeners and clean up
    const addToCartButtons = document.querySelectorAll('.add-to-cart');
    addToCartButtons.forEach(button => {
        button.removeEventListener('click', handleAddToCart);
    });
    
    if (checkoutBtnEl) {
        checkoutBtnEl.removeEventListener('click', openCheckoutModal);
    }
    
    if (closeCheckoutEl) {
        closeCheckoutEl.removeEventListener('click', closeCheckoutModal);
    }
    
    if (checkoutForm) {
        checkoutForm.removeEventListener('submit', handleCheckoutSubmission);
    }
    
    // Clear cart
    cart = [];
}

// Make functions available globally for onclick handlers
window.changeQuantity = changeQuantity;
window.removeFromCart = removeFromCart;

// Export functions
window.init = init;
window.teardown = teardown;