const Store = {
    cart: JSON.parse(localStorage.getItem('bbCart') || '[]')
};

function renderCart() {
    const list = document.getElementById('cartList');
    const empty = document.getElementById('cartEmpty');
    const totalEl = document.getElementById('totalPrice');
    const checkout = document.getElementById('checkoutBtn');

    if (Store.cart.length === 0) {
        empty.classList.remove('hidden');
        list.innerHTML = '';
        totalEl.textContent = '$0.00';
        checkout.disabled = true;
        return;
    }
    empty.classList.add('hidden');
    checkout.disabled = false;

    let total = 0;
    list.innerHTML = Store.cart.map(item => {
        const sub = item.price * item.qty;
        total += sub;
        return `
            <div class="flex gap-4 items-center bg-white dark:bg-gray-800 p-4 rounded-2xl shadow">
                <img src="${item.img}" alt="${item.name}" class="w-20 h-20 rounded-lg object-cover">
                <div class="flex-1">
                    <h3 class="font-semibold">${item.name}</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">$${item.price.toFixed(2)} each</p>
                </div>
                <div class="flex items-center gap-2">
                    <button class="qty-btn" data-id="${item.id}" data-action="dec"><i data-feather="minus" class="w-4 h-4"></i></button>
                    <span class="w-8 text-center">${item.qty}</span>
                    <button class="qty-btn" data-id="${item.id}" data-action="inc"><i data-feather="plus" class="w-4 h-4"></i></button>
                </div>
                <span class="font-bold text-orange-500 w-16 text-right">$${sub.toFixed(2)}</span>
            </div>
        `;
    }).join('');
    totalEl.textContent = `$${total.toFixed(2)}`;
    feather.replace();
}

function changeQty(e) {
    const id = +e.currentTarget.dataset.id;
    const action = e.currentTarget.dataset.action;
    const item = Store.cart.find(i => i.id === id);
    if (action === 'inc') item.qty += 1;
    else {
        item.qty -= 1;
        if (item.qty <= 0) Store.cart = Store.cart.filter(i => i.id !== id);
    }
    localStorage.setItem('bbCart', JSON.stringify(Store.cart));
    renderCart();
}

document.addEventListener('click', e => {
    if (e.target.closest('.qty-btn')) changeQty(e);
});

document.getElementById('checkoutBtn').addEventListener('click', () => {
    alert("Thanks! We'll start cooking and text you when it's ready.");
    Store.cart = [];
    localStorage.removeItem('bbCart');
    renderCart();
});

renderCart();