<script setup lang="ts">
type DockItem = {
  to: string;
  label: string;
  icon: 'orders' | 'clients' | 'bonus';
};

const route = useRoute();

const dockItems: DockItem[] = [
  { to: '/client-orders', label: 'Заказы', icon: 'orders' },
  { to: '/clients', label: 'Клиенты', icon: 'clients' },
  { to: '/bonus-system', label: 'Бонусы', icon: 'bonus' },
];

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

<template>
  <nav class="manager-dock-shell" aria-label="Навигация менеджера">
    <div class="manager-dock">
      <NuxtLink
        v-for="item in dockItems"
        :key="item.to"
        :to="item.to"
        class="manager-dock__item"
        :class="{ 'manager-dock__item--active': isActive(item.to) }"
      >
        <span class="manager-dock__icon" aria-hidden="true">
          <svg v-if="item.icon === 'orders'" viewBox="0 0 24 24" fill="none" class="h-5 w-5">
            <path d="M7 6.75H17" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
            <path d="M7 12H17" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
            <path d="M7 17.25H13" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
            <rect x="4" y="4" width="16" height="16" rx="4" stroke="currentColor" stroke-width="1.8" />
          </svg>
          <svg v-else-if="item.icon === 'clients'" viewBox="0 0 24 24" fill="none" class="h-5 w-5">
            <path d="M8.5 11.25C10.0188 11.25 11.25 10.0188 11.25 8.5C11.25 6.98122 10.0188 5.75 8.5 5.75C6.98122 5.75 5.75 6.98122 5.75 8.5C5.75 10.0188 6.98122 11.25 8.5 11.25Z" stroke="currentColor" stroke-width="1.8" />
            <path d="M15.75 10.25C16.9926 10.25 18 9.24264 18 8C18 6.75736 16.9926 5.75 15.75 5.75" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
            <path d="M4.75 17.5C5.45774 15.4578 7.39669 14 9.75 14H10.25C12.6033 14 14.5423 15.4578 15.25 17.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
            <path d="M15.5 14.5C17.0401 14.7577 18.3497 15.7812 18.95 17.2" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
          </svg>
          <svg v-else viewBox="0 0 24 24" fill="none" class="h-5 w-5">
            <path d="M12 4.75L14.2401 9.28984L19.25 10.0172L15.625 13.5504L16.4802 18.5398L12 16.1848L7.51983 18.5398L8.375 13.5504L4.75 10.0172L9.75987 9.28984L12 4.75Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" />
          </svg>
        </span>
        <span class="manager-dock__label">{{ item.label }}</span>
      </NuxtLink>
    </div>
  </nav>
</template>
