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'
import MaturityModelBindingsAdmin from '../components/admin/MaturityModelBindingsAdmin'
import MaturityMatrixToolsAdmin from '../components/admin/MaturityMatrixToolsAdmin'
import PageSectionNav from '../components/PageSectionNav'

const MATURITY_SECTION_TABS = [
  { id: 'catalog', label: 'Katalog und Hierarchie' },
  { id: 'models', label: 'Reifegradmodelle' },
  { id: 'bindings', label: 'Kontext-Zuordnung' },
  { id: 'matrixviz', label: 'Matrix-Ansicht und Export' },
]

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>

      <PageSectionNav
        ariaLabel="Bereiche Fähigkeiten"
        value={tab}
        onChange={setTab}
        items={MATURITY_SECTION_TABS}
      />

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