<script setup lang="ts">
import { User, LogOut, Package } from 'lucide-vue-next'
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from './ui/avatar'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from './ui/dropdown-menu'

const { user, loggedIn, logout } = useAuth()

// Extended user type with all profile fields
type ExtendedUser = typeof user.value & {
  id?: string
  firstName?: string
  lastName?: string
  email?: string
}

const extendedUser = computed(() => user.value as ExtendedUser)

/**
 * Get user initials for Avatar fallback
 * Example: "Bastian Masanek" → "BM"
 */
const userInitials = computed(() => {
  if (!extendedUser.value) return '?'

  const first = extendedUser.value.firstName?.charAt(0)?.toUpperCase() || ''
  const last = extendedUser.value.lastName?.charAt(0)?.toUpperCase() || ''

  return first + last || extendedUser.value.email?.charAt(0)?.toUpperCase() || '?'
})

/**
 * Handle logout click
 */
async function handleLogout() {
  try {
    await logout()
  } catch (error) {
    console.error('Logout error:', error)
  }
}
</script>

<template>
  <!-- Not logged in: Show login prompt -->
  <NuxtLink v-if="!loggedIn" to="/auth"
    class="flex items-center gap-2 px-4 py-3.5 rounded-[35px] border-2 border-dashed border-white/30 hover:border-experimenta-accent hover:bg-experimenta-accent/10 transition-all"
    aria-label="Anmelden oder Registrieren">
    <User class="h-5 w-5" />
    <span class="font-medium hidden sm:inline">Anmelden</span>
  </NuxtLink>

  <!-- Logged in: Show user menu -->
  <DropdownMenu v-else>
    <DropdownMenuTrigger as-child>
      <button
        class="flex items-center gap-3 rounded-[35px] px-2 py-[10px] focus:outline-none focus:ring-2 focus:ring-experimenta-accent focus:ring-offset-2 transition-all hover:bg-white/10"
        aria-label="Benutzermenü öffnen">
        <!-- Greeting text (Desktop only) -->
        <span class="hidden md:inline font-medium text-white pl-2">
          Hallo, {{ extendedUser?.firstName }}
        </span>

        <!-- Avatar with status ring (logged in indicator) -->
        <Avatar
          class="h-10 w-10 md:h-12 md:w-12 border-3 border-experimenta-purple shadow-lg bg-experimenta-accent ring-2 ring-experimenta-accent ring-offset-2 ring-offset-white dark:ring-offset-zinc-950">
          <AvatarImage :src="undefined" :alt="extendedUser?.firstName || ''" />
          <AvatarFallback
            class="bg-experimenta-accent text-white font-bold text-sm md:text-base flex items-center justify-center w-full h-full">
            {{ userInitials }}
          </AvatarFallback>
        </Avatar>
      </button>
    </DropdownMenuTrigger>

    <DropdownMenuContent align="end" class="w-64 z-[200]">
      <!-- User info header -->
      <DropdownMenuLabel class="font-normal py-3">
        <div class="flex flex-col space-y-1.5">
          <p class="text-base font-semibold leading-none">
            {{ extendedUser?.firstName }} {{ extendedUser?.lastName }}
          </p>
          <p class="text-sm leading-none text-muted-foreground">
            {{ extendedUser?.email }}
          </p>
        </div>
      </DropdownMenuLabel>

      <DropdownMenuSeparator />

      <!-- My Orders (Phase 5+ feature) -->
      <DropdownMenuItem disabled class="py-2.5">
        <Package class="mr-3 h-5 w-5" />
        <span class="text-sm">Meine Bestellungen</span>
      </DropdownMenuItem>

      <!-- Profile (disabled for now, placeholder for Phase 2+) -->
      <DropdownMenuItem disabled class="py-2.5">
        <User class="mr-3 h-5 w-5" />
        <span class="text-sm">Profil bearbeiten</span>
      </DropdownMenuItem>

      <DropdownMenuSeparator />

      <!-- Logout -->
      <DropdownMenuItem @click="handleLogout" class="py-2.5">
        <LogOut class="mr-3 h-5 w-5" />
        <span class="text-sm">Abmelden</span>
      </DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</template>
