<template>
  <div
    class="intro-sequence cursor-pointer"
    tabindex="0"
    @click="handleInteraction"
    @keydown="handleKeydown"
  >
    <!-- Avatar du Bug -->
    <div class="mb-8">
      <img
        src="/images/bug/bug-stage-1.svg"
        alt="Le Bug"
        class="w-32 h-32 mx-auto"
        :class="{ 'animate-float': !reducedMotion }"
      />
    </div>

    <!-- Texte avec typewriter -->
    <div class="bg-sky-dark-50/80 backdrop-blur rounded-xl p-8 border border-sky-dark-100">
      <p class="font-narrative text-xl md:text-2xl text-sky-text leading-relaxed min-h-[4rem]">
        {{ displayedText }}
        <span
          v-if="isTyping"
          class="inline-block w-0.5 h-6 bg-sky-accent ml-1"
          :class="{ 'animate-blink': !reducedMotion }"
        />
      </p>

      <!-- Indication pour skip -->
      <p
        v-if="isTyping"
        class="text-sm text-sky-text/50 mt-4 font-ui"
      >
        {{ $t('narrator.clickToSkip') }}
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  text: string
}>()

const emit = defineEmits<{
  complete: []
  skip: []
}>()

const reducedMotion = useReducedMotion()
const textRef = computed(() => props.text)
const { displayedText, isTyping, skip, start } = useTypewriter(textRef, { speed: 35 })

// Démarrer le typewriter quand le texte change
watch(() => props.text, (newText) => {
  if (newText) {
    start()
  }
}, { immediate: true })

// Watcher pour détecter quand le texte est complet
watch(isTyping, (typing) => {
  if (!typing && displayedText.value === props.text) {
    emit('complete')
  }
})

function handleInteraction() {
  if (isTyping.value) {
    skip()
    emit('skip')
  }
}

function handleKeydown(e: KeyboardEvent) {
  if (e.code === 'Space' || e.code === 'Enter') {
    e.preventDefault()
    handleInteraction()
  }
}
</script>

<style scoped>
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.animate-blink {
  animation: blink 1s infinite;
}

.intro-sequence:focus {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .animate-float,
  .animate-blink {
    animation: none;
  }
}
</style>
