<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 type { ApiResponse } from '@/types'
import { computed, ref } from 'vue'
import { currentLang } from '@/router/langs'

const authStore = useAuthStore()
let menu = ref()
async function getTopMenu() {
  try {
    const { items } = await useFetchJson<ApiResponse>('/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, locale: string | undefined) {
  return items.map((item) => {
    const parsedLabel = JSON.parse(item.label)

    return {
      icon: 'i-lucide-house',
      label: parsedLabel.trans[locale] || parsedLabel.name,
      to: { name: parsedLabel.name },
      children: item.children
        ? transformMenu(item.children, locale)
        : undefined,
    }
  })
}

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" />

        <!-- {{ 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>
