// frontend/src/pages/administration/AdministrationPage.tsx

import { useLocation, Navigate } from 'react-router'
import {
  CalendarDaysIcon,
  ChatBubbleLeftRightIcon,
  KeyIcon,
  UserGroupIcon,
  UsersIcon,
  VideoCameraIcon,
} from '@heroicons/react/20/solid'
import Tabs from '../../components/Tabs'
import UsersAdministration from './users/UsersAdministration'
import FeedbackAdministration from './feedback/FeedbackAdministration'
import MilestoneAdministration from './milestone/MilestoneAdministration'
import ChatsAdministration from './chats/ChatsAdministration'
import CalendarAdministration from './calendar/CalendarAdministration'
import ActiveDirectoryAdministration from './active-directory/ActiveDirectoryAdministration'

export default function AdministrationPage() {
  const location = useLocation()

  const pathname = location.pathname.replace(/\/$/, '')
  const pathParts = pathname.split('/').filter(Boolean)
  const section = pathParts[1] ?? 'benutzer'

  const administrationTabs = [
    {
      name: 'Benutzer',
      href: '/administration/benutzer',
      icon: UsersIcon,
      current: section === 'benutzer',
    },
    {
      name: 'Teams & Chats',
      href: '/administration/chats/teams',
      icon: UserGroupIcon,
      current: section === 'chats',
    },
    {
      name: 'Active Directory',
      href: '/administration/active-directory',
      icon: KeyIcon,
      current: section === 'active-directory',
    },
    {
      name: 'Milestone',
      href: '/administration/milestone',
      icon: VideoCameraIcon,
      current: section === 'milestone',
    },
    {
      name: 'Kalender',
      href: '/administration/kalender',
      icon: CalendarDaysIcon,
      current: section === 'kalender',
    },
    {
      name: 'Feedback',
      href: '/administration/feedback',
      icon: ChatBubbleLeftRightIcon,
      current: section === 'feedback',
    },
  ]

  if (section === 'teams') {
    return <Navigate to="/administration/chats/teams" replace />
  }

  if (section === 'channels') {
    return <Navigate to="/administration/chats/channels" replace />
  }

  if (
    !['benutzer', 'chats', 'milestone', 'active-directory', 'kalender', 'feedback'].includes(
      section,
    )
  ) {
    return <Navigate to="/administration/benutzer" replace />
  }

  return (
    <main className="flex h-full min-h-0 flex-col overflow-hidden">
      <h1 className="sr-only">Administration</h1>

      <div className="shrink-0 border-b border-gray-200 bg-white dark:border-white/10 dark:bg-gray-900">
        <Tabs
          tabs={administrationTabs}
          variant="underline-icons"
          align="center"
          ariaLabel="Administration"
        />
      </div>

      <div className="min-h-0 flex-1 overflow-y-auto [scrollbar-gutter:stable]">
        <div className="px-4 py-10 sm:px-6 lg:px-8">
          <div className="mb-8">
            <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">
              Administration
            </h1>

            <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
              Benutzer, Kommunikation, Kalender und Integrationen verwalten.
            </p>
          </div>

          {section === 'benutzer' && <UsersAdministration />}
          {section === 'chats' && <ChatsAdministration />}
          {section === 'milestone' && <MilestoneAdministration />}
          {section === 'active-directory' && <ActiveDirectoryAdministration />}
          {section === 'kalender' && <CalendarAdministration />}
          {section === 'feedback' && <FeedbackAdministration />}
        </div>
      </div>
    </main>
  )
}