const CART_KEY = 'mmb_cart';

function getCart() {
  try {
    return JSON.parse(localStorage.getItem(CART_KEY)) || [];
  } catch {
    return [];
  }
}

function saveCart(cart) {
  localStorage.setItem(CART_KEY, JSON.stringify(cart));
  updateCartCount();
}

function updateCartCount() {
  const count = getCart().reduce((sum, item) => sum + item.quantity, 0);
  const node = document.getElementById('cart-count');
  if (node) node.textContent = count;
}

function addToCart(productId, quantity) {
  const qty = Number(quantity || 1);
  if (qty <= 0) return;
  const product = window.PRODUCTS.find(p => p.id === productId);
  if (!product) return;
  const cart = getCart();
  const existing = cart.find(item => item.id === productId);
  if (existing) existing.quantity += qty;
  else cart.push({ id: product.id, name: product.name, price: product.price, quantity: qty });
  saveCart(cart);
  alert(`${product.name} added to cart.`);
}

function clearCart() {
  localStorage.removeItem(CART_KEY);
  updateCartCount();
  renderCheckout();
}

function formatMoney(value) {
  return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value);
}

function calculateTotals(cart) {
  const subtotal = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
  const discount = subtotal >= 100 ? subtotal * 0.10 : 0;
  return { subtotal, discount, total: subtotal - discount };
}

function productCard(product) {
  return `
    <article class="product-card">
      <div class="product-top">
        <div>
          <div class="eyebrow">${product.category}</div>
          <h3>${product.name}</h3>
        </div>
        <div class="price">${formatMoney(product.price)}</div>
      </div>
      <p class="product-meta">${product.description}</p>
      <p class="small-note">Priced per ${product.unit}.</p>
      <div class="quantity-row">
        <input type="number" min="1" value="1" id="qty-${product.id}" />
        <button class="btn btn-primary" onclick="addToCart('${product.id}', document.getElementById('qty-${product.id}').value)">Add to cart</button>
      </div>
    </article>
  `;
}

function renderProducts() {
  const productGrid = document.getElementById('product-grid');
  if (productGrid) productGrid.innerHTML = window.PRODUCTS.map(productCard).join('');

  const featured = document.getElementById('featured-products');
  if (featured) featured.innerHTML = window.PRODUCTS.slice(0, 3).map(productCard).join('');
}

function renderCheckout() {
  const cart = getCart();
  const cartItems = document.getElementById('cart-items');
  if (!cartItems) return;

  if (!cart.length) {
    cartItems.innerHTML = '<p class="small-note">Your cart is empty.</p>';
  } else {
    cartItems.innerHTML = cart.map(item => `
      <div class="cart-item">
        <div>
          <strong>${item.name}</strong>
          <div class="small-note">Qty ${item.quantity}</div>
        </div>
        <strong>${formatMoney(item.price * item.quantity)}</strong>
      </div>
    `).join('');
  }

  const totals = calculateTotals(cart);
  document.getElementById('subtotal').textContent = formatMoney(totals.subtotal);
  document.getElementById('discount').textContent = `-${formatMoney(totals.discount)}`;
  document.getElementById('total').textContent = formatMoney(totals.total);
}

function initCheckoutForm() {
  const form = document.getElementById('checkout-form');
  if (!form) return;

  form.addEventListener('submit', (event) => {
    event.preventDefault();
    const cart = getCart();
    const result = document.getElementById('order-result');
    if (!cart.length) {
      result.classList.remove('hidden');
      result.innerHTML = '<strong>Your cart is empty.</strong> Add products before checking out.';
      return;
    }

    const formData = new FormData(form);
    const values = Object.fromEntries(formData.entries());
    const totals = calculateTotals(cart);
    const orderLines = cart.map(item => `• ${item.name} x ${item.quantity} = ${formatMoney(item.price * item.quantity)}`).join('<br>');
    const message = `
      <h3>Order request generated</h3>
      <p><strong>Name:</strong> ${values.name}<br>
      <strong>Phone:</strong> ${values.phone}<br>
      <strong>Email:</strong> ${values.email}<br>
      <strong>Pickup date:</strong> ${values.pickupDate}<br>
      <strong>Method:</strong> ${values.fulfillment}<br>
      <strong>Location:</strong> ${values.location || 'Not provided'}<br>
      <strong>Notes:</strong> ${values.notes || 'None'}</p>
      <p><strong>Items</strong><br>${orderLines}</p>
      <p><strong>Total:</strong> ${formatMoney(totals.total)}</p>
      <p class="small-note">Next step: connect this form to Square, GoDaddy Commerce, Formspree, or your email to accept live submissions and payments.</p>
    `;
    result.classList.remove('hidden');
    result.innerHTML = message;
    result.scrollIntoView({ behavior: 'smooth' });
  });

  const clearButton = document.getElementById('clear-cart');
  if (clearButton) clearButton.addEventListener('click', clearCart);
}

document.addEventListener('DOMContentLoaded', () => {
  updateCartCount();
  renderProducts();
  renderCheckout();
  initCheckoutForm();
});