script.js

import { updateCharacterAmounts } from './helper.js';

// Show timer digits only after Azeret Mono has loaded to prevent font flicker
(function () {
  function showTimer() {
    document.documentElement.classList.add('fonts-ready');
  }
  if (document.fonts?.load) {
    document.fonts
      .load('600 1em "Azeret Mono"')
      .then(showTimer)
      .catch(showTimer);
    setTimeout(showTimer, 3000); // Show anyway if font fails or is slow
  } else {
    showTimer();
  }
})();

// DOM Elements
let minutesDisplay,
  secondsDisplay,
  timerDisplayEl,
  startBtn,
  resetBtn,
  fullscreenBtn,
  settingsBtn,
  settingsDialog,
  closeSettingsBtn,
  playerCountInput,
  travellerCountInput,
  accelerateBtn,
  minuteButtons,
  secondButtons,
  infoBtn,
  infoDialog,
  closeInfoBtn,
  whatsNewDialog,
  closeWhatsNewBtn,
  changeHistoryDialog,
  closeChangeHistoryBtn;

let updateCurrentTimeDisplay = () => {};
let updateSessionCountdownDisplay = () => {};

const ONE_HOUR_MS = 60 * 60 * 1000;
const ONE_MINUTE_MS = 60 * 1000;
const ONE_DAY_MS = 24 * ONE_HOUR_MS;
const SESSION_COUNTDOWN_HOUR_THRESHOLD_MS = 90 * ONE_MINUTE_MS;
const STALE_TAB_MS = 2 * ONE_DAY_MS;
const LAST_ACTIVE_AT_KEY = 'lastActiveAt';

function getSessionEndDate(now, hour, minute) {
  const end = new Date(now);
  end.setHours(hour, minute, 0, 0);

  if (end <= now) {
    if (hour < 12 && now.getHours() >= 12) {
      end.setDate(end.getDate() + 1);
    } else {
      return null;
    }
  }

  return end;
}

function formatSessionCountdownText(remainingMs) {
  if (remainingMs <= 0) {
    return { text: "TIME'S UP!", phase: 'times-up' };
  }

  if (remainingMs >= SESSION_COUNTDOWN_HOUR_THRESHOLD_MS) {
    const hours = Math.floor(remainingMs / ONE_HOUR_MS);
    return {
      text: `${hours} hour${hours === 1 ? '' : 's'} remaining`,
      phase: 'hours',
    };
  }

  const minutes = Math.max(1, Math.ceil(remainingMs / ONE_MINUTE_MS));
  return {
    text: `${minutes} minute${minutes === 1 ? '' : 's'} remaining`,
    phase: 'minutes',
  };
}

function initSessionEndTimeSelectors() {
  const hourSelect = document.getElementById('sessionEndHour');
  const minuteSelect = document.getElementById('sessionEndMinute');
  if (!hourSelect || !minuteSelect || hourSelect.options.length > 0) return;

  for (let hour = 0; hour < 24; hour += 1) {
    const option = document.createElement('option');
    option.value = hour;
    option.textContent = String(hour).padStart(2, '0');
    hourSelect.appendChild(option);
  }

  for (let minute = 0; minute < 60; minute += 1) {
    const option = document.createElement('option');
    option.value = minute;
    option.textContent = String(minute).padStart(2, '0');
    minuteSelect.appendChild(option);
  }
}

function updateTimeSettingsUi() {
  const showCurrentTimeInput = document.getElementById('showCurrentTime');
  if (showCurrentTimeInput) {
    showCurrentTimeInput.checked = showCurrentTime;
  }

  const currentTimeEl = document.getElementById('currentTime');
  if (currentTimeEl) {
    currentTimeEl.hidden = !showCurrentTime;
  }

  document
    .querySelectorAll('label:has(input[name="clockFormat"])')
    .forEach((label) => {
      label.classList.toggle('inactive', !showCurrentTime);
      const input = label.querySelector('input');
      if (input) {
        input.disabled = !showCurrentTime;
      }
    });

  const showSessionCountdownInput = document.getElementById(
    'showSessionCountdown'
  );
  if (showSessionCountdownInput) {
    showSessionCountdownInput.checked = showSessionCountdown;
  }

  const sessionEndHourSelect = document.getElementById('sessionEndHour');
  const sessionEndMinuteSelect = document.getElementById('sessionEndMinute');
  if (sessionEndHourSelect) {
    sessionEndHourSelect.value = String(sessionEndHour);
    sessionEndHourSelect.disabled = !showSessionCountdown;
  }
  if (sessionEndMinuteSelect) {
    sessionEndMinuteSelect.value = String(sessionEndMinute);
    sessionEndMinuteSelect.disabled = !showSessionCountdown;
  }

  const sessionEndTimeLabel = document.getElementById('sessionEndTimeLabel');
  if (sessionEndTimeLabel) {
    sessionEndTimeLabel.classList.toggle('inactive', !showSessionCountdown);
  }

  const sessionCountdownEl = document.getElementById('sessionCountdown');
  if (sessionCountdownEl) {
    sessionCountdownEl.hidden = !showSessionCountdown;
  }

  if (showCurrentTime) {
    updateCurrentTimeDisplay();
  }
  if (showSessionCountdown) {
    updateSessionCountdownDisplay();
  }
}

function initTimeDisplays() {
  initSessionEndTimeSelectors();

  const currentTimeEl = document.getElementById('currentTime');
  const sessionCountdownEl = document.getElementById('sessionCountdown');

  updateCurrentTimeDisplay = () => {
    if (!currentTimeEl) return;
    const now = new Date();
    currentTimeEl.dateTime = now.toISOString();
    currentTimeEl.textContent = now.toLocaleTimeString(undefined, {
      hour: '2-digit',
      minute: '2-digit',
      hour12: clockFormat === '12',
    });
  };

  updateSessionCountdownDisplay = () => {
    if (!sessionCountdownEl) return;

    const now = new Date();
    const sessionEnd = getSessionEndDate(now, sessionEndHour, sessionEndMinute);
    const remainingMs = sessionEnd ? sessionEnd - now : 0;
    const { text, phase } = formatSessionCountdownText(remainingMs);

    sessionCountdownEl.textContent = text;
    sessionCountdownEl.setAttribute('aria-label', text);
    sessionCountdownEl.classList.toggle('final-hour', phase === 'minutes');
    sessionCountdownEl.classList.toggle('times-up', phase === 'times-up');
  };

  const tickTimeDisplays = () => {
    if (showCurrentTime) {
      updateCurrentTimeDisplay();
    }
    if (showSessionCountdown) {
      updateSessionCountdownDisplay();
    }
  };

  tickTimeDisplays();
  setInterval(tickTimeDisplays, 1000);
}

// Utility functions
const connectivityUtils = {
  isOnline: () => navigator.onLine,
  addStatusListener: (onlineCallback, offlineCallback) => {
    globalThis.addEventListener('online', onlineCallback);
    globalThis.addEventListener('offline', offlineCallback);
  },
  removeStatusListener: (onlineCallback, offlineCallback) => {
    globalThis.removeEventListener('online', onlineCallback);
    globalThis.removeEventListener('offline', offlineCallback);
  },
};

const orientationUtils = {
  isPortrait: () => globalThis.matchMedia('(orientation: portrait)').matches,
  addOrientationListener: (callback) => {
    globalThis
      .matchMedia('(orientation: portrait)')
      .addEventListener('change', (e) => {
        callback(e.matches);
      });
  },
  removeOrientationListener: (callback) => {
    globalThis
      .matchMedia('(orientation: portrait)')
      .removeEventListener('change', callback);
  },
};

const staleTabUtils = {
  bannerDismissed: false,
  bannerEl: null,

  markActive() {
    localStorage.setItem(LAST_ACTIVE_AT_KEY, String(Date.now()));
  },

  isStale() {
    if (Date.now() - performance.timeOrigin >= STALE_TAB_MS) {
      return true;
    }

    const lastActive = Number(localStorage.getItem(LAST_ACTIVE_AT_KEY));
    return lastActive > 0 && Date.now() - lastActive >= STALE_TAB_MS;
  },

  showBanner() {
    if (!this.bannerEl) return;
    this.bannerEl.removeAttribute('hidden');
    document.body.classList.add('stale-tab-banner-visible');
    document.documentElement.style.setProperty(
      '--stale-tab-banner-height',
      `${this.bannerEl.offsetHeight}px`
    );
  },

  hideBanner() {
    if (!this.bannerEl) return;
    this.bannerEl.setAttribute('hidden', '');
    document.body.classList.remove('stale-tab-banner-visible');
    document.documentElement.style.removeProperty('--stale-tab-banner-height');
  },

  checkOnResume() {
    if (this.isStale() && !this.bannerDismissed) {
      this.showBanner();
    }
  },

  onBecameVisible() {
    this.bannerDismissed = false;
    this.checkOnResume();
    this.markActive();
  },

  onBecameHidden() {
    this.markActive();
  },

  init() {
    this.bannerEl = document.getElementById('staleTabBanner');
    document
      .getElementById('staleTabRefreshBtn')
      ?.addEventListener('click', () => {
        location.reload();
      });
    document.getElementById('staleTabDismissBtn')?.addEventListener('click', () => {
      this.bannerDismissed = true;
      this.hideBanner();
    });

    this.checkOnResume();
    this.markActive();
  },
};

const youtubeUtils = {
  play: () => {
    if (playMusic && youtubePlayer?.playVideo) {
      youtubePlayer.playVideo();
    }
  },
  pause: () => {
    if (playMusic && youtubePlayer?.pauseVideo) {
      youtubePlayer.pauseVideo();
    }
  },
  stop: () => {
    if (playMusic && youtubePlayer?.stopVideo) {
      youtubePlayer.stopVideo();
    }
  },
};

/** Inline SVG for the in-page YouTube play/pause control (`playing` → show pause icon). */
const YOUTUBE_CONTROL_SVG_PLAY = `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>`;
const YOUTUBE_CONTROL_SVG_PAUSE = `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>`;

function setYoutubeControlButtonIcon(playing) {
  const btn = document.querySelector('.youtube-control');
  if (!btn) return;
  btn.innerHTML = playing ? YOUTUBE_CONTROL_SVG_PAUSE : YOUTUBE_CONTROL_SVG_PLAY;
}

const YOUTUBE_PLAYER_CONTAINER_CLASS = 'youtube-player-container';

function getYoutubePlayerContainer() {
  return document.querySelector(`.${YOUTUBE_PLAYER_CONTAINER_CLASS}`);
}

const timerUtils = {
  stop: () => {
    clearInterval(timerId);
    isRunning = false;
    updateDisplay();
  },
  updateButtonStates: (buttons, activeButton) => {
    buttons.forEach((btn) => btn.classList.remove('active'));
    if (activeButton) {
      activeButton.classList.add('active');
    }
  },
  holdToActivate: (button, holdDuration, onProgress, onComplete) => {
    let startTime;
    let animationFrame;
    let holdTimer;

    const start = (e) => {
      // Prevent text selection during hold
      e.preventDefault();
      startTime = Date.now();

      const animate = () => {
        const elapsed = Date.now() - startTime;
        const progress = Math.min(elapsed / holdDuration, 1);

        if (onProgress) {
          button.style.setProperty('--progress-width', `${progress * 100}%`);
          onProgress(progress);
        }

        if (progress < 1) {
          animationFrame = requestAnimationFrame(animate);
        }
      };

      animate();

      holdTimer = setTimeout(() => {
        if (onComplete) {
          onComplete();
        }
      }, holdDuration);
    };

    const cancel = () => {
      if (animationFrame) {
        cancelAnimationFrame(animationFrame);
      }
      if (holdTimer) {
        clearTimeout(holdTimer);
      }
      if (onProgress) {
        button.style.setProperty('--progress-width', '0%');
        onProgress(0);
      }
    };

    // Add event listeners with passive option where appropriate
    button.addEventListener('mousedown', start);
    button.addEventListener('touchstart', start, { passive: false }); // We need preventDefault, so can't be passive
    button.addEventListener('mouseup', cancel, { passive: true });
    button.addEventListener('mouseleave', cancel, { passive: true });
    button.addEventListener('touchend', cancel, { passive: true });
    button.addEventListener('touchcancel', cancel, { passive: true });
  },
};

