<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 menuItems = computed(() => [
  { label: t('userMenu.home'), to: '/dashboard' },
  { label: t('userMenu.courseList'), to: '/browse/discovery' },
  { label: t('userMenu.myCourses'), to: '/dashboard/my-courses' },
  { label: t('userMenu.settings'), to: '/dashboard/profile' }
])

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-slate-800 text-slate-900 dark:text-white rounded-2xl shadow-xl border border-slate-200/70 dark:border-white/10"
        style="min-width: 240px;"
      >
        <q-list class="py-2">
          <q-item 
            v-for="item in menuItems" 
            :key="item.label" 
            clickable 
            v-close-popup 
            @click="navigateTo(item.to)"
            class="hover:bg-slate-100 dark:hover:bg-white/10 transition-colors"
          >
            <q-item-section>
              <q-item-label class="font-bold text-sm text-slate-800 dark:text-white">{{ item.label }}</q-item-label>
            </q-item-section>
          </q-item>

          <q-item class="hover:bg-slate-100 dark:hover:bg-white/10 transition-colors">
            <q-item-section>
              <q-item-label class="font-bold text-sm text-slate-800 dark:text-white">{{ $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/10 my-1" />

          <div class="p-4">
            <q-btn 
              unelevated
              class="w-full bg-red-500/10 text-red-400 hover:bg-red-500/20 font-bold rounded-lg"
              no-caps
              @click="handleLogout"
            >
              {{ $t('userMenu.logout') }}
            </q-btn>
          </div>
        </q-list>
      </q-menu>
    </q-btn>
  </div>
</template>
