<template>
  <div class="flex-grow flex flex-col p-4 md:p-6 lg:p-8 items-center dark:bg-gray-800">
    <header class="w-full max-w-3xl mb-6 text-center">
      <h1 class="text-4xl font-bold text-blue-600 dark:text-blue-400">Nexus Timer Setup</h1>
    </header>

    <!-- Player Management (no changes) -->
    <section class="w-full max-w-3xl bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md mb-6">
      <!-- ... Player list ... -->
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-2xl font-semibold">Players ({{ players.length }})</h2>
        <button @click="openAddPlayerModal" class="btn btn-primary" :disabled="players.length >= 99"> 
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline mr-1" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" /></svg>
          Add Player
        </button>
      </div>
      <p v-if="players.length < 2" class="text-sm text-yellow-600 dark:text-yellow-400 mb-3">At least 2 players are required to start.</p>
       <div v-if="players.length > 0" class="space-y-3 mb-4">
        <div v-for="(player, index) in players" :key="player.id" class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-600 rounded shadow-sm">
          <div class="flex items-center flex-wrap">
             <img 
              v-if="player.avatar"
              :src="player.avatar" 
              alt="Player Avatar" 
              class="w-10 h-10 rounded-full object-cover mr-3"
            />
            <DefaultAvatarIcon v-else class="w-10 h-10 rounded-full object-cover mr-3 text-gray-400 bg-gray-200 p-0.5"/>
            <span class="font-medium mr-2">{{ player.name }}</span>
            <span class="mr-2 text-xs text-gray-500 dark:text-gray-400">({{ formatTime(player.currentTimerSec) }})</span>
            <span v-if="player.hotkey" class="text-xs px-1.5 py-0.5 bg-blue-100 dark:bg-blue-700 text-blue-700 dark:text-blue-200 rounded mr-1">
                HK: {{ player.hotkey.toUpperCase() }}
            </span>
            <span v-if="player.mqttChar" class="text-xs px-1.5 py-0.5 bg-purple-100 dark:bg-purple-700 text-purple-700 dark:text-purple-200 rounded">
                MQTT: {{ player.mqttChar.toUpperCase() }}
            </span>
          </div>
          <div class="space-x-1 flex items-center flex-shrink-0">
            <button @click="movePlayerUp(index)" :disabled="index === 0" class="btn-icon"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7" /></svg></button>
            <button @click="movePlayerDown(index)" :disabled="index === players.length - 1" class="btn-icon"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" /></svg></button>
            <button @click="openEditPlayerModal(player)" class="btn-icon text-yellow-500 hover:text-yellow-600"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" /><path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd" /></svg></button>
            <button @click="confirmDeletePlayer(player.id)" class="btn-icon text-red-500 hover:text-red-600"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" /></svg></button>
          </div>
        </div>
      </div>
      <div v-else class="text-center text-gray-500 dark:text-gray-400 py-4">No players added. Add at least 2.</div>
      <div v-if="players.length > 1" class="flex space-x-2 mt-4">
        <button @click="shufflePlayers" class="btn btn-secondary text-sm">Shuffle Order</button>
        <button @click="reversePlayers" class="btn btn-secondary text-sm">Reverse Order</button>
      </div>
    </section>

    <section class="w-full max-w-3xl bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md mb-6">
      <!-- MQTT Broker URL -->
      <div class="mb-6">
        <label for="mqttBrokerUrl" class="block text-sm font-medium text-gray-700 dark:text-gray-300">MQTT Broker URL</label>
        <div class="mt-1 flex rounded-md shadow-sm">
            <input type="text" id="mqttBrokerUrl" v-model="localMqttBrokerUrl" placeholder="ws://broker.example.com:9001" class="input-base flex-1 rounded-none rounded-l-md" :disabled="mqttConnectionStatus === 'connected' || mqttConnectionStatus === 'connecting'">
            <button @click="toggleMqttConnection" 
                    :class="['btn inline-flex items-center px-4 rounded-l-none rounded-r-md border border-l-0 text-white', 
                             mqttConnectionStatus === 'connected' ? 'bg-red-500 hover:bg-red-600 border-red-600' : 
                             mqttConnectionStatus === 'connecting' ? 'bg-yellow-500 hover:bg-yellow-600 border-yellow-600 !text-black' : 
                             'btn-primary border-blue-500']"
            >
              {{ mqttConnectionStatus === 'connected' ? 'Disconnect' : (mqttConnectionStatus === 'connecting' ? 'Stop' : 'Connect') }}
            </button>
        </div>
        <p v-if="mqttError" class="text-xs text-red-500 mt-1">{{ mqttError }}</p>
        <p v-else-if="mqttConnectionStatus === 'connected'" class="text-xs text-green-500 mt-1">Connected to {{ store.getters.mqttBrokerUrl }}. Subscribed to '{{ MqttService.MQTT_TOPIC_GAME }}'.</p>
        <p v-else-if="mqttConnectionStatus === 'connecting'" class="text-xs text-yellow-600 mt-1">Connecting to {{ localMqttBrokerUrl }}... (Click "Stop" to cancel)</p>
        <p v-else-if="mqttConnectionStatus === 'disconnected'" class="text-xs text-gray-500 mt-1">Not connected.</p>
      </div>

      <!-- Global Triggers -->
      <div>
        <p class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Global "Toggle Current/Pause All" Trigger:</p>
        <div class="flex items-center justify-between space-x-4 mb-3">
            <div class="flex items-center">
                <span class="text-sm mr-2 text-gray-600 dark:text-gray-400">Hotkey:</span>
                <button type="button" @click="startCaptureGlobalHotkey('stopPause')" class="input-base w-12 h-8 font-mono text-lg p-0 cursor-pointer flex items-center justify-center">
                    <span>{{ globalHotkeyStopPauseDisplay || '-' }}</span>
                </button>
                <button v-if="globalHotkeyStopPause" type="button" @click="clearGlobalHotkey('stopPause')" class="trigger-clear-btn">Clear</button>
                <span v-else class="trigger-clear-btn-placeholder"></span>
            </div>
            <div class="flex items-center">
                <span class="text-sm mr-2 text-gray-600 dark:text-gray-400">MQTT:</span>
                <button type="button" @click="startCaptureGlobalMqttChar('stopPause')" class="input-base w-12 h-8 font-mono text-lg p-0 cursor-pointer flex items-center justify-center">
                    <span>{{ globalMqttStopPauseDisplay || '-' }}</span>
                </button>
                <button v-if="globalMqttStopPause" type="button" @click="clearGlobalMqttChar('stopPause')" class="trigger-clear-btn">Clear</button>
                <span v-else class="trigger-clear-btn-placeholder"></span>
            </div>
        </div>
      </div>
      <div>
        <p class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Global "Run All Timers" Trigger:</p>
        <div class="flex items-center justify-between space-x-4 mb-3">
            <div class="flex items-center">
                <span class="text-sm mr-2 text-gray-600 dark:text-gray-400">Hotkey:</span>
                <button type="button" @click="startCaptureGlobalHotkey('runAll')" class="input-base w-12 h-8 font-mono text-lg p-0 cursor-pointer flex items-center justify-center">
                    <span>{{ globalHotkeyRunAllDisplay || '-' }}</span>
                </button>
                <button v-if="globalHotkeyRunAll" type="button" @click="clearGlobalHotkey('runAll')" class="trigger-clear-btn">Clear</button>
                <span v-else class="trigger-clear-btn-placeholder"></span>
            </div>
            <div class="flex items-center">
                <span class="text-sm mr-2 text-gray-600 dark:text-gray-400">MQTT:</span>
                <button type="button" @click="startCaptureGlobalMqttChar('runAll')" class="input-base w-12 h-8 font-mono text-lg p-0 cursor-pointer flex items-center justify-center">
                     <span>{{ globalMqttRunAllDisplay || '-' }}</span>
                </button>
                <button v-if="globalMqttRunAll" type="button" @click="clearGlobalMqttChar('runAll')" class="trigger-clear-btn">Clear</button>
                <span v-else class="trigger-clear-btn-placeholder"></span>
            </div>
        </div>
      </div>
      <div>
        <p class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Global "Pass Turn" Trigger:</p>
        <div class="flex items-center justify-between space-x-4 mb-6">
            <div class="flex items-center">
                <span class="text-sm mr-2 text-gray-600 dark:text-gray-400">Hotkey:</span>
                <button type="button" @click="startCaptureGlobalHotkey('passTurn')" class="input-base w-12 h-8 font-mono text-lg p-0 cursor-pointer flex items-center justify-center">
                    <span>{{ globalHotkeyPassTurnDisplay || '-' }}</span>
                </button>
                <button v-if="globalHotkeyPassTurn" type="button" @click="clearGlobalHotkey('passTurn')" class="trigger-clear-btn">Clear</button>
                <span v-else class="trigger-clear-btn-placeholder"></span>
            </div>
            <div class="flex items-center">
                <span class="text-sm mr-2 text-gray-600 dark:text-gray-400">MQTT:</span>
                <button type="button" @click="startCaptureGlobalMqttChar('passTurn')" class="input-base w-12 h-8 font-mono text-lg p-0 cursor-pointer flex items-center justify-center">
                     <span>{{ globalMqttPassTurnDisplay || '-' }}</span>
                </button>
                <button v-if="globalMqttPassTurn" type="button" @click="clearGlobalMqttChar('passTurn')" class="trigger-clear-btn">Clear</button>
                <span v-else class="trigger-clear-btn-placeholder"></span>
            </div>
        </div>
      </div>
      
      <div class="flex items-center justify-between mb-4 mt-6">
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Dark Mode</span>
        <button @click="toggleTheme" class="px-3 py-1.5 rounded-md text-sm font-medium" :class="theme === 'dark' ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-800'">
          {{ theme === 'dark' ? 'On' : 'Off' }}
        </button>
      </div>
      <div class="flex items-center justify-between">
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Mute Audio</span>
        <button @click="toggleMute" class="px-3 py-1.5 rounded-md text-sm font-medium" :class="isMuted ? 'bg-red-500 text-white' : 'bg-gray-200 text-gray-800'">
          {{ isMuted ? 'Muted' : 'Unmuted' }}
        </button>
      </div>
    </section>
    
    <section class="w-full max-w-3xl mt-4 space-y-3">
      <button @click="saveAndClose" class="w-full btn btn-primary btn-lg text-xl py-3" :disabled="players.length < 2 && players.length !==0">Save & Close</button>
      <button @click="resetPlayerTimersConfirm" class="w-full btn btn-warning py-2">Reset Player Timers</button>
      <button @click="fullResetAppConfirm" class="w-full btn btn-danger py-2">Reset Entire App Data</button>
    </section>
    <PlayerForm v-if="showPlayerModal" :player="editingPlayer" @close="closePlayerModal" @save="savePlayer"/>

    <HotkeyCaptureOverlay 
      :visible="isCapturingGlobalHotkey"
      @captured="handleGlobalHotkeyCaptured"
      @cancel="cancelCaptureGlobalHotkey"
    />
    <MqttCharCaptureOverlay
      :visible="isCapturingGlobalMqttChar"
      @cancel="cancelCaptureGlobalMqttChar" 
    />
  </div>
