<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-transparent text-slate-800 dark:text-white h-16 px-4">
    <!-- Menu Toggle (Always Visible) -->
    <q-btn
      flat
      round
      dense
      icon="menu"
      @click="emit('toggleSidebar')"
      class="mr-2 text-slate-700 dark:text-white"
      aria-label="Menu"
    />

    <!-- 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 dark:text-white 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 dark:text-slate-400">Platform</span>
      </div>
    </div>
    
    <q-space />
    
    <!-- Center Search (Optional) -->
    <div v-if="showSearch !== false" class="hidden md:block w-1/3 max-w-md mx-4">
      <q-input
        dense
        outlined
        rounded
        v-model="searchText"
        :placeholder="$t('menu.searchCourses')"
        class="bg-slate-50 dark:bg-slate-700/50 search-input"
        bg-color="transparent" 
      >
        <template v-slot:prepend>
          <q-icon name="search" class="text-slate-400" />
        </template>
      </q-input>
    </div>
    
    <q-space />

    <!-- Right Actions -->
    <div class="flex items-center gap-2">
      <!-- Language Switcher -->
      <LanguageSwitcher />
      
      <!-- User Profile Dropdown -->
      <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>
