<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 tabs"
                        :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'" />
            <AdminStatusTab v-if="activeTab === 'statuses'" />
            <AdminEffortTab v-if="activeTab === 'efforts'" />
            <AdminPriorityTab v-if="activeTab === 'priorities'" />
            <AdminTagTab v-if="activeTab === 'tags'" />
            <AdminUserTab v-if="activeTab === 'users'" />
            <AdminGiteaTab v-if="activeTab === 'gitea'" />
            <AdminBookStackTab v-if="activeTab === 'bookstack'" />
        </div>
    </div>
</template>

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

const tabs = [
    { key: 'clients', label: 'Clients' },
    { key: 'statuses', label: 'Statuts' },
    { key: 'efforts', label: 'Efforts' },
    { key: 'priorities', label: 'Priorités' },
    { key: 'tags', label: 'Tags' },
    { key: 'users', label: 'Utilisateurs' },
    { key: 'gitea', label: 'Gitea' },
    { key: 'bookstack', label: 'BookStack' },
] as const

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

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