</template>

<style scoped>
.trigger-clear-btn {
    @apply text-xs text-blue-500 hover:underline ml-2 px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-600;
    min-width: 40px; /* Adjust this width to match the "Clear" button's typical width */
    display: inline-block; /* Important for width and centering if text-align used */
    text-align: center; /* Center the "Clear" text if button width is larger */
}
.trigger-clear-btn-placeholder {
    @apply ml-2 px-2 py-1; /* Match horizontal spacing and padding */
    min-width: 40px; /* Match the width of the actual clear button */
    display: inline-block; /* To take up space */
    visibility: hidden; /* Makes it take space but not be visible */
}
</style>

<script setup>
import { ref, computed, watch, onUnmounted } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import PlayerForm from '../components/PlayerForm.vue';
import { formatTime } from '../utils/timeFormatter';
import DefaultAvatarIcon from '../components/DefaultAvatarIcon.vue';
import HotkeyCaptureOverlay from '../components/HotkeyCaptureOverlay.vue';
import MqttCharCaptureOverlay from '../components/MqttCharCaptureOverlay.vue';
import { MqttService } from '../services/MqttService';

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

const players = computed(() => store.getters.players);
const theme = computed(() => store.getters.theme);
const isMuted = computed(() => store.getters.isMuted);

const localMqttBrokerUrl = ref(store.getters.mqttBrokerUrl);
watch(() => store.getters.mqttBrokerUrl, (newUrl) => { localMqttBrokerUrl.value = newUrl; });
const mqttConnectionStatus = MqttService.connectionStatus;
const mqttError = MqttService.error;

