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 })

const TABS = [
  { to: '/admin', key: 'overview' },
  { to: '/admin/activation', key: 'activation' },
  { to: '/admin/users', key: 'users' },
  { to: '/admin/roles', key: 'roles' },
  { to: '/admin/nodes', key: 'nodes' },
  { to: '/admin/apps', key: 'apps' },
  { to: '/admin/audit', key: 'audit' },
] as const

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

  if (!isReady) return null

  return (
    <div className="mx-auto flex w-full max-w-5xl flex-col gap-6 px-6 py-10">
      <h1 className="text-2xl font-semibold tracking-tight">{t('nav.admin')}</h1>
      <nav className="flex gap-1 overflow-x-auto border-b border-border">
        {TABS.map((tab) => (
          <Link
            key={tab.to}
            to={tab.to}
            activeOptions={{ exact: tab.to === '/admin' }}
            className={cn('shrink-0 whitespace-nowrap px-3 py-2 text-sm text-muted-foreground hover:text-foreground')}
            activeProps={{ className: 'border-b-2 border-primary text-foreground font-medium' }}
          >
            {t(`admin.tabs.${tab.key}`)}
          </Link>
        ))}
      </nav>
      <Outlet />
    </div>
  )
}