Blame for frontend/src/pages/VideoEditor.tsx

import { useCallback, useEffect, useRef, useState } from "react";
import { Link, useNavigate, useParams } from "react-router-dom";
import { ApiError } from "../api/client";
import { videoEditApi, videosApi, type LayoutInfo, type LayoutSchema } from "../api/endpoints";
import type { LegacyVideo, ScriptScene, VideoCatalog, VideoConfig, VideoJobState, VideoProject, VideoStatus } from "../api/types";
import { CheckIcon, DownloadIcon, SparkleIcon } from "../components/icons/Icons";
import { ConfirmButton, ErrorText, errorMessage, Loading, Modal, PageHeader, StatusPill, Tabs, VIDEO_UPDATING } from "../components/ui";
import { ImagesPanel, VoicePanel, type PanelProps } from "../components/video/EditorPanels";
import { LookPanel } from "../components/video/SettingsPanel";
import { SceneList } from "../components/video/SceneList";
import { PhoneIcon, ScreenIcon } from "../components/video/parts";
import { usePoll } from "../hooks/usePoll";
import { finished, jobPercent } from "../components/video/jobState";
import { useUpgrade } from "../hooks/useUpgrade";

const STEPS = ["Reading the source", "Writing the script", "Building scenes", "Finishing"];
const REVIEW = new Set(["awaiting_stock_footage_review", "awaiting_script_review"]);

type Panel = "scenes" | "images" | "audio" | "settings";

function busyMessage(e: unknown): string {
  return e instanceof ApiError && e.status === 409 ? "Another change is still running, try again in a moment." : errorMessage(e);
}

type Running = { label: string; poll: () => Promise<VideoJobState | null> } | null;

/** One line on what the job is doing now: "Scene 3 of 14", or for a translation which pass it is on. */
function jobDetail(s: VideoJobState | null): string | null {
  if (!s) return null;
  const num = (v: unknown) => (typeof v === "number" && Number.isFinite(v) ? v : null);
  const total = num(s.total) ?? num(s.total_scenes);
  const done = num(s.completed) ?? num(s.processed_scenes) ?? num(s.processed);
  if (s.kind === "language_change") {
    // Two passes over the scenes: the copy, then every voiceover (blog2video counts both in total).
    const scenes = total ? total / 2 : null;
    if (s.phase === "translating") return `Translating the text${scenes && done !== null ? ` · scene ${Math.min(done + 1, scenes)} of ${scenes}` : ""}`;
    if (s.phase === "voiceover") return `Recording voiceovers${scenes && done !== null ? ` · scene ${Math.min(Math.max(done - scenes, 0) + 1, scenes)} of ${scenes}` : ""}`;
  }
  return total && done !== null ? `Scene ${Math.min(done + 1, total)} of ${total}` : null;
}

/** How far a job is, 0-100, from whichever shape its status endpoint uses; null when it does not say. */
// How a job's progress is drawn: "bar" = the full progress screen in place of the editor; "inline" = the editor stays
// (rendering: the preview is final, the Rendering pill under it shows progress). A new kind of job adds its own.
type JobView = "bar" | "inline";
type JobInfo = { label: string; title: string; tip?: string; view: JobView; poll?: (id: string) => Promise<VideoJobState | null> };

/** Edit jobs on a finished video, keyed by the status blog2video (and so our artifact) has while one runs. The label
 * is what startJob is given when the job starts from this tab; poll resumes it after a reload or from another tab. */
const JOBS: Record<string, JobInfo> = {
  regenerating: { label: "Switching template", title: "Regenerating scene layouts", view: "bar",
                  tip: "Switch the template, colors and fonts anytime from the Settings tab.",
                  poll: (id) => videoEditApi.templateStatus(id) },
  voice_regenerating: { label: "Changing the voice", title: "Re-recording the voiceover", view: "bar",
                        tip: "Preview any voice from the Voices page before switching.",
                        poll: (id) => videoEditApi.voiceStatus(id) },
  language_regenerating: { label: "Translating", title: "Translating your video", view: "bar",
                           tip: "Text, narration and voiceover are all translated.",
                           poll: (id) => videoEditApi.languageStatus(id) },
  rendering: { label: "Rendering", title: "Rendering the MP4", view: "inline",
               poll: (id) => videoEditApi.renderStatus(id) },
  script_regenerating: { label: "Refreshing the script", title: "Refreshing the script", view: "bar",
                         tip: "Narration and voiceovers stay as they are.",
                         poll: (id) => videoEditApi.refreshStatus(id) },
};

