"use client";

import Link from "next/link";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";

import { Button } from "@/components/ui";
import { useI18n } from "@/lib/i18n";
import { createPodcastAudio, type PodcastAudio } from "@/lib/podcast-audio";
import {
  defaultTtsProvider,
  readNaturalPref,
  ttsProviderLabel,
  voiceForProvider,
  writeNaturalPref,
} from "@/lib/podcast-natural";
import { TTS_PROFILES } from "@/lib/providers";
import { useProviders } from "@/lib/providers-client";
import {
  createPodcastSpeech,
  tokenizeSections,
  type PodcastVoice,
} from "@/lib/podcast-speech";
import { savePodcastProgress } from "@/lib/podcasts";
import {
  bestVoice,
  getStoredVoice,
  isAppleMobile,
  onlyRoboticVoices,
  platformVoices,
  setStoredVoice,
  voicesFor,
} from "@/lib/podcast-voices";
import { speechAvailable, speechLocale, stopSpeaking } from "@/lib/speech";
import type { Podcast } from "@/lib/schemas";
import { useAppReducedMotion as useReducedMotion } from "@/lib/motion-pref";
import { openSettings } from "@/lib/ui-events";
import {
  CheckCircleIcon,
  ChevronLeftIcon,
  ClockIcon,
  PauseIcon,
  PlayIcon,
  RefreshIcon,
  SpeakerIcon,
} from "@/components/icons";
import { cn } from "@/lib/utils";

/** Playback speeds, cycled by one button. */
const RATES = [1, 1.15, 1.3, 0.9] as const;

/**
 * Reads an episode aloud and highlights the word being spoken — the transcript
 * is the player, Spotify-lyrics style: past words stay dark, upcoming words
 * are dimmed, the word under the voice rides a rounded highlight that keeps
 * itself centred as the episode plays.
 *
 * The heavy lifting (boundary events, the timer fallback, seeking by
 * re-speaking) lives in lib/podcast-speech; this component owns the layout,
 * the controls and the saved position.
 */
