<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,
  MegaMenuViewport,
} from '@/components/ui/mega-menu'
import {
  Sheet,
  SheetContent,
  SheetTitle,
  SheetTrigger,
} from '@/components/ui/sheet'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'

const props = 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: 'Free shipping on orders over 50 € — Shop now',
  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: 'EUR',
  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>

    <MegaMenu>
      <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 Triggers -->
            <div class="group/mega-menu 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 shadow-lg">
                    <div class="relative">
                      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                        <div class="grid grid-cols-2 gap-x-8 gap-y-10 py-16">
                          <!-- Featured Images -->
                          <div class="col-start-2 grid grid-cols-2 gap-x-8">
                            <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"
                              />
                              <MegaMenuLink as-child>
                                <a :href="item.href" class="mt-6 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 -->
                          <div class="row-start-1 grid gap-x-8 gap-y-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>
            </div>

            <!-- 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>

      <!-- Full-width flyout viewport -->
      <MegaMenuViewport class="z-50" />
    </MegaMenu>
  </header>
</template>