<template>
  <div class="flex items-center justify-center min-h-screen">
    <div class="text-center">
      <UIcon
        name="i-heroicons-arrow-path"
        class="w-10 h-10 animate-spin mx-auto mb-4 text-primary"
      />
      <h2 class="text-xl font-semibold mb-2">
        {{ t('auth.social.starting') }}
      </h2>
      <p class="text-muted">
        {{ t('auth.social.pleaseWait') }}
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
const { t } = useI18n()
const route = useRoute()
const router = useRouter()
const { signInSocial } = useAuth()
const log = useLogger('Start Social')

onMounted(async () => {
  try {
    const provider = (route.query.provider as string) || ''
    if (!provider) throw new Error('Missing provider')
    const callbackURL = `${window.location.origin}/auth/magic-link-callback`
    await signInSocial({ provider, callbackURL })
  } catch (e) {
    log.error('Failed to start OAuth', e)
    await router.replace('/auth')
  }
})
</script>