export function PodcastPlayer({ episode }: { episode: Podcast }) {
  const { t, plural, locale } = useI18n();
  const reduceMotion = useReducedMotion();
  const [rate, setRate] = useState<number>(1);
  const [playing, setPlaying] = useState(false);
  const [position, setPosition] = useState<PodcastVoice | null>(null);
  const [unsupported, setUnsupported] = useState(false);
  /** The system voice never started (no engine installed) — Firefox/Linux,
   *  a bare Windows install: the banner explains and offers the way out. */
  const [voiceSilent, setVoiceSilent] = useState(false);
  const [voiceOpen, setVoiceOpen] = useState(false);
  /** "system" = the platform's voices; "natural" = the provider's TTS. */
  const [voiceSource, setVoiceSource] = useState<"system" | "natural">(() => readNaturalPref().source);
  const [naturalProvider, setNaturalProvider] = useState<string>(() => readNaturalPref().provider);
  const [naturalVoiceId, setNaturalVoiceId] = useState<string | null>(() => readNaturalPref().voice);
  const [naturalError, setNaturalError] = useState<string | null>(null);
  const [naturalBusy, setNaturalBusy] = useState(false);
  const providers = useProviders();

  /* Either engine drives the same onWord/onEnd events; the transport below
     routes to whichever one the listeners picked. */
  const natural = useMemo<PodcastAudio | null>(() => {
    if (voiceSource !== "natural" || !naturalProvider) return null;
    return createPodcastAudio({
      sections: episode.sections,
      providerId: naturalProvider,
      voice: voiceForProvider(naturalProvider, naturalVoiceId),
      model: readNaturalPref().model ?? undefined,
      rate,
      onWord: (next) => {
        latest.current = next;
        setPosition(next);
      },
      onPlay: () => {
        setPlaying(true);
        setNaturalError(null);
        window.dispatchEvent(new CustomEvent("freezmo:foreground-audio", { detail: "podcast" }));
      },
      onPause: () => setPlaying(false),
      onEnd: () => {
        setPlaying(false);
        setPosition(null);
        latest.current = null;
        savePodcastProgress(episode.id, { section: 0, word: 0 });
      },
      onError: (message) => {
        setPlaying(false);
        setNaturalError(message);
      },
      onBusy: setNaturalBusy,
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps -- speed is applied live (setRate below), so it must not rebuild the engine
  }, [voiceSource, naturalProvider, naturalVoiceId, episode.id, episode.sections]);

  /* Speed changes apply to the element, not to the engine's cache. */
  useEffect(() => {
    natural?.setRate(rate);
  }, [natural, rate]);


  /* The engine owns an <audio> element: release it when the engine is
     replaced (a different voice) or the player closes. */
  useEffect(() => {
    if (!natural) return;
    return () => {
      try {
        natural.dispose();
      } catch {
        /* already gone */
      }
    };
  }, [natural]);

  useEffect(() => {
    return () => naturalRef.current?.dispose();
  }, []);

  /* The default pick the first time someone opens the natural panel. */
  useEffect(() => {
    if (naturalProvider) return;
    const keys = providers.keys;
    const fallback = defaultTtsProvider(keys, providers.generation?.provider);
    if (fallback) setNaturalProvider(fallback);
    // eslint-disable-next-line react-hooks/exhaustive-deps -- once per mount
  }, [providers.keys]);
  const transcript = useRef<HTMLDivElement>(null);
  const activeWord = useRef<HTMLElement | null>(null);
  /** Line-following state: the last followed line and a manual-scroll pause. */
  const lastLineTop = useRef<number | null>(null);
  const followPausedUntil = useRef(0);
  const voiceLocale = useMemo(
    () => speechLocale(episode.language, locale),
    [episode.language, locale],
  );
  const [voiceList, setVoiceList] = useState<SpeechSynthesisVoice[]>([]);
  const [voiceURI, setVoiceURI] = useState<string | null>(() =>
    getStoredVoice(voiceLocale),
  );

  /* The voice catalogue arrives asynchronously (and changes when the OS
     installs one), so subscribe rather than read it once. */
  useEffect(() => {
    const read = () => setVoiceList(platformVoices());
    read();
    try {
      window.speechSynthesis?.addEventListener("voiceschanged", read);
    } catch {
      /* no voices API */
    }
    return () => {
      try {
        window.speechSynthesis?.removeEventListener("voiceschanged", read);
      } catch {
        /* already gone */
      }
    };
  }, []);

  const availableVoices = useMemo(
    () => voicesFor(voiceLocale, voiceList),
    [voiceLocale, voiceList],
  );
  const voice = useMemo(() => {
    if (voiceURI) {
      const match = availableVoices.find(
        (entry) => entry.voiceURI === voiceURI,
      );
      if (match) return match;
    }
    return bestVoice(voiceLocale, voiceList);
  }, [voiceURI, availableVoices, voiceLocale, voiceList]);
  const ttsProviderIds = useMemo(
    () => Object.keys(TTS_PROFILES).filter((id) => Boolean(providers.keys[id])),
    [providers.keys],
  );
  const roboticOnly = useMemo(
    () => onlyRoboticVoices(voiceLocale, voiceList),
    [voiceLocale, voiceList],
  );
  /* iOS hands the page one voice per language; point at the settings that
     change it (the note is the whole reason this section exists there). */
  const iosLimited = useMemo(
    () => isAppleMobile() && availableVoices.length <= 1,
    [availableVoices.length],
  );
  /** Latest position for the unmount/pause save, without re-creating callbacks. */
  const latest = useRef<PodcastVoice | null>(episode.progress ?? null);

  const tokens = useMemo(
    () => tokenizeSections(episode.sections),
    [episode.sections],
  );
  const supported = useMemo(() => speechAvailable(), []);

  /* Live getters: changing the speed or the voice must never rebuild a
     speaking engine (a rebuilt one used to leave the old voice running). */
  const rateRef = useRef(rate);
  const voiceRef = useRef<SpeechSynthesisVoice | null>(null);
  useEffect(() => {
    rateRef.current = rate;
  }, [rate]);
  useEffect(() => {
    voiceRef.current = voice;
  }, [voice]);

  const speech = useMemo(() => {
    if (!supported) return null;
    return createPodcastSpeech({
      sections: episode.sections,
      locale: voiceLocale,
      getRate: () => rateRef.current,
      getVoice: () => voiceRef.current,
      onWord: (next) => {
        latest.current = next;
        setPosition(next);
      },
      onPlay: () => {
        setPlaying(true);
        /* The Aero soundtrack steps aside for the voice (see AeroMusic). */
        window.dispatchEvent(
          new CustomEvent("freezmo:foreground-audio", { detail: "podcast" }),
        );
      },
      onPause: () => setPlaying(false),
      onEnd: () => {
        setPlaying(false);
        setPosition(null);
        latest.current = null;
        savePodcastProgress(episode.id, { section: 0, word: 0 });
      },
      onError: (message) => {
        if (message === "unsupported") setUnsupported(true);
        setPlaying(false);
      },
    });
  }, [episode.id, episode.sections, supported, voiceLocale]);

  /* Resume where the listener left off (a reopened episode starts there). */
  useEffect(() => {
    if (episode.progress) {
      latest.current = {
        section: episode.progress.section,
        word: episode.progress.word,
      };
      setPosition({
        section: episode.progress.section,
        word: episode.progress.word,
      });
    }
  }, [episode.id, episode.progress]);

  const persist = useCallback(() => {
    if (latest.current) savePodcastProgress(episode.id, latest.current);
  }, [episode.id]);

  /* The engine instance is rebuilt on a speed change; keep a ref so the
     unmount cleanup always stops whichever one is current. */
  const speechRef = useRef(speech);
  const naturalRef = useRef<PodcastAudio | null>(natural);
  const playingRef = useRef(false);
  useEffect(() => {
    speechRef.current = speech;
  }, [speech]);
  useEffect(() => {
    naturalRef.current = natural;
  }, [natural]);
  useEffect(() => {
    playingRef.current = playing;
  }, [playing]);
  useEffect(() => {
    return () => {
      persist();
      speechRef.current?.stop();
    };
  }, [persist]);

  /* Closing the tab, switching apps or hard-navigating away: the unmount
     cleanup never runs there, so the position also rides the page lifecycle. */
  useEffect(() => {
    const save = () => persist();
    const onHide = () => {
      if (document.visibilityState === "hidden") save();
    };
    window.addEventListener("pagehide", save);
    document.addEventListener("visibilitychange", onHide);
    return () => {
      window.removeEventListener("pagehide", save);
      document.removeEventListener("visibilitychange", onHide);
    };
  }, [persist]);

  /* A rebuilt engine (speed change) resumes the same word when it was
     playing — the listener should not notice the swap. */
  const firstEngine = useRef(true);
  useEffect(() => {
    if (firstEngine.current) {
      firstEngine.current = false;
      return;
    }
    if (!playingRef.current || !speech) return;
    speech.play(latest.current ?? { section: 0, word: 0 });
  }, [speech]);

  /* The highlight: one class on the active word (imperative, so a few hundred
     spans do not re-render per word). The scroll follows by *line*: words on
     the same line never move anything, a line only scrolls once it leaves the
     comfortable band, and a manual scroll pauses the following for a moment
     instead of fighting the reader. */
  useEffect(() => {
    const container = transcript.current;
    if (!container) return;
    activeWord.current?.removeAttribute("data-word-active");
    activeWord.current?.classList.remove("podcast-word-active");
    if (!position) {
      activeWord.current = null;
      return;
    }
    const index = tokens.findIndex(
      (token) =>
        token.section === position.section && token.index === position.word,
    );
    if (index === -1) return;
    const element = container.querySelector<HTMLElement>(
      `[data-word="${index}"]`,
    );
    if (!element) return;
    element.setAttribute("data-word-active", "1");
    element.classList.add("podcast-word-active");
    activeWord.current = element;

    const box = element.getBoundingClientRect();
    const view = container.getBoundingClientRect();
    const top = box.top - view.top;
    /* Same line as last time (a wrapped word shifts a pixel or two): nothing
       to do — this is what stops the jitter under every word. */
    const previous = lastLineTop.current;
    const sameLine = previous !== null && Math.abs(top - previous) < 8;
    lastLineTop.current = top;
    if (sameLine) return;
    /* The reader scrolled away on purpose: let them read for a moment. */
    if (Date.now() < followPausedUntil.current) return;

    const comfortable = view.height * 0.42;
    const delta = top - comfortable;
    /* Inside the band already: leave the page alone. */
    if (Math.abs(delta) < view.height * 0.14) return;
    container.scrollTo({
      top: container.scrollTop + delta,
      behavior: Math.abs(delta) > 80 && !reduceMotion ? "smooth" : "auto",
    });
  }, [position, tokens, reduceMotion]);

  /* A wheel, a drag or a touch on the transcript is the reader taking over. */
  useEffect(() => {
    const container = transcript.current;
    if (!container) return;
    const suspend = () => {
      followPausedUntil.current = Date.now() + 4000;
    };
    container.addEventListener("wheel", suspend, { passive: true });
    container.addEventListener("touchstart", suspend, { passive: true });
    container.addEventListener("pointerdown", suspend, { passive: true });
    return () => {
      container.removeEventListener("wheel", suspend);
      container.removeEventListener("touchstart", suspend);
      container.removeEventListener("pointerdown", suspend);
    };
  }, []);

  const sections = episode.sections;
  const words = tokens.length;
  const done = useMemo(() => {
    if (!position) return 0;
    return tokens.findIndex(
      (token) =>
        token.section === position.section && token.index === position.word,
    );
  }, [position, tokens]);

  /* The system voice has neither a live rate nor a live voice: restart the
     current part so a change is heard at once (the natural engine above is
     live, so this only runs on the system path). */
  const firstRestart = useRef(true);
  useEffect(() => {
    if (firstRestart.current) {
      firstRestart.current = false;
      return;
    }
    if (!playingRef.current || naturalActive || !speech) return;
    speech.play(latest.current ?? { section: 0, word: 0 });
    // eslint-disable-next-line react-hooks/exhaustive-deps -- restarts only when the rate or the voice changes
  }, [rate, voice]);

  /* A rebuilt natural engine (a different voice) resumes where it was. */
  const firstNatural = useRef(true);
  useEffect(() => {
    if (firstNatural.current) {
      firstNatural.current = false;
      return;
    }
    if (!playingRef.current || !natural) return;
    natural.play(latest.current ?? { section: 0, word: 0 });
  }, [natural]);

  const naturalActive = voiceSource === "natural" && Boolean(natural);
  /** The engines share their shape; the transport routes by source. */
  const canPlay = naturalActive ? true : supported;

  const harness = () => (naturalActive ? natural : speech);

  const toggle = () => {
    if (!canPlay) return;
    if (playing) {
      harness()?.pause();
      persist();
      return;
    }
    if (!naturalActive && availableVoices.length === 0) {
      /* Nothing to speak with: say so instead of doing nothing. */
      setVoiceSilent(true);
      return;
    }
    /* Other readers (a card's read-aloud) yield to the episode. */
    stopSpeaking();
    harness()?.play(position ?? { section: 0, word: 0 });
    /* The system engine can also be *present* and still do nothing (no voice
       data behind it). If nothing starts, the banner takes over. */
    if (!naturalActive) {
      const attempt = Date.now();
      window.setTimeout(() => {
        if (Date.now() - attempt < 1500) return;
        if (!playingRef.current) setVoiceSilent(true);
      }, 1700);
    }
  };

  const seek = (next: PodcastVoice) => {
    if (!canPlay) return;
    setVoiceSilent(false);
    latest.current = next;
    setPosition(next);
    /* A seek is an instruction to show that place: follow it at once. */
    lastLineTop.current = null;
    followPausedUntil.current = 0;
    stopSpeaking();
    harness()?.play(next);
  };

  const jump = (section: number) => seek({ section, word: 0 });

  const jumpWord = (index: number) => {
    const token = tokens[index];
    if (!token) return;
    seek({ section: token.section, word: token.index });
  };

  /* Word spans, built once per section: the highlight is a class flip. */
  const rendered = useMemo(() => {
    return sections.map((section, sectionIndex) => {
      const sectionTokens = tokens.filter(
        (token) => token.section === sectionIndex,
      );
      const nodes: React.ReactNode[] = [];
      let cursor = 0;
      sectionTokens.forEach((token) => {
        if (token.start > cursor)
          nodes.push(section.text.slice(cursor, token.start));
        const globalIndex = token.global;
        nodes.push(
          <span
            key={`${token.start}`}
            data-word={globalIndex}
            className="podcast-word"
          >
            {section.text.slice(token.start, token.end)}
          </span>,
        );
        cursor = token.end;
      });
      if (cursor < section.text.length) nodes.push(section.text.slice(cursor));
      return { section, sectionIndex, nodes };
    });
  }, [sections, tokens]);

  const currentSection = position?.section ?? 0;

  return (
    <div className="frost-bg fixed inset-0 z-[45] flex flex-col fade-in-mobile">
      <header className="pt-safe absolute inset-x-0 top-0 z-30 px-3">
        <div className="study-chrome mx-auto flex max-w-3xl items-center gap-2.5 rounded-full px-2.5 py-2">
          <Link
            href="/?tab=podcasts"
            aria-label={t("feed.back")}
            title={t("feed.back")}
            className="grid size-10 shrink-0 place-items-center rounded-full bg-[var(--surface-sunken)] text-[var(--text)] transition hover:bg-[var(--hover)]"
          >
            <ChevronLeftIcon className="size-4" />
          </Link>
          <div className="min-w-0 flex-1">
            <p className="truncate text-[13px] font-semibold leading-tight text-[var(--text)]">
              {episode.title}
            </p>
            <p className="truncate text-[11.5px] text-[var(--text-muted)]">
              {t("podcast.sectionOf", {
                n: Math.min(currentSection + 1, sections.length),
                total: sections.length,
              })}
              {" · "}
              {sections[currentSection]?.heading ?? ""}
            </p>
          </div>
          {availableVoices.length > 0 || ttsProviderIds.length > 0 ? (
            <button
              type="button"
              onClick={() => setVoiceOpen((open) => !open)}
              aria-label={t("podcast.voiceAria")}
              aria-expanded={voiceOpen}
              title={voice?.name ?? t("podcast.voiceAria")}
              className={cn(
                "relative grid size-10 shrink-0 place-items-center rounded-full transition",
                voiceOpen
                  ? "bg-[var(--nav-active-bg)] text-[var(--text)]"
                  : "bg-[var(--surface-sunken)] text-[var(--text-muted)] hover:bg-[var(--hover)]",
              )}
            >
              <SpeakerIcon className="size-4" />
              {iosLimited ? (
                <span
                  aria-hidden
                  className="absolute -right-0.5 -top-0.5 size-2.5 rounded-full bg-amber-400 ring-2 ring-[var(--page)]"
                />
              ) : null}
            </button>
          ) : null}
          {naturalBusy ? (
            <span
              role="status"
              className="shrink-0 rounded-full bg-[var(--surface-sunken)] px-2.5 py-2 text-[11px] font-semibold text-[var(--text-muted)]"
            >
              {t("podcast.voiceGenerating")}
            </span>
          ) : null}
          <button
            type="button"
            onClick={() => {
              const index = RATES.indexOf(rate as (typeof RATES)[number]);
              setRate(RATES[(index + 1) % RATES.length]);
            }}
            aria-label={t("podcast.speedAria")}
            title={t("podcast.speedAria")}
            className="shrink-0 rounded-full bg-[var(--surface-sunken)] px-3 py-2 text-[12px] font-extrabold tabular-nums text-[var(--text)] transition hover:bg-[var(--hover)]"
          >
            {rate}×
          </button>
        </div>
      </header>

      <div
        ref={transcript}
        data-testid="podcast-transcript"
        onClick={(event) => {
          /* Word taps seek: the transcript is the scrubber, like lyrics. */
          const target = event.target as HTMLElement;
          if (!target.classList.contains("podcast-word")) return;
          const index = Number(target.dataset.word);
          if (Number.isInteger(index)) jumpWord(index);
        }}
        /* pt-32 clears the Aero music control, which rides above this overlay
           in the header's corner while the theme is on. */
        className="no-scrollbar min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 pb-40 pt-32"
      >
        <div className="mx-auto w-full max-w-3xl space-y-6">
          {naturalError ? (
            <p
              role="alert"
              className="rounded-2xl border border-rose-300/50 bg-rose-50/70 px-3.5 py-3 text-[12.5px] leading-relaxed text-rose-800 dark:border-rose-400/25 dark:bg-rose-400/10 dark:text-rose-200"
            >
              {naturalError}
            </p>
          ) : null}

          {(!naturalActive && (!supported || unsupported || voiceSilent)) || (naturalActive && !natural) ? (
            <div className="space-y-2.5 rounded-2xl border border-amber-300/50 bg-amber-50/70 px-3.5 py-3 text-[12.5px] leading-relaxed text-amber-800 dark:border-amber-400/25 dark:bg-amber-400/10 dark:text-amber-200">
              <p>
                {naturalActive && !natural
                  ? t("podcast.voiceNeedsKey")
                  : `${
                      voiceSilent || unsupported
                        ? t("podcast.voiceSilent")
                        : t("podcast.noVoice")
                    }${isAppleMobile() ? ` ${t("podcast.voiceIos")}` : ""}`}
              </p>
              <div className="flex flex-wrap items-center gap-2">
                {ttsProviderIds.length > 0 ? (
                  <Button
                    size="sm"
                    onClick={() => {
                      setVoiceSilent(false);
                      setUnsupported(false);
                      setNaturalError(null);
                      setVoiceSource("natural");
                      writeNaturalPref({ source: "natural" });
                    }}
                  >
                    {t("podcast.voiceUseNatural")}
                  </Button>
                ) : (
                  <Button size="sm" onClick={() => openSettings()}>
                    {t("podcast.voiceOpenProviders")}
                  </Button>
                )}
                <button
                  type="button"
                  onClick={() => {
                    setVoiceSilent(false);
                    setVoiceOpen(true);
                  }}
                  className="text-[12.5px] font-semibold underline decoration-dotted"
                >
                  {t("podcast.voiceAria")}
                </button>
              </div>
            </div>
          ) : null}

          <div className="card space-y-2 p-5">
            <h1 className="text-[22px] font-extrabold leading-tight tracking-[-0.01em] text-[var(--text)]">
              {episode.title}
            </h1>
            {episode.summary ? (
              <p className="text-[13.5px] leading-relaxed text-[var(--text-muted)]">
                {episode.summary}
              </p>
            ) : null}
            <p className="flex items-center gap-1.5 text-[12px] font-medium text-[var(--text-subtle)]">
              <ClockIcon className="size-3.5" />
              {plural(episode.sections.length, "podcast.sectionCount")} ·{" "}
              {plural(words, "podcast.wordCount")}
            </p>
          </div>

          {/* The script reads on a glass pane: in Aero the wallpaper behind
              plain paragraphs is bright grass and sun (the contrast scan caught
              it), and the same treatment keeps every theme consistent. */}
          <div className="card space-y-6 p-5" data-testid="podcast-script">
            {rendered.map(({ section, sectionIndex, nodes }) => (
              <section key={sectionIndex} className="space-y-2">
                <h2 className="flex items-center gap-2 text-[12px] font-bold uppercase tracking-wide text-[var(--text-subtle)]">
                  <span className="grid size-6 place-items-center rounded-full bg-[var(--surface-sunken)] text-[11px] tabular-nums">
                    {sectionIndex + 1}
                  </span>
                  {section.heading}
                </h2>
                <p
                  className={cn(
                    "text-[17px] leading-[1.85] text-[var(--text-muted)] transition-colors sm:text-[18px]",
                    sectionIndex === currentSection && "text-[var(--text)]",
                  )}
                >
                  {nodes}
                </p>
              </section>
            ))}
          </div>

          <p className="pb-6 text-center text-[11.5px] text-[var(--text-subtle)]">
            {t("podcast.tapToJump")}
          </p>
        </div>
      </div>

      {/* Controls: chapter list on the left, transport in the middle. */}
      <div className="pointer-events-none absolute inset-x-0 bottom-0 z-30 pb-safe">
        <div className="pointer-events-auto mx-auto max-w-3xl px-3 pb-3">
          {voiceOpen ? (
            <div className="pointer-events-auto mx-auto mb-2 w-full max-w-md px-0">
              <div className="glass-panel max-h-72 space-y-1 overflow-y-auto overscroll-contain p-3">
                <div className="flex items-center justify-between gap-2 px-1">
                  <p className="text-[12px] font-semibold uppercase tracking-wide text-[var(--text-subtle)]">
                    {t("podcast.voiceAria")}
                  </p>
                  <button
                    type="button"
                    onClick={() => setVoiceOpen(false)}
                    className="text-[12.5px] font-semibold text-accent-700 dark:text-accent-200"
                  >
                    {t("common.close")}
                  </button>
                </div>
                {/* Source: the platform's voices, or the provider's TTS. */}
                <div className="grid grid-cols-2 gap-1.5 px-1 pb-1">
                  {(["system", "natural"] as const).map((source) => (
                    <button
                      key={source}
                      type="button"
                      aria-pressed={voiceSource === source}
                      onClick={() => {
                        setVoiceSource(source);
                        writeNaturalPref({ source });
                        setNaturalError(null);
                        /* Swapping engines mid-sentence: stop the other one. */
                        if (playing) {
                          harness()?.pause();
                          setPlaying(false);
                        }
                      }}
                      className={cn(
                        "touch-target rounded-xl border px-3 py-2 text-[12.5px] font-semibold transition",
                        voiceSource === source
                          ? "border-[var(--nav-active-border)] bg-[var(--nav-active-bg)] text-[var(--text)]"
                          : "border-[var(--hairline)] bg-[var(--surface-sunken)] text-[var(--text-muted)] hover:bg-[var(--hover)]",
                      )}
                    >
                      {source === "system" ? t("podcast.voiceSystem") : t("podcast.voiceNatural")}
                    </button>
                  ))}
                </div>

                {voiceSource === "system" ? (
                  <>
                    {availableVoices.length === 0 ? (
                      <p className="px-1 pt-1 text-[11.5px] leading-relaxed text-[var(--text-subtle)]">
                        {t("podcast.voiceNoSystem")}
                      </p>
                    ) : null}
                    {voiceURI ? (
                      <button
                        type="button"
                        onClick={() => {
                          setVoiceURI(null);
                          window.localStorage.removeItem("freezmo.podcast-voice.v1");
                        }}
                        className="nav-row touch-target w-full text-left text-[13px]"
                      >
                        {t("podcast.voiceAuto")}
                      </button>
                    ) : null}
                    {availableVoices.map((entry) => {
                      const active = entry.voiceURI === voice?.voiceURI;
                      return (
                        <button
                          key={entry.voiceURI}
                          type="button"
                          aria-pressed={active}
                          onClick={() => {
                            setVoiceURI(entry.voiceURI);
                            setStoredVoice(voiceLocale, entry.voiceURI);
                            setVoiceOpen(false);
                          }}
                          className={cn(
                            "nav-row touch-target flex w-full items-center gap-2 text-left text-[13px]",
                            active && "border-[var(--nav-active-border)] bg-[var(--nav-active-bg)]",
                          )}
                        >
                          <span className="min-w-0 flex-1">
                            <span className="block truncate font-medium text-[var(--text)]">{entry.name}</span>
                            <span className="block text-[11.5px] text-[var(--text-subtle)]">
                              {entry.lang}
                              {entry.localService ? ` · ${t("podcast.voiceLocal")}` : ""}
                            </span>
                          </span>
                          {active ? <CheckCircleIcon className="size-4 shrink-0 text-accent-600 dark:text-accent-200" /> : null}
                        </button>
                      );
                    })}
                    <p className="px-1 pt-1 text-[11.5px] leading-relaxed text-[var(--text-subtle)]">
                      {iosLimited ? t("podcast.voiceIos") : roboticOnly ? t("podcast.voiceRobotic") : t("podcast.voiceNote")}
                    </p>
                  </>
                ) : ttsProviderIds.length === 0 ? (
                  <p className="px-1 pt-1 text-[11.5px] leading-relaxed text-[var(--text-subtle)]">
                    {t("podcast.voiceNeedsKey")}
                  </p>
                ) : (
                  <>
                    {ttsProviderIds.length > 1 ? (
                      <div className="flex flex-wrap gap-1.5 px-1 pb-1 pt-1">
                        {ttsProviderIds.map((id) => (
                          <button
                            key={id}
                            type="button"
                            aria-pressed={naturalProvider === id}
                            onClick={() => {
                              setNaturalProvider(id);
                              setNaturalVoiceId(null);
                              writeNaturalPref({ provider: id, voice: null });
                            }}
                            className={cn(
                              "rounded-full px-2.5 py-1.5 text-[11.5px] font-semibold transition",
                              naturalProvider === id
                                ? "bg-[var(--nav-active-bg)] text-[var(--text)] ring-1 ring-[var(--nav-active-border)]"
                                : "bg-[var(--surface-sunken)] text-[var(--text-muted)] hover:bg-[var(--hover)]",
                            )}
                          >
                            {ttsProviderLabel(id)}
                          </button>
                        ))}
                      </div>
                    ) : null}
                    {(TTS_PROFILES[naturalProvider]?.voices ?? []).map((entry) => {
                      const active = entry.id === voiceForProvider(naturalProvider, naturalVoiceId);
                      return (
                        <button
                          key={entry.id}
                          type="button"
                          aria-pressed={active}
                          onClick={() => {
                            setNaturalVoiceId(entry.id);
                            writeNaturalPref({ voice: entry.id });
                          }}
                          className={cn(
                            "nav-row touch-target flex w-full items-center gap-2 text-left text-[13px]",
                            active && "border-[var(--nav-active-border)] bg-[var(--nav-active-bg)]",
                          )}
                        >
                          <span className="min-w-0 flex-1">
                            <span className="block truncate font-medium text-[var(--text)]">{entry.label}</span>
                            <span className="block text-[11.5px] text-[var(--text-subtle)]">
                              {entry.male ? t("podcast.voiceMale") : t("podcast.voiceFemale")}
                            </span>
                          </span>
                          {active ? <CheckCircleIcon className="size-4 shrink-0 text-accent-600 dark:text-accent-200" /> : null}
                        </button>
                      );
                    })}
                    <p className="px-1 pt-1 text-[11.5px] leading-relaxed text-[var(--text-subtle)]">
                      {naturalError ?? t("podcast.voiceNaturalNote")}
                    </p>
                  </>
                )}
              </div>
            </div>
          ) : null}

          <div className="study-chrome rounded-[1.4rem] px-3 py-2.5">
            <div
              className="mb-2 h-1 overflow-hidden rounded-full bg-[var(--track)]"
              aria-hidden
            >
              <div
                className="h-full rounded-full grad-ice transition-[width] duration-200"
                style={{
                  width: words ? `${Math.round((done / words) * 100)}%` : "0%",
                }}
              />
            </div>
            <div className="flex items-center gap-2">
              <button
                type="button"
                onClick={toggle}
                disabled={!canPlay}
                aria-label={playing ? t("podcast.pause") : t("podcast.play")}
                title={playing ? t("podcast.pause") : t("podcast.play")}
                className="grid size-12 shrink-0 place-items-center rounded-full grad-ice text-[#06111f] transition disabled:opacity-45"
              >
                {playing ? (
                  <PauseIcon className="size-5" />
                ) : (
                  <PlayIcon className="size-5" />
                )}
              </button>
              <div className="no-scrollbar flex min-w-0 flex-1 items-center gap-1.5 overflow-x-auto">
                {sections.map((section, index) => (
                  <button
                    key={index}
                    type="button"
                    onClick={() => jump(index)}
                    aria-current={index === currentSection ? "true" : undefined}
                    className={cn(
                      "shrink-0 rounded-full px-3 py-2 text-[12px] font-semibold transition",
                      index === currentSection
                        ? "bg-[var(--nav-active-bg)] text-[var(--text)] ring-1 ring-[var(--nav-active-border)]"
                        : "bg-[var(--surface-sunken)] text-[var(--text-muted)] hover:bg-[var(--hover)]",
                    )}
                  >
                    {section.heading}
                  </button>
                ))}
              </div>
              <button
                type="button"
                onClick={() => {
                  harness()?.stop();
                  setPosition({ section: 0, word: 0 });
                  latest.current = { section: 0, word: 0 };
                  savePodcastProgress(episode.id, { section: 0, word: 0 });
                }}
                aria-label={t("podcast.restart")}
                title={t("podcast.restart")}
                className="grid size-10 shrink-0 place-items-center rounded-full bg-[var(--surface-sunken)] text-[var(--text-muted)] transition hover:bg-[var(--hover)] hover:text-[var(--text)]"
              >
                <RefreshIcon className="size-4" />
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}