<template>
  <div class="login-content">
    <form @submit.prevent="handleSubmit">
      <div class="form-row">
        <label>{{ $t('label_nick') }}</label>
        <input v-model="nickname" type="text" required minlength="3" />
      </div>
      
      <div class="form-row">
        <label>{{ $t('label_gender') }}</label>
        <select v-model="gender" required>
          <option value="">{{ $t('label_gender') }}</option>
          <option value="F">{{ $t('gender_female') }}</option>
          <option value="M">{{ $t('gender_male') }}</option>
          <option value="P">{{ $t('gender_pair') }}</option>
          <option value="TF">{{ $t('gender_trans_mf') }}</option>
          <option value="TM">{{ $t('gender_trans_fm') }}</option>
        </select>
      </div>
      
      <div class="form-row">
        <label>{{ $t('label_age') }}</label>
        <input v-model.number="age" type="number" required min="18" max="120" />
      </div>
      
      <div class="form-row">
        <label>{{ $t('label_country') }}</label>
        <select v-model="country" required>
          <option value="">{{ $t('label_country') }}</option>
          <option v-for="(code, name) in countries" :key="code" :value="name">
            {{ name }}
          </option>
        </select>
      </div>
      
      <div class="form-row">
        <button type="submit">{{ $t('button_start_chat') }}</button>
      </div>
    </form>
    
    <div class="welcome-message" v-html="$t('welcome')"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import axios from 'axios';
import { useChatStore } from '../stores/chat';
import { useI18n } from 'vue-i18n';
import countryTranslations from '../i18n/countries.json';

const { locale } = useI18n();
const chatStore = useChatStore();
const nickname = ref('');
const gender = ref('');
const age = ref(18);
const country = ref('');
const countriesRaw = ref({});

// Übersetzte Länderliste (sortiert)
const countries = computed(() => {
  const translated = {};
  const translations = countryTranslations[locale.value] || countryTranslations['en'] || {};
  
  for (const [englishName, code] of Object.entries(countriesRaw.value)) {
    // Verwende Übersetzung falls vorhanden, sonst englischen Namen
    translated[translations[englishName] || englishName] = code;
  }
  
  // Sortiere alphabetisch nach übersetztem Namen
  const sorted = {};
  Object.keys(translated).sort((a, b) => a.localeCompare(b, locale.value)).forEach(key => {
    sorted[key] = translated[key];
  });
  
  return sorted;
});

onMounted(async () => {
  try {
    const response = await axios.get('/api/countries');
    countriesRaw.value = response.data;
  } catch (error) {
    console.error('Fehler beim Laden der Länderliste:', error);
  }
});

function handleSubmit() {
  if (!nickname.value || nickname.value.trim().length < 3) {
    alert('Bitte gib einen gültigen Nicknamen ein (mindestens 3 Zeichen)');
    return;
  }
  
  if (!gender.value) {
    alert('Bitte wähle ein Geschlecht aus');
    return;
  }
  
  if (!age.value || age.value < 18) {
    alert('Du musst mindestens 18 Jahre alt sein');
    return;
  }
  
  if (!country.value) {
    alert('Bitte wähle ein Land aus');
    return;
  }
  
  // Finde den englischen Namen für das ausgewählte Land
  const translations = countryTranslations[locale.value] || countryTranslations['en'] || {};
  let englishCountryName = country.value;
  
  // Suche den englischen Namen, falls ein übersetzter Name verwendet wurde
  for (const [englishName, translatedName] of Object.entries(translations)) {
    if (translatedName === country.value) {
      englishCountryName = englishName;
      break;
    }
  }
  
  chatStore.login(nickname.value.trim(), gender.value, age.value, englishCountryName);
}
</script>

