<template>
  <header class="bg-white border-b border-gray-200 sticky top-0 z-50">
    <div class="container mx-auto px-4 max-w-7xl">
      <div class="flex items-center justify-between h-16">
        <!-- Logo / Brand -->
        <NuxtLink to="/" class="flex items-center space-x-2">
          <UIcon name="i-heroicons-squares-2x2" class="w-8 h-8 text-primary" />
          <span class="text-xl font-bold text-gray-900">Pantry</span>
        </NuxtLink>

        <!-- Navigation -->
        <nav class="hidden md:flex items-center space-x-6">
          <NuxtLink 
            to="/" 
            class="text-gray-700 hover:text-primary transition-colors"
            active-class="text-primary font-semibold"
          >
            Inventory
          </NuxtLink>
          <NuxtLink 
            to="/scan" 
            class="text-gray-700 hover:text-primary transition-colors"
            active-class="text-primary font-semibold"
          >
            Scan
          </NuxtLink>
          <NuxtLink 
            to="/settings" 
            class="text-gray-700 hover:text-primary transition-colors"
            active-class="text-primary font-semibold"
          >
            Settings
          </NuxtLink>
        </nav>

        <!-- User Menu -->
        <div class="flex items-center space-x-4">
          <UButton 
            v-if="!user" 
            to="/auth/login" 
            color="primary"
            variant="soft"
          >
            Sign In
          </UButton>

          <UDropdown v-else :items="userMenuItems" mode="hover">
            <UAvatar 
              :alt="user.email" 
              size="sm"
              :ui="{ background: 'bg-primary' }"
            />
          </UDropdown>
        </div>

        <!-- Mobile Menu Button -->
        <UButton 
          icon="i-heroicons-bars-3" 
          color="gray" 
          variant="ghost"
          class="md:hidden"
          @click="mobileMenuOpen = !mobileMenuOpen"
        />
      </div>

      <!-- Mobile Navigation -->
      <nav 
        v-if="mobileMenuOpen" 
        class="md:hidden py-4 space-y-2 border-t border-gray-200"
      >
        <NuxtLink 
          to="/" 
          class="block px-4 py-2 text-gray-700 hover:bg-gray-50 rounded"
          @click="mobileMenuOpen = false"
        >
          Inventory
        </NuxtLink>
        <NuxtLink 
          to="/scan" 
          class="block px-4 py-2 text-gray-700 hover:bg-gray-50 rounded"
          @click="mobileMenuOpen = false"
        >
          Scan
        </NuxtLink>
        <NuxtLink 
          to="/settings" 
          class="block px-4 py-2 text-gray-700 hover:bg-gray-50 rounded"
          @click="mobileMenuOpen = false"
        >
          Settings
        </NuxtLink>
      </nav>
    </div>
  </header>
</template>

<script setup lang="ts">
const { user, signOut } = useSupabaseAuth()
const mobileMenuOpen = ref(false)

const userMenuItems = [[
  {
    label: user.value?.email || 'User',
    slot: 'account',
    disabled: true
  }
], [
  {
    label: 'Settings',
    icon: 'i-heroicons-cog-6-tooth',
    to: '/settings'
  },
  {
    label: 'Sign Out',
    icon: 'i-heroicons-arrow-right-on-rectangle',
    click: async () => {
      await signOut()
      navigateTo('/auth/login')
    }
  }
]]
</script>
