<template>
  <div class="flex flex-col h-screen overflow-hidden" :class="{'dark': theme === 'dark'}">
    <!-- Header Bar -->
    <header class="p-3 bg-gray-100 dark:bg-gray-800 shadow-md flex justify-between items-center shrink-0">
      <div class="flex items-center space-x-2">
        <button @click="navigateToSetup" class="btn btn-secondary text-sm">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline mr-1" viewBox="0 0 20 20" fill="currentColor"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" /></svg>
          Setup
        </button>
        <button v-if="gameMode === 'normal'" @click="switchToAllTimersMode" class="btn btn-warning text-sm">
          Run All Timers
        </button>
        <button v-if="gameMode === 'allTimers'" @click="switchToNormalMode" class="btn btn-warning text-sm">
          Back to Normal Mode
        </button>
      </div>
      
      <div class="flex items-center space-x-2">
        <button @click="navigateToInfo" class="btn-icon">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </button>
        <button @click="toggleMute" class="btn-icon">
          <svg v-if="!isMuted" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" /></svg>
          <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15zm9.949-9.949a1 1 0 00-1.414 0L12 7.05l-2.085-2.085a1 1 0 00-1.414 1.414L10.586 8.5l-2.085 2.085a1 1 0 001.414 1.414L12 9.914l2.085 2.085a1 1 0 001.414-1.414L13.414 8.5l2.085-2.085a1 1 0 000-1.414z" /></svg>
        </button>
      </div>
    </header>

    <main class="flex-grow overflow-hidden flex flex-col" ref="gameArea">
      <!-- Normal Mode -->
      <div v-if="gameMode === 'normal' && currentPlayer && nextPlayer" class="h-full flex flex-col">
        <PlayerDisplay 
          :player="currentPlayer" 
          is-current-player-area 
          area-class="bg-gray-100 dark:bg-gray-800"
          @tapped="handleCurrentPlayerTap"
          class="flex-1 min-h-0"
        />
        <div class="shrink-0 h-1 bg-blue-500"></div>
        <PlayerDisplay 
          :player="nextPlayer" 
          is-next-player-area 
          area-class="bg-gray-200 dark:bg-gray-700"
          @swiped-up="handlePassTurn"
          class="flex-1 min-h-0"
        />
      </div>

      <!-- All Timers Running Mode -->
      <div v-if="gameMode === 'allTimers'" class="p-4 h-full flex flex-col">
        <div class="mb-4 flex justify-start items-center">
            <h2 class="text-2xl font-semibold">All Timers Mode</h2>
        </div>
        <div class="flex-grow overflow-y-auto space-y-2">
          <!-- Use playersToListInAllTimersMode -->
          <PlayerListItem 
            v-for="(player) in playersToListInAllTimersMode" 
            :key="player.id" 
            :player="player"
            @tapped="() => handlePlayerTapAllTimers(indexInFullList(player.id))"
          />
          <p v-if="playersToListInAllTimersMode.length === 0 && players.length > 0 && anyTimerCouldRun" class="text-center text-gray-500 dark:text-gray-400 py-6">
            All players are skipped or an issue occurred.
          </p>
           <p v-if="playersToListInAllTimersMode.length === 0 && players.length > 0 && !anyTimerCouldRun" class="text-center text-gray-500 dark:text-gray-400 py-6">
            All players are skipped.
          </p>
           <p v-if="players.length === 0" class="text-center text-gray-500 dark:text-gray-400 py-6">
            No players to display.
          </p>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import PlayerDisplay from '../components/PlayerDisplay.vue';
import PlayerListItem from '../components/PlayerListItem.vue';
import { AudioService } from '../services/AudioService';
import { WakeLockService } from '../services/WakeLockService';

const store = useStore();
const router = useRouter();

const theme = computed(() => store.getters.theme);
const players = computed(() => store.getters.players);
const currentPlayer = computed(() => store.getters.currentPlayer);
const nextPlayer = computed(() => store.getters.nextPlayer);
const gameMode = computed(() => store.getters.gameMode);
const isMuted = computed(() => store.getters.isMuted);
const gameRunning = computed(() => store.getters.gameRunning);

let timerInterval = null;

// Shows all non-skipped players when in 'allTimers' mode.
const playersToListInAllTimersMode = computed(() => {
  if (gameMode.value === 'allTimers' && players.value) {
    return players.value.filter(p => !p.isSkipped);
  }
  return [];
});

// This computed is still used for audio logic and auto-revert
const anyTimerRunningInAllMode = computed(() => {
    if (!players.value) return false;
    return players.value.some(p => p.isTimerRunning && !p.isSkipped);
});

const anyTimerCouldRun = computed(() => {
    if (!players.value) return false;
    return players.value.some(p => !p.isSkipped);
});


const indexInFullList = (playerId) => {
    if (!players.value) return -1;
    return players.value.findIndex(p => p.id === playerId);
}