// Keyboard shortcuts utilities
const keyboardShortcutsUtils = {
  isValidShortcut: (event) => {
    // Allow single keys, but exclude some system keys
    const excludedKeys = [
      'F1',
      'F2',
      'F3',
      'F4',
      'F5',
      'F6',
      'F7',
      'F8',
      'F9',
      'F10',
      'F11',
      'F12',
    ];
    const key = event.key.toUpperCase();
    return (
      !excludedKeys.includes(key) &&
      !event.ctrlKey &&
      !event.altKey &&
      !event.metaKey
    );
  },

  checkConflict: (newKey, currentAction) => {
    for (const [action, key] of Object.entries(keyboardShortcuts)) {
      if (action !== currentAction && key === newKey) {
        return action;
      }
    }
    return null;
  },

  updateShortcutDisplay: (inputId, key) => {
    const input = document.getElementById(inputId);
    if (input) {
      if (key === ' ') {
        input.value = 'Space';
      } else if (key === '') {
        input.value = '';
      } else {
        input.value = key;
      }
    }
  },

  loadShortcuts: () => {
    keyboardShortcutsUtils.updateShortcutDisplay(
      'shortcutSettings',
      keyboardShortcuts.settings
    );
    keyboardShortcutsUtils.updateShortcutDisplay(
      'shortcutWakeUp',
      keyboardShortcuts.wakeUp
    );
    keyboardShortcutsUtils.updateShortcutDisplay(
      'shortcutReset',
      keyboardShortcuts.reset
    );
    keyboardShortcutsUtils.updateShortcutDisplay(
      'shortcutAccelerate',
      keyboardShortcuts.accelerate
    );
    keyboardShortcutsUtils.updateShortcutDisplay(
      'shortcutFullscreen',
      keyboardShortcuts.fullscreen
    );
    keyboardShortcutsUtils.updateShortcutDisplay(
      'shortcutInfo',
      keyboardShortcuts.info
    );
  },

  resetToDefaults: () => {
    // Explicitly reset to defaults, clearing any corrupted data
    keyboardShortcuts = { ...DEFAULT_KEYBOARD_SHORTCUTS };

    // Update the UI immediately
    keyboardShortcutsUtils.loadShortcuts();

    // Update shortcut hints on buttons
    updateWakeUpShortcutHint();
    updateAccelerateShortcutHint();

    // Save the clean defaults to localStorage
    saveSettings();

    console.log('Keyboard shortcuts reset to defaults:', keyboardShortcuts);
  },

  // Nuclear option: completely remove and recreate the keyboardShortcuts key
  forceReset: () => {
    // Get current settings
    const savedSettings = localStorage.getItem('quickTimerSettings');
    if (savedSettings) {
      const settings = JSON.parse(savedSettings);

      // Remove the keyboardShortcuts key completely
      delete settings.keyboardShortcuts;

      // Save settings without keyboardShortcuts
      localStorage.setItem('quickTimerSettings', JSON.stringify(settings));
    }

    // Reset to defaults
    keyboardShortcuts = { ...DEFAULT_KEYBOARD_SHORTCUTS };

    // Update the UI immediately
    keyboardShortcutsUtils.loadShortcuts();
    updateWakeUpShortcutHint();
    updateAccelerateShortcutHint();

    // Save the clean defaults to localStorage
    saveSettings();

    console.log(
      'Keyboard shortcuts force reset (key deleted and recreated):',
      keyboardShortcuts
    );
  },

  clearAll: () => {
    // Clear all shortcuts (set to empty strings)
    keyboardShortcuts = {
      settings: '',
      wakeUp: '',
      reset: '',
      accelerate: '',
      fullscreen: '',
      info: '',
    };

    // Update the UI immediately
    keyboardShortcutsUtils.loadShortcuts();

    // Update shortcut hints on buttons
    updateWakeUpShortcutHint();
    updateAccelerateShortcutHint();

    // Save the cleared shortcuts to localStorage
    saveSettings();

    console.log('All keyboard shortcuts cleared:', keyboardShortcuts);
  },
};

// Button Labels
const BUTTON_LABELS = {
  WAKE_UP: '⏰ Wake Up!',
  PAUSE: '⏸️ Pause Day',
  RESUME: '▶️ Resume Day',
  RESET: '🔄 Reset Day',
  ACCELERATE: '⏩ Accelerate Time',
  ACCELERATE_CONFIRM: 'Confirm…',
  ACCELERATE_TIME_FLIES: '{time flies}',
  START_DAY: (day) => `▶ Start Day ${day}`,
  FULLSCREEN: {
    ENTER:
      '<svg viewBox="0 0 24 24" width="24" height="24" class="fullscreen-icon"><path fill="currentColor" d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>',
    EXIT: '<svg viewBox="0 0 24 24" width="24" height="24" class="fullscreen-icon"><path fill="currentColor" d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>',
  },
};

// Default YouTube playlist URL
const DEFAULT_YOUTUBE_PLAYLIST =
  'https://www.youtube.com/watch?v=TInSYXP9ZB8&list=PLhCDyBm6z1NwkkOAyQAMQkeberU9rwMcc';

const ATMOSPHERIC_PLAYLIST =
  'https://www.youtube.com/watch?v=1oCIZjPxthY&list=PLhCDyBm6z1NyrifTlGYj55uPb6xrlgBih';

// YouTube API Key (placeholder - replace with actual key if needed)
const YOUTUBE_API_KEY = 'YOUR_YOUTUBE_API_KEY_HERE';

// Import version tracking from changelog
import { APP_VERSION, CHANGELOG } from './changelog.js';

// Audio Elements
let endSound = null;
let wakeUpSound = null;
let nominationsOpenSound = null;
let previewSound = null; // New audio element for previews

// Wake Lock state
let wakeLock = null;

// Timer state
let timeLeft = 0;
let timerId = null;
let isRunning = false;
let selectedSeconds = 0;
let selectedMinutes = 0;
let normalInterval = 1000; // Normal 1 second interval
let currentInterval = normalInterval;
let wakeUpTimeout = null;
let isEndSoundPlaying = false; // New state variable
let hasReset = false; // New state variable to track reset state
let accelerateConfirmTimeout = null;

// Game pace multipliers
const PACE_MULTIPLIERS = {
  relaxed: 1,
  normal: 0.8, // 20% faster than relaxed
  speedy: 0.5, // 50% faster than relaxed
  blitz: 0.33, // 67% faster than relaxed
};

// Settings state
let playerCount = 10; // Default to 10 players
let travellerCount = 0; // Default to 0 travellers
let isFirstLoad = false;
let currentDay = null;
/** Day number → preset index used for that day. Only presets we skipped get 💀; used presets keep "Day N"; rest renumbered from current. */
let usedPresetByDay = {};
/** Preset day indices permanently hidden when their day ended (countdown reached zero). Never shown again until new game. */
let hiddenPresetDays = [];
/** True only when the timer has run out this day (dusk); used so we show compact preset list only then, not when e.g. clicking a preset. */
let isDuskPresetView = false;
let currentPace = 'normal'; // Default pace
let playMusic = false; // Default to false for new users
let playMusicAtNight = false; // Default to false for new users
let playSoundEffects = true; // Default to true for sound effects
let youtubeVolume = 15; // Default to 15%
let soundEffectsVolume = 75; // Default to 75%
let backgroundTheme = 'medieval-cartoon'; // Default background theme
let youtubePlaylistUrl = DEFAULT_YOUTUBE_PLAYLIST; // Default playlist
let keepDisplayOn = true; // Default to true for wake lock
let showPlayerCountQr = false; // Optional QR linking to count.arcane-scripts.net
let showCurrentTime = true; // Show wall clock under day display
let clockFormat = '24'; // '12' or '24'
let showSessionCountdown = false;
let sessionEndHour = 23;
let sessionEndMinute = 0;
let youtubePlayer = null;
let endOfDaySound = 'cathedral-bell-v2.mp3'; // Default end of day sound
let wakeUpSoundFile = 'chisel-bell-01-loud-v2.mp3'; // Default wake up sound
let nominationsOpenSoundFile = 'nominations-open-laura.mp3'; // Default nominations open sound
let acceptedPortraitWarning = false; // Default to false for portrait warning
let autoOpenNominations = false;
let autoOpenNominationsDelay = 60; // seconds
let autoOpenNominationsInterval = null;
let nominationsCountdownRemaining = 0;
/** Reused for fallback beep to avoid allocating a new AudioContext each time */
let beepAudioContext = null;

// Keyboard shortcuts
const DEFAULT_KEYBOARD_SHORTCUTS = {
  settings: 'q',
  wakeUp: ' ',
  reset: 'r',
  accelerate: 'a',
  fullscreen: 'f',
  info: 'i',
};

let keyboardShortcuts = { ...DEFAULT_KEYBOARD_SHORTCUTS };

/** Maps shortcut input element ids to keyboardShortcuts keys */
const SHORTCUT_INPUT_ID_TO_ACTION = {
  shortcutSettings: 'settings',
  shortcutWakeUp: 'wakeUp',
  shortcutReset: 'reset',
  shortcutAccelerate: 'accelerate',
  shortcutFullscreen: 'fullscreen',
  shortcutInfo: 'info',
};

// Helper function to re-enable all shortcut inputs
function reEnableShortcutInputs() {
  document.querySelectorAll('.shortcut-input').forEach((el) => {
    el.disabled = false;
    el.style.opacity = '1';
  });
}

// Start recording a new shortcut
function startShortcutRecording(input, action) {
  // Clear any existing recording and restore their previous values
  document.querySelectorAll('.shortcut-input.recording').forEach((el) => {
    el.classList.remove('recording');
    // Restore the previous value for any inputs that were in recording mode
    const inputId = el.id;
    const actionName = SHORTCUT_INPUT_ID_TO_ACTION[inputId];
    if (actionName && keyboardShortcuts[actionName]) {
      keyboardShortcutsUtils.updateShortcutDisplay(
        inputId,
        keyboardShortcuts[actionName]
      );
    }
  });

  // Start recording this input
  input.classList.add('recording');
  input.value = 'Press a key...';
  input.focus();

  // Disable other shortcut inputs while recording
  document.querySelectorAll('.shortcut-input').forEach((el) => {
    if (el !== input) {
      el.disabled = true;
      el.style.opacity = '0.5';
    }
  });

  const handleKeyDown = (e) => {
    e.preventDefault();
    e.stopPropagation();

    if (e.key === 'Escape') {
      // Cancel recording
      input.classList.remove('recording');
      keyboardShortcutsUtils.updateShortcutDisplay(
        input.id,
        keyboardShortcuts[action]
      );

      // Re-enable other shortcut inputs
      reEnableShortcutInputs();

      document.removeEventListener('keydown', handleKeyDown);
      return;
    }

    if (keyboardShortcutsUtils.isValidShortcut(e)) {
      const newKey = e.key;

      // Check for conflicts
      const conflict = keyboardShortcutsUtils.checkConflict(newKey, action);
      if (conflict) {
        // Show conflict warning
        input.classList.add('shortcut-conflict');
        input.value = `Conflict with ${conflict}`;
        setTimeout(() => {
          input.classList.remove('shortcut-conflict');
          input.value = 'Press a key...';
        }, 2000);
        return;
      }

      // Update the shortcut
      keyboardShortcuts[action] = newKey;
      input.classList.remove('recording');
      keyboardShortcutsUtils.updateShortcutDisplay(input.id, newKey);

      // Re-enable other shortcut inputs
      reEnableShortcutInputs();

      // Update shortcut hints if changed
      if (action === 'wakeUp') {
        updateWakeUpShortcutHint();
      }
      if (action === 'accelerate') {
        updateAccelerateShortcutHint();
      }

      saveSettings();
      document.removeEventListener('keydown', handleKeyDown);
    }
  };

  document.addEventListener('keydown', handleKeyDown);
}

// Helper function to update wake up shortcut hint
function updateWakeUpShortcutHint() {
  const hintElement = document.getElementById('wakeUpShortcutHint');
  if (!hintElement) return;

  const shortcutKey = keyboardShortcuts.wakeUp;

  if (!shortcutKey) {
    hintElement.textContent = '';
    return;
  }

  // Special handling for MediaPlayPause
  if (shortcutKey === 'MediaPlayPause') {
    hintElement.innerHTML =
      '<svg viewBox="0 0 24 24" width="16" height="12" style="vertical-align: middle;"><path fill="currentColor" d="M3 5v14l8-7z"/><path fill="currentColor" d="M14 5h2v14h-2zm4 0h2v14h-2z"/></svg>';
  } else if (shortcutKey === ' ') {
    hintElement.textContent = 'Space';
  } else {
    hintElement.textContent = shortcutKey.toUpperCase();
  }
}

// Helper function to update accelerate shortcut hint
function updateAccelerateShortcutHint() {
  const hintElement = document.getElementById('accelerateShortcutHint');
  if (!hintElement) return;

  const shortcutKey = keyboardShortcuts.accelerate;

  if (!shortcutKey) {
    hintElement.textContent = '';
    return;
  }

  hintElement.textContent = shortcutKey.toUpperCase();
}

// Helper to set only the accelerate button label (preserves shortcut hint)
function setAccelerateButtonLabel(text) {
  const textEl = accelerateBtn?.querySelector('.button-text');
  if (textEl) textEl.textContent = text;
}

function getAccelerateButtonLabel() {
  return accelerateBtn?.querySelector('.button-text')?.textContent ?? '';
}

// Helper function to update start button text (preserving the shortcut hint)
function updateStartButtonText(text) {
  const buttonTextElement = startBtn.querySelector('.button-text');
  if (buttonTextElement) {
    buttonTextElement.textContent = text;
  } else {
    // Fallback if structure doesn't exist
    startBtn.textContent = text;
  }
}

// Helper function to update estimated game length
function updateEstimatedGameLength() {
  const presets = generateDayPresets(playerCount);
  let totalSeconds = 0;

  presets.forEach((preset) => {
    totalSeconds += preset.minutes * 60 + preset.seconds;
  });

  // Round up to the nearest minute
  const totalMinutes = Math.ceil(totalSeconds / 60);

  const estimatedGameLengthElement = document.getElementById(
    'estimatedGameLength'
  );
  if (estimatedGameLengthElement) {
    estimatedGameLengthElement.textContent = `${totalMinutes} minutes`;
  }
}

// Request wake lock
async function requestWakeLock() {
  if (!keepDisplayOn) return;
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    console.log('Wake Lock is active');
  } catch (err) {
    console.log(`Failed to request Wake Lock: ${err.name}, ${err.message}`);
  }
}

// Release wake lock
async function releaseWakeLock() {
  if (wakeLock) {
    try {
      await wakeLock.release();
      wakeLock = null;
      console.log('Wake Lock released');
    } catch (err) {
      console.log(`Failed to release Wake Lock: ${err.name}, ${err.message}`);
    }
  }
}

// Event listeners for wake lock and stale-tab banner
document.addEventListener('visibilitychange', async () => {
  if (document.visibilityState === 'visible') {
    staleTabUtils.onBecameVisible();
    await requestWakeLock();
  } else {
    staleTabUtils.onBecameHidden();
    await releaseWakeLock();
  }
});

