<script setup lang="ts">
/**
 * @file UserMenu.vue
 * @description User profile dropdown menu component using Quasar.
 */

import { ref, computed, onMounted } from 'vue'
import { useAuth } from '~/composables/useAuth'
import { useQuasar } from 'quasar'

const { currentUser, logout } = useAuth()
const { t } = useI18n()
const $q = useQuasar()

// Use centralized theme management
const { isDark, set } = useThemeMode()

const isHydrated = ref(false)

onMounted(() => {
  isHydrated.value = true
})

// User Initials
const userInitials = computed(() => {
  if (!currentUser.value) return ''
  const f = currentUser.value.firstName?.charAt(0).toUpperCase() || 'U'
  const l = currentUser.value.lastName?.charAt(0).toUpperCase() || ''
  return f + l
})

const { userMenuItems } = useNavItems()
const menuItems = userMenuItems


const handleLogout = async () => {
  await logout()
}
</script>

<template>
  <div class="q-pa-md">
    <q-btn round flat class="text-slate-700 dark:text-white">
      <q-avatar color="primary" text-color="white" size="40px" font-size="14px" class="font-bold shadow-md cursor-pointer">
        <img 
          v-if="currentUser?.photoURL" 
          :src="currentUser.photoURL" 
          class="object-cover w-full h-full"
        />
        <span v-else>{{ userInitials }}</span>
      </q-avatar>
      
      <q-menu 
        anchor="bottom end" 
        self="top end" 
        :offset="[0, 10]"
        content-class="bg-white dark:bg-[#0f172a] text-slate-900 dark:text-white rounded-2xl shadow-xl border border-slate-200/70 dark:border-white/5"
        style="width: 240px;"
      >
        <q-list class="py-2">
          <q-item 
            v-for="item in menuItems" 
            :key="item.labelKey" 
            clickable 
            v-close-popup 
            @click="navigateTo(item.to)"
            class="hover:bg-slate-100 dark:hover:bg-white/5 transition-colors"
          >
            <q-item-section>
              <q-item-label class="font-bold text-sm text-slate-800 dark:text-slate-100">{{ $t(item.labelKey) }}</q-item-label>
            </q-item-section>
          </q-item>

          <q-item class="hover:bg-slate-100 dark:hover:bg-white/5 transition-colors">
            <q-item-section>
              <q-item-label class="font-bold text-sm text-slate-800 dark:text-slate-100">{{ $t('userMenu.darkMode') }}</q-item-label>
            </q-item-section>
            <q-item-section side>
              <q-toggle
                v-if="isHydrated"
                :model-value="isDark"
                @update:model-value="set"
                color="blue"
                keep-color
              />
            </q-item-section>
          </q-item>

          <q-separator class="bg-slate-100 dark:bg-white/5 my-1" />

          <div class="px-4 py-2 mt-2">
            <q-btn 
              unelevated
              class="w-full bg-red-50 text-red-600 hover:bg-red-100 dark:bg-red-500/10 dark:text-red-400 dark:hover:bg-red-500/20 font-black rounded-xl"
              no-caps
              @click="handleLogout"
            >
              {{ $t('userMenu.logout') }}
            </q-btn>
          </div>
        </q-list>
      </q-menu>
    </q-btn>
  </div>
</template>
