<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'

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 menuItems = computed(() => transformMenu(menu.value[0].children, currentLang.value?.iso_code))
function transformMenu(items: TopMenuItem[], locale: string | undefined): NavigationMenuItem[] {
  return items.map((item) => {
    let route = {
      icon: 'i-lucide-house',
      label: item.label.trans[locale as keyof LabelTrans].label,
      children: item.children ? transformMenu(item.children, locale) : undefined,
    }
    if (item.params?.route) {
      route = { ...route, ...{ to: { name: item.params.route.name, params: { locale: locale } } } }
    } 

    return route
  })
}

await getTopMenu()
</script>

<template>
  {{ menuItems }}
  <!-- fixed top-0 left-0 right-0 z-50 -->
  <header class="bg-white/80 dark:bg-(--black) backdrop-blur-md border-b border-(--border-light) dark:border-(--border-dark)">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <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 :items="menuItems" class="w-full" />

        <!-- {{ router }} -->
        <!-- <RouterLink :to="{ name: 'admin-products' }">
          products list
        </RouterLink>
        <RouterLink :to="{ name: 'admin-product-detail' }">
          product detail
        </RouterLink>
        <RouterLink :to="{
          name: 'customer-product', params: {
            product_id: '51'
          }
        }">
          Product (51)
        </RouterLink>
        <RouterLink :to="{ name: 'addresses' }">
          Addresses
        </RouterLink>
        <RouterLink :to="{ name: 'profile-details' }">
          Customer Data
        </RouterLink>
        <RouterLink :to="{ name: 'cart' }">
          Cart
        </RouterLink>
        <RouterLink :to="{
          name: 'cart-details', params: {
            cart_id: '1'
          }
        }">
          Cart details (1)
        </RouterLink> -->
        <div class="flex items-center gap-2">
          <!-- 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>
