<template>
  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4">
    <PixelFrame class="w-full max-w-md bg-[#1b1026] p-6 flex flex-col items-center gap-6" title="NEW ADVENTURE">
      
      <div class="text-center">
        <h2 class="text-[#99e550] text-xl font-bold mb-2 tracking-widest">歡迎來到電子雞世界</h2>
        <p class="text-[#8f80a0] text-sm">請選擇您的夥伴並取個名字</p>
      </div>

      <!-- Species Selection -->
      <div class="flex gap-4 w-full justify-center">
        <button 
          @click="species = 'cat'"
          class="flex-1 p-4 border-2 flex flex-col items-center gap-2 transition-all relative group"
          :class="species === 'cat' ? 'border-[#99e550] bg-[#2b193f]' : 'border-[#4a3b5e] bg-[#0f0816] hover:bg-[#1b1026]'"
        >
          <div class="text-2xl">🐱</div>
          <span class="font-bold font-mono" :class="species === 'cat' ? 'text-[#99e550]' : 'text-[#8f80a0]'">貓咪 (Cat)</span>
          <div v-if="species === 'cat'" class="absolute top-1 right-1 w-2 h-2 bg-[#99e550]"></div>
        </button>

        <button 
          @click="species = 'dog'"
          class="flex-1 p-4 border-2 flex flex-col items-center gap-2 transition-all relative group"
          :class="species === 'dog' ? 'border-[#99e550] bg-[#2b193f]' : 'border-[#4a3b5e] bg-[#0f0816] hover:bg-[#1b1026]'"
        >
          <div class="text-2xl">🐶</div>
          <span class="font-bold font-mono" :class="species === 'dog' ? 'text-[#99e550]' : 'text-[#8f80a0]'">狗狗 (Dog)</span>
          <div v-if="species === 'dog'" class="absolute top-1 right-1 w-2 h-2 bg-[#99e550]"></div>
        </button>
      </div>

      <div class="w-full">
        <input 
          v-model="name"
          type="text" 
          placeholder="輸入名字..." 
          class="w-full bg-[#0f0816] border-2 border-[#4a3b5e] text-[#e0d8f0] p-3 text-center focus:border-[#9fd75b] focus:outline-none transition-colors placeholder-[#4a3b5e]"
          @keyup.enter="submit"
          maxlength="12"
        />
        <div class="text-right mt-1">
          <span class="text-[10px]" :class="name.length > 10 ? 'text-[#d95763]' : 'text-[#4a3b5e]'">
            {{ name.length }}/12
          </span>
        </div>
      </div>

      <PixelButton 
        class="w-full py-3 text-lg"
        :disabled="!isValid"
        @click="submit"
      >
        開始冒險 (START)
      </PixelButton>

    </PixelFrame>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import PixelFrame from './PixelFrame.vue';
import PixelButton from './PixelButton.vue';

const emit = defineEmits(['submit']);

const name = ref('');
const species = ref<'cat' | 'dog'>('cat');

const isValid = computed(() => name.value.trim().length > 0 && name.value.length <= 12);

const submit = () => {
  if (isValid.value) {
    emit('submit', { name: name.value.trim(), species: species.value });
  }
};
</script>
