import { createFileRoute, Link, Outlet } from '@tanstack/react-router'
import { useTranslation } from 'react-i18next'
import { useRequireAdmin } from '@/features/auth/guards'
import { cn } from '@/shared/lib/cn'

export const Route = createFileRoute('/admin')({ component: AdminLayout })

function AdminLayout() {
  const { t } = useTranslation()
  const { isReady } = useRequireAdmin()

  if (!isReady) return null

  return (
    <div className="flex flex-col gap-6">
      <h1 className="crt-glow text-2xl font-bold">{t('nav.admin')}</h1>
      <nav className="flex flex-wrap gap-4 border-b border-border text-sm">
        <Link
          to="/admin/media"
          className={cn('pb-2 uppercase tracking-wide text-muted-foreground hover:text-foreground')}
          activeProps={{ className: 'border-b-2 border-primary text-primary' }}
        >
          {t('admin.media.title')}
        </Link>
        <Link
          to="/admin/shows"
          className={cn('pb-2 uppercase tracking-wide text-muted-foreground hover:text-foreground')}
          activeProps={{ className: 'border-b-2 border-primary text-primary' }}
        >
          {t('admin.shows.title')}
        </Link>
        <Link
          to="/admin/interstitials"
          className={cn('pb-2 uppercase tracking-wide text-muted-foreground hover:text-foreground')}
          activeProps={{ className: 'border-b-2 border-primary text-primary' }}
        >
          {t('admin.interstitials.title')}
        </Link>
        <Link
          to="/admin/groups"
          className={cn('pb-2 uppercase tracking-wide text-muted-foreground hover:text-foreground')}
          activeProps={{ className: 'border-b-2 border-primary text-primary' }}
        >
          {t('admin.groups.title')}
        </Link>
        <Link
          to="/admin/collections"
          className={cn('pb-2 uppercase tracking-wide text-muted-foreground hover:text-foreground')}
          activeProps={{ className: 'border-b-2 border-primary text-primary' }}
        >
          {t('admin.collections.title')}
        </Link>
        <Link
          to="/admin/genres"
          className={cn('pb-2 uppercase tracking-wide text-muted-foreground hover:text-foreground')}
          activeProps={{ className: 'border-b-2 border-primary text-primary' }}
        >
          {t('admin.genres.title')}
        </Link>
        <Link
          to="/admin/channels"
          className={cn('pb-2 uppercase tracking-wide text-muted-foreground hover:text-foreground')}
          activeProps={{ className: 'border-b-2 border-primary text-primary' }}
        >
          {t('admin.channels.title')}
        </Link>
        <Link
          to="/admin/junctions"
          className={cn('pb-2 uppercase tracking-wide text-muted-foreground hover:text-foreground')}
          activeProps={{ className: 'border-b-2 border-primary text-primary' }}
        >
          {t('admin.junctions.title')}
        </Link>
        <Link
          to="/admin/bumpers"
          className={cn('pb-2 uppercase tracking-wide text-muted-foreground hover:text-foreground')}
          activeProps={{ className: 'border-b-2 border-primary text-primary' }}
        >
          {t('admin.bumpers.title')}
        </Link>
        <Link
          to="/admin/gallery"
          className={cn('pb-2 uppercase tracking-wide text-muted-foreground hover:text-foreground')}
          activeProps={{ className: 'border-b-2 border-primary text-primary' }}
        >
          {t('admin.gallery.title')}
        </Link>
        <Link
          to="/admin/roles"
          className={cn('pb-2 uppercase tracking-wide text-muted-foreground hover:text-foreground')}
          activeProps={{ className: 'border-b-2 border-primary text-primary' }}
        >
          {t('admin.roles.title')}
        </Link>
        <Link
          to="/admin/users"
          className={cn('pb-2 uppercase tracking-wide text-muted-foreground hover:text-foreground')}
          activeProps={{ className: 'border-b-2 border-primary text-primary' }}
        >
          {t('admin.users.title')}
        </Link>
        <Link
          to="/admin/maintenance"
          className={cn('pb-2 uppercase tracking-wide text-muted-foreground hover:text-foreground')}
          activeProps={{ className: 'border-b-2 border-primary text-primary' }}
        >
          {t('admin.maintenance.title')}
        </Link>
        <Link
          to="/admin/settings"
          className={cn('pb-2 uppercase tracking-wide text-muted-foreground hover:text-foreground')}
          activeProps={{ className: 'border-b-2 border-primary text-primary' }}
        >
          {t('admin.settings.title')}
        </Link>
      </nav>
      <Outlet />
    </div>
  )
}