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

definePage({
  name: 'register-success',
  meta: {
    layout: 'portal',
    requiresAuth: false,
    navMode: 'platform',
  },
})

const route = useRoute('register-success')
const authStore = useAuthStore()

const eventName = computed(() => (route.query.event as string) || 'het evenement')
const bannerUrl = computed(() => (route.query.banner as string) || null)
const isAuthenticated = computed(() => route.query.authenticated === '1' || authStore.isAuthenticated)
</script>

<template>
  <div>
    <!-- Event banner (if available) -->
    <VImg
      v-if="bannerUrl"
      :src="bannerUrl"
      height="180"
      cover
      gradient="to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.4)"
    >
      <div class="d-flex align-center justify-center fill-height">
        <h3 class="text-h5 text-white font-weight-bold">
          {{ eventName }}
        </h3>
      </div>
    </VImg>

    <!-- Fallback header -->
    <div
      v-else
      class="d-flex align-center justify-center pa-6"
      style="background: rgb(var(--v-theme-primary));"
    >
      <h3 class="text-h5 text-white font-weight-bold">
        {{ eventName }}
      </h3>
    </div>

    <VContainer style="max-inline-size: 600px;">
      <VCard
        class="text-center pa-8 pa-sm-12 mt-n6"
        variant="flat"
        style="position: relative; z-index: 1;"
      >
        <VAvatar
          size="100"
          color="success"
          variant="tonal"
          class="mb-6"
        >
          <VIcon
            icon="tabler-circle-check"
            size="60"
          />
        </VAvatar>

        <h4 class="text-h4 mb-4">
          Bedankt voor je aanmelding!
        </h4>

        <p class="text-body-1 text-medium-emphasis mb-2">
          Je aanmelding bij <strong>{{ eventName }}</strong> is succesvol ontvangen.
        </p>

        <p class="text-body-1 text-medium-emphasis mb-2">
          Je aanmelding wordt beoordeeld door het organisatieteam.
        </p>

        <p class="text-body-2 text-disabled mb-8">
          Je ontvangt een e-mail zodra je aanmelding is goedgekeurd.
          Daarin vind je een link om je account te activeren.
        </p>

        <div class="d-flex flex-wrap justify-center gap-4">
          <VBtn
            v-if="isAuthenticated"
            to="/evenementen"
            color="primary"
            prepend-icon="tabler-calendar-event"
          >
            Ga naar je evenementen
          </VBtn>

          <VBtn
            v-else
            to="/"
            color="primary"
            variant="tonal"
            prepend-icon="tabler-home"
          >
            Terug naar startpagina
          </VBtn>
        </div>
      </VCard>
    </VContainer>
  </div>
</template>
