<template>
  <div class="challenge-page min-h-screen bg-sky-dark relative">
    <!-- Skip button (always visible) -->
    <button
      v-if="!puzzleCompleted"
      type="button"
      class="absolute top-4 right-4 text-sky-text/60 hover:text-sky-text text-sm font-ui underline z-10"
      :class="{ 'text-sky-accent': hintsUsed >= 3 }"
      @click="skipChallenge"
    >
      {{ $t('challenge.skip') }}
    </button>

    <!-- Introduction -->
    <Transition name="fade" mode="out-in">
      <div
        v-if="showIntro"
        key="intro"
        class="flex flex-col items-center justify-center min-h-screen p-8"
      >
        <div class="max-w-lg text-center">
          <div class="w-24 h-24 mx-auto mb-6 bg-sky-accent/20 rounded-full flex items-center justify-center">
            <span class="text-4xl" aria-hidden="true">?</span>
          </div>

          <h1 class="text-3xl font-ui font-bold text-sky-text mb-4">
            {{ $t('challenge.title') }}
          </h1>

          <p class="font-narrative text-xl text-sky-text/60 mb-8">
            {{ $t('challenge.intro') }}
          </p>

          <button
            type="button"
            class="px-8 py-3 bg-sky-accent text-white font-ui font-semibold rounded-lg hover:bg-sky-accent/90 transition-colors"
            @click="startPuzzle"
          >
            {{ $t('challenge.accept') }}
          </button>
        </div>
      </div>

      <!-- Puzzle -->
      <div
        v-else-if="!puzzleCompleted"
        key="puzzle"
        class="flex flex-col items-center justify-center min-h-screen p-8"
      >
        <div class="max-w-2xl w-full">
          <h2 class="text-xl font-ui font-bold text-sky-text mb-2 text-center">
            {{ $t('challenge.puzzleTitle') }}
          </h2>

          <p class="text-sky-text/60 text-center mb-8">
            {{ $t('challenge.puzzleInstruction') }}
          </p>

          <FeatureCodePuzzle
            :hints-used="hintsUsed"
            @solved="handlePuzzleSolved"
            @hint-used="useHint"
          />
        </div>
      </div>

      <!-- Success -->
      <div
        v-else
        key="success"
        class="flex flex-col items-center justify-center min-h-screen p-8"
      >
        <FeatureChallengeSuccess />
      </div>
    </Transition>
  </div>
</template>

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

const router = useRouter()
const progressionStore = useProgressionStore()
const localePath = useLocalePath()

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

// States
const showIntro = ref(true)
const puzzleCompleted = ref(false)
const hintsUsed = ref(0)

function startPuzzle() {
  showIntro.value = false
}

function handlePuzzleSolved() {
  puzzleCompleted.value = true
  progressionStore.completeChallenge()

  // Wait for animation then navigate
  setTimeout(() => {
    navigateTo(localePath('/revelation'))
  }, 3000)
}

function skipChallenge() {
  // Skip does not mark as completed
  navigateTo(localePath('/revelation'))
}

function useHint() {
  hintsUsed.value++
}
</script>

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

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