/** Jobs with no status of their own on blog2video: only shown when started from this tab. */
const LOCAL_JOBS: JobInfo[] = [
  { label: "Deleting the voiceover", title: "Removing the voiceover", view: "bar",
    tip: "Render again afterwards to get a silent MP4.", poll: (id) => videoEditApi.voiceStatus(id) },
  { label: "Adding a scene", title: "Writing the new scene", tip: "You can edit any scene once it's added.", view: "bar" },
];

const jobByLabel = (label: string): JobInfo =>
  Object.values(JOBS).find((j) => j.label === label) ?? LOCAL_JOBS.find((j) => j.label === label)
  ?? { label, title: label, view: "bar" };

/** blog2video-style progress screen for a background job: shown in place of the editor until the job ends. */
function JobProgress({ label, name, state }: { label: string; name: string; state: VideoJobState | null }) {
  const known = jobByLabel(label);
  // Resumed from the stored status, a voiceover delete arrives as a voice job: blog2video's kind tells them apart.
  const copy = state?.kind === "delete" ? jobByLabel("Deleting the voiceover") : known;
  const pct = jobPercent(state);
  const detail = jobDetail(state);
  const step = typeof state?.current_step === "string" && state.current_step ? state.current_step : null;
  return (
    <section className="vw-job" role="status" aria-live="polite">
      <span className="vw-job-icon" aria-hidden="true"><SparkleIcon size={28} /></span>
      <div className="vw-job-head">
        <h2>{copy.title}</h2>
        <p className="muted">{name}</p>
      </div>
      <div className={`vw-job-bar${pct === null ? " indeterminate" : ""}`} aria-hidden="true">
        <span style={pct === null ? undefined : { width: `${pct}%` }} />
      </div>
      <p className="vw-job-status muted">
        <span className="vw-spin small" aria-hidden="true" />
        {pct !== null ? `${pct}% complete` : step ? step.replace(/_/g, " ") : "Working..."}
      </p>
      {detail && <p className="vw-job-detail muted small">{detail}</p>}
      {copy.tip && (
        <div className="vw-job-tip">
          <span className="vw-label">Tip</span>
          <p>{copy.tip}</p>
        </div>
      )}
    </section>
  );
}

