carplay/public/app.js

const elements = {
  entryScreen: document.querySelector('#entry-screen'),
  playerScreen: document.querySelector('#player-screen'),
  form: document.querySelector('#stream-form'),
  url: document.querySelector('#stream-url'),
  play: document.querySelector('#play'),
  queue: document.querySelector('#queue'),
  entryMessage: document.querySelector('#entry-message'),
  libraryPanel: document.querySelector('#library-panel'),
  recentPanel: document.querySelector('#recent-panel'),
  recentList: document.querySelector('#recent-list'),
  favoritesPanel: document.querySelector('#favorites-panel'),
  favoritesList: document.querySelector('#favorites-list'),
  editFavorites: document.querySelector('#edit-favorites'),
  favoritesModal: document.querySelector('#favorites-modal'),
  favoritesForm: document.querySelector('#favorites-form'),
  closeFavorites: document.querySelector('#close-favorites'),
  cancelFavorites: document.querySelector('#cancel-favorites'),
  addFavorite: document.querySelector('#add-favorite'),
  saveFavorites: document.querySelector('#save-favorites'),
  favoritesManager: document.querySelector('#favorites-manager'),
  favoritesEditorList: document.querySelector('#favorites-editor-list'),
  favoriteWizard: document.querySelector('#favorite-wizard'),
  favoriteWizardStep: document.querySelector('#favorite-wizard-step'),
  favoriteWizardBack: document.querySelector('#favorite-wizard-back'),
  favoriteTitleField: document.querySelector('#favorite-title-field'),
  favoriteUrlField: document.querySelector('#favorite-url-field'),
  favoriteTitle: document.querySelector('#favorite-title'),
  favoriteUrl: document.querySelector('#favorite-url'),
  favoritesMessage: document.querySelector('#favorites-message'),
  audio: document.querySelector('#audio'),
  canvas: document.querySelector('#screen'),
  stage: document.querySelector('#video-stage'),
  loader: document.querySelector('#loader'),
  playerMessage: document.querySelector('#player-message'),
  controls: document.querySelector('#controls'),
  playhead: document.querySelector('#playhead'),
  seek: document.querySelector('#seek'),
  currentTime: document.querySelector('#current-time'),
  totalTime: document.querySelector('#total-time'),
  back: document.querySelector('#back'),
  playPause: document.querySelector('#play-pause'),
  mute: document.querySelector('#mute'),
};

const context = elements.canvas.getContext('2d', { alpha: false, desynchronized: true });
const FRAME_LATE_GRACE_SECONDS = 0.25;
const FRAME_CLOCK_SEND_INTERVAL_MS = 250;
const CLIENT_TELEMETRY_INTERVAL_MS = 5000;
const MAX_PENDING_FRAME_QUEUE_SECONDS = 2;
const MAX_DECODED_FRAME_QUEUE_SECONDS = 3;
const MIN_PENDING_FRAME_QUEUE = 12;
const MIN_DECODED_FRAME_QUEUE = 24;
const IMAGE_DECODE_TIMEOUT_MS = 3000;
const FRAME_STALL_CHECK_MS = 1000;
const FRAME_STARTUP_STALL_RESET_MS = 15000;
const FRAME_STALL_RESET_MS = 12000;
const FRAME_PACKET_ACTIVITY_GRACE_MS = 5000;
const FRAME_UNPAINTED_PACKET_RESET_MS = 20000;
const PLAYBACK_RESTART_COOLDOWN_MS = 15000;
const PLAYBACK_RESTART_DELAY_MS = 750;
const MIN_RECOVERY_RESUME_SECONDS = 2;
const METADATA_REFRESH_ATTEMPTS = 20;
const METADATA_REFRESH_INTERVAL_MS = 650;

const state = {
  generation: 0,
  streamGeneration: 0,
  session: null,
  websocket: null,
  pendingFrames: [],
  decodingFrames: false,
  frames: [],
  currentBitmap: null,
  raf: 0,
  frameCount: 0,
  controlsVisible: true,
  hideControlsTimer: 0,
  recentUrls: [],
  favorites: [],
  favoriteModalTrigger: null,
  favoriteWizard: createFavoriteWizardState(),
  playbackOffset: 0,
  duration: null,
  seekable: false,
  isSeeking: false,
  seekPointerId: null,
  isRestartingPlayback: false,
  seekPreviewTime: 0,
  lastSeekCommitTime: null,
  lastSeekCommitAt: 0,
  frameWatchdogTimer: 0,
  lastFramePacketAt: 0,
  lastFramePaintedAt: 0,
  lastFrameClockSentAt: 0,
  lastClientTelemetrySentAt: 0,
  lastPlaybackRestartAt: 0,
  lastRenderErrorAt: 0,
  clientTelemetry: createClientTelemetry(),
};

void loadEntryLists();

elements.form.addEventListener('submit', async (event) => {
  event.preventDefault();
  await playCurrentUrl();
});

elements.queue.addEventListener('click', () => {
  void queueCurrentUrl();
});

async function playCurrentUrl() {
  setEntryMessage('');
  setFormBusy(true);

  try {
    stopSession({ showEntry: false });

    const response = await fetch('/api/session', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ url: elements.url.value, width: getViewportFrameWidth() }),
    });

    const payload = await response.json();

    if (!response.ok) {
      throw new Error(payload.error ?? 'Failed to create stream session.');
    }

    showPlayer();
    void loadRecentUrls();
    startSession(payload);
  } catch (error) {
    stopSession();
    setEntryMessage(error.message);
  } finally {
    setFormBusy(false);
  }
}

async function queueCurrentUrl() {
  setEntryMessage('');
  setFormBusy(true);

  try {
    const response = await fetch('/api/recent-urls', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ url: elements.url.value }),
    });
    const payload = await response.json();

    if (!response.ok) {
      throw new Error(payload.error ?? 'Failed to queue URL.');
    }

    state.recentUrls = Array.isArray(payload.urls) ? payload.urls : [];
    renderRecentUrls();
    setEntryMessage('Queued');
  } catch (error) {
    setEntryMessage(error.message);
  } finally {
    setFormBusy(false);
  }
}

elements.recentList.addEventListener('click', (event) => {
  const button = event.target.closest('[data-recent-index]');

  if (!button) {
    return;
  }

  const item = state.recentUrls[Number(button.dataset.recentIndex)];

  if (!item) {
    return;
  }

  elements.url.value = item.url;
  elements.form.requestSubmit();
});

elements.favoritesList.addEventListener('click', (event) => {
  const button = event.target.closest('[data-favorite-index]');

  if (!button) {
    return;
  }

  const item = state.favorites[Number(button.dataset.favoriteIndex)];

  if (!item) {
    return;
  }

  elements.url.value = item.url;
  elements.form.requestSubmit();
});

