<script lang="ts">
interface NavCategory {
  name: string
  featured: { name: string; href: string; imageSrc: string; imageAlt: string }[]
  sections: { name: string; items: { name: string; href: string }[] }[]
}

interface NavPage {
  name: string
  href: string
}
</script>

<script setup lang="ts">
import { ref } from 'vue'
import { ChevronDown } from 'lucide-vue-next'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import {
  MegaMenu,
  MegaMenuContent,
  MegaMenuItem,
  MegaMenuLink,
  MegaMenuList,
  MegaMenuTrigger,
} from '@/components/ui/mega-menu'
import {
  Sheet,
  SheetContent,
  SheetTitle,
  SheetTrigger,
} from '@/components/ui/sheet'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'

withDefaults(defineProps<{
  /** Announcement bar text. Set to empty string to hide. */
  announcement?: string
  /** Logo text or brand name */
  logoText?: string
  /** Logo image src. When set, overrides logoText. */
  logoSrc?: string
  /** Top-level categories with mega-menu content */
  categories?: NavCategory[]
  /** Simple navigation links (no mega-menu) */
  pages?: NavPage[]
  /** Cart item count */
  cartCount?: number
  /** Currency label */
  currency?: string
  /** Currency flag image src */
  currencyFlag?: string
}>(), {
  announcement: 'Get free delivery on orders over $100',
  logoText: 'STORE',
  logoSrc: '',
  categories: () => [
    {
      name: 'Women',
      featured: [
        {
          name: 'New Arrivals',
          href: '#',
          imageSrc: '/placeholder.svg',
          imageAlt: 'New arrivals collection.',
        },
        {
          name: 'Basic Tees',
          href: '#',
          imageSrc: '/placeholder.svg',
          imageAlt: 'Basic tees collection.',
        },
      ],
      sections: [
        {
          name: 'Clothing',
          items: [
            { name: 'Tops', href: '#' },
            { name: 'Dresses', href: '#' },
            { name: 'Pants', href: '#' },
            { name: 'Denim', href: '#' },
            { name: 'Sweaters', href: '#' },
            { name: 'T-Shirts', href: '#' },
            { name: 'Jackets', href: '#' },
            { name: 'Activewear', href: '#' },
            { name: 'Browse All', href: '#' },
          ],
        },
        {
          name: 'Accessories',
          items: [
            { name: 'Watches', href: '#' },
            { name: 'Wallets', href: '#' },
            { name: 'Bags', href: '#' },
            { name: 'Sunglasses', href: '#' },
            { name: 'Hats', href: '#' },
            { name: 'Belts', href: '#' },
          ],
        },
        {
          name: 'Brands',
          items: [
            { name: 'Full Nelson', href: '#' },
            { name: 'My Way', href: '#' },
            { name: 'Re-Arranged', href: '#' },
            { name: 'Counterfeit', href: '#' },
            { name: 'Significant Other', href: '#' },
          ],
        },
      ],
    },
    {
      name: 'Men',
      featured: [
        {
          name: 'New Arrivals',
          href: '#',
          imageSrc: '/placeholder.svg',
          imageAlt: 'New arrivals collection.',
        },
        {
          name: 'Artwork Tees',
          href: '#',
          imageSrc: '/placeholder.svg',
          imageAlt: 'Artwork tees collection.',
        },
      ],
      sections: [
        {
          name: 'Clothing',
          items: [
            { name: 'Tops', href: '#' },
            { name: 'Pants', href: '#' },
            { name: 'Sweaters', href: '#' },
            { name: 'T-Shirts', href: '#' },
            { name: 'Jackets', href: '#' },
            { name: 'Activewear', href: '#' },
            { name: 'Browse All', href: '#' },
          ],
        },
        {
          name: 'Accessories',
          items: [
            { name: 'Watches', href: '#' },
            { name: 'Wallets', href: '#' },
            { name: 'Bags', href: '#' },
            { name: 'Sunglasses', href: '#' },
            { name: 'Hats', href: '#' },
            { name: 'Belts', href: '#' },
          ],
        },
        {
          name: 'Brands',
          items: [
            { name: 'Re-Arranged', href: '#' },
            { name: 'Counterfeit', href: '#' },
            { name: 'Full Nelson', href: '#' },
            { name: 'My Way', href: '#' },
          ],
        },
      ],
    },
  ],
  pages: () => [
    { name: 'Company', href: '#' },
    { name: 'Stores', href: '#' },
  ],
  cartCount: 0,
  currency: 'CAD',
  currencyFlag: '',
})

const mobileOpen = ref(false)
</script>

