<script setup lang="ts">
import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
import { themeConfig } from '@themeConfig'
import { apiClient } from '@/lib/axios'
import { useAuthStore } from '@/stores/useAuthStore'

definePage({
  meta: {
    layout: 'blank',
    public: true,
  },
})

const route = useRoute()
const authStore = useAuthStore()

const isVerifying = ref(true)
const success = ref(false)
const errorMessage = ref('')

onMounted(async () => {
  const token = route.query.token as string
  if (!token) {
    errorMessage.value = 'Geen verificatietoken gevonden.'
    isVerifying.value = false
    return
  }
  try {
    await apiClient.post('/verify-email-change', { token })
    success.value = true
    authStore.logout()
  }
  catch (error: unknown) {
    const ax = error as { response?: { data?: { errors?: Record<string, string[]>; message?: string } } }
    errorMessage.value = ax.response?.data?.errors?.token?.[0]
      ?? ax.response?.data?.errors?.new_email?.[0]
      ?? ax.response?.data?.message
      ?? 'Er is een fout opgetreden bij de verificatie.'
  }
  finally {
    isVerifying.value = false
  }
})
</script>

<template>
  <div class="auth-wrapper d-flex align-center justify-center pa-4 bg-surface" style="min-height: 100vh;">
    <div class="auth-logo d-flex align-center gap-x-3 position-absolute" style="inset-block-start: 2rem; inset-inline-start: 2.5rem;">
      <VNodeRenderer :nodes="themeConfig.app.logo" />
      <h1 class="auth-title">
        {{ themeConfig.app.title }}
      </h1>
    </div>

    <VCard
      flat
      :max-width="450"
      width="100%"
      class="pa-6"
    >
      <VCardText class="text-center">
        <template v-if="isVerifying">
          <VProgressCircular
            indeterminate
            color="primary"
            class="mb-4"
          />
          <p>E-mailadres wordt geverifieerd...</p>
        </template>

        <template v-else-if="success">
          <VIcon
            size="64"
            color="success"
            class="mb-4"
          >
            tabler-circle-check
          </VIcon>
          <h4 class="text-h5 mb-2">
            E-mailadres gewijzigd!
          </h4>
          <p class="text-body-2 text-medium-emphasis mb-4">
            Je e-mailadres is succesvol gewijzigd.
            Log opnieuw in met je nieuwe e-mailadres.
          </p>
          <VBtn
            color="primary"
            :to="{ name: 'login' }"
          >
            Ga naar inloggen
          </VBtn>
        </template>

        <template v-else>
          <VIcon
            size="64"
            color="error"
            class="mb-4"
          >
            tabler-circle-x
          </VIcon>
          <h4 class="text-h5 mb-2">
            Verificatie mislukt
          </h4>
          <p class="text-body-2 text-medium-emphasis">
            {{ errorMessage }}
          </p>
        </template>
      </VCardText>
    </VCard>
  </div>
</template>

<style lang="scss">
@use "@core/scss/template/pages/page-auth";
</style>
