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

    <!-- Tab Navigation -->
    <div class="tab-navigation">
      <button
        :class="['tab-button', { active: activeTab === 'settings' }]"
        @click="selectTab('settings')"
      >
        ⚙️ {{ $t('clubSettings.settings') }}
      </button>
      <button
        :class="['tab-button', { active: activeTab === 'training-groups' }]"
        @click="selectTab('training-groups')"
      >
        👨‍👩‍👧‍👦 {{ $t('clubSettings.trainingGroups') }}
      </button>
      <button
        :class="['tab-button', { active: activeTab === 'training-times' }]"
        @click="selectTab('training-times')"
      >
        🕐 {{ $t('clubSettings.trainingTimes') }}
      </button>
      <button
        :class="['tab-button', { active: activeTab === 'venues' }]"
        @click="selectTab('venues')"
      >
        🏟️ Spiellokale
      </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>Kalenderregion</h2>
      <p class="hint">Die Region wird für Schulferien und gesetzliche Feiertage im Kalender genutzt.</p>
      <div class="field-grid">
        <div class="field-group">
          <label>Land</label>
          <select v-model="countryCode" class="text-input">
            <option value="DE">Deutschland</option>
          </select>
        </div>
        <div class="field-group">
          <label>Bundesland</label>
          <select v-model="stateCode" class="text-input">
            <option value="">Nicht gesetzt</option>
            <option v-for="state in germanStates" :key="state.code" :value="state.code">
              {{ state.name }}
            </option>
          </select>
        </div>
      </div>
    </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">
      <h2>{{ $t('clubSettings.memberDataQuality') }}</h2>
      <p class="hint">{{ $t('clubSettings.memberDataQualityHint') }}</p>
      <div class="quality-options">
        <label class="checkbox-label">
          <input type="checkbox" v-model="memberDataQualityRequirements.requireStreet" />
          {{ $t('clubSettings.requireStreet') }}
        </label>
        <label class="checkbox-label">
          <input type="checkbox" v-model="memberDataQualityRequirements.requirePostalCode" />
          {{ $t('clubSettings.requirePostalCode') }}
        </label>
        <label class="checkbox-label">
          <input type="checkbox" v-model="memberDataQualityRequirements.requireCity" />
          {{ $t('clubSettings.requireCity') }}
        </label>
        <label class="checkbox-label">
          <input type="checkbox" v-model="memberDataQualityRequirements.requirePhone" />
          {{ $t('clubSettings.requirePhone') }}
        </label>
        <label class="checkbox-label">
          <input type="checkbox" v-model="memberDataQualityRequirements.requireEmail" />
          {{ $t('clubSettings.requireEmail') }}
        </label>
      </div>
    </section>

    <section v-if="currentClub && !loading" class="card">
      <h2>Beitragsregeln</h2>
      <p class="hint">Einfaches manuelles Regelwerk für typische Vereinsfälle. Die Regeln werden nur als Beitragsstamm gespeichert, nicht automatisch abgerechnet.</p>
      <div class="fee-rule-presets">
        <button type="button" class="btn btn-secondary" @click="addFeeRulePreset('jugend')">Jugend</button>
        <button type="button" class="btn btn-secondary" @click="addFeeRulePreset('erwachsene')">Erwachsene</button>
        <button type="button" class="btn btn-secondary" @click="addFeeRulePreset('familie')">Familie</button>
        <button type="button" class="btn btn-secondary" @click="addFeeRulePreset('passiv')">Passiv</button>
      </div>
      <div v-if="feeRules.length === 0" class="hint">Noch keine Beitragsregeln angelegt.</div>
      <div v-else class="fee-rules-list">
        <article v-for="(rule, index) in feeRules" :key="rule.id || index" class="fee-rule-card">
          <div class="field-grid">
            <div class="field-group">
              <label>Gruppe</label>
              <input v-model.trim="rule.code" class="text-input" placeholder="z. B. Jugend" />
            </div>
            <div class="field-group">
              <label>Bezeichnung</label>
              <input v-model.trim="rule.label" class="text-input" placeholder="z. B. Jugendbeitrag" />
            </div>
            <div class="field-group">
              <label>Betrag (EUR)</label>
              <input v-model.number="rule.amountEuro" class="text-input" type="number" min="0" step="0.01" />
            </div>
            <div class="field-group">
              <label>Rhythmus</label>
              <select v-model="rule.cycle" class="text-input">
                <option value="monthly">monatlich</option>
                <option value="quarterly">vierteljährlich</option>
                <option value="half_yearly">halbjährlich</option>
                <option value="yearly">jährlich</option>
                <option value="one_time">einmalig</option>
              </select>
            </div>
          </div>
          <label>
            <span>Hinweis</span>
            <textarea v-model.trim="rule.note" class="text-input" rows="2" placeholder="z. B. für Seniorenbeitrag oder Familienregel"></textarea>
          </label>
          <div class="actions">
            <button type="button" class="btn btn-danger" @click="removeFeeRule(index)">Entfernen</button>
          </div>
        </article>
      </div>
    </section>

    <section v-if="currentClub && !loading" class="card">
      <h2>Rechnungsnummern</h2>
      <p class="hint">Automatische Nummernvergabe für Ausgangs- und Eingangsrechnungen.</p>
      <div class="field-grid">
        <div class="field-group">
          <label>Präfix Ausgangsrechnungen</label>
          <input v-model="outgoingInvoicePrefix" class="text-input" maxlength="24" placeholder="RE" />
        </div>
        <div class="field-group">
          <label>Nächste Nummer Ausgang</label>
          <input v-model.number="outgoingInvoiceNextNumber" class="text-input" type="number" min="1" step="1" />
        </div>
        <div class="field-group">
          <label>Präfix Eingangsrechnungen</label>
          <input v-model="incomingInvoicePrefix" class="text-input" maxlength="24" placeholder="EI" />
        </div>
        <div class="field-group">
          <label>Nächste Nummer Eingang</label>
          <input v-model.number="incomingInvoiceNextNumber" class="text-input" type="number" min="1" step="1" />
        </div>
      </div>
      <p class="hint">Beispiel heute: {{ invoiceNumberPreview('outgoing') }} / {{ invoiceNumberPreview('incoming') }}</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 -->

    <!-- Venues Tab -->
    <div v-if="activeTab === 'venues'" class="venues-tab">
      <p v-if="!currentClub" class="hint hint-warning">Kein Verein ausgewählt.</p>
      <p v-else-if="venuesLoading" class="hint">{{ $t('common.loading') }}</p>
      <p v-else-if="venuesError" class="hint hint-error">{{ venuesError }}</p>

      <section v-if="currentClub" class="card venue-form-card">
        <h2>{{ venueForm.id ? 'Spiellokal bearbeiten' : 'Spiellokal anlegen' }}</h2>
        <div class="field-grid">
          <div class="field-group">
            <label>Name</label>
            <input v-model="venueForm.name" class="text-input" placeholder="z. B. Sporthalle Harheim" />
          </div>
          <div class="field-group">
            <label>Straße / Adresse</label>
            <input v-model="venueForm.address" class="text-input" placeholder="Straße und Hausnummer" />
          </div>
          <div class="field-group">
            <label>PLZ</label>
            <input v-model="venueForm.zip" class="text-input" placeholder="60437" />
          </div>
          <div class="field-group">
            <label>Ort</label>
            <input v-model="venueForm.city" class="text-input" placeholder="Frankfurt am Main" />
          </div>
        </div>
        <div class="actions">
          <button class="btn btn-primary" @click="saveVenue">{{ venueForm.id ? 'Speichern' : 'Hinzufügen' }}</button>
          <button v-if="venueForm.id" class="btn btn-secondary" @click="resetVenueForm">Abbrechen</button>
        </div>
      </section>

      <section v-if="currentClub" class="card venues-list-card">
        <h2>Spiellokale</h2>
        <p v-if="!venues.length" class="hint">Noch keine Spiellokale angelegt.</p>
        <div v-else class="venue-list">
          <div v-for="venue in venues" :key="venue.id" class="venue-row">
            <div>
              <strong>{{ venue.name }}</strong>
              <div class="venue-address">{{ formatVenueAddress(venue) || 'Keine Adresse hinterlegt' }}</div>
            </div>
            <div class="venue-actions">
              <button class="btn btn-secondary" @click="editVenue(venue)">Bearbeiten</button>
              <button class="btn btn-danger" @click="deleteVenue(venue)">Löschen</button>
            </div>
          </div>
        </div>
      </section>
    </div>
    <!-- End Venues Tab -->
  </div>
  </template>

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

