<template>
  <q-page padding class="flex flex-center">
    <div style="max-width:520px;text-align:center">
      <q-icon name="check_circle" color="positive" size="80px" />
      <div class="text-h5 text-weight-bold q-mt-lg">Paiement recu!</div>
      <div class="text-body1 text-grey-7 q-mt-sm">
        Merci pour votre paiement. Votre facture sera mise a jour sous peu.
      </div>
      <div v-if="invoiceName" class="text-body2 text-grey-6 q-mt-sm">
        Facture: <strong>{{ invoiceName }}</strong>
      </div>

      <!-- Authenticated: show full navigation -->
      <div v-if="auth.authenticated" class="q-mt-xl q-gutter-sm">
        <q-btn v-if="invoiceName" color="primary" unelevated label="Voir la facture" icon="receipt"
          @click="$router.push(`/invoices/${invoiceName}`)" />
        <q-btn outline color="primary" label="Mes factures" icon="list" @click="$router.push('/invoices')" />
        <q-btn flat color="grey-7" label="Accueil" icon="home" @click="$router.push('/')" />
      </div>

      <!-- Expired token or no auth: show login prompt -->
      <div v-else class="q-mt-xl">
        <q-banner rounded class="bg-blue-1 q-mb-md">
          <template #avatar><q-icon name="info" color="primary" /></template>
          <div class="text-body2">
            Pour acceder a votre compte et voir vos factures, connectez-vous ou demandez un lien d'acces.
          </div>
        </q-banner>
        <div class="q-gutter-sm">
          <q-btn color="primary" unelevated label="Recevoir mon lien d'acces" icon="login"
            @click="goToLogin" />
        </div>
      </div>
    </div>
  </q-page>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { useMagicToken } from 'src/composables/useMagicToken'

const route = useRoute()
const router = useRouter()
const auth = useMagicToken()
const invoiceName = route.query.invoice || ''

function goToLogin () {
  router.push({ name: 'login' })
}
</script>