elements.editFavorites.addEventListener('click', () => {
  openFavoritesModal();
});

elements.closeFavorites.addEventListener('click', () => {
  closeFavoritesModal();
});

elements.cancelFavorites.addEventListener('click', () => {
  if (state.favoriteWizard.active) {
    showFavoritesManager();
    return;
  }

  closeFavoritesModal();
});

elements.addFavorite.addEventListener('click', () => {
  startFavoriteWizard('add');
});

elements.favoritesEditorList.addEventListener('click', (event) => {
  const removeButton = event.target.closest('[data-remove-favorite]');
  const editButton = event.target.closest('[data-edit-favorite]');

  if (removeButton) {
    void removeFavorite(Number(removeButton.dataset.removeFavorite));
    return;
  }

  if (editButton) {
    startFavoriteWizard('edit', Number(editButton.dataset.editFavorite));
  }
});

elements.favoritesForm.addEventListener('submit', (event) => {
  event.preventDefault();
  void advanceFavoriteWizard();
});

elements.favoriteWizardBack.addEventListener('click', () => {
  if (!state.favoriteWizard.active) {
    return;
  }

  if (state.favoriteWizard.step === 'url') {
    state.favoriteWizard.step = 'title';
    syncFavoriteWizard();
    return;
  }

  showFavoritesManager();
});

elements.favoritesModal.addEventListener('click', (event) => {
  if (event.target === elements.favoritesModal) {
    closeFavoritesModal();
  }
});

window.addEventListener('keydown', (event) => {
  if (event.key === 'Escape' && !elements.favoritesModal.hidden) {
    closeFavoritesModal();
  }
});

elements.stage.addEventListener('pointerup', (event) => {
  if (!state.session || event.target.closest('.controls')) {
    return;
  }

  setControlsVisible(!state.controlsVisible);
});

elements.back.addEventListener('click', () => {
  stopSession();
});

elements.playPause.addEventListener('click', () => {
  if (elements.audio.paused) {
    void playAudio();
    return;
  }

  elements.audio.pause();
});

elements.mute.addEventListener('click', () => {
  elements.audio.muted = !elements.audio.muted;
  syncControlLabels();
});

elements.seek.addEventListener('pointerdown', (event) => {
  beginSeekScrub(event);
});

elements.seek.addEventListener('input', () => {
  updateSeekScrubPreview();
});

elements.seek.addEventListener('pointermove', (event) => {
  if (state.isSeeking && state.seekPointerId === null) {
    updateSeekScrubPreview(event);
  }
});

elements.seek.addEventListener('pointerup', (event) => {
  updateSeekScrubPreview(event);
  commitSeekScrub(event);
});

elements.seek.addEventListener('pointercancel', () => {
  cancelSeekScrub();
});

elements.seek.addEventListener('change', () => {
  commitSeekScrub({ force: true });
});

window.addEventListener('pointerup', (event) => {
  if (state.seekPointerId === event.pointerId) {
    updateSeekScrubPreview(event);
    commitSeekScrub(event);
  }
});

window.addEventListener('pointermove', (event) => {
  if (state.seekPointerId === event.pointerId) {
    updateSeekScrubPreview(event);
  }
});

window.addEventListener('pointercancel', (event) => {
  if (state.seekPointerId === event.pointerId) {
    cancelSeekScrub();
  }
});

elements.audio.addEventListener('play', () => {
  startRenderLoop();
  startFrameWatchdog();
  syncControlLabels();
  scheduleControlsHide();
  syncPlayhead();
});

elements.audio.addEventListener('pause', () => {
  syncControlLabels();
  setControlsVisible(true);
  syncPlayhead();
});

elements.audio.addEventListener('playing', () => {
  noteClientTelemetry('audioPlaying');
  elements.loader.hidden = state.frameCount > 0;
  clearPlayerMessage();
  scheduleControlsHide();
});

elements.audio.addEventListener('waiting', () => {
  if (state.session) {
    noteClientTelemetry('audioWaiting');
    elements.loader.hidden = false;
  }
});

elements.audio.addEventListener('timeupdate', () => {
  syncPlayhead();
});

elements.audio.addEventListener('ended', () => {
  noteClientTelemetry('audioEnded');
  syncPlayhead();
  setControlsVisible(true);
});

elements.audio.addEventListener('error', () => {
  if (state.session) {
    noteClientTelemetry('audioErrors');
    sendClientTelemetry({ force: true, reason: 'audio_error' });
    showPlayerMessage('Audio failed');
    setControlsVisible(true);
  }
});

window.addEventListener('online', () => {
  const stallReason = getFrameStallReason();

  if (state.session && !elements.audio.paused && stallReason) {
    void restartPlaybackStreams(`network_recovered_${stallReason}`);
  }
});

document.addEventListener('visibilitychange', () => {
  const stallReason = getFrameStallReason();

  if (!document.hidden && state.session && !elements.audio.paused && stallReason) {
    void restartPlaybackStreams(`visible_${stallReason}`);
  }
});

function startSession(session) {
  state.session = session;
  state.playbackOffset = Number(session.seekSeconds) || 0;
  state.duration = normalizeDuration(session.duration);
  state.seekable = Boolean(session.seekable);
  state.isSeeking = false;
  state.seekPreviewTime = state.playbackOffset;
  state.frameCount = 0;
  state.lastFramePacketAt = 0;
  state.lastFramePaintedAt = 0;
  clearFrameQueue();
  syncControlLabels();
  syncPlayhead();
  setControlsVisible(true);
  elements.loader.hidden = false;
  clearPlayerMessage();

  connectPlaybackStreams();
  startFrameWatchdog();
  void refreshSessionMetadata(session.id);
}

function connectPlaybackStreams() {
  if (!state.session) {
    return;
  }

  const streamGeneration = state.streamGeneration + 1;
  const session = state.session;
  const now = Date.now();
  state.streamGeneration = streamGeneration;
  state.lastPlaybackRestartAt = now;
  state.lastFramePacketAt = now;
  state.lastFrameClockSentAt = 0;

  if (state.websocket) {
    state.websocket.close(1000, 'client reconnecting');
    state.websocket = null;
  }

  const websocketProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
  const websocketUrl = `${websocketProtocol}//${window.location.host}/frames/${session.id}?g=${session.seekGeneration ?? 0}`;
  const websocket = new WebSocket(websocketUrl);
  websocket.binaryType = 'arraybuffer';
  state.websocket = websocket;

  websocket.addEventListener('message', (event) => {
    if (streamGeneration !== state.streamGeneration) {
      return;
    }

    if (typeof event.data === 'string') {
      handleControlMessage(event.data);
      return;
    }

    handleFramePacket(event.data, streamGeneration);
  });

  websocket.addEventListener('close', () => {
    if (streamGeneration === state.streamGeneration && state.session?.id === session.id) {
      showPlayerMessage('Stream ended');
      setControlsVisible(true);
    }
  });

  websocket.addEventListener('error', () => {
    if (streamGeneration === state.streamGeneration && state.session?.id === session.id) {
      showPlayerMessage('Stream failed');
      setControlsVisible(true);
    }
  });

  elements.audio.pause();
  elements.audio.src = `/audio/${session.id}?g=${session.seekGeneration ?? 0}`;
  elements.audio.load();
  void playAudio();
  startRenderLoop();
}

