/**
 * `<avbridge-player>` — YouTube-style controls element.
 *
 * Wraps `<avbridge-video>` with a full player UI: play/pause, seek bar,
 * volume, settings menu (speed, subtitles, audio tracks), fullscreen,
 * keyboard shortcuts, touch gestures, and auto-hiding controls.
 *
 * All properties, methods, and events from `<avbridge-video>` are proxied
 * through. Consumers interact with `<avbridge-player>` exclusively.
 */

// Import the class concretely and register — side-effect-only imports
// are tree-shaken by Rollup in production builds.
import { AvbridgeVideoElement } from "./avbridge-video.js";
if (typeof customElements !== "undefined" && !customElements.get("avbridge-video")) {
  customElements.define("avbridge-video", AvbridgeVideoElement);
}
import { PLAYER_STYLES } from "./player-styles.js";
import {
  ICON_PLAY, ICON_PAUSE,
  ICON_VOLUME_UP, ICON_VOLUME_OFF,
  ICON_SETTINGS,
  ICON_FULLSCREEN, ICON_FULLSCREEN_EXIT,
  ICON_REPLAY_10, ICON_FORWARD_10,
} from "./player-icons.js";
import type { AvbridgeVideoElementEventMap, SettingsSectionConfig } from "../types.js";

// ── Helpers ──────────────────────────────────────────────────────────────

function formatTime(sec: number): string {
  if (!Number.isFinite(sec) || sec < 0) sec = 0;
  const total = Math.floor(sec);
  const h = Math.floor(total / 3600);
  const m = Math.floor((total % 3600) / 60);
  const s = total % 60;
  const mm = String(m).padStart(h > 0 ? 2 : 1, "0");
  const ss = String(s).padStart(2, "0");
  return h > 0 ? `${h}:${mm}:${ss}` : `${mm}:${ss}`;
}

const PLAYBACK_SPEEDS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2] as const;
const DEFAULT_CONTROLS_HIDE_MS = 3000;

type PlayerState = "idle" | "loading" | "playing" | "paused" | "buffering" | "ended" | "error";

// ── Forwarded events ─────────────────────────────────────────────────────

const FORWARDED_EVENTS = [
  "ready", "error", "strategychange", "trackschange", "loadstart", "destroy",
  "play", "playing", "pause", "seeking", "seeked", "volumechange",
  "ratechange", "durationchange", "canplay", "canplaythrough",
  "waiting", "stalled", "emptied", "resize",
  "loadedmetadata", "loadeddata", "timeupdate", "ended", "progress",
] as const;

// ── Observed attributes ──────────────────────────────────────────────────

const PROXY_ATTRIBUTES = [
  "src", "autoplay", "muted", "loop", "preload", "poster",
  "playsinline", "crossorigin", "disableremoteplayback", "preferstrategy",
  "fit",
] as const;

/** Player-only attributes that don't forward to <avbridge-video>. */
const PLAYER_ATTRIBUTES = ["show-fit"] as const;

const FIT_MODES = ["contain", "cover", "fill"] as const;
type FitMode = (typeof FIT_MODES)[number];

// ═══════════════════════════════════════════════════════════════════════════

export class AvbridgePlayerElement extends HTMLElement {
  static readonly observedAttributes = [...PROXY_ATTRIBUTES, ...PLAYER_ATTRIBUTES];

  /**
   * Returns `true` if a DOM event originated from one of the player's
   * **interactive chrome elements** (seek bar, control buttons, settings
   * menu, overlay play button) rather than the bare video surface.
   *
   * This is the escape hatch for host pages that wrap the player in a
   * gesture recognizer (e.g. TikTok-style vertical-swipe pager). For
   * bubble-phase listeners the player's own handlers already call
   * `stopPropagation()` on chrome interactions — but **capture-phase**
   * listeners run *before* the player's handlers, so they need to check
   * the event's path themselves and bail. This helper does that check
   * via `composedPath()`, which traverses shadow boundaries correctly.
   *
   * Returns `false` for events on the bare video surface — host pages
   * remain free to claim those for their own gestures (e.g. swipe-to-pan
   * to the next video). Returns `false` for events that never hit a
   * player at all.
   *
   * @example
   * // TikTok-style vertical swipe on the document, capture phase:
   * document.addEventListener("pointerdown", (e) => {
   *   if (AvbridgePlayerElement.isPlayerChromeEvent(e)) return;
   *   startSwipeGesture(e);
   * }, { capture: true });
   */
  static isPlayerChromeEvent(event: Event): boolean {
    // Mirrors the selector used by the player's internal tap-target
    // gate (see `_onPlayerSurfaceClick` and friends): anything inside
    // these regions is "chrome", everything else is the bare video.
    const CHROME_SELECTOR = ".avp-controls, .avp-settings, .avp-overlay-btn";
    for (const node of event.composedPath()) {
      if (node instanceof HTMLElement && node.matches?.(CHROME_SELECTOR)) {
        return true;
      }
    }
    return false;
  }

  // ── Internal DOM refs ──────────────────────────────────────────────────

  private _video!: AvbridgeVideoElement;
  private _playBtn!: HTMLButtonElement;
  private _overlayBtn!: HTMLButtonElement;
  private _seekInput!: HTMLInputElement;
  private _seekProgress!: HTMLDivElement;
  private _seekBuffered!: HTMLDivElement;
  private _seekThumb!: HTMLDivElement;
  private _seekTooltip!: HTMLDivElement;
  private _timeDisplay!: HTMLSpanElement;
  private _volumeBtn!: HTMLButtonElement;
  private _volumeInput!: HTMLInputElement;
  private _settingsBtn!: HTMLButtonElement;
  private _settingsMenu!: HTMLDivElement;
  private _settingsScrim!: HTMLDivElement;
  private _customSections: import("../types.js").SettingsSectionConfig[] = [];
  private _fullscreenBtn!: HTMLButtonElement;
  // Strategy badge removed — visible in Stats for Nerds instead.
  // Spinner is rendered but driven entirely by CSS :host([data-state]) selectors.
  private _speedIndicator!: HTMLDivElement;
  private _rippleLeft!: HTMLDivElement;
  private _rippleRight!: HTMLDivElement;

  // ── State ──────────────────────────────────────────────────────────────

  private _state: PlayerState = "idle";
  private _controlsTimer: ReturnType<typeof setTimeout> | null = null;
  private _settingsOpen = false;
  private _activeAudioTrackId: number | null = null;
  private _activeSubtitleTrackId: number | null = null;
  private _userSeeking = false;
  /** Last seek target the user committed. The thumb stays here (and
   *  `_updateTime` skips updating from `timeupdate`) until the underlying
   *  `currentTime` actually catches up — otherwise the thumb visibly snaps
   *  back to the pre-seek position while the remux pipeline rebuilds. */
  private _pendingSeekTarget: number | null = null;
  private _holdTimer: ReturnType<typeof setTimeout> | null = null;
  private _holdSpeedActive = false;
  private _savedPlaybackRate = 1;
  private _lastTapTime = 0;
  private _tapTimer: ReturnType<typeof setTimeout> | null = null;
  private _statsOpen = false;
  private _statsEl!: HTMLDivElement;
  private _statsInterval: ReturnType<typeof setInterval> | null = null;
  private _eventCleanup: (() => void)[] = [];
  private _updateToolbarEmpty: () => void = () => { /* wired in constructor */ };
  private _toolbarTop!: HTMLDivElement;

  // ── Constructor ────────────────────────────────────────────────────────

