content.js

(function () {
  const { isHostnameAllowed, isYouTubeHostname } = globalThis.VideoControllerDomains;
  const I18n = globalThis.VideoControllerI18n;

  chrome.storage.local.get(['allowedDomains', 'locale'], (res) => {
    const allowed = res.allowedDomains || [];

    if (!isHostnameAllowed(window.location.hostname, allowed)) {
      return;
    }

    let t = I18n.createTranslator(I18n.resolveLocale(res.locale || 'auto'));

    let currentSpeed = 1.0;
    let autoApplySpeed = true;
    let videoObserver = null;
    let speedSyncInterval = null;

    // SponsorBlock state
    let sbEnabled = false;
    let sbCategories = ['sponsor'];
    let sbSegments = [];
    let sbCurrentVideoId = null;
    let sbSegmentsVideoId = null;
    let sbFetching = false;
    let sbRetryAfter = 0;
    let sbSkipListener = null;
    let sbBoundVideo = null;
    let sbNavigationListener = null;
    let sbVideoCheckInterval = null;
    let sbLastSkipFrom = null;
    let sbLastSkipSegment = null;
    let sbSkippedSegmentIds = new Set();
    // Breathing room before retrying a failed segments request.
    const SB_RETRY_COOLDOWN = 10000;

    // YouTube speed panel state
    // How often the widgets verify they are still in the live actions row.
    const WIDGET_SELF_CHECK_INTERVAL = 3000;
    let ytSpeedPanelEnabled = false;
    let ytSummaryBtnEnabled = false;

    const DEFAULT_HOTKEYS = {
      decrease: { alt: true, key: 'ArrowLeft' },
      increase: { alt: true, key: 'ArrowRight' },
      reset: { alt: true, key: 'r' }
    };
    let currentHotkeys = { ...DEFAULT_HOTKEYS };

    function loadHotkeys() {
      chrome.storage.local.get(['hotkeys'], (result) => {
        currentHotkeys = { ...(result.hotkeys || DEFAULT_HOTKEYS) };
      });
    }

    function notifyState(patch) {
      chrome.runtime.sendMessage({ type: 'UPDATE_TAB_STATE', ...patch }, () => {
        if (chrome.runtime.lastError) {
          // The background worker may be temporarily unavailable.
        }
      });
    }

    function applyRateToVideos(rate) {
      const videos = document.querySelectorAll('video');
      videos.forEach((video) => {
        if (!(video instanceof HTMLVideoElement) || !('playbackRate' in video)) {
          return;
        }

        try {
          if (Math.abs(video.playbackRate - rate) > 0.01) {
            video.playbackRate = rate;
          }
        } catch (error) {
          console.warn('Failed to set playbackRate:', error);
        }
      });
    }

    function setSpeed(rate, options = {}) {
      const bounded = Math.max(0.0, Math.min(4.0, Math.round(Number(rate) * 10) / 10));
      currentSpeed = Number.isNaN(bounded) ? 1.0 : bounded;
      applyRateToVideos(currentSpeed);
      updateSpeedPanel();

      if (options.notifyBackground !== false) {
        notifyState({ speed: currentSpeed });
      }
    }

    function setSpeedForAllVideos(rate) {
      applyRateToVideos(rate);
    }

    function observeNewVideos() {
      if (videoObserver) {
        videoObserver.disconnect();
      }

      videoObserver = new MutationObserver((mutations) => {
        const speedToApply = autoApplySpeed ? currentSpeed : 1.0;

        mutations.forEach((mutation) => {
          mutation.addedNodes.forEach((node) => {
            if (node.nodeType !== Node.ELEMENT_NODE) {
              return;
            }

            const videos = node.tagName === 'VIDEO' ? [node] : node.querySelectorAll?.('video') || [];
            videos.forEach((video) => {
              if (!(video instanceof HTMLVideoElement) || !('playbackRate' in video)) {
                return;
              }

              try {
                if (Math.abs(video.playbackRate - speedToApply) > 0.01) {
                  video.playbackRate = speedToApply;
                }
              } catch (error) {
                console.warn('Failed to set playbackRate for a new video:', error);
              }

              if (sbEnabled && sbSegments.length > 0 && video !== sbBoundVideo) {
                attachSkipListener(video);
              }
            });
          });
        });
      });

      if (document.body) {
        videoObserver.observe(document.body, { childList: true, subtree: true });
      }
    }

    function startSpeedSync() {
      if (speedSyncInterval) {
        clearInterval(speedSyncInterval);
      }

      speedSyncInterval = setInterval(() => {
        applyRateToVideos(currentSpeed);
      }, 2000);
    }

    // Reused across repeats so holding an arrow updates one notification instead
    // of tearing it down and fading a new one in every step.
    let speedNotificationTimers = [];

    function scheduleNotificationHide(notification) {
      speedNotificationTimers.push(setTimeout(() => {
        notification.style.opacity = '0';
        speedNotificationTimers.push(setTimeout(() => notification.remove(), 200));
      }, 1000));
    }

    function showSpeedNotification(rate) {
      speedNotificationTimers.forEach(clearTimeout);
      speedNotificationTimers = [];

      const existing = document.getElementById('video-speed-notification');
      if (existing) {
        existing.textContent = `${rate.toFixed(1)}×`;
        existing.style.opacity = '1';
        scheduleNotificationHide(existing);
        return;
      }

      const player = getPlayerContainer();
      const container = player || document.body;

      if (player) {
        const pos = getComputedStyle(player).position;
        if (pos === 'static') player.style.position = 'relative';
      }

      const positionStyles = player
        ? 'position: absolute; top: 16px; right: 16px'
        : 'position: fixed; top: 20px; right: 20px';

      const notification = document.createElement('div');
      notification.id = 'video-speed-notification';
      notification.style.cssText = [
        positionStyles,
        'padding: 8px 16px',
        'background: rgba(0, 0, 0, 0.8)',
        'color: #fff',
        "font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
        'font-size: 14px',
        'font-weight: 600',
        'border-radius: 8px',
        'z-index: 999999',
        'pointer-events: none',
        'opacity: 0',
        'transition: opacity 0.2s ease'
      ].join(';');
      notification.textContent = `${rate.toFixed(1)}×`;

      container.appendChild(notification);
      speedNotificationTimers.push(setTimeout(() => {
        notification.style.opacity = '1';
      }, 10));
      scheduleNotificationHide(notification);
    }

    function changeSpeed(delta) {
      const newSpeed = Math.max(0.0, Math.min(4.0, Math.round((currentSpeed + delta) * 10) / 10));
      setSpeed(newSpeed);
      showSpeedNotification(newSpeed);
    }

    function setAutoApply(value, syncBackground = true) {
      autoApplySpeed = Boolean(value);
      if (autoApplySpeed) {
        setSpeed(currentSpeed);
      } else {
        setSpeedForAllVideos(1.0);
      }

      if (syncBackground) {
        notifyState({ autoApply: autoApplySpeed });
      }
    }

    // --- SponsorBlock ---

    function isYouTube() {
      return isYouTubeHostname(window.location.hostname);
    }

    function isYouTubeWatchPage() {
      return isYouTube() && window.location.pathname === '/watch';
    }

    function getYouTubeVideoId() {
      try {
        const url = new URL(window.location.href);
        return url.searchParams.get('v') || null;
      } catch (e) {
        return null;
      }
    }

    // Reports whether the answer can be trusted: the API replies 404 when a video
    // genuinely has no segments, while a network error or 5xx means "ask again".
    // Without that split a single failed request looked like an empty video and
    // was never retried.
    async function fetchSponsorSegments(videoId, categories) {
      const params = new URLSearchParams();
      params.set('videoID', videoId);
      categories.forEach((cat) => params.append('category', cat));

      try {
        const response = await fetch(`https://sponsor.ajay.app/api/skipSegments?${params}`);
        if (response.status === 404) return { ok: true, segments: [] };
        if (!response.ok) return { ok: false, segments: [] };
        return { ok: true, segments: await response.json() };
      } catch (e) {
        return { ok: false, segments: [] };
      }
    }

    function segmentId(seg) {
      return seg.segment.join(',');
    }

    function getPlayerContainer() {
      return document.querySelector('#movie_player')
        || document.querySelector('.html5-video-player');
    }

    function createUnskipButton(skipFromTime, notificationEl) {
      const HOVER_BG = 'rgba(74, 176, 255, 0.3)';
      const DEFAULT_BG = 'rgba(74, 176, 255, 0.15)';

      const btn = document.createElement('button');
      btn.textContent = t('sbUndo');
      btn.style.cssText = [
        'border: 1px solid rgba(74, 176, 255, 0.5)',
        `background: ${DEFAULT_BG}`,
        'color: #4ab0ff',
        'font-size: 12px',
        'font-weight: 700',
        'padding: 3px 10px',
        'border-radius: 5px',
        'cursor: pointer',
        'transition: background 0.15s ease',
        'white-space: nowrap'
      ].join(';');

      btn.addEventListener('mouseenter', () => { btn.style.background = HOVER_BG; });
      btn.addEventListener('mouseleave', () => { btn.style.background = DEFAULT_BG; });
      btn.addEventListener('click', (e) => {
        e.stopPropagation();
        if (sbBoundVideo && sbLastSkipSegment) {
          sbSkippedSegmentIds.add(segmentId(sbLastSkipSegment));
          sbBoundVideo.currentTime = skipFromTime;
        }
        notificationEl.style.opacity = '0';
        setTimeout(() => notificationEl.remove(), 300);
      });

      return btn;
    }

    function dismissNotification(el) {
      if (!el.parentNode) return;
      el.style.opacity = '0';
      setTimeout(() => el.remove(), 300);
    }

    function categoryLabel(category) {
      const key = `cat${category.charAt(0).toUpperCase()}${category.slice(1)}Lower`;
      const label = t(key);
      return label === key ? category : label;
    }

    function showSkipNotification(category, skipFromTime) {
      const existing = document.getElementById('sb-skip-notification');
      if (existing) existing.remove();

      const player = getPlayerContainer();
      const container = player || document.body;

      if (player) {
        const pos = getComputedStyle(player).position;
        if (pos === 'static') player.style.position = 'relative';
      }

      const el = document.createElement('div');
      el.id = 'sb-skip-notification';

      const positionStyles = player
        ? 'position: absolute; top: 16px; left: 50%; transform: translateX(-50%)'
        : 'position: fixed; top: 60px; left: 50%; transform: translateX(-50%)';

      el.style.cssText = [
        positionStyles,
        'display: flex',
        'align-items: center',
        'gap: 10px',
        'padding: 8px 14px',
        'background: rgba(0, 0, 0, 0.85)',
        'color: #4ab0ff',
        "font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
        'font-size: 13px',
        'font-weight: 600',
        'border-radius: 8px',
        'z-index: 999999',
        'opacity: 0',
        'transition: opacity 0.25s ease'
      ].join(';');

      const textSpan = document.createElement('span');
      textSpan.textContent = t('sbSkipped', { category: categoryLabel(category) });
      el.appendChild(textSpan);

      if (typeof skipFromTime === 'number' && sbBoundVideo) {
        el.appendChild(createUnskipButton(skipFromTime, el));
      }

      container.appendChild(el);
      requestAnimationFrame(() => { el.style.opacity = '1'; });
      setTimeout(() => dismissNotification(el), 4000);
    }

    function sbDetachListener() {
      if (sbSkipListener && sbBoundVideo) {
        sbBoundVideo.removeEventListener('timeupdate', sbSkipListener);
      }
      sbSkipListener = null;
      sbBoundVideo = null;
    }

    function attachSkipListener(video) {
      if (sbBoundVideo === video && sbSkipListener) return;
      sbDetachListener();

      sbBoundVideo = video;
      sbSkipListener = () => {
        if (!sbEnabled || sbSegments.length === 0) return;

        const t = video.currentTime;
        for (const seg of sbSegments) {
          const [start, end] = seg.segment;
          if (sbSkippedSegmentIds.has(segmentId(seg))) continue;
          if (t >= start && t < end - 0.5) {
            sbLastSkipFrom = t;
            sbLastSkipSegment = seg;
            video.currentTime = end;
            showSkipNotification(seg.category, t);
            const savedSeconds = end - t;
            chrome.storage.local.get(['sbTotalSkipped', 'sbTotalTimeSaved'], (data) => {
              chrome.storage.local.set({
                sbTotalSkipped: (data.sbTotalSkipped || 0) + 1,
                sbTotalTimeSaved: (data.sbTotalTimeSaved || 0) + savedSeconds
              });
            });
            break;
          }
        }
      };

      video.addEventListener('timeupdate', sbSkipListener);
    }

    function sbTryAttachToVideo() {
      if (!sbEnabled || sbSegments.length === 0) return;

      const video = document.querySelector('video');
      if (video && video !== sbBoundVideo) {
        attachSkipListener(video);
      }
    }

    function sbResetState() {
      sbDetachListener();
      removeSegmentMarkers();
      sbSkippedSegmentIds.clear();
      // Segments belong to the video we are leaving; keeping them would skip the
      // next video at the previous one's timestamps.
      sbSegments = [];
      sbSegmentsVideoId = null;
      sbRetryAfter = 0;
      sbLastSkipFrom = null;
      sbLastSkipSegment = null;
    }

    async function sbCheckVideo() {
      if (!isYouTubeWatchPage() || !sbEnabled) return;

      const videoId = getYouTubeVideoId();
      if (!videoId) return;

      // The cooldown only holds back retries for the same video; a new one is
      // never made to wait out the previous video's failure.
      const isSameVideo = videoId === sbCurrentVideoId;
      const needsSegments = videoId !== sbSegmentsVideoId
        && !sbFetching
        && (!isSameVideo || Date.now() >= sbRetryAfter);

      if (needsSegments) {
        if (!isSameVideo) {
          sbResetState();
          sbCurrentVideoId = videoId;
        }

        sbFetching = true;
        const result = await fetchSponsorSegments(videoId, sbCategories);
        sbFetching = false;

        // A navigation during the request makes this answer worthless.
        if (getYouTubeVideoId() !== videoId) return;

        sbSegments = result.segments;
        // Only a trusted answer marks the video as done; after a failure the id
        // stays unset so the periodic check retries after a short cooldown.
        sbSegmentsVideoId = result.ok ? videoId : null;
        sbRetryAfter = result.ok ? 0 : Date.now() + SB_RETRY_COOLDOWN;
      }

      sbTryAttachToVideo();
      renderSegmentMarkers();
    }

    function sbStartVideoCheck() {
      if (sbVideoCheckInterval) clearInterval(sbVideoCheckInterval);

      sbVideoCheckInterval = setInterval(() => {
        if (!sbEnabled || !isYouTubeWatchPage()) return;

        // Also covers a video whose fetch failed: its id is still unconfirmed.
        const videoId = getYouTubeVideoId();
        if (videoId && videoId !== sbSegmentsVideoId) {
          sbCheckVideo();
          return;
        }

        sbTryAttachToVideo();
      }, 1500);
    }

    function sbSetupNavigationListener() {
      if (sbNavigationListener) return;

      sbNavigationListener = () => {
        sbCurrentVideoId = null;
        sbResetState();
        sbCheckVideo();
      };

      document.addEventListener('yt-navigate-finish', sbNavigationListener);
      window.addEventListener('popstate', sbNavigationListener);
    }

    function sbLoadSettings(callback) {
      chrome.storage.local.get(['sbEnabled', 'sbCategories'], (res) => {
        sbEnabled = res.sbEnabled === true;
        sbCategories = res.sbCategories || ['sponsor'];
        if (callback) callback();
      });
    }

    function sbInit() {
      if (!isYouTube()) return;

      sbLoadSettings(() => {
        sbCheckVideo();
        sbSetupNavigationListener();
        sbStartVideoCheck();
      });
    }

    function removeSegmentMarkers() {
      const container = document.getElementById('sb-segment-markers');
      if (container) container.remove();
    }

    function createMarkerElement(start, end, duration) {
      const leftPct = (start / duration) * 100;
      const rightPct = 100 - (end / duration) * 100;

      const bar = document.createElement('li');
      bar.style.cssText = [
        'position: absolute',
        'height: 100%',
        `left: ${leftPct}%`,
        `right: ${rightPct}%`,
        'background: #00d400',
        'opacity: 0.7',
        'pointer-events: none'
      ].join(';');
      bar.innerHTML = '&nbsp;';
      return bar;
    }

    function renderSegmentMarkers() {
      removeSegmentMarkers();

      if (!sbEnabled || sbSegments.length === 0 || !sbBoundVideo) return;

      const duration = sbBoundVideo.duration;
      if (!duration || !isFinite(duration)) {
        sbBoundVideo.addEventListener('loadedmetadata', () => renderSegmentMarkers(), { once: true });
        return;
      }

      const progressBar = document.querySelector('.ytp-progress-bar-container');
      if (!progressBar) return;

      const container = document.createElement('ul');
      container.id = 'sb-segment-markers';
      container.style.cssText = [
        'position: absolute',
        'top: 0',
        'left: 0',
        'width: 100%',
        'height: 100%',
        'margin: 0',
        'padding: 0',
        'list-style: none',
        'pointer-events: none',
        'z-index: 41'
      ].join(';');

      for (const seg of sbSegments) {
        const [start, end] = seg.segment;
        container.appendChild(createMarkerElement(start, end, duration));
      }

      progressBar.prepend(container);
    }

    // --- End SponsorBlock ---

    // --- YouTube Speed Panel ---

    // The chips used to copy their colours off a neighbouring button on every
    // observer tick. Every click spawns the speed notification, which is itself
    // a mutation, so the sampling re-ran constantly and any odd neighbour — an
    // icon button with a transparent background, a row mid-render — leaked into
    // our own look. YouTube's theme variables are inherited by our nodes anyway,
    // so the stylesheet reads them directly and nothing touches inline styles.

    function injectSpeedPanelStyles() {
      if (document.getElementById('vsc-yt-styles')) return;
      const style = document.createElement('style');
      style.id = 'vsc-yt-styles';
      // Everything is static: geometry keeps both chips the same size, and the
      // colours come from YouTube's own theme variables, which our nodes inherit.
      // The html[dark] pair is only a fallback for when those variables are gone.
      style.textContent = `
        #vsc-speed-panel,
        #vsc-summary-btn {
          box-sizing: border-box;
          height: 36px;
          border: none;
          /* Large enough to stay a capsule at any height. */
          border-radius: 999px;
          background: var(--yt-spec-badge-chip-background, rgba(0, 0, 0, 0.05));
          color: var(--yt-spec-text-primary, #0f0f0f);
          font-family: "Roboto", "Arial", sans-serif;
          font-size: 14px;
          font-weight: 500;
          user-select: none;
          transition: box-shadow 0.15s;
        }
        html[dark] #vsc-speed-panel,
        html[dark] #vsc-summary-btn {
          background: var(--yt-spec-badge-chip-background, rgba(255, 255, 255, 0.1));
          color: var(--yt-spec-text-primary, #fff);
        }
        /* Tints follow the text colour, so they work in either theme. */
        #vsc-summary-btn:hover {
          box-shadow: inset 0 0 0 999px color-mix(in srgb, currentColor 10%, transparent);
        }
        #vsc-speed-panel {
          display: inline-flex;
          align-items: center;
          gap: 2px;
          margin-right: 8px;
          padding: 0 2px;
        }
        #vsc-speed-panel button {
          border: none;
          background: transparent;
          color: inherit;
          font-size: 12px;
          width: 26px;
          height: 26px;
          border-radius: 50%;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0;
          transition: background 0.15s;
        }
        #vsc-speed-panel button:hover {
          background: color-mix(in srgb, currentColor 18%, transparent);
        }
        #vsc-speed-panel .vsc-speed-label {
          display: inline-flex;
          /* Bottom edges line up, so the smaller × hangs at the baseline. */
          align-items: flex-end;
          justify-content: center;
          gap: 2px;
          color: inherit;
          font-size: 14px;
          font-weight: 600;
          line-height: 1;
          cursor: pointer;
          padding: 0 2px;
          min-width: 38px;
          font-variant-numeric: tabular-nums;
        }
        #vsc-speed-panel .vsc-speed-x {
          font-size: 11px;
          font-weight: 500;
          line-height: 1;
          opacity: 0.75;
        }
        #vsc-speed-panel .vsc-speed-label:hover {
          text-decoration: underline;
        }
        #vsc-summary-btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          margin-right: 8px;
          padding: 0 16px;
          cursor: pointer;
        }
      `;
      document.head.appendChild(style);
    }


    function getCleanVideoUrl() {
      const id = new URLSearchParams(window.location.search).get('v');
      return id ? `https://www.youtube.com/watch?v=${id}` : window.location.href;
    }

    function handleSummaryClick(btn) {
      const text = t('summaryPrompt').replace('{URL}', getCleanVideoUrl());
      navigator.clipboard.writeText(text).catch(() => {});
      window.open('https://gemini.google.com/app', '_blank');

      const label = btn.querySelector('.vsc-summary-text');
      if (label && !btn.dataset.busy) {
        btn.dataset.busy = '1';
        label.textContent = t('summaryCopied');
        setTimeout(() => {
          label.textContent = t('summaryBtn');
          delete btn.dataset.busy;
        }, 1500);
      }
    }

    // Click steps once; holding the button keeps stepping by the same amount.
    const HOLD_START_DELAY = 400;
    const HOLD_STEP_INTERVAL = 120;

    function bindHoldRepeat(button, delta) {
      let startTimer = null;
      let repeatTimer = null;
      let repeating = false;

      function stopRepeat() {
        clearTimeout(startTimer);
        clearInterval(repeatTimer);
        startTimer = null;
        repeatTimer = null;
      }

      button.addEventListener('pointerdown', (event) => {
        if (event.button !== 0) return;
        repeating = false;
        startTimer = setTimeout(() => {
          repeating = true;
          repeatTimer = setInterval(() => changeSpeed(delta), HOLD_STEP_INTERVAL);
        }, HOLD_START_DELAY);
      });

      ['pointerup', 'pointerleave', 'pointercancel'].forEach((type) => {
        button.addEventListener(type, stopRepeat);
      });

      button.addEventListener('click', (event) => {
        event.stopPropagation();
        // The hold already stepped, so its trailing click must not add one more.
        if (repeating) {
          repeating = false;
          return;
        }
        changeSpeed(delta);
      });
    }

    function isVisible(element) {
      return Boolean(element && element.offsetParent);
    }

    // A watch page carries dozens of #top-level-buttons-computed nodes — every
    // recommendation renderer has one — and all but the real action row are
    // hidden. Picking blindly used to park the widgets in an invisible one,
    // where the "already injected" check then kept them for the rest of the
    // page's life, so visibility is what decides here.
    function getActionsContainer() {
      const scoped = document.querySelectorAll('ytd-watch-metadata #top-level-buttons-computed');
      const visibleScoped = Array.from(scoped).find(isVisible);
      if (visibleScoped) return visibleScoped;

      return Array.from(document.querySelectorAll('#top-level-buttons-computed')).find(isVisible)
        || null;
    }

    // Re-homes a widget that YouTube left behind in a container it has since
    // hidden or replaced. Returns true when the caller has nothing left to do.
    function relocateChip(id, container) {
      const existing = document.getElementById(id);
      if (!existing) return false;

      if (existing.parentElement !== container) {
        container.prepend(existing);
      }
      return true;
    }

    function injectSpeedPanel() {
      if (!ytSpeedPanelEnabled || !isYouTubeWatchPage()) return;

      const container = getActionsContainer();
      if (!container) return;

      if (relocateChip('vsc-speed-panel', container)) return;

      injectSpeedPanelStyles();

      const panel = document.createElement('div');
      panel.id = 'vsc-speed-panel';

      const btnDec = document.createElement('button');
      btnDec.textContent = '\u25C0';
      btnDec.title = t('ytDecreaseTitle');
      bindHoldRepeat(btnDec, -0.1);

      // The value and the × are separate nodes so the × can sit on the baseline
      // instead of being centred against the digits.
      const value = document.createElement('span');
      value.className = 'vsc-speed-value';
      value.textContent = currentSpeed.toFixed(1);

      const times = document.createElement('span');
      times.className = 'vsc-speed-x';
      times.textContent = '×';

      const label = document.createElement('span');
      label.className = 'vsc-speed-label';
      label.append(value, times);
      label.title = t('ytResetTitle');
      label.addEventListener('click', (e) => {
        e.stopPropagation();
        setSpeed(1.0);
        showSpeedNotification(1.0);
      });

      const btnInc = document.createElement('button');
      btnInc.textContent = '\u25B6';
      btnInc.title = t('ytIncreaseTitle');
      bindHoldRepeat(btnInc, 0.1);

      panel.appendChild(btnDec);
      panel.appendChild(label);
      panel.appendChild(btnInc);

      container.prepend(panel);
    }

    function injectSummaryButton() {
      if (!ytSummaryBtnEnabled || !isYouTubeWatchPage()) return;

      const container = getActionsContainer();
      if (!container) return;

      if (relocateChip('vsc-summary-btn', container)) return;

      injectSpeedPanelStyles();

      const summaryBtn = document.createElement('button');
      summaryBtn.id = 'vsc-summary-btn';
      summaryBtn.title = t('summaryTitle');

      const label = document.createElement('span');
      label.className = 'vsc-summary-text';
      label.textContent = t('summaryBtn');
      summaryBtn.appendChild(label);

      summaryBtn.addEventListener('click', (e) => {
        e.stopPropagation();
        handleSummaryClick(summaryBtn);
      });

      container.prepend(summaryBtn);
    }

    function updateSpeedPanel() {
      const value = document.querySelector('#vsc-speed-panel .vsc-speed-value');
      if (value) value.textContent = currentSpeed.toFixed(1);
    }

    function removeSpeedPanel() {
      const panel = document.getElementById('vsc-speed-panel');
      if (panel) panel.remove();
    }

    function removeSummaryButton() {
      const summaryBtn = document.getElementById('vsc-summary-btn');
      if (summaryBtn) summaryBtn.remove();
    }

    function syncYouTubeWidgets() {
      if (!isYouTubeWatchPage()) {
        removeSpeedPanel();
        removeSummaryButton();
        return;
      }

      injectSpeedPanel();
      injectSummaryButton();
    }

    function setupYouTubeWidgetObserver() {
      if (!isYouTube()) return;

      let debounceTimer = null;
      const scheduleSync = () => {
        if (!ytSpeedPanelEnabled && !ytSummaryBtnEnabled) return;
        if (debounceTimer) return;
        debounceTimer = setTimeout(() => {
          debounceTimer = null;
          syncYouTubeWidgets();
        }, 300);
      };

      new MutationObserver(scheduleSync).observe(document.body, { childList: true, subtree: true });

      // In-page navigation reuses existing nodes, so a childList mutation is not
      // guaranteed to follow. SponsorBlock already tracks the same two events.
      document.addEventListener('yt-navigate-finish', scheduleSync);
      window.addEventListener('popstate', scheduleSync);

      // Last resort: anything the observer misses is picked up on the next tick.
      setInterval(scheduleSync, WIDGET_SELF_CHECK_INTERVAL);
    }

    function loadYouTubeWidgetSettings(callback) {
      chrome.storage.local.get(['ytSpeedPanel', 'ytSummaryBtn'], (settings) => {
        ytSpeedPanelEnabled = settings.ytSpeedPanel === true;
        // The Summary button used to be bundled with the speed panel setting.
        ytSummaryBtnEnabled = settings.ytSummaryBtn === undefined
          ? settings.ytSpeedPanel === true
          : settings.ytSummaryBtn === true;

        if (callback) callback();
      });
    }

    function initYouTubeWidgets() {
      if (!isYouTube()) return;

      loadYouTubeWidgetSettings(() => {
        setupYouTubeWidgetObserver();
        syncYouTubeWidgets();
      });
    }

    // --- End YouTube Speed Panel ---

    function applyInitialState(state) {
      currentSpeed = typeof state?.speed === 'number' ? state.speed : 1.0;
      autoApplySpeed = state?.autoApply !== false;

      if (autoApplySpeed) {
        setSpeed(currentSpeed, { notifyBackground: false });
      } else {
        setSpeedForAllVideos(1.0);
      }

      updateSpeedPanel();
    }

    function initialize() {
      observeNewVideos();
      startSpeedSync();
      sbInit();
      initYouTubeWidgets();

      // The background handshake comes last and guarded. It used to wrap the
      // whole setup, so a sleeping or just-reloaded service worker left the tab
      // with no widgets at all until the page was reloaded.
      try {
        chrome.runtime.sendMessage({ type: 'GET_TAB_STATE' }, (response) => {
          if (chrome.runtime.lastError) return;
          applyInitialState(response?.state);
        });
      } catch (error) {
        console.warn('Video Speed Control: background unavailable, keeping defaults', error);
      }
    }

    document.addEventListener('keydown', (event) => {
      const activeElement = document.activeElement;
      const isInputField = activeElement && (
        activeElement.tagName === 'INPUT'
        || activeElement.tagName === 'TEXTAREA'
        || activeElement.contentEditable === 'true'
      );
      if (isInputField) {
        return;
      }

      function matchHotkey(hotkey, e) {
        if (!hotkey) {
          return false;
        }

        return !!e.ctrlKey === !!hotkey.ctrl
          && !!e.shiftKey === !!hotkey.shift
          && !!e.altKey === !!hotkey.alt
          && !!e.metaKey === !!hotkey.meta
          && e.key.toLowerCase() === hotkey.key.toLowerCase();
      }

      if (matchHotkey(currentHotkeys.decrease, event)) {
        event.preventDefault();
        changeSpeed(-0.1);
        return;
      }

      if (matchHotkey(currentHotkeys.increase, event)) {
        event.preventDefault();
        changeSpeed(0.1);
        return;
      }

      if (matchHotkey(currentHotkeys.reset, event)) {
        event.preventDefault();
        setSpeed(1.0);
        showSpeedNotification(1.0);
      }
    });

    chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
      switch (request.type) {
        case 'SET_SPEED': {
          setSpeed(request.value);
          sendResponse({ success: true, videosFound: document.querySelectorAll('video').length, currentSpeed });
          break;
        }
        case 'SET_AUTO_APPLY': {
          setAutoApply(request.value, true);
          sendResponse({ success: true, autoApply: autoApplySpeed });
          break;
        }
        case 'GET_VIDEO_INFO': {
          const videos = document.querySelectorAll('video');
          const mainVideo = document.querySelector('video');
          sendResponse({
            videosFound: videos.length,
            currentSpeed,
            autoApplySpeed,
            videoInfo: Array.from(videos).map((video) => ({
              src: video.src || video.currentSrc || 'unknown',
              duration: video.duration || 0,
              currentTime: video.currentTime || 0,
              paused: video.paused
            })),
            sbEnabled,
            sbCurrentVideoId,
            sbSegments,
            sbCurrentTime: mainVideo ? mainVideo.currentTime : 0
          });
          break;
        }
        default:
          sendResponse({ error: 'Unknown message type' });
      }
    });

    chrome.storage.onChanged.addListener((changes, areaName) => {
      if (areaName !== 'local') return;

      if (changes.hotkeys) {
        currentHotkeys = { ...(changes.hotkeys.newValue || DEFAULT_HOTKEYS) };
      }

      if (changes.sbEnabled || changes.sbCategories) {
        sbLoadSettings(() => {
          if (sbEnabled && isYouTubeWatchPage()) {
            // The category set may have changed, so cached segments no longer apply.
            sbCurrentVideoId = null;
            sbResetState();
            sbCheckVideo();
          } else {
            removeSegmentMarkers();
          }
        });
      }

      if (changes.ytSpeedPanel) {
        ytSpeedPanelEnabled = changes.ytSpeedPanel.newValue === true;
        if (!ytSpeedPanelEnabled) {
          removeSpeedPanel();
        }
        syncYouTubeWidgets();
      }

      if (changes.ytSummaryBtn) {
        ytSummaryBtnEnabled = changes.ytSummaryBtn.newValue === true;
        if (!ytSummaryBtnEnabled) {
          removeSummaryButton();
        }
        syncYouTubeWidgets();
      }

      if (changes.locale) {
        t = I18n.createTranslator(I18n.resolveLocale(changes.locale.newValue || 'auto'));
        removeSpeedPanel();
        removeSummaryButton();
        syncYouTubeWidgets();
      }
    });

    loadHotkeys();

    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', initialize);
    } else {
      initialize();
    }

    window.addEventListener('beforeunload', () => {
      if (videoObserver) {
        videoObserver.disconnect();
      }
      if (speedSyncInterval) {
        clearInterval(speedSyncInterval);
      }
      if (sbVideoCheckInterval) {
        clearInterval(sbVideoCheckInterval);
      }
      if (sbNavigationListener) {
        document.removeEventListener('yt-navigate-finish', sbNavigationListener);
        window.removeEventListener('popstate', sbNavigationListener);
      }
      sbResetState();
    });
  });
})();