async function playAudio() {
  try {
    await elements.audio.play();
    clearPlayerMessage();
  } catch {
    showPlayerMessage('Tap play');
    setControlsVisible(true);
  }
}

function startFrameWatchdog() {
  if (state.frameWatchdogTimer) {
    return;
  }

  state.frameWatchdogTimer = window.setInterval(checkFrameWatchdog, FRAME_STALL_CHECK_MS);
}

function clearFrameWatchdog() {
  if (!state.frameWatchdogTimer) {
    return;
  }

  window.clearInterval(state.frameWatchdogTimer);
  state.frameWatchdogTimer = 0;
}

function checkFrameWatchdog() {
  if (!state.session || state.isSeeking || state.isRestartingPlayback || document.hidden || elements.audio.paused || elements.audio.ended || elements.audio.readyState === 0) {
    return;
  }

  const stallReason = getFrameStallReason();

  if (!stallReason) {
    return;
  }

  void restartPlaybackStreams(stallReason);
}

function getFrameStallReason() {
  const now = Date.now();

  if (!state.session || state.isSeeking || state.isRestartingPlayback || elements.audio.paused || elements.audio.ended || elements.audio.readyState === 0) {
    return '';
  }

  if (now - state.lastPlaybackRestartAt < PLAYBACK_RESTART_COOLDOWN_MS) {
    return '';
  }

  const hasRecentPackets = state.lastFramePacketAt > state.lastFramePaintedAt
    && now - state.lastFramePacketAt < FRAME_PACKET_ACTIVITY_GRACE_MS;

  if (hasRecentPackets) {
    const unpaintedSince = state.lastFramePaintedAt > state.lastPlaybackRestartAt
      ? state.lastFramePaintedAt
      : state.lastPlaybackRestartAt;

    if (now - unpaintedSince < FRAME_UNPAINTED_PACKET_RESET_MS) {
      return '';
    }

    return 'frame_packets_unpainted';
  }

  if (state.lastFramePaintedAt < state.lastPlaybackRestartAt) {
    return now - state.lastPlaybackRestartAt >= FRAME_STARTUP_STALL_RESET_MS ? 'frame_startup_stalled' : '';
  }

  return now - state.lastFramePaintedAt >= FRAME_STALL_RESET_MS ? 'frame_paint_stalled' : '';
}

async function restartPlaybackStreams(reason = 'frame_stalled') {
  if (!state.session || state.isRestartingPlayback) {
    return;
  }

  console.warn(`Restarting playback streams: ${reason}`);
  noteClientTelemetry('playbackRestarts');
  sendClientTelemetry({ force: true, reason });

  state.isRestartingPlayback = true;

  try {
    const resumeTime = getVisiblePlaybackTime();

    if (resumeTime >= MIN_RECOVERY_RESUME_SECONDS) {
      const resumed = await resumePlaybackAt(resumeTime, reason);

      if (resumed) {
        return;
      }
    }

    restartPlaybackFromCurrentSource(reason);
  } finally {
    state.isRestartingPlayback = false;
  }
}

function restartPlaybackFromCurrentSource(reason) {
  if (!state.session) {
    return;
  }

  const streamGeneration = state.streamGeneration + 1;
  const sessionId = state.session.id;
  const now = Date.now();

  state.streamGeneration = streamGeneration;
  state.lastPlaybackRestartAt = now;
  state.lastFramePacketAt = now;
  elements.loader.hidden = false;
  clearPlayerMessage();
  clearFrameQueue({ keepCurrent: true });

  if (state.websocket) {
    state.websocket.close(1000, 'frame stream stalled');
    state.websocket = null;
  }

  elements.audio.pause();
  elements.audio.removeAttribute('src');
  elements.audio.load();

  window.setTimeout(() => {
    if (state.session?.id === sessionId && state.streamGeneration === streamGeneration) {
      connectPlaybackStreams();
    }
  }, PLAYBACK_RESTART_DELAY_MS);
}

async function resumePlaybackAt(value, reason) {
  const sessionId = state.session?.id;

  if (!sessionId) {
    return false;
  }

  const duration = state.duration;
  const targetTime = clampNumber(value, 0, Number.isFinite(duration) ? duration : Number.MAX_SAFE_INTEGER);

  try {
    const response = await fetch(`/api/session/${encodeURIComponent(sessionId)}/seek`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ time: targetTime, allowBestEffort: true, reason }),
    });
    const payload = await response.json();

    if (response.status === 409) {
      return false;
    }

    if (!response.ok) {
      throw new Error(payload.error ?? 'Recovery seek failed.');
    }

    if (state.session?.id !== sessionId) {
      return true;
    }

    state.generation += 1;
    state.streamGeneration += 1;
    state.session = payload;
    updateSessionMetadata(payload);
    state.playbackOffset = Number.isFinite(payload.seekSeconds) ? payload.seekSeconds : targetTime;
    state.seekPreviewTime = state.playbackOffset;
    state.isSeeking = false;
    state.frameCount = 0;
    state.lastFramePacketAt = 0;
    state.lastFramePaintedAt = 0;
    elements.loader.hidden = false;
    clearPlayerMessage();
    clearFrameQueue({ keepCurrent: true });
    syncPlayhead();

    if (state.websocket) {
      state.websocket.close(1000, 'client recovery seek');
      state.websocket = null;
    }

    elements.audio.pause();
    elements.audio.removeAttribute('src');
    elements.audio.load();
    connectPlaybackStreams();
    return true;
  } catch (error) {
    console.warn('Playback recovery seek failed', error);
    return false;
  }
}

function handleFramePacket(packet, streamGeneration) {
  if (!(packet instanceof ArrayBuffer) || packet.byteLength <= 8) {
    return;
  }

  const timestamp = new DataView(packet, 0, 8).getFloat64(0, true);

  if (streamGeneration !== state.streamGeneration) {
    return;
  }

  if (isLateFrame(timestamp)) {
    noteLateFrameTelemetry('lateFramePackets', timestamp);
    state.lastFramePacketAt = Date.now();
    return;
  }

  state.lastFramePacketAt = Date.now();
  state.pendingFrames.push({ timestamp, jpeg: new Uint8Array(packet, 8), streamGeneration });
  trimPendingFrameQueue();
  void pumpFrameDecodeQueue();
}

