"use client";

import dynamic from "next/dynamic";
import {
  createContext,
  useCallback,
  useContext,
  useEffect,
  useMemo,
  useReducer,
  useRef,
  useState,
  type ComponentProps,
  type ReactNode,
} from "react";
import type ReactPlayerType from "react-player";
import { fetchTranscript } from "./transcriptCache";
import { fetchSubs } from "./subsCache";
import { fetchDigest, hasDigest } from "./digestCache";
import type { VideoDigest } from "../lib/digests";
import { useUrlParams, writeUrlParams } from "./urlState";
import type { ModalMode } from "./urlState";
import { formatDate, formatDuration } from "../lib/format";
import { cuesToSrt, cuesToText } from "../lib/vtt";
import { transcriptToMarkdown } from "../lib/transcriptToMarkdown";
import type { Platform } from "../lib/transcripts";
import { vodExpiry } from "../lib/vodExpiry";
import { cuesOfTrack, recordTracks, type TrackFields } from "../lib/captionTracks";
import { VodExpiredBadge } from "./badges";
import type { RumblePlayerHandle } from "./RumblePlayer";
import type { OdyseePlayerHandle } from "./OdyseePlayer";
import type { TwitchPlayerHandle } from "./TwitchPlayer";
import type { KickPlayerHandle } from "./KickPlayer";
import type { FilePlayerHandle } from "./FilePlayer";

const ReactPlayer = dynamic(() => import("react-player/youtube"), {
  ssr: false,
});

const RumblePlayer = dynamic(() => import("./RumblePlayer"), {
  ssr: false,
});

const OdyseePlayer = dynamic(() => import("./OdyseePlayer"), {
  ssr: false,
});

const TwitchPlayer = dynamic(() => import("./TwitchPlayer"), {
  ssr: false,
});

// Kick VODs have no iframe embed; they play from a persisted HLS manifest in a
// native <video> driven by the bundled hls.js. Exposes the same seekTo/onReady/
// onProgress API as the YouTube player.
const KickPlayer = dynamic(() => import("./KickPlayer"), {
  ssr: false,
});

// archive.org and BitChute records play their file in a native <video>
// (FilePlayer): neither embed takes a start time we can rely on, the file
// seeks. A file that will not load degrades to a link to the source page.
const FilePlayer = dynamic(() => import("./FilePlayer"), {
  ssr: false,
});

// The platforms whose records play their own file (summary `mediaUrl`).
function playsFile(platform: Platform): boolean {
  return platform === "archiveorg" || platform === "bitchute";
}

type PlayerHandle =
  | Pick<ReactPlayerType, "seekTo">
  | RumblePlayerHandle
  | OdyseePlayerHandle
  | TwitchPlayerHandle
  | KickPlayerHandle
  | FilePlayerHandle;

export type Cue = { start: number; end: number; text: string };

export type TranscriptData = {
  slug: string;
  id: string;
  title: string;
  uploadDate: string;
  date: string;
  duration: string;
  channel: string;
  description?: string;
  isLivestream: boolean;
  ageRestricted: boolean;
  platform: Platform;
  webpageUrl: string;
  hlsUrl?: string;
  mediaUrl?: string;
  // The cues of the track on show: the primary, or the alternate the viewer
  // picked (`track`).
  cues?: Cue[];
  // The record's tracks, primary first (lib/captionTracks.ts) — more than one
  // only when an alternate's words differ from the primary's. Empty when the
  // record names none.
  tracks: string[];
  // The track on show; null when the record names no tracks.
  track: string | null;
};

type Status = "idle" | "loading" | "ready";
type ChatStatus = "idle" | "loading" | "ready" | "missing";
// Parallel to ChatStatus. "missing" is a first-class outcome here rather than
// an edge case: only ~0.1% of the corpus is digested.
export type DigestStatus = "idle" | "loading" | "ready" | "missing";
export type DisplayMode = "modal" | "mini" | "hidden";

type Detail = {
  slug: string;
  id: string;
  title: string;
  uploadDate: string;
  duration: number;
  channel: string;
  description?: string;
  isLivestream: boolean;
  ageRestricted: boolean;
  platform: Platform;
  webpageUrl: string;
  hlsUrl?: string;
  mediaUrl?: string;
  cues?: Cue[];
} & TrackFields;

type ClipState = {
  slug: string | null;
  start: number | null;
  end: number | null;
};

// Per-mount switches for the modal's optional surfaces. The export site derives
// them from its site.json (`transcriptDownloads`); the editor mounts nothing
// and every host that passes nothing keeps everything on.
export type PlayerFeatures = {
  // The two per-video export controls: the Download menu (txt / srt / json)
  // and Copy MD. The yt-dlp clip command is not one of them — it copies a
  // line, serves no file, and shows either way.
  transcriptDownloads: boolean;
};

export const DEFAULT_PLAYER_FEATURES: PlayerFeatures = { transcriptDownloads: true };

