import { createRootRouteWithContext, Link, Outlet } from '@tanstack/react-router'
import type { QueryClient } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
import { LanguageSwitch } from '@nstart/ui'
import { AuthBadge } from '@/auth/AuthBadge'

export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()({
  component: RootLayout,
})

const LANG_OPTIONS = [
  { id: 'ru-RU', label: 'RU' },
  { id: 'en-US', label: 'EN' },
]

function RootLayout() {
  const { t, i18n } = useTranslation()
  return (
    <div className="min-h-full flex flex-col bg-white">
      <header className="border-b border-regolith bg-white">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-3 sm:py-4 flex items-center flex-wrap gap-3 sm:gap-6">
          <Link to="/" className="font-primary text-base sm:text-lg text-ultramarain">
            {t('app.title')}
          </Link>
          <nav className="flex gap-4 text-sm">
            <Link
              to="/dictionaries"
              className="text-carbon hover:text-ultramarain"
              activeProps={{ className: 'text-ultramarain font-medium' }}
            >
              {t('nav.dictionaries')}
            </Link>
            <Link
              to="/audit"
              className="text-carbon hover:text-ultramarain"
              activeProps={{ className: 'text-ultramarain font-medium' }}
            >
              {t('nav.audit')}
            </Link>
            <Link
              to="/outbox"
              className="text-carbon hover:text-ultramarain"
              activeProps={{ className: 'text-ultramarain font-medium' }}
            >
              {t('nav.outbox')}
            </Link>
            <Link
              to="/webhooks"
              className="text-carbon hover:text-ultramarain"
              activeProps={{ className: 'text-ultramarain font-medium' }}
            >
              {t('nav.webhooks')}
            </Link>
          </nav>
          <div className="ml-auto flex items-center gap-3">
            <LanguageSwitch
              value={i18n.language}
              options={LANG_OPTIONS}
              onChange={(id) => i18n.changeLanguage(id)}
            />
            <AuthBadge />
          </div>
        </div>
      </header>
      <main className="flex-1 max-w-6xl mx-auto w-full px-4 sm:px-6 py-4 sm:py-8">
        <Outlet />
      </main>
    </div>
  )
}