<template>
  <AppDropdown
    :open="open"
    @close="open = false"
  >
    <button
      type="button"
      class="flex rounded-full border border-kestrel-border bg-kestrel-surface p-0.5 transition-colors hover:bg-kestrel-border hover:border-kestrel-accent"
      aria-label="User menu"
      :aria-expanded="open"
      aria-haspopup="true"
      @click="open = !open"
    >
      <img
        v-if="user?.avatar_url"
        :src="user.avatar_url"
        :alt="user.identifier"
        class="h-8 w-8 rounded-full object-cover"
      >
      <span
        v-else
        class="flex h-8 w-8 items-center justify-center rounded-full bg-kestrel-border text-xs font-medium text-kestrel-text"
      >
        {{ initials }}
      </span>
    </button>
    <template #menu>
      <NuxtLink
        to="/account"
        class="kestrel-context-menu-item"
        role="menuitem"
        @click="open = false"
      >
        Profile
      </NuxtLink>
      <NuxtLink
        to="/settings"
        class="kestrel-context-menu-item"
        role="menuitem"
        @click="open = false"
      >
        Settings
      </NuxtLink>
      <button
        type="button"
        class="kestrel-context-menu-item-danger w-full"
        role="menuitem"
        @click="onSignOut"
      >
        Sign out
      </button>
    </template>
  </AppDropdown>
</template>

<script setup>
const props = defineProps({
  user: {
    type: Object,
    default: null,
  },
})

const emit = defineEmits(['signout'])

const open = ref(false)

const initials = computed(() => {
  const id = props.user?.identifier ?? ''
  const parts = id.trim().split(/\s+/)
  if (parts.length >= 2) return (parts[0][0] + parts[1][0]).toUpperCase()
  return id.slice(0, 2).toUpperCase() || '?'
})

function onSignOut() {
  open.value = false
  emit('signout')
}

const route = useRoute()
watch(() => route.path, () => {
  open.value = false
})
</script>
