<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>

      <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 isValid = computed(() => name.value.trim().length > 0 && name.value.length <= 12);

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