<script setup lang="ts">
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useAuthStore } from '@/stores/auth'
import LanguageSwitcher from '@/components/LanguageSwitcher.vue'

defineEmits<{
  'toggle-sidebar': []
  'logout': []
}>()

const { t } = useI18n()
const authStore = useAuthStore()
const darkMode = ref(localStorage.getItem('darkMode') === 'true')
const dropdownOpen = ref(false)

function toggleDarkMode() {
  darkMode.value = !darkMode.value
  localStorage.setItem('darkMode', String(darkMode.value))
  document.documentElement.classList.toggle('dark', darkMode.value)
}

// Initialize dark mode
if (darkMode.value) {
  document.documentElement.classList.add('dark')
}
</script>

<template>
  <header class="h-16 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between px-4 lg:px-6">
    <!-- Mobile menu button -->
    <button
      class="lg:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
      @click="$emit('toggle-sidebar')"
    >
      <span class="text-2xl">☰</span>
    </button>

    <!-- Page title placeholder -->
    <div class="flex-1 lg:ml-0">
      <h1 class="text-lg font-semibold text-gray-900 dark:text-white hidden lg:block">
        {{ t('app.title') }}
      </h1>
    </div>

    <!-- Right side actions -->
    <div class="flex items-center gap-2">
      <!-- Language Switcher -->
      <LanguageSwitcher />

      <!-- Dark mode toggle -->
      <button
        class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
        @click="toggleDarkMode"
        :title="darkMode ? t('settings.lightMode') : t('settings.darkMode')"
      >
        <span class="text-xl">{{ darkMode ? '☀️' : '🌙' }}</span>
      </button>

      <!-- User dropdown -->
      <div class="relative">
        <button
          class="flex items-center gap-2 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
          @click="dropdownOpen = !dropdownOpen"
        >
          <div class="w-8 h-8 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center">
            <span class="text-primary-600 dark:text-primary-300 text-sm font-medium">
              {{ authStore.user?.first_name?.[0] }}{{ authStore.user?.last_name?.[0] }}
            </span>
          </div>
          <span class="hidden sm:block text-sm font-medium text-gray-700 dark:text-gray-200">
            {{ authStore.fullName }}
          </span>
        </button>

        <!-- Dropdown menu -->
        <div
          v-if="dropdownOpen"
          class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-1 z-50"
          @click="dropdownOpen = false"
        >
          <router-link
            to="/settings"
            class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
          >
            ⚙️ {{ t('nav.settings') }}
          </router-link>
          <hr class="my-1 border-gray-200 dark:border-gray-700">
          <button
            class="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20"
            @click="$emit('logout')"
          >
            🚪 {{ t('auth.logout') }}
          </button>
        </div>
      </div>
    </div>
  </header>
</template>