const defaultMemberDataQualityRequirements = () => ({
  requireStreet: true,
  requirePostalCode: true,
  requireCity: true,
  requirePhone: true,
  requireEmail: true,
});

const GERMAN_STATES = [
  { code: 'DE-BW', name: 'Baden-Württemberg' },
  { code: 'DE-BY', name: 'Bayern' },
  { code: 'DE-BE', name: 'Berlin' },
  { code: 'DE-BB', name: 'Brandenburg' },
  { code: 'DE-HB', name: 'Bremen' },
  { code: 'DE-HH', name: 'Hamburg' },
  { code: 'DE-HE', name: 'Hessen' },
  { code: 'DE-MV', name: 'Mecklenburg-Vorpommern' },
  { code: 'DE-NI', name: 'Niedersachsen' },
  { code: 'DE-NW', name: 'Nordrhein-Westfalen' },
  { code: 'DE-RP', name: 'Rheinland-Pfalz' },
  { code: 'DE-SL', name: 'Saarland' },
  { code: 'DE-SN', name: 'Sachsen' },
  { code: 'DE-ST', name: 'Sachsen-Anhalt' },
  { code: 'DE-SH', name: 'Schleswig-Holstein' },
  { code: 'DE-TH', name: 'Thüringen' },
];

const CLUB_SETTINGS_TABS = new Set(['settings', 'training-groups', 'training-times', 'venues']);