window.addEventListener('pageshow', (event) => {
  if (event.persisted) {
    staleTabUtils.onBecameVisible();
  }
});

// Request wake lock and initialize on page load
document.addEventListener('DOMContentLoaded', async () => {
  staleTabUtils.init();

  try {
    await requestWakeLock();
  } catch (error) {
    console.error('Error requesting wake lock:', error);
  }

  // Initialize audio
  endSound = new Audio(`sounds/end-of-day/${endOfDaySound}`);
  wakeUpSound = new Audio(`sounds/wake-up/${wakeUpSoundFile}`);
  nominationsOpenSound = new Audio(
    `sounds/nominations-open/${nominationsOpenSoundFile}`
  );

  // Add connectivity listeners
  connectivityUtils.addStatusListener(
    () => {
      // When we come back online
      if (playMusic) {
        initYoutubePlayer();
        // If timer is running, resume music after a short delay to allow player initialization
        if (isRunning && timeLeft > 0) {
          setTimeout(() => {
            youtubeUtils.play();
          }, 2000); // 2 second delay to allow player to initialize
        }
      }
    },
    () => {
      // When we go offline, tear down the YouTube player (iframe + API object)
      if (youtubePlayer) {
        try {
          youtubePlayer.destroy();
        } catch (e) {
          console.log('Error destroying YouTube player on offline:', e);
        }
        youtubePlayer = null;
      }
      const container = getYoutubePlayerContainer();
      if (container) {
        container.remove();
      }
    }
  );

  // Initialize DOM elements
  minutesDisplay = document.getElementById('minutes');
  secondsDisplay = document.getElementById('seconds');
  timerDisplayEl = document.querySelector('.timer-display');
  startBtn = document.getElementById('startBtn');
  updateStartButtonText(BUTTON_LABELS.WAKE_UP);
  startBtn.disabled = false; // Ensure Wake Up button is enabled on load
  initTimeDisplays();
  resetBtn = document.getElementById('resetBtn');
  resetBtn.textContent = BUTTON_LABELS.RESET;
  resetBtn.disabled = true; // Reset button should be disabled initially
  fullscreenBtn = document.getElementById('fullscreenBtn');
  settingsBtn = document.getElementById('settingsBtn');
  settingsDialog = document.getElementById('settingsDialog');
  closeSettingsBtn = document.getElementById('closeSettings');
  playerCountInput = document.getElementById('playerCount');
  travellerCountInput = document.getElementById('travellerCount');
  accelerateBtn = document.getElementById('accelerateBtn');
  resetAccelerateButton();
  accelerateBtn.disabled = true; // Accelerate button should be disabled initially
  minuteButtons = document.querySelectorAll('.minute-btn');
  secondButtons = document.querySelectorAll('.second-btn');
  infoBtn = document.getElementById('infoBtn');
  infoDialog = document.getElementById('infoDialog');
  closeInfoBtn = document.getElementById('closeInfo');
  whatsNewDialog = document.getElementById('whatsNewDialog');
  closeWhatsNewBtn = document.getElementById('closeWhatsNew');
  changeHistoryDialog = document.getElementById('changeHistoryDialog');
  closeChangeHistoryBtn = document.getElementById('closeChangeHistory');
  // Ensure change history dialog is closed on initialization
  if (changeHistoryDialog) {
    changeHistoryDialog.close();
    // Also remove the 'open' attribute if present
    changeHistoryDialog.removeAttribute('open');
    // Double-check after a short delay in case something tries to open it
    setTimeout(() => {
      if (changeHistoryDialog.open) {
        changeHistoryDialog.close();
        changeHistoryDialog.removeAttribute('open');
      }
    }, 100);
  }

  // Add portrait warning dialog elements
  const portraitWarningDialog = document.getElementById(
    'portraitWarningDialog'
  );
  const acceptPortraitWarningBtn = document.getElementById(
    'acceptPortraitWarning'
  );

  // Add event listener for accepting portrait warning
  acceptPortraitWarningBtn.addEventListener('click', () => {
    acceptedPortraitWarning = true;
    saveSettings();
    portraitWarningDialog.close();
  });

  // Add click-outside-to-close handler for portrait warning dialog
  portraitWarningDialog.addEventListener('click', (e) => {
    if (e.target === portraitWarningDialog) {
      acceptedPortraitWarning = true;
      saveSettings();
      portraitWarningDialog.close();
    }
  });

  // Check for portrait mode and show warning if needed
  // Only show if actually in portrait mode and user hasn't accepted warning
  if (orientationUtils.isPortrait() && !acceptedPortraitWarning) {
    portraitWarningDialog.showModal();
  } else {
    // Ensure dialog is closed if we're in landscape mode
    portraitWarningDialog.close();
  }

  // Add orientation change listener
  orientationUtils.addOrientationListener((isPortrait) => {
    if (isPortrait && !acceptedPortraitWarning) {
      portraitWarningDialog.showModal();
    } else if (!isPortrait) {
      // Close dialog if user rotates back to landscape
      portraitWarningDialog.close();
    }
  });

  // Add event listener for "Use original playlist" link
  document
    .getElementById('useBardcorePlaylist')
    .addEventListener('click', (e) => {
      e.preventDefault();
      const playlistInput = document.getElementById('youtubePlaylist');
      playlistInput.value = DEFAULT_YOUTUBE_PLAYLIST;
      youtubePlaylistUrl = DEFAULT_YOUTUBE_PLAYLIST;
      saveSettings();
      if (playMusic) {
        initYoutubePlayer();
      }
      updateYoutubeLink();
    });

  document
    .getElementById('useAtmosphericPlaylist')
    .addEventListener('click', (e) => {
      e.preventDefault();
      const playlistInput = document.getElementById('youtubePlaylist');
      playlistInput.value = ATMOSPHERIC_PLAYLIST;
      youtubePlaylistUrl = ATMOSPHERIC_PLAYLIST;
      saveSettings();
      if (playMusic) {
        initYoutubePlayer();
      }
      updateYoutubeLink();
    });

  // Add event listener for YouTube playlist input
  document.getElementById('youtubePlaylist').addEventListener('change', () => {
    updateYoutubePlaylist();
    updateYoutubeLink();
  });

  // Add event listener for YouTube link
  document
    .getElementById('openYoutubePlaylist')
    .addEventListener('click', (e) => {
      if (!playMusic) {
        e.preventDefault();
      }
    });

  // Accelerate button: click -> "Confirm…", second click within 5s triggers acceleration
  accelerateBtn.addEventListener('click', () => {
    if (accelerateBtn.disabled) return;
    if (getAccelerateButtonLabel() === BUTTON_LABELS.ACCELERATE) {
      setAccelerateButtonLabel(BUTTON_LABELS.ACCELERATE_CONFIRM);
      accelerateBtn.setAttribute(
        'aria-label',
        'Click again to accelerate time'
      );
      if (accelerateConfirmTimeout) clearTimeout(accelerateConfirmTimeout);
      accelerateConfirmTimeout = setTimeout(() => {
        accelerateConfirmTimeout = null;
        resetAccelerateButton();
      }, ACCELERATE_CONFIRM_SECONDS * 1000);
    } else {
      // Confirm: clear timeout, show "time flies", disable, then accelerate
      if (accelerateConfirmTimeout) {
        clearTimeout(accelerateConfirmTimeout);
        accelerateConfirmTimeout = null;
      }
      setAccelerateButtonLabel(BUTTON_LABELS.ACCELERATE_TIME_FLIES);
      accelerateBtn.disabled = true;
      accelerateTime();
    }
  });

  // Add event listeners
  startBtn.addEventListener('click', startTimer);
  resetBtn.addEventListener('click', resetTimer);
  fullscreenBtn.addEventListener('click', toggleFullscreen);
  settingsBtn.addEventListener('click', openSettings);
  closeSettingsBtn.addEventListener('click', closeSettings);
  infoBtn.addEventListener('click', openInfo);
  closeInfoBtn.addEventListener('click', closeInfo);
  playerCountInput.addEventListener('change', updatePlayerCount);
  playerCountInput.addEventListener('input', updatePlayerCount);
  travellerCountInput.addEventListener('change', updateTravellerCount);
  travellerCountInput.addEventListener('input', updateTravellerCount);
  document
    .getElementById('startNewGame')
    .addEventListener('click', startNewGame);
  document.getElementById('gamePace').addEventListener('change', (e) => {
    updateGamePace(e.target.value);
  });
  document
    .getElementById('playMusic')
    .addEventListener('change', updateMusicPlayback);
  document.getElementById('playMusicAtNight').addEventListener('change', () => {
    playMusicAtNight = document.getElementById('playMusicAtNight').checked;
    saveSettings();
  });
  document
    .getElementById('youtubePlaylist')
    .addEventListener('change', updateYoutubePlaylist);
  document
    .getElementById('musicVolume')
    .addEventListener('input', updateYoutubeVolume);
  document
    .getElementById('playSoundEffects')
    .addEventListener('change', updateSoundEffects);
  document
    .getElementById('soundEffectsVolume')
    .addEventListener('input', updateSoundEffectsVolume);
  document.getElementById('keepDisplayOn').addEventListener('change', (e) => {
    keepDisplayOn = e.target.checked;
    saveSettings();
    if (keepDisplayOn) {
      requestWakeLock();
    } else {
      releaseWakeLock();
    }
  });
  document
    .getElementById('backgroundTheme')
    .addEventListener('change', updateBackgroundTheme);
  document.getElementById('showPlayerCountQr').addEventListener('change', (e) => {
    showPlayerCountQr = e.target.checked;
    document
      .getElementById('playerCountQrWrapper')
      .classList.toggle('visible', showPlayerCountQr);
    saveSettings();
  });
  document.getElementById('showCurrentTime').addEventListener('change', (e) => {
    showCurrentTime = e.target.checked;
    saveSettings();
    updateTimeSettingsUi();
  });
  document
    .getElementById('showSessionCountdown')
    .addEventListener('change', (e) => {
      showSessionCountdown = e.target.checked;
      saveSettings();
      updateTimeSettingsUi();
    });
  document.getElementById('sessionEndHour').addEventListener('change', (e) => {
    sessionEndHour = Number.parseInt(e.target.value, 10);
    saveSettings();
    updateSessionCountdownDisplay();
  });
  document.getElementById('sessionEndMinute').addEventListener('change', (e) => {
    sessionEndMinute = Number.parseInt(e.target.value, 10);
    saveSettings();
    updateSessionCountdownDisplay();
  });
  document.querySelectorAll('input[name="clockFormat"]').forEach((input) => {
    input.addEventListener('change', (e) => {
      if (!e.target.checked) return;
      clockFormat = e.target.value;
      saveSettings();
      updateCurrentTimeDisplay();
    });
  });

  // Add keyboard shortcuts event listeners
  document.querySelectorAll('.shortcut-input').forEach((input) => {
    input.addEventListener('click', () => {
      // Map input IDs to shortcut action names
      const actionMap = {
        shortcutSettings: 'settings',
        shortcutWakeUp: 'wakeUp',
        shortcutReset: 'reset',
        shortcutAccelerate: 'accelerate',
        shortcutFullscreen: 'fullscreen',
        shortcutInfo: 'info',
      };
      const action = actionMap[input.id];
      startShortcutRecording(input, action);
    });
  });

  document.getElementById('resetShortcuts').addEventListener('click', () => {
    if (
      confirm(
        'Are you sure you want to reset all keyboard shortcuts to their default values? This cannot be undone.'
      )
    ) {
      keyboardShortcutsUtils.forceReset();
    }
  });

  document.getElementById('clearShortcuts').addEventListener('click', () => {
    if (
      confirm(
        'Are you sure you want to clear all keyboard shortcuts? This will remove all shortcut assignments.'
      )
    ) {
      keyboardShortcutsUtils.clearAll();
    }
  });

  // Add click handlers for preset buttons
  minuteButtons.forEach((btn) => {
    btn.addEventListener('click', handleMinuteClick);
  });

  secondButtons.forEach((btn) => {
    btn.addEventListener('click', handleSecondClick);
  });

  // Add What's New dialog event listeners
  closeWhatsNewBtn.addEventListener('click', closeWhatsNew);
  whatsNewDialog.addEventListener('click', (e) => {
    if (e.target === whatsNewDialog) {
      closeWhatsNew();
    }
  });

  // Add View Full History link event listener
  document.getElementById('viewFullHistory').addEventListener('click', (e) => {
    e.preventDefault();
    closeWhatsNew();
    showChangeHistory();
  });

  // Add Change History dialog event listeners
  if (closeChangeHistoryBtn) {
    closeChangeHistoryBtn.addEventListener('click', (e) => {
      e.preventDefault();
      e.stopPropagation();
      closeChangeHistory();
    });
  }
  if (changeHistoryDialog) {
    changeHistoryDialog.addEventListener('click', (e) => {
      if (e.target === changeHistoryDialog) {
        closeChangeHistory();
      }
    });
  }

  // Add event listeners for sound preview buttons
  document.querySelectorAll('.preview-sound').forEach((button) => {
    button.addEventListener('click', () => {
      const type = button.dataset.type;
      const select = button.parentElement.querySelector('select');
      const soundFile = select.value;

      // Stop any currently playing preview
      if (previewSound) {
        previewSound.pause();
        previewSound.currentTime = 0;
        document
          .querySelectorAll('.preview-sound')
          .forEach((btn) => btn.classList.remove('playing'));
      }

      // Create and play the new preview (nominations-open uses its own folder)
      const previewPath =
        type === 'nominations-open'
          ? `sounds/nominations-open/${soundFile}`
          : `sounds/${type}/${soundFile}`;
      previewSound = new Audio(previewPath);
      button.classList.add('playing');

      previewSound.addEventListener(
        'ended',
        () => {
          button.classList.remove('playing');
          previewSound = null;
        },
        { once: true }
      );

      previewSound.play().catch((error) => {
        console.log('Error playing preview sound:', error);
        button.classList.remove('playing');
      });
    });
  });

  // Update the sound change handlers to stop any preview when changing sounds
  document.getElementById('endOfDaySound').addEventListener('change', (e) => {
    if (previewSound) {
      previewSound.pause();
      previewSound.currentTime = 0;
      document
        .querySelectorAll('.preview-sound')
        .forEach((btn) => btn.classList.remove('playing'));
    }
    endOfDaySound = e.target.value;
    endSound = new Audio(`sounds/end-of-day/${endOfDaySound}`);
    saveSettings();
  });

  document.getElementById('wakeUpSound').addEventListener('change', (e) => {
    if (previewSound) {
      previewSound.pause();
      previewSound.currentTime = 0;
      document
        .querySelectorAll('.preview-sound')
        .forEach((btn) => btn.classList.remove('playing'));
    }
    wakeUpSoundFile = e.target.value;
    wakeUpSound = new Audio(`sounds/wake-up/${wakeUpSoundFile}`);
    saveSettings();
  });

  document
    .getElementById('nominationsOpenSound')
    .addEventListener('change', (e) => {
      if (previewSound) {
        previewSound.pause();
        previewSound.currentTime = 0;
        document
          .querySelectorAll('.preview-sound')
          .forEach((btn) => btn.classList.remove('playing'));
      }
      nominationsOpenSoundFile = e.target.value;
      nominationsOpenSound = new Audio(
        `sounds/nominations-open/${nominationsOpenSoundFile}`
      );
      saveSettings();
    });

  document
    .getElementById('autoOpenNominations')
    .addEventListener('change', (e) => {
      autoOpenNominations = e.target.checked;
      document.getElementById('autoOpenNominationsDelay').disabled =
        !autoOpenNominations;
      const nominationsOpenSelect = document.getElementById(
        'nominationsOpenSound'
      );
      const nominationsOpenLabelEl = document.querySelector(
        'label:has(#nominationsOpenSound)'
      );
      if (nominationsOpenSelect) {
        nominationsOpenSelect.disabled = !autoOpenNominations;
      }
      if (nominationsOpenLabelEl) {
        nominationsOpenLabelEl.classList.toggle(
          'inactive',
          !playSoundEffects || !autoOpenNominations
        );
      }
      saveSettings();
    });

  document
    .getElementById('autoOpenNominationsDelay')
    .addEventListener('change', (e) => {
      autoOpenNominationsDelay = Number.Number.parseInt(e.target.value, 10);
      saveSettings();
    });

  // Initialize settings and update display
  loadSettings();
  updateClocktowerPresets();
  updateDisplay();

  // Add event listeners for settings tabs
  document.querySelectorAll('.tab-button').forEach((button) => {
    button.addEventListener('click', () => {
      switchSettingsTab(button.dataset.tab);
    });
  });

  // Create YouTube container immediately if music is enabled
  if (playMusic) {
    initYoutubePlayer();
  }

  // Load keyboard shortcuts into UI
  keyboardShortcutsUtils.loadShortcuts();

  // Update shortcut hints on buttons
  updateWakeUpShortcutHint();
  updateAccelerateShortcutHint();

  // Setup keyboard navigation after shortcuts are loaded
  setupKeyboardNavigation();
});