  constructor() {
    super();
    const shadow = this.attachShadow({ mode: "open" });
    shadow.innerHTML = `<style>${PLAYER_STYLES}</style>${this._template()}`;

    // Grab refs
    this._video = shadow.querySelector("avbridge-video") as AvbridgeVideoElement;
    this._playBtn = shadow.querySelector(".avp-play") as HTMLButtonElement;
    this._overlayBtn = shadow.querySelector(".avp-overlay-btn") as HTMLButtonElement;
    this._seekInput = shadow.querySelector(".avp-seek-input") as HTMLInputElement;
    this._seekProgress = shadow.querySelector(".avp-seek-progress") as HTMLDivElement;
    this._seekBuffered = shadow.querySelector(".avp-seek-buffered") as HTMLDivElement;
    this._seekThumb = shadow.querySelector(".avp-seek-thumb") as HTMLDivElement;
    this._seekTooltip = shadow.querySelector(".avp-seek-tooltip") as HTMLDivElement;
    this._timeDisplay = shadow.querySelector(".avp-time") as HTMLSpanElement;
    this._volumeBtn = shadow.querySelector(".avp-volume-btn") as HTMLButtonElement;
    this._volumeInput = shadow.querySelector(".avp-volume-input") as HTMLInputElement;
    this._settingsBtn = shadow.querySelector(".avp-settings-btn") as HTMLButtonElement;
    this._settingsMenu = shadow.querySelector(".avp-settings") as HTMLDivElement;
    this._settingsScrim = shadow.querySelector(".avp-settings-scrim") as HTMLDivElement;
    this._fullscreenBtn = shadow.querySelector(".avp-fullscreen") as HTMLButtonElement;
    // Badge removed from controls bar — strategy visible in Stats for Nerds.
    // Spinner is rendered in shadow DOM, driven by CSS :host([data-state]).
    this._speedIndicator = shadow.querySelector(".avp-speed-indicator") as HTMLDivElement;
    this._statsEl = shadow.querySelector(".avp-stats") as HTMLDivElement;
    this._rippleLeft = shadow.querySelector(".avp-ripple-left") as HTMLDivElement;
    this._rippleRight = shadow.querySelector(".avp-ripple-right") as HTMLDivElement;
    this._toolbarTop = shadow.querySelector('[part="toolbar-top"]') as HTMLDivElement;
    // Start visible — controls are shown until the auto-hide timer fires.
    this._toolbarTop.setAttribute("data-visible", "true");

    // Track whether the top toolbar has any slotted content. Used to hide
    // its gradient when empty (see data-toolbar-empty in player-styles.ts).
    // MUST defer the initial attribute write to connectedCallback — the
    // Custom Elements spec forbids constructors from adding attributes.
    const slots = shadow.querySelectorAll<HTMLSlotElement>('slot[name="top-left"], slot[name="top-right"]');
    this._updateToolbarEmpty = () => {
      const hasContent = Array.from(slots).some((s) => s.assignedNodes({ flatten: true }).length > 0);
      if (hasContent) this.removeAttribute("data-toolbar-empty");
      else this.setAttribute("data-toolbar-empty", "");
    };
    for (const s of slots) s.addEventListener("slotchange", this._updateToolbarEmpty);

    this._bindEvents();
  }

  private _template(): string {
    return `
<div part="container" class="avp">
  <avbridge-video part="video"></avbridge-video>
  <div part="toolbar-top" class="avp-toolbar-top">
    <div part="toolbar-top-left" class="avp-toolbar-top-left"><slot name="top-left"></slot></div>
    <div part="toolbar-top-right" class="avp-toolbar-top-right"><slot name="top-right"></slot></div>
  </div>
  <div part="content-overlay" class="avp-content-overlay"><slot name="content-overlay"></slot></div>
  <div part="overlay" class="avp-overlay">
    <button class="avp-overlay-btn" aria-label="Play">${ICON_PLAY}</button>
    <div class="avp-spinner"></div>
  </div>
  <div class="avp-speed-indicator">2x</div>
  <div class="avp-stats" part="stats-panel"></div>
  <div class="avp-ripple avp-ripple-left">${ICON_REPLAY_10}</div>
  <div class="avp-ripple avp-ripple-right">${ICON_FORWARD_10}</div>
  <div part="controls" class="avp-controls">
    <div class="avp-seek" part="seek-bar">
      <div class="avp-seek-track">
        <div class="avp-seek-buffered"></div>
        <div class="avp-seek-progress"></div>
      </div>
      <div class="avp-seek-thumb"></div>
      <div class="avp-seek-tooltip">0:00</div>
      <input class="avp-seek-input" type="range" min="0" max="0" step="any" value="0" aria-label="Seek">
    </div>
    <div class="avp-bottom">
      <button class="avp-btn avp-play" part="play-button" aria-label="Play">${ICON_PLAY}</button>
      <div class="avp-volume">
        <button class="avp-btn avp-volume-btn" part="volume-button" aria-label="Mute">${ICON_VOLUME_UP}</button>
        <div class="avp-volume-slider">
          <input class="avp-volume-input" part="volume-slider" type="range" min="0" max="1" step="0.05" value="1" aria-label="Volume">
        </div>
      </div>
      <span class="avp-time" part="time-display">0:00 / 0:00</span>
      <span class="avp-spacer"></span>
      <button class="avp-btn avp-settings-btn" part="settings-button" aria-label="Settings">${ICON_SETTINGS}</button>
      <button class="avp-btn avp-fullscreen" part="fullscreen-button" aria-label="Fullscreen">${ICON_FULLSCREEN}</button>
    </div>
    <div class="avp-settings-scrim"></div>
    <div class="avp-settings" part="settings-menu"><div class="avp-settings-handle"></div></div>
  </div>
</div>`;
  }

  // ── Event wiring ───────────────────────────────────────────────────────

