<template>
  <div class="th-page system-admin-layout">
    <header class="system-admin-heading">
      <div>
        <h1>{{ t('systemAdmin.title') }}</h1>
        <p>{{ t('systemAdmin.subtitle') }}</p>
      </div>
    </header>

    <nav
      class="system-admin-tabs"
      :aria-label="t('systemAdmin.navigationAria')"
    >
      <RouterLink
        v-for="item in tabs"
        :key="item.path"
        :to="item.path"
        class="system-admin-tabs__item"
      >
        <i
          :class="item.icon"
          aria-hidden="true"
        />
        <span>{{ t(item.labelKey) }}</span>
      </RouterLink>
    </nav>

    <RouterView />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { RouterLink, RouterView } from 'vue-router'
import { useI18n } from 'vue-i18n'

import { useAuthStore } from '@/stores/authStore'
import type { AuthPermissionCode } from '@/types/auth'

const { t } = useI18n()
const authStore = useAuthStore()

const allTabs: Array<{
  path: string
  labelKey: string
  icon: string
  permission: AuthPermissionCode
}> = [
  {
    path: '/system/users',
    labelKey: 'nav.systemUsers',
    icon: 'pi pi-users',
    permission: 'SYSTEM_USER_MANAGE',
  },
  {
    path: '/system/roles',
    labelKey: 'nav.systemRoles',
    icon: 'pi pi-shield',
    permission: 'SYSTEM_ROLE_MANAGE',
  },
  {
    path: '/system/menus',
    labelKey: 'nav.systemMenus',
    icon: 'pi pi-sitemap',
    permission: 'SYSTEM_MENU_MANAGE',
  },
  {
    path: '/system/hotels',
    labelKey: 'nav.systemHotels',
    icon: 'pi pi-building',
    permission: 'HOTEL_MANAGE',
  },
  {
    path: '/system/audits',
    labelKey: 'nav.systemAudits',
    icon: 'pi pi-history',
    permission: 'SYSTEM_ADMIN_CONSOLE_ACCESS',
  },
]

const tabs = computed(() => allTabs.filter((item) => authStore.hasPermission(item.permission)))
</script>

<style scoped>
.system-admin-layout {
  max-width: 1320px;
}

.system-admin-heading h1,
.system-admin-heading p {
  margin: 0;
}

.system-admin-heading h1 {
  color: var(--th-color-slate-900);
  font-size: 28px;
}

.system-admin-heading p {
  margin-top: 8px;
  color: var(--th-color-slate-500);
  font-size: 14px;
}

.system-admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.system-admin-tabs__item {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--th-color-slate-200);
  border-radius: var(--th-radius-sm);
  background: var(--th-color-white);
  color: var(--th-color-slate-700);
  font-size: 13px;
  font-weight: 800;
  padding: 8px 12px;
  text-decoration: none;
}

.system-admin-tabs__item.router-link-active {
  border-color: var(--th-color-blue-600);
  color: var(--th-color-blue-600);
}
</style>
