<template>
  <div class="p-8 max-w-5xl mx-auto">
    <h2 class="text-2xl font-semibold text-gray-900 mb-6">Admin panel</h2>

    <!-- Tab strip -->
    <div class="flex border-b border-gray-200 mb-6">
      <button
        v-for="tab in tabs"
        :key="tab.id"
        @click="activeTab = tab.id"
        class="px-4 py-2 text-sm font-semibold border-b-2 transition-colors"
        :class="activeTab === tab.id
          ? 'text-indigo-600 border-indigo-600'
          : 'text-gray-500 hover:text-gray-700 border-transparent'"
      >
        {{ tab.label }}
      </button>
    </div>

    <!-- Tab content -->
    <AdminUsersTab v-if="activeTab === 'users'" />
    <AdminQuotasTab v-if="activeTab === 'quotas'" />
    <AdminAiConfigTab v-if="activeTab === 'ai'" />
    <AuditLogTab v-if="activeTab === 'audit'" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import AdminUsersTab from '../components/admin/AdminUsersTab.vue'
import AdminQuotasTab from '../components/admin/AdminQuotasTab.vue'
import AdminAiConfigTab from '../components/admin/AdminAiConfigTab.vue'
import AuditLogTab from '../components/admin/AuditLogTab.vue'

const tabs = [
  { id: 'users', label: 'Users' },
  { id: 'quotas', label: 'Quotas' },
  { id: 'ai', label: 'AI Config' },
  { id: 'audit', label: 'Audit Log' },
]

const activeTab = ref('users')
</script>