export default function VideoEditor() {
  const { id = "" } = useParams();
  const navigate = useNavigate();
  const { openUpgrade } = useUpgrade();
  const [loaded, setProject] = useState<VideoProject | LegacyVideo | null>(null);
  const legacy = loaded?.legacy ? loaded : null;
  const project = loaded?.legacy ? null : loaded;
  const [catalog, setCatalog] = useState<VideoCatalog | null>(null);
  const [config, setConfig] = useState<VideoConfig | null>(null);
  const [notFound, setNotFound] = useState(false);
  const [running, setRunning] = useState<Running>(null);
  const [genKey, setGenKey] = useState(0); // bumped after a review is approved, to resume polling
  const [formatTo, setFormatTo] = useState<Format | null>(null); // the format switch waiting for confirmation
  const [downloading, setDownloading] = useState(false); // the download modal is open
  const [stoppingRender, setStoppingRender] = useState(false); // the "stop rendering?" warning is open
  const isRendering = running?.label === "Rendering";
  useEffect(() => {
    if (!isRendering) setStoppingRender(false); // the render ended: a warning left open is no longer needed
  }, [isRendering]);
  // The running render was started to be downloaded: save the MP4 when it is up. Kept for this tab (sessionStorage),
  // so leaving the editor mid-render and coming back still downloads it.
  const autoKey = `vw-autodownload:${id}`;
  const autoDownload = useRef(false);
  useEffect(() => {
    try {
      autoDownload.current = sessionStorage.getItem(autoKey) === "1";
    } catch {
      autoDownload.current = false;
    }
  }, [autoKey]);
  const setAutoDownload = useCallback((on: boolean) => {
    autoDownload.current = on;
    try {
      if (on) sessionStorage.setItem(autoKey, "1");
      else sessionStorage.removeItem(autoKey);
    } catch {
      /* private mode: the ref alone still covers this visit */
    }
  }, [autoKey]);
  const [layoutSchema, setLayoutSchema] = useState<LayoutSchema | null>(null); // default font sizes per layout
  const [layoutNames, setLayoutNames] = useState<Record<string, string> | null>(null); // display names per layout
  const [layoutInfo, setLayoutInfo] = useState<LayoutInfo | null>(null); // layouts and their variants
  const [panel, setPanel] = useState<Panel>("scenes");
  const [error, setError] = useState<string | null>(null);

  const reload = useCallback(
    () =>
      videosApi.get(id).then((p) => {
        setProject(p);
        setError((err) => (err?.startsWith(VIDEO_UPDATING) ? null : err));
      }).catch((e) => {
        if (e instanceof ApiError && e.status === 404) setNotFound(true);
        else setError(errorMessage(e));
      }),
    [id],
  );

  useEffect(() => {
    reload();
    videosApi.catalog().then(setCatalog).catch(() => undefined);
    videosApi.config().then(setConfig).catch(() => undefined);
  }, [reload]);

  // The template's layout names and default font sizes, again after a template switch. On failure the editor falls
  // back to title-cased ids and generic sizes.
  const template = project?.project.template;
  useEffect(() => {
    if (!template) return;
    let live = true;
    videoEditApi.layouts(id).then((l) => {
      if (!live) return;
      setLayoutSchema(l.layout_prop_schema ?? null);
      setLayoutNames(l.layout_names ?? null);
      setLayoutInfo(l);
    }).catch(() => undefined);
    return () => {
      live = false;
    };
  }, [id, template]);

  // Generation progress: poll until ready, failed, or waiting on a review.
  const gen = usePoll<VideoStatus>(notFound || legacy ? null : () => videosApi.status(id), {
    intervalMs: 4000,
    key: `${id}:${genKey}`,
    // Also stops on an edit job's status: that job has its own poll (below), not this one.
    until: (s) => !!s.legacy || s.ready || !!s.error || s.status === "failed" || REVIEW.has(s.status) || s.status in JOBS,
  });
  const status = gen.data;
  useEffect(() => {
    if (gen.done) reload();
  }, [gen.done, reload]);

  // One background job at a time (template, voice, language, add scene, script refresh, render).
  const job = usePoll<VideoJobState | null>(running ? running.poll : null, { intervalMs: 3000, key: running, until: finished });
  useEffect(() => {
    if (!job.done || !running) return;
    const err = job.data?.error;
    if (err) setError(`${running.label} failed: ${err}`); // no banner on success: the reloaded video shows it
    if (running.label === "Rendering" && autoDownload.current) {
      setAutoDownload(false);
      if (!err) {
        const ready = job.data?.r2_video_url;
        void downloadWhenUploaded(typeof ready === "string" ? ready : null);
      }
    }
    setRunning(null);
    reload();
    setGenKey((k) => k + 1); // asks /status again, which also brings our stored status back from the job's
  }, [job.done, job.data, running, reload, setAutoDownload]);

  // An edit job is running (started in another tab, or before a reload): show its progress screen. Right away from
  // our stored status (set when the job started) on opening the editor, without waiting for the first /status answer;
  // after that, blog2video's answer decides. The job's own poll ends a stale one at once (it reports it finished).
  const storedJob = project?.artifact.status && project.artifact.status in JOBS ? project.artifact.status : null;
  const jobStatus = status ? (status.status in JOBS ? status.status : null) : genKey === 0 ? storedJob : null;
  useEffect(() => {
    const info = jobStatus ? JOBS[jobStatus] : null;
    if (!info?.poll || running) return;
    const poll = info.poll;
    setRunning({ label: info.label, poll: () => poll(id) });
  }, [jobStatus, running, id]);

  /** True once the change is made and the project reloaded; false when it failed (the error is shown). `done` (a
   * success line) is accepted for the callers' sake but not shown: the editor shows errors only. */
  async function act(fn: () => Promise<unknown>, _done?: string): Promise<boolean> {
    setError(null);
    try {
      await fn();
      await reload();
      return true;
    } catch (e) {
      if (e instanceof ApiError && e.status === 404) {
        // The video changed on blog2video under us (e.g. scenes were rebuilt): show the current version.
        setError(`${errorMessage(e)}. The video was reloaded; try the change again.`);
        await reload();
        return false;
      }
      setError(busyMessage(e));
      return false;
    }
  }

  async function startJob(label: string, start: () => Promise<unknown>, poll: () => Promise<VideoJobState | null>) {
    setError(null);
    try {
      await start();
      setRunning({ label, poll });
    } catch (e) {
      setError(busyMessage(e));
    }
  }

  const remove = async () => {
    await videosApi.remove(id);
    navigate("/app/archive?tab=videos");
  };

  if (notFound) {
    return (
      <div className="page-wrap">
        <PageHeader eyebrow="Videos" title="Video not found" />
        <Link to="/app/archive?tab=videos" className="btn">Back to videos</Link>
      </div>
    );
  }
  if (legacy) return <LegacyVideoView video={legacy} onRemove={remove} />;
  if (!project && !status) return <div className="loading-center full"><Loading label="Loading video" /></div>;

  const title = project?.artifact.title ?? "Video";
  const failed = !!status && (!!status.error || status.status === "failed");
  // Until the first /status answer, our stored status decides (as for edit jobs), so reopening a video that is still
  // being made goes straight to its progress screen instead of showing the editor first.
  const stored = !status && genKey === 0 ? project?.artifact.status : null;
  // First generation only: an edit job on a finished video has its own progress screen.
  const generating = status
    ? !status.ready && !failed && !REVIEW.has(status.status) && !(status.status in JOBS)
    : stored === "generating" || stored === "pending";
  // Stored as waiting on a review or failed: /status says which screen, so the editor stays hidden until it answers.
  const awaiting = stored === "review" || stored === "failed";
  const step: number = status?.step ?? (typeof project?.artifact.content?.step === "number" ? project.artifact.content.step : 1);
  // The live preview only while blog2video says the video is ready (generated / done, or rendering its MP4). The preview link is minted once
  // and kept, so it is there in every state; mid-job it would show a half-changed video. Until /status answers, our
  // stored status decides.
  const previewReady = status
    ? (status.ready || ["generated", "done", "rendering"].includes(status.status)) && JOBS[status.status]?.view !== "bar"
    : ["ready", "rendering"].includes(project?.artifact.status ?? "");
  // The pill follows blog2video during an edit job, so it agrees with the screen even before our copy catches up.
  const pillStatus = status?.status && status.status in JOBS ? status.status : project?.artifact.status;
  // A running job drawn as the full progress screen (in place of the editor); rendering stays inline.
  const fullScreenJob = !!running && jobByLabel(running.label).view === "bar";

  // Rendered = blog2video's "done" (an MP4 exists), not just "generated" (editable). Until /status answers, the MP4
  // link we stored decides.
  const storedMp4 = project ? project.video_url ?? project.artifact.url ?? null : null;
  const rendered = (status?.status ?? "") === "done" || !!storedMp4;

  /** Download the MP4 by opening its R2 link in a new tab: R2 serves it with Content-Disposition: attachment, so the
   * browser saves the file. If the browser blocks the new tab (it can, after a long render with no click), follow
   * the link here instead: an attachment does not navigate away, the download just starts. */
  function saveMp4(url: string) {
    const tab = window.open(url, "_blank");
    if (tab) {
      tab.opener = null;
      return;
    }
    const a = document.createElement("a");
    a.href = url;
    a.rel = "noreferrer";
    document.body.appendChild(a);
    a.click();
    a.remove();
  }

  const isWebUrl = (u: unknown): u is string => typeof u === "string" && /^https?:\/\//.test(u);

  async function downloadNow() {
    const fresh = await videoEditApi.downloadUrl(id).then((r) => r.url).catch(() => null);
    const url = isWebUrl(fresh) ? fresh : storedMp4;
    if (url) saveMp4(url);
    else setError("The MP4 isn't available to download yet. Try rendering it again.");
  }

  /** After a render: download once the MP4 is uploaded to R2 (download-url answers 202 / a local path until then). */
  async function downloadWhenUploaded(r2: string | null) {
    // A re-render replaces the file at the same R2 address: a version param (as blog2video's own /download adds) keeps
    // a cached copy of the previous MP4 from being served.
    const fresh = (u: string) => `${u}${u.includes("?") ? "&" : "?"}v=${Date.now()}`;
    if (isWebUrl(r2)) return saveMp4(fresh(r2));
    for (let i = 0; i < 40; i++) {
      const url = await videoEditApi.downloadUrl(id).then((r) => r.url).catch(() => null);
      if (isWebUrl(url)) return saveMp4(fresh(url));
      await new Promise((ok) => setTimeout(ok, 3000));
    }
    setError("The MP4 is rendered but not ready to download yet. Try Download again in a moment.");
  }
  const locked = !!running || generating;
  const portrait = project?.project.aspect_ratio === "portrait";
  const summary = project?.project.summary;
  const aiEdits = config?.limits.ai_edits;
  const aiEditsLeft = aiEdits ? Math.max(aiEdits.limit - aiEdits.used, 0) : null;
  const panelProps: PanelProps | null = project ? {
    id, project: project.project, layoutSchema, layoutNames, layoutInfo, disabled: locked, act, startJob, locked: () => openUpgrade(),
  } : null;

  return (
    <div className="page-wrap">
      <PageHeader eyebrow="Videos" title={title}>
        {project && !generating && pillStatus && <StatusPill status={pillStatus} />}
      </PageHeader>

      {generating && (
        <section className="card stack vw-making">
          <h2>Making your video</h2>
          <ol className="vw-progress" aria-label={`Step ${step} of ${STEPS.length}`}>
            {STEPS.map((s, i) => {
              const n = i + 1;
              const done = n < step;
              return (
                <li key={s} className={done ? "done" : n === step ? "on" : ""} aria-current={n === step ? "step" : undefined}>
                  <span className="vw-progress-dot">{done ? <CheckIcon size={16} /> : n}</span>
                  <span className="vw-progress-label">{s}</span>
                </li>
              );
            })}
          </ol>
          <p className="muted">You can leave this page; the video keeps going.</p>
          {project && <StatusPill status={project.artifact.status} />}
        </section>
      )}

      {failed && (
        <section className="card stack">
          <h2>This video could not be made</h2>
          <ErrorText message={status?.error ?? "Generation failed."} />
          <p className="muted">It was not charged against your videos.</p>
          <div className="row">
            <Link to="/app/videos/new" className="btn btn-primary">Try again</Link>
          </div>
        </section>
      )}

      {status?.status === "awaiting_script_review" && (
        <ScriptReview id={id}
                      onApproved={() => setGenKey((k) => k + 1)} />
      )}

      {status?.status === "awaiting_stock_footage_review" && project && (
        <section className="card stack">
          <h2>Review stock footage</h2>
          <p className="muted">These clips were picked for your scenes. Keep them, or make the video without them.</p>
          <div className="vw-assets">
            {(project.project.assets ?? []).filter((a) => a.asset_type === "video" && a.r2_url).map((a) => (
              <video key={a.id} src={a.r2_url!} muted controls />
            ))}
          </div>
          <div className="row">
            <button className="btn btn-primary" onClick={() => act(() => videoEditApi.approveStock(id), "Footage approved.").then(() => setGenKey((k) => k + 1))}>
              Keep the footage
            </button>
            <button className="btn" onClick={() => act(() => videoEditApi.rejectStock(id), "Footage removed.").then(() => setGenKey((k) => k + 1))}>
              Continue without it
            </button>
          </div>
        </section>
      )}

      {error && <ErrorText message={error} />}
      {/* A background job (not a render, which shows its own progress) takes the editor's place until it ends */}
      {fullScreenJob && running && <JobProgress label={running.label} name={title} state={job.data ?? null} />}

      {awaiting && <div className="loading-center"><Loading label="Loading video" /></div>}

      {project && panelProps && !generating && !awaiting && !REVIEW.has(status?.status ?? "") && !fullScreenJob && (
        <div className="stack vw-editor-v2">
          <section className="card vw-preview-card wide">
            {project.preview_url && previewReady ? (
              <div className={`vw-preview${portrait ? " portrait" : ""}`}>
                {/* Keyed on the format: a switch reloads it in the new shape. Other edits need no remount: blog2video
                    pushes every change to the embed over its live channel and the player refetches by itself (forcing a
                    remount as well made it load twice). */}
                <iframe key={portrait ? "portrait" : "landscape"} src={embedUrl(project.preview_url)} title="Live preview"
                        allow="autoplay; fullscreen" allowFullScreen loading="lazy" />
              </div>
            ) : project.preview_url ? (
              <div className={`vw-preview vw-preview-wait${portrait ? " portrait" : ""}`} role="status">
                <span className="vw-spin" aria-hidden="true" />
                <span className="muted">{status ? "Preview comes back when the change is done." : "Loading the preview..."}</span>
              </div>
            ) : (
              <p className="muted">The live preview is not available right now.</p>
            )}
            <div className="vw-preview-foot">
              <span className="muted small">
                Preview · {summary?.scenes ?? project.project.scenes.length} scenes
                {summary ? ` · ${summary.duration_seconds}s` : ""}
              </span>
              <RenderPanel disabled={locked}
                           format={portrait ? "portrait" : "landscape"}
                           onFormat={setFormatTo}
                           onDownload={() => setDownloading(true)}
                           onCancel={() => setStoppingRender(true)}
                           rendering={running?.label === "Rendering"} progress={running?.label === "Rendering" ? jobPercent(job.data ?? null) ?? undefined : undefined} />
            </div>
            {/* Closes by itself if the render ends while it is open */}
            {stoppingRender && running?.label === "Rendering" && (
              <CancelRenderModal onClose={() => setStoppingRender(false)}
                                 onConfirm={async () => {
                                   const ok = await act(() => videoEditApi.cancelRender(id));
                                   if (ok) {
                                     setAutoDownload(false);
                                     setRunning(null);
                                   }
                                   return ok;
                                 }} />
            )}
            {downloading && (
              <DownloadModal rendered={rendered} onClose={() => setDownloading(false)}
                             onDownloadNow={downloadNow}
                             onRender={() => {
                               setAutoDownload(true);
                               // A rendered video renders again only when forced (latest edits); a new one either way.
                               return startJob("Rendering", () => videoEditApi.render(id, { force: rendered }),
                                               () => videoEditApi.renderStatus(id));
                             }} />
            )}
            {formatTo && (
              <FormatModal to={formatTo} onClose={() => setFormatTo(null)}
                           onConfirm={() => act(() => videoEditApi.updateProject(id, { aspect_ratio: formatTo }))} />
            )}
          </section>

          <div className="vw-tabbar">
            <Tabs<Panel>
              tabs={[
                { id: "scenes", label: "Edit Scenes" },
                { id: "images", label: "Images/footage" },
                { id: "audio", label: "Audio" },
                { id: "settings", label: "Settings" },
              ]}
              value={panel}
              onChange={setPanel}
            />
            {aiEditsLeft !== null && <span className="muted small">AI edits left: {aiEditsLeft}</span>}
          </div>
          {panel === "scenes" && <SceneList {...panelProps} aiEditsLeft={aiEditsLeft} />}
          {panel === "images" && <ImagesPanel {...panelProps} />}
          {panel === "audio" && <VoicePanel {...panelProps} catalog={catalog} />}
          {panel === "settings" && <LookPanel {...panelProps} catalog={catalog} />}
        </div>
      )}
    </div>
  );
}