  private _bindEvents(): void {
    const on = <K extends keyof HTMLElementEventMap>(
      el: EventTarget, event: K | string, fn: (e: Event) => void, opts?: AddEventListenerOptions,
    ) => {
      el.addEventListener(event, fn, opts);
      this._eventCleanup.push(() => el.removeEventListener(event, fn, opts));
    };

    // Forward events from inner video
    for (const name of FORWARDED_EVENTS) {
      on(this._video, name, (e) => {
        const detail = (e as CustomEvent).detail;
        this.dispatchEvent(
          detail !== undefined
            ? new CustomEvent(name, { detail, bubbles: e.bubbles, composed: true })
            : new Event(name, { bubbles: e.bubbles }),
        );
      });
    }

    // State tracking
    on(this._video, "loadstart", () => {
      this._pendingSeekTarget = null;
      this._setState("loading");
    });
    on(this._video, "ready", () => {
      this._setState(this._video.paused ? "paused" : "playing");
      this._seekInput.max = String(this._video.duration || 0);
      this._updateTime();
      this._buildSettingsMenu();
    });
    on(this._video, "play", () => this._setState("playing"));
    on(this._video, "playing", () => this._setState("playing"));
    on(this._video, "pause", () => this._setState("paused"));
    on(this._video, "waiting", () => this._setState("buffering"));
    on(this._video, "ended", () => this._setState("ended"));
    on(this._video, "error", () => this._setState("error"));
    on(this._video, "timeupdate", () => this._updateTime());
    // `progress` fires as the inner element's buffered ranges grow — keep the
    // seek bar's buffered indicator fresh even when paused or filling ahead
    // without timeupdate advancing. `<avbridge-video>` dispatches this on
    // all strategies (including the synthesized ranges for canvas strategies).
    on(this._video, "progress", () => this._updateBuffered());
    on(this._video, "volumechange", () => this._updateVolume());
    // Strategy changes are visible in Stats for Nerds.
    on(this._video, "trackschange", () => this._buildSettingsMenu());
    on(this._video, "durationchange", () => {
      this._seekInput.max = String(this._video.duration || 0);
    });

    // Play / pause
    on(this._playBtn, "click", (e) => { e.stopPropagation(); this._togglePlay(); });
    on(this._overlayBtn, "click", (e) => { e.stopPropagation(); this._togglePlay(); });

    // Seek bar — manual pointer handling so the click position maps
    // linearly across the FULL track width (native <input type="range">
    // clamps the thumb center inside [thumbWidth/2, trackWidth -
    // thumbWidth/2], which causes a visible click-to-thumb offset at
    // the edges). The input is still used for keyboard accessibility
    // (arrow keys, home/end) via its 'input' event.
    on(this._seekInput, "input", () => {
      // Only accept keyboard-driven input events (not synthesized
      // from pointer, which we handle manually below).
      if (this._userSeeking) return;
      this._onSeekInput();
    });
    on(this._seekInput, "change", () => {
      if (this._userSeeking) return;
      this._onSeekCommit();
    });
    const seekBar = this.shadowRoot!.querySelector(".avp-seek") as HTMLElement;
    on(seekBar, "pointerdown", (e) => this._onSeekPointerDown(e as PointerEvent));
    on(seekBar, "pointermove", (e) => this._onSeekHover(e as PointerEvent));

    // Volume
    on(this._volumeBtn, "click", (e) => { e.stopPropagation(); this._toggleMute(); });
    on(this._volumeInput, "input", () => {
      const vol = Number(this._volumeInput.value);
      this._video.volume = vol;
      this._video.videoElement.volume = vol;
      this._video.muted = false;
      this._video.videoElement.muted = false;
      this._updateVolume();
    });

    // Settings
    on(this._settingsBtn, "click", (e) => { e.stopPropagation(); this._toggleSettings(); });
    on(this._settingsScrim, "click", () => this._closeSettings());

    // Fullscreen
    on(this._fullscreenBtn, "click", (e) => { e.stopPropagation(); this._toggleFullscreen(); });
    on(document, "fullscreenchange", () => this._updateFullscreenIcon());

    // Click / tap on video area — uses a delayed-tap pattern (like YouTube)
    // to distinguish single-tap (play/pause) from double-tap (seek ±10s).
    // On mouse: single click → play/pause, dblclick → fullscreen.
    // On touch: single tap (after 250ms) → play/pause, double tap → seek.
    const container = this.shadowRoot!.querySelector(".avp")!;
    on(container, "click", (e) => this._onContainerClick(e as MouseEvent));
    on(container, "dblclick", (e) => this._onContainerDblClick(e as MouseEvent));

    // Dismiss settings sheet when clicking outside it. The scrim handles
    // most of this (its own click handler calls _closeSettings), but we
    // also catch clicks outside the player element entirely.
    on(document, "click", (e) => {
      if (this._settingsOpen && !this.contains(e.target as Node)) {
        this._closeSettings();
      }
    });

    // Auto-hide controls
    on(container, "pointermove", () => this._showControls());
    on(container, "pointerleave", () => this._scheduleHide());

    // Touch gestures: hold for 2x speed
    on(container, "pointerdown", (e) => this._onPointerDown(e as PointerEvent));
    on(container, "pointerup", (e) => this._onPointerUp(e as PointerEvent));
    on(container, "pointercancel", () => this._cancelHold());

    // Drag-and-drop file input. Drop a video file onto the player area
    // and it loads + plays. Files of non-video types are rejected silently
    // (no MIME sniffing — we let probe() decide). The dragover listener
    // calls preventDefault so the drop event actually fires.
    on(container, "dragenter", (e) => {
      e.preventDefault();
      const dt = (e as DragEvent).dataTransfer;
      if (!dt || !Array.from(dt.types).includes("Files")) return;
      (container as HTMLElement).classList.add("avp-dragover");
    });
    on(container, "dragover", (e) => {
      e.preventDefault();
      const dt = (e as DragEvent).dataTransfer;
      if (dt) dt.dropEffect = "copy";
    });
    on(container, "dragleave", (e) => {
      // dragleave fires on every child — only clear when we leave the container.
      if ((e as DragEvent).target === container) {
        (container as HTMLElement).classList.remove("avp-dragover");
      }
    });
    on(container, "drop", (e) => {
      e.preventDefault();
      (container as HTMLElement).classList.remove("avp-dragover");
      const file = (e as DragEvent).dataTransfer?.files?.[0];
      if (!file) return;
      // Reuse the existing source-assignment path. play() errors are
      // reported via the normal error event; don't swallow here.
      (this._video as unknown as { source: unknown }).source = file;
      void this._video.play().catch(() => { /* error event already fired */ });
    });

    // Keyboard
    on(this, "keydown", (e) => this._onKeydown(e as KeyboardEvent));
  }

  // ── Lifecycle ──────────────────────────────────────────────────────────

  connectedCallback(): void {
    this._setState("idle");
    // Attribute writes the Custom Elements spec forbids in constructors
    // — document.createElement rejects with "The result must not have
    // attributes" — deferred here. Surfaced by the Playwright
    // cross-browser tests.
    if (!this.hasAttribute("tabindex")) {
      this.setAttribute("tabindex", "0");
    }
    this._updateToolbarEmpty();
  }

  disconnectedCallback(): void {
    this._clearTimers();
  }

  attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
    if (!this._video) return;
    // Player-only attributes — not forwarded to the inner <avbridge-video>.
    if ((PLAYER_ATTRIBUTES as readonly string[]).includes(name)) {
      if (name === "show-fit" && this._settingsOpen) {
        this._buildSettingsMenu();
      }
      return;
    }
    // Proxy everything else down.
    if (value == null) this._video.removeAttribute(name);
    else this._video.setAttribute(name, value);
  }

  // ── State management ───────────────────────────────────────────────────

  private _setState(state: PlayerState): void {
    this._state = state;
    this.dataset.state = state;

    // Update play/pause icons
    const playing = state === "playing" || state === "buffering";
    this._playBtn.innerHTML = playing ? ICON_PAUSE : ICON_PLAY;
    this._playBtn.ariaLabel = playing ? "Pause" : "Play";
    this._overlayBtn.innerHTML = ICON_PLAY;

    // Auto-hide logic
    if (playing) this._scheduleHide();
    else this._showControls();
  }

  // ── Controls: play/pause ───────────────────────────────────────────────

  private _togglePlay(): void {
    if (this._state === "idle" || this._state === "error") return;
    if (this._video.paused) void this._video.play();
    else this._video.pause();
  }

  // ── Controls: seek ─────────────────────────────────────────────────────

  private _onSeekInput(): void {
    const t = Number(this._seekInput.value);
    this._updateSeekVisuals(t);
    this._timeDisplay.textContent = `${formatTime(t)} / ${formatTime(this._video.duration)}`;
  }

  private _onSeekCommit(): void {
    const target = Number(this._seekInput.value);
    this._pendingSeekTarget = target;
    this._video.currentTime = target;
    this._userSeeking = false;
  }

  /** Linear click-to-time mapping across the full track width (no edge clamping). */
  private _timeFromSeekPointer(clientX: number): number {
    const seekBar = this.shadowRoot!.querySelector(".avp-seek") as HTMLElement;
    const rect = seekBar.getBoundingClientRect();
    const frac = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
    return frac * (this._video.duration || 0);
  }

  private _onSeekPointerDown(e: PointerEvent): void {
    // Ignore synthetic clicks originating from the input's own handling
    if (e.button !== 0 && e.pointerType === "mouse") return;
    e.preventDefault();
    // Consume the event so host pages can layer the player inside a
    // swipe-driven UI (e.g. TikTok-style vertical pager) without the
    // pointerdown bubbling out and latching their gesture recognizer.
    // The seekbar's CSS sets `touch-action: none` to suppress native
    // browser pan/zoom — this complements that on the JS side, since
    // swipe handlers built on PointerEvents wouldn't honor touch-action.
    e.stopPropagation();
    this._userSeeking = true;
    const seekBar = this.shadowRoot!.querySelector(".avp-seek") as HTMLElement;
    seekBar.setPointerCapture(e.pointerId);
    seekBar.setAttribute("data-seeking", "");

    // Two seek modes, picked by `(pointer: coarse)`:
    //   - **fine** (mouse / trackpad / stylus): absolute mapping —
    //     pointer X maps directly to seek time, thumb jumps under
    //     cursor. Standard desktop YouTube behavior.
    //   - **coarse** (touch): relative drag — initial tap doesn't move
    //     the thumb; finger Δx maps to a Δt added to the time at
    //     pointerdown. Standard YouTube-mobile behavior; matters because
    //     finger positioning is too imprecise for absolute on a small bar.
    // Both modes commit live during drag (throttled to ~4 Hz so we don't
    // overwhelm the seek pipeline — every commit restarts the decoder
    // pump on canvas strategies) and once more on pointerup.
    const coarse = typeof matchMedia !== "undefined"
      && matchMedia("(pointer: coarse)").matches;
    const startTime = coarse ? (this._video.currentTime || 0) : 0;
    const startClientX = e.clientX;
    let lastCommit = 0;

    const timeAt = (clientX: number): number => {
      if (coarse) {
        const rect = seekBar.getBoundingClientRect();
        const dx = clientX - startClientX;
        const dt = (dx / rect.width) * (this._video.duration || 0);
        return Math.max(0, Math.min(this._video.duration || 0, startTime + dt));
      }
      return this._timeFromSeekPointer(clientX);
    };

    const showTooltip = (t: number, clientX: number): void => {
      if (coarse) this._updateSeekTooltipAtTime(t);
      else this._updateSeekTooltip(clientX);
    };

    // Fine mode: tap commits immediately (thumb jumps under pointer).
    // Coarse mode: tap parks at the current time; only drag moves it.
    if (!coarse) {
      const initial = timeAt(e.clientX);
      this._seekInput.value = String(initial);
      this._onSeekInput();
      showTooltip(initial, e.clientX);
      this._onSeekCommit();
      this._userSeeking = true; // commit clears it; we're still seeking
    } else {
      showTooltip(startTime, e.clientX);
    }

    const onMove = (ev: PointerEvent) => {
      // Belt-and-suspenders for the host's swipe handler. Pointer capture
      // changes the *target* of subsequent pointermove events to seekBar,
      // but they still bubble through ancestors — a swipe listener
      // attached to document/window would otherwise see every drag tick.
      ev.stopPropagation();
      const t = timeAt(ev.clientX);
      this._seekInput.value = String(t);
      this._onSeekInput();
      showTooltip(t, ev.clientX);
      const now = performance.now();
      if (now - lastCommit > 250) {
        lastCommit = now;
        this._onSeekCommit();
        this._userSeeking = true;
      }
    };
    const onUp = (ev: PointerEvent) => {
      ev.stopPropagation();
      const t = timeAt(ev.clientX);
      this._seekInput.value = String(t);
      this._onSeekCommit();
      this._seekInput.focus();
      seekBar.removeAttribute("data-seeking");
      seekBar.removeEventListener("pointermove", onMove);
      seekBar.removeEventListener("pointerup", onUp);
      seekBar.removeEventListener("pointercancel", onUp);
      try { seekBar.releasePointerCapture(e.pointerId); } catch { /* ignore */ }
    };
    seekBar.addEventListener("pointermove", onMove);
    seekBar.addEventListener("pointerup", onUp);
    seekBar.addEventListener("pointercancel", onUp);
  }

  private _onSeekHover(e: PointerEvent): void {
    this._updateSeekTooltip(e.clientX);
  }

  private _updateSeekTooltip(clientX: number): void {
    const rect = this._seekInput.getBoundingClientRect();
    const frac = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
    const t = frac * (this._video.duration || 0);
    this._seekTooltip.textContent = formatTime(t);
    this._seekTooltip.style.left = `${frac * 100}%`;
  }

  /** Position the tooltip over a specific time (vs. pointer X). Used by
   *  relative-drag scrub on coarse pointers, where the displayed time
   *  is decoupled from the finger position. */
  private _updateSeekTooltipAtTime(t: number): void {
    const dur = this._video.duration || 0;
    const frac = dur > 0 ? Math.max(0, Math.min(1, t / dur)) : 0;
    this._seekTooltip.textContent = formatTime(t);
    this._seekTooltip.style.left = `${frac * 100}%`;
  }

  private _updateSeekVisuals(t: number): void {
    const dur = this._video.duration || 0;
    const pct = dur > 0 ? (t / dur) * 100 : 0;
    this._seekProgress.style.width = `${pct}%`;
    // Thumb position uses a CSS calc that matches the native range input's
    // click-to-value math (thumb stays within track bounds). See player-styles.ts.
    this._seekThumb.style.setProperty("--pct", String(pct));
  }

  // ── Controls: time ─────────────────────────────────────────────────────

  private _updateTime(): void {
    if (this._userSeeking) return;
    const t = this._video.currentTime;
    const d = this._video.duration;
    // While a committed seek is still settling, keep the thumb at the
    // target so it doesn't snap back to the pre-seek position. Clear once
    // currentTime has landed within 0.5s of the target.
    if (this._pendingSeekTarget !== null) {
      if (Math.abs(t - this._pendingSeekTarget) < 0.5) {
        this._pendingSeekTarget = null;
      } else {
        this._timeDisplay.textContent = `${formatTime(this._pendingSeekTarget)} / ${formatTime(d)}`;
        this._updateBuffered();
        return;
      }
    }
    this._seekInput.value = String(t);
    this._updateSeekVisuals(t);
    this._timeDisplay.textContent = `${formatTime(t)} / ${formatTime(d)}`;
    this._updateBuffered();
  }

  /**
   * Render every buffered range as its own segment so gaps (common on MSE
   * after seeks) are visible. Not gated by `_userSeeking` — ranges should
   * keep updating while the user scrubs, and runs cheaply on `progress`.
   */
  private _updateBuffered(): void {
    const d = this._video.duration;
    if (!(d > 0)) return;
    let buf: TimeRanges;
    try { buf = this._video.buffered; } catch { return; }
    const count = buf ? buf.length : 0;
    const host = this._seekBuffered;
    // Reconcile child count. Segment divs are styled via .avp-seek-buffered-range.
    while (host.childElementCount > count) host.lastElementChild!.remove();
    while (host.childElementCount < count) {
      const seg = document.createElement("div");
      seg.className = "avp-seek-buffered-range";
      host.appendChild(seg);
    }
    for (let i = 0; i < count; i++) {
      let start: number; let end: number;
      try { start = buf.start(i); end = buf.end(i); } catch { continue; }
      const s = Math.max(0, start);
      const e = Math.min(d, end);
      if (e <= s) continue;
      const seg = host.children[i] as HTMLElement;
      seg.style.left = `${(s / d) * 100}%`;
      seg.style.width = `${((e - s) / d) * 100}%`;
    }
  }

  // ── Controls: volume ───────────────────────────────────────────────────

  private _toggleMute(): void {
    // Set both the element attribute AND the inner <video> property directly,
    // because avbridge-video's attribute-based muted toggling can diverge
    // from the <video> property on a running element.
    const newMuted = !this._video.muted;
    this._video.muted = newMuted;
    this._video.videoElement.muted = newMuted;
    this._updateVolume();
  }

  private _updateVolume(): void {
    const muted = this._video.muted || this._video.videoElement.muted || this._video.volume === 0;
    this._volumeBtn.innerHTML = muted ? ICON_VOLUME_OFF : ICON_VOLUME_UP;
    this._volumeInput.value = muted ? "0" : String(this._video.volume);
  }

  // ── Controls: settings ─────────────────────────────────────────────────

  private _toggleSettings(): void {
    this._settingsOpen = !this._settingsOpen;
    this._settingsMenu.classList.toggle("open", this._settingsOpen);
    this._settingsScrim.classList.toggle("open", this._settingsOpen);
    if (this._settingsOpen) {
      this._fitSettingsToPlayer();
      this._showControls();
    }
  }

  private _fitSettingsToPlayer(): void {
    const container = this.shadowRoot?.querySelector(".avp") as HTMLElement | null;
    if (!container) return;
    const rect = container.getBoundingClientRect();
    // Bottom sheet can use up to 70% of the player height, leaving room
    // to see the video behind the scrim. Floor at 120px so it's always
    // usable.
    const maxH = Math.max(120, Math.floor(rect.height * 0.7));
    this._settingsMenu.style.maxHeight = `${maxH}px`;
  }

  private _closeSettings(): void {
    this._settingsOpen = false;
    this._settingsMenu.classList.remove("open");
    this._settingsScrim.classList.remove("open");
  }

  private _buildSettingsMenu(): void {
    const sections: string[] = [];

    // Helper: a row with an invisible native <select> layered on top of
    // a styled label+value. Tapping opens the OS picker (escapes the
    // shadow DOM — intentional for small players). The visible label
    // updates on change.
    const selectRow = (label: string, currentValue: string, options: string, selectAttrs: string): string =>
      `<div class="avp-settings-section">` +
        `<div class="avp-settings-header">` +
          `<span class="avp-settings-header-label">${label}</span>` +
          `<span class="avp-settings-header-value">${currentValue}</span>` +
          `<select class="avp-settings-select" ${selectAttrs}>${options}</select>` +
        `</div>` +
      `</div>`;

    // Speed
    const currentRate = this._video.playbackRate ?? 1;
    const speedValue = Math.abs(currentRate - 1) < 0.01 ? "Normal" : `${currentRate}x`;
    let speedOpts = "";
    for (const spd of PLAYBACK_SPEEDS) {
      const sel = Math.abs(spd - currentRate) < 0.01 ? " selected" : "";
      const label = spd === 1 ? "Normal" : `${spd}x`;
      speedOpts += `<option value="${spd}"${sel}>${label}</option>`;
    }
    sections.push(selectRow("Speed", speedValue, speedOpts, `data-action="speed"`));

    // Audio tracks
    const audios = this._video.audioTracks ?? [];
    if (audios.length > 1) {
      const activeAudioId = this._activeAudioTrackId ?? audios[0]?.id;
      const activeAudio = audios.find((t: { id: number }) => t.id === activeAudioId) ?? audios[0];
      const audioValue = activeAudio?.language ?? `Track ${activeAudio?.id ?? 1}`;
      let audioOpts = "";
      for (const t of audios) {
        const sel = t.id === activeAudioId ? " selected" : "";
        audioOpts += `<option value="${t.id}"${sel}>${t.language ?? `Track ${t.id}`}</option>`;
      }
      sections.push(selectRow("Audio", audioValue, audioOpts, `data-action="audio"`));
    }

    // Subtitle tracks
    const subs = this._video.subtitleTracks ?? [];
    if (subs.length > 0) {
      const activeSubId = this._activeSubtitleTrackId;
      const activeSub = activeSubId != null ? subs.find((t: { id: number }) => t.id === activeSubId) : null;
      const subValue = activeSub ? (activeSub.language ?? `Track ${activeSub.id}`) : "Off";
      let subOpts = `<option value="-1"${activeSubId == null ? " selected" : ""}>Off</option>`;
      for (const t of subs) {
        const sel = t.id === activeSubId ? " selected" : "";
        subOpts += `<option value="${t.id}"${sel}>${t.language ?? `Track ${t.id}`}</option>`;
      }
      sections.push(selectRow("Subtitles", subValue, subOpts, `data-action="subtitle"`));
    }

    // Fit mode — opt-in via the `show-fit` attribute
    if (this.hasAttribute("show-fit")) {
      const currentFit = (this._video.fit ?? "contain") as FitMode;
      const fitValue = currentFit[0].toUpperCase() + currentFit.slice(1);
      let fitOpts = "";
      for (const mode of FIT_MODES) {
        const sel = mode === currentFit ? " selected" : "";
        const label = mode[0].toUpperCase() + mode.slice(1);
        fitOpts += `<option value="${mode}"${sel}>${label}</option>`;
      }
      sections.push(selectRow("Fit", fitValue, fitOpts, `data-action="fit"`));
    }

    // Consumer-added sections
    for (const cfg of this._customSections) {
      const activeItem = cfg.items.find((i) => i.active);
      let customOpts = "";
      for (const item of cfg.items) {
        const sel = item.active ? " selected" : "";
        customOpts += `<option value="${item.id}"${sel}>${item.label}</option>`;
      }
      sections.push(selectRow(cfg.label, activeItem?.label ?? "", customOpts, `data-action="custom" data-custom-id="${cfg.id}"`));
    }

    // Stats for nerds — toggle row (no select)
    sections.push(
      `<div class="avp-settings-section">` +
        `<div class="avp-settings-header avp-settings-toggle" data-stats>` +
          `<span class="avp-settings-header-label">Stats for Nerds</span>` +
        `</div>` +
      `</div>`,
    );

    // Rebuild sheet content (preserve the handle).
    const handle = this._settingsMenu.querySelector(".avp-settings-handle");
    this._settingsMenu.innerHTML = "";
    if (handle) this._settingsMenu.appendChild(handle);
    else this._settingsMenu.insertAdjacentHTML("afterbegin", `<div class="avp-settings-handle"></div>`);
    this._settingsMenu.insertAdjacentHTML("beforeend", sections.join(""));

    // ── <select> change handlers ──
    for (const sel of this._settingsMenu.querySelectorAll<HTMLSelectElement>(".avp-settings-select")) {
      sel.addEventListener("change", (e) => {
        e.stopPropagation();
        const action = sel.dataset.action;
        const val = sel.value;
        switch (action) {
          case "speed":
            this._video.playbackRate = Number(val);
            break;
          case "audio":
            this._activeAudioTrackId = Number(val);
            void this._video.setAudioTrack(Number(val));
            break;
          case "subtitle": {
            const subId = Number(val);
            this._activeSubtitleTrackId = subId >= 0 ? subId : null;
            void this._video.setSubtitleTrack(subId >= 0 ? subId : null);
            break;
          }
          case "fit":
            this.setAttribute("fit", val);
            break;
          case "custom": {
            const cfgId = sel.dataset.customId!;
            const cfg = this._customSections.find((s) => s.id === cfgId);
            cfg?.onSelect(val);
            break;
          }
        }
        this._buildSettingsMenu();
      });
    }

    // Stats toggle (no select — just a clickable row)
    const statsRow = this._settingsMenu.querySelector("[data-stats]");
    if (statsRow) {
      statsRow.addEventListener("click", (e) => {
        e.stopPropagation();
        this._toggleStats();
        this._closeSettings();
      });
    }
  }

  // ── Stats for nerds ────────────────────────────────────────────────────

  private _statsPrev: { ts: number; rt: Record<string, unknown> } | null = null;

  private _toggleStats(): void {
    this._statsOpen = !this._statsOpen;
    this._statsEl.classList.toggle("open", this._statsOpen);
    if (this._statsOpen) {
      this._statsPrev = null; // reset delta baseline
      this._updateStats();
      this._statsInterval = setInterval(() => this._updateStats(), 1000);
    } else {
      if (this._statsInterval) { clearInterval(this._statsInterval); this._statsInterval = null; }
    }
  }

  private _updateStats(): void {
    const d = this._video.getDiagnostics() as Record<string, unknown> | null;
    if (!d) { this._statsEl.textContent = "No diagnostics"; return; }
    const rt = (d.runtime ?? {}) as Record<string, unknown>;
    const now = performance.now();
    const prev = this._statsPrev;
    const dtSec = prev ? Math.max(0.001, (now - prev.ts) / 1000) : 0;
    const delta = (key: string): number | null => {
      if (!prev) return null;
      const a = rt[key];
      const b = prev.rt[key];
      if (typeof a === "number" && typeof b === "number") return a - b;
      return null;
    };
    const rate = (key: string): number | null => {
      const d_ = delta(key);
      return d_ != null ? d_ / dtSec : null;
    };
    const fmt = (n: number | null, digits = 1) => (n == null ? "?" : n.toFixed(digits));

    const sourceFps = (typeof rt.sourceFps === "number" ? rt.sourceFps : d.fps) as number | undefined;
    const lines: string[] = [];

    // ── Identity ──────────────────────────────────────────────────────
    lines.push(`Container: ${d.container ?? "?"}   Strategy: ${d.strategy ?? "?"} (${d.strategyClass ?? "?"})`);
    lines.push(`Video: ${d.videoCodec ?? "?"} ${d.width ?? "?"}×${d.height ?? "?"}${sourceFps ? ` @ ${sourceFps.toFixed(3)} fps` : ""}`);
    lines.push(`Audio: ${d.audioCodec ?? "none"}   Transport: ${d.transport ?? "?"}${d.rangeSupported === true ? "/range" : ""}`);
    lines.push(`Duration: ${typeof d.duration === "number" ? d.duration.toFixed(1) + "s" : "?"}   Playback rate: ${this._video.playbackRate.toFixed(2)}x`);

    // ── Realtime rates (deltas per second) ─────────────────────────────
    if (rt.videoFramesDecoded != null) {
      const decFps = rate("videoFramesDecoded");
      const paintFps = rate("framesPainted");
      const dropLateFps = rate("framesDroppedLate");
      const dropOverflowFps = rate("framesDroppedOverflow");
      const pct = sourceFps && decFps != null ? ` (${((decFps / sourceFps) * 100).toFixed(0)}% of realtime)` : "";
      lines.push(`Decode fps: ${fmt(decFps)}${pct}   Paint fps: ${fmt(paintFps)}`);
      lines.push(`Drops/sec: late=${fmt(dropLateFps)} overflow=${fmt(dropOverflowFps)}   Totals: painted=${rt.framesPainted} dropped=${rt.framesDroppedLate}`);
    }

    // ── Decode-time breakdown (wall ms spent inside libav) ────────────
    if (typeof rt.videoDecodeMsTotal === "number") {
      const msDelta = delta("videoDecodeMsTotal");
      const batchesDelta = delta("videoDecodeBatches");
      const perBatch = msDelta != null && batchesDelta && batchesDelta > 0 ? msDelta / batchesDelta : null;
      const share = msDelta != null && dtSec > 0 ? (msDelta / (dtSec * 1000)) * 100 : null;
      lines.push(
        `Video decode: ${fmt(perBatch)}ms/batch avg   ${fmt(share)}% of wall   slowest=${fmt(rt.slowestVideoBatchMs as number)}ms`,
      );
    }
    if (typeof rt.audioDecodeMsTotal === "number") {
      const msDelta = delta("audioDecodeMsTotal");
      const share = msDelta != null && dtSec > 0 ? (msDelta / (dtSec * 1000)) * 100 : null;
      lines.push(`Audio decode: ${fmt(share)}% of wall`);
    }
    if (typeof rt.pumpThrottleMsTotal === "number") {
      const msDelta = delta("pumpThrottleMsTotal");
      const share = msDelta != null && dtSec > 0 ? (msDelta / (dtSec * 1000)) * 100 : null;
      lines.push(`Producer throttled: ${fmt(share)}% of wall`);
    }

    // ── Queue health ──────────────────────────────────────────────────
    if (rt.queueDepth != null) {
      lines.push(
        `Queue: depth=${rt.queueDepth} span=${fmt(rt.queueSpanMs as number)}ms ` +
        `head=${fmt(rt.queueHeadMs as number)}ms tail=${fmt(rt.queueTailMs as number)}ms`,
      );
    }
    if (typeof rt.newestVideoPtsMs === "number") {
      lines.push(`Newest decoded PTS: ${(rt.newestVideoPtsMs / 1000).toFixed(2)}s`);
    }

    // ── Audio ─────────────────────────────────────────────────────────
    if (rt.audioState != null) {
      lines.push(`Audio state: ${rt.audioState}   bufferAhead=${fmt(rt.bufferAhead as number, 2)}s   clock=${rt.clockMode ?? "?"}`);
    }

    // ── BSF + warnings ────────────────────────────────────────────────
    if (typeof rt.ptsRegressions === "number" && rt.ptsRegressions > 0) {
      lines.push(`PTS REGRESSIONS: ${rt.ptsRegressions} (worst=${fmt(rt.worstPtsRegressionMs as number)}ms) — decoder emitting out of order`);
    }
    if (rt.bsfApplied && (rt.bsfApplied as string[]).length > 0) lines.push(`BSF active: ${(rt.bsfApplied as string[]).join(", ")}`);
    if (rt.bsfMissing && (rt.bsfMissing as string[]).length > 0) {
      lines.push(`BSF MISSING: ${(rt.bsfMissing as string[]).join(", ")} (rebuild libav with avbsf)`);
    }

    if (d.probedBy) lines.push(`Probed by: ${d.probedBy}`);

    this._statsEl.textContent = lines.join("\n");
    this._statsPrev = { ts: now, rt: { ...rt } };
  }

  // ── Controls: fullscreen ───────────────────────────────────────────────

  private _toggleFullscreen(): void {
    if (document.fullscreenElement === this) {
      void document.exitFullscreen();
    } else {
      void this.requestFullscreen();
    }
  }

  private _updateFullscreenIcon(): void {
    const fs = document.fullscreenElement === this;
    this._fullscreenBtn.innerHTML = fs ? ICON_FULLSCREEN_EXIT : ICON_FULLSCREEN;
  }

  // ── Controls: auto-hide ────────────────────────────────────────────────

  /**
   * Reveal the auto-hiding chrome (top toolbar + bottom controls) and
   * re-start the auto-hide timer. Call this from app-level code to
   * briefly surface the player UI — e.g. to confirm "you just swiped to
   * this video" in a carousel, or to flash the title on focus change.
   *
   * @param durationMs  How long the chrome stays visible before fading.
   *                    Defaults to the player's normal 3 s auto-hide.
   *                    Pointer movement or any other interaction resets
   *                    the timer, so a user hovering during the flash
   *                    sees no flicker.
   */
  showControls(durationMs?: number): void {
    this.removeAttribute("data-controls-hidden");
    this._toolbarTop.setAttribute("data-visible", "true");
    this._scheduleHide(durationMs);
  }

  private _showControls(): void {
    this.showControls();
  }

  private _scheduleHide(durationMs?: number): void {
    const ms = durationMs ?? this._getControlsTimeout();
    if (this._controlsTimer) clearTimeout(this._controlsTimer);
    if (this._state !== "playing" && this._state !== "buffering") return;
    if (this._settingsOpen) return;
    // A timeout of 0 or negative means "never hide" (controls always visible).
    if (ms <= 0) return;
    this._controlsTimer = setTimeout(() => {
      if (this._state === "playing") {
        this.setAttribute("data-controls-hidden", "");
        this._toolbarTop.setAttribute("data-visible", "false");
      }
    }, ms);
  }

  /** Read the controls-timeout attribute. 0 or negative = never hide.
   *  Unset = default 3000ms. */
  private _getControlsTimeout(): number {
    const attr = this.getAttribute("controls-timeout");
    if (attr == null) return DEFAULT_CONTROLS_HIDE_MS;
    const n = Number(attr);
    return Number.isFinite(n) ? n : DEFAULT_CONTROLS_HIDE_MS;
  }

  // Strategy is visible in Stats for Nerds, no badge in controls bar.

  // ── Click / tap handling (YouTube delayed-tap pattern) ──────────────────
  //
  // Problem: single click toggles play, double click toggles fullscreen (or
  // seek on touch). Firing play on the first click causes a play→pause
  // glitch on every double-click. YouTube solves this by delaying the
  // single-click action by ~250ms; if a second click arrives in that window
  // it's treated as a double-click and the single-click action is cancelled.

  /** Track whether the last interaction was touch so click handler can skip. */
  private _lastPointerTypeWasTouch = false;
  /** True for ~50ms after a touch double-tap was handled, so the
   *  synthetic dblclick from the browser doesn't also fire fullscreen. */
  private _touchDoubleTapConsumed = false;

  /** True if the event's composed path passes through consumer-slotted
   *  content (toolbar or content-overlay). Slotted content lives in the
   *  light DOM so `.closest(".avp-toolbar-top")` on the event target won't
   *  find the shadow-DOM wrapper — `composedPath()` does. */
  private _isSlottedContentEvent(e: Event): boolean {
    for (const node of e.composedPath()) {
      if (node instanceof HTMLElement &&
        (node.classList.contains("avp-toolbar-top") ||
         node.classList.contains("avp-content-overlay"))) return true;
    }
    return false;
  }

  private _onContainerClick(e: MouseEvent): void {
    // Ignore clicks on controls and slotted content
    if ((e.target as HTMLElement).closest?.(".avp-controls, .avp-settings, .avp-overlay-btn")) return;
    if (this._isSlottedContentEvent(e)) return;

    // If the bottom sheet is open, any click outside it dismisses
    // instead of toggling play/pause.
    if (this._settingsOpen) {
      this._closeSettings();
      return;
    }

    // Touch taps are handled by _onPointerUp (show/hide controls + double-tap).
    // The browser fires a synthetic click after touchend — skip it.
    if (this._lastPointerTypeWasTouch) {
      this._lastPointerTypeWasTouch = false;
      return;
    }

    // Mouse: delay single-click to let dblclick cancel it
    if (this._tapTimer) { clearTimeout(this._tapTimer); this._tapTimer = null; }
    this._tapTimer = setTimeout(() => {
      this._tapTimer = null;
      this._togglePlay();
    }, 250);
  }

  private _onContainerDblClick(e: MouseEvent): void {
    if ((e.target as HTMLElement).closest?.(".avp-controls, .avp-settings")) return;
    if (this._isSlottedContentEvent(e)) return;
    // On touch devices, the browser synthesizes a dblclick after two
    // rapid taps. But we already handled the double-tap in _onPointerUp
    // (which does ff/rw on sides, fullscreen in center). Skip the
    // synthetic dblclick so both don't fire.
    if (this._touchDoubleTapConsumed) return;
    // Cancel the pending single-click play/pause
    if (this._tapTimer) { clearTimeout(this._tapTimer); this._tapTimer = null; }
    this._toggleFullscreen();
  }

  // ── Touch gestures ─────────────────────────────────────────────────────

  private _onPointerDown(e: PointerEvent): void {
    if (e.pointerType !== "touch") return;
    // Tap-and-hold for 2x speed
    this._holdTimer = setTimeout(() => {
      this._holdSpeedActive = true;
      this._savedPlaybackRate = this._video.playbackRate;
      this._video.playbackRate = 2;
      this._speedIndicator.classList.add("active");
    }, 500);
  }

  private _onPointerUp(e: PointerEvent): void {
    this._cancelHold();
    if (e.pointerType !== "touch") return;
    this._lastPointerTypeWasTouch = true;

    // Ignore touches on controls — buttons have their own handlers
    if ((e.target as HTMLElement).closest?.(".avp-controls, .avp-settings, .avp-overlay-btn")) return;
    if (this._isSlottedContentEvent(e)) return;

    // If the bottom sheet is open, dismiss it on any touch outside.
    if (this._settingsOpen) {
      this._closeSettings();
      return;
    }

    // Double-tap detection
    const now = Date.now();
    if (now - this._lastTapTime < 300) {
      // Double tap — cancel pending single tap and seek
      if (this._tapTimer) { clearTimeout(this._tapTimer); this._tapTimer = null; }
      const rect = this.getBoundingClientRect();
      const x = e.clientX - rect.left;
      if (x < rect.width / 3) {
        this._doDoubleTap("left");
      } else if (x > (rect.width * 2) / 3) {
        this._doDoubleTap("right");
      } else {
        this._toggleFullscreen();
      }
      // Prevent the synthetic dblclick (fired ~50ms later by the
      // browser) from also toggling fullscreen.
      this._touchDoubleTapConsumed = true;
      setTimeout(() => { this._touchDoubleTapConsumed = false; }, 100);
      this._lastTapTime = 0;
      return;
    }
    // Single tap on touch — toggle controls visibility (NOT play/pause).
    // YouTube mobile: tap shows/hides controls. Play button toggles playback.
    this._lastTapTime = now;
    this._tapTimer = setTimeout(() => {
      this._tapTimer = null;
      if (this.hasAttribute("data-controls-hidden")) {
        this._showControls();
      } else {
        this.setAttribute("data-controls-hidden", "");
      }
    }, 250);
  }

  private _cancelHold(): void {
    if (this._holdTimer) {
      clearTimeout(this._holdTimer);
      this._holdTimer = null;
    }
    if (this._holdSpeedActive) {
      this._holdSpeedActive = false;
      this._video.playbackRate = this._savedPlaybackRate;
      this._speedIndicator.classList.remove("active");
    }
  }

  private _doDoubleTap(side: "left" | "right"): void {
    const ripple = side === "left" ? this._rippleLeft : this._rippleRight;
    ripple.classList.remove("active");
    // Force reflow to restart animation
    void ripple.offsetWidth;
    ripple.classList.add("active");

    const delta = side === "left" ? -10 : 10;
    this._video.currentTime = Math.max(0, this._video.currentTime + delta);
  }

  // ── Keyboard shortcuts ─────────────────────────────────────────────────

  /** Duration of one frame in seconds, derived from diagnostics fps or
   *  a 30fps default. Used for frame-step shortcuts (`,` / `.`). */
  private _frameDuration(): number {
    const diag = this._video.getDiagnostics() as { fps?: number } | null;
    const fps = diag?.fps && diag.fps > 0 ? diag.fps : 30;
    return 1 / fps;
  }

  private _onKeydown(e: KeyboardEvent): void {
    // Don't intercept if the user is typing in an input
    if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;

    switch (e.key) {
      case " ":
      case "k":
        e.preventDefault();
        this._togglePlay();
        break;
      case "f":
        e.preventDefault();
        this._toggleFullscreen();
        break;
      case "m":
        e.preventDefault();
        this._toggleMute();
        break;
      case "ArrowLeft":
      case "j":
        e.preventDefault();
        this._video.currentTime = Math.max(0, this._video.currentTime - 5);
        break;
      case "ArrowRight":
      case "l":
        e.preventDefault();
        this._video.currentTime = Math.min(this._video.duration || 0, this._video.currentTime + 5);
        break;
      case "ArrowUp":
        e.preventDefault();
        this._video.volume = Math.min(1, this._video.volume + 0.1);
        break;
      case "ArrowDown":
        e.preventDefault();
        this._video.volume = Math.max(0, this._video.volume - 0.1);
        break;
      case ">":
        e.preventDefault();
        this._video.playbackRate = Math.min(2, this._video.playbackRate + 0.25);
        this._buildSettingsMenu();
        break;
      case "<":
        e.preventDefault();
        this._video.playbackRate = Math.max(0.25, this._video.playbackRate - 0.25);
        this._buildSettingsMenu();
        break;
      case ",":
        // Frame-back (YouTube-style: , while paused steps back one frame)
        e.preventDefault();
        if (!this._video.paused) this._video.pause();
        this._video.currentTime = Math.max(0, this._video.currentTime - this._frameDuration());
        break;
      case ".":
        // Frame-forward (YouTube-style: . while paused steps forward one frame)
        e.preventDefault();
        if (!this._video.paused) this._video.pause();
        this._video.currentTime = Math.min(
          this._video.duration || 0,
          this._video.currentTime + this._frameDuration(),
        );
        break;
      case "Escape":
        if (this._settingsOpen) {
          e.preventDefault();
          this._closeSettings();
        }
        break;
    }
    this._showControls();
  }

  // ── Cleanup ────────────────────────────────────────────────────────────

  private _clearTimers(): void {
    if (this._controlsTimer) { clearTimeout(this._controlsTimer); this._controlsTimer = null; }
    if (this._holdTimer) { clearTimeout(this._holdTimer); this._holdTimer = null; }
    if (this._tapTimer) { clearTimeout(this._tapTimer); this._tapTimer = null; }
    if (this._statsInterval) { clearInterval(this._statsInterval); this._statsInterval = null; }
  }

  // ── Property proxies ───────────────────────────────────────────────────

  get src(): string { return this._video.src ?? ""; }
  set src(v: string) { this._video.src = v; }

  get source(): unknown { return this._video.source; }
  set source(v: unknown) { (this._video as unknown as { source: unknown }).source = v; }

  get currentTime(): number { return this._video.currentTime; }
  set currentTime(v: number) { this._video.currentTime = v; }

  get duration(): number { return this._video.duration; }
  get paused(): boolean { return this._video.paused; }
  get ended(): boolean { return this._video.ended; }
  get readyState(): number { return this._video.readyState; }

  get volume(): number { return this._video.volume; }
  set volume(v: number) { this._video.volume = v; this._updateVolume(); }

  get muted(): boolean { return this._video.muted; }
  set muted(v: boolean) { this._video.muted = v; this._updateVolume(); }

  get playbackRate(): number { return this._video.playbackRate; }
  set playbackRate(v: number) { this._video.playbackRate = v; }

  get autoplay(): boolean { return this._video.autoplay; }
  set autoplay(v: boolean) { this._video.autoplay = v; }

  get loop(): boolean { return this._video.loop; }
  set loop(v: boolean) { this._video.loop = v; }

  get videoWidth(): number { return this._video.videoWidth; }
  get videoHeight(): number { return this._video.videoHeight; }
  get buffered(): TimeRanges { return this._video.buffered; }
  get played(): TimeRanges { return this._video.played; }
  get seekable(): TimeRanges { return this._video.seekable; }

  get strategy(): string | undefined { return this._video.strategy ?? undefined; }
  get strategyClass(): string | undefined { return this._video.strategyClass ?? undefined; }
  get audioTracks(): unknown[] { return this._video.audioTracks ?? []; }
  get subtitleTracks(): unknown[] { return this._video.subtitleTracks ?? []; }

  /**
   * External subtitle files to attach when the source loads. Forwarded
   * to the inner <avbridge-video>. Takes effect on next bootstrap.
   */
  get subtitles(): unknown {
    return (this._video as unknown as { subtitles: unknown }).subtitles;
  }
  set subtitles(value: unknown) {
    (this._video as unknown as { subtitles: unknown }).subtitles = value;
  }

  /** Attach a subtitle track to the current playback without a reload. */
  async addSubtitle(subtitle: { url: string; language?: string; format?: "vtt" | "srt" }): Promise<void> {
    return (this._video as unknown as { addSubtitle: (s: unknown) => Promise<void> }).addSubtitle(subtitle);
  }
  get player(): unknown { return this._video.player; }
  get videoElement(): HTMLVideoElement { return this._video.videoElement; }

  // ── Method proxies ─────────────────────────────────────────────────────

  async play(): Promise<void> { return this._video.play(); }
  pause(): void { this._video.pause(); }
  async load(): Promise<void> { return this._video.load(); }
  async destroy(): Promise<void> {
    this._clearTimers();
    for (const fn of this._eventCleanup) fn();
    this._eventCleanup = [];
    return this._video.destroy();
  }
  async setAudioTrack(id: number): Promise<void> { return this._video.setAudioTrack(id); }

  addSettingsSection(config: SettingsSectionConfig): void {
    this._customSections = this._customSections.filter((s) => s.id !== config.id);
    this._customSections.push(config);
    this._buildSettingsMenu();
  }

  removeSettingsSection(id: string): void {
    this._customSections = this._customSections.filter((s) => s.id !== id);
    this._buildSettingsMenu();
  }
  async setSubtitleTrack(id: number | null): Promise<void> { return this._video.setSubtitleTrack(id); }
  getDiagnostics(): unknown { return this._video.getDiagnostics(); }
  canPlayType(mime: string): string { return this._video.canPlayType(mime); }

  // ── Typed addEventListener / removeEventListener overloads ────────────
  // Forwarded events from the inner <avbridge-video> preserve their
  // typed CustomEvent detail. Standard HTMLMediaElement events retain
  // their native typing via HTMLElementEventMap.

  override addEventListener<K extends keyof AvbridgeVideoElementEventMap>(
    type: K,
    listener: (this: AvbridgePlayerElement, ev: AvbridgeVideoElementEventMap[K]) => unknown,
    options?: boolean | AddEventListenerOptions,
  ): void;
  override addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: AvbridgePlayerElement, ev: HTMLElementEventMap[K]) => unknown,
    options?: boolean | AddEventListenerOptions,
  ): void;
  override addEventListener(
    type: string,
    listener: EventListenerOrEventListenerObject,
    options?: boolean | AddEventListenerOptions,
  ): void;
  override addEventListener(
    type: string,
    listener: EventListenerOrEventListenerObject,
    options?: boolean | AddEventListenerOptions,
  ): void {
    super.addEventListener(type, listener, options);
  }

  override removeEventListener<K extends keyof AvbridgeVideoElementEventMap>(
    type: K,
    listener: (this: AvbridgePlayerElement, ev: AvbridgeVideoElementEventMap[K]) => unknown,
    options?: boolean | EventListenerOptions,
  ): void;
  override removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: AvbridgePlayerElement, ev: HTMLElementEventMap[K]) => unknown,
    options?: boolean | EventListenerOptions,
  ): void;
  override removeEventListener(
    type: string,
    listener: EventListenerOrEventListenerObject,
    options?: boolean | EventListenerOptions,
  ): void;
  override removeEventListener(
    type: string,
    listener: EventListenerOrEventListenerObject,
    options?: boolean | EventListenerOptions,
  ): void {
    super.removeEventListener(type, listener, options);
  }
}