function handleControlMessage(rawMessage) {
  let message;

  try {
    message = JSON.parse(rawMessage);
  } catch {
    return;
  }

  if (message.type === 'error') {
    showPlayerMessage('Stream failed');
    setControlsVisible(true);
  }

  if (message.type === 'ready') {
    updateSessionMetadata(message);
  }

  if (message.type === 'end') {
    showPlayerMessage('Stream ended');
    setControlsVisible(true);
  }
}

function sendFrameClock() {
  if (!state.session || !state.websocket || state.websocket.readyState !== WebSocket.OPEN || elements.audio.readyState === 0) {
    return;
  }

  const now = Date.now();

  if (now - state.lastFrameClockSentAt < FRAME_CLOCK_SEND_INTERVAL_MS) {
    return;
  }

  const currentTime = Number.isFinite(elements.audio.currentTime) ? elements.audio.currentTime : 0;

  state.lastFrameClockSentAt = now;

  try {
    state.websocket.send(JSON.stringify({ type: 'clock', currentTime }));
  } catch {
    state.lastFrameClockSentAt = 0;
  }
}

function sendClientTelemetry({ force = false, reason = 'periodic' } = {}) {
  if (!state.websocket || state.websocket.readyState !== WebSocket.OPEN) {
    return;
  }

  const now = Date.now();

  if (!force && now - state.lastClientTelemetrySentAt < CLIENT_TELEMETRY_INTERVAL_MS) {
    return;
  }

  state.lastClientTelemetrySentAt = now;

  const currentTime = Number.isFinite(elements.audio.currentTime) ? elements.audio.currentTime : 0;
  const telemetry = state.clientTelemetry;
  const payload = {
    type: 'telemetry',
    reason,
    currentTime,
    paused: elements.audio.paused,
    readyState: elements.audio.readyState,
    pendingFrames: state.pendingFrames.length,
    decodedFrames: state.frames.length,
    paintedFrames: state.frameCount,
    lastFramePacketAgeMs: state.lastFramePacketAt > 0 ? now - state.lastFramePacketAt : null,
    lastFramePaintAgeMs: state.lastFramePaintedAt > 0 ? now - state.lastFramePaintedAt : null,
    hidden: document.hidden,
    online: navigator.onLine,
    counters: telemetry.counters,
    max: telemetry.max,
  };

  state.clientTelemetry = createClientTelemetry();

  try {
    state.websocket.send(JSON.stringify(payload));
  } catch {
    state.clientTelemetry = mergeClientTelemetry(state.clientTelemetry, telemetry);
    state.lastClientTelemetrySentAt = 0;
  }
}

function startRenderLoop() {
  if (state.raf) {
    return;
  }

  const render = () => {
    try {
      sendFrameClock();
      sendClientTelemetry();
      drawReadyFrames();
      syncPlayhead();
    } catch (error) {
      logRenderError(error);
    } finally {
      if (state.session) {
        state.raf = requestAnimationFrame(render);
      } else {
        state.raf = 0;
      }
    }
  };

  state.raf = requestAnimationFrame(render);
}

function drawReadyFrames() {
  if (!state.session) {
    return;
  }

  dropLateDecodedFrames();

  const frameLeadSeconds = 1 / Math.max(1, state.session.options.fps);
  const targetTime = elements.audio.currentTime + frameLeadSeconds;
  let frameToDraw = null;

  while (state.frames.length > 0 && state.frames[0].timestamp <= targetTime) {
    const frame = state.frames.shift();

    if (frameToDraw) {
      noteClientTelemetry('readyFramesSkippedForNewer');
      releaseImage(frameToDraw.bitmap);
    }

    frameToDraw = frame;
  }

  if (!frameToDraw) {
    return;
  }

  if (state.currentBitmap) {
    releaseImage(state.currentBitmap);
  }

  state.currentBitmap = frameToDraw.bitmap;
  drawBitmap(frameToDraw.bitmap);
  noteClientTelemetry('framesPainted');
  noteFrameLagTelemetry('paintLagMs', frameToDraw.timestamp);
  state.lastFramePaintedAt = Date.now();
  elements.loader.hidden = true;
  clearPlayerMessage();
}

function drawBitmap(bitmap) {
  const width = bitmap.width || bitmap.naturalWidth;
  const height = bitmap.height || bitmap.naturalHeight;

  if (elements.canvas.width !== width || elements.canvas.height !== height) {
    elements.canvas.width = width;
    elements.canvas.height = height;
  }

  context.drawImage(bitmap, 0, 0, elements.canvas.width, elements.canvas.height);
}

async function pumpFrameDecodeQueue() {
  if (state.decodingFrames) {
    return;
  }

  state.decodingFrames = true;

  try {
    while (state.pendingFrames.length > 0) {
      dropLatePendingFrames();

      const frame = state.pendingFrames.shift();

      if (!frame) {
        return;
      }

      if (frame.streamGeneration !== state.streamGeneration) {
        noteClientTelemetry('staleGenerationPendingFrames');
        continue;
      }

      if (isLateFrame(frame.timestamp)) {
        noteLateFrameTelemetry('latePendingFramesBeforeDecode', frame.timestamp);
        continue;
      }

      let bitmap;

      try {
        bitmap = await decodeImageWithTimeout(new Blob([frame.jpeg], { type: 'image/jpeg' }));
      } catch (error) {
        noteClientTelemetry(error.message === 'Image decode timed out.' ? 'imageDecodeTimeouts' : 'imageDecodeFailures');
        continue;
      }

      if (frame.streamGeneration !== state.streamGeneration) {
        noteClientTelemetry('staleGenerationDecodedFrames');
        releaseImage(bitmap);
        continue;
      }

      if (isLateFrame(frame.timestamp)) {
        noteLateFrameTelemetry('latePendingFramesAfterDecode', frame.timestamp);
        releaseImage(bitmap);
        continue;
      }

      state.frames.push({ timestamp: frame.timestamp, bitmap });
      state.frameCount += 1;
      trimFrameQueue();
    }
  } finally {
    state.decodingFrames = false;

    if (state.pendingFrames.length > 0) {
      window.setTimeout(() => {
        void pumpFrameDecodeQueue();
      }, 0);
    }
  }
}

function trimPendingFrameQueue() {
  dropLatePendingFrames();

  const maxQueuedFrames = getFrameQueueLimit(MAX_PENDING_FRAME_QUEUE_SECONDS, MIN_PENDING_FRAME_QUEUE);
  const overflow = state.pendingFrames.length - maxQueuedFrames;

  if (overflow > 0) {
    noteClientTelemetry('pendingQueueOverflowFrames', overflow);
    noteClientTelemetryMax('pendingQueuePeakFrames', state.pendingFrames.length);
    state.pendingFrames.splice(maxQueuedFrames, overflow);
  }
}