const globalHotkeyStopPause = computed(() => store.getters.globalHotkeyStopPause);
const globalHotkeyStopPauseDisplay = computed(() => globalHotkeyStopPause.value ? globalHotkeyStopPause.value.toUpperCase() : '');
const globalMqttStopPause = computed(() => store.getters.globalMqttStopPause);
const globalMqttStopPauseDisplay = computed(() => globalMqttStopPause.value ? globalMqttStopPause.value.toUpperCase() : '');

const globalHotkeyRunAll = computed(() => store.getters.globalHotkeyRunAll);
const globalHotkeyRunAllDisplay = computed(() => globalHotkeyRunAll.value ? globalHotkeyRunAll.value.toUpperCase() : '');
const globalMqttRunAll = computed(() => store.getters.globalMqttRunAll);
const globalMqttRunAllDisplay = computed(() => globalMqttRunAll.value ? globalMqttRunAll.value.toUpperCase() : '');

const globalHotkeyPassTurn = computed(() => store.getters.globalHotkeyPassTurn);
const globalHotkeyPassTurnDisplay = computed(() => globalHotkeyPassTurn.value ? globalHotkeyPassTurn.value.toUpperCase() : '');
const globalMqttPassTurn = computed(() => store.getters.globalMqttPassTurn);
const globalMqttPassTurnDisplay = computed(() => globalMqttPassTurn.value ? globalMqttPassTurn.value.toUpperCase() : '');

