<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 === '/admin/orders'
    || route.path.startsWith('/admin/orders/')
  ) {
    return [
      {
        key: 'orders',
        label: 'Заказы',
        active: route.path === '/admin/orders'
          || (
            /^\/admin\/orders\/[^/]+$/.test(route.path)
            && !route.path.startsWith('/admin/orders/clients')
            && !route.path.startsWith('/admin/orders/requests')
          ),
        to: {
          path: '/admin/orders',
        },
      },
      {
        key: 'clients',
        label: 'Клиенты',
        active: route.path === '/admin/orders/clients'
          || route.path.startsWith('/admin/orders/clients/')
          || route.path.startsWith('/admin/orders/requests/'),
        to: {
          path: '/admin/orders/clients',
        },
      },
    ];
  }

  if (route.path.startsWith('/admin/bonuses')) {
    return [
      {
        key: 'balances',
        label: 'Балансы',
        active: route.path === '/admin/bonuses'
          || route.path === '/admin/bonuses/balances'
          || route.path.startsWith('/admin/bonuses/balances/')
          || route.path.startsWith('/admin/bonuses/referrals/')
          || route.path.startsWith('/admin/bonuses/transactions/'),
        to: {
          path: '/admin/bonuses/balances',
        },
      },
      {
        key: 'withdrawals',
        label: 'Заявки на выплату',
        active: route.path === '/admin/bonuses/requests'
          || route.path.startsWith('/admin/bonuses/requests/'),
        to: {
          path: '/admin/bonuses/requests',
        },
      },
      {
        key: 'rewards',
        label: 'Вознаграждения',
        active: route.path === '/admin/bonuses/rewards',
        to: {
          path: '/admin/bonuses/rewards',
        },
      },
    ];
  }

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

  return [];
});

const mainClass = computed(() => {
  if (isBonusProgramPage.value) {
    return 'bonus-program-main';
  }

  if (isLoginPage.value) {
    return 'mx-auto flex min-h-screen w-full max-w-[1440px] items-center justify-center p-4 md:p-6 lg:p-8';
  }

  return [
    'mx-auto w-full max-w-[1440px] p-4 pt-[104px] md:p-6 md:pt-[112px] lg:p-8 lg:pt-[118px]',
    hasManagerDock.value ? 'pb-[116px] md:pb-[128px]' : '',
  ];
});

const pageFrameClass = computed(() => {
  if (isBonusProgramPage.value) {
    return 'bonus-program-stage';
  }

  if (isLoginPage.value) {
    return '';
  }

  return ['lk-content-canvas', { 'lk-content-canvas--with-tabs': managerPageTabs.value.length }];
});
</script>

<template>
  <div :class="isBonusProgramPage ? 'bonus-program-shell' : 'lk-shell'" data-theme="aqua">
    <UiAppHeader v-if="!isLoginPage && !isBonusProgramPage" />
    <main :class="mainClass">
      <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="pageFrameClass">
        <NuxtPage />
      </div>
    </main>
    <UiAppManagerDock v-if="hasManagerDock" />
  </div>
</template>
