<script setup lang="ts">
import { CheckCircle } from 'lucide-vue-next'
import { ref, onMounted, onUnmounted } from 'vue'

// Countdown state (3 seconds)
const countdown = ref(3)
let countdownTimer: NodeJS.Timeout | null = null

/**
 * Start countdown and auto-redirect to homepage after 3 seconds
 */
onMounted(() => {
  countdownTimer = setInterval(() => {
    countdown.value--

    if (countdown.value <= 0) {
      // Redirect to homepage
      navigateTo('/')
    }
  }, 1000) // Update every 1 second
})

/**
 * Cleanup timer on component unmount
 */
onUnmounted(() => {
  if (countdownTimer) {
    clearInterval(countdownTimer)
  }
})

/**
 * Handle "Skip" button click - redirect immediately
 */
function goToHomepage() {
  navigateTo('/')
}
</script>

<template>
  <NuxtLayout name="default">
    <div class="flex items-center justify-center min-h-[60vh] px-4">
      <div class="max-w-md w-full text-center">
        <!-- Success Icon -->
        <div class="mb-6 flex justify-center">
          <CheckCircle class="w-20 h-20 text-green-500" stroke-width="1.5" />
        </div>

        <!-- Heading -->
        <h1 class="text-3xl font-bold mb-3 text-white">
          Erfolgreich abgemeldet
        </h1>

        <!-- Message with countdown -->
        <p class="text-lg text-white/80 mb-8">
          Du wirst in <span class="font-semibold text-experimenta-accent">{{ countdown }}</span> Sekunde{{ countdown !== 1 ? 'n' : '' }} zur Startseite weitergeleitet...
        </p>

        <!-- Skip Button -->
        <Button
          variant="experimenta"
          size="experimenta"
          @click="goToHomepage"
          class="min-w-[200px]"
        >
          Jetzt zur Startseite
        </Button>
      </div>
    </div>
  </NuxtLayout>
</template>
