<template>
    <div>
        <PageHeader>
            Administration
            <template #subheader>
                <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>
            </template>
        </PageHeader>

        <div>
            <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'" />
            <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: 'workflows', label: 'Workflows' },
    { key: 'efforts', label: 'Efforts' },
    { key: 'priorities', label: 'Priorités' },
    { key: 'tags', label: 'Tags' },
    { key: 'users', label: 'Utilisateurs' },
    { 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>('workflows')
</script>