<template>
  <header class="sticky top-0 z-50 w-full bg-background">
    <!-- Announcement Bar -->
    <div
      v-if="announcement"
      class="flex h-10 items-center justify-center bg-primary px-4 text-sm font-medium text-primary-foreground sm:px-6 lg:px-8"
    >
      {{ announcement }}
    </div>

    <nav aria-label="Top" class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
      <div class="border-b">
        <div class="flex h-16 items-center">
          <!-- Mobile Menu Trigger -->
          <Sheet v-model:open="mobileOpen">
            <SheetTrigger as-child>
              <Button variant="ghost" icon class="lg:hidden" aria-label="Open menu">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" x2="20" y1="12" y2="12" /><line x1="4" x2="20" y1="6" y2="6" /><line x1="4" x2="20" y1="18" y2="18" /></svg>
              </Button>
            </SheetTrigger>

            <SheetContent side="left" class="w-full max-w-xs overflow-y-auto p-0">
              <SheetTitle class="sr-only">Navigation menu</SheetTitle>

              <!-- Mobile Tabs -->
              <Tabs :default-value="categories[0]?.name" class="mt-2">
                <TabsList variant="line" class="w-full border-b px-4">
                  <TabsTrigger
                    v-for="cat in categories"
                    :key="cat.name"
                    :value="cat.name"
                    variant="line"
                    class="flex-1"
                  >
                    {{ cat.name }}
                  </TabsTrigger>
                </TabsList>

                <TabsContent
                  v-for="cat in categories"
                  :key="cat.name"
                  :value="cat.name"
                  class="space-y-10 px-4 pt-10 pb-8"
                >
                  <!-- Featured Images -->
                  <div class="grid grid-cols-2 gap-x-4">
                    <div v-for="item in cat.featured" :key="item.name" class="group relative text-sm">
                      <img
                        :src="item.imageSrc"
                        :alt="item.imageAlt"
                        class="aspect-square w-full rounded-lg bg-muted object-cover group-hover:opacity-75"
                      />
                      <a :href="item.href" class="mt-6 block font-medium" @click="mobileOpen = false">
                        <span aria-hidden="true" class="absolute inset-0 z-10" />
                        {{ item.name }}
                      </a>
                      <p aria-hidden="true" class="mt-1 text-muted-foreground">Shop now</p>
                    </div>
                  </div>

                  <!-- Link Sections -->
                  <div v-for="section in cat.sections" :key="section.name">
                    <p class="font-medium">{{ section.name }}</p>
                    <ul role="list" class="mt-6 flex flex-col space-y-6">
                      <li v-for="link in section.items" :key="link.name" class="flow-root">
                        <a :href="link.href" class="-m-2 block p-2 text-muted-foreground" @click="mobileOpen = false">
                          {{ link.name }}
                        </a>
                      </li>
                    </ul>
                  </div>
                </TabsContent>
              </Tabs>

              <!-- Mobile Pages -->
              <div class="space-y-6 border-t px-4 py-6">
                <div v-for="page in pages" :key="page.name" class="flow-root">
                  <a :href="page.href" class="-m-2 block p-2 font-medium" @click="mobileOpen = false">
                    {{ page.name }}
                  </a>
                </div>
              </div>

              <!-- Mobile Auth -->
              <div class="space-y-6 border-t px-4 py-6">
                <div class="flow-root">
                  <a href="#" class="-m-2 block p-2 font-medium" @click="mobileOpen = false">Sign in</a>
                </div>
                <div class="flow-root">
                  <a href="#" class="-m-2 block p-2 font-medium" @click="mobileOpen = false">Create account</a>
                </div>
              </div>

              <!-- Mobile Currency -->
              <div v-if="currency" class="border-t px-4 py-6">
                <a href="#" class="-m-2 flex items-center p-2">
                  <img v-if="currencyFlag" :src="currencyFlag" alt="" class="block h-auto w-5 shrink-0" />
                  <span class="ml-3 block text-sm font-medium">{{ currency }}</span>
                  <span class="sr-only">, change currency</span>
                </a>
              </div>
            </SheetContent>
          </Sheet>

          <!-- Logo -->
          <div class="ml-4 flex lg:ml-0">
            <a href="#">
              <span v-if="!logoSrc" class="text-xl font-bold tracking-tight">{{ logoText }}</span>
              <img v-else :src="logoSrc" alt="" class="h-8 w-auto" />
            </a>
          </div>

          <!-- Desktop Mega Menu -->
          <MegaMenu class="hidden lg:ml-8 lg:flex lg:self-stretch">
            <MegaMenuList>
              <MegaMenuItem v-for="cat in categories" :key="cat.name">
                <MegaMenuTrigger
                  class="h-9 rounded-md bg-transparent px-4 py-2 hover:bg-accent hover:text-accent-foreground data-[state=open]:bg-accent/50"
                >
                  {{ cat.name }}
                  <ChevronDown class="relative top-px ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180" aria-hidden="true" />
                </MegaMenuTrigger>

                <MegaMenuContent class="border-t">
                  <div class="relative">
                    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                      <div class="py-16">
                        <!-- Featured Categories — full-width horizontal row -->
                        <div class="grid gap-6" :class="[cat.featured.length === 2 ? 'grid-cols-2' : cat.featured.length >= 3 ? 'grid-cols-3' : 'grid-cols-1']">
                          <div v-for="item in cat.featured" :key="item.name" class="group relative text-sm">
                            <img
                              :src="item.imageSrc"
                              :alt="item.imageAlt"
                              class="aspect-[16/9] w-full rounded-lg bg-muted object-cover group-hover:opacity-75"
                            />
                            <MegaMenuLink as-child>
                              <a :href="item.href" class="mt-4 block font-medium">
                                <span aria-hidden="true" class="absolute inset-0 z-10" />
                                {{ item.name }}
                              </a>
                            </MegaMenuLink>
                            <p aria-hidden="true" class="mt-1 text-muted-foreground">Shop now</p>
                          </div>
                        </div>

                        <!-- Link Sections — full-width row below images -->
                        <div
                          class="mt-10 grid gap-x-8 gap-y-10 border-t pt-10 text-sm"
                          :class="[cat.sections.length === 2 ? 'grid-cols-2' : cat.sections.length >= 3 ? 'grid-cols-3' : 'grid-cols-1']"
                        >
                          <div v-for="section in cat.sections" :key="section.name">
                            <p class="font-medium">{{ section.name }}</p>
                            <ul role="list" class="mt-6 space-y-6 sm:mt-4 sm:space-y-4">
                              <li v-for="link in section.items" :key="link.name" class="flex">
                                <MegaMenuLink as-child>
                                  <a :href="link.href" class="text-muted-foreground hover:text-foreground">
                                    {{ link.name }}
                                  </a>
                                </MegaMenuLink>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </MegaMenuContent>
              </MegaMenuItem>

              <!-- Simple Pages -->
              <MegaMenuItem v-for="page in pages" :key="page.name" class="flex">
                <MegaMenuLink as-child>
                  <a
                    :href="page.href"
                    class="inline-flex h-9 items-center justify-center rounded-md bg-transparent px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground"
                  >
                    {{ page.name }}
                  </a>
                </MegaMenuLink>
              </MegaMenuItem>
            </MegaMenuList>
          </MegaMenu>

          <!-- Right Actions -->
          <div class="ml-auto flex items-center">
            <!-- Auth Links (Desktop) -->
            <div class="hidden lg:flex lg:flex-1 lg:items-center lg:justify-end lg:space-x-6">
              <a href="#" class="text-sm font-medium hover:text-foreground/80">Sign in</a>
              <span aria-hidden="true" class="h-6 w-px bg-border" />
              <a href="#" class="text-sm font-medium hover:text-foreground/80">Create account</a>
            </div>

            <!-- Currency (Desktop) -->
            <div v-if="currency" class="hidden lg:ml-8 lg:flex">
              <a href="#" class="flex items-center hover:text-foreground/80">
                <img v-if="currencyFlag" :src="currencyFlag" alt="" class="block h-auto w-5 shrink-0" />
                <span class="ml-3 block text-sm font-medium">{{ currency }}</span>
                <span class="sr-only">, change currency</span>
              </a>
            </div>

            <!-- Search -->
            <div class="flex lg:ml-6">
              <Button variant="ghost" icon aria-label="Search">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>
              </Button>
            </div>

            <!-- Cart -->
            <div class="ml-4 flow-root lg:ml-6">
              <a href="#" class="group -m-2 flex items-center p-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 text-muted-foreground group-hover:text-foreground/80"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z" /><path d="M3 6h18" /><path d="M16 10a4 4 0 0 1-8 0" /></svg>
                <Badge
                  v-if="cartCount > 0"
                  variant="default"
                  size="sm"
                  class="ml-2 flex size-5 items-center justify-center rounded-full p-0 text-[10px]"
                >
                  {{ cartCount > 9 ? '9+' : cartCount }}
                </Badge>
                <span v-else class="ml-2 text-sm font-medium text-muted-foreground group-hover:text-foreground/80">0</span>
                <span class="sr-only">items in cart, view bag</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </nav>
  </header>
</template>