function trimFrameQueue() {
  dropLateDecodedFrames();

  const maxQueuedFrames = getFrameQueueLimit(MAX_DECODED_FRAME_QUEUE_SECONDS, MIN_DECODED_FRAME_QUEUE);
  const overflow = state.frames.length - maxQueuedFrames;

  if (overflow <= 0) {
    return;
  }

  const removed = state.frames.splice(maxQueuedFrames, overflow);
  noteClientTelemetry('decodedQueueOverflowFrames', overflow);
  noteClientTelemetryMax('decodedQueuePeakFrames', state.frames.length + overflow);

  for (const frame of removed) {
    releaseImage(frame.bitmap);
  }
}

function dropLatePendingFrames({ keepNewest = false } = {}) {
  let removeCount = 0;
  const removableFrames = keepNewest ? Math.max(0, state.pendingFrames.length - 1) : state.pendingFrames.length;

  while (removeCount < removableFrames && isLateFrame(state.pendingFrames[removeCount].timestamp)) {
    removeCount += 1;
  }

  if (removeCount > 0) {
    noteClientTelemetry('latePendingFrames', removeCount);
    noteFrameLagTelemetry('latePendingFramesMaxLagMs', state.pendingFrames[0]?.timestamp);
    state.pendingFrames.splice(0, removeCount);
  }
}

function dropLateDecodedFrames({ keepNewest = false } = {}) {
  let removeCount = 0;
  const removableFrames = keepNewest ? Math.max(0, state.frames.length - 1) : state.frames.length;

  while (removeCount < removableFrames && isLateFrame(state.frames[removeCount].timestamp)) {
    removeCount += 1;
  }

  if (removeCount <= 0) {
    return;
  }

  const removed = state.frames.splice(0, removeCount);
  noteClientTelemetry('lateDecodedFrames', removeCount);
  noteFrameLagTelemetry('lateDecodedFramesMaxLagMs', removed[0]?.timestamp);

  for (const frame of removed) {
    releaseImage(frame.bitmap);
  }
}

function getFrameQueueLimit(seconds, minimum) {
  const fps = state.session?.options.fps ?? 24;
  return Math.max(minimum, Math.ceil(fps * seconds));
}

function getViewportFrameWidth() {
  const width = Math.ceil(Math.max(
    document.documentElement.clientWidth || 0,
    window.innerWidth || 0,
  ));

  return clampNumber(width, 160, 1920);
}

function isLateFrame(timestamp) {
  if (!state.session || state.isSeeking || elements.audio.paused || elements.audio.readyState === 0) {
    return false;
  }

  const currentTime = Number.isFinite(elements.audio.currentTime) ? elements.audio.currentTime : 0;
  return timestamp < currentTime - FRAME_LATE_GRACE_SECONDS;
}

function noteLateFrameTelemetry(name, timestamp, count = 1) {
  noteClientTelemetry(name, count);
  noteFrameLagTelemetry(`${name}MaxLagMs`, timestamp);
}

function noteFrameLagTelemetry(name, timestamp) {
  if (!Number.isFinite(timestamp) || elements.audio.readyState === 0) {
    return;
  }

  const currentTime = Number.isFinite(elements.audio.currentTime) ? elements.audio.currentTime : 0;
  noteClientTelemetryMax(name, Math.max(0, currentTime - timestamp) * 1000);
}

function createClientTelemetry() {
  return {
    counters: {},
    max: {},
  };
}

function createFavoriteWizardState() {
  return {
    active: false,
    mode: 'add',
    index: -1,
    step: 'title',
    title: '',
    url: '',
  };
}

function noteClientTelemetry(name, count = 1) {
  if (!state.clientTelemetry || !Number.isFinite(count) || count <= 0) {
    return;
  }

  state.clientTelemetry.counters[name] = (state.clientTelemetry.counters[name] ?? 0) + count;
}

function noteClientTelemetryMax(name, value) {
  if (!state.clientTelemetry || !Number.isFinite(value)) {
    return;
  }

  state.clientTelemetry.max[name] = Math.max(state.clientTelemetry.max[name] ?? 0, Math.round(value));
}

function mergeClientTelemetry(target, source) {
  for (const [name, count] of Object.entries(source.counters)) {
    target.counters[name] = (target.counters[name] ?? 0) + count;
  }

  for (const [name, value] of Object.entries(source.max)) {
    target.max[name] = Math.max(target.max[name] ?? 0, value);
  }

  return target;
}

function stopSession({ showEntry: shouldShowEntry = true } = {}) {
  sendClientTelemetry({ force: true, reason: 'stop_session' });
  state.generation += 1;
  state.streamGeneration += 1;
  state.session = null;
  state.frameCount = 0;
  state.playbackOffset = 0;
  state.duration = null;
  state.seekable = false;
  state.isSeeking = false;
  state.seekPointerId = null;
  state.isRestartingPlayback = false;
  state.seekPreviewTime = 0;
  state.lastSeekCommitTime = null;
  state.lastSeekCommitAt = 0;
  state.lastFramePacketAt = 0;
  state.lastFramePaintedAt = 0;
  state.lastFrameClockSentAt = 0;
  state.lastClientTelemetrySentAt = 0;
  state.clientTelemetry = createClientTelemetry();
  clearHideControlsTimer();
  clearFrameWatchdog();

  if (state.websocket) {
    state.websocket.close(1000, 'client stopped');
    state.websocket = null;
  }

  elements.audio.pause();
  elements.audio.removeAttribute('src');
  elements.audio.load();

  if (state.raf) {
    cancelAnimationFrame(state.raf);
    state.raf = 0;
  }

  clearFrameQueue();
  context.clearRect(0, 0, elements.canvas.width, elements.canvas.height);
  elements.loader.hidden = true;
  clearPlayerMessage();
  setControlsVisible(true);
  syncControlLabels();
  syncPlayhead();

  if (shouldShowEntry) {
    showEntry();
  }
}

function clearFrameQueue({ keepCurrent = false } = {}) {
  state.pendingFrames = [];

  for (const frame of state.frames) {
    releaseImage(frame.bitmap);
  }

  state.frames = [];

  if (!keepCurrent && state.currentBitmap) {
    releaseImage(state.currentBitmap);
    state.currentBitmap = null;
  }
}

async function decodeImageWithTimeout(blob) {
  let timedOut = false;
  let timeoutId = 0;

  const decodePromise = decodeImage(blob).then(
    (image) => {
      if (timedOut) {
        releaseImage(image);
        return null;
      }

      return image;
    },
    () => null,
  );

  const timeoutPromise = new Promise((resolve) => {
    timeoutId = window.setTimeout(() => {
      timedOut = true;
      resolve(null);
    }, IMAGE_DECODE_TIMEOUT_MS);
  });

  const image = await Promise.race([decodePromise, timeoutPromise]);
  window.clearTimeout(timeoutId);

  if (!image) {
    throw new Error(timedOut ? 'Image decode timed out.' : 'Image decode failed.');
  }

  return image;
}

