<template>
  <div class="page-container" :class="{ 'embedded-dialog-view': embedded }">
    <h1 v-if="!embedded">{{ $t('settings.personalSettings') }}</h1>
    
    <div class="settings-container">
      <div class="settings-section card">
        <h2 class="section-title">{{ $t('settings.language') }}</h2>
        <p class="section-description">{{ $t('settings.languageDescription') }}</p>
        
        <div class="form-group">
          <label for="language-select">{{ $t('settings.selectLanguage') }}</label>
          <select 
            id="language-select"
            v-model="selectedLanguage" 
            @change="changeLanguage"
            class="language-select"
          >
            <option 
              v-for="(name, code) in availableLanguages" 
              :key="code" 
              :value="code"
            >
              {{ name }}
            </option>
          </select>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
  name: 'PersonalSettings',
  props: {
    embedded: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selectedLanguage: this.$i18n.locale,
      languageCodes: ['de', 'en-GB', 'en-US', 'en-AU', 'de-CH', 'fr', 'es', 'it', 'pl', 'ja', 'zh', 'tl', 'th', 'fil', 'ceb']
    };
  },
  computed: {
    ...mapGetters(['language']),
    availableLanguages() {
      const languages = {};
      this.languageCodes.forEach(code => {
        languages[code] = this.$t(`languages.${code}`);
      });
      return languages;
    }
  },
  mounted() {
    // Set initial language from store
    if (this.language) {
      this.selectedLanguage = this.language;
      this.$i18n.locale = this.language;
    } else {
      this.selectedLanguage = this.$i18n.locale;
    }
  },
  methods: {
    ...mapActions(['setLanguage']),
    changeLanguage() {
      this.$i18n.locale = this.selectedLanguage;
      this.setLanguage(this.selectedLanguage);
      // Sprache wurde geändert - Seite wird automatisch neu geladen
      console.log(this.$t('settings.languageChanged'));
    }
  }
};
</script>

<style scoped>
.page-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}
.page-container.embedded-dialog-view {
  max-width: none;
  padding: 0;
}

h1 {
  color: var(--text-color, #333);
  margin-bottom: 2rem;
}

.settings-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.settings-section {
  background: white;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.section-title {
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: var(--primary-color, #007bff);
  font-size: 1.5rem;
}

.section-description {
  margin-bottom: 1.5rem;
  color: #666;
  font-size: 0.95rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #555;
}

.language-select {
  width: 100%;
  max-width: 400px;
  padding: 0.75rem;
  border: 1px solid var(--border-color, #ddd);
  border-radius: var(--border-radius, 4px);
  font-size: 1rem;
  background: white;
  color: var(--text-color, #333);
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.language-select:hover {
  border-color: var(--primary-color, #007bff);
}

.language-select:focus {
  outline: none;
  border-color: var(--primary-color, #007bff);
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

@media (max-width: 768px) {
  .page-container {
    padding: 1rem;
  }
  
  .settings-section {
    padding: 1.5rem;
  }
  
  .language-select {
    max-width: 100%;
  }
}
</style>
