<script setup lang="ts">
import { useAuthStore } from '~/stores/auth';

definePageMeta({ public: true, layout: false });

const route = useRoute();
const authStore = useAuthStore();
const error = ref<string | null>(null);

onMounted(async () => {
  const userId = route.query.userId as string | undefined;
  const secret = route.query.secret as string | undefined;

  if (!userId || !secret) {
    error.value = 'Invalid magic link — missing parameters.';
    return;
  }

  try {
    await authStore.magicURLLogin(userId, secret);
    await navigateTo('/');
  } catch (e) {
    console.error(e);
    error.value = 'Login failed. The link may have expired.';
  }
});
</script>

<template>
  <q-page class="flex flex-center">
    <div v-if="error" class="text-negative text-body1">{{ error }}</div>
    <q-spinner v-else color="primary" size="50px" />
  </q-page>
</template>
