<template>
  <div class="hero-selector">
    <h2 class="text-2xl md:text-3xl font-narrative text-sky-text text-center mb-8">
      {{ $t('hero.question') }}
    </h2>

    <div
      role="radiogroup"
      :aria-label="$t('hero.select_label')"
      class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-3xl mx-auto"
      @keydown="handleKeydown"
    >
      <button
        v-for="(hero, index) in heroes"
        :key="hero.id"
        :ref="el => { if (el) cardRefs[index] = el as HTMLElement }"
        role="radio"
        :aria-checked="modelValue === hero.id"
        :tabindex="modelValue === hero.id || (!modelValue && index === 0) ? 0 : -1"
        :class="[
          'p-6 rounded-xl border-2 transition-all duration-200 text-left',
          'focus:outline-none focus:ring-2 focus:ring-sky-accent focus:ring-offset-2 focus:ring-offset-sky-dark',
          modelValue === hero.id
            ? 'border-sky-accent bg-sky-accent/5 scale-105'
            : 'border-sky-text/20 hover:border-sky-text/40',
        ]"
        @click="selectHero(hero.id)"
      >
        <div class="text-4xl mb-4">{{ hero.icon }}</div>
        <h3 class="text-xl font-ui font-semibold text-sky-text mb-2">
          {{ $t(hero.nameKey) }}
        </h3>
        <p class="text-sky-text/70 font-narrative text-sm">
          {{ $t(hero.descriptionKey) }}
        </p>
      </button>
    </div>

    <div class="flex justify-center gap-4 mt-8">
      <button
        class="px-6 py-2 text-sky-text/70 hover:text-sky-text font-ui transition-colors"
        @click="$emit('back')"
      >
        {{ $t('common.back') }}
      </button>
      <button
        :disabled="!modelValue"
        :class="[
          'px-8 py-3 rounded-lg font-ui font-semibold transition-all',
          modelValue
            ? 'bg-sky-accent text-sky-dark hover:opacity-90'
            : 'bg-sky-text/20 text-sky-text/50 cursor-not-allowed',
        ]"
        @click="confirmSelection"
      >
        {{ $t('common.continue') }}
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
export type HeroType = 'recruteur' | 'client' | 'dev'

interface Hero {
  id: HeroType
  nameKey: string
  descriptionKey: string
  icon: string
}

const props = defineProps<{
  modelValue: HeroType | null
}>()

const emit = defineEmits<{
  'update:modelValue': [value: HeroType]
  'confirm': []
  'back': []
}>()

const cardRefs = ref<HTMLElement[]>([])

const heroes: Hero[] = [
  { id: 'recruteur', nameKey: 'hero.recruteur.name', descriptionKey: 'hero.recruteur.description', icon: '👔' },
  { id: 'client', nameKey: 'hero.client.name', descriptionKey: 'hero.client.description', icon: '💼' },
  { id: 'dev', nameKey: 'hero.dev.name', descriptionKey: 'hero.dev.description', icon: '💻' },
]

const selectHero = (id: HeroType) => {
  emit('update:modelValue', id)
}

const confirmSelection = () => {
  if (props.modelValue) {
    emit('confirm')
  }
}

const handleKeydown = (e: KeyboardEvent) => {
  const currentIndex = heroes.findIndex(h => h.id === props.modelValue)
  let newIndex = currentIndex

  if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
    e.preventDefault()
    newIndex = (currentIndex + 1) % heroes.length
  } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
    e.preventDefault()
    newIndex = (currentIndex - 1 + heroes.length) % heroes.length
  } else if (e.key === 'Enter') {
    confirmSelection()
    return
  }

  if (newIndex !== currentIndex) {
    emit('update:modelValue', heroes[newIndex].id)
    nextTick(() => cardRefs.value[newIndex]?.focus())
  }
}
</script>