/** Script review: edit each scene, rewrite its narration to match, then approve. */
function ScriptReview({ id, onApproved }: { id: string; onApproved: () => void }) {
  const [scenes, setScenes] = useState<(ScriptScene & { source_fingerprint?: string; accepted_ai_instructions?: string[] })[] | null>(null);
  const [busy, setBusy] = useState<string | null>(null);
  const [revision, setRevision] = useState(0);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    videosApi.script(id).then((s) => setScenes(s.scenes)).catch((e) => setError(errorMessage(e)));
  }, [id]);

  const edit = (sid: number, patch: Partial<ScriptScene>) =>
    setScenes((list) => list?.map((s) => (s.id === sid ? { ...s, ...patch, source_fingerprint: undefined } : s)) ?? null);

  const draft = (s: ScriptScene) => ({
    title: s.title, display_text: s.display_text || s.title, narration_text: s.narration_text, revision: revision + 1,
    draft_scenes: (scenes ?? []).map((d) => ({ id: d.id, title: d.title, display_text: d.display_text, narration_text: d.narration_text })),
  });

  async function rewrite(s: ScriptScene) {
    setBusy(`n${s.id}`);
    setError(null);
    try {
      const res = await videosApi.narrationPreview(id, s.id, draft(s));
      setRevision(res.revision);
      setScenes((list) => list?.map((d) => (d.id === s.id ? {
        ...d, title: res.title, display_text: res.display_text, narration_text: res.narration_text,
        source_fingerprint: res.source_fingerprint,
      } : d)) ?? null);
    } catch (e) {
      setError(errorMessage(e));
    } finally {
      setBusy(null);
    }
  }

  async function approve() {
    setBusy("approve");
    setError(null);
    try {
      await videosApi.approveScript(id, scenes ?? []);
      onApproved();
    } catch (e) {
      setError(errorMessage(e));
      setBusy(null);
    }
  }

  return (
    <section className="card stack">
      <h2>Review the script</h2>
      <p className="muted">Edit any scene before the voiceover and visuals are made.</p>
      {!scenes && !error && <Loading label="Loading script" />}
      {scenes?.map((s, i) => (
        <div key={s.id} className="stack vw-scene">
          <strong className="mono">Scene {i + 1}</strong>
          <input className="input" value={s.title} maxLength={255} aria-label="Title" onChange={(e) => edit(s.id, { title: e.target.value })} />
          <textarea className="input" rows={2} value={s.display_text ?? ""} maxLength={3000} aria-label="On-screen text"
                    placeholder="On-screen text" onChange={(e) => edit(s.id, { display_text: e.target.value })} />
          <textarea className="input" rows={3} value={s.narration_text} maxLength={6000} aria-label="Narration"
                    onChange={(e) => edit(s.id, { narration_text: e.target.value })} />
          <div className="row wrap">
            <button className="btn btn-small" disabled={!!busy || !s.title.trim()} onClick={() => rewrite(s)}>
              {busy === `n${s.id}` ? "Rewriting..." : "Rewrite narration to match"}
            </button>
          </div>
        </div>
      ))}
      {error && <ErrorText message={error} />}
      <div className="row">
        <button className="btn btn-primary" onClick={approve} disabled={!!busy || !scenes}>
          {busy === "approve" ? "Starting..." : "Generate Video"}
        </button>
      </div>
    </section>
  );
}

