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

defineProps<{
  /** Controls visibility of the search bar */
  showSearch?: boolean
}>()

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

const searchText = ref('')
</script>

<template>
  <q-toolbar class="bg-white text-slate-900 h-16 px-4 md:px-8">
    <!-- Mobile Menu Toggle -->
    <q-btn
      flat
      round
      dense
      icon="menu"
      class="lg:hidden mr-2 text-gray-500"
      @click="$emit('toggleSidebar')"
    />

    <!-- Branding -->
    <div class="flex items-center gap-3 cursor-pointer group" @click="navigateTo('/dashboard')">
      <div class="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center text-white font-black shadow-lg shadow-blue-600/30 group-hover:scale-110 transition-transform">
        E
      </div>
      <div class="flex flex-col">
        <span class="font-black text-lg leading-none tracking-tight text-slate-900 group-hover:text-blue-600 transition-colors">E-Learning</span>
        <span class="text-[10px] font-bold uppercase tracking-[0.2em] leading-none mt-1 text-slate-500">Platform</span>
      </div>
    </div>

    <!-- Desktop Navigation -->
    <nav class="hidden lg:flex items-center gap-6 text-sm font-medium text-gray-600">
      <div class="cursor-pointer hover:text-purple-600 flex items-center gap-1 transition-colors">
        คอร์สออนไลน์ <q-icon name="keyboard_arrow_down" />
        <q-menu>
             <q-list dense style="min-width: 150px">
                <q-item clickable v-close-popup to="/browse">
                   <q-item-section>ทั้งหมด</q-item-section>
                </q-item>
             </q-list>
        </q-menu>
      </div>
      <div class="cursor-pointer hover:text-purple-600 flex items-center gap-1 transition-colors">
        หลักสูตร Onsite <q-icon name="keyboard_arrow_down" />
      </div>
      <NuxtLink to="/browse/recommended" class="hover:text-purple-600 transition-colors">
        คอร์สแนะนำ
      </NuxtLink>
      <div class="cursor-pointer hover:text-purple-600 transition-colors">บทความ</div>
      <div class="cursor-pointer hover:text-purple-600 transition-colors">สมาชิกรายปี</div>
      <div class="cursor-pointer hover:text-purple-600 transition-colors">สำหรับองค์กร</div>
    </nav>
    
    <q-space />

    <!-- Right Actions -->
    <div class="flex items-center gap-2 sm:gap-4 text-gray-500">
      <!-- Search Icon -->
      <q-btn flat round dense icon="search" class="hover:text-purple-600 transition-colors" />
      
      <!-- Cart Icon -->
      <q-btn flat round dense icon="shopping_cart" class="hover:text-purple-600 transition-colors" />

      <!-- Notifications -->
      <q-btn flat round dense icon="notifications_none" class="hover:text-purple-600 transition-colors">
         <q-badge color="red" floating rounded dense v-if="false">2</q-badge>
      </q-btn>

       <!-- Language -->
      <LanguageSwitcher />
      
      <!-- User Profile -->
      <UserMenu />
    </div>
  </q-toolbar>
</template>

<style scoped>
.search-input :deep(.q-field__control) {
  border-radius: 9999px; /* Full rounded */
}
.search-input :deep(.q-field__control:before) {
  border-color: #e2e8f0; /* slate-200 */
}
</style>
