<script setup lang="ts">
type NavItem = {
  to: string;
  label: string;
};

const route = useRoute();
const { totalItems } = useClientCart();
const centerCapsule: NavItem[] = [
  { to: '/', label: 'Каталог' },
  { to: '/orders', label: 'Мои заказы' },
];

const rightCapsule: NavItem[] = [
  { to: '/cart', label: 'Корзина' },
  { to: '/profile', label: 'Профиль' },
];

function isActive(path: string) {
  if (path === '/') {
    return route.path === '/' || route.path.startsWith('/products');
  }
  if (path === '/orders') {
    return route.path === '/orders' || route.path.startsWith('/orders/');
  }
  if (path === '/clients') {
    return route.path === '/clients' || route.path.startsWith('/clients/');
  }
  if (path === '/client-orders') {
    return route.path === '/client-orders' || route.path.startsWith('/client-orders/');
  }
  if (path === '/bonus-system') {
    return route.path === '/bonus-system' || route.path.startsWith('/bonus-system/');
  }
  return route.path === path;
}
</script>

<template>
  <header class="fregat-header-glass fixed inset-x-0 top-0 z-50 border-0">
    <div class="fregat-header-backdrop" aria-hidden="true" />

    <div class="relative mx-auto max-w-[2200px] px-3 py-2 md:px-4">
      <div class="fregat-header-row relative flex items-center">
        <NuxtLink
          to="/"
          class="fregat-pill-glass fregat-pill-shell fregat-pill-brand inline-flex items-center rounded-full p-1"
        >
          <span class="lk-nav-link lk-nav-link-brand">Fregat</span>
        </NuxtLink>

        <nav class="fregat-pill-glass fregat-pill-shell fregat-pill-center flex min-w-0 flex-1 items-center rounded-full p-1 lg:absolute lg:left-1/2 lg:w-auto lg:-translate-x-1/2">
          <template v-for="(item, index) in centerCapsule" :key="item.to">
            <NuxtLink
              :to="item.to"
              :class="['lk-nav-link', { 'lk-nav-link-active': isActive(item.to) }]"
            >
              {{ item.label }}
            </NuxtLink>
            <div
              v-if="index < centerCapsule.length - 1"
              class="lk-pill-divider mx-1 h-6 w-px shrink-0"
              aria-hidden="true"
            />
          </template>
        </nav>

        <nav class="fregat-pill-glass fregat-pill-shell fregat-pill-right flex min-w-0 items-center rounded-full p-1 lg:absolute lg:right-0 lg:w-auto">
          <template v-for="(item, index) in rightCapsule" :key="item.to">
            <NuxtLink
              :to="item.to"
              :class="['lk-nav-link', { 'lk-nav-link-active': isActive(item.to) }]"
            >
              <span>{{ item.label }}</span>
              <span
                v-if="item.to === '/cart' && totalItems > 0"
                class="badge badge-sm border-0 bg-[#139957] text-white"
              >
                {{ totalItems }}
              </span>
            </NuxtLink>
            <div
              v-if="index < rightCapsule.length - 1"
              class="lk-pill-divider mx-1 h-6 w-px shrink-0"
              aria-hidden="true"
            />
          </template>
        </nav>
      </div>
    </div>
  </header>
</template>