type Format = "landscape" | "portrait";

/** blog2video's preview player without its own speed and caption controls: both are set in Settings, not by the
 * viewer (the embed reads ?hide= as a comma-separated list). */
function embedUrl(url: string): string {
  try {
    const u = new URL(url);
    u.searchParams.set("hide", "speed,captions");
    return u.toString();
  } catch {
    return url;
  }
}

/** Warning before stopping a render. Stays open (loading) until blog2video has stopped it. */
function CancelRenderModal({ onConfirm, onClose }: { onConfirm: () => Promise<boolean>; onClose: () => void }) {
  const [busy, setBusy] = useState(false);
  const [failed, setFailed] = useState(false);

  async function go() {
    setBusy(true);
    setFailed(false);
    const ok = await onConfirm();
    setBusy(false);
    if (ok) onClose();
    else setFailed(true);
  }

  return (
    <Modal title="Stop rendering?" onClose={busy ? () => undefined : onClose}>
      <div className="stack">
        <p>The MP4 won't be made and nothing is downloaded. Your edits stay as they are; you can render again any time.</p>
        {failed && <p className="error-text">Couldn't stop the render. Try again.</p>}
        <div className="vw-nav">
          <button className="btn" onClick={onClose} disabled={busy}>Keep rendering</button>
          <button className="btn btn-danger vw-delete-confirm" onClick={go} disabled={busy}>
            {busy ? "Stopping..." : "Stop rendering"}
          </button>
        </div>
      </div>
    </Modal>
  );
}

/** Download: the rendered MP4 now, or render (again) and download it automatically when it is up. */
function DownloadModal({ rendered, onDownloadNow, onRender, onClose }: {
  rendered: boolean; onDownloadNow: () => Promise<void>; onRender: () => Promise<void>; onClose: () => void;
}) {
  const [choice, setChoice] = useState<"now" | "render">(rendered ? "now" : "render");
  const [busy, setBusy] = useState(false);
  const options = rendered
    ? ([["now", "Download the rendered MP4", "The video as it was last rendered."],
        ["render", "Render again, then download", "Picks up your latest edits. Takes a few minutes; it downloads by itself when done."]] as const)
    : ([["render", "Render and download MP4", "Takes a few minutes. Keep this page open and it downloads by itself when done."]] as const);

  async function go() {
    setBusy(true);
    await (choice === "now" ? onDownloadNow() : onRender());
    setBusy(false);
    onClose();
  }

  return (
    <Modal title="Download MP4" onClose={busy ? () => undefined : onClose}>
      <div className="stack">
        <div className="vw-choice-list" role="radiogroup" aria-label="Download options">
          {options.map(([value, label, note]) => (
            <button key={value} type="button" role="radio" aria-checked={choice === value} disabled={busy}
                    className={choice === value ? "on" : ""} onClick={() => setChoice(value)}>
              <span className="vw-choice-dot" aria-hidden="true" />
              <span><strong>{label}</strong><small className="muted">{note}</small></span>
            </button>
          ))}
        </div>
        <div className="vw-nav">
          <button className="btn" onClick={onClose} disabled={busy}>Cancel</button>
          <button className="btn btn-primary" onClick={go} disabled={busy}>
            {busy ? <><span className="vw-spin small" aria-hidden="true" /> {choice === "now" ? "Preparing..." : "Starting..."}</>
              : choice === "now" ? "Download" : "Render and download"}
          </button>
        </div>
      </div>
    </Modal>
  );
}

/** Confirm a landscape <-> portrait switch. Stays open (loading) until it is saved and the video reloaded; the live
 * preview is keyed on the format, so it then reloads in the new shape. */
function FormatModal({ to, onConfirm, onClose }: { to: Format; onConfirm: () => Promise<boolean>; onClose: () => void }) {
  const [busy, setBusy] = useState(false);
  const [failed, setFailed] = useState(false);
  const portrait = to === "portrait";

  async function go() {
    setBusy(true);
    setFailed(false);
    const ok = await onConfirm();
    setBusy(false);
    if (ok) onClose();
    else setFailed(true);
  }

  return (
    <Modal title={portrait ? "Switch to portrait (9:16)?" : "Switch to landscape (16:9)?"} onClose={busy ? () => undefined : onClose}>
      <div className="stack">
        <p>
          {portrait ? "The video is laid out for phones (TikTok, Reels, Shorts)." : "The video is laid out for screens (YouTube, websites)."}{" "}
          Scenes, narration and media stay the same. The preview updates right away; render again for a new MP4.
        </p>
        {failed && <p className="error-text">Couldn't switch the format. Try again.</p>}
        <div className="vw-nav">
          <button className="btn" onClick={onClose} disabled={busy}>Cancel</button>
          <button className="btn btn-primary" onClick={go} disabled={busy}>
            {busy ? <><span className="vw-spin small" aria-hidden="true" /> Switching...</> : portrait ? "Switch to portrait" : "Switch to landscape"}
          </button>
        </div>
      </div>
    </Modal>
  );
}

function RenderPanel({ disabled, format, rendering, progress, onFormat, onDownload, onCancel }: {
  disabled: boolean; format: Format; rendering: boolean;
  progress?: number; onFormat: (f: Format) => void; onDownload: () => void; onCancel: () => void;
}) {
  return (
    <div className="stack">
      <div className="row wrap">
        {rendering ? (
          <div className="vw-render-row">
            {/* "Rendering MP4" and its % over a progress bar (0% until blog2video reports one); Cancel at the right end */}
            <span className="vw-render-status" role="status">
              <span className="vw-render-line">
                <span className="vw-spin small" aria-hidden="true" />
                <span>Rendering MP4</span>
                <span className="mono vw-render-pct">{progress ?? 0}%</span>
              </span>
              <span className="vw-render-bar" aria-hidden="true"><span style={{ width: `${Math.max(2, Math.min(100, progress ?? 0))}%` }} /></span>
            </span>
            <button className="btn btn-small" onClick={onCancel}>Cancel</button>
          </div>
        ) : (
          <>
            <div className="vw-format-toggle" role="radiogroup" aria-label="Video format">
              {([["portrait", "Portrait (9:16), for phones", <PhoneIcon key="p" />],
                 ["landscape", "Landscape (16:9), for screens", <ScreenIcon key="l" />]] as const).map(([f, label, icon]) => (
                <button key={f} type="button" role="radio" aria-checked={format === f} aria-label={label} title={label}
                        className={`vw-format-icon${format === f ? " on" : ""}`} disabled={disabled}
                        onClick={() => format !== f && onFormat(f)}>
                  {icon}
                </button>
              ))}
            </div>
            <button className="btn btn-primary btn-small" disabled={disabled} onClick={onDownload}>
              <DownloadIcon size={16} /> Download
            </button>
          </>
        )}
      </div>
    </div>
  );
}

/** Made through the old blog2video integration: it can not be edited any more, but the links we stored still work. */
function LegacyVideoView({ video, onRemove }: { video: LegacyVideo; onRemove: () => Promise<void> }) {
  const videoUrl = video.video_url ?? video.artifact.url ?? null;
  return (
    <div className="page-wrap">
      <PageHeader eyebrow="Videos" title={video.artifact.title ?? "Video"}>
        <StatusPill status={video.artifact.status} />
        <ConfirmButton onConfirm={onRemove}>Remove</ConfirmButton>
      </PageHeader>
      <section className="card stack">
        <p className="notice">This video was made before the video service changed, so it can no longer be edited.</p>
        {videoUrl ? (
          <video src={videoUrl} controls />
        ) : video.preview_url ? (
          <div className="vw-preview">
            <iframe src={embedUrl(video.preview_url)} title="Preview" allow="autoplay; fullscreen" allowFullScreen loading="lazy" />
          </div>
        ) : (
          <p className="muted">No finished video was saved for it.</p>
        )}
      </section>
    </div>
  );
}