<template>
  <UCard variant="subtle">
    <template #header>
      <div class="text-center">
        <UIcon name="i-lucide-lock" class="mx-auto h-16 w-16 text-primary-500 mb-6" />
        <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">
          {{ $t('auth.welcome') }}
        </h1>
        <p class="text-gray-600 dark:text-gray-400">
          {{ $t('auth.redirectMessage') }}
        </p>
      </div>
    </template>

    <div class="text-center">
      <UButton color="primary" size="xl" icon="i-lucide-log-in" @click="handleSignIn">
        {{ $t('auth.signIn') }}
      </UButton>
    </div>

    <template #footer>
      <div class="text-center text-xs text-gray-500">
        {{ $t('auth.termsAgreement') }}
      </div>
    </template>
  </UCard>
</template>

<script setup lang="ts">
definePageMeta({ auth: false, layout: 'auth' })

const { t: $t } = useI18n()
const { loggedIn, openInPopup } = useUserSession()

useSeoMeta({ title: $t('auth.login') })

watch(loggedIn, (isLoggedIn) => {
  if (isLoggedIn) {
    navigateTo('/')
  }
})

function handleSignIn() {
  openInPopup('/auth/keycloak')
}
</script>
