<script setup lang="ts">
import AppHeader from '~/components/navigation/AppHeader.vue'
import BottomNav from '~/components/navigation/BottomNav.vue'
import CartFAB from '~/components/Cart/CartFAB.vue'
import CartSidebar from '~/components/Cart/CartSidebar.vue'
import CartSheet from '~/components/Cart/CartSheet.vue'
import { Toaster } from '~/components/ui/sonner'

// Determine which cart UI to show based on screen size
const { isMobile } = useCartUI()
</script>

<template>
  <div class="min-h-screen flex flex-col">
    <!-- New App Header with full navigation -->
    <AppHeader />

    <!-- Main content with bottom padding for mobile nav -->
    <main class="flex-1 pb-20 md:pb-0">
      <slot />
    </main>

    <!-- Footer -->
    <CommonFooter />

    <!-- Mobile Bottom Navigation -->
    <BottomNav />

    <!-- Floating Action Button (FAB) for Cart on Product Pages -->
    <CartFAB />

    <!-- Cart Sidebar (Desktop: >= 1024px) -->
    <CartSidebar v-if="!isMobile" />

    <!-- Cart Sheet (Mobile: < 1024px) -->
    <CartSheet v-if="isMobile" />

    <!-- Toast Notifications -->
    <Toaster position="top-center" :duration="3000" rich-colors />
  </div>
</template>

<style scoped>
/* Ensure main content doesn't get hidden behind bottom nav on mobile */
@media (max-width: 768px) {
  main {
    padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
  }
}
</style>