const showPlayerModal = ref(false);
const editingPlayer = ref(null);

const openAddPlayerModal = () => {
  if (players.value.length < 99) { 
    editingPlayer.value = null;
    showPlayerModal.value = true;
  } else {
     alert("Maximum player limit (99) reached."); 
  }
};
const openEditPlayerModal = (player) => {
  editingPlayer.value = player;
  showPlayerModal.value = true;
};
const closePlayerModal = () => {
  showPlayerModal.value = false;
  editingPlayer.value = null;
};
const savePlayer = (playerData) => {
  if (playerData.id) {
    store.dispatch('updatePlayer', playerData);
  } else {
    store.dispatch('addPlayer', {
      name: playerData.name,
      avatar: playerData.avatar,
      initialTimerSec: playerData.initialTimerSec,
      currentTimerSec: playerData.currentTimerSec,
      hotkey: playerData.hotkey,
      mqttChar: playerData.mqttChar
    });
  }
  closePlayerModal();
};
const confirmDeletePlayer = (playerId) => {
  if (window.confirm('Are you sure you want to delete this player?')) {
    store.dispatch('deletePlayer', playerId);
  }
};
const shufflePlayers = () => { store.dispatch('shufflePlayers'); };
const reversePlayers = () => { store.dispatch('reversePlayers'); };
const movePlayerUp = (index) => {
  if (index > 0) {
    const newPlayersOrder = [...players.value];
    const temp = newPlayersOrder[index];
    newPlayersOrder[index] = newPlayersOrder[index - 1];
    newPlayersOrder[index - 1] = temp;
    store.dispatch('reorderPlayers', newPlayersOrder);
  }
};
const movePlayerDown = (index) => {
  if (index < players.value.length - 1) {
    const newPlayersOrder = [...players.value];
    const temp = newPlayersOrder[index];
    newPlayersOrder[index] = newPlayersOrder[index + 1];
    newPlayersOrder[index + 1] = temp;
    store.dispatch('reorderPlayers', newPlayersOrder);
  }
};