async function decodeImage(blob) {
  if ('createImageBitmap' in window) {
    return createImageBitmap(blob);
  }

  const url = URL.createObjectURL(blob);

  try {
    const image = new Image();
    image.decoding = 'async';
    image.src = url;
    await image.decode();
    return image;
  } finally {
    URL.revokeObjectURL(url);
  }
}

function releaseImage(image) {
  if (typeof image?.close === 'function') {
    image.close();
  }
}

function logRenderError(error) {
  const now = Date.now();

  if (now - state.lastRenderErrorAt < 5000) {
    return;
  }

  state.lastRenderErrorAt = now;
  console.warn('Frame render loop error', error);
}

async function seekTo(value) {
  if (!state.session || !state.seekable) {
    state.isSeeking = false;
    state.seekPointerId = null;
    elements.playhead.classList.remove('scrubbing');
    syncPlayhead();
    return;
  }

  const duration = state.duration;

  if (!Number.isFinite(duration) || duration <= 0) {
    state.isSeeking = false;
    state.seekPointerId = null;
    elements.playhead.classList.remove('scrubbing');
    syncPlayhead();
    return;
  }

  const generation = state.generation + 1;
  const targetTime = clampNumber(value, 0, duration);
  const sessionId = state.session.id;

  state.generation = generation;
  state.streamGeneration += 1;
  state.playbackOffset = targetTime;
  state.seekPreviewTime = targetTime;
  state.isSeeking = false;
  state.seekPointerId = null;
  state.frameCount = 0;
  state.lastFramePacketAt = 0;
  state.lastFramePaintedAt = 0;
  elements.playhead.classList.remove('scrubbing');
  elements.loader.hidden = false;
  clearPlayerMessage();
  clearFrameQueue();
  context.clearRect(0, 0, elements.canvas.width, elements.canvas.height);
  syncPlayhead();

  if (state.websocket) {
    state.websocket.close(1000, 'client seeking');
    state.websocket = null;
  }

  elements.audio.pause();
  elements.audio.removeAttribute('src');
  elements.audio.load();

  try {
    const response = await fetch(`/api/session/${encodeURIComponent(sessionId)}/seek`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ time: targetTime }),
    });
    const payload = await response.json();

    if (!response.ok) {
      throw new Error(payload.error ?? 'Seek failed.');
    }

    if (generation !== state.generation || state.session?.id !== sessionId) {
      return;
    }

    state.session = payload;
    updateSessionMetadata(payload);
    connectPlaybackStreams();
  } catch (error) {
    if (generation !== state.generation || state.session?.id !== sessionId) {
      return;
    }

    showPlayerMessage(error.message);
    setControlsVisible(true);
    syncPlayhead();
  }
}

async function refreshSessionMetadata(sessionId) {
  const generation = state.generation;

  for (let attempt = 0; attempt < METADATA_REFRESH_ATTEMPTS; attempt += 1) {
    if (generation !== state.generation || state.session?.id !== sessionId) {
      return;
    }

    try {
      const response = await fetch(`/api/session/${encodeURIComponent(sessionId)}`, { cache: 'no-store' });

      if (!response.ok) {
        return;
      }

      const payload = await response.json();

      if (generation !== state.generation || state.session?.id !== sessionId) {
        return;
      }

      state.session = { ...state.session, ...payload };
      updateSessionMetadata(payload);

      if (payload.metadataStatus !== 'pending') {
        return;
      }
    } catch {
      return;
    }

    await delay(METADATA_REFRESH_INTERVAL_MS);
  }
}

function updateSessionMetadata(payload) {
  if ('duration' in payload) {
    state.duration = normalizeDuration(payload.duration);
  }

  if ('seekable' in payload) {
    state.seekable = Boolean(payload.seekable);
  }

  if (Number.isFinite(payload.seekSeconds)) {
    state.playbackOffset = payload.seekSeconds;
  }

  syncPlayhead();
}

function syncPlayhead() {
  const currentTime = getVisiblePlaybackTime();
  const duration = state.duration;
  const hasDuration = Number.isFinite(duration) && duration > 0;
  const canScrub = state.seekable && hasDuration;
  const max = hasDuration ? duration : 1;
  const value = hasDuration ? clampNumber(currentTime, 0, max) : 0;
  const progress = hasDuration && max > 0 ? (value / max) * 100 : 0;

  elements.playhead.hidden = !canScrub;
  elements.playhead.setAttribute('aria-hidden', String(!canScrub));
  elements.currentTime.textContent = formatTime(currentTime);
  elements.totalTime.textContent = formatTime(duration);
  elements.seek.max = String(max);
  elements.seek.value = String(value);
  elements.seek.disabled = !canScrub;
  elements.seek.setAttribute('aria-valuemin', '0');
  elements.seek.setAttribute('aria-valuemax', String(Math.round(max)));
  elements.seek.setAttribute('aria-valuenow', String(Math.round(value)));
  elements.seek.setAttribute('aria-valuetext', `${formatTime(value)} of ${formatTime(duration)}`);
  elements.seek.style.setProperty('--progress', `${progress}%`);
}

function beginSeekScrub(event) {
  if (!canSeekScrub()) {
    return;
  }

  event?.preventDefault();
  state.isSeeking = true;
  state.seekPointerId = event?.pointerId ?? null;
  state.seekPreviewTime = getSeekTimeFromPointer(event) ?? getSeekSliderValue();
  elements.playhead.classList.add('scrubbing');
  setControlsVisible(true);
  clearHideControlsTimer();

  if (event?.pointerId !== undefined && typeof elements.seek.setPointerCapture === 'function') {
    try {
      elements.seek.setPointerCapture(event.pointerId);
    } catch {
      state.seekPointerId = null;
    }
  }

  syncPlayhead();
}

function updateSeekScrubPreview(event) {
  if (!canSeekScrub()) {
    return;
  }

  event?.preventDefault?.();
  state.isSeeking = true;
  state.seekPreviewTime = getSeekTimeFromPointer(event) ?? getSeekSliderValue();
  elements.playhead.classList.add('scrubbing');
  syncPlayhead();
}

function commitSeekScrub(event) {
  const force = event?.force === true;

  if (state.seekPointerId !== null && event?.pointerId !== undefined && state.seekPointerId !== event.pointerId) {
    return;
  }

  if (!canSeekScrub()) {
    cancelSeekScrub();
    return;
  }

  if (!force && !state.isSeeking) {
    return;
  }

  const targetTime = getSeekSliderValue();
  const now = Date.now();

  if (
    Number.isFinite(state.lastSeekCommitTime) &&
    Math.abs(targetTime - state.lastSeekCommitTime) < 0.05 &&
    now - state.lastSeekCommitAt < 1000
  ) {
    state.isSeeking = false;
    state.seekPointerId = null;
    elements.playhead.classList.remove('scrubbing');
    syncPlayhead();
    return;
  }

  state.lastSeekCommitTime = targetTime;
  state.lastSeekCommitAt = now;
  void seekTo(targetTime);
}

