(() => {
  'use strict';
  const root = document.querySelector('[data-cart-page]');
  const money = (value) => `₹${Number(value || 0).toLocaleString('en-IN')}`;

  CampusBookHouse.refreshCart().then((cart) => {
    if (!cart || !cart.computed?.items?.length) {
      root.innerHTML = '<div class="empty-state"><h2>Your cart is empty</h2><p>Find your next textbook in the catalogue.</p><a class="btn btn--primary" href="/search.html">Browse books</a></div>';
      return;
    }
    root.innerHTML = `
      <div class="cart-layout">
        <section class="cart-items">
          ${cart.computed.items.map((item) => `
            <article class="cart-item">
              <img src="${item.imgUrl || ''}" alt="">
              <div><h2>${item.productName}</h2><p>Quantity: ${item.quantity}</p></div>
              <strong>${money(item.finalsellprice)}</strong>
            </article>`).join('')}
        </section>
        <aside class="order-summary">
          <h2>Order summary</h2>
          <div class="summary-row summary-row--total"><span>Total</span><strong>${money(cart.computed.amount)}</strong></div>
          <a class="btn btn--primary btn--lg btn--full" href="/login.html?next=/checkout.html">Continue to delivery</a>
        </aside>
      </div>`;
  });
})();