export default {
  name: 'ClubSettings',
  components: {
    TrainingGroupsTab,
    TrainingTimesTab,
  },
  data() {
    return {
      activeTab: 'settings',
      greeting: '',
      associationMemberNumber: '',
      countryCode: 'DE',
      stateCode: '',
      myTischtennisFedNickname: '',
      autoFetchRankings: false,
      memberDataQualityRequirements: defaultMemberDataQualityRequirements(),
      feeRules: [],
      outgoingInvoicePrefix: 'RE',
      outgoingInvoiceNextNumber: 1,
      incomingInvoicePrefix: 'EI',
      incomingInvoiceNextNumber: 1,
      saved: false,
      loading: false,
      loadError: null,
      venues: [],
      venuesLoading: false,
      venuesError: null,
      venueForm: this.emptyVenueForm(),
    };
  },
  computed: {
    ...mapGetters(['currentClub']),
    germanStates() {
      return GERMAN_STATES;
    },
  },
  watch: {
    '$route.query.tab': {
      immediate: true,
      handler(tab) {
        this.syncTabFromRoute(tab);
      },
    },
    currentClub: {
      handler(clubId) {
        if (clubId) {
          this.loadClubSettings();
          this.loadVenues();
        } else {
          this.venues = [];
          this.resetVenueForm();
        }
      },
      immediate: true,
    },
  },
  methods: {
    syncTabFromRoute(tab) {
      const nextTab = CLUB_SETTINGS_TABS.has(tab) ? tab : 'settings';
      if (this.activeTab !== nextTab) {
        this.activeTab = nextTab;
      }
    },
    selectTab(tab) {
      const nextTab = CLUB_SETTINGS_TABS.has(tab) ? tab : 'settings';
      if (this.activeTab !== nextTab) {
        this.activeTab = nextTab;
      }

      if (this.$route.query.tab !== nextTab) {
        this.$router.replace({
          query: {
            ...this.$route.query,
            tab: nextTab,
          },
        });
      }
    },
    async loadClubSettings() {
      if (!this.currentClub) {
        this.greeting = '';
        this.associationMemberNumber = '';
        this.countryCode = 'DE';
        this.stateCode = '';
        this.myTischtennisFedNickname = '';
        this.autoFetchRankings = false;
        this.memberDataQualityRequirements = defaultMemberDataQualityRequirements();
        this.feeRules = [];
        this.outgoingInvoicePrefix = 'RE';
        this.outgoingInvoiceNextNumber = 1;
        this.incomingInvoicePrefix = 'EI';
        this.incomingInvoiceNextNumber = 1;
        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.countryCode = club?.countryCode ?? 'DE';
        this.stateCode = club?.stateCode ?? '';
        this.myTischtennisFedNickname = club?.myTischtennisFedNickname ?? '';
        this.autoFetchRankings = !!club?.autoFetchRankings;
        this.memberDataQualityRequirements = this.normalizeMemberDataQualityRequirements(club?.memberDataQualityRequirements);
        this.feeRules = this.normalizeFeeRules(club?.feeRules);
        this.outgoingInvoicePrefix = club?.outgoingInvoicePrefix ?? 'RE';
        this.outgoingInvoiceNextNumber = Number(club?.outgoingInvoiceNextNumber ?? 1) || 1;
        this.incomingInvoicePrefix = club?.incomingInvoicePrefix ?? 'EI';
        this.incomingInvoiceNextNumber = Number(club?.incomingInvoiceNextNumber ?? 1) || 1;
      } catch (e) {
        this.loadError = this.$t('clubSettings.loadFailed');
        this.greeting = '';
        this.associationMemberNumber = '';
        this.countryCode = 'DE';
        this.stateCode = '';
        this.myTischtennisFedNickname = '';
        this.autoFetchRankings = false;
        this.memberDataQualityRequirements = defaultMemberDataQualityRequirements();
        this.feeRules = [];
        this.outgoingInvoicePrefix = 'RE';
        this.outgoingInvoiceNextNumber = 1;
        this.incomingInvoicePrefix = 'EI';
        this.incomingInvoiceNextNumber = 1;
      } finally {
        this.loading = false;
      }
    },
    normalizeMemberDataQualityRequirements(settings) {
      const defaults = defaultMemberDataQualityRequirements();
      const parsed = typeof settings === 'string' ? this.parseJsonSetting(settings) : settings;
      if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
        return defaults;
      }
      return Object.fromEntries(
        Object.keys(defaults).map(key => [
          key,
          typeof parsed[key] === 'boolean' ? parsed[key] : defaults[key],
        ])
      );
    },
    normalizeFeeRules(rules) {
      if (!Array.isArray(rules)) {
        return [];
      }
      return rules
        .map((rule, index) => {
          if (!rule || typeof rule !== 'object' || Array.isArray(rule)) {
            return null;
          }
          const amountCents = Number.parseInt(rule.amountCents ?? Math.round(Number(rule.amountEuro || 0) * 100), 10);
          return {
            id: rule.id || `${Date.now()}-${index}`,
            code: String(rule.code || '').trim(),
            label: String(rule.label || '').trim(),
            amountEuro: Number.isFinite(amountCents) ? amountCents / 100 : 0,
            cycle: ['monthly', 'quarterly', 'half_yearly', 'yearly', 'one_time'].includes(String(rule.cycle || 'monthly'))
              ? String(rule.cycle || 'monthly')
              : 'monthly',
            note: String(rule.note || '').trim(),
          };
        })
        .filter((rule) => rule && (rule.code || rule.label || Number(rule.amountEuro || 0) > 0));
    },
    addFeeRulePreset(kind) {
      const presets = {
        jugend: { code: 'Jugend', label: 'Jugendbeitrag', amountEuro: 0, cycle: 'quarterly', note: 'Typischer Jugendbeitrag' },
        erwachsene: { code: 'Erwachsene', label: 'Erwachsenenbeitrag', amountEuro: 0, cycle: 'quarterly', note: 'Typischer Erwachsenenbeitrag' },
        familie: { code: 'Familie', label: 'Familienbeitrag', amountEuro: 0, cycle: 'quarterly', note: 'Familienregel' },
        passiv: { code: 'Passiv', label: 'Passivbeitrag', amountEuro: 0, cycle: 'yearly', note: 'Passive Mitgliedschaft' },
      };
      const preset = presets[kind];
      if (!preset) {
        return;
      }
      this.feeRules = [...this.feeRules, { id: `${Date.now()}-${this.feeRules.length}`, ...preset }];
    },
    removeFeeRule(index) {
      this.feeRules.splice(index, 1);
    },
    parseJsonSetting(value) {
      try {
        return JSON.parse(value);
      } catch (e) {
        return null;
      }
    },
    normalizeInvoicePrefix(value, fallback) {
      const normalized = String(value || fallback || '').trim().toUpperCase().slice(0, 24);
      return normalized || fallback;
    },
    normalizeInvoiceNextNumber(value) {
      const numeric = Number.parseInt(value, 10);
      return Number.isInteger(numeric) && numeric > 0 ? numeric : 1;
    },
    invoiceNumberPreview(direction) {
      const year = new Date().getFullYear();
      const isIncoming = direction === 'incoming';
      const prefix = isIncoming
        ? this.normalizeInvoicePrefix(this.incomingInvoicePrefix, 'EI')
        : this.normalizeInvoicePrefix(this.outgoingInvoicePrefix, 'RE');
      const nextNumber = isIncoming
        ? this.normalizeInvoiceNextNumber(this.incomingInvoiceNextNumber)
        : this.normalizeInvoiceNextNumber(this.outgoingInvoiceNextNumber);
      const padded = String(nextNumber).padStart(4, '0');
      return `${prefix}-${year}-${padded}`;
    },
    emptyVenueForm() {
      return { id: null, name: '', address: '', zip: '', city: '' };
    },
    resetVenueForm() {
      this.venueForm = this.emptyVenueForm();
    },
    formatVenueAddress(venue) {
      return [venue?.address, [venue?.zip, venue?.city].filter(Boolean).join(' ')].filter(Boolean).join(', ');
    },
    async loadVenues() {
      if (!this.currentClub) return;
      this.venuesLoading = true;
      this.venuesError = null;
      try {
        const response = await apiClient.get(`/club-venues/${this.currentClub}`);
        this.venues = response.data || [];
      } catch (e) {
        this.venuesError = 'Spiellokale konnten nicht geladen werden.';
        this.venues = [];
      } finally {
        this.venuesLoading = false;
      }
    },
    editVenue(venue) {
      this.venueForm = {
        id: venue.id,
        name: venue.name || '',
        address: venue.address || '',
        zip: venue.zip || '',
        city: venue.city || '',
      };
    },
    async saveVenue() {
      if (!this.currentClub) return;
      const payload = {
        name: this.venueForm.name,
        address: this.venueForm.address,
        zip: this.venueForm.zip,
        city: this.venueForm.city,
      };
      if (!payload.name.trim()) {
        alert('Bitte einen Namen für das Spiellokal angeben.');
        return;
      }
      try {
        if (this.venueForm.id) {
          await apiClient.put(`/club-venues/${this.currentClub}/${this.venueForm.id}`, payload);
        } else {
          await apiClient.post(`/club-venues/${this.currentClub}`, payload);
        }
        this.resetVenueForm();
        await this.loadVenues();
      } catch (e) {
        alert('Spiellokal konnte nicht gespeichert werden.');
      }
    },
    async deleteVenue(venue) {
      if (!this.currentClub || !venue?.id) return;
      if (!confirm(`Spiellokal "${venue.name}" wirklich löschen?`)) return;
      try {
        await apiClient.delete(`/club-venues/${this.currentClub}/${venue.id}`);
        if (this.venueForm.id === venue.id) this.resetVenueForm();
        await this.loadVenues();
      } catch (e) {
        alert('Spiellokal konnte nicht gelöscht werden.');
      }
    },
    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,
          countryCode: this.countryCode,
          stateCode: this.stateCode || null,
          myTischtennisFedNickname: this.myTischtennisFedNickname || null,
          autoFetchRankings: this.autoFetchRankings,
          memberDataQualityRequirements: this.normalizeMemberDataQualityRequirements(this.memberDataQualityRequirements),
          feeRules: this.normalizeFeeRules(this.feeRules).map((rule) => ({
            ...rule,
            amountCents: Math.round(Number(rule.amountEuro || 0) * 100),
          })),
          outgoingInvoicePrefix: this.normalizeInvoicePrefix(this.outgoingInvoicePrefix, 'RE'),
          outgoingInvoiceNextNumber: this.normalizeInvoiceNextNumber(this.outgoingInvoiceNextNumber),
          incomingInvoicePrefix: this.normalizeInvoicePrefix(this.incomingInvoicePrefix, 'EI'),
          incomingInvoiceNextNumber: this.normalizeInvoiceNextNumber(this.incomingInvoiceNextNumber),
        });
        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; }
.fee-rule-presets { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 14px; }
.fee-rules-list { display: grid; gap: 12px; }
.fee-rule-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfe;
}
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.quality-options { display: grid; gap: 10px; 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); }
.btn.btn-secondary { background: #f8fafc; color: #1f2937; border: 1px solid #cbd5e1; padding: 8px 12px; border-radius: 6px; cursor: pointer; }
.btn.btn-danger { background: #fff5f5; color: #b91c1c; border: 1px solid #fecaca; padding: 8px 12px; border-radius: 6px; cursor: pointer; }
.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; }
.venue-form-card, .venues-list-card { margin-bottom: 16px; }
.venue-list { display: grid; gap: 10px; }
.venue-row { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 12px; border: 1px solid #e5e7eb; border-radius: 6px; background: #f9fafb; }
.venue-address { margin-top: 4px; color: #666; font-size: 13px; }
.venue-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.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;
}

@media (max-width: 720px) {
  .field-grid { grid-template-columns: 1fr; }
  .venue-row { align-items: stretch; flex-direction: column; }
  .venue-actions { justify-content: flex-start; }
}
</style>