function cancelSeekScrub() {
  state.isSeeking = false;
  state.seekPointerId = null;
  elements.playhead.classList.remove('scrubbing');
  syncPlayhead();
}

function canSeekScrub() {
  return Boolean(state.session && state.seekable && Number.isFinite(state.duration) && state.duration > 0);
}

function getSeekSliderValue() {
  const duration = state.duration;
  const value = Number(elements.seek.value);

  if (!Number.isFinite(duration) || duration <= 0) {
    return 0;
  }

  if (state.isSeeking && Number.isFinite(state.seekPreviewTime)) {
    return clampNumber(state.seekPreviewTime, 0, duration);
  }

  return clampNumber(Number.isFinite(value) ? value : 0, 0, duration);
}

function getSeekTimeFromPointer(event) {
  const duration = state.duration;

  if (!event || !Number.isFinite(event.clientX) || !Number.isFinite(duration) || duration <= 0) {
    return null;
  }

  const rect = elements.seek.getBoundingClientRect();

  if (rect.width <= 0) {
    return null;
  }

  return clampNumber(((event.clientX - rect.left) / rect.width) * duration, 0, duration);
}

function getVisiblePlaybackTime() {
  if (state.isSeeking) {
    return Number.isFinite(state.seekPreviewTime) ? state.seekPreviewTime : 0;
  }

  const currentTime = state.playbackOffset + (Number.isFinite(elements.audio.currentTime) ? elements.audio.currentTime : 0);

  if (Number.isFinite(state.duration)) {
    return clampNumber(currentTime, 0, state.duration);
  }

  return Math.max(0, currentTime);
}

function normalizeDuration(value) {
  const duration = Number(value);
  return Number.isFinite(duration) && duration > 0 ? duration : null;
}

