<template>
  <div>
    <div class="selected-tournament-strip">
      <div class="selected-tournament-main">
        <span class="selected-tournament-label">{{ $t('tournaments.selectedTournament') }}</span>
        <strong>{{ tournamentName || selectionDisplay || '–' }}</strong>
      </div>
      <div class="selected-tournament-meta">
        <span>{{ tournamentDateLabel }}</span>
        <span>{{ modeLabel }}</span>
        <span>{{ classCount }} {{ $t('tournaments.classes') }}</span>
        <span>{{ participantCount }} {{ $t('tournaments.participants') }}</span>
      </div>
    </div>
    <div class="tournament-status-strip">
      <div v-for="status in workspaceStatusChips" :key="status.key" :class="['tournament-status-chip', `status-${status.tone}`]">
        <button v-if="status.action" type="button" class="tournament-status-main" @click="$emit('navigate-status', status.action)">{{ status.label }}</button>
        <span v-else class="tournament-status-main tournament-status-main-static">{{ status.label }}</span>
        <button v-if="status.quickAction" type="button" class="tournament-status-action" @click="$emit('quick-action', status.quickAction)">{{ status.quickAction.label }}</button>
      </div>
    </div>
    <div v-if="workspaceProblems.length > 0" class="workspace-problems">
      <div class="workspace-problems-header">
        <strong>{{ $t('tournaments.workspaceProblemsTitle', { count: workspaceProblems.length }) }}</strong>
      </div>
      <div class="workspace-problems-list">
        <div v-for="problem in workspaceProblems" :key="problem.key" class="workspace-problem-item">
          <div class="workspace-problem-copy">
            <strong class="workspace-problem-title">{{ problem.title }}</strong>
            <span class="workspace-problem-description">{{ problem.description }}</span>
          </div>
          <button type="button" class="workspace-problem-action" @click="problem.quickAction ? $emit('quick-action', problem.quickAction) : $emit('navigate-status', problem.action)">
            {{ problem.actionLabel }}
          </button>
        </div>
      </div>
    </div>
    <div class="tournament-tabs">
      <button @click="$emit('set-active-tab', 'config')" :class="['tab-button', { active: activeTab === 'config' }]">{{ $t('tournaments.tabConfig') }}</button>
      <button @click="$emit('set-active-tab', 'participants')" :class="['tab-button', { active: activeTab === 'participants' }]">
        {{ $t('tournaments.tabParticipants') }}
        <span class="tab-badge">{{ participantCount }}</span>
      </button>
      <button v-if="isGroupTournament" @click="$emit('set-active-tab', 'groups')" :class="['tab-button', { active: activeTab === 'groups' }]">
        {{ $t('tournaments.tabGroups') }}
        <span class="tab-badge">{{ groupCount }}</span>
      </button>
      <button @click="$emit('set-active-tab', 'results')" :class="['tab-button', { active: activeTab === 'results' }]">
        {{ $t('tournaments.tabResults') }} / {{ $t('tournaments.tabPlacements') }}
        <span class="tab-badge">{{ matchCount }}</span>
      </button>
    </div>
    <div v-if="activeTab === 'results'" class="results-subnav">
      <button type="button" :class="['subnav-button', { active: resultsSubTab === 'matches' }]" @click="$emit('set-results-sub-tab', 'matches')">{{ $t('tournaments.tabResults') }}</button>
      <button type="button" :class="['subnav-button', { active: resultsSubTab === 'placements' }]" @click="$emit('set-results-sub-tab', 'placements')">{{ $t('tournaments.tabPlacements') }}</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TournamentWorkspaceHeader',
  props: {
    tournamentName: { type: String, default: '' },
    selectionDisplay: { type: String, default: '' },
    tournamentDateLabel: { type: String, default: '' },
    modeLabel: { type: String, default: '' },
    classCount: { type: Number, default: 0 },
    participantCount: { type: Number, default: 0 },
    groupCount: { type: Number, default: 0 },
    matchCount: { type: Number, default: 0 },
    workspaceStatusChips: { type: Array, required: true },
    workspaceProblems: { type: Array, required: true },
    activeTab: { type: String, required: true },
    resultsSubTab: { type: String, required: true },
    isGroupTournament: { type: Boolean, default: false }
  },
  emits: ['navigate-status', 'quick-action', 'set-active-tab', 'set-results-sub-tab']
};
</script>
