import { createFileRoute, Link, useNavigate } from '@tanstack/react-router'
import { useQuery } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
import { LoginForm } from '@/features/auth/LoginForm'
import { fetchRegistrationStatus } from '@/features/auth/api'
import { useRequireGuest } from '@/features/auth/guards'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/shared/ui/card'

export const Route = createFileRoute('/login')({ component: LoginPage })

function LoginPage() {
  useRequireGuest()
  const { t } = useTranslation()
  const navigate = useNavigate()

  const { data: registration } = useQuery({
    queryKey: ['auth', 'registration'],
    queryFn: fetchRegistrationStatus,
  })

  return (
    <div className="mx-auto max-w-sm py-8">
      <Card>
        <CardHeader>
          <CardTitle>{t('auth.loginTitle')}</CardTitle>
          <CardDescription>{t('auth.loginSubtitle')}</CardDescription>
        </CardHeader>
        <CardContent>
          <LoginForm onSuccess={() => void navigate({ to: '/dashboard' })} />
          {registration?.enabled && (
            <p className="mt-4 text-center text-sm text-muted-foreground">
              {t('auth.noAccount')}{' '}
              <Link to="/register" className="text-primary hover:underline">
                {t('nav.register')}
              </Link>
            </p>
          )}
        </CardContent>
      </Card>
    </div>
  )
}