import React, { useState } from 'react'
import { Navigate } from 'react-router-dom'
import { useAuth } from '../context/AuthContext'
import AdminPageNav from '../components/AdminPageNav'
import SkillsCatalogAdmin from '../components/admin/SkillsCatalogAdmin'
import MaturityModelsAdminPanel from '../components/admin/MaturityModelsAdminPanel'

export default function AdminMaturityModelsPage() {
  const { user } = useAuth()
  const isAdmin = user?.role === 'admin' || user?.role === 'superadmin'
  const [tab, setTab] = useState('catalog')

  if (!isAdmin) {
    return <Navigate to="/" replace />
  }

  return (
    <div className="admin-shell admin-page">
      <AdminPageNav />

      <header className="admin-maturity-header">
        <h1 className="admin-maturity-header__title">Admin: Fähigkeitsmatrix und Katalog</h1>
        <p className="admin-maturity-header__subtitle muted">
          Hierarchie der Fähigkeiten und Reifegradmodelle mit Matrix-Pflege.
        </p>
      </header>

      <div className="admin-tabs" role="tablist" aria-label="Bereiche Fähigkeiten">
        <button
          type="button"
          role="tab"
          aria-selected={tab === 'catalog'}
          className={'admin-tabs__tab' + (tab === 'catalog' ? ' admin-tabs__tab--active' : '')}
          onClick={() => setTab('catalog')}
        >
          Katalog und Hierarchie
        </button>
        <button
          type="button"
          role="tab"
          aria-selected={tab === 'models'}
          className={'admin-tabs__tab' + (tab === 'models' ? ' admin-tabs__tab--active' : '')}
          onClick={() => setTab('models')}
        >
          Reifegradmodelle
        </button>
      </div>

      <div className="admin-tabs__panel" role="tabpanel">
        {tab === 'catalog' ? <SkillsCatalogAdmin /> : <MaturityModelsAdminPanel />}
      </div>
    </div>
  )
}