<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from "vue";
import CartSidebar from "./CartSidebar.vue";
import TemplateModal from "./TemplateModal.vue";
import StackModal from "./StackModal.vue";
import NotificationToast from "./NotificationToast.vue";
import TemplateInteractions from "./TemplateInteractions.vue";
import { useCart } from "../../composables/useCart";
import { useModal } from "../../composables/useModal";
import { useStackModal } from "../../composables/useStackModal";
import { useNotifications } from "../../composables/useNotifications";

const { count, addItem, hasItem } = useCart();
const { showNotification } = useNotifications();
const { closeModal } = useModal();
const { closeStackModal } = useStackModal();
const isCartOpen = ref(false);

function openCart() {
  isCartOpen.value = true;
}

function closeCart() {
  isCartOpen.value = false;
}

// Update cart count badge
function updateCartCount() {
  const countEl = document.getElementById("cartCount");
  if (countEl) {
    countEl.textContent = String(count.value);
  }
}

// Handle cart button clicks
function handleCartButtonClick() {
  openCart();
}

// Setup cart button listener
function setupCartButton() {
  const cartBtn = document.getElementById("cartBtn");
  if (cartBtn) {
    cartBtn.addEventListener("click", handleCartButtonClick);
    updateCartCount();
  }
}

// Cleanup cart button listener
function cleanupCartButton() {
  const cartBtn = document.getElementById("cartBtn");
  if (cartBtn) {
    cartBtn.removeEventListener("click", handleCartButtonClick);
  }
}

// Handle browser back/forward - close modals when navigating back
function handlePopState(event: PopStateEvent) {
  // If state has modal flag, it means we're navigating within modal history
  // Otherwise, close any open modals
  if (!event.state?.modal) {
    closeModal();
    closeStackModal();
  }
}

// Handle add-to-cart custom event from template detail pages
function handleAddToCart(event: Event) {
  const customEvent = event as CustomEvent;
  const templateData = customEvent.detail;

  if (!templateData?.name) return;

  if (hasItem(templateData.name)) {
    showNotification("Already in cart");
  } else {
    addItem({
      name: templateData.name,
      type: templateData.type,
      description: templateData.description || "",
    });
    showNotification("Added to cart");
  }
}

// Re-setup on page load for View Transitions
function handlePageLoad() {
  setupCartButton();
}

// Watch cart count changes and update badge
watch(count, updateCartCount);

onMounted(() => {
  setupCartButton();
  window.addEventListener("popstate", handlePopState);
  window.addEventListener("add-to-cart", handleAddToCart);
  document.addEventListener("astro:page-load", handlePageLoad);
});

onUnmounted(() => {
  cleanupCartButton();
  window.removeEventListener("popstate", handlePopState);
  window.removeEventListener("add-to-cart", handleAddToCart);
  document.removeEventListener("astro:page-load", handlePageLoad);
});
</script>

<template>
  <CartSidebar :is-open="isCartOpen" @close="closeCart" />
  <TemplateModal />
  <StackModal />
  <NotificationToast />
  <TemplateInteractions />
</template>
