<template>
  <div class="tournaments-container">
    <div class="workspace-header">
      <div>
        <h2 class="workspace-title">{{ $t('navigation.clubTournaments') }}</h2>
      </div>
      <div class="mode-switcher">
        <button
          :class="['mode-button', { active: activeMode === 'internal' }]"
          @click="switchMode('internal')"
        >
          🏆 {{ $t('tournaments.internalTournaments') }}
        </button>
        <button
          :class="['mode-button', { active: activeMode === 'external' }]"
          @click="switchMode('external')"
        >
          🌐 {{ $t('tournaments.openTournaments') }}
        </button>
        <button
          :class="['mode-button', { active: activeMode === 'mini' }]"
          @click="switchMode('mini')"
        >
          🏅 {{ $t('tournaments.miniChampionships') }}
        </button>
      </div>
    </div>

    <div class="workspace-summary-row">
      <div class="workspace-summary">
        {{ currentModeDescription }}
      </div>
      <button
        v-if="activeMode === 'internal'"
        type="button"
        class="stats-open-button"
        @click="openInternalTournamentStatsDialog"
      >
        📊 {{ $t('tournaments.internalStatsOpenButton') }}
      </button>
    </div>

    <div class="tab-content">
      <TournamentTab
        :key="activeMode"
        :allowsExternal="activeMode !== 'internal'"
        :isMiniChampionship="activeMode === 'mini'"
      />
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import TournamentTab from './TournamentTab.vue';

export default {
  name: 'TournamentsView',
  components: {
    TournamentTab,
  },
  data() {
    return {
      activeMode: 'internal',
    };
  },
  computed: {
    ...mapGetters(['dialogs']),
    currentModeDescription() {
      if (this.activeMode === 'mini') return this.$t('tournaments.miniChampionships');
      if (this.activeMode === 'external') return this.$t('tournaments.openTournaments');
      return this.$t('tournaments.internalTournaments');
    },
  },
  methods: {
    ...mapActions(['openDialog', 'closeDialog']),
    switchMode(mode) {
      this.activeMode = mode;
    },
    openInternalTournamentStatsDialog() {
      this.dialogs
        .filter((d) => d.component === 'InternalTournamentStats')
        .forEach((d) => this.closeDialog(d.id));
      this.openDialog({
        title: this.$t('tournaments.internalStatsTitle'),
        component: 'InternalTournamentStats',
        props: {},
      });
    },
  },
};
</script>

<style scoped>
.tournaments-container {
  padding: 20px;
}

.workspace-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.workspace-title {
  margin: 0;
  font-size: 1.6rem;
  color: #1f2937;
}

.mode-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mode-button {
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #4b5563;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mode-button:hover {
  background: #e5e7eb;
  color: #1f2937;
}

.mode-button.active {
  background: #dcfce7;
  border-color: #16a34a;
  color: #166534;
}

.workspace-summary-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.workspace-summary {
  margin: 0;
  color: #6b7280;
  flex: 1;
  min-width: 0;
}

.stats-open-button {
  flex-shrink: 0;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.stats-open-button:hover {
  background: #e5e7eb;
  border-color: #9ca3af;
}

.tab-content {
  min-height: 200px;
  position: relative;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.tab-content > * {
  width: 100%;
  display: block;
}

@media (max-width: 900px) {
  .workspace-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .mode-switcher {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .tournaments-container {
    padding: 14px;
  }

  .workspace-title {
    font-size: 1.35rem;
  }

  .workspace-summary {
    margin-bottom: 14px;
    line-height: 1.4;
  }

  .mode-switcher {
    flex-direction: column;
    align-items: stretch;
  }

  .mode-button {
    width: 100%;
    text-align: left;
    justify-content: flex-start;
  }
}
</style>

<style>
/* Global styles for tab content - components may have their own padding */
.tab-content .tournaments-view {
  padding: 1rem;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
}

.tab-content .official-tournaments {
  padding: 0;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
}
</style>