// ... (onMounted, onUnmounted, watchers, navigation, and other methods remain the same)
onMounted(async () => {
  if (!players.value || players.value.length < 2) {
    router.push({ name: 'Setup' });
    return;
  }
  
  timerInterval = setInterval(() => {
    store.dispatch('tick');
  }, 1000);

  if (gameRunning.value) {
    await WakeLockService.request();
  }
});

onUnmounted(async () => {
  clearInterval(timerInterval);
  AudioService.stopContinuousTick();
  AudioService.cancelPassTurnSound();
  await WakeLockService.release();
});

watch(gameRunning, async (isRunning) => {
  if (isRunning) {
    await WakeLockService.request();
  } else {
    if (!WakeLockService.isActive()) return; 
    setTimeout(async () => {
        if (!store.getters.gameRunning && WakeLockService.isActive()) {
            await WakeLockService.release();
        }
    }, 3000);
  }
});

watch(gameMode, (newMode) => {
  AudioService.stopContinuousTick(); 
  AudioService.cancelPassTurnSound();

  if (newMode === 'allTimers') {
    if (anyTimerRunningInAllMode.value) {
      AudioService.startContinuousTick(); 
    }
  } else { 
    if (currentPlayer.value && currentPlayer.value.isTimerRunning) {
        AudioService.playPassTurnAlert();
    }
  }
});

watch(anyTimerRunningInAllMode, (isRunning) => {
    if (gameMode.value === 'allTimers') { 
        if (isRunning) {
            AudioService.startContinuousTick();
        } else {
            AudioService.stopContinuousTick();
        }
    }
});

watch(currentPlayer, (newPlayer, oldPlayer) => {
    if (gameMode.value === 'normal' && newPlayer && newPlayer.isTimerRunning && oldPlayer && newPlayer.id !== oldPlayer.id) {
        AudioService.playPassTurnAlert();
    }
}, { deep: true }); 

watch(() => currentPlayer.value?.isTimerRunning, (isRunning, wasRunning) => {
    if (gameMode.value === 'normal' && currentPlayer.value) {
        if (isRunning === true && wasRunning === false) {
            AudioService.playPassTurnAlert();
        } else if (isRunning === false && wasRunning === true) {
            AudioService.cancelPassTurnSound();
        }
    }
});


const navigateToSetup = async () => {
  await WakeLockService.release();
  const isAnyTimerActive = store.getters.gameRunning; 
  if (isAnyTimerActive) {
    if (window.confirm('Game is active. Going to Setup will pause all timers. Continue?')) {
      store.commit('PAUSE_ALL_TIMERS');
      router.push({ name: 'Setup' });
    }
  } else {
    router.push({ name: 'Setup' });
  }
};

const navigateToInfo = async () => {
  await WakeLockService.release();
  if (store.getters.gameRunning) {
      store.commit('PAUSE_ALL_TIMERS');
  }
  router.push({ name: 'Info' });
};

const toggleMute = () => { store.dispatch('setMuted', !isMuted.value); };
const handleCurrentPlayerTap = () => { store.dispatch('toggleCurrentPlayerTimerNormalMode'); };
const handlePassTurn = () => {
  if(currentPlayer.value && !currentPlayer.value.isSkipped) {
      AudioService.cancelPassTurnSound(); 
      const wasRunning = currentPlayer.value.isTimerRunning; 
      store.dispatch('passTurn').then(() => {
        const newCurrentPlayer = store.getters.currentPlayer;
        if (wasRunning && gameMode.value === 'normal' && newCurrentPlayer && newCurrentPlayer.isTimerRunning) {
           AudioService.playPassTurnAlert(); 
        }
      });
  }
};
const handlePlayerTapAllTimers = (playerIndex) => { store.dispatch('togglePlayerTimerAllTimersMode', playerIndex); };
const switchToAllTimersMode = () => { store.dispatch('switchToAllTimersMode'); };
const switchToNormalMode = () => { store.dispatch('switchToNormalMode'); };

// Auto-revert logic
watch(anyTimerRunningInAllMode, (anyRunning) => {
    // Only revert if we are IN allTimers mode and NO timers are running
    if (gameMode.value === 'allTimers' && !anyRunning && players.value && players.value.length > 0) {
        const nonSkippedPlayersExist = players.value.some(p => !p.isSkipped);
        if (nonSkippedPlayersExist) {
            setTimeout(() => {
                // Double check condition before switching, state might change rapidly
                if(gameMode.value === 'allTimers' && !store.getters.players.some(p => p.isTimerRunning && !p.isSkipped)){
                    console.log("All timers paused in AllTimersMode, reverting to Normal Mode.");
                    store.dispatch('switchToNormalMode');
                }
            }, 250); // A small delay to prevent flickering if a timer is immediately restarted
        } else { 
            // All players are skipped, so stay in all timers mode but paused.
            console.log("All players skipped in AllTimersMode, staying paused.");
            AudioService.stopContinuousTick();
        }
    }
});
</script>