---
interface Props {
  product: {
    id: string | number;
    name: string;
    price: number | string;
    image_url: string;
  };
}

const { product } = Astro.props;
const productJson = JSON.stringify(product);
---

<div class="add-to-cart-wrapper" data-product={productJson} data-id={product.id}>
  <button class="add-to-cart-btn uppercase tracking-widest text-[11px] text-primary font-semibold border border-primary/40 rounded-full px-4 py-1.5 hover:bg-primary hover:text-white transition-all">
    Tambah Keranjang
  </button>
  <div class="qty-control hidden items-center gap-3 bg-primary/10 rounded-full px-2 py-1">
    <button class="qty-minus text-primary hover:bg-primary hover:text-white w-6 h-6 rounded-full flex items-center justify-center font-bold transition-colors">-</button>
    <span class="qty-value text-xs font-semibold text-primary w-4 text-center">1</span>
    <button class="qty-plus text-primary hover:bg-primary hover:text-white w-6 h-6 rounded-full flex items-center justify-center font-bold transition-colors">+</button>
  </div>
</div>

<script>
  import { addToCart, updateQuantity, getCart, type CartItem } from '../lib/cartStore';

  function updateButtons() {
    const cart: CartItem[] = getCart();
    document.querySelectorAll('.add-to-cart-wrapper').forEach(node => {
      const wrapper = node as HTMLElement;
      const id = wrapper.dataset.id;
      const addBtn = wrapper.querySelector('.add-to-cart-btn');
      const qtyCtrl = wrapper.querySelector('.qty-control');
      const qtyVal = wrapper.querySelector('.qty-value');

      const cartItem = cart.find((item: CartItem) => String(item.id) === String(id));
      
      if (cartItem && cartItem.quantity > 0) {
        addBtn?.classList.add('hidden');
        qtyCtrl?.classList.remove('hidden');
        qtyCtrl?.classList.add('flex');
        if (qtyVal) qtyVal.textContent = cartItem.quantity.toString();
      } else {
        addBtn?.classList.remove('hidden');
        qtyCtrl?.classList.add('hidden');
        qtyCtrl?.classList.remove('flex');
      }
    });
  }

  // Setup click handlers for all wrappers
  function initAddToCart() {
    document.querySelectorAll('.add-to-cart-wrapper').forEach(node => {
      const wrapper = node as HTMLElement & { _bound?: boolean };
      if (wrapper._bound) return;
      wrapper._bound = true;

      const productStr = wrapper.dataset.product;
      const product = productStr ? JSON.parse(productStr) : null;
      const id = wrapper.dataset.id;

      const addBtn = wrapper.querySelector('.add-to-cart-btn');
      const qtyMinus = wrapper.querySelector('.qty-minus');
      const qtyPlus = wrapper.querySelector('.qty-plus');

      addBtn?.addEventListener('click', (e) => {
        e.preventDefault();
        if (product) addToCart(product);
      });

      qtyMinus?.addEventListener('click', (e) => {
        e.preventDefault();
        if (id) updateQuantity(id, -1);
      });

      qtyPlus?.addEventListener('click', (e) => {
        e.preventDefault();
        if (id) updateQuantity(id, 1);
      });
    });

    updateButtons();
  }

  document.addEventListener('DOMContentLoaded', initAddToCart);
  document.addEventListener('astro:page-load', initAddToCart);
  initAddToCart();

  window.addEventListener('cart-updated', updateButtons);
</script>