const isCapturingGlobalHotkey = ref(false);
const isCapturingGlobalMqttChar = ref(false);
const currentGlobalActionType = ref(null); // 'stopPause', 'runAll', or 'passTurn'


const startCaptureGlobalHotkey = (actionType) => {
  currentGlobalActionType.value = actionType;
  isCapturingGlobalHotkey.value = true;
};
const cancelCaptureGlobalHotkey = () => {
  isCapturingGlobalHotkey.value = false;
  currentGlobalActionType.value = null;
};
const clearGlobalHotkey = (actionType) => {
  if (actionType === 'stopPause') store.dispatch('setGlobalHotkeyStopPause', null);
  else if (actionType === 'runAll') store.dispatch('setGlobalHotkeyRunAll', null);
  else if (actionType === 'passTurn') store.dispatch('setGlobalHotkeyPassTurn', null);
};
const handleGlobalHotkeyCaptured = (key) => {
  isCapturingGlobalHotkey.value = false;
  const actionType = currentGlobalActionType.value;
  if (!actionType || key.length !== 1) { currentGlobalActionType.value = null; return; }
  let conflictMessage = '';
  if (store.state.players.some(p => p.hotkey === key)) { 
    conflictMessage = `Hotkey "${key.toUpperCase()}" is already used by a player.`;
  } 
  else if (actionType === 'stopPause') {
    if (store.state.globalHotkeyRunAll === key) conflictMessage = `Hotkey "${key.toUpperCase()}" is Global Run All Timers Hotkey.`;
    if (store.state.globalHotkeyPassTurn === key) conflictMessage = `Hotkey "${key.toUpperCase()}" is Global Pass Turn Hotkey.`;
  } else if (actionType === 'runAll') {
    if (store.state.globalHotkeyStopPause === key) conflictMessage = `Hotkey "${key.toUpperCase()}" is Global Stop/Pause Hotkey.`;
    if (store.state.globalHotkeyPassTurn === key) conflictMessage = `Hotkey "${key.toUpperCase()}" is Global Pass Turn Hotkey.`;
  } else if (actionType === 'passTurn') {
    if (store.state.globalHotkeyStopPause === key) conflictMessage = `Hotkey "${key.toUpperCase()}" is Global Stop/Pause Hotkey.`;
    if (store.state.globalHotkeyRunAll === key) conflictMessage = `Hotkey "${key.toUpperCase()}" is Global Run All Hotkey.`;
  }
  if (conflictMessage) { alert(conflictMessage); currentGlobalActionType.value = null; return; }
  if (actionType === 'stopPause') store.dispatch('setGlobalHotkeyStopPause', key);
  else if (actionType === 'runAll') store.dispatch('setGlobalHotkeyRunAll', key);
  else if (actionType === 'passTurn') store.dispatch('setGlobalHotkeyPassTurn', key);
  currentGlobalActionType.value = null;
};

