<template>
  <header
    class="fixed top-0 left-0 right-0 z-50 bg-white/80 dark:bg-(--black) backdrop-blur-md border-b border-(--border-light) dark:border-(--border-dark)">
    <!-- px-4 sm:px-6 lg:px-8 -->
    <div class="container mx-auto px-4">
      <div class="flex items-center justify-between h-14">
        <!-- Logo -->
        <RouterLink :to="{ name: 'home' }" class="flex items-center gap-2">
          <div class="w-8 h-8 rounded-lg bg-primary text-white flex items-center justify-center">
            <UIcon name="i-heroicons-clock" class="w-5 h-5" />
          </div>
          <span class="font-semibold text-gray-900 dark:text-white">TimeTracker</span>
        </RouterLink>

        <UNavigationMenu :type="'trigger'" :ui="{
          root: 'justify-center',
          list: 'gap-4'
        }" :items="menuItems" class="w-full"></UNavigationMenu>
        <div class="flex items-center gap-2">
          <CountryCurrencySwitch />
          <!-- Language Switcher -->
          <LangSwitch />
          <!-- Theme Switcher -->
          <ThemeSwitch />
          <!-- Logout Button (only when authenticated) -->
          <button v-if="authStore.isAuthenticated" @click="authStore.logout()"
            class="px-3 py-1.5 text-sm font-medium text-black dark:text-white hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-600 rounded-lg transition-colors border border-(--border-light) dark:border-(--border-dark)">
            {{ $t('general.logout') }}
          </button>
        </div>
      </div>
    </div>
  </header>
</template>

<script setup lang="ts">
import { useFetchJson } from '@/composable/useFetchJson'
import LangSwitch from './inner/LangSwitch.vue'
import ThemeSwitch from './inner/ThemeSwitch.vue'
import { useAuthStore } from '@/stores/auth'
import { computed, ref } from 'vue'
import { currentLang } from '@/router/langs'
import type { LabelTrans, TopMenuItem } from '@/types'
import type { NavigationMenuItem } from '@nuxt/ui'
import { useRoute, useRouter } from 'vue-router'
import CountryCurrencySwitch from './inner/CountryCurrencySwitch.vue'

const authStore = useAuthStore()
let menu = ref()
async function getTopMenu() {
  try {
    const { items } = await useFetchJson<TopMenuItem>('/api/v1/restricted/menu/get-top-menu')
    menu.value = items
  } catch (err) {
    console.log(err)
  }
}

const router = useRouter()
const route = useRoute()
const menuItems = computed(() => transformMenu(menu.value[0].children, currentLang.value?.iso_code))
function transformMenu(items: TopMenuItem[], locale: string | undefined): NavigationMenuItem[] {

  return items.map((item) => {
    const route: NavigationMenuItem = {
      icon: item.label.icon ? item.label.icon : 'i-lucide-house',
      label: item.label.trans[locale as keyof LabelTrans].label,
      children: item.children
        ? transformMenu(item.children, locale)
        : undefined,
    }

    route.onSelect = () => {
      const query = {
        name: item.params.route.name,
        params: {
          ...(item.params.route.params || {}),
          locale: currentLang.value?.iso_code
        }
      }

      router.push(query)
    }

    return route
  })
}
await getTopMenu()
</script>
