<template>
  <div class="revelation-page min-h-screen bg-sky-dark flex flex-col items-center justify-center p-8">
    <!-- Transition phase -->
    <Transition name="fade" mode="out-in">
      <div
        v-if="currentPhase === 'transition'"
        key="transition"
        class="text-center"
      >
        <div class="animate-pulse text-4xl mb-4" aria-hidden="true">...</div>
        <p class="text-sky-text/60 font-narrative">{{ $t('revelation.loading') }}</p>
      </div>

      <!-- Code World phase -->
      <div
        v-else-if="currentPhase === 'codeworld'"
        key="codeworld"
        class="text-center"
      >
        <FeatureCodeWorld @complete="advancePhase" />
      </div>

      <!-- Avatar and message phase -->
      <div
        v-else-if="currentPhase === 'avatar' || currentPhase === 'message' || currentPhase === 'complete'"
        key="complete"
        class="text-center max-w-2xl"
      >
        <!-- Avatar -->
        <div class="relative mb-8">
          <div
            class="w-32 h-32 mx-auto bg-gradient-to-br from-sky-accent to-amber-500 rounded-full flex items-center justify-center shadow-xl shadow-sky-accent/30"
            :class="{ 'animate-bounce-in': !reducedMotion }"
          >
            <span class="text-5xl text-white font-ui font-bold">C</span>
          </div>
          <!-- Celebration particles -->
          <div v-if="!reducedMotion" class="absolute inset-0">
            <span
              v-for="i in 8"
              :key="i"
              class="celebration-particle"
              :style="{ '--delay': `${i * 0.1}s`, '--angle': `${i * 45}deg` }"
            />
          </div>
        </div>

        <!-- Bug says -->
        <p class="text-lg text-sky-accent font-narrative mb-2">
          {{ $t('revelation.bugSays') }}
        </p>

        <!-- Main message -->
        <h1 class="text-4xl md:text-5xl font-ui font-bold text-sky-text mb-4">
          {{ $t('revelation.foundMe') }}
        </h1>

        <p class="text-sky-text/60 font-narrative text-lg mb-8">
          {{ $t('revelation.message') }}
        </p>

        <!-- Signature -->
        <p class="text-sky-accent font-narrative italic mb-12">
          - Celian
        </p>

        <!-- CTA -->
        <NuxtLink
          :to="localePath('/contact')"
          class="inline-flex items-center gap-3 px-8 py-4 bg-sky-accent text-white font-ui font-semibold rounded-xl hover:opacity-90 transition-opacity"
        >
          {{ $t('revelation.contactCta') }}
          <span aria-hidden="true">-></span>
        </NuxtLink>
      </div>
    </Transition>

    <!-- Screen reader description -->
    <div class="sr-only" role="status" aria-live="polite">
      {{ $t('revelation.srDescription') }}
    </div>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'adventure',
})

const localePath = useLocalePath()
const progressionStore = useProgressionStore()
const reducedMotion = usePreferredReducedMotion()

// Check if contact is unlocked
onMounted(() => {
  if (!progressionStore.contactUnlocked) {
    navigateTo(localePath('/'))
  }
})

// Phases
type Phase = 'transition' | 'codeworld' | 'avatar' | 'message' | 'complete'
const currentPhase = ref<Phase>('transition')

function advancePhase() {
  const phases: Phase[] = ['transition', 'codeworld', 'avatar', 'message', 'complete']
  const currentIndex = phases.indexOf(currentPhase.value)

  if (currentIndex < phases.length - 1) {
    currentPhase.value = phases[currentIndex + 1]
  }
}

// Start sequence
onMounted(() => {
  if (reducedMotion.value === 'reduce') {
    // Static version
    currentPhase.value = 'complete'
  } else {
    // Animated version
    setTimeout(() => {
      advancePhase()
    }, 1500)
  }
})
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

@keyframes bounce-in {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.animate-bounce-in {
  animation: bounce-in 0.6s ease-out;
}

.celebration-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--sky-accent, #fa784f);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  animation: explode 1s ease-out forwards;
  animation-delay: var(--delay, 0s);
}

@keyframes explode {
  0% {
    transform: translate(-50%, -50%) rotate(var(--angle)) translateY(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-80px);
    opacity: 0;
  }
}
</style>