type PlayerState = {
  activeSlug: string | null;
  features: PlayerFeatures;
  data: TranscriptData | null;
  status: Status;
  displayMode: DisplayMode;
  modalOpen: boolean;
  modalMode: ModalMode;
  chatCues: Cue[] | null;
  chatStatus: ChatStatus;
  // The modal's transient snap-back banner, shared by every mode that can fail
  // to load and fall back to the transcript (live chat, digest). One channel,
  // because only one such message can be relevant at a time.
  modalNotice: string | null;
  digest: VideoDigest | null;
  digestStatus: DigestStatus;
  // Whether the ACTIVE video has a digest at all, resolved from the channel
  // manifest without fetching a page. Gates the modal's Digest control: with
  // coverage at 0.1% of the corpus an always-present button would be a dead end
  // on almost every video. Same idea as hasDuplicates() gating the Duplicates
  // nav link (export/app/lib/duplicates.ts).
  digestAvailable: boolean;
  clipStart: number | null;
  clipEnd: number | null;
  openTranscript: (
    slug: string,
    start?: number,
    opts?: { mode?: ModalMode; track?: string },
  ) => void;
  // Show another of the record's tracks (null: the primary). A viewer's
  // choice — it changes the URL (`vt`), never the record.
  setViewTrack: (track: string | null) => void;
  setDisplayMode: (mode: DisplayMode) => void;
  setModalMode: (mode: ModalMode) => void;
  closePlayer: () => void;
  markClipStart: () => void;
  markClipEnd: () => void;
  clearClip: () => void;
  copyDownloadCommand: () => Promise<boolean>;
  copyShareUrl: () => Promise<boolean>;
  // Download the currently-shown transcript or live-chat log (per modalMode) as
  // a single file, generated client-side from the loaded cues.
  downloadTranscriptFile: (fmt: "json" | "txt" | "srt") => void;
  // Copy the currently-shown transcript (or live chat) to the clipboard as clean
  // markdown for pasting into an AI chat. Resolves true on success.
  copyTranscriptMarkdown: () => Promise<boolean>;
  openInPreservetube: () => void;
  seekTo: (seconds: number) => void;
};

type PlayerTimeState = {
  currentTime: number;
  playing: boolean;
};

const Ctx = createContext<PlayerState | null>(null);
const TimeCtx = createContext<PlayerTimeState | null>(null);

export function usePlayer(): PlayerState {
  const v = useContext(Ctx);
  if (!v) throw new Error("usePlayer must be inside PlayerProvider");
  return v;
}

// Like usePlayer, but returns null instead of throwing when no PlayerProvider is
// mounted. The hub /ask (AskHub) has no player, so consumers there (e.g. citation
// opening in the chat) fall back to a non-modal behavior when this is null.
export function usePlayerOptional(): PlayerState | null {
  return useContext(Ctx);
}

// Subscribe to the high-frequency time/playing state separately from the
// rest of the player state. Components that only need to know "what time
// is it now" should use this hook so re-renders triggered by 4 Hz progress
// ticks don't cascade through `usePlayer()` consumers like TranscriptSearch.
export function usePlayerTime(): PlayerTimeState {
  const v = useContext(TimeCtx);
  if (!v) throw new Error("usePlayerTime must be inside PlayerProvider");
  return v;
}

