"use client";

import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useVirtualizer } from "@tanstack/react-virtual";
import {
  ArrowLeftToLineIcon,
  ArrowRightToLineIcon,
  CheckIcon,
  ClipboardIcon,
  DownloadIcon,
  ExternalLinkIcon,
  LinkIcon,
  MessageSquareIcon,
  MinusIcon,
  PictureInPicture2Icon,
  ScrollTextIcon,
  SparklesIcon,
  TerminalIcon,
  XIcon,
} from "lucide-react";
import {
  ControlButton,
  toHMS,
  usePlayer,
  usePlayerTime,
  type DigestStatus,
} from "./PlayerProvider";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "./ui/dropdown-menu";
import type { VideoDigest } from "../lib/digests";
import { AgeRestrictedBadge, LivestreamBadge } from "./badges";
import { VirtualRow } from "./VirtualRow";
import { formatTimestamp } from "../lib/vtt";
import { formatDate } from "../lib/format";
import { trackLabels } from "../lib/captionTracks";

type DisplayCue = {
  start: number;
  end: number;
  text: string;
  author: string | null;
  body: string;
};

export default function TranscriptModal() {
  const {
    modalOpen,
    activeSlug,
    data,
    status,
    modalMode,
    setModalMode,
    setViewTrack,
    chatCues,
    chatStatus,
    modalNotice,
    digest,
    digestStatus,
    digestAvailable,
    clipStart,
    clipEnd,
    setDisplayMode,
    closePlayer,
    markClipStart,
    markClipEnd,
    clearClip,
    copyDownloadCommand,
    copyShareUrl,
    downloadTranscriptFile,
    copyTranscriptMarkdown,
    openInPreservetube,
    seekTo,
    features,
  } = usePlayer();
  // Off on a site whose site.json sets `transcriptDownloads: false`: the two
  // per-video export controls (the Download menu and Copy MD) are not rendered
  // at all. The yt-dlp command stays: it copies a line to the clipboard and
  // serves no file, so it is not a download. Share stays too.
  const showDownloads = features.transcriptDownloads;
  const { currentTime } = usePlayerTime();
  const scrollRef = useRef<HTMLDivElement | null>(null);
  const [copied, setCopied] = useState(false);
  const copyResetRef = useRef<number | null>(null);
  const [shareCopied, setShareCopied] = useState(false);
  const shareResetRef = useRef<number | null>(null);
  const [mdCopied, setMdCopied] = useState(false);
  const mdResetRef = useRef<number | null>(null);
  // Controlled only so the trigger can render its open highlight; dismissal
  // (outside click, Escape, focus) is the Radix menu's job.
  const [downloadOpen, setDownloadOpen] = useState(false);
  // Tracks whether the next scrollToIndex should animate. Smooth on
  // user-initiated changes (cue click, mode toggle, initial open); instant
  // on natural playhead drift so 4 Hz progress ticks don't keep retriggering
  // a smooth-scroll animation.
  const scrollKindRef = useRef<"smooth" | "auto">("smooth");

  const isChat = modalMode === "chat";
  const isDigest = modalMode === "digest";
  const canDownloadFile = isChat
    ? (chatCues?.length ?? 0) > 0
    : (data?.cues?.length ?? 0) > 0;

  // Pre-compute author/body split once per cue array so the render hot path
  // doesn't redo `indexOf`/`slice` on every progress tick. Memo key is the
  // identity of the underlying cues array.
  const displayCues: DisplayCue[] = useMemo(() => {
    // The digest panel renders chapters, not cues, and is NOT virtualized — so
    // the cue list is empty in that mode and the virtualizer below measures
    // nothing rather than a list that isn't on screen.
    const raw = isDigest ? [] : isChat ? (chatCues ?? []) : (data?.cues ?? []);
    return raw.map((c) => {
      const sepIdx = isChat ? c.text.indexOf(": ") : -1;
      const author = sepIdx > 0 ? c.text.slice(0, sepIdx) : null;
      const body = sepIdx > 0 ? c.text.slice(sepIdx + 2) : c.text;
      return {
        start: c.start,
        end: c.end ?? c.start,
        text: c.text,
        author,
        body,
      };
    });
  }, [isDigest, isChat, chatCues, data?.cues]);

  // Chapters are tens of rows, so they render as a plain list. Their active-row
  // highlight uses the same binary search as the cue list — and reads the clock
  // from usePlayerTime(), which is why that context is split out: a 4 Hz tick
  // must not re-render every usePlayer() consumer.
  const chapters = digest?.chapters ?? [];
  const activeChapter = findActiveIndex(chapters, currentTime);

  const cueStatus: "loading" | "ready" =
    isChat
      ? chatStatus === "loading" || chatStatus === "idle"
        ? "loading"
        : "ready"
      : status === "loading"
        ? "loading"
        : "ready";
  const activeIndex = findActiveIndex(displayCues, currentTime);

  const rowVirtualizer = useVirtualizer({
    count: displayCues.length,
    getScrollElement: () => scrollRef.current,
    estimateSize: () => 36,
    overscan: 12,
  });

  // Active row auto-scroll. Smooth on user-initiated jumps; instant during
  // playback. We let the virtualizer scroll because it handles offsets
  // correctly even when the target row is not yet rendered.
  useEffect(() => {
    if (!modalOpen) return;
    if (activeIndex < 0) return;
    rowVirtualizer.scrollToIndex(activeIndex, {
      align: "center",
      behavior: scrollKindRef.current,
    });
    scrollKindRef.current = "auto";
  }, [activeIndex, modalOpen, modalMode, rowVirtualizer]);

  // Lock the page behind the modal. Radix's RemoveScroll (sheets, and the
  // download menu's modal layer) also writes to <body> — the two never overlap,
  // because nothing that uses RemoveScroll opens *over* this modal. If that ever
  // changes, the restore below would hand back a value RemoveScroll had already
  // replaced.
  useEffect(() => {
    if (modalOpen) {
      const prev = document.body.style.overflow;
      document.body.style.overflow = "hidden";
      return () => {
        document.body.style.overflow = prev;
      };
    }
  }, [modalOpen]);

  useEffect(() => {
    return () => {
      if (copyResetRef.current !== null) window.clearTimeout(copyResetRef.current);
      if (shareResetRef.current !== null) window.clearTimeout(shareResetRef.current);
    };
  }, []);

  // Stable seek callback so memo'd CueRow doesn't invalidate per render.
  const onSeekRow = useCallback(
    (start: number) => {
      scrollKindRef.current = "smooth";
      seekTo(start);
    },
    [seekTo],
  );

  // Three-way selector, expressed as two toggles that each fall back to the
  // transcript. A cycling single button would make "get me back to the
  // transcript" take a variable number of clicks.
  const onToggleChat = useCallback(() => {
    scrollKindRef.current = "smooth";
    setModalMode(isChat ? "transcript" : "chat");
  }, [isChat, setModalMode]);

  const onToggleDigest = useCallback(() => {
    scrollKindRef.current = "smooth";
    setModalMode(isDigest ? "transcript" : "digest");
  }, [isDigest, setModalMode]);

  // Seek from a chapter. ALWAYS on `start` — the parser already snapped it to a
  // real cue boundary — and never by re-parsing `clock`, which is the raw model
  // output kept for auditing and can be wrong.
  const onSeekChapter = useCallback(
    (start: number) => {
      scrollKindRef.current = "smooth";
      seekTo(start);
    },
    [seekTo],
  );

  if (!modalOpen || !activeSlug) return null;

  const canDownload = clipStart !== null && clipEnd !== null && clipEnd > clipStart;
  const onCopy = async () => {
    const ok = await copyDownloadCommand();
    if (!ok) return;
    setCopied(true);
    if (copyResetRef.current !== null) window.clearTimeout(copyResetRef.current);
    copyResetRef.current = window.setTimeout(() => setCopied(false), 1800);
  };
  const onShare = async () => {
    const ok = await copyShareUrl();
    if (!ok) return;
    setShareCopied(true);
    if (shareResetRef.current !== null) window.clearTimeout(shareResetRef.current);
    shareResetRef.current = window.setTimeout(() => setShareCopied(false), 1800);
  };

  const virtualItems = rowVirtualizer.getVirtualItems();
  const totalSize = rowVirtualizer.getTotalSize();

  const iconSize = "size-4";

  // The mode strip: the same two toggles as before (each falls back to the
  // transcript), lifted out of the action bar into their own row so the modes
  // read as a chooser rather than as two more emoji among thirteen. `title` —
  // and so the accessible name — is unchanged and still depends on the mode.
  const modeStrip = (
    <div className="inline-flex w-fit items-center gap-1 rounded-lg bg-zinc-900/80 ring-1 ring-white/10 p-1 pointer-events-auto">
      {/* Only offered where a digest exists. ~0.1% of the corpus is digested,
          so an always-present control would be a dead end on almost every
          video. */}
      {digestAvailable && (
        <ControlButton
          title={isDigest ? "Show transcript" : "Show AI chapters"}
          onClick={onToggleDigest}
          icon={
            isDigest ? (
              <ScrollTextIcon className={iconSize} />
            ) : (
              <SparklesIcon className={iconSize} />
            )
          }
          label={isDigest ? "Transcript" : "AI chapters"}
          char={isDigest ? "\u{1F4DC}" : "\u2726"}
          highlight={isDigest}
        />
      )}
      <ControlButton
        title={isChat ? "Show transcript" : "Show live chat"}
        onClick={onToggleChat}
        icon={
          isChat ? (
            <ScrollTextIcon className={iconSize} />
          ) : (
            <MessageSquareIcon className={iconSize} />
          )
        }
        label={isChat ? "Transcript" : "Live chat"}
        char={isChat ? "\u{1F4DC}" : "\u{1F4AC}"}
        highlight={isChat}
      />
    </div>
  );

  return (
    <div className="fixed inset-0 z-50 flex flex-col">
      <button
        type="button"
        aria-label="Collapse to mini-player"
        onClick={() => setDisplayMode("mini")}
        className="absolute inset-0 bg-black/70 backdrop-blur-sm"
      />
      <div className="relative flex flex-col items-center w-full h-full overflow-hidden pointer-events-none">
        {/* The column that sits UNDER the player. Its top margin and its height
            are derived from the same --player-w/--player-top the player itself
            is positioned with (globals.css), so the two can't drift apart.
            Below sm it takes the full remaining height, which is what makes the
            cue list tall and the action strip land on the bottom edge. */}
        <div
          className="w-(--player-w) pointer-events-auto flex flex-col gap-2 sm:gap-3 max-sm:h-full"
          style={{
            marginTop:
              "calc(var(--player-top) + var(--player-w) * 9 / 16 + 0.75rem)",
            maxHeight:
              "calc(100dvh - var(--player-top) - var(--player-w) * 9 / 16 - 1.5rem)",
          }}
        >
          <div className="text-white min-w-0 px-3 sm:px-0">
            <h2 className="text-lg font-semibold leading-tight line-clamp-2 sm:truncate">
              {data?.title ?? "Loading\u2026"}
            </h2>
            {data && (
              <p className="text-xs text-zinc-300 mt-0.5 flex items-center gap-1.5 flex-wrap">
                <span>
                  {formatDate(data.uploadDate)}
                  {data.channel && ` \u00b7 ${data.channel}`}
                </span>
                {data.isLivestream && <LivestreamBadge />}
                {data.ageRestricted && <AgeRestrictedBadge />}
              </p>
            )}
          </div>

          <div className="px-3 sm:px-0 flex flex-wrap items-center gap-x-3 gap-y-1">
            {modeStrip}
            {/* The record's other English tracks (lib/captionTracks.ts), only
                where one's words differ from the primary's. A viewer's choice:
                it swaps the cues on show and changes nothing else. */}
            {!isChat && !isDigest && data && data.tracks.length > 1 && (
              <TrackSwitcher
                tracks={data.tracks}
                track={data.track ?? data.tracks[0]}
                onChange={(t) => {
                  scrollKindRef.current = "smooth";
                  setViewTrack(t === data.tracks[0] ? null : t);
                }}
              />
            )}
          </div>

          {modalNotice && (
            <p
              role="status"
              className="mx-3 sm:mx-0 text-xs text-amber-200 bg-amber-500/15 ring-1 ring-amber-400/40 rounded px-3 py-1.5"
            >
              {modalNotice}
            </p>
          )}
          <div
            ref={scrollRef}
            data-testid="cue-list"
            className="flex-1 min-h-0 overflow-y-auto overscroll-contain touch-pan-y border border-zinc-700 bg-zinc-900 rounded-none sm:rounded-lg"
          >
            {isDigest ? (
              <DigestPanel
                digest={digest}
                status={digestStatus}
                activeChapter={activeChapter}
                onSeek={onSeekChapter}
              />
            ) : (
              <>
            {cueStatus === "loading" && (
              <p className="text-sm text-zinc-400 p-4">
                {isChat ? "Loading live chat\u2026" : "Loading transcript\u2026"}
              </p>
            )}
            {cueStatus === "ready" && displayCues.length === 0 && (
              <p className="text-sm text-zinc-400 p-4">
                {isChat ? "No live chat for this video." : "No cues available."}
              </p>
            )}
            {cueStatus === "ready" && displayCues.length > 0 && (
              <ol
                className="relative divide-y divide-zinc-800 text-zinc-100"
                style={{ height: totalSize }}
              >
                {virtualItems.map((vi) => {
                  const cue = displayCues[vi.index];
                  const isActive = vi.index === activeIndex;
                  return (
                    <CueRow
                      key={vi.key}
                      cue={cue}
                      isActive={isActive}
                      onSeek={onSeekRow}
                      measureRef={rowVirtualizer.measureElement}
                      virtualIndex={vi.index}
                      offset={vi.start}
                    />
                  );
                })}
              </ol>
            )}
              </>
            )}
          </div>

          {/* Action strip, pinned to the bottom edge. The clip/share group
              scrolls sideways when it doesn't fit; the window group never does,
              so Close is reachable at any width without a horizontal scroll. */}
          <div className="shrink-0 sticky bottom-0 flex items-stretch gap-2 bg-zinc-900/80 ring-1 ring-white/10 rounded-none sm:rounded-lg p-2 pb-[calc(0.5rem+env(safe-area-inset-bottom,0px))] sm:pb-2">
            <div className="flex-1 min-w-0 flex items-center gap-2 overflow-x-auto">
              <ControlButton
                title="Mark clip start at current time"
                onClick={markClipStart}
                icon={<ArrowLeftToLineIcon className={iconSize} />}
                label="Clip in"
                char="["
                highlight={clipStart !== null}
              />
              <ControlButton
                title="Mark clip end at current time"
                onClick={markClipEnd}
                icon={<ArrowRightToLineIcon className={iconSize} />}
                label="Clip out"
                char="]"
                highlight={clipEnd !== null}
              />
              <ClipReadout
                clipStart={clipStart}
                clipEnd={clipEnd}
                onClear={clearClip}
              />
              <ControlButton
                title={
                  canDownload
                    ? copied
                      ? "Copied!"
                      : "Copy yt-dlp download command for this clip"
                    : "Mark both clip start and end first"
                }
                onClick={onCopy}
                icon={
                  copied ? (
                    <CheckIcon className={iconSize} />
                  ) : (
                    <TerminalIcon className={iconSize} />
                  )
                }
                label="yt-dlp"
                char={copied ? "\u2713" : "\u2193"}
                disabled={!canDownload}
              />

              <Divider />

              <ControlButton
                title={
                  !data
                    ? "Loading\u2026"
                    : shareCopied
                      ? "Copied!"
                      : "Copy share link at current time"
                }
                onClick={onShare}
                icon={
                  shareCopied ? (
                    <CheckIcon className={iconSize} />
                  ) : (
                    <LinkIcon className={iconSize} />
                  )
                }
                label="Share"
                char={shareCopied ? "\u2713" : "\u2934"}
                disabled={!data}
              />
              {/* A portalled menu, because the trigger now lives inside a
                  horizontally scrolling strip: an absolutely-positioned panel
                  would be clipped by that scroller. */}
              {showDownloads && (
                <>
                  <DropdownMenu open={downloadOpen} onOpenChange={setDownloadOpen}>
                    <DropdownMenuTrigger asChild>
                      <ControlButton
                        title={
                          canDownloadFile
                            ? `Download this ${isChat ? "live chat" : "transcript"} as a file`
                            : "Nothing to download yet"
                        }
                        icon={<DownloadIcon className={iconSize} />}
                        label="Download"
                        char="\u2913"
                        disabled={!canDownloadFile}
                        highlight={downloadOpen}
                      />
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end" className="z-[70] min-w-0">
                      {(["txt", "srt", "json"] as const).map((fmt) => (
                        <DropdownMenuItem
                          key={fmt}
                          onSelect={() => downloadTranscriptFile(fmt)}
                          className="font-mono text-xs uppercase tracking-wide"
                        >
                          .{fmt}
                        </DropdownMenuItem>
                      ))}
                    </DropdownMenuContent>
                  </DropdownMenu>
                  <ControlButton
                    title={
                      !canDownloadFile
                        ? "Nothing to copy yet"
                        : mdCopied
                          ? "Copied!"
                          : `Copy this ${isChat ? "live chat" : "transcript"} as Markdown (for AI)`
                    }
                    onClick={async () => {
                      const ok = await copyTranscriptMarkdown();
                      if (!ok) return;
                      setMdCopied(true);
                      if (mdResetRef.current) window.clearTimeout(mdResetRef.current);
                      mdResetRef.current = window.setTimeout(() => setMdCopied(false), 1500);
                    }}
                    icon={
                      mdCopied ? (
                        <CheckIcon className={iconSize} />
                      ) : (
                        <ClipboardIcon className={iconSize} />
                      )
                    }
                    label="Copy MD"
                    char={mdCopied ? "\u2713" : "\u{1F4CB}"}
                    disabled={!canDownloadFile}
                  />
                </>
              )}
              {data?.platform === "youtube" && (
                <ControlButton
                  title="Open in Preservetube"
                  onClick={openInPreservetube}
                  icon={<ExternalLinkIcon className={iconSize} />}
                  label="Preservetube"
                  char="\u29c9"
                />
              )}
            </div>

            <Divider />

            {/* Mini / Hide / Close: the labels drop away on a phone so the
                group stays narrow enough to sit beside the scroller — Close is
                then reachable at any width without a sideways scroll. One
                button each; a per-breakpoint duplicate would give every
                `getByRole("button", { name })` two matches. */}
            <div className="shrink-0 flex items-center gap-1 sm:gap-2">
              <ControlButton
                title="Collapse to mini-player"
                onClick={() => setDisplayMode("mini")}
                icon={<PictureInPicture2Icon className={iconSize} />}
                label="Mini"
                labelClass="max-sm:hidden"
                char="\u2198"
              />
              <ControlButton
                title="Hide player (keep audio playing)"
                onClick={() => setDisplayMode("hidden")}
                icon={<MinusIcon className={iconSize} />}
                label="Hide"
                labelClass="max-sm:hidden"
                char="\u2014"
              />
              <ControlButton
                title="Close player"
                onClick={closePlayer}
                icon={<XIcon className={iconSize} />}
                label="Close"
                labelClass="max-sm:hidden"
                char="\u2715"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// A hairline between control groups in the action strip.
function Divider() {
  return <div className="w-px self-stretch shrink-0 bg-white/10" />;
}

// The digest panel: chapters as a plain (non-virtualized) list, the topic tags,
// a provenance line, and — when the digest was borrowed from another video — a
// prominent notice saying so.
//
// Styling deliberately matches this modal's local hard-coded zinc/white palette
// rather than the semantic tokens used elsewhere in the app. This component and
// PlayerProvider are the one part of the codebase still on literal colors
// (bg-zinc-900/80, ring-white/10, active row bg-blue-950/50); migrating them is
// its own change, and half-migrating one panel inside them would just look
// broken.
function DigestPanel({
  digest,
  status,
  activeChapter,
  onSeek,
}: {
  digest: VideoDigest | null;
  status: DigestStatus;
  activeChapter: number;
  onSeek: (start: number) => void;
}) {
  if (status === "loading" || status === "idle") {
    return <p className="text-sm text-zinc-400 p-4">Loading AI digest…</p>;
  }
  if (!digest) {
    return (
      <p className="text-sm text-zinc-400 p-4">
        No AI digest for this video.
      </p>
    );
  }

  const prov = digest.provenance.chapters ?? digest.provenance.tags;
  const borrowed = digest.derivedFrom;

  return (
    <div className="text-zinc-100">
      {borrowed && (
        <div className="m-3 rounded px-3 py-2 text-xs bg-amber-500/15 ring-1 ring-amber-400/40 text-amber-100">
          <p className="font-medium">Borrowed from a duplicate upload</p>
          <p className="mt-1 text-amber-200/90">
            These chapters were generated for{" "}
            <span className="font-mono">{borrowed.slug}</span>, a near-identical
            copy of this video, and copied here. Timings were measured to differ
            by {formatOffset(borrowed.offsetSeconds)}, so they should line up —
            but the titles describe that upload, not this one.
          </p>
        </div>
      )}

      {digest.chapters.length > 0 ? (
        <ol className="divide-y divide-zinc-800">
          {digest.chapters.map((c, i) => (
            <li key={c.id} className={i === activeChapter ? "bg-blue-950/50" : ""}>
              <button
                type="button"
                onClick={() => onSeek(c.start)}
                // Announces the chapter the playhead is currently inside — for
                // a screen reader, and it is also the only DOM-observable proof
                // that a chapter click actually moved the player.
                aria-current={i === activeChapter ? "true" : undefined}
                className="w-full text-left flex gap-3 px-3 py-2 hover:bg-zinc-800"
              >
                <span className="text-xs font-mono text-zinc-400 shrink-0 w-16 pt-0.5">
                  {formatTimestamp(c.start)}
                </span>
                <span className="text-sm min-w-0 flex-1">{c.title}</span>
                {c.decidedBy === "human" && (
                  <span
                    title="Written or corrected by a person"
                    className="text-[10px] uppercase tracking-wide text-emerald-300/80 shrink-0 pt-1"
                  >
                    edited
                  </span>
                )}
              </button>
            </li>
          ))}
        </ol>
      ) : (
        <p className="text-sm text-zinc-400 px-3 py-4">
          No chapters in this digest.
        </p>
      )}

      {digest.tags.length > 0 && (
        <div className="border-t border-zinc-800 px-3 py-3">
          <p className="text-[11px] uppercase tracking-wide text-zinc-500 mb-1.5">
            Topics
          </p>
          <ul className="flex flex-wrap gap-1.5">
            {digest.tags.map((t) => (
              <li
                key={t.id}
                className="rounded bg-white/10 px-2 py-0.5 text-xs text-zinc-200"
              >
                {t.tag}
              </li>
            ))}
          </ul>
        </div>
      )}

      {/* Always say where this came from. A derived layer that doesn't
          announce itself as machine-generated is the one that misleads. */}
      <p className="border-t border-zinc-800 px-3 py-2 text-[11px] leading-relaxed text-zinc-500">
        {prov ? (
          <>
            Chapters and topics generated by{" "}
            <span className="font-mono text-zinc-400">{prov.model}</span>
            {prov.generatedAt ? ` on ${prov.generatedAt.slice(0, 10)}` : ""}
            . AI-generated and not reviewed unless marked{" "}
            <span className="text-emerald-300/80">edited</span>.
          </>
        ) : (
          // No machine provenance at all: this digest is entirely hand-written
          // (an overrides file with no generated counterpart). Claiming
          // "AI-generated" here would be the same dishonesty in reverse.
          "Written by hand."
        )}
      </p>
    </div>
  );
}

// The measured cue-timing offset between a borrowed digest's source video and
// this one. Sharing only happens at near-zero offset, so this is normally well
// under a second — say so precisely rather than rounding it away to "0s".
function formatOffset(seconds: number): string {
  const s = Math.abs(seconds);
  if (s < 1) return `under a second`;
  return `${s.toFixed(1)}s`;
}

const CueRow = memo(function CueRow({
  cue,
  isActive,
  onSeek,
  measureRef,
  virtualIndex,
  offset,
}: {
  cue: DisplayCue;
  isActive: boolean;
  onSeek: (start: number) => void;
  measureRef: (el: Element | null) => void;
  virtualIndex: number;
  offset: number;
}) {
  return (
    <VirtualRow
      as="li"
      measureRef={measureRef}
      index={virtualIndex}
      offset={offset}
      className={isActive ? "bg-blue-950/50" : ""}
    >
      <button
        type="button"
        onClick={() => onSeek(cue.start)}
        className="w-full text-left flex gap-3 px-3 py-2 hover:bg-zinc-800"
      >
        <span className="text-xs font-mono text-zinc-400 shrink-0 w-16 pt-0.5">
          {formatTimestamp(cue.start)}
        </span>
        <span className="text-sm min-w-0">
          {cue.author && (
            <span className="text-zinc-400 mr-1.5">{cue.author}:</span>
          )}
          <span>{cue.body}</span>
        </span>
      </button>
    </VirtualRow>
  );
});

function ClipReadout({
  clipStart,
  clipEnd,
  onClear,
}: {
  clipStart: number | null;
  clipEnd: number | null;
  onClear: () => void;
}) {
  if (clipStart === null && clipEnd === null) {
    return (
      <span className="shrink-0 whitespace-nowrap text-xs text-zinc-500 font-mono px-1">
        no clip set
      </span>
    );
  }
  return (
    <span className="shrink-0 whitespace-nowrap text-xs font-mono text-zinc-200 px-1 inline-flex items-center gap-1">
      <span>{clipStart !== null ? toHMS(clipStart) : "--:--:--"}</span>
      <span className="opacity-60">→</span>
      <span>{clipEnd !== null ? toHMS(clipEnd) : "--:--:--"}</span>
      <button
        type="button"
        title="Clear clip"
        onClick={onClear}
        className="ml-1 text-zinc-400 hover:text-white"
      >
        ×
      </button>
    </span>
  );
}

function findActiveIndex(
  cues: { start: number }[],
  t: number,
): number {
  if (!cues.length) return -1;
  let lo = 0;
  let hi = cues.length - 1;
  let found = -1;
  while (lo <= hi) {
    const mid = (lo + hi) >> 1;
    if (cues[mid].start <= t) {
      found = mid;
      lo = mid + 1;
    } else {
      hi = mid - 1;
    }
  }
  return found;
}

// "Track: original audio captions ▾" — small and quiet, beside the mode strip.
// The first track is the primary (the default); its label says so in the menu.
function TrackSwitcher({
  tracks,
  track,
  onChange,
}: {
  tracks: string[];
  track: string;
  onChange: (track: string) => void;
}) {
  return (
    <label className="inline-flex items-center gap-1.5 text-xs text-zinc-400 pointer-events-auto">
      <span>Track:</span>
      <select
        data-testid="track-switcher"
        value={track}
        onChange={(e) => onChange(e.target.value)}
        className="bg-transparent text-zinc-200 rounded border border-zinc-700 px-1 py-0.5 text-xs focus:outline-none focus:ring-1 focus:ring-zinc-500"
      >
        {trackLabels(tracks).map((label, i) => (
          <option key={tracks[i]} value={tracks[i]} className="bg-zinc-900">
            {label}
            {i === 0 ? " (default)" : ""}
          </option>
        ))}
      </select>
    </label>
  );
}