// Helper functions for timer calculations
function calcTimerStartEndValues(startingPlayerCount) {
  return {
    totalNumbers: startingPlayerCount - startingPlayerCount / 5,
    dayStartValue: startingPlayerCount * 0.4 + 2,
    dayEndValue: 2,
    nightStartValue: startingPlayerCount * 0.1 + 1,
    nightEndValue: 1,
  };
}

function roundToNearestQuarter(n) {
  return Math.round(n * 4) / 4;
}

function resolveUsedPresetByDay(settings, currentDay) {
  if (
    settings.usedPresetByDay &&
    typeof settings.usedPresetByDay === 'object'
  ) {
    return settings.usedPresetByDay;
  }
  if (settings.dayOnePresetIndex == null) {
    return {};
  }
  // Migrate: assume sequential use from dayOnePresetIndex
  const result = {};
  for (let d = 1; d <= currentDay; d++)
    result[d] = settings.dayOnePresetIndex + d - 1;
  return result;
}

// Apply parsed settings object to globals and persist; runs migration and version check
function applyParsedSettings(settings) {
  const normaliseSoundFile = (value, defaultVal) => {
    const v = value || defaultVal;
    return v.endsWith('-v2.mp3') ? v : v.slice(0, -4) + '-v2.mp3';
  };

  playerCount = settings.playerCount || 10;
  travellerCount = settings.travellerCount || 0;
  currentDay = settings.currentDay || 1;
  usedPresetByDay = resolveUsedPresetByDay(settings, currentDay);
  hiddenPresetDays = Array.isArray(settings.hiddenPresetDays)
    ? settings.hiddenPresetDays
    : [];
  currentPace = settings.currentPace || 'normal';
  playMusic = settings.playMusic === undefined ? false : settings.playMusic;
  playMusicAtNight =
    settings.playMusicAtNight === undefined ? false : settings.playMusicAtNight;
  playSoundEffects =
    settings.playSoundEffects === undefined ? true : settings.playSoundEffects;
  soundEffectsVolume = settings.soundEffectsVolume || 75;
  keepDisplayOn =
    settings.keepDisplayOn === undefined ? true : settings.keepDisplayOn;
  showPlayerCountQr = settings.showPlayerCountQr === true;
  showCurrentTime =
    settings.showCurrentTime === undefined ? true : settings.showCurrentTime;
  clockFormat = settings.clockFormat === '12' ? '12' : '24';
  showSessionCountdown = settings.showSessionCountdown === true;
  sessionEndHour =
    Number.isInteger(settings.sessionEndHour) &&
    settings.sessionEndHour >= 0 &&
    settings.sessionEndHour <= 23
      ? settings.sessionEndHour
      : 23;
  sessionEndMinute =
    Number.isInteger(settings.sessionEndMinute) &&
    settings.sessionEndMinute >= 0 &&
    settings.sessionEndMinute <= 59
      ? settings.sessionEndMinute
      : 0;
  youtubeVolume = settings.youtubeVolume || 15;
  backgroundTheme = settings.backgroundTheme || 'medieval-cartoon';
  youtubePlaylistUrl = settings.youtubePlaylistUrl || DEFAULT_YOUTUBE_PLAYLIST;
  endOfDaySound = normaliseSoundFile(
    settings.endOfDaySound,
    'cathedral-bell-v2.mp3'
  );
  wakeUpSoundFile = normaliseSoundFile(
    settings.wakeUpSoundFile,
    'chisel-bell-01-loud-v2.mp3'
  );
  nominationsOpenSoundFile =
    settings.nominationsOpenSoundFile || 'nominations-open-laura.mp3';
  settings.endOfDaySound = endOfDaySound;
  settings.wakeUpSoundFile = wakeUpSoundFile;
  autoOpenNominations = settings.autoOpenNominations || false;
  autoOpenNominationsDelay =
    settings.autoOpenNominationsDelay === undefined
      ? 60
      : settings.autoOpenNominationsDelay;
  acceptedPortraitWarning = settings.acceptedPortraitWarning || false;
  keyboardShortcuts = settings.keyboardShortcuts || {
    ...DEFAULT_KEYBOARD_SHORTCUTS,
  };

  if (keyboardShortcuts.wakeup && !keyboardShortcuts.wakeUp) {
    keyboardShortcuts.wakeUp = keyboardShortcuts.wakeup;
    delete keyboardShortcuts.wakeup;
    saveSettings();
  }
  if (keyboardShortcuts.accelerate === undefined) {
    keyboardShortcuts.accelerate = DEFAULT_KEYBOARD_SHORTCUTS.accelerate;
    saveSettings();
  }

  const lastSeenVersion = settings.lastSeenVersion;
  if (lastSeenVersion && lastSeenVersion !== APP_VERSION) {
    showWhatsNew(lastSeenVersion);
  }
  settings.lastSeenVersion = APP_VERSION;
  localStorage.setItem('quickTimerSettings', JSON.stringify(settings));
  updateDayDisplay(settings.dayState || '');
}

function initSoundsFirstLoad() {
  isFirstLoad = true;
  currentDay = 1;
  endSound = new Audio(`sounds/end-of-day/${endOfDaySound}`);
  wakeUpSound = new Audio(`sounds/wake-up/${wakeUpSoundFile}`);
  nominationsOpenSound = new Audio(
    `sounds/nominations-open/${nominationsOpenSoundFile}`
  );
}

function applySettingsToForm() {
  playerCountInput.value = playerCount;
  travellerCountInput.value = travellerCount;
  document.getElementById('gamePace').value = currentPace;
  document.getElementById('playSoundEffects').checked = playSoundEffects;
  document.getElementById('keepDisplayOn').checked = keepDisplayOn;
  document.getElementById('showPlayerCountQr').checked = showPlayerCountQr;
  document
    .getElementById('playerCountQrWrapper')
    .classList.toggle('visible', showPlayerCountQr);
  updatePlayerCountQr();
  document.getElementById('playMusic').checked = playMusic;
  document.getElementById('playMusicAtNight').checked = playMusicAtNight;
  document.getElementById('youtubePlaylist').value = youtubePlaylistUrl;
  document.getElementById('musicVolume').value = youtubeVolume;
  document.getElementById('soundEffectsVolume').value = soundEffectsVolume;
  document.getElementById('backgroundTheme').value = backgroundTheme;
  document.querySelector(
    `input[name="clockFormat"][value="${clockFormat}"]`
  ).checked = true;
  updateTimeSettingsUi();
  document.querySelector(
    'label:has(#musicVolume) .volume-value'
  ).textContent = `${youtubeVolume}%`;
  document.querySelector(
    'label:has(#soundEffectsVolume) .volume-value'
  ).textContent = `${soundEffectsVolume}%`;
  document.getElementById('endOfDaySound').value = endOfDaySound;
  document.getElementById('wakeUpSound').value = wakeUpSoundFile;
  document.getElementById('nominationsOpenSound').value =
    nominationsOpenSoundFile;
  document.getElementById('autoOpenNominations').checked = autoOpenNominations;
  document.getElementById('autoOpenNominationsDelay').value =
    autoOpenNominationsDelay;
  document.getElementById('autoOpenNominationsDelay').disabled =
    !autoOpenNominations;

  const nominationsOpenSoundSelect = document.getElementById(
    'nominationsOpenSound'
  );
  const nominationsOpenLabel = document.querySelector(
    'label:has(#nominationsOpenSound)'
  );
  if (nominationsOpenSoundSelect) {
    nominationsOpenSoundSelect.disabled = !autoOpenNominations;
  }
  if (nominationsOpenLabel) {
    nominationsOpenLabel.classList.toggle(
      'inactive',
      !playSoundEffects || !autoOpenNominations
    );
  }

  nominationsOpenSound = new Audio(
    `sounds/nominations-open/${nominationsOpenSoundFile}`
  );

  const musicVolumeInput = document.getElementById('musicVolume');
  musicVolumeInput.disabled = !playMusic;
  musicVolumeInput.closest('label').classList.toggle('inactive', !playMusic);

  const soundEffectsVolumeInput = document.getElementById('soundEffectsVolume');
  soundEffectsVolumeInput.disabled = !playSoundEffects;
  soundEffectsVolumeInput
    .closest('label')
    .classList.toggle('inactive', !playSoundEffects);

  const musicDependentElements = [
    {
      element: document.getElementById('playMusicAtNight').closest('label'),
      type: 'label',
    },
    {
      element: document.getElementById('youtubePlaylist').closest('label'),
      type: 'label',
    },
    {
      element: document.getElementById('useBardcorePlaylist'),
      type: 'link',
    },
    {
      element: document.getElementById('useAtmosphericPlaylist'),
      type: 'link',
    },
    {
      element: document.getElementById('openYoutubePlaylist'),
      type: 'link',
    },
  ];

  musicDependentElements.forEach(({ element, type }) => {
    if (element) {
      element.classList.toggle('inactive', !playMusic);
      if (type === 'label') {
        const input = element.querySelector('input, select');
        if (input) {
          input.setAttribute('aria-hidden', !playMusic);
        }
      }
    }
  });
}

// Load settings from localStorage
function loadSettings() {
  const savedSettings = localStorage.getItem('quickTimerSettings');
  if (savedSettings) {
    applyParsedSettings(JSON.parse(savedSettings));
    // Recreate Audio objects so they use the loaded sound files (they were
    // initially created with defaults in DOMContentLoaded).
    endSound = new Audio(`sounds/end-of-day/${endOfDaySound}`);
    wakeUpSound = new Audio(`sounds/wake-up/${wakeUpSoundFile}`);
    nominationsOpenSound = new Audio(
      `sounds/nominations-open/${nominationsOpenSoundFile}`
    );
  } else {
    initSoundsFirstLoad();
  }

  applySettingsToForm();

  document
    .getElementById('travellerDisplay')
    .classList.toggle('visible', travellerCount > 0);
  document.getElementById('travellerAmount').textContent = travellerCount;
  updateYoutubeLink();
  document.body.dataset.theme = backgroundTheme;
  document.body.dataset.pace = currentPace;

  if (playMusic) {
    initYoutubePlayer();
  } else {
    const existingContainer = getYoutubePlayerContainer();
    if (existingContainer) {
      existingContainer.remove();
    }
    youtubePlayer = null;
  }

  updateCharacterAmounts(playerCount);
  updateClocktowerPresets();
  updateEstimatedGameLength();
  updateSoundEffects();

  if (isFirstLoad) {
    setTimeout(() => {
      settingsDialog.showModal();
    }, 100);
  }

  if (changeHistoryDialog?.open) {
    changeHistoryDialog.close();
    changeHistoryDialog.removeAttribute('open');
  }

  const { playlistId } = extractVideoAndPlaylistIds(youtubePlaylistUrl);
  if (playlistId) {
    fetchPlaylistTitle(playlistId).then((title) => {
      if (title) {
        updatePlaylistBadge(title);
      }
    });
  }
}

