import { Navigate, useLocation } from 'react-router'
import Tabs from '../../../components/Tabs'
import ChannelsAdministration from '../channels/ChannelsAdministration'
import GroupChatsAdministration from '../groups/GroupChatsAdministration'
import TeamsAdministration from '../teams/TeamsAdministration'

const sections = ['teams', 'gruppen', 'channels'] as const

export default function ChatsAdministration() {
  const location = useLocation()
  const section = location.pathname.split('/').filter(Boolean)[2] ?? 'teams'

  if (!sections.includes(section as (typeof sections)[number])) {
    return <Navigate to="/administration/chats/teams" replace />
  }

  const tabs = [
    {
      name: 'Teams',
      href: '/administration/chats/teams',
      current: section === 'teams',
    },
    {
      name: 'Gruppenchats',
      href: '/administration/chats/gruppen',
      current: section === 'gruppen',
    },
    {
      name: 'Channels',
      href: '/administration/chats/channels',
      current: section === 'channels',
    },
  ]

  return (
    <section>
      <div className="mb-6">
        <Tabs
          tabs={tabs}
          variant="bar-underline"
          ariaLabel="Teams und Chats"
        />
      </div>

      {section === 'teams' && <TeamsAdministration />}
      {section === 'gruppen' && <GroupChatsAdministration />}
      {section === 'channels' && <ChannelsAdministration />}
    </section>
  )
}