<script setup lang="ts">
const route = useRoute()
const localePath = useLocalePath()
const { signOut } = useAuth()

const userData = useState<{
  activeTeam?: { name?: string | null }
  firstName?: string | null
} | null>('me', () => null)

const navItems = [
  { label: 'Orders', path: '/manager/orders', icon: 'lucide:package' },
  { label: 'Quotations', path: '/manager/quotations', icon: 'lucide:file-text' },
  { label: 'Tariffs', path: '/manager/tariffs', icon: 'lucide:waypoints' },
]

function isActive(path: string) {
  const localized = localePath(path)
  return route.path === localized || route.path.startsWith(`${localized}/`)
}
</script>

<template>
  <div class="manager-logistics-shell text-[#2f2418]">
    <div class="sticky top-0 z-50 px-3 pt-3 md:px-4">
      <div class="mx-auto max-w-[1440px]">
        <header class="rounded-[30px] border border-[#e1d7c7] bg-[#efe6d8]/95 px-4 py-4 shadow-[0_18px_40px_rgba(47,36,24,0.08)] backdrop-blur">
          <div class="flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
            <div class="flex items-center gap-3">
              <NuxtLink
                :to="localePath('/')"
                class="flex h-12 min-w-[88px] items-center justify-center rounded-full bg-[#2f2418] px-5 text-sm font-black uppercase tracking-[0.2em] text-white"
              >
                Optovia
              </NuxtLink>
              <div>
                <p class="text-[11px] font-bold uppercase tracking-[0.18em] text-[#8a7761]">Logistics manager</p>
                <h1 class="text-xl font-black leading-tight text-[#2f2418] md:text-2xl">Control tower</h1>
              </div>
            </div>

            <nav class="flex flex-wrap items-center gap-2">
              <NuxtLink
                v-for="item in navItems"
                :key="item.path"
                :to="localePath(item.path)"
                class="inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-bold transition"
                :class="isActive(item.path) ? 'bg-[#2f2418] text-white shadow-[0_10px_24px_rgba(47,36,24,0.16)]' : 'bg-white text-[#5f4b33] hover:bg-[#f8f3ec]'"
              >
                <Icon :name="item.icon" size="16" />
                <span>{{ item.label }}</span>
              </NuxtLink>
            </nav>

            <div class="flex flex-wrap items-center gap-2">
              <div class="rounded-full bg-white px-4 py-2 text-sm font-semibold text-[#5f4b33]">
                {{ userData?.activeTeam?.name || userData?.firstName || 'Active workspace' }}
              </div>
              <NuxtLink
                :to="localePath('/clientarea/orders')"
                class="inline-flex items-center gap-2 rounded-full bg-white px-4 py-2 text-sm font-bold text-[#5f4b33] transition hover:bg-[#f8f3ec]"
              >
                <Icon name="lucide:arrow-left" size="16" />
                <span>Client area</span>
              </NuxtLink>
              <button
                type="button"
                class="inline-flex items-center gap-2 rounded-full bg-[#2f2418] px-4 py-2 text-sm font-bold text-white transition hover:bg-[#493824]"
                @click="signOut()"
              >
                <Icon name="lucide:log-out" size="16" />
                <span>Sign out</span>
              </button>
            </div>
          </div>
        </header>
      </div>
    </div>

    <main class="px-3 pb-5 pt-3 md:px-4 md:pb-6">
      <div class="mx-auto max-w-[1440px]">
        <section class="rounded-[34px] bg-[#f3eee6] px-4 py-4 shadow-[0_24px_72px_rgba(3,8,20,0.18)] md:px-5 md:py-5 lg:px-6 lg:py-6">
          <slot />
        </section>
      </div>
    </main>
  </div>
</template>
