<template>
  <div>
    <section class="panel admin-head-panel">
      <div class="admin-head">
        <div>
          <h2>{{ t('adminPanel') }}</h2>
          <p class="muted">{{ t('adminPanelDesc') }}</p>
        </div>
        <div class="panel-actions">
          <button class="btn btn-secondary" @click="$emit('refresh')">{{ t('actions.refresh') }}</button>
          <button class="btn btn-danger" @click="$emit('logout')">{{ t('actions.logout') }}</button>
        </div>
      </div>
      <div class="admin-settings-row">
        <label class="switch-row">
          <input type="checkbox" :checked="viewProofInView" @change="$emit('toggle-view-proof', $event.target.checked)" />
          <span>{{ t('labels.viewProofInView') }}</span>
        </label>
      </div>
    </section>

    <nav class="tab-bar admin-tab-bar">
      <button v-for="tab in adminTabs" :key="tab.id" class="tab-btn" :class="{ active: adminTab === tab.id }" @click="$emit('change-admin-tab', tab.id)">
        {{ tab.label }}
      </button>
    </nav>

    <PlayersManagementTab
      v-show="adminTab === 'players'"
      :t="t"
      :group-setup-input="groupSetupInput"
      :admin-group-cards="adminGroupCards"
      :new-player="newPlayer"
      :assignable-groups="assignableGroups"
      :players-sorted="playersSorted"
      :player-filter="playerFilter"
      :player-sort="playerSort"
      :player-image="playerImage"
      :group-option-label="groupOptionLabel"
      :normalized-group-code="normalizedGroupCode"
      @update:group-setup-input="$emit('update:group-setup-input', $event)"
      @save-group-setup="$emit('save-group-setup')"
      @auto-group-even="$emit('auto-group-even')"
      @update:new-player="$emit('update:new-player', $event)"
      @create-player="$emit('create-player')"
      @convert-new-name="$emit('convert-new-name', $event)"
      @update:player-filter="$emit('update:player-filter', $event)"
      @update:player-sort="$emit('update:player-sort', $event)"
      @open-image-uploader="$emit('open-image-uploader', $event)"
      @update-player-field="$emit('update-player-field', $event)"
      @update-player-group="$emit('update-player-group', $event)"
      @convert-row-name="$emit('convert-row-name', $event)"
      @remove-player-image="$emit('remove-player-image', $event)"
      @delete-player="$emit('delete-player', $event)"
    />

    <section v-show="adminTab === 'liveMode'" class="panel">
      <div class="panel-heading">
        <h2>{{ t('liveMode') }}</h2>
        <p>{{ t('labels.liveModeVisibility') }}</p>
      </div>
      <LiveSettingsCard :t="t" :live-settings="liveSettings" :assignable-groups="assignableGroups" @update-live-setting="$emit('update-live-setting', $event)" />
    </section>

    <section v-show="adminTab === 'preliminary'" class="panel">
      <div class="panel-heading">
        <h2>{{ t('sections.preliminaryAdminTitle') }}</h2>
        <p>{{ t('sections.preliminaryAdminSubtitle') }}</p>
      </div>

      <div class="panel-actions">
        <button class="btn btn-outline" @click="$emit('request-reset-stage', 'preliminary')">{{ t('actions.resetScores') }}</button>
      </div>

      <div class="stage-filter-bar">
        <input
          class="name-input"
          :value="scoreFilters.preliminary"
          :placeholder="t('actions.searchPlayer')"
          @input="$emit('update-score-filter', { stage: 'preliminary', value: $event.target.value })"
        />
      </div>

      <MultiRoundScoreEditor
        :t="t"
        :rows="preliminaryScoreRows"
        :round-stages="[
          { stage: 'prelim_r1', label: t('table.round1') },
          { stage: 'prelim_r2', label: t('table.round2') },
          { stage: 'prelim_r3', label: t('table.round3') },
        ]"
        :total-score="preliminaryTotalScore"
        :show-filter="false"
        :filter-text="scoreFilters.preliminary"
        :show-group="true"
        :show-rank="false"
        :player-image="playerImage"
        :display-name="displayName"
        :secondary-name="secondaryName"
        :score-input-value="scoreInputValue"
        :on-score-focus="onScoreFocus"
        :on-score-input="onScoreInput"
        :on-score-commit="onScoreCommit"
        :has-score-proof="hasScoreProof"
        :score-proof-for="scoreProofFor"
        :open-score-proof-uploader="openScoreProofUploader"
        :open-proof-preview="openProofPreview"
      />
    </section>

    <section v-show="adminTab === 'prelimTie'" class="panel">
      <div class="panel-heading">
        <h2>{{ t('sections.prelimTieTitle') }}</h2>
        <p>{{ t('sections.prelimTieSubtitle') }}</p>
      </div>

      <div class="hint-box" v-if="prelimTie.required">
        {{ t('labels.tieSlots') }}: {{ prelimTie.slots }}
      </div>
      <div class="hint-box danger" v-if="prelimTie.required && !prelimTie.resolved">
        {{ t('messages.prelimTieUnresolved') }}
      </div>
      <div class="empty-state good" v-if="!prelimTie.required">{{ t('messages.noPrelimTie') }}</div>

      <template v-if="prelimTie.required">
        <div class="panel-actions">
          <button class="btn btn-outline" @click="$emit('request-reset-stage', 'prelim_tiebreak')">{{ t('actions.resetScores') }}</button>
        </div>

        <ScoreStageEditor
          :t="t"
          stage="prelim_tiebreak"
          color-mode="score"
          :rows="prelimTieScoreRows"
          :filter-text="scoreFilters.prelim_tiebreak"
          :show-score-before-input="true"
          :input-label="t('table.tieScore')"
          :player-image="playerImage"
          :display-name="displayName"
          :secondary-name="secondaryName"
          :score-input-value="scoreInputValue"
          :on-score-focus="onScoreFocus"
          :on-score-input="onScoreInput"
          :on-score-commit="onScoreCommit"
          :has-score-proof="hasScoreProof"
          :score-proof-for="scoreProofFor"
          :open-score-proof-uploader="openScoreProofUploader"
          :remove-score-proof="removeScoreProof"
          :open-proof-preview="openProofPreview"
          :request-score-advice="requestScoreAdvice"
          @update:filter="$emit('update-score-filter', { stage: 'prelim_tiebreak', value: $event })"
        />
      </template>
    </section>

    <section v-show="adminTab === 'final'" class="panel">
      <div class="panel-heading">
        <h2>{{ t('sections.finalAdminTitle') }}</h2>
        <p>{{ t('sections.finalAdminSubtitle') }}</p>
      </div>

      <div class="panel-actions">
        <button class="btn btn-outline" @click="$emit('request-reset-stage', 'final')">{{ t('actions.resetScores') }}</button>
      </div>

      <div class="stage-filter-bar">
        <input
          class="name-input"
          :value="scoreFilters.final_common"
          :placeholder="t('actions.searchPlayer')"
          @input="$emit('update-score-filter', { stage: 'final_common', value: $event.target.value })"
        />
      </div>

      <MultiRoundScoreEditor
        :t="t"
        :rows="finalScoreRows"
        :round-stages="[
          { stage: 'final_r1', label: t('table.round1') },
          { stage: 'final_r2', label: t('table.round2') },
        ]"
        :total-score="finalTotalScore"
        :show-filter="false"
        :filter-text="scoreFilters.final_common"
        :show-group="true"
        :show-seed="true"
        :player-image="playerImage"
        :display-name="displayName"
        :secondary-name="secondaryName"
        :score-input-value="scoreInputValue"
        :on-score-focus="onScoreFocus"
        :on-score-input="onScoreInput"
        :on-score-commit="onScoreCommit"
        :has-score-proof="hasScoreProof"
        :score-proof-for="scoreProofFor"
        :open-score-proof-uploader="openScoreProofUploader"
        :open-proof-preview="openProofPreview"
      />
    </section>

    <section v-show="adminTab === 'finalTie'" class="panel">
      <div class="panel-heading">
        <h2>{{ t('sections.finalTieTitle') }}</h2>
        <p>{{ t('sections.finalTieSubtitle') }}</p>
      </div>

      <div class="hint-box danger" v-if="finalTie.required && !finalTie.resolved">{{ t('messages.finalTieUnresolved') }}</div>
      <div class="empty-state good" v-if="!finalTie.required">{{ t('messages.noFinalTie') }}</div>

      <template v-if="finalTie.required">
        <div class="panel-actions">
          <button class="btn btn-outline" @click="$emit('request-reset-stage', 'final_tiebreak')">{{ t('actions.resetScores') }}</button>
        </div>

        <ScoreStageEditor
          :t="t"
          stage="final_tiebreak"
          color-mode="score"
          :rows="finalTieScoreRows"
          :filter-text="scoreFilters.final_tiebreak"
          :show-score-before-input="true"
          :input-label="t('table.tieScore')"
          :player-image="playerImage"
          :display-name="displayName"
          :secondary-name="secondaryName"
          :score-input-value="scoreInputValue"
          :on-score-focus="onScoreFocus"
          :on-score-input="onScoreInput"
          :on-score-commit="onScoreCommit"
          :has-score-proof="hasScoreProof"
          :score-proof-for="scoreProofFor"
          :open-score-proof-uploader="openScoreProofUploader"
          :remove-score-proof="removeScoreProof"
          :open-proof-preview="openProofPreview"
          :request-score-advice="requestScoreAdvice"
          @update:filter="$emit('update-score-filter', { stage: 'final_tiebreak', value: $event })"
        />
      </template>

      <h3 class="sub-heading mt-32">{{ t('sections.finalRanking') }}</h3>
      <div class="table-wrap">
        <table class="score-table">
          <thead>
            <tr>
              <th>{{ t('table.rank') }}</th>
              <th>{{ t('table.competitor') }}</th>
              <th>{{ t('table.score') }}</th>
              <th>{{ t('table.tieScore') }}</th>
              <th>{{ t('table.medal') }}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="row in finalRows" :key="'a-fr-' + row.playerId" :class="{ 'podium-row': row.rank <= 3 }">
              <td class="mono rank">{{ row.rank }}</td>
              <td>
                <div class="competitor-cell compact">
                  <img :src="playerImage(row)" :alt="row.nameAr" class="competitor-image" />
                  <div>
                    <p class="name-main">{{ displayName(row) }}</p>
                    <p class="name-sub">{{ secondaryName(row) }}</p>
                  </div>
                </div>
              </td>
              <td class="mono strong">{{ row.score }}</td>
              <td class="mono">{{ row.tieBreak }}</td>
              <td>
                <span v-if="row.rank === 1">🥇</span>
                <span v-else-if="row.rank === 2">🥈</span>
                <span v-else-if="row.rank === 3">🥉</span>
                <span v-else class="muted">—</span>
              </td>
            </tr>
            <tr v-if="finalRows.length === 0"><td colspan="5" class="muted center">{{ t('labels.noFinalists') }}</td></tr>
          </tbody>
        </table>
      </div>
    </section>
  </div>
