<template>
  <div class="flex items-center justify-center min-h-screen">
    <div class="text-center max-w-md px-4">
      <UIcon
        name="i-heroicons-device-phone-mobile"
        class="w-16 h-16 mx-auto mb-4 text-primary"
      />
      <h2 class="text-xl font-semibold mb-2">
        Mobile App Required
      </h2>
      <p class="text-muted mb-4">
        This link is designed to open in the mobile app. If you have the app installed, please try again.
      </p>
      <p class="text-sm text-muted mb-6">
        If you don't have the app installed or prefer to continue in your browser, click the button below.
      </p>

      <UButton
        tag="a"
        :href="webUrl"
        color="primary"
      >
        Continue in Browser
      </UButton>
    </div>
  </div>
</template>

<script setup lang="ts">
/**
 * Fallback page for /app/open-magic-link
 * This is shown if the App Link wasn't intercepted by the mobile app
 * (e.g., app not installed, or user on desktop)
 */

const route = useRoute()

// Get the verification URL from query params
const verificationUrl = route.query.url as string
const webUrl = verificationUrl || '/auth'
</script>
