import { createFileRoute, useNavigate } from '@tanstack/react-router'
import { useEffect } from 'react'
import { m } from '@/i18n/messages'
import { useLocale } from '@/i18n/config'
import { useQueryClient } from '@tanstack/react-query'
import { Container, Paper, Stack, Text, Title, Button } from '@pikku/mantine/core'
import { signOut } from '../lib/auth'

function LogoutPage() {
  useLocale()
  const navigate = useNavigate()
  const qc = useQueryClient()

  useEffect(() => {
    signOut().then(() => qc.clear()).catch(() => qc.clear())
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return (
    <Container size="xs" py="xl">
      <Paper withBorder radius="md" p="lg">
        <Stack gap="md">
          <Title order={2}>{m.auth_logout_title()}</Title>
          <Text size="sm" c="dimmed">{m.auth_logout_subtitle()}</Text>
          <Button onClick={() => navigate({ to: '/login' })}>
            {m.auth_logout_back_to_login()}
          </Button>
        </Stack>
      </Paper>
    </Container>
  )
}

export const Route = createFileRoute('/logout')({
  component: LogoutPage,
})