function toHMS(seconds: number): string {
  const s = Math.max(0, Math.floor(seconds));
  const h = Math.floor(s / 3600);
  const m = Math.floor((s % 3600) / 60);
  const sec = s % 60;
  return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(sec).padStart(2, "0")}`;
}

// Reducer-managed slice of player state. `currentTime`/`playing` are kept
// outside the reducer because they update ~4×/sec from YouTube progress
// events and live on a separate `PlayerTimeContext` to avoid invalidating
// every `usePlayer()` consumer on each tick.
type Core = {
  detail: Detail | null;
  displayState: { slug: string; mode: DisplayMode } | null;
  clip: ClipState;
  chat: {
    slug: string | null;
    status: ChatStatus;
    cues: Cue[] | null;
    notice: string | null;
  };
  // The derived layer, shaped exactly like `chat` and fetched the same lazy
  // way. `available` is resolved separately (and eagerly, on slug change) from
  // the channel manifest, because the toolbar needs it before anyone asks for
  // the panel.
  digest: {
    slug: string | null;
    status: DigestStatus;
    data: VideoDigest | null;
    available: boolean;
  };
};

const INITIAL_CORE: Core = {
  detail: null,
  displayState: null,
  clip: { slug: null, start: null, end: null },
  chat: { slug: null, status: "idle", cues: null, notice: null },
  digest: { slug: null, status: "idle", data: null, available: false },
};

type CoreAction =
  | { type: "DETAIL_LOADED"; detail: Detail }
  | { type: "DETAIL_FAILED" }
  | { type: "DISPLAY_SET"; slug: string; mode: DisplayMode }
  | { type: "DISPLAY_CLEAR" }
  | { type: "CLIP_MARK_START"; slug: string; time: number }
  | { type: "CLIP_MARK_END"; slug: string; time: number }
  | { type: "CLIP_CLEAR" }
  | { type: "CHAT_RESET" }
  | { type: "CHAT_LOADING"; slug: string }
  | { type: "CHAT_READY"; slug: string; cues: Cue[] }
  | { type: "CHAT_MISSING"; slug: string; notice: string }
  | { type: "MODAL_NOTICE_CLEAR" }
  | { type: "DIGEST_RESET" }
  | { type: "DIGEST_AVAILABLE"; slug: string; available: boolean }
  | { type: "DIGEST_LOADING"; slug: string }
  | { type: "DIGEST_READY"; slug: string; data: VideoDigest }
  | { type: "DIGEST_MISSING"; slug: string; notice: string };

function coreReducer(state: Core, action: CoreAction): Core {
  switch (action.type) {
    case "DETAIL_LOADED":
      return { ...state, detail: action.detail };
    case "DETAIL_FAILED":
      return { ...state, detail: null };
    case "DISPLAY_SET":
      return {
        ...state,
        displayState: { slug: action.slug, mode: action.mode },
      };
    case "DISPLAY_CLEAR":
      return { ...state, displayState: null };
    case "CLIP_MARK_START":
      return {
        ...state,
        clip: {
          slug: action.slug,
          start: action.time,
          end: state.clip.slug === action.slug ? state.clip.end : null,
        },
      };
    case "CLIP_MARK_END":
      return {
        ...state,
        clip: {
          slug: action.slug,
          start: state.clip.slug === action.slug ? state.clip.start : null,
          end: action.time,
        },
      };
    case "CLIP_CLEAR":
      return { ...state, clip: { slug: null, start: null, end: null } };
    case "CHAT_RESET":
      return { ...state, chat: INITIAL_CORE.chat };
    case "CHAT_LOADING":
      return {
        ...state,
        chat: { slug: action.slug, status: "loading", cues: null, notice: null },
      };
    case "CHAT_READY":
      return {
        ...state,
        chat: {
          slug: action.slug,
          status: "ready",
          cues: action.cues,
          notice: state.chat.notice,
        },
      };
    case "CHAT_MISSING":
      return {
        ...state,
        chat: {
          slug: action.slug,
          status: "missing",
          cues: null,
          notice: action.notice,
        },
      };
    case "MODAL_NOTICE_CLEAR":
      return { ...state, chat: { ...state.chat, notice: null } };
    case "DIGEST_RESET":
      return { ...state, digest: INITIAL_CORE.digest };
    case "DIGEST_AVAILABLE":
      return {
        ...state,
        digest: {
          ...state.digest,
          // Availability is per-video and arrives asynchronously; keep whatever
          // slug the fetch/status fields already refer to unless this is the
          // first thing we know about this video.
          slug: state.digest.slug ?? action.slug,
          available: action.available,
        },
      };
    case "DIGEST_LOADING":
      return {
        ...state,
        digest: {
          slug: action.slug,
          status: "loading",
          data: null,
          available: state.digest.available,
        },
      };
    case "DIGEST_READY":
      return {
        ...state,
        digest: {
          slug: action.slug,
          status: "ready",
          data: action.data,
          available: true,
        },
      };
    case "DIGEST_MISSING":
      return {
        ...state,
        chat: { ...state.chat, notice: action.notice },
        digest: {
          slug: action.slug,
          status: "missing",
          data: null,
          available: false,
        },
      };
    default:
      return state;
  }
}

export function PlayerProvider({
  children,
  features = DEFAULT_PLAYER_FEATURES,
}: {
  children: React.ReactNode;
  features?: PlayerFeatures;
}) {
  const { v: urlSlug, t: urlTime, vm: urlVm, vt: urlVt } = useUrlParams();
  const [core, dispatch] = useReducer(coreReducer, INITIAL_CORE);
  const { detail, displayState, clip, chat, digest } = core;
  const [playing, setPlaying] = useState(false);
  const [currentTime, setCurrentTime] = useState(0);
  // Set when the Kick HLS manifest fails to load (usually an expired VOD), so
  // the player swaps to the expiry/link fallback. Reset per active video below.
  const [kickError, setKickError] = useState(false);
  // The same for an archive.org file that will not load: swap to the link.
  const [fileError, setFileError] = useState(false);
  const playerRef = useRef<PlayerHandle | null>(null);
  const pendingSeekRef = useRef<number | null>(null);
  const readyForSlugRef = useRef<string | null>(null);
  // Tracks the slug we've already kicked off a chat fetch for. Decoupled
  // from `chat.slug`/`chat.status` so we don't include them in the
  // chat-fetch effect's deps (which would cause a cleanup-during-fetch race).
  const chatInFlightForRef = useRef<string | null>(null);
  // Mirrors `chat.status` for the same-render synchronous lookup the
  // chat-fetch effect needs to decide "re-toggle on already-missing slug".
  const chatStatusRef = useRef<ChatStatus>("idle");
  chatStatusRef.current = chat.status;
  // The digest slice's equivalents, for exactly the same reason: including
  // `digest.slug`/`digest.status` in the fetch effect's deps makes React run
  // cleanup before the fetch resolves, and the closure's cancelled-flag then
  // drops the result.
  const digestInFlightForRef = useRef<string | null>(null);
  const digestStatusRef = useRef<DigestStatus>("idle");
  digestStatusRef.current = digest.status;

  const activeSlug = urlSlug;
  const modalMode: ModalMode = urlVm;
  const displayMode: DisplayMode =
    displayState?.slug === activeSlug ? displayState.mode : "modal";
  // A post slug opens PostModal instead (a sibling component); keep the
  // transcript modal closed so the two never stack.
  const modalOpen =
    activeSlug !== null && displayMode === "modal" && modalMode !== "post";
  const detailMatches = detail?.slug === activeSlug;
  const data: TranscriptData | null = useMemo(() => {
    if (!detailMatches || !detail) return null;
    return {
      slug: detail.slug,
      id: detail.id,
      title: detail.title,
      uploadDate: detail.uploadDate,
      date: formatDate(detail.uploadDate),
      duration: formatDuration(detail.duration),
      channel: detail.channel,
      description: detail.description,
      isLivestream: detail.isLivestream,
      ageRestricted: detail.ageRestricted,
      platform: detail.platform,
      webpageUrl: detail.webpageUrl,
      hlsUrl: detail.hlsUrl,
      mediaUrl: detail.mediaUrl,
      // A `vt` the record does not hold reads as the primary.
      cues: cuesOfTrack(detail, urlVt) ?? detail.cues,
      tracks: recordTracks(detail),
      track:
        urlVt && cuesOfTrack(detail, urlVt) !== undefined
          ? urlVt
          : (detail.track ?? null),
    };
  }, [detail, detailMatches, urlVt]);
  const status: Status = !activeSlug
    ? "idle"
    : detailMatches
      ? "ready"
      : "loading";

  const clipStart = clip.slug && clip.slug === activeSlug ? clip.start : null;
  const clipEnd = clip.slug && clip.slug === activeSlug ? clip.end : null;

  const openTranscript = useCallback(
    (slug: string, start?: number, opts?: { mode?: ModalMode; track?: string }) => {
      dispatch({ type: "DISPLAY_SET", slug, mode: "modal" });
      const t = typeof start === "number" ? Math.round(start) : null;
      if (slug === activeSlug && t !== null && playerRef.current) {
        playerRef.current.seekTo(t, "seconds");
        setCurrentTime(t);
        setPlaying(true);
      }
      writeUrlParams({
        v: slug,
        t,
        vm: opts?.mode ?? "transcript",
        // A hit from an alternate track opens on that track; anything else
        // opens on the primary.
        vt: opts?.track ?? null,
      });
    },
    [activeSlug],
  );

  const setViewTrack = useCallback((track: string | null) => {
    writeUrlParams({ vt: track });
  }, []);

  const setModalMode = useCallback((mode: ModalMode) => {
    writeUrlParams({ vm: mode });
  }, []);

  const setDisplayMode = useCallback(
    (mode: DisplayMode) => {
      if (!activeSlug) return;
      dispatch({ type: "DISPLAY_SET", slug: activeSlug, mode });
    },
    [activeSlug],
  );

  const closePlayer = useCallback(() => {
    dispatch({ type: "DISPLAY_CLEAR" });
    writeUrlParams({ v: null, t: null, vm: "transcript", vt: null });
  }, []);

  const markClipStart = useCallback(() => {
    if (!activeSlug) return;
    dispatch({ type: "CLIP_MARK_START", slug: activeSlug, time: currentTime });
  }, [activeSlug, currentTime]);

  const markClipEnd = useCallback(() => {
    if (!activeSlug) return;
    dispatch({ type: "CLIP_MARK_END", slug: activeSlug, time: currentTime });
  }, [activeSlug, currentTime]);

  const clearClip = useCallback(() => {
    dispatch({ type: "CLIP_CLEAR" });
  }, []);

  const copyDownloadCommand = useCallback(async (): Promise<boolean> => {
    if (!data) return false;
    const url = data.webpageUrl;
    const sections =
      clipStart !== null && clipEnd !== null
        ? `--download-sections "*${toHMS(clipStart)}-${toHMS(clipEnd)}" `
        : "";
    const cmd = `yt-dlp ${sections}"${url}"`;
    try {
      await navigator.clipboard.writeText(cmd);
      return true;
    } catch {
      return false;
    }
  }, [data, clipStart, clipEnd]);

  const copyShareUrl = useCallback(async (): Promise<boolean> => {
    if (!data) return false;
    const t =
      data.platform === "youtube" ||
      data.platform === "kick" ||
      (playsFile(data.platform) && data.mediaUrl)
        ? currentTime
        : (urlTime ?? 0);
    const secs = Math.max(0, Math.floor(t));
    const params = new URLSearchParams();
    params.set("v", data.slug);
    if (secs > 0) params.set("t", String(secs));
    // Carry the current panel so a shared link reopens what the sharer was
    // looking at. "transcript" is the default and stays absent from the URL.
    if (modalMode !== "transcript") params.set("vm", modalMode);
    // And the track, when it is not the primary.
    if (data.track && data.tracks.length > 1 && data.track !== data.tracks[0]) {
      params.set("vt", data.track);
    }
    const url = `${window.location.origin}${window.location.pathname}?${params.toString()}`;
    try {
      await navigator.clipboard.writeText(url);
      return true;
    } catch {
      return false;
    }
  }, [data, currentTime, urlTime, modalMode]);

  const openInPreservetube = useCallback(() => {
    if (!data || data.platform !== "youtube") return;
    window.open(
      `https://preservetube.com/watch?v=${encodeURIComponent(data.id)}`,
      "_blank",
      "noopener,noreferrer",
    );
  }, [data]);

  // Save the currently-shown cues (transcript or live chat, per modalMode) as a
  // single file. Built entirely from cues already loaded in the browser — no
  // server round-trip and no dependency on the bulk archive zips.
  const downloadTranscriptFile = useCallback(
    (fmt: "json" | "txt" | "srt") => {
      const isChat = modalMode === "chat";
      const cues = isChat
        ? chat.slug === activeSlug
          ? chat.cues
          : null
        : (data?.cues ?? null);
      if (!data || !cues || cues.length === 0) return;

      let body: string;
      let mime: string;
      if (fmt === "json") {
        body = JSON.stringify(cues, null, 2);
        mime = "application/json";
      } else if (fmt === "srt") {
        body = cuesToSrt(cues);
        mime = "application/x-subrip";
      } else {
        body = cuesToText(cues);
        mime = "text/plain";
      }

      const kind = isChat ? "live-chat" : "transcript";
      const base =
        (data.slug || data.title || kind)
          .replace(/[^a-z0-9]+/gi, "-")
          .replace(/^-+|-+$/g, "")
          .toLowerCase() || kind;
      const filename = `${base}.${kind}.${fmt}`;

      const blob = new Blob([body], { type: `${mime};charset=utf-8` });
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = filename;
      document.body.appendChild(a);
      a.click();
      a.remove();
      URL.revokeObjectURL(url);
    },
    [data, chat, activeSlug, modalMode],
  );

  // Copy the currently-shown cues as markdown (metadata header + timestamped
  // body) for pasting into any AI chat. Uses the shared transcriptToMarkdown so
  // the format matches the MCP server and the /ask chat.
  const copyTranscriptMarkdown = useCallback(async (): Promise<boolean> => {
    const isChat = modalMode === "chat";
    const cues = isChat
      ? chat.slug === activeSlug
        ? chat.cues
        : null
      : (data?.cues ?? null);
    if (!data || !cues || cues.length === 0) return false;
    const md = transcriptToMarkdown(
      {
        id: data.id,
        title: isChat ? `${data.title} — live chat` : data.title,
        channel: data.channel,
        uploadDate: data.uploadDate,
        webpageUrl: data.webpageUrl,
        description: isChat ? undefined : data.description,
        cues,
      },
      { timestamps: true, includeDescription: !isChat },
    );
    try {
      await navigator.clipboard.writeText(md);
      return true;
    } catch {
      return false;
    }
  }, [data, chat, activeSlug, modalMode]);

  const seekTo = useCallback((seconds: number) => {
    if (playerRef.current) {
      playerRef.current.seekTo(seconds, "seconds");
      setPlaying(true);
    } else {
      pendingSeekRef.current = seconds;
    }
    setCurrentTime(seconds);
  }, []);

  // Active-video change: reset chat state, kick off the transcript fetch.
  // The chat fetch (if needed) runs in a separate effect keyed on
  // `modalMode` so we don't fetch chat for the common transcript-only case.
  useEffect(() => {
    dispatch({ type: "CHAT_RESET" });
    chatInFlightForRef.current = null;
    dispatch({ type: "DIGEST_RESET" });
    digestInFlightForRef.current = null;
    setKickError(false);
    setFileError(false);
    if (!urlSlug) return;
    // Posts are not transcripts — never run the video fetch for one.
    // A post slug always arrives together with a slug change, so this closure's
    // urlVm is fresh without adding it to the deps — and it MUST stay out of
    // them, or a plain transcript<->chat mode toggle would re-run this effect
    // and clobber the chat-missing snap-back notice.
    if (urlVm === "post") return;
    readyForSlugRef.current = null;
    pendingSeekRef.current = urlTime ?? 0;
    let cancelled = false;
    fetchTranscript(urlSlug)
      .then((full) => {
        if (cancelled) return;
        dispatch({
          type: "DETAIL_LOADED",
          detail: {
            slug: urlSlug,
            id: full.id,
            title: full.title,
            uploadDate: full.uploadDate,
            duration: full.duration,
            channel: full.channel,
            description: full.description,
            isLivestream: full.isLivestream,
            ageRestricted: full.ageRestricted,
            platform: full.platform,
            webpageUrl: full.webpageUrl,
            hlsUrl: full.hlsUrl,
            mediaUrl: full.mediaUrl,
            cues: full.cues,
            ...(full.altTracks?.length
              ? { track: full.track, altTracks: full.altTracks }
              : {}),
          },
        });
      })
      .catch(() => {
        if (cancelled) return;
        dispatch({ type: "DETAIL_FAILED" });
      });
    return () => {
      cancelled = true;
    };
    // urlTime intentionally omitted — t changes shouldn't refetch
    // eslint-disable-next-line react-hooks/exhaustive-deps
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [urlSlug]);

  // Lazy-fetch live chat only when the modal enters chat mode for the
  // current video. Snaps back to transcript mode on "missing" or error so
  // users never get stuck on an empty chat view.
  //
  // Why refs over reducer state in the deps: including `chat.slug`/`chat.status`
  // in the dep array causes React to run cleanup before the fetch resolves,
  // and the cancelled-flag in the closure causes the result to be dropped.
  // chatInFlightForRef tracks the slug we've already initiated a fetch for
  // (or detected missing for); chatStatusRef gives a same-render mirror of
  // the reducer's chat.status.
  useEffect(() => {
    if (!urlSlug) return;
    if (modalMode !== "chat") return;
    // Re-toggling chat on a video already known to lack live chat: snap back
    // immediately without refetching.
    if (
      chatInFlightForRef.current === urlSlug &&
      chatStatusRef.current === "missing"
    ) {
      dispatch({
        type: "CHAT_MISSING",
        slug: urlSlug,
        notice: "Live chat not available for this video — showing transcript.",
      });
      writeUrlParams({ vm: "transcript" });
      return;
    }
    if (chatInFlightForRef.current === urlSlug) return;
    chatInFlightForRef.current = urlSlug;
    dispatch({ type: "CHAT_LOADING", slug: urlSlug });
    let cancelled = false;
    fetchSubs(urlSlug)
      .then((subs) => {
        if (cancelled) return;
        const cues = subs.tracks?.live_chat;
        if (cues && cues.length > 0) {
          dispatch({ type: "CHAT_READY", slug: urlSlug, cues });
        } else {
          dispatch({
            type: "CHAT_MISSING",
            slug: urlSlug,
            notice: "Live chat not available for this video — showing transcript.",
          });
          writeUrlParams({ vm: "transcript" });
        }
      })
      .catch(() => {
        if (cancelled) return;
        dispatch({
          type: "CHAT_MISSING",
          slug: urlSlug,
          notice: "Couldn't load live chat — showing transcript.",
        });
        writeUrlParams({ vm: "transcript" });
      });
    return () => {
      cancelled = true;
    };
  }, [urlSlug, modalMode]);

  // Does this video have a digest? Resolved eagerly on every slug change (one
  // small, cached manifest request per channel) because the modal's toolbar has
  // to decide whether to render the Digest control before anyone clicks it.
  // Never fetches a page — see digestCache.hasDigest.
  useEffect(() => {
    if (!urlSlug) return;
    if (urlVm === "post") return;
    let cancelled = false;
    void hasDigest(urlSlug).then((available) => {
      if (cancelled) return;
      dispatch({ type: "DIGEST_AVAILABLE", slug: urlSlug, available });
    });
    return () => {
      cancelled = true;
    };
    // urlVm intentionally omitted for the same reason as the transcript fetch
    // above: a plain mode toggle must not re-run this.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [urlSlug]);

  // Lazy-fetch the digest only when the modal enters digest mode for the
  // current video, and snap back to the transcript on missing/error so a reader
  // is never stranded on an empty panel. Structurally identical to the chat
  // effect above, including why the two refs exist instead of reducer state in
  // the dep array (cleanup would run before the fetch resolves and the result
  // would be dropped).
  useEffect(() => {
    if (!urlSlug) return;
    if (modalMode !== "digest") return;
    if (
      digestInFlightForRef.current === urlSlug &&
      digestStatusRef.current === "missing"
    ) {
      dispatch({
        type: "DIGEST_MISSING",
        slug: urlSlug,
        notice: "No AI digest for this video — showing transcript.",
      });
      writeUrlParams({ vm: "transcript" });
      return;
    }
    if (digestInFlightForRef.current === urlSlug) return;
    digestInFlightForRef.current = urlSlug;
    dispatch({ type: "DIGEST_LOADING", slug: urlSlug });
    let cancelled = false;
    fetchDigest(urlSlug)
      .then((found) => {
        if (cancelled) return;
        if (found && (found.chapters.length > 0 || found.tags.length > 0)) {
          dispatch({ type: "DIGEST_READY", slug: urlSlug, data: found });
        } else {
          dispatch({
            type: "DIGEST_MISSING",
            slug: urlSlug,
            notice: "No AI digest for this video — showing transcript.",
          });
          writeUrlParams({ vm: "transcript" });
        }
      })
      .catch(() => {
        if (cancelled) return;
        dispatch({
          type: "DIGEST_MISSING",
          slug: urlSlug,
          notice: "Couldn't load the AI digest — showing transcript.",
        });
        writeUrlParams({ vm: "transcript" });
      });
    return () => {
      cancelled = true;
    };
  }, [urlSlug, modalMode]);

  // Auto-clear the snap-back notice after a brief window. Replaces the
  // hand-managed setTimeout/clearTimeout ref dance — the effect's cleanup is
  // the cancellation.
  useEffect(() => {
    if (!chat.notice) return;
    const id = window.setTimeout(() => {
      dispatch({ type: "MODAL_NOTICE_CLEAR" });
    }, 4000);
    return () => {
      window.clearTimeout(id);
    };
  }, [chat.notice]);

  useEffect(() => {
    if (urlTime === null) return;
    if (readyForSlugRef.current !== urlSlug) return;
    playerRef.current?.seekTo(urlTime, "seconds");
    setCurrentTime(urlTime);
  }, [urlSlug, urlTime]);

  // Rumble / Odysee / Twitch have no onReady or progress events; seed
  // currentTime from the URL so clip-mark buttons and active-cue highlighting
  // have a baseline, and mark the slug ready so later ?t= changes can seek via
  // the imperative handle.
  useEffect(() => {
    if (
      detail?.platform === "rumble" ||
      detail?.platform === "odysee" ||
      detail?.platform === "twitch"
    ) {
      readyForSlugRef.current = detail.slug;
      pendingSeekRef.current = null;
      setCurrentTime(urlTime ?? 0);
    }
    // urlTime intentionally omitted — the urlTime effect above handles later changes.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [detail]);

  useEffect(() => {
    if (!modalOpen) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setDisplayMode("mini");
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [modalOpen, setDisplayMode]);

  const handleReady = () => {
    if (
      readyForSlugRef.current !== activeSlug &&
      pendingSeekRef.current !== null &&
      playerRef.current
    ) {
      playerRef.current.seekTo(pendingSeekRef.current, "seconds");
      setPlaying(true);
      pendingSeekRef.current = null;
      readyForSlugRef.current = activeSlug;
    }
  };

  // Keyed on the flag, not the object: a mount site passing an inline
  // `features={{…}}` must not rebuild the context value on every render.
  const transcriptDownloads = features.transcriptDownloads;
  const stableFeatures: PlayerFeatures = useMemo(
    () => ({ transcriptDownloads }),
    [transcriptDownloads],
  );

  const value: PlayerState = useMemo(
    () => ({
      activeSlug,
      features: stableFeatures,
      data,
      status,
      displayMode,
      modalOpen,
      modalMode,
      chatCues: chat.slug === activeSlug ? chat.cues : null,
      chatStatus: chat.slug === activeSlug ? chat.status : "idle",
      modalNotice: chat.notice,
      digest: digest.slug === activeSlug ? digest.data : null,
      digestStatus: digest.slug === activeSlug ? digest.status : "idle",
      digestAvailable: digest.slug === activeSlug && digest.available,
      clipStart,
      clipEnd,
      openTranscript,
      setViewTrack,
      setDisplayMode,
      setModalMode,
      closePlayer,
      markClipStart,
      markClipEnd,
      clearClip,
      copyDownloadCommand,
      copyShareUrl,
      downloadTranscriptFile,
      copyTranscriptMarkdown,
      openInPreservetube,
      seekTo,
    }),
    [
      activeSlug,
      stableFeatures,
      data,
      status,
      displayMode,
      modalOpen,
      modalMode,
      chat,
      digest,
      clipStart,
      clipEnd,
      openTranscript,
      setViewTrack,
      setDisplayMode,
      setModalMode,
      closePlayer,
      markClipStart,
      markClipEnd,
      clearClip,
      copyDownloadCommand,
      copyShareUrl,
      downloadTranscriptFile,
      copyTranscriptMarkdown,
      openInPreservetube,
      seekTo,
    ],
  );
  const timeValue: PlayerTimeState = useMemo(
    () => ({ currentTime, playing }),
    [currentTime, playing],
  );

  const showPlayer = activeSlug !== null && data !== null;

  let containerClass = "";
  if (displayMode === "modal") {
    // Width and top edge come from --player-w/--player-top (globals.css), the
    // same two variables TranscriptModal uses to reserve this slot. Below sm
    // that is a full-bleed 100vw video tucked under the notch; from sm it is
    // the centred min(92vw,960px) card it has always been.
    containerClass =
      "fixed left-1/2 -translate-x-1/2 top-(--player-top) w-(--player-w) aspect-video z-[60] rounded-lg max-sm:rounded-none overflow-hidden bg-black shadow-2xl";
  } else if (displayMode === "mini") {
    // Narrower on a phone (a 288px mini over a 390px viewport buries the page)
    // and lifted clear of the home indicator.
    containerClass =
      "fixed bottom-[calc(1rem+env(safe-area-inset-bottom,0px))] right-4 w-44 sm:w-96 aspect-video z-[60] rounded-lg overflow-hidden bg-black shadow-2xl ring-1 ring-black/40";
  } else {
    // hidden — keep iframe rendered with size so YT keeps playing,
    // but pull it offscreen and remove from interaction.
    containerClass =
      "fixed -left-[10000px] -top-[10000px] w-80 aspect-video pointer-events-none";
  }

  return (
    <Ctx.Provider value={value}>
      <TimeCtx.Provider value={timeValue}>
      {children}

      {showPlayer && (
        <div className={containerClass} aria-hidden={displayMode === "hidden"}>
          {data.platform === "rumble" ? (
            <RumblePlayer
              key={data.id}
              ref={(p: RumblePlayerHandle | null) => {
                playerRef.current = p;
              }}
              videoId={data.id}
              startSeconds={urlTime ?? 0}
            />
          ) : data.platform === "odysee" ? (
            <OdyseePlayer
              key={data.id}
              ref={(p: OdyseePlayerHandle | null) => {
                playerRef.current = p;
              }}
              videoId={data.id}
              startSeconds={urlTime ?? 0}
            />
          ) : data.platform === "twitch" ? (
            <TwitchPlayer
              key={data.id}
              ref={(p: TwitchPlayerHandle | null) => {
                playerRef.current = p;
              }}
              videoId={data.id}
              startSeconds={urlTime ?? 0}
            />
          ) : data.platform === "kick" && data.hlsUrl && !kickError ? (
            // Kick VODs have no iframe embed — play the persisted HLS manifest
            // in a native <video> via hls.js. Same seekTo/onReady/onProgress
            // contract as the YouTube player. On a fatal load error (usually an
            // expired VOD) fall through to the notice.
            <KickPlayer
              key={data.id}
              ref={(p: KickPlayerHandle | null) => {
                playerRef.current = p;
              }}
              url={data.hlsUrl}
              playing={playing}
              onReady={handleReady}
              onPlay={() => setPlaying(true)}
              onPause={() => setPlaying(false)}
              onProgress={(s: { playedSeconds: number }) =>
                setCurrentTime(s.playedSeconds)
              }
              onError={() => setKickError(true)}
            />
          ) : playsFile(data.platform) && data.mediaUrl && !fileError ? (
            <FilePlayer
              key={data.id}
              ref={(p: FilePlayerHandle | null) => {
                playerRef.current = p;
              }}
              url={data.mediaUrl}
              playing={playing}
              onReady={handleReady}
              onPlay={() => setPlaying(true)}
              onPause={() => setPlaying(false)}
              onProgress={(s: { playedSeconds: number }) =>
                setCurrentTime(s.playedSeconds)
              }
              onError={() => setFileError(true)}
            />
          ) : data.platform === "kick" ? (
            // Kick VOD with no playable manifest (expired or pre-feature
            // archive): show the expiry notice + a link to the source.
            <KickUnavailable
              uploadDate={data.uploadDate}
              webpageUrl={data.webpageUrl}
            />
          ) : data.platform === "youtube" ? (
            <ReactPlayer
              ref={(p: ReactPlayerType | null) => {
                playerRef.current = p;
              }}
              url={`https://www.youtube.com/watch?v=${data.id}`}
              width="100%"
              height="100%"
              playing={playing}
              controls
              onReady={handleReady}
              onPlay={() => setPlaying(true)}
              onPause={() => setPlaying(false)}
              onProgress={(s: { playedSeconds: number }) =>
                setCurrentTime(s.playedSeconds)
              }
            />
          ) : (
            // Unknown/unsupported platform: degrade to a link rather than
            // silently embedding the wrong player.
            <div className="flex h-full w-full items-center justify-center p-4 text-center">
              <a
                href={data.webpageUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="text-sm text-white underline hover:text-zinc-200"
              >
                Open on source site
              </a>
            </div>
          )}
          {displayMode === "mini" && (
            <button
              type="button"
              aria-label="Reopen transcript"
              onClick={() => setDisplayMode("modal")}
              className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/80 to-transparent text-white text-xs px-3 py-1.5 text-left hover:from-black/95"
            >
              <span className="font-medium line-clamp-1">{data.title}</span>
              <span className="opacity-70">click to reopen</span>
            </button>
          )}
        </div>
      )}

      {showPlayer && displayMode === "hidden" && (
        <HiddenControls
          title={data.title}
          onShow={() => setDisplayMode("modal")}
          onMini={() => setDisplayMode("mini")}
          onClose={closePlayer}
        />
      )}
      </TimeCtx.Provider>
    </Ctx.Provider>
  );
}

// Fallback shown when a Kick VOD has no playable HLS manifest — an expired VOD
// (Kick keeps VODs ~30 days) or a pre-feature archive. Surfaces the expiry
// badge/notice when the age warrants it, plus a link to the source page.
function KickUnavailable({
  uploadDate,
  webpageUrl,
}: {
  uploadDate: string;
  webpageUrl: string;
}) {
  const expiry = vodExpiry("kick", uploadDate);
  return (
    <div className="flex h-full w-full flex-col items-center justify-center gap-3 p-4 text-center">
      {expiry?.likelyExpired && <VodExpiredBadge tooltip={expiry.tooltip} />}
      <p className="max-w-sm text-sm text-zinc-200">
        {expiry?.likelyExpired
          ? "This Kick VOD has most likely been deleted (Kick keeps VODs about 30 days), so it can't be played here."
          : "This Kick VOD couldn't be loaded for playback."}
      </p>
      <a
        href={webpageUrl}
        target="_blank"
        rel="noopener noreferrer"
        className="text-sm text-white underline hover:text-zinc-200"
      >
        Open on kick.com
      </a>
    </div>
  );
}

function HiddenControls({
  title,
  onShow,
  onMini,
  onClose,
}: {
  title: string;
  onShow: () => void;
  onMini: () => void;
  onClose: () => void;
}) {
  return (
    <div className="fixed bottom-[calc(1rem+env(safe-area-inset-bottom,0px))] right-4 z-[60] flex items-center gap-2 rounded-full bg-zinc-900/95 text-white shadow-2xl ring-1 ring-white/10 px-3 py-2 max-w-[min(90vw,28rem)] max-sm:inset-x-3 max-sm:right-auto max-sm:max-w-none">
      <span className="text-xs opacity-70 shrink-0">♪</span>
      <span className="text-xs font-medium truncate flex-1 min-w-0">
        {title}
      </span>
      <ControlButton title="Show player" onClick={onShow} char="▢" />
      <ControlButton title="Collapse to mini-player" onClick={onMini} char="↘" />
      <ControlButton title="Close player" onClick={onClose} char="✕" />
    </div>
  );
}

// One control in the player/modal chrome.
//
// `title` is BOTH the tooltip and the accessible name (`aria-label`), and every
// one of those strings is an e2e selector — so a control may gain an icon and a
// visible label, but its `title` never changes.
//
// `icon` + `label` are the modal strip's shape: a lucide glyph with a short word
// beside it, because a tooltip is invisible on touch and 13 unlabelled emoji are
// not a control bar. `char` stays for the places that are genuinely too small
// for a label (the hidden-player pill).
//
// Extra props are spread so the button can be a Radix `asChild` trigger (the
// download-format menu): Slot merges its `aria-expanded`/`data-state`/composed
// `onClick` into these props, and they have to reach the real <button>.
type ControlButtonProps = Omit<
  ComponentProps<"button">,
  "title" | "children"
> & {
  title: string;
  char?: string;
  icon?: ReactNode;
  label?: string;
  /** Extra classes on the visible label — `max-sm:hidden` for the controls that
   *  have to stay narrow on a phone. The button keeps ONE identity either way;
   *  rendering a second, differently-labelled copy per breakpoint would give
   *  every `getByRole("button", { name })` two matches. */
  labelClass?: string;
  highlight?: boolean;
};

function ControlButton({
  title,
  onClick,
  char,
  icon,
  label,
  labelClass,
  disabled,
  highlight,
  className,
  ...rest
}: ControlButtonProps) {
  return (
    <button
      {...rest}
      type="button"
      title={title}
      aria-label={title}
      onClick={onClick}
      disabled={disabled}
      className={`shrink-0 inline-flex items-center justify-center gap-1.5 rounded-md text-sm font-mono transition ${
        label ? "h-10 px-3 sm:h-9 sm:px-2.5" : "w-10 h-10 sm:w-8 sm:h-8"
      } ${
        disabled
          ? "bg-white/5 text-white/30 cursor-not-allowed"
          : highlight
            ? "bg-amber-500/30 hover:bg-amber-500/50 text-white ring-1 ring-amber-400/60"
            : "bg-white/10 hover:bg-white/20 text-white"
      } ${className ?? ""}`}
    >
      {icon ?? char}
      {label && (
        <span
          className={`font-sans text-xs whitespace-nowrap ${labelClass ?? ""}`}
        >
          {label}
        </span>
      )}
    </button>
  );
}

export { ControlButton, toHMS };