<template>
    <div>
        <div class="sticky top-8 z-20 bg-white pb-4 sm:top-12">
            <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">Administration</h1>

            <div class="mt-6 border-b border-neutral-200 overflow-x-auto">
                <nav class="flex gap-4 sm:gap-6">
                    <button
                        v-for="tab in visibleTabs"
                        :key="tab.key"
                        class="whitespace-nowrap px-1 pb-3 text-sm font-semibold transition"
                        :class="activeTab === tab.key
                            ? 'border-b-2 border-primary-500 text-primary-500'
                            : 'text-neutral-500 hover:text-neutral-700'"
                        @click="activeTab = tab.key"
                    >
                        {{ tab.label }}
                    </button>
                </nav>
            </div>
        </div>

        <div>
            <AdminClientTab v-if="activeTab === 'clients'" />
            <AdminWorkflowTab v-if="activeTab === 'workflows'" />
            <AdminEffortTab v-if="activeTab === 'efforts'" />
            <AdminPriorityTab v-if="activeTab === 'priorities'" />
            <AdminTagTab v-if="activeTab === 'tags'" />
            <AdminUserTab v-if="activeTab === 'users'" />
            <AdminClientTicketTab v-if="activeTab === 'clientTickets'" />
            <AdminRoleTab v-if="activeTab === 'roles' && canViewRoles" />
            <AdminAuditTab v-if="activeTab === 'audit' && canViewAudit" />
            <AdminGiteaTab v-if="activeTab === 'gitea'" />
            <AdminBookStackTab v-if="activeTab === 'bookstack'" />
            <AdminZimbraTab v-if="activeTab === 'zimbra'" />
            <AdminShareTab v-if="activeTab === 'share'" />
            <AdminMailTab v-if="activeTab === 'mail'" />
            <AdminAbsencePolicyTab v-if="activeTab === 'absences'" />
        </div>
    </div>
</template>

<script setup lang="ts">
definePageMeta({ middleware: ['admin'] })
useHead({ title: 'Administration' })

const { can } = usePermissions()
const { t } = useI18n()

const canViewRoles = computed(() => can('core.roles.view'))
const canViewAudit = computed(() => can('core.audit_log.view'))

const tabs = [
    { key: 'clients', label: 'Clients' },
    { key: 'workflows', label: 'Workflows' },
    { key: 'efforts', label: 'Efforts' },
    { key: 'priorities', label: 'Priorités' },
    { key: 'tags', label: 'Tags' },
    { key: 'users', label: 'Utilisateurs' },
    { key: 'clientTickets', label: t('clientTicket.adminTab') },
    { key: 'roles', label: t('admin.roles.title'), permission: 'core.roles.view' },
    { key: 'audit', label: t('admin.audit.title'), permission: 'core.audit_log.view' },
    { key: 'gitea', label: 'Gitea' },
    { key: 'bookstack', label: 'BookStack' },
    { key: 'zimbra', label: 'Zimbra' },
    { key: 'share', label: 'Partage' },
    { key: 'mail', label: 'Mail' },
    { key: 'absences', label: 'Absences' },
] as const

type TabKey = typeof tabs[number]['key']

const visibleTabs = computed(() =>
    tabs.filter((tab) => !('permission' in tab) || can(tab.permission)),
)

const activeTab = ref<TabKey>('clients')
</script>
