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

    <!-- Sub-navigation -->
    <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 (stub — wired in Phase 2 admin plan) -->
    <div class="text-sm text-gray-500">
      {{ activeTab === 'users' ? 'User management coming soon.' :
         activeTab === 'quotas' ? 'Quota management coming soon.' :
         'AI config management coming soon.' }}
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

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

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