</template>

<script setup>
import PlayersManagementTab from './admin/PlayersManagementTab.vue'
import ScoreStageEditor from './admin/ScoreStageEditor.vue'
import LiveSettingsCard from './admin/LiveSettingsCard.vue'
import MultiRoundScoreEditor from './admin/MultiRoundScoreEditor.vue'

defineProps({
  t: { type: Function, required: true },
  adminTabs: { type: Array, required: true },
  adminTab: { type: String, required: true },
  viewProofInView: { type: Boolean, default: false },
  liveSettings: { type: Object, required: true },
  groupSetupInput: { type: String, default: '' },
  adminGroupCards: { type: Array, required: true },
  newPlayer: { type: Object, required: true },
  assignableGroups: { type: Array, required: true },
  playersSorted: { type: Array, required: true },
  playerFilter: { type: String, default: '' },
  playerSort: { type: String, default: 'id' },
  playerImage: { type: Function, required: true },
  groupOptionLabel: { type: Function, required: true },
  normalizedGroupCode: { type: Function, required: true },
  preliminaryScoreRows: { type: Array, required: true },
  prelimTieScoreRows: { type: Array, required: true },
  finalScoreRows: { type: Array, required: true },
  finalTieScoreRows: { type: Array, required: true },
  finalRows: { type: Array, required: true },
  preliminaryTotalScore: { type: Function, required: true },
  finalTotalScore: { type: Function, required: true },
  prelimTie: { type: Object, required: true },
  finalTie: { type: Object, required: true },
  scoreFilters: { type: Object, required: true },
  displayName: { type: Function, required: true },
  secondaryName: { type: Function, required: true },
  scoreInputValue: { type: Function, required: true },
  onScoreFocus: { type: Function, required: true },
  onScoreInput: { type: Function, required: true },
  onScoreCommit: { type: Function, required: true },
  hasScoreProof: { type: Function, required: true },
  scoreProofFor: { type: Function, required: true },
  openScoreProofUploader: { type: Function, required: true },
  removeScoreProof: { type: Function, required: true },
  openProofPreview: { type: Function, required: true },
  requestScoreAdvice: { type: Function, required: true },
})

defineEmits([
  'refresh',
  'logout',
  'toggle-view-proof',
  'update-live-setting',
  'change-admin-tab',
  'update:group-setup-input',
  'save-group-setup',
  'auto-group-even',
  'update:new-player',
  'create-player',
  'convert-new-name',
  'update:player-filter',
  'update:player-sort',
  'open-image-uploader',
  'update-player-field',
  'update-player-group',
  'convert-row-name',
  'remove-player-image',
  'delete-player',
  'request-reset-stage',
  'update-score-filter',
])
</script>