const startCaptureGlobalMqttChar = (actionType) => {
  if (MqttService.connectionStatus.value !== 'connected') {
    alert('MQTT broker is not connected. Please connect first.');
    return;
  }
  currentGlobalActionType.value = actionType;
  isCapturingGlobalMqttChar.value = true;
  MqttService.startMqttCharCapture(handleGlobalMqttCharCapturedDirect); 
};
const cancelCaptureGlobalMqttChar = () => {
  isCapturingGlobalMqttChar.value = false;
  currentGlobalActionType.value = null;
  MqttService.stopMqttCharCapture();
};
const clearGlobalMqttChar = (actionType) => {
  if (actionType === 'stopPause') store.dispatch('setGlobalMqttStopPause', null);
  else if (actionType === 'runAll') store.dispatch('setGlobalMqttRunAll', null);
  else if (actionType === 'passTurn') store.dispatch('setGlobalMqttPassTurn', null);
};
const handleGlobalMqttCharCapturedDirect = (charKey) => { 
  isCapturingGlobalMqttChar.value = false;
  const actionType = currentGlobalActionType.value;
  if (!actionType || charKey.length !== 1) { currentGlobalActionType.value = null; return; }
  let conflictMessage = '';
  if (store.state.players.some(p => p.mqttChar === charKey)) {
    conflictMessage = `MQTT Char "${charKey.toUpperCase()}" is already used by a player.`;
  }
  else if (actionType === 'stopPause') {
    if (store.state.globalMqttRunAll === charKey) conflictMessage = `MQTT Char "${charKey.toUpperCase()}" is Global Run All Timers MQTT Char.`;
    if (store.state.globalMqttPassTurn === charKey) conflictMessage = `MQTT Char "${charKey.toUpperCase()}" is Global Pass Turn MQTT Char.`;
  } else if (actionType === 'runAll') {
    if (store.state.globalMqttStopPause === charKey) conflictMessage = `MQTT Char "${charKey.toUpperCase()}" is Global Stop/Pause MQTT Char.`;
    if (store.state.globalMqttPassTurn === charKey) conflictMessage = `MQTT Char "${charKey.toUpperCase()}" is Global Pass Turn MQTT Char.`;
  } else if (actionType === 'passTurn') {
    if (store.state.globalMqttStopPause === charKey) conflictMessage = `MQTT Char "${charKey.toUpperCase()}" is Global Stop/Pause MQTT Char.`;
    if (store.state.globalMqttRunAll === charKey) conflictMessage = `MQTT Char "${charKey.toUpperCase()}" is Global Run All Timers MQTT Char.`;
  }
  if (conflictMessage) { alert(conflictMessage); currentGlobalActionType.value = null; return; }
  if (actionType === 'stopPause') store.dispatch('setGlobalMqttStopPause', charKey);
  else if (actionType === 'runAll') store.dispatch('setGlobalMqttRunAll', charKey);
  else if (actionType === 'passTurn') store.dispatch('setGlobalMqttPassTurn', charKey);
  currentGlobalActionType.value = null;
};

const toggleMqttConnection = async () => {
    if (MqttService.connectionStatus.value === 'connected' || MqttService.connectionStatus.value === 'connecting') {
        MqttService.disconnect();
        await store.dispatch('setMqttConnectDesired', false); 
    } else {
        if (!localMqttBrokerUrl.value.trim()) { alert("Please enter MQTT Broker URL (e.g., ws://host:port)."); return; }
        try {
            const url = new URL(localMqttBrokerUrl.value);
            if(!url.protocol.startsWith('ws')) { throw new Error("URL must start with ws:// or wss://"); }
        } catch (e) { alert(`Invalid MQTT Broker URL: ${e.message}. Please use format ws://host:port or wss://host:port.`); return; }
        await store.dispatch('setMqttBrokerUrl', localMqttBrokerUrl.value);
        MqttService.connect(localMqttBrokerUrl.value);
    }
};
onUnmounted(() => { 
    if (MqttService.isCapturingMqttChar.value) { MqttService.stopMqttCharCapture(); }
});

const toggleTheme = () => { store.dispatch('toggleTheme'); };
const toggleMute = () => { store.dispatch('setMuted', !isMuted.value); };
const saveAndClose = () => {
  store.dispatch('saveState');
  if (players.value.length >= 2) {
    if (store.state.currentPlayerIndex >= players.value.length || store.state.currentPlayerIndex < 0) {
        store.commit('SET_CURRENT_PLAYER_INDEX', 0);
    }
    store.commit('PAUSE_ALL_TIMERS'); 
    store.commit('SET_GAME_MODE', 'normal');
    router.push({ name: 'Game' });
  } else if (players.value.length === 0) {
    alert('Add at least 2 players to start a game.');
  } else {
     alert('At least 2 players are required to start a game.');
  }
};
const resetPlayerTimersConfirm = () => {
    if (window.confirm('Are you sure you want to reset all current players\' timers to their initial values? This will not delete players.')) {
        store.dispatch('resetGame');
    }
};
const fullResetAppConfirm = () => {
    if (window.confirm('Are you sure you want to reset all app data? This includes all players, settings, and timer states. The app will revert to its default state with 2 predefined players.')) {
        store.dispatch('fullResetApp');
    }
};
</script>