---
import { formatRupiah } from '../lib/api';
---

<div id="cart-widget-container" transition:persist class="fixed bottom-6 right-6 z-50">
  <!-- Cart Icon Button -->
  <button id="cart-toggle" class="relative bg-primary text-white p-4 rounded-full shadow-xl hover:scale-105 hover:shadow-primary/40 transition-all duration-300 z-50 group">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-6 w-6 group-hover:-rotate-6 transition-transform">
      <path d="M4 7l1.5 10.5A2 2 0 0 0 7.5 19h9a2 2 0 0 0 2-1.5L20 7" />
      <path d="M9 10v-4a3 3 0 0 1 6 0v4" />
      <line x1="2" y1="7" x2="22" y2="7" />
    </svg>
    <span id="cart-badge" class="absolute -top-1 -right-1 bg-secondary text-white text-[10px] font-bold h-5 w-5 rounded-full flex items-center justify-center border-2 border-primary shadow-sm hidden z-10">
      0
    </span>
  </button>

  <!-- Cart Modal -->
  <div id="cart-modal" class="absolute bottom-16 right-0 w-80 sm:w-96 bg-white rounded-xl shadow-2xl border border-primary/10 overflow-hidden transform scale-95 opacity-0 pointer-events-none transition-all duration-200 origin-bottom-right">
    <div class="p-4 border-b border-primary/10 bg-surface flex justify-between items-center">
      <h3 class="font-serif text-lg text-primary m-0">Keranjang Pesanan</h3>
      <button id="cart-close" class="text-subtle hover:text-primary transition-colors">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
      </button>
    </div>
    
    <div id="cart-items" class="max-h-[60vh] overflow-y-auto p-4 space-y-4">
      <!-- Items will be injected here via JS -->
      <div id="cart-empty" class="text-center text-subtle text-sm py-6">
        Keranjang masih kosong.
      </div>
    </div>
    
    <div class="p-4 border-t border-primary/10 bg-[#f9f8f4]">
      <div class="flex justify-between items-center mb-4">
        <span class="text-xs uppercase tracking-widest text-muted">Total Belanja</span>
        <span id="cart-total" class="font-serif text-lg text-primary">Rp 0</span>
      </div>
      <a href="/preorder" id="checkout-btn" class="block w-full py-3 bg-primary text-white text-center text-xs font-semibold uppercase tracking-widest rounded-full hover:bg-primary-container transition-colors disabled:opacity-50 disabled:pointer-events-none pointer-events-none opacity-50">
        Konfirmasi Pesanan
      </a>
    </div>
  </div>
</div>

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

  const cartToggle = document.getElementById('cart-toggle');
  const cartModal = document.getElementById('cart-modal');
  const cartClose = document.getElementById('cart-close');
  const cartBadge = document.getElementById('cart-badge');
  const cartItems = document.getElementById('cart-items');
  const cartTotal = document.getElementById('cart-total');
  const checkoutBtn = document.getElementById('checkout-btn');
  
  let isCartOpen = false;

  function toggleCart() {
    if (!cartModal) return;
    isCartOpen = !isCartOpen;
    if (isCartOpen) {
      cartModal.classList.remove('scale-95', 'opacity-0', 'pointer-events-none');
      cartModal.classList.add('scale-100', 'opacity-100', 'pointer-events-auto');
    } else {
      cartModal.classList.add('scale-95', 'opacity-0', 'pointer-events-none');
      cartModal.classList.remove('scale-100', 'opacity-100', 'pointer-events-auto');
    }
  }

  cartToggle?.addEventListener('click', toggleCart);
  cartClose?.addEventListener('click', toggleCart);

  // Close on outside click
  document.addEventListener('click', (e) => {
    if (
      isCartOpen &&
      cartToggle &&
      cartModal &&
      !cartToggle.contains(e.target as Node) &&
      !cartModal.contains(e.target as Node)
    ) {
      toggleCart();
    }
  });

  const formatRupiah = (price: number) => {
    return new Intl.NumberFormat("id-ID", {
      style: "currency",
      currency: "IDR",
      maximumFractionDigits: 0
    }).format(price);
  };

  function renderCart() {
    const cart: CartItem[] = getCart();
    const count: number = getCartCount();
    const total: number = getCartTotal();
    
    // Update Badge
    if (cartBadge) {
      if (count > 0) {
        cartBadge.textContent = count.toString();
        cartBadge.classList.remove('hidden');
      } else {
        cartBadge.classList.add('hidden');
      }
    }

    // Update Checkout Button
    if (checkoutBtn) {
      if (count > 0) {
        checkoutBtn.classList.remove('pointer-events-none', 'opacity-50');
      } else {
        checkoutBtn.classList.add('pointer-events-none', 'opacity-50');
      }
    }

    // Update Total
    if (cartTotal) {
      cartTotal.textContent = formatRupiah(total);
    }

    // Update Items List
    if (cartItems) {
      if (count === 0) {
        cartItems.innerHTML = `<div class="text-center text-subtle text-sm py-6">Keranjang masih kosong.</div>`;
        return;
      }

      cartItems.innerHTML = cart.map((item: CartItem) => `
        <div class="flex items-center gap-3 py-2 border-b border-primary/5 last:border-0">
          <div class="w-12 h-12 rounded bg-bone overflow-hidden shrink-0">
            <img src="${item.image_url}" alt="${item.name}" class="w-full h-full object-cover" loading="lazy" decoding="async" />
          </div>
          <div class="flex-1 min-w-0">
            <h4 class="text-sm font-serif text-dark truncate">${item.name}</h4>
            <div class="text-[11px] text-primary">${formatRupiah(item.price)}</div>
          </div>
          <div class="flex items-center bg-bone rounded-full px-2 py-1 shrink-0">
            <button class="cart-minus text-subtle hover:text-primary w-5 h-5 flex items-center justify-center text-sm" data-id="${item.id}">-</button>
            <span class="text-xs font-medium w-4 text-center mx-1">${item.quantity}</span>
            <button class="cart-plus text-subtle hover:text-primary w-5 h-5 flex items-center justify-center text-sm" data-id="${item.id}">+</button>
          </div>
        </div>
      `).join('');

      // Rebind events for generated buttons
      cartItems.querySelectorAll('.cart-minus').forEach(btn => {
        btn.addEventListener('click', (e) => {
          const id = (e.currentTarget as HTMLElement).dataset.id;
          if (id) updateQuantity(id, -1);
        });
      });
      cartItems.querySelectorAll('.cart-plus').forEach(btn => {
        btn.addEventListener('click', (e) => {
          const id = (e.currentTarget as HTMLElement).dataset.id;
          if (id) updateQuantity(id, 1);
        });
      });
    }
  }

  // Listen to custom cart updates
  window.addEventListener('cart-updated', () => {
    renderCart();
  });

  function checkVisibility() {
    const container = document.getElementById('cart-widget-container');
    if (!container) return;
    if (window.location.pathname.startsWith('/cms') || window.location.pathname === '/preorder') {
      container.style.display = 'none';
    } else {
      container.style.display = '';
    }
  }

  // Initial render & visibility
  document.addEventListener('DOMContentLoaded', () => {
    checkVisibility();
    renderCart();
  });
  document.addEventListener('astro:page-load', () => {
    checkVisibility();
    renderCart();
  });
  checkVisibility();
  renderCart();
</script>