<script setup lang="ts">
import { ref, computed } from 'vue'
import { Menu, X } from 'lucide-vue-next'
import { useWordpressMenu } from '@/composables/useWordpressMenu'

const isMobileMenuOpen = ref(false)
const { menuItems, loading } = useWordpressMenu()

const navLinks = computed(() => {
  if (loading.value) {
    return [
      { label: 'Главная', to: '/' },
      { label: 'Загрузка...', to: '#' },
    ]
  }

  return menuItems.value
})
</script>

<template>
  <header
    class="sticky top-0 z-50 w-full border-b border-slate-800 bg-slate-950/80 backdrop-blur-md"
  >
    <div class="container h-16 sm:h-20">
      <div class="row h-100 align-items-center justify-content-between">
        <div class="col-auto">
          <router-link to="/" class="flex items-center gap-1 sm:gap-2 group text-decoration-none">
            <div class="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 lg:w-14 lg:h-14">
              <img src="@/assets/images/vendor/logo-small.png" alt="" class="w-full h-full object-contain">
            </div>
            <div class="leading-tight">
              <div class="font-bold text-xs sm:text-sm md:text-base lg:text-lg uppercase tracking-tighter text-white">Людмила Богатырь и Александр Сахаров</div>
              <div class="text-[8px] sm:text-[10px] text-slate-400 uppercase tracking-widest">Fitness & Bodybuilding</div>
            </div>
          </router-link>
        </div>

        <div class="col-auto d-none d-md-block">
          <nav class="flex items-center gap-4 lg:gap-6 xl:gap-8">

            <template v-if="loading">
              <div v-for="i in 4" :key="i" class="h-4 w-16 bg-slate-800 animate-pulse rounded"></div>
            </template>

            <router-link
              v-for="link in navLinks"
              v-else
              :key="link.ID || link.to"
              :to="link.to"
              class="text-xs lg:text-sm font-medium uppercase tracking-wider text-slate-300 hover:text-orange-500 transition-colors py-2 relative group text-decoration-none"
              active-class="text-orange-500"
              :target="link.url?.startsWith('http') ? '_blank' : '_self'"
            >
              {{ link.label }}
              <span
                class="absolute bottom-0 left-0 h-0.5 bg-orange-600 transition-all w-0 group-hover:w-full"
                :class="{'w-full': link.to === '/' ? $route.path === '/' : $route.path.startsWith(link.to)}"
              ></span>
            </router-link>
          </nav>
        </div>

        <div class="col-auto d-md-none">
          <button @click="isMobileMenuOpen = !isMobileMenuOpen" class="p-1 sm:p-2 text-slate-400 hover:text-white border-0 bg-transparent">
            <Menu v-if="!isMobileMenuOpen" :size="20" class="sm:w-6 sm:h-6" />
            <X v-else :size="20" class="sm:w-6 sm:h-6" />
          </button>
        </div>
      </div>
    </div>

    <Transition
      enter-active-class="transition duration-200 ease-out"
      enter-from-class="opacity-0 -translate-y-4"
      enter-to-class="opacity-100 translate-y-0"
      leave-active-class="transition duration-150 ease-in"
      leave-from-class="opacity-100 translate-y-0"
      leave-to-class="opacity-0 -translate-y-4"
    >
      <nav v-if="isMobileMenuOpen" class="d-md-none bg-slate-900 border-b border-slate-800 px-4 py-4 sm:py-6 flex flex-col gap-2 sm:gap-4">
        <template v-if="loading">
          <div v-for="i in 4" :key="i" class="h-4 w-32 bg-slate-800 animate-pulse rounded"></div>
        </template>

        <router-link
          v-for="link in navLinks"
          v-else
          :key="link.ID || link.to"
          :to="link.to"
          @click="isMobileMenuOpen = false"
          class="text-base sm:text-lg font-medium uppercase tracking-wider text-slate-300 hover:text-orange-500 transition-colors text-decoration-none py-1 sm:py-2"
          :target="link.url?.startsWith('http') ? '_blank' : '_self'"
        >
          {{ link.label }}
        </router-link>
      </nav>
    </Transition>
  </header>
</template>

<style scoped>
.h-100 { height: 100%; }
</style>