function formatTime(value) {
  if (!Number.isFinite(value)) {
    return '--:--';
  }

  const totalSeconds = Math.max(0, Math.floor(value));
  const hours = Math.floor(totalSeconds / 3600);
  const minutes = Math.floor((totalSeconds % 3600) / 60);
  const seconds = totalSeconds % 60;

  if (hours > 0) {
    return `${hours}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
  }

  return `${minutes}:${String(seconds).padStart(2, '0')}`;
}

function clampNumber(value, min, max) {
  return Math.min(max, Math.max(min, value));
}

function delay(ms) {
  return new Promise((resolve) => {
    window.setTimeout(resolve, ms);
  });
}

function setControlsVisible(visible) {
  state.controlsVisible = visible;
  elements.stage.classList.toggle('controls-hidden', !visible);
  elements.controls.setAttribute('aria-hidden', String(!visible));

  if (visible && !elements.audio.paused) {
    scheduleControlsHide();
  } else {
    clearHideControlsTimer();
  }
}

function scheduleControlsHide() {
  clearHideControlsTimer();
  state.hideControlsTimer = window.setTimeout(() => {
    if (state.session && !elements.audio.paused && !state.isSeeking) {
      setControlsVisible(false);
    }
  }, 2400);
}

function clearHideControlsTimer() {
  if (state.hideControlsTimer) {
    window.clearTimeout(state.hideControlsTimer);
    state.hideControlsTimer = 0;
  }
}

function syncControlLabels() {
  elements.playPause.textContent = elements.audio.paused ? 'Play' : 'Pause';
  elements.mute.textContent = elements.audio.muted ? 'Unmute' : 'Mute';
}

function showEntry() {
  elements.playerScreen.hidden = true;
  elements.entryScreen.hidden = false;
  void loadEntryLists();
  elements.url.focus();
}

function showPlayer() {
  elements.entryScreen.hidden = true;
  elements.playerScreen.hidden = false;
}

function showPlayerMessage(message) {
  elements.playerMessage.textContent = message;
}

function clearPlayerMessage() {
  elements.playerMessage.textContent = '';
}

function setEntryMessage(message) {
  elements.entryMessage.textContent = message;
}

function setFormBusy(isBusy) {
  elements.url.disabled = isBusy;
  elements.play.disabled = isBusy;
  elements.queue.disabled = isBusy;

  for (const button of elements.libraryPanel.querySelectorAll('button')) {
    button.disabled = isBusy;
  }
}

async function loadEntryLists() {
  await Promise.all([
    loadRecentUrls(),
    loadFavorites(),
  ]);
}

async function loadRecentUrls() {
  try {
    const response = await fetch('/api/recent-urls', { cache: 'no-store' });

    if (!response.ok) {
      throw new Error('Failed to load recent URLs.');
    }

    const payload = await response.json();
    state.recentUrls = Array.isArray(payload.urls) ? payload.urls : [];
    renderRecentUrls();
  } catch {
    state.recentUrls = [];
    renderRecentUrls();
  }
}

function renderRecentUrls() {
  elements.recentList.replaceChildren(
    ...state.recentUrls.map((item, index) => {
      const button = document.createElement('button');
      button.type = 'button';
      button.className = 'url-item';
      button.dataset.recentIndex = String(index);
      button.textContent = item.displayUrl || item.url;
      return button;
    }),
  );

  if (state.recentUrls.length === 0) {
    elements.recentList.replaceChildren(createEmptyListMessage('No recents'));
  }
}

async function loadFavorites() {
  try {
    const response = await fetch('/api/favorites', { cache: 'no-store' });

    if (!response.ok) {
      throw new Error('Failed to load favorites.');
    }

    const payload = await response.json();
    state.favorites = Array.isArray(payload.favorites) ? payload.favorites : [];
    renderFavorites();
  } catch {
    state.favorites = [];
    renderFavorites();
  }
}

function renderFavorites() {
  elements.favoritesList.replaceChildren(
    ...state.favorites.map((item, index) => {
      const button = document.createElement('button');
      button.type = 'button';
      button.className = 'url-item';
      button.dataset.favoriteIndex = String(index);
      button.textContent = item.title;
      return button;
    }),
  );

  if (state.favorites.length === 0) {
    elements.favoritesList.replaceChildren(createEmptyListMessage('No favorites'));
  }
}

function createEmptyListMessage(text) {
  const message = document.createElement('p');
  message.className = 'empty-list';
  message.textContent = text;
  return message;
}

function openFavoritesModal() {
  state.favoriteModalTrigger = document.activeElement instanceof HTMLElement ? document.activeElement : null;
  elements.favoritesMessage.textContent = '';
  showFavoritesManager();
  elements.favoritesModal.hidden = false;
  elements.favoritesModal.classList.add('is-open');
  elements.addFavorite.focus();
}

function closeFavoritesModal() {
  elements.favoritesModal.hidden = true;
  elements.favoritesModal.classList.remove('is-open');
  elements.favoritesMessage.textContent = '';
  state.favoriteWizard = createFavoriteWizardState();
  state.favoriteModalTrigger?.focus();
  state.favoriteModalTrigger = null;
}

function showFavoritesManager() {
  state.favoriteWizard = createFavoriteWizardState();
  elements.favoritesMessage.textContent = '';
  elements.favoritesManager.hidden = false;
  elements.favoriteWizard.hidden = true;
  elements.favoriteWizardBack.hidden = true;
  elements.saveFavorites.hidden = true;
  elements.cancelFavorites.textContent = 'Done';
  renderFavoriteManager();
}

function renderFavoriteManager() {
  elements.favoritesEditorList.replaceChildren(
    ...state.favorites.map((item, index) => createFavoriteManagerRow(item, index)),
  );

  if (state.favorites.length === 0) {
    elements.favoritesEditorList.replaceChildren(createEmptyListMessage('No favorites'));
  }
}

function createFavoriteManagerRow(item, index) {
  const row = document.createElement('div');
  row.className = 'favorite-manager-row';

  const summary = document.createElement('div');
  summary.className = 'favorite-summary';

  const title = document.createElement('div');
  title.className = 'favorite-title';
  title.textContent = item.title;

  const url = document.createElement('div');
  url.className = 'favorite-url';
  url.textContent = item.url;

  const edit = document.createElement('button');
  edit.type = 'button';
  edit.className = 'secondary-button favorite-action';
  edit.dataset.editFavorite = String(index);
  edit.setAttribute('aria-label', `Edit ${item.title}`);
  edit.title = 'Edit';
  edit.append(createFavoriteActionIcon('edit'));

  const remove = document.createElement('button');
  remove.type = 'button';
  remove.className = 'remove-favorite favorite-action';
  remove.dataset.removeFavorite = String(index);
  remove.setAttribute('aria-label', `Remove ${item.title}`);
  remove.title = 'Remove';
  remove.append(createFavoriteActionIcon('remove'));

  const actions = document.createElement('div');
  actions.className = 'favorite-actions';
  actions.append(edit, remove);

  summary.append(title, url);
  row.append(summary, actions);
  return row;
}

function createFavoriteActionIcon(kind) {
  const namespace = 'http://www.w3.org/2000/svg';
  const svg = document.createElementNS(namespace, 'svg');
  const paths = kind === 'edit'
    ? ['M12 20h9', 'M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z']
    : ['M3 6h18', 'M8 6V4h8v2', 'M6 6l1 15h10l1-15', 'M10 11v6', 'M14 11v6'];

  svg.setAttribute('viewBox', '0 0 24 24');
  svg.setAttribute('aria-hidden', 'true');
  svg.setAttribute('focusable', 'false');

  for (const pathData of paths) {
    const path = document.createElementNS(namespace, 'path');
    path.setAttribute('d', pathData);
    svg.append(path);
  }

  return svg;
}

function startFavoriteWizard(mode, index = -1) {
  const item = mode === 'edit' ? state.favorites[index] : null;

  if (mode === 'edit' && !item) {
    return;
  }

  state.favoriteWizard = {
    active: true,
    mode,
    index,
    step: 'title',
    title: item?.title ?? '',
    url: item?.url ?? elements.url.value.trim(),
  };

  elements.favoritesMessage.textContent = '';
  elements.favoritesManager.hidden = true;
  elements.favoriteWizard.hidden = false;
  elements.favoriteWizardBack.hidden = false;
  elements.saveFavorites.hidden = false;
  elements.cancelFavorites.textContent = 'Cancel';
  syncFavoriteWizard();
}

function syncFavoriteWizard() {
  const wizard = state.favoriteWizard;
  const isUrlStep = wizard.step === 'url';

  elements.favoriteWizardStep.textContent = isUrlStep ? 'URL' : 'Title';
  elements.favoriteTitleField.hidden = isUrlStep;
  elements.favoriteUrlField.hidden = !isUrlStep;
  elements.favoriteTitle.value = wizard.title;
  elements.favoriteUrl.value = wizard.url;
  elements.saveFavorites.textContent = isUrlStep ? 'Save' : 'Next';

  window.setTimeout(() => {
    if (isUrlStep) {
      elements.favoriteUrl.focus();
      return;
    }

    elements.favoriteTitle.focus();
  }, 0);
}

async function advanceFavoriteWizard() {
  if (!state.favoriteWizard.active) {
    return;
  }

  elements.favoritesMessage.textContent = '';
  const wizard = state.favoriteWizard;

  if (wizard.step === 'title') {
    const title = elements.favoriteTitle.value.trim();

    if (!title) {
      elements.favoritesMessage.textContent = 'Favorite needs a title.';
      elements.favoriteTitle.focus();
      return;
    }

    wizard.title = title;
    wizard.step = 'url';
    syncFavoriteWizard();
    return;
  }

  const url = elements.favoriteUrl.value.trim();

  if (!url) {
    elements.favoritesMessage.textContent = 'Favorite needs a URL.';
    elements.favoriteUrl.focus();
    return;
  }

  wizard.url = url;

  const nextFavorites = wizard.mode === 'edit'
    ? state.favorites.map((item, index) => (index === wizard.index ? { title: wizard.title, url: wizard.url } : item))
    : [...state.favorites, { title: wizard.title, url: wizard.url }];

  await saveFavoritesList(nextFavorites, {
    onSuccess: () => {
      showFavoritesManager();
      elements.addFavorite.focus();
    },
  });
}

async function removeFavorite(index) {
  if (!Number.isInteger(index) || index < 0 || index >= state.favorites.length) {
    return;
  }

  const nextFavorites = state.favorites.filter((_item, itemIndex) => itemIndex !== index);
  await saveFavoritesList(nextFavorites);
}

async function saveFavoritesList(favorites, { onSuccess = () => {} } = {}) {
  setFavoritesModalBusy(true);

  try {
    const response = await fetch('/api/favorites', {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ favorites }),
    });
    const payload = await response.json();

    if (!response.ok) {
      throw new Error(payload.error ?? 'Failed to save favorites.');
    }

    state.favorites = Array.isArray(payload.favorites) ? payload.favorites : [];
    renderFavorites();
    renderFavoriteManager();
    onSuccess();
  } catch (error) {
    elements.favoritesMessage.textContent = error.message;
  } finally {
    setFavoritesModalBusy(false);
  }
}

function setFavoritesModalBusy(isBusy) {
  for (const field of elements.favoritesForm.querySelectorAll('input, button')) {
    field.disabled = isBusy;
  }
}