<template>
  <div class="min-h-screen bg-gray-100">
    <Header />

    <main class="py-6 sm:py-8">
      <Container>
        <!-- Горизонтальное меню -->
        <nav class="bg-white rounded-lg shadow mb-6">
          <div class="flex gap-1 p-1">
            <NuxtLink
              :to="localePath('/dashboard/cabinet/orders')"
              class="flex items-center gap-2 px-4 py-2 text-gray-700 rounded-lg hover:bg-gray-100 transition-colors"
              active-class="bg-primary/10 text-primary font-medium"
            >
              <Icon name="lucide:shopping-bag" size="20" />
              <span>Мои заказы</span>
            </NuxtLink>

            <NuxtLink
              v-if="isSeller"
              :to="localePath('/dashboard/cabinet/offers')"
              class="flex items-center gap-2 px-4 py-2 text-gray-700 rounded-lg hover:bg-gray-100 transition-colors"
              active-class="bg-primary/10 text-primary font-medium"
            >
              <Icon name="lucide:package" size="20" />
              <span>Мои предложения</span>
            </NuxtLink>
          </div>
        </nav>

        <!-- Контент на всю ширину -->
        <slot />
      </Container>
    </main>

    <FooterPublic />
  </div>
</template>

<script setup lang="ts">
const localePath = useLocalePath()

// Получаем данные пользователя для проверки типа команды
const userData = ref<{ activeTeam?: { teamType?: string } } | null>(null)
const { loggedIn, getIdTokenClaims } = useAuth()
const { execute } = useGraphQL()

const isSeller = computed(() => {
  return userData.value?.activeTeam?.teamType === 'SELLER'
})

onMounted(async () => {
  if (loggedIn.value) {
    try {
      const { GetMeDocument } = await import('~/composables/graphql/user/teams-generated')
      const result = await execute(GetMeDocument, {}, 'user', 'teams')
      if (result.me) {
        userData.value = result.me
      }
    } catch (err) {
      console.error('Failed to load user data:', err)
    }
  }
})
</script>
