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'

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-page-subtabs" role="tablist" aria-label="Bereiche Fähigkeiten">
        <button
          type="button"
          role="tab"
          aria-selected={tab === 'catalog'}
          className={
            'admin-page-subtabs__btn' + (tab === 'catalog' ? ' admin-page-subtabs__btn--active' : '')
          }
          onClick={() => setTab('catalog')}
        >
          Katalog und Hierarchie
        </button>
        <button
          type="button"
          role="tab"
          aria-selected={tab === 'models'}
          className={
            'admin-page-subtabs__btn' + (tab === 'models' ? ' admin-page-subtabs__btn--active' : '')
          }
          onClick={() => setTab('models')}
        >
          Reifegradmodelle
        </button>
        <button
          type="button"
          role="tab"
          aria-selected={tab === 'bindings'}
          className={
            'admin-page-subtabs__btn' + (tab === 'bindings' ? ' admin-page-subtabs__btn--active' : '')
          }
          onClick={() => setTab('bindings')}
        >
          Kontext-Zuordnung
        </button>
        <button
          type="button"
          role="tab"
          aria-selected={tab === 'matrixviz'}
          className={
            'admin-page-subtabs__btn' + (tab === 'matrixviz' ? ' admin-page-subtabs__btn--active' : '')
          }
          onClick={() => setTab('matrixviz')}
        >
          Matrix-Ansicht und Export
        </button>
      </div>

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