<script setup lang="ts">
import { useAuth0 } from "@auth0/auth0-vue";
import { onMounted, ref } from "vue";

const router = useRouter();
const auth0 = useAuth0();
const errorMessage = ref<string | null>(null);

onMounted(async () => {
  try {
    const result = await auth0.handleRedirectCallback();
    const target = result?.appState?.target ?? "/";
    await router.replace(target);
  } catch (error) {
    errorMessage.value = error instanceof Error ? error.message : String(error);
  }
});
</script>

<template>
  <main
    class="flex min-h-screen flex-col items-center justify-center bg-slate-950 px-4 text-center text-slate-100"
  >
    <div class="max-w-sm space-y-4">
      <h1 class="text-lg font-semibold">Signing you in…</h1>
      <p class="text-sm text-slate-400">
        Please wait while we complete authentication and return you to your work.
      </p>
      <p v-if="errorMessage" class="rounded-md border border-rose-500/40 bg-rose-500/10 px-3 py-2 text-sm text-rose-200">
        {{ errorMessage }}
      </p>
      <div v-else class="mx-auto h-12 w-12 animate-spin rounded-full border-4 border-slate-800 border-t-sky-500" />
    </div>
  </main>
</template>
