<template>
    <div>
        <h1 class="text-2xl font-bold text-primary-500">Administration</h1>

        <div class="mt-6 border-b border-neutral-200">
            <nav class="flex gap-6">
                <button
                    v-for="tab in tabs"
                    :key="tab.key"
                    class="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 class="mt-6">
            <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'" />
        </div>
    </div>
</template>

<script setup lang="ts">
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' },
] as const

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

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