// Additional safeguard on globalThis load to ensure change history dialog is closed
globalThis.addEventListener('load', () => {
  const changeHistoryDialog = document.getElementById('changeHistoryDialog');
  if (changeHistoryDialog?.open) {
    changeHistoryDialog.close();
    changeHistoryDialog.removeAttribute('open');
  }
});

// Save settings to localStorage
function saveSettings() {
  const dayInfo = document.querySelector('.day-display');
  let dayState = '';
  if (dayInfo?.classList?.contains('dusk')) {
    dayState = 'dusk';
  } else if (dayInfo?.classList?.contains('dawn')) {
    dayState = 'dawn';
  }

  const settings = {
    playerCount,
    travellerCount,
    currentDay,
    usedPresetByDay,
    hiddenPresetDays,
    currentPace,
    playMusic,
    playMusicAtNight,
    playSoundEffects,
    soundEffectsVolume,
    keepDisplayOn,
    showPlayerCountQr,
    showCurrentTime,
    clockFormat,
    showSessionCountdown,
    sessionEndHour,
    sessionEndMinute,
    youtubeVolume,
    youtubePlaylistUrl,
    backgroundTheme,
    dayState,
    lastSeenVersion: APP_VERSION,
    endOfDaySound,
    wakeUpSoundFile,
    nominationsOpenSoundFile,
    autoOpenNominations,
    autoOpenNominationsDelay,
    acceptedPortraitWarning,
    keyboardShortcuts,
  };
  localStorage.setItem('quickTimerSettings', JSON.stringify(settings));
}

// Returns { label, effectiveDay } for a preset. effectiveDay is null for skipped (💀).
function getPresetDayLabel(presetDay, numberOfDays) {
  const used = Object.values(usedPresetByDay).filter((p) => p >= 1);
  if (used.length === 0) {
    return { label: `Day ${presetDay}`, effectiveDay: presetDay };
  }
  const usedSorted = [...used].sort((a, b) => a - b);
  const minUsed = usedSorted[0];
  const maxUsed = usedSorted.at(-1);
  // Used for a specific day → show that day
  for (const [d, p] of Object.entries(usedPresetByDay)) {
    if (Number(p) === presetDay) {
      return { label: `Day ${d}`, effectiveDay: Number(d) };
    }
  }
  if (presetDay < minUsed) return { label: '💀', effectiveDay: null };
  // Between two used presets → skipped
  for (let i = 0; i < usedSorted.length - 1; i++) {
    if (presetDay > usedSorted[i] && presetDay < usedSorted[i + 1])
      return { label: '💀', effectiveDay: null };
  }
  // From current day's preset onward (or from first future if in dusk)
  const anchor =
    usedPresetByDay[currentDay] === undefined
      ? maxUsed + 1
      : usedPresetByDay[currentDay];
  const baseDay =
    usedPresetByDay[currentDay] === undefined ? currentDay + 1 : currentDay;
  if (presetDay >= anchor) {
    const eff = baseDay + (presetDay - anchor);
    return { label: `Day ${eff}`, effectiveDay: eff };
  }
  return { label: '💀', effectiveDay: null };
}

// Settings functionality
function updateClocktowerPresets() {
  const clocktowerPresetsDiv = document.getElementById('clocktowerPresets');
  clocktowerPresetsDiv.innerHTML = ''; // Clear existing presets

  const presets = generateDayPresets(playerCount);
  const numberOfDays = presets.length;

  // Count skipped presets and ensure we have enough extras so we never run out of preset slots.
  // We need at least one preset per day; if user skips ahead (e.g. Day 8 for Day 1, then Day 8 for Day 2),
  // the max preset index used can exceed the base count, so add extras to cover that.
  let skippedCount = 0;
  for (const preset of presets) {
    if (getPresetDayLabel(preset.day, numberOfDays).effectiveDay === null)
      skippedCount++;
  }
  const maxUsed =
    currentDay !== null && Object.keys(usedPresetByDay).length > 0
      ? Math.max(...Object.values(usedPresetByDay))
      : 0;
  const curDay = currentDay ?? 1;
  const extrasNeeded = Math.max(skippedCount, Math.max(0, maxUsed - curDay));
  const lastBasePreset = presets[numberOfDays - 1];
  for (let i = 1; i <= extrasNeeded; i++) {
    presets.push({
      minutes: lastBasePreset.minutes,
      seconds: lastBasePreset.seconds,
      display: lastBasePreset.display,
      day: numberOfDays + i,
    });
  }

  // Preset visibility: ONLY about hiding skipped (💀) presets. Never hide "Day N" presets.
  // Dusk: hide all skips (compact next-day picker). Day 2+: hide only 💀 before Day N-1's preset.
  let presetsToShow = presets;
  if (isDuskPresetView) {
    presetsToShow = presetsToShow.filter(
      (p) => getPresetDayLabel(p.day, numberOfDays).effectiveDay !== null
    );
  } else if (currentDay >= 2) {
    const skipCutoff = usedPresetByDay[currentDay - 1];
    if (skipCutoff !== undefined) {
      presetsToShow = presets.filter((p) => {
        const { effectiveDay } = getPresetDayLabel(p.day, numberOfDays);
        if (effectiveDay !== null) return true; // always show every Day preset
        return p.day >= skipCutoff; // hide only 💀 before Day N-1's preset
      });
    }
  }

  presetsToShow.forEach((preset) => {
    const { label: dayLabel, effectiveDay: eff } = getPresetDayLabel(
      preset.day,
      numberOfDays
    );
    const button = document.createElement('button');
    button.className = 'preset-btn clocktower-btn';
    if (eff === null) {
      button.classList.add('skipped-day');
    }
    if (eff !== null && eff === currentDay) {
      button.classList.add('current-day');
    }
    if (eff !== null && eff < currentDay) {
      button.classList.add('past-day');
    }
    button.innerHTML = `
      <span class="time">${preset.display}</span>
      <span class="day">${dayLabel}</span>
    `;
    button.dataset.minutes = preset.minutes;
    button.dataset.seconds = preset.seconds;
    button.dataset.day = preset.day;

    button.addEventListener('click', (e) => {
      const { effectiveDay: eff } = getPresetDayLabel(preset.day, numberOfDays);
      const isAhead = eff !== null && eff > currentDay;

      if (isAhead && !isDuskPresetView) {
        // Not in dusk: use this preset for current day (keeps full preset row including skipped)
        usedPresetByDay[currentDay] = preset.day;
        saveSettings();
        updateClocktowerPresets();
      } else if (isDuskPresetView && currentDay !== null) {
        // In dusk: use this preset for the next day
        usedPresetByDay[currentDay + 1] = preset.day;
        currentDay++;
        saveSettings();
        // Clear dusk so new day shows full preset row until its countdown ends
        updateDayDisplay();
        updateClocktowerPresets();
      }

      // Update active state (use selector in case presets were just rebuilt)
      document
        .querySelectorAll('.clocktower-btn')
        .forEach((btn) => btn.classList.remove('active'));
      document
        .querySelector(`.clocktower-btn[data-day="${preset.day}"]`)
        ?.classList.add('active');

      // Update selected time
      selectedMinutes = preset.minutes;
      selectedSeconds = preset.seconds;

      // Reset any existing timer and cancel nominations countdown when starting a new day
      clearInterval(timerId);
      clearNominationsCountdown();

      // Set and display the new time
      timeLeft = selectedMinutes * 60 + selectedSeconds;
      updateDisplay();

      // Clear dusk state before starting countdown
      updateDayDisplay();

      // Play wake-up sound if sound effects are enabled and we're not in a wake-up countdown
      if (
        playSoundEffects &&
        !timerDisplayEl.classList.contains('wake-up-countdown')
      ) {
        wakeUpSound.currentTime = 0;
        wakeUpSound.volume = soundEffectsVolume / 100;
        wakeUpSound.play().catch((error) => {
          console.log('Error playing wake-up sound:', error);
          createBeep();
        });
      }

      // Start the timer
      startCountdown();
      startBtn.disabled = false;
      updateStartButtonText(BUTTON_LABELS.PAUSE);
      resetAccelerateButton();
      accelerateBtn.disabled = false;
      resetBtn.disabled = false; // Enable reset button when starting timer
    });

    clocktowerPresetsDiv.appendChild(button);
  });
}

// Update QR code and link for player count (count.arcane-scripts.net)
function updatePlayerCountQr() {
  const url = `https://count.arcane-scripts.net/?p=${playerCount}`;
  const link = document.getElementById('playerCountQrLink');
  const img = document.getElementById('playerCountQrImg');
  if (link) link.href = url;
  if (img) {
    img.src =
      'https://api.qrserver.com/v1/create-qr-code/?size=128x128&data=' +
      encodeURIComponent(url);
  }
}

// Update player count
function updatePlayerCount() {
  playerCount = Math.min(
    Math.max(Number.parseInt(playerCountInput.value) || 5, 5),
    15
  );
  playerCountInput.value = playerCount;
  updateCharacterAmounts(playerCount);
  updateClocktowerPresets();
  updateEstimatedGameLength();
  updatePlayerCountQr();
  saveSettings();
}

// Update traveller count
function updateTravellerCount() {
  travellerCount = Math.min(
    Math.max(Number.parseInt(travellerCountInput.value) || 0, 0),
    5
  );
  travellerCountInput.value = travellerCount;
  document
    .getElementById('travellerDisplay')
    .classList.toggle('visible', travellerCount > 0);
  document.getElementById('travellerAmount').textContent = travellerCount;
  saveSettings();
}

function openSettings() {
  settingsDialog.showModal();

  // Add event listeners for settings tabs
  document.querySelectorAll('.tab-button').forEach((button) => {
    button.addEventListener('click', () => {
      switchSettingsTab(button.dataset.tab);
    });
  });

  // Set initial tab
  switchSettingsTab('game');
}

function closeSettings() {
  saveSettings(); // Always save when closing
  updateDayDisplay(); // Force update of the day display
  updateClocktowerPresets(); // Update the presets to match current day

  // Remove event listeners from tab buttons
  document.querySelectorAll('.tab-button').forEach((button) => {
    button.replaceWith(button.cloneNode(true));
  });

  settingsDialog.close();
}

// Handle settings tab switching
function switchSettingsTab(tabName) {
  // Update tab buttons
  document.querySelectorAll('.tab-button').forEach((button) => {
    const isActive = button.dataset.tab === tabName;
    button.classList.toggle('active', isActive);
  });

  // Update panels
  document.querySelectorAll('.settings-panel').forEach((panel) => {
    const isActive = panel.dataset.panel === tabName;
    panel.classList.toggle('active', isActive);
  });
}

// Fullscreen functionality
function toggleFullscreen() {
  if (document.fullscreenElement) {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    }
  } else {
    document.documentElement.requestFullscreen().catch((err) => {
      console.log('Error attempting to enable fullscreen:', err);
    });
  }
}

// Update fullscreen button icon based on state
function updateFullscreenButton() {
  const isFullscreen = document.fullscreenElement !== null;
  fullscreenBtn.innerHTML = isFullscreen
    ? BUTTON_LABELS.FULLSCREEN.EXIT
    : BUTTON_LABELS.FULLSCREEN.ENTER;
}

// Play end sound
function playEndSound() {
  if (!playSoundEffects) return;

  // Stop music if playing and not set to play at night
  if (playMusic && !playMusicAtNight && youtubePlayer) {
    youtubePlayer.pauseVideo();
    setYoutubeControlButtonIcon(false);
  }

  isEndSoundPlaying = true;
  startBtn.disabled = true;

  endSound.currentTime = 0; // Reset the sound to start
  endSound.volume = soundEffectsVolume / 100; // Apply volume control
  endSound.play().catch((error) => {
    console.log('Error playing sound:', error);
    // Fallback to beep if sound file fails
    createBeep();
    isEndSoundPlaying = false;
    updateDisplay();
  });

  // Enable the button after the sound finishes
  endSound.addEventListener(
    'ended',
    () => {
      isEndSoundPlaying = false;
      updateDisplay();
      // Resume music if playMusicAtNight is enabled
      if (playMusic && playMusicAtNight && youtubePlayer) {
        youtubePlayer.playVideo();
        setYoutubeControlButtonIcon(true);
      }
    },
    { once: true }
  );
}

// Play nominations open sound
function playNominationsOpenSound() {
  if (!playSoundEffects || !nominationsOpenSound) return;
  nominationsOpenSound.currentTime = 0;
  nominationsOpenSound.volume = soundEffectsVolume / 100;
  nominationsOpenSound.play().catch((error) => {
    console.log('Error playing nominations open sound:', error);
  });
}

// Clear the nominations countdown (interval and UI)
function clearNominationsCountdown() {
  if (autoOpenNominationsInterval) {
    clearInterval(autoOpenNominationsInterval);
    autoOpenNominationsInterval = null;
  }
  const el = document.getElementById('nominationsCountdown');
  if (el) {
    el.hidden = true;
  }
}

// Start the nominations countdown display and schedule the sound
function startNominationsCountdown() {
  clearNominationsCountdown();
  if (!autoOpenNominations || autoOpenNominationsDelay <= 0) return;

  const countdownEl = document.getElementById('nominationsCountdown');
  const secondsEl = document.getElementById('nominationsCountdownSeconds');
  if (!countdownEl || !secondsEl) return;

  nominationsCountdownRemaining = autoOpenNominationsDelay;
  secondsEl.textContent = nominationsCountdownRemaining;
  countdownEl.hidden = false;
  countdownEl.setAttribute(
    'aria-label',
    `Nominations open in ${nominationsCountdownRemaining} seconds`
  );

  autoOpenNominationsInterval = setInterval(() => {
    nominationsCountdownRemaining--;
    secondsEl.textContent = nominationsCountdownRemaining;
    countdownEl.setAttribute(
      'aria-label',
      `Nominations open in ${nominationsCountdownRemaining} seconds`
    );

    if (nominationsCountdownRemaining <= 0) {
      clearNominationsCountdown();
      playNominationsOpenSound();
    }
  }, 1000);
}

// Create beep sound (fallback if mp3 fails to load)
function createBeep() {
  if (!playSoundEffects) return;

  if (!beepAudioContext) {
    beepAudioContext = new (globalThis.AudioContext ||
      globalThis.webkitAudioContext)();
  }
  const audioContext = beepAudioContext;
  if (audioContext.state === 'suspended') {
    void audioContext.resume();
  }
  const oscillator = audioContext.createOscillator();
  const gainNode = audioContext.createGain();

  oscillator.connect(gainNode);
  gainNode.connect(audioContext.destination);

  oscillator.type = 'sine';
  oscillator.frequency.value = 440;
  gainNode.gain.value = (soundEffectsVolume / 100) * 0.5; // Apply volume control

  oscillator.start();

  // Beep for 0.5 seconds
  setTimeout(() => {
    oscillator.stop();
  }, 500);
}

// Update display
function updateDisplay() {
  const minutes = Math.floor(timeLeft / 60);
  const seconds = timeLeft % 60;
  minutesDisplay.textContent = minutes.toString().padStart(2, '0');
  secondsDisplay.textContent = seconds.toString().padStart(2, '0');

  const isWakeUpCountdown =
    timerDisplayEl.classList.contains('wake-up-countdown');

  // Handle the combined button states
  if (isWakeUpCountdown) {
    updateStartButtonText(BUTTON_LABELS.WAKE_UP);
    startBtn.disabled = true;
    accelerateBtn.disabled = true;
    resetBtn.disabled = true; // Disable reset during wake-up countdown
  } else if (isRunning) {
    updateStartButtonText(BUTTON_LABELS.PAUSE);
    startBtn.disabled = false;
    // Keep accelerate disabled during accelerated countdown ("time flies")
    accelerateBtn.disabled =
      getAccelerateButtonLabel() === BUTTON_LABELS.ACCELERATE_TIME_FLIES;
    resetBtn.disabled = false; // Enable reset while running
  } else if (timeLeft > 0 && !hasReset) {
    updateStartButtonText(BUTTON_LABELS.RESUME);
    startBtn.disabled = false;
    accelerateBtn.disabled = true;
    resetBtn.disabled = false; // Enable reset when paused with time remaining
  } else {
    updateStartButtonText(BUTTON_LABELS.WAKE_UP);
    startBtn.disabled = isEndSoundPlaying; // Disable during end sound
    accelerateBtn.disabled = true;
    resetBtn.disabled = true; // Disable reset when timer is at 0 or after reset
  }

  // Update ARIA labels
  timerDisplayEl.setAttribute(
    'aria-label',
    `Timer: ${minutes} minutes and ${seconds} seconds remaining`
  );
}

const ACCELERATE_CONFIRM_SECONDS = 5;

function resetAccelerateButton() {
  if (accelerateConfirmTimeout) {
    clearTimeout(accelerateConfirmTimeout);
    accelerateConfirmTimeout = null;
  }
  setAccelerateButtonLabel(BUTTON_LABELS.ACCELERATE);
  accelerateBtn.setAttribute(
    'aria-label',
    'Accelerate time (click then confirm)'
  );
  accelerateBtn.style.setProperty('--progress-width', '0%');
}

// Acceleration functionality
function accelerateTime() {
  if (!isRunning || timeLeft <= 0) return;

  // Calculate a random completion time between 3-10 seconds
  const completionTime = Math.floor(Math.random() * 8000) + 3000; // 3000-10000ms

  // Calculate how many intervals we need
  const intervals = Math.min(timeLeft, Math.floor(completionTime / 50)); // Use 50ms intervals
  const timePerTick = Math.ceil(timeLeft / intervals);

  // Clear existing timer
  clearInterval(timerId);

  // Start accelerated timer
  currentInterval = 50; // 50ms intervals for smooth countdown
  timerId = setInterval(() => {
    timeLeft = Math.max(0, timeLeft - timePerTick);
    updateDisplay();

    if (timeLeft === 0) {
      clearInterval(timerId);
      playEndSound();
      isRunning = false;
      startBtn.disabled = true;
      updateStartButtonText(BUTTON_LABELS.RESUME);
      currentInterval = normalInterval;
      // Stop YouTube player when accelerated time ends
      if (playMusic && youtubePlayer?.pauseVideo) {
        youtubePlayer.pauseVideo();
      }
      if (currentDay !== null) {
        updateDayDisplay('dusk');
        updateClocktowerPresets();
      }
      updateDisplay(); // Make sure to update display one final time

      if (autoOpenNominations && autoOpenNominationsDelay > 0) {
        startNominationsCountdown();
      }
    }
  }, currentInterval);

  // Disable accelerate button after use (do not reset label during accelerated countdown)
  accelerateBtn.disabled = true;
}

// Start timer
function startTimer() {
  if (isRunning) {
    // Pause timer
    timerUtils.stop();
    if (playMusic && youtubePlayer) {
      youtubePlayer.pauseVideo();
      setYoutubeControlButtonIcon(false);
    }
    return;
  }

  // If we have remaining time, resume the timer
  if (timeLeft > 0) {
    isRunning = true;
    hasReset = false; // Clear the reset state when starting timer
    if (playMusic && youtubePlayer) {
      youtubePlayer.playVideo();
      setYoutubeControlButtonIcon(true);
    }
    startCountdown();
    return;
  }

  // If we're at 0, treat this as a Wake Up click
  playWakeUpSound();
}

// Reset timer
function resetTimer() {
  timerUtils.stop();
  if (wakeUpTimeout) {
    clearTimeout(wakeUpTimeout);
    wakeUpTimeout = null;
  }
  clearNominationsCountdown();

  // Reset to the full day countdown time (use current day's preset, which includes pace)
  const day = currentDay ?? 1;
  const presets = generateDayPresets(playerCount);
  const preset = presets.find((p) => p.day === day) ?? presets[0];
  timeLeft = preset.minutes * 60 + preset.seconds;
  selectedMinutes = preset.minutes;
  selectedSeconds = preset.seconds;
  currentInterval = normalInterval;
  isRunning = false; // Ensure timer is marked as not running
  hasReset = true; // Set the reset state

  // Reset button states
  startBtn.disabled = false;
  updateStartButtonText(BUTTON_LABELS.WAKE_UP);
  resetAccelerateButton();
  accelerateBtn.disabled = true;
  resetBtn.disabled = true;

  // Stop music and update play/pause button
  if (playMusic && youtubePlayer) {
    youtubePlayer.stopVideo();
    setYoutubeControlButtonIcon(false);
  }

  // Reset day display to normal state
  updateDayDisplay();

  // Clear wake-up countdown state
  timerDisplayEl.classList.remove('wake-up-countdown');

  // Clear active state from preset buttons
  timerUtils.updateButtonStates(document.querySelectorAll('.clocktower-btn'));

  // Update the display with the new time
  updateDisplay();
}

// Handle minutes preset selection
function handleMinuteClick(e) {
  const minutes = Number.parseInt(e.target.dataset.minutes);
  selectedMinutes = minutes;

  // Update active state
  timerUtils.updateButtonStates(minuteButtons, e.target);

  // If timer is not running, update display
  if (!isRunning) {
    timeLeft = selectedMinutes * 60 + selectedSeconds;
    updateDisplay();
    startBtn.disabled = false;
  }
}

// Handle seconds preset selection
function handleSecondClick(e) {
  const seconds = Number.parseInt(e.target.dataset.seconds);
  selectedSeconds = seconds;

  // Update active state
  timerUtils.updateButtonStates(secondButtons, e.target);

  // If timer is not running, update display
  if (!isRunning) {
    timeLeft = selectedMinutes * 60 + selectedSeconds;
    updateDisplay();
    startBtn.disabled = false;
  }
}

// Fullscreen change event listener
document.addEventListener('fullscreenchange', updateFullscreenButton);

// Add handlers for number input increment/decrement buttons
document.querySelectorAll('.number-input-group button').forEach((button) => {
  button.addEventListener('click', (e) => {
    const input = document.getElementById(e.target.dataset.input);
    const min = Number.parseInt(input.min);
    const max = Number.parseInt(input.max);
    const currentValue = Number.parseInt(input.value) || min;

    if (button.classList.contains('increment')) {
      input.value = Math.min(currentValue + 1, max);
    } else {
      input.value = Math.max(currentValue - 1, min);
    }

    // Trigger the change event
    input.dispatchEvent(new Event('change'));
  });
});

function playWakeUpSound() {
  if (isRunning) {
    resetTimer();
  }

  // Clear any existing wake-up timeout
  if (wakeUpTimeout) {
    clearTimeout(wakeUpTimeout);
  }
  clearNominationsCountdown();

  if (playSoundEffects) {
    // Stop music if playing and not set to play at night
    if (playMusic && !playMusicAtNight) {
      youtubeUtils.pause();
    }

    wakeUpSound.currentTime = 0;
    wakeUpSound.volume = soundEffectsVolume / 100; // Apply volume control
    wakeUpSound.play().catch((error) => {
      console.log('Error playing wake-up sound:', error);
      createBeep();
    });
  }

  // Only increment day if we're in dusk state
  const dayInfo = document.querySelector('.day-display');
  if (currentDay !== null && dayInfo.classList.contains('dusk')) {
    currentDay++;
    saveSettings();
  }

  // Start countdown display
  timerDisplayEl.classList.add('wake-up-countdown');

  // Show dawn state for current day
  updateDayDisplay('dawn');

  // Keep Wake Up label but disable the button during countdown
  startBtn.disabled = true;
  updateStartButtonText(BUTTON_LABELS.WAKE_UP);
  accelerateBtn.disabled = true;

  let countdownSeconds = 6;
  timeLeft = countdownSeconds;
  updateDisplay();

  // Update countdown every second
  timerId = setInterval(() => {
    timeLeft--;
    updateDisplay();

    if (timeLeft === 0) {
      clearInterval(timerId);
      timerDisplayEl.classList.remove('wake-up-countdown');

      // Remove dawn state and show regular day display
      updateDayDisplay();

      // Find and start the current day's timer (honour skip-ahead numbering)
      let currentPresetDay = usedPresetByDay[currentDay];
      if (currentPresetDay === undefined) {
        const used = Object.values(usedPresetByDay);
        currentPresetDay = used.length > 0 ? Math.max(...used) + 1 : currentDay;
        usedPresetByDay[currentDay] = currentPresetDay;
        saveSettings();
        updateClocktowerPresets();
      }
      const dayPreset = document.querySelector(
        `.clocktower-btn[data-day="${currentPresetDay}"]`
      );
      if (dayPreset) {
        // Update active state
        document
          .querySelectorAll('.clocktower-btn')
          .forEach((btn) => btn.classList.remove('active'));
        dayPreset.classList.add('active');

        // Update selected time
        selectedMinutes = Number.parseInt(dayPreset.dataset.minutes);
        selectedSeconds = Number.parseInt(dayPreset.dataset.seconds);

        // Set and display the new time
        timeLeft = selectedMinutes * 60 + selectedSeconds;
        updateDisplay();

        // Start the timer
        startCountdown();
        startBtn.disabled = false;
        updateStartButtonText(BUTTON_LABELS.PAUSE);
        resetAccelerateButton();
        accelerateBtn.disabled = false;
        resetBtn.disabled = false;
      }
    }
  }, 1000);

  // Store the countdown interval ID
  wakeUpTimeout = timerId;
}

function startCountdown() {
  isRunning = true;

  // Start music if enabled and not in dusk state
  const dayInfo = document.querySelector('.day-display');
  const isDusk = dayInfo?.classList?.contains('dusk');
  if (playMusic && !isDusk) {
    if (
      youtubePlayer &&
      youtubePlayer.getPlayerState() !== YT.PlayerState.PLAYING
    ) {
      youtubePlayer.playVideo();
      setYoutubeControlButtonIcon(true);
    }
  }

  timerId = setInterval(() => {
    timeLeft--;
    updateDisplay();

    if (timeLeft === 0) {
      clearInterval(timerId);
      playEndSound();
      isRunning = false;
      if (playMusic && youtubePlayer?.pauseVideo) {
        youtubePlayer.pauseVideo();
        setYoutubeControlButtonIcon(false);
      }
      if (currentDay !== null) {
        updateDayDisplay('dusk');
        updateClocktowerPresets();
      }
      updateDisplay();

      if (autoOpenNominations && autoOpenNominationsDelay > 0) {
        startNominationsCountdown();
      }
    }
  }, normalInterval);
}

function startNewGame() {
  // Reset timer state
  clearInterval(timerId);
  clearNominationsCountdown();
  timeLeft = 0;
  isRunning = false;
  currentInterval = normalInterval;

  // Set to Day 1
  currentDay = 1;
  usedPresetByDay = {};
  hiddenPresetDays = [];
  updateDayDisplay();

  // Set button to Wake Up state
  startBtn.disabled = false;
  updateStartButtonText(BUTTON_LABELS.WAKE_UP);
  resetAccelerateButton();
  accelerateBtn.disabled = true; // Accelerate button should start disabled

  saveSettings();
  closeSettings();

  // Stop any playing video and reshuffle playlist
  if (playMusic && youtubePlayer) {
    const { playlistId } = extractVideoAndPlaylistIds(youtubePlaylistUrl);
    if (playlistId) {
      youtubePlayer.stopVideo();
      youtubePlayer.setShuffle(true);
      youtubePlayer.cuePlaylist({
        list: playlistId,
        listType: 'playlist',
        index: Math.floor(Math.random() * 50),
        suggestedQuality: 'small',
      });
    }
  }
}

// Update day display
function updateDayDisplay(state = '') {
  const dayInfo = document.querySelector('.day-display');
  if (!dayInfo) return;

  // Remove existing state classes
  dayInfo.classList.remove('dawn', 'dusk');

  // Single source of truth: compact preset list only when timer has run out (dusk), not when e.g. clicking a preset
  isDuskPresetView = state === 'dusk';

  // Ensure currentDay is at least 1
  if (currentDay === null || currentDay === undefined) {
    currentDay = 1;
  }

  const paceEmojis = {
    relaxed: '🐌',
    normal: '🏃',
    speedy: '⚡',
    blitz: '🚀',
  };
  const paceEmoji = paceEmojis[currentPace];
  const paceText = currentPace.charAt(0).toUpperCase() + currentPace.slice(1);

  if (state === 'dawn') {
    dayInfo.classList.add('dawn');
    dayInfo.innerHTML = `<span>${currentDay}</span><div class="pace-indicator">${paceEmoji} ${paceText}</div>`;
  } else if (state === 'dusk') {
    dayInfo.classList.add('dusk');
    dayInfo.innerHTML = `<span>${currentDay}</span><div class="pace-indicator">${paceEmoji} ${paceText}</div>`;
    // Ensure button states are correct for dusk
    startBtn.disabled = false;
    updateStartButtonText(BUTTON_LABELS.WAKE_UP);
    resetAccelerateButton();
    accelerateBtn.disabled = true;
    resetBtn.disabled = true;
  } else {
    dayInfo.innerHTML = `<span>${currentDay}</span><div class="pace-indicator">${paceEmoji} ${paceText}</div>`;
  }

  // Update preset button highlighting (honour skip-ahead: use next preset if current day not yet chosen)
  const numberOfDays = document.querySelectorAll('.clocktower-btn').length;
  let currentPresetDay = usedPresetByDay[currentDay];
  if (currentPresetDay === undefined) {
    const used = Object.values(usedPresetByDay);
    currentPresetDay = used.length > 0 ? Math.max(...used) + 1 : currentDay;
  }
  document.querySelectorAll('.clocktower-btn').forEach((btn) => {
    const btnDay = Number.parseInt(btn.dataset.day);
    const { effectiveDay: eff } = getPresetDayLabel(btnDay, numberOfDays);
    btn.classList.toggle('current-day', btnDay === currentPresetDay);
    btn.classList.toggle('past-day', eff !== null && eff < currentDay);
  });

  // Save the current state
  saveSettings();
}

// Generate QR code for the website
function generateQRCode() {
  const url = 'https://timer.arcane-scripts.net';
  const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(
    url
  )}`;
  document.getElementById('qrCode').src = qrCodeUrl;
}

// Info dialog functionality
function openInfo() {
  generateQRCode();
  // Display current version
  document.getElementById('currentVersion').textContent = APP_VERSION;
  infoDialog.showModal();
}

// Add event listener for changelog link
document.getElementById('viewChangelog').addEventListener('click', (e) => {
  e.preventDefault();
  infoDialog.close();
  showChangeHistory();
});

function closeInfo() {
  infoDialog.close();
}

// Update game pace
function updateGamePace(newPace) {
  currentPace = newPace;
  document.body.dataset.pace = newPace;
  updateClocktowerPresets();
  updateDayDisplay();
  updateEstimatedGameLength();
  saveSettings();

  // If timer is running, adjust current time
  if (isRunning && timeLeft > 0) {
    const oldTimeLeft = timeLeft;
    const multiplier =
      PACE_MULTIPLIERS[newPace] / PACE_MULTIPLIERS[currentPace];
    timeLeft = Math.round(oldTimeLeft * multiplier);
    updateDisplay();
  }
}

// Function to generate day presets with pace adjustment
function generateDayPresets(playerCount) {
  const { totalNumbers, dayStartValue, dayEndValue } =
    calcTimerStartEndValues(playerCount);
  const numberOfDays = Math.floor(totalNumbers);
  const presets = [];
  const paceMultiplier = PACE_MULTIPLIERS[currentPace];

  for (let day = 1; day <= numberOfDays; day++) {
    // Linear interpolation between start and end values
    const progress = (day - 1) / (numberOfDays - 1);
    let minutes = roundToNearestQuarter(
      (dayStartValue - progress * (dayStartValue - dayEndValue)) *
        paceMultiplier
    );

    // Blitz mode: enforce minimum of 2 minutes for days 1 and 2
    if (currentPace === 'blitz' && (day === 1 || day === 2) && minutes < 2) {
      minutes = 2;
    }

    // Convert to MM:SS format
    const wholeMinutes = Math.floor(minutes);
    const seconds = Math.round((minutes % 1) * 60);
    presets.push({
      minutes: wholeMinutes,
      seconds: seconds,
      display: `${String(wholeMinutes).padStart(2, '0')}:${String(
        seconds
      ).padStart(2, '0')}`,
      day: day,
    });
  }

  return presets;
}

// Add event listener for game pace changes
document.getElementById('gamePace').addEventListener('change', (e) => {
  updateGamePace(e.target.value);
});

// YouTube player functionality
let youtubeApiReady = false;

// Load YouTube IFrame API
function loadYoutubeApi() {
  if (
    !globalThis.YT &&
    !document.querySelector('script[src*="youtube.com/iframe_api"]')
  ) {
    const tag = document.createElement('script');
    tag.src = 'https://www.youtube.com/iframe_api';
    const firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }
}

function initYoutubePlayer() {
  if (!globalThis.YT || !youtubeApiReady) {
    loadYoutubeApi();
  } else {
    createYoutubePlayer();
  }
}

// Called by YouTube API when ready
globalThis.onYouTubeIframeAPIReady = function () {
  youtubeApiReady = true;
  if (playMusic) {
    createYoutubePlayer();
  }
};

function createYoutubePlayerContainer() {
  const container = document.createElement('div');
  container.className = YOUTUBE_PLAYER_CONTAINER_CLASS;

  const playlistNameSpan = document.createElement('span');
  playlistNameSpan.className = 'playlist-name';

  const playlistLabel = document.createElement('span');
  playlistLabel.className = 'playlist-label';
  if (youtubePlaylistUrl === DEFAULT_YOUTUBE_PLAYLIST) {
    playlistLabel.textContent = 'Bardcore';
  } else if (youtubePlaylistUrl === ATMOSPHERIC_PLAYLIST) {
    playlistLabel.textContent = 'Atmospheric';
  } else {
    playlistLabel.textContent = 'Custom';
  }

  const trackTitle = document.createElement('span');
  trackTitle.className = 'track-title';
  trackTitle.textContent = 'Not Playing';

  const volumeInfo = document.createElement('span');
  volumeInfo.className = 'volume-info';
  volumeInfo.innerHTML = `Music: ${youtubeVolume}%<br>Effects: ${soundEffectsVolume}%`;

  playlistNameSpan.appendChild(playlistLabel);
  playlistNameSpan.appendChild(trackTitle);
  container.appendChild(playlistNameSpan);
  container.appendChild(volumeInfo);

  const playPauseBtn = document.createElement('button');
  playPauseBtn.className = 'youtube-control';
  playPauseBtn.innerHTML = YOUTUBE_CONTROL_SVG_PLAY;
  playPauseBtn.addEventListener('click', () => {
    if (!youtubePlayer) return;
    if (youtubePlayer.getPlayerState() === YT.PlayerState.PLAYING) {
      youtubePlayer.pauseVideo();
      playPauseBtn.innerHTML = YOUTUBE_CONTROL_SVG_PLAY;
    } else {
      youtubePlayer.playVideo();
      playPauseBtn.innerHTML = YOUTUBE_CONTROL_SVG_PAUSE;
    }
  });
  container.appendChild(playPauseBtn);

  const playerDiv = document.createElement('div');
  playerDiv.id = 'youtube-player';
  container.appendChild(playerDiv);

  // Find the bottom container and the right buttons
  const bottomContainer = document.querySelector('.bottom-container');
  const rightButtons = bottomContainer.querySelector('.right-buttons');

  // Insert the container before the right buttons
  rightButtons.before(container);

  return container;
}

async function createYoutubePlayer() {
  try {
    // Remove existing player and container
    if (youtubePlayer) {
      try {
        youtubePlayer.destroy();
      } catch (e) {
        console.log('Error destroying player:', e);
      }
      youtubePlayer = null;
    }

    const existingContainer = getYoutubePlayerContainer();
    if (existingContainer) {
      existingContainer.remove();
    }

    // Create new container with controls
    createYoutubePlayerContainer();

    // Extract video and playlist IDs
    const { videoId, playlistId } =
      extractVideoAndPlaylistIds(youtubePlaylistUrl);
    if (!videoId && !playlistId) return;

    // Set initial playlist name
    if (youtubePlaylistUrl === DEFAULT_YOUTUBE_PLAYLIST) {
      updatePlaylistBadge('Bardcore');
    } else if (youtubePlaylistUrl === ATMOSPHERIC_PLAYLIST) {
      updatePlaylistBadge('Atmospheric');
    } else {
      updatePlaylistBadge('Custom');
    }

    youtubePlayer = new YT.Player('youtube-player', {
      height: '1',
      width: '1',
      playerVars: {
        autoplay: 0,
        controls: 0,
        disablekb: 1,
        fs: 0,
        modestbranding: 1,
        playsinline: 1,
        rel: 0,
        loop: 1,
        playlist: playlistId,
        iv_load_policy: 3,
        cc_load_policy: 0,
        showinfo: 0,
      },
      events: {
        onReady: onPlayerReady,
        onStateChange: onPlayerStateChange,
        onError: onPlayerError,
      },
    });
  } catch (error) {
    console.error('Error initializing YouTube player:', error);
    updatePlaylistBadge('');
    youtubePlayer = null;
  }
}

function onPlayerReady(event) {
  event.target.setVolume(youtubeVolume);
  const { playlistId } = extractVideoAndPlaylistIds(youtubePlaylistUrl);

  if (playlistId) {
    event.target.cuePlaylist({
      list: playlistId,
      listType: 'playlist',
      index: Math.floor(Math.random() * 50),
      suggestedQuality: 'small',
    });
  }

  // If timer is already running, start playing
  if (isRunning && timeLeft > 0) {
    const dayInfo = document.querySelector('.day-display');
    const isDusk = dayInfo?.classList?.contains('dusk');
    if (!isDusk) {
      event.target.playVideo();
    }
  }
}

function onPlayerStateChange(event) {
  if (event.data === YT.PlayerState.PLAYING) {
    setYoutubeControlButtonIcon(true);
    // Get and display the current track title
    const title = event.target.getVideoData()?.title;
    if (title) {
      updatePlaylistBadge(title);
    }
    // Ensure volume is set correctly when starting playback
    event.target.setVolume(youtubeVolume);
  } else if (
    event.data === YT.PlayerState.PAUSED ||
    event.data === YT.PlayerState.CUED
  ) {
    setYoutubeControlButtonIcon(false);
  } else if (event.data === YT.PlayerState.ENDED) {
    const { playlistId } = extractVideoAndPlaylistIds(youtubePlaylistUrl);
    if (playlistId) {
      event.target.setShuffle(true);
      event.target.playVideoAt(0);
    } else {
      event.target.playVideo();
    }
  }
}

function onPlayerError(event) {
  console.error('YouTube player error:', event);
  updatePlaylistBadge('');
}

// Update YouTube playlist URL
function updateYoutubePlaylist() {
  const input = document.getElementById('youtubePlaylist');
  const newUrl = input.value;

  // Extract IDs to validate URL
  const { videoId, playlistId } = extractVideoAndPlaylistIds(newUrl);

  // Only update if we have a valid video or playlist ID
  if (videoId || playlistId) {
    youtubePlaylistUrl = newUrl;
    saveSettings();

    // Clear the badge - it will be updated when the player loads
    updatePlaylistBadge('');

    // If music is enabled, update the player immediately
    if (playMusic) {
      createYoutubePlayer();
    }
  } else {
    // If invalid URL, revert to the saved URL
    console.log('Invalid YouTube URL, reverting to saved URL');
    input.value = youtubePlaylistUrl;
  }
}

// Toggle music playback
function updateMusicPlayback() {
  playMusic = document.getElementById('playMusic').checked;

  // Update states for music-related elements
  const playMusicAtNightLabel = document
    .getElementById('playMusicAtNight')
    .closest('label');
  const youtubePlaylistLabel = document
    .getElementById('youtubePlaylist')
    .closest('label');
  const musicVolumeInput = document.getElementById('musicVolume');

  document
    .getElementById('youtubePlaylist')
    .setAttribute('aria-hidden', !playMusic);
  musicVolumeInput.setAttribute('aria-hidden', !playMusic);
  musicVolumeInput.disabled = !playMusic;
  document
    .getElementById('playMusicAtNight')
    .setAttribute('aria-hidden', !playMusic);

  playMusicAtNightLabel.classList.toggle('inactive', !playMusic);
  youtubePlaylistLabel.classList.toggle('inactive', !playMusic);
  musicVolumeInput.closest('label').classList.toggle('inactive', !playMusic);

  document
    .getElementById('useBardcorePlaylist')
    .classList.toggle('inactive', !playMusic);
  document
    .getElementById('useAtmosphericPlaylist')
    .classList.toggle('inactive', !playMusic);
  document
    .getElementById('openYoutubePlaylist')
    .classList.toggle('inactive', !playMusic);

  if (playMusic) {
    initYoutubePlayer();
  } else {
    youtubeUtils.stop();
    if (youtubePlayer) {
      try {
        youtubePlayer.destroy();
      } catch (e) {
        console.log('Error destroying YouTube player:', e);
      }
      youtubePlayer = null;
    }
    const container = getYoutubePlayerContainer();
    if (container) {
      container.remove();
    }
  }
  saveSettings();
}

// Update YouTube volume
function updateYoutubeVolume() {
  youtubeVolume = Number.parseInt(document.getElementById('musicVolume').value);
  document.querySelector(
    'label:has(#musicVolume) .volume-value'
  ).textContent = `${youtubeVolume}%`;
  if (youtubePlayer?.setVolume) {
    youtubePlayer.setVolume(youtubeVolume);
  }
  // Update volume info display
  const volumeInfo = document.querySelector('.volume-info');
  if (volumeInfo) {
    volumeInfo.innerHTML = `Music: ${youtubeVolume}%<br>Effects: ${soundEffectsVolume}%`;
  }
  saveSettings();
}

// Update sound effects playback
function updateSoundEffects() {
  playSoundEffects = document.getElementById('playSoundEffects').checked;

  // Get all sound effect dependent elements
  const soundDependentElements = [
    {
      element: document.querySelector('label:has(#endOfDaySound)'),
      type: 'label',
    },
    {
      element: document.querySelector('label:has(#wakeUpSound)'),
      type: 'label',
    },
    {
      element: document.querySelector('label:has(#nominationsOpenSound)'),
      type: 'label',
    },
    {
      element: document.querySelector('label:has(#soundEffectsVolume)'),
      type: 'label',
    },
  ];

  // Apply inactive state to all dependent elements
  const nominationsOpenLabel = document.querySelector(
    'label:has(#nominationsOpenSound)'
  );
  const nominationsOpenSelect = document.getElementById('nominationsOpenSound');

  soundDependentElements.forEach(({ element, type }) => {
    if (element) {
      const isNominationsOpen = element === nominationsOpenLabel;
      const inactive = isNominationsOpen
        ? !playSoundEffects || !autoOpenNominations
        : !playSoundEffects;
      element.classList.toggle('inactive', inactive);
      element.dataset.inactiveMessage =
        isNominationsOpen && !autoOpenNominations
          ? 'Enable "Automatically open nominations" in Game settings first'
          : 'Enable "Play Sound Effects" first';
      if (type === 'label') {
        const input = element.querySelector('select, input');
        if (input) {
          input.setAttribute('aria-hidden', inactive);
          if (input === nominationsOpenSelect) {
            input.disabled = !autoOpenNominations;
          }
        }
      }
    }
  });
}

// Update sound effects volume
function updateSoundEffectsVolume() {
  soundEffectsVolume = Number.parseInt(
    document.getElementById('soundEffectsVolume').value
  );
  document.querySelector(
    'label:has(#soundEffectsVolume) .volume-value'
  ).textContent = `${soundEffectsVolume}%`;
  // Update volume info display
  const volumeInfo = document.querySelector('.volume-info');
  if (volumeInfo) {
    volumeInfo.innerHTML = `Music: ${youtubeVolume}%<br>Effects: ${soundEffectsVolume}%`;
  }
  saveSettings();
}

// Update background theme
function updateBackgroundTheme() {
  backgroundTheme = document.getElementById('backgroundTheme').value;
  document.body.dataset.theme = backgroundTheme;
  saveSettings();
}

// Extract video and playlist IDs from YouTube URL
function extractVideoAndPlaylistIds(url) {
  const videoIdPattern = String.raw`[^"&?/\s]{11}`;
  const youtuBeRegex = new RegExp(
    String.raw`youtu\.be/(${videoIdPattern})`,
    'i'
  );
  const youtubePathRegex = new RegExp(
    String.raw`(?:v|e(?:mbed)?)/(${videoIdPattern})`,
    'i'
  );
  const youtubeQueryRegex = new RegExp(String.raw`[?&]v=(${videoIdPattern})`);

  const videoId =
    url.match(youtuBeRegex)?.[1] ??
    url.match(youtubePathRegex)?.[1] ??
    url.match(youtubeQueryRegex)?.[1];

  const playlistMatch = url.match(/[?&]list=([^#&?]+)/);

  return {
    videoId: videoId ?? null,
    playlistId: playlistMatch ? playlistMatch[1] : null,
  };
}

// Update YouTube link URL
function updateYoutubeLink() {
  const youtubeLink = document.getElementById('openYoutubePlaylist');
  youtubeLink.href = youtubePlaylistUrl;
  youtubeLink.classList.toggle('disabled', !playMusic);
}

// Update the badge function
function updatePlaylistBadge(title) {
  const playlistName = document.querySelector('.playlist-name');
  if (!playlistName) return;

  const playlistLabel = playlistName.querySelector('.playlist-label');
  const trackTitle = playlistName.querySelector('.track-title');

  // Update playlist label if needed, or update track title
  if (title) {
    if (title.length > 40) {
      trackTitle.textContent = title.substring(0, 37) + '...';
    } else {
      trackTitle.textContent = title;
    }
    trackTitle.title = title; // Add full title as tooltip
  } else {
    if (youtubePlaylistUrl === DEFAULT_YOUTUBE_PLAYLIST) {
      playlistLabel.textContent = 'Bardcore';
    } else if (youtubePlaylistUrl === ATMOSPHERIC_PLAYLIST) {
      playlistLabel.textContent = 'Atmospheric';
    } else {
      playlistLabel.textContent = 'Custom';
    }
    trackTitle.textContent = 'Not Playing';
  }
}

// Show What's New dialog (for version updates)
function showWhatsNew(lastVersion) {
  // Compare versions properly using string comparison
  const versions = Object.entries(CHANGELOG)
    .filter(([version]) => {
      const [lastMajor, lastMinor, lastPatch] = lastVersion
        .split('.')
        .map(Number);
      const [verMajor, verMinor, verPatch] = version.split('.').map(Number);
      const [currMajor, currMinor, currPatch] =
        APP_VERSION.split('.').map(Number);

      // Create comparable numbers (e.g., 1.0.0 -> 100000)
      const lastNum = lastMajor * 10000 + lastMinor * 100 + lastPatch;
      const verNum = verMajor * 10000 + verMinor * 100 + verPatch;
      const currNum = currMajor * 10000 + currMinor * 100 + currPatch;

      // Show all versions between lastSeenVersion and current version
      return verNum > lastNum && verNum <= currNum;
    })
    .sort(([a], [b]) => {
      const [aMajor, aMinor, aPatch] = a.split('.').map(Number);
      const [bMajor, bMinor, bPatch] = b.split('.').map(Number);
      const aNum = aMajor * 10000 + aMinor * 100 + aPatch;
      const bNum = bMajor * 10000 + bMinor * 100 + bPatch;
      return bNum - aNum;
    });

  if (versions.length === 0) return;

  // Get the most recent version for the header
  const [latestVersion, latestData] = versions[0];

  // Update dialog header with latest version
  document.querySelector(
    '.version-number'
  ).textContent = `Version ${latestVersion}`;
  document.querySelector('.version-date').textContent = latestData.date;

  // Create the content for all versions
  const content = document.querySelector('.changes-container');
  content.innerHTML = versions
    .map(([version, data]) => {
      const features = data.changes.features || [];
      const fixes = data.changes.fixes || [];
      const improvements = data.changes.improvements || [];

      return `
        ${
          version === latestVersion
            ? ''
            : `
          <div class="version-info">
            <span class="version-number">Version ${version}</span>
            <span class="version-date">${data.date}</span>
          </div>
        `
        }
        ${
          features.length > 0
            ? `
          <div class="changes-section">
            <h3>New Features</h3>
            <ul class="features-list">
              ${features.map((feature) => `<li>${feature}</li>`).join('')}
            </ul>
          </div>
        `
            : ''
        }
        ${
          fixes.length > 0
            ? `
          <div class="changes-section">
            <h3>Fixes</h3>
            <ul class="fixes-list">
              ${fixes.map((fix) => `<li>${fix}</li>`).join('')}
            </ul>
          </div>
        `
            : ''
        }
        ${
          improvements.length > 0
            ? `
          <div class="changes-section">
            <h3>Improvements</h3>
            <ul class="improvements-list">
              ${improvements
                .map((improvement) => `<li>${improvement}</li>`)
                .join('')}
            </ul>
          </div>
        `
            : ''
        }
        ${
          version === versions.at(-1)[0] ? '' : '<hr class="version-separator">'
        }
      `;
    })
    .join('');

  // Show dialog
  whatsNewDialog.showModal();
}

// Show Change History dialog (shows all versions)
function showChangeHistory() {
  const content = document.getElementById('changeHistoryContent');

  // Check if CHANGELOG is available
  if (!CHANGELOG) {
    console.error('CHANGELOG not available');
    return;
  }

  const versions = Object.entries(CHANGELOG).sort(
    ([a], [b]) => Number.parseFloat(b) - Number.parseFloat(a)
  );

  // Don't open dialog if there's no changelog data
  if (versions.length === 0) {
    console.warn('No changelog data available');
    return;
  }

  let html = '';
  versions.forEach(([version, data], index) => {
    const features = data.changes.features || [];
    const fixes = data.changes.fixes || [];
    const improvements = data.changes.improvements || [];

    html += `
      <div class="version-info">
        <span class="version-number">Version ${version}</span>
        <span class="version-date">${data.date}</span>
      </div>
      <div class="changes-container">
        ${
          features.length > 0
            ? `
          <div class="changes-section">
            <h3>New Features</h3>
            <ul class="features-list">
              ${features.map((feature) => `<li>${feature}</li>`).join('')}
            </ul>
          </div>
        `
            : ''
        }
        ${
          fixes.length > 0
            ? `
          <div class="changes-section">
            <h3>Fixes</h3>
            <ul class="fixes-list">
              ${fixes.map((fix) => `<li>${fix}</li>`).join('')}
            </ul>
          </div>
        `
            : ''
        }
        ${
          improvements.length > 0
            ? `
          <div class="changes-section">
            <h3>Improvements</h3>
            <ul class="improvements-list">
              ${improvements
                .map((improvement) => `<li>${improvement}</li>`)
                .join('')}
            </ul>
          </div>
        `
            : ''
        }
      </div>
      ${index < versions.length - 1 ? '<hr class="version-separator">' : ''}
    `;
  });

  if (!content) {
    console.error('changeHistoryContent element not found');
    return;
  }

  content.innerHTML = html;

  // Only open dialog if content was successfully populated
  if (html.trim().length > 0 && changeHistoryDialog) {
    changeHistoryDialog.showModal();
  } else {
    console.warn('No content to display in change history dialog');
  }
}

// Close What's New dialog
function closeWhatsNew() {
  whatsNewDialog.close();
}

// Close Change History dialog
function closeChangeHistory() {
  if (changeHistoryDialog) {
    changeHistoryDialog.close();
    changeHistoryDialog.removeAttribute('open');
  }
}

function tryHandleResetShortcut(e, currentKey) {
  if (
    !keyboardShortcuts.reset ||
    currentKey !== keyboardShortcuts.reset ||
    settingsDialog.open ||
    infoDialog.open
  ) {
    return;
  }
  if (e.ctrlKey || e.metaKey || e.altKey || e.shiftKey) return;
  resetTimer();
}

// Add keyboard navigation support
function setupKeyboardNavigation() {
  document.removeEventListener('keydown', handleKeyboardNavigation);

  function handleKeyboardNavigation(e) {
    if (e.target.classList.contains('shortcut-input')) return;

    const currentKey = e.key;

    if (
      keyboardShortcuts.settings &&
      currentKey === keyboardShortcuts.settings &&
      !settingsDialog.open
    ) {
      openSettings();
    }
    if (
      keyboardShortcuts.info &&
      currentKey === keyboardShortcuts.info &&
      !infoDialog.open
    ) {
      openInfo();
    }
    if (keyboardShortcuts.wakeUp && currentKey === keyboardShortcuts.wakeUp) {
      if (!settingsDialog.open && !infoDialog.open) {
        e.preventDefault();
        startTimer();
      }
    }
    tryHandleResetShortcut(e, currentKey);
    if (
      keyboardShortcuts.accelerate &&
      currentKey === keyboardShortcuts.accelerate &&
      !settingsDialog.open &&
      !infoDialog.open
    ) {
      e.preventDefault();
      if (!accelerateBtn.disabled) {
        accelerateBtn.click();
      }
    }
    if (
      keyboardShortcuts.fullscreen &&
      currentKey === keyboardShortcuts.fullscreen
    ) {
      e.preventDefault();
      toggleFullscreen();
    }
    if (e.key === 'Escape' && document.fullscreenElement) {
      document.exitFullscreen();
    }
  }

  document.addEventListener('keydown', handleKeyboardNavigation);
}

// Enhance error handling for async operations
async function safeAsyncOperation(operation, fallback = null) {
  try {
    return await operation();
  } catch (error) {
    console.error(`Operation failed: ${error.message}`);
    return fallback;
  }
}

async function fetchPlaylistTitle(playlistId) {
  try {
    const response = await fetch(
      `https://www.googleapis.com/youtube/v3/playlists?part=snippet&id=${playlistId}&key=${YOUTUBE_API_KEY}`
    );
    const data = await response.json();
    if (data.items && data.items.length > 0) {
      return data.items[0].snippet.title;
    }
    return null;
  } catch (error) {
    console.error('Error fetching playlist title:', error);
    return null;
  }
}