import { useState } from 'react'
import { ShellTopbar } from '@/components/layout/ShellTopbar'
import { AppFooter } from '@/components/layout/AppFooter'
import { AdminConferencesTab } from '@/components/admin/AdminConferencesTab'
import { AdminUsersTab } from '@/components/admin/AdminUsersTab'
import { AdminTeamsTab } from '@/components/admin/AdminTeamsTab'
import { AdminSettingsTab } from '@/components/admin/AdminSettingsTab'
import '@/styles/lobby.css'
import '@/styles/calendar.css'
import '@/styles/admin.css'

type AdminTab = 'conferences' | 'users' | 'teams' | 'settings'

const TABS: { value: AdminTab; label: string }[] = [
  { value: 'conferences', label: 'Конференции' },
  { value: 'users', label: 'Пользователи' },
  { value: 'teams', label: 'Команды' },
  { value: 'settings', label: 'Настройки' },
]

/**
 * Администрирование VidConf: управление конференциями, доступом
 * пользователей и настройками инстанса. Доступ ограничен ролью `admin`
 * (route-guard — см. `RequireAdmin` в App.tsx).
 *
 * Вкладки «Команды» и «Настройки» отсутствуют в макете
 * `design/mockups/admin.html` — реализованы по общему паттерну
 * `section-tab`/`table-card`/`toolbar-row` того же макета и DESIGN_SYSTEM.md.
 */
export function AdminPage() {
  const [tab, setTab] = useState<AdminTab>('conferences')

  return (
    <div className="admin-page page-shell">
      <ShellTopbar />
      <main className="page-main">
        <div className="page-head">
          <div>
            <h1>Администрирование</h1>
            <p>Управление конференциями, доступом и пользователями VidConf</p>
          </div>
        </div>

        <div className="section-tabs">
          {TABS.map((t) => (
            <button
              key={t.value}
              type="button"
              className={`section-tab${tab === t.value ? ' is-active' : ''}`}
              onClick={() => setTab(t.value)}
            >
              {t.label}
            </button>
          ))}
        </div>

        {tab === 'conferences' && <AdminConferencesTab />}
        {tab === 'users' && <AdminUsersTab />}
        {tab === 'teams' && <AdminTeamsTab />}
        {tab === 'settings' && <AdminSettingsTab />}
      </main>
      <AppFooter />
    </div>
  )
}