<template>
  <div class="club-settings">
    <h1>{{ $t('clubSettings.title') }}</h1>

    <!-- Tab Navigation -->
    <div class="tab-navigation">
      <button 
        :class="['tab-button', { active: activeTab === 'settings' }]"
        @click="activeTab = 'settings'"
      >
        ⚙️ {{ $t('clubSettings.settings') }}
      </button>
      <button 
        :class="['tab-button', { active: activeTab === 'training-groups' }]"
        @click="activeTab = 'training-groups'"
      >
        👨‍👩‍👧‍👦 {{ $t('clubSettings.trainingGroups') }}
      </button>
      <button 
        :class="['tab-button', { active: activeTab === 'training-times' }]"
        @click="activeTab = 'training-times'"
      >
        🕐 {{ $t('clubSettings.trainingTimes') }}
      </button>
    </div>

    <!-- Settings Tab -->
    <div v-if="activeTab === 'settings'">
    <p v-if="!currentClub" class="hint hint-warning">{{ $t('clubSettings.noClubSelected') }}</p>
    <p v-else-if="loading" class="hint">{{ $t('common.loading') }}</p>
    <p v-else-if="loadError" class="hint hint-error">{{ loadError }}</p>
    <section v-if="currentClub && !loading" class="card">
      <h2>{{ $t('clubSettings.greetingText') }}</h2>
      <div class="greeting-grid">
        <textarea v-model="greeting" class="greeting-input" rows="10" :placeholder="$t('clubSettings.greetingPlaceholder')"></textarea>
        <div class="legend">
          <h3>{{ $t('clubSettings.placeholders') }}</h3>
          <ul>
            <li><code>{home}</code> {{ $t('clubSettings.homeTeam') }}</li>
            <li><code>{guest}</code> {{ $t('clubSettings.guestTeam') }}</li>
            <li><code>{homeplayers}</code> {{ $t('clubSettings.homePlayers') }}</li>
            <li><code>{guestplayers}</code> {{ $t('clubSettings.guestPlayers') }}</li>
          </ul>
        </div>
      </div>
      <p class="hint">{{ $t('clubSettings.greetingHint') }}</p>
    </section>

    <section v-if="currentClub && !loading" class="card">
      <h2>{{ $t('clubSettings.associationMemberNumber') }}</h2>
      <input v-model="associationMemberNumber" class="text-input" :placeholder="$t('clubSettings.associationMemberNumberPlaceholder')" />
    </section>

    <section v-if="currentClub && !loading" class="card">
      <h2>{{ $t('clubSettings.myTischtennisRankings') }}</h2>
      <p class="hint">{{ $t('clubSettings.myTischtennisRankingsHint') }}</p>
      <div class="rankings-row">
        <label class="checkbox-label">
          <input type="checkbox" v-model="autoFetchRankings" />
          {{ $t('clubSettings.autoFetchRankings') }}
        </label>
      </div>
      <div v-if="autoFetchRankings" class="rankings-fields">
        <div class="field-group">
          <label>{{ $t('clubSettings.myTischtennisFedNickname') }}</label>
          <input v-model="myTischtennisFedNickname" class="text-input" :placeholder="$t('clubSettings.myTischtennisFedNicknamePlaceholder')" />
        </div>
      </div>
      <p v-if="autoFetchRankings" class="hint">{{ $t('clubSettings.rankingsUsesAssociationNumber') }}</p>
    </section>

    <section v-if="currentClub && !loading" class="card actions-card">
      <div class="actions">
        <button class="btn btn-primary" @click="save">{{ $t('clubSettings.save') }}</button>
        <span v-if="saved" class="saved-hint">{{ $t('clubSettings.saved') }}</span>
      </div>
    </section>
    </div>
    <!-- End Settings Tab -->

    <!-- Training Groups Tab -->
    <div v-if="activeTab === 'training-groups'">
      <TrainingGroupsTab />
    </div>
    <!-- End Training Groups Tab -->

    <!-- Training Times Tab -->
    <div v-if="activeTab === 'training-times'">
      <TrainingTimesTab />
    </div>
    <!-- End Training Times Tab -->
  </div>
  </template>

<script>
import { mapGetters } from 'vuex';
import apiClient from '../apiClient';
import TrainingGroupsTab from '../components/TrainingGroupsTab.vue';
import TrainingTimesTab from '../components/TrainingTimesTab.vue';

export default {
  name: 'ClubSettings',
  components: {
    TrainingGroupsTab,
    TrainingTimesTab,
  },
  data() {
    return {
      activeTab: 'settings',
      greeting: '',
      associationMemberNumber: '',
      myTischtennisFedNickname: '',
      autoFetchRankings: false,
      saved: false,
      loading: false,
      loadError: null,
    };
  },
  computed: {
    ...mapGetters(['currentClub']),
  },
  watch: {
    currentClub: {
      handler(clubId) {
        if (clubId) this.loadClubSettings();
      },
      immediate: true,
    },
  },
  methods: {
    async loadClubSettings() {
      if (!this.currentClub) {
        this.greeting = '';
        this.associationMemberNumber = '';
        this.myTischtennisFedNickname = '';
        this.autoFetchRankings = false;
        this.loadError = null;
        return;
      }
      this.loadError = null;
      this.loading = true;
      try {
        const response = await apiClient.get(`/clubs/${this.currentClub}`);
        const club = response.data;
        this.greeting = club?.greetingText ?? '';
        this.associationMemberNumber = club?.associationMemberNumber ?? '';
        this.myTischtennisFedNickname = club?.myTischtennisFedNickname ?? '';
        this.autoFetchRankings = !!club?.autoFetchRankings;
      } catch (e) {
        this.loadError = this.$t('clubSettings.loadFailed');
        this.greeting = '';
        this.associationMemberNumber = '';
        this.myTischtennisFedNickname = '';
        this.autoFetchRankings = false;
      } finally {
        this.loading = false;
      }
    },
    async save() {
      if (!this.currentClub) {
        alert(this.$t('clubSettings.noClubSelected'));
        return;
      }
      try {
        await apiClient.put(`/clubs/${this.currentClub}/settings`, {
          greetingText: this.greeting,
          associationMemberNumber: this.associationMemberNumber,
          myTischtennisFedNickname: this.myTischtennisFedNickname || null,
          autoFetchRankings: this.autoFetchRankings,
        });
        this.saved = true;
        setTimeout(() => (this.saved = false), 1500);
      } catch (e) {
        this.saved = false;
        alert(this.$t('clubSettings.saveFailed'));
      }
    },
  },
};
</script>

<style scoped>
.club-settings { padding: 20px; }
.card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
  max-width: 800px;
}
.greeting-grid { display: grid; grid-template-columns: 1fr 280px; gap: 12px; align-items: start; }
.legend { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px; }
.legend h3 { margin: 0 0 8px 0; font-size: 0.95rem; color: #333; }
.legend ul { margin: 0; padding-left: 18px; }
.legend li { margin-bottom: 6px; color: #444; }
.legend code { background: #eef2f7; padding: 1px 4px; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.greeting-input {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 10px;
  font-size: 14px;
}
.text-input { width: 100%; border: 1px solid #ddd; border-radius: 6px; padding: 8px; font-size: 14px; }
.rankings-row { margin-bottom: 12px; }
.rankings-fields { margin-top: 12px; }
.field-group label { display: block; margin-bottom: 4px; font-weight: 500; color: #333; }
.checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.checkbox-label input[type="checkbox"] { width: auto; }
.actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.btn.btn-primary { background: var(--primary-color); color: #fff; border: none; padding: 8px 12px; border-radius: 6px; cursor: pointer; }
.btn.btn-primary:hover { background: var(--primary-hover); }
.saved-hint { color: #28a745; font-weight: 600; }
.hint { color: #666; font-size: 12px; margin-top: 8px; }
.hint-warning { color: #856404; background: #fff3cd; padding: 12px; border-radius: 6px; }
.hint-error { color: #721c24; background: #f8d7da; padding: 12px; border-radius: 6px; }

.tab-navigation {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 20px;
}

.tab-button {
    background: none;
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    margin-bottom: -2px;
}

.tab-button:hover {
    color: #333;
    background-color: #f8f9fa;
}

.tab-button.active {
    color: #28a745;
    border-bottom-color: #28a745;
}
</style>


