<script setup lang="ts">
/**
 * @file AppHeader.vue
 * @description The main header for the EduLearn application dashboard.
 */

const props = defineProps<{
  /** Controls visibility of the sidebar toggle button */
  showSidebarToggle?: boolean;
}>();

const emit = defineEmits<{
  /** Emitted when the hamburger menu is clicked */
  toggleSidebar: [];
}>();

const { currentUser } = useAuth();
const { locale, setLocale } = useI18n();
const { isDark, set: setTheme } = useThemeMode();

const toggleLanguage = () => {
  setLocale(locale.value === 'th' ? 'en' : 'th');
};

const toggleTheme = () => {
  setTheme(!isDark.value);
};
</script>

<template>
  <q-toolbar class="bg-white dark:!bg-[#020617] text-slate-900 dark:!text-white h-20 border-b border-slate-50 dark:border-slate-800/50 px-6">
    
    <!-- Left: Hamburger Toggle -->
    <q-btn
      flat
      round
      dense
      icon="menu"
      class="text-slate-400 hover:text-blue-600 transition-colors"
      size="16px"
      @click="$emit('toggleSidebar')"
    />

    <q-space />

    <!-- Right Section -->
    <div class="flex items-center gap-2 sm:gap-4 md:gap-6 no-wrap">
      
      <!-- Theme Toggle -->
      <q-btn
        flat
        round
        dense
        :icon="isDark ? 'dark_mode' : 'light_mode'"
        :class="isDark ? 'text-blue-400' : 'text-amber-500'"
        class="transition-all active:scale-90"
        size="12px"
        @click="toggleTheme"
      >
        <q-tooltip>{{ isDark ? 'โหมดกลางคืน' : 'โหมดกลางวัน' }}</q-tooltip>
      </q-btn>

      <!-- Language Switcher (Pill Style) -->
      <div 
        @click="toggleLanguage"
        class="flex items-center bg-slate-50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-800 rounded-xl p-0.5 sm:p-1 cursor-pointer hover:bg-slate-100 transition-all font-bold text-[11px] sm:text-[13px] select-none"
      >
        <div :class="locale === 'th' ? 'bg-white dark:bg-slate-700 shadow-sm text-blue-600' : 'text-slate-400'" class="px-2 sm:px-3 py-1 rounded-lg transition-all">TH</div>
        <div class="w-[1px] h-3 bg-slate-200 dark:bg-slate-700 mx-0.5"></div>
        <div :class="locale === 'en' ? 'bg-white dark:bg-slate-700 shadow-sm text-blue-600' : 'text-slate-400'" class="px-2 sm:px-3 py-1 rounded-lg transition-all">EN</div>
      </div>

      <!-- Divider -->
      <div class="hidden sm:block w-[1px] h-8 bg-slate-100 dark:bg-slate-800"></div>

      <!-- ส่วนข้อมูลผู้ใช้งาน (User Profile) -->
      <div class="flex items-center gap-3 cursor-pointer group" @click="navigateTo('/dashboard/profile')">
        <!-- ชื่อและบทบาท (แสดงเฉพาะบนจอที่ใหญ่กว่า 600px) -->
        <div class="user-info-text flex flex-col items-end text-right">
          <span class="text-[15px] font-bold text-slate-900 dark:text-white leading-tight">
            {{ currentUser?.firstName || 'User' }} {{ currentUser?.lastName || '' }}
          </span>
          <span class="text-[11px] text-slate-500 font-medium">{{ $t('common.student') }}</span>
        </div>

        <!-- รูปโปรไฟล์พร้อมวงแหวน Gradient นุ่มนวล -->
        <div class="relative p-[3px] rounded-full bg-gradient-to-tr from-[#FFD1D1] via-[#E2E8FF] to-[#D1F7FF] dark:from-slate-800 dark:to-slate-700 transition-transform group-hover:scale-105">
          <div class="bg-white dark:bg-[#020617] p-[1.5px] rounded-full shadow-sm">
            <UserAvatar 
              :photoURL="currentUser?.photoURL" 
              :firstName="currentUser?.firstName" 
              :lastName="currentUser?.lastName" 
              size="40"
              class="w-[40px] h-[40px]"
            />
          </div>
        </div>
      </div>

    </div>
  </q-toolbar>
</template>

<style scoped>
/* Ensure toolbar height is consistent */
:deep(.q-toolbar) {
  min-height: 80px;
}

/* Hide user name only on small mobile screens */
@media (max-width: 600px) {
  .user-info-text {
    display: none !important;
  }
}
</style>
