<script setup lang="ts">
import { useQuery } from '@vue/apollo-composable';
import { MeDocument } from '~/composables/graphql/generated';
import { hasManagerAccess } from '~/utils/roles';

const route = useRoute();
const isLoginPage = computed(() => route.path === '/login');
const isBonusProgramPage = computed(() => route.path === '/bonus-program');
const meQuery = useQuery(MeDocument);
const hasManagerDock = computed(() => (
  !isLoginPage.value && !isBonusProgramPage.value && hasManagerAccess(meQuery.result.value?.me?.role)
));

const managerPageTabs = computed(() => {
  if (!hasManagerDock.value) {
    return [];
  }

  if (
    route.path === '/client-orders'
    || route.path.startsWith('/client-orders/')
    || route.path === '/clients'
    || route.path.startsWith('/clients/')
  ) {
    return [
      {
        key: 'orders',
        label: 'Заказы',
        active: route.path === '/client-orders' || route.path.startsWith('/client-orders/'),
        to: {
          path: '/client-orders',
          query: route.path === '/client-orders' ? route.query : {},
        },
      },
      {
        key: 'clients',
        label: 'Клиенты',
        active: route.path === '/clients' || route.path.startsWith('/clients/'),
        to: {
          path: '/clients',
          query: route.path === '/clients' ? route.query : {},
        },
      },
    ];
  }

  if (route.path === '/bonus-system' || route.path.startsWith('/bonus-system/')) {
    return [
      {
        key: 'balances',
        label: 'Балансы',
        active: route.path !== '/bonus-system/withdrawals'
          && !route.path.startsWith('/bonus-system/withdrawals/')
          && route.query.tab !== 'withdrawals'
          && route.query.tab !== 'rewards'
          && route.query.tab !== 'products'
          && route.query.tab !== 'manager',
        to: {
          path: '/bonus-system',
          query: {
            ...route.query,
            tab: 'balances',
          },
        },
      },
      {
        key: 'withdrawals',
        label: 'Заявки на выплату',
        active: route.path === '/bonus-system/withdrawals'
          || route.path.startsWith('/bonus-system/withdrawals/')
          || route.query.tab === 'withdrawals',
        to: {
          path: '/bonus-system',
          query: {
            ...route.query,
            tab: 'withdrawals',
          },
        },
      },
      {
        key: 'rewards',
        label: 'Вознаграждения',
        active: route.query.tab === 'rewards' || route.query.tab === 'products' || route.query.tab === 'manager',
        to: {
          path: '/bonus-system',
          query: {
            ...route.query,
            tab: 'rewards',
          },
        },
      },
    ];
  }

  if (route.path === '/messages') {
    return [
      {
        key: 'messages',
        label: 'Сообщения',
        active: true,
        to: {
          path: '/messages',
          query: {},
        },
      },
    ];
  }

  return [];
});
</script>

<template>
  <div :class="isBonusProgramPage ? 'bonus-program-shell' : 'lk-shell'" data-theme="aqua">
    <UiAppHeader v-if="!isLoginPage && !isBonusProgramPage" />
    <main
      :class="isBonusProgramPage
        ? 'bonus-program-main'
        : ['mx-auto w-full max-w-[1440px] p-4 pt-[104px] md:p-6 md:pt-[112px] lg:p-8 lg:pt-[118px]', hasManagerDock ? 'pb-[116px] md:pb-[128px]' : '']"
    >
      <div v-if="managerPageTabs.length && !isBonusProgramPage" class="lk-page-tabs-shell">
        <nav class="manager-page-tabs" aria-label="Разделы страницы">
          <NuxtLink
            v-for="tab in managerPageTabs"
            :key="tab.key"
            :to="tab.to"
            class="manager-page-tab"
            :class="{ 'manager-page-tab--active': tab.active }"
          >
            {{ tab.label }}
          </NuxtLink>
        </nav>
      </div>

      <div
        :class="isBonusProgramPage
          ? 'bonus-program-stage'
          : ['lk-content-canvas', { 'lk-content-canvas--with-tabs': managerPageTabs.length }]"
      >
        <NuxtPage />
      </div>
    </main>
    <UiAppManagerDock v-if="hasManagerDock" />
  </div>
</template>
