Blame for frontend/src/pages/VideoCreate.tsx

import { useCallback, useEffect, useRef, useState } from "react";
import { Link, useNavigate, useSearchParams } from "react-router-dom";
import { videosApi, videoVoicesApi, voiceApi } from "../api/endpoints";
import type {
  VideoCatalog,
  VideoConfig,
  VideoCreateBody,
  VideoFocusSource,
  VideoFocusTopic,
  VideoOptions,
  VideoQuota,
  VideoSavedVoice,
  VideoStyleItem,
  VideoTemplate,
  VideoVoicesResponse,
} from "../api/types";
import { Dropdown } from "../components/Dropdown";
import { CheckIcon, SparkleIcon } from "../components/icons/Icons";
import { ErrorText, errorMessage, Loading, PageHeader } from "../components/ui";
import { SourcePicker, type VideoSource } from "../components/video/SourcePicker";
import { loadArchiveId, sourceCache } from "../components/video/sourceCache";
import { PlayButton, TemplateThumb, useAudio } from "../components/video/parts";
import { useUpgrade } from "../hooks/useUpgrade";

const FALLBACK_COLORS = { accent_color: "#7c3aed", bg_color: "#ffffff", text_color: "#000000" };

/** A template and the colours it was designed with. */
const templateFields = (t: VideoTemplate) => ({
  template: t.id,
  accent_color: t.preview_colors?.accent ?? FALLBACK_COLORS.accent_color,
  bg_color: t.preview_colors?.bg ?? FALLBACK_COLORS.bg_color,
  text_color: t.preview_colors?.text ?? FALLBACK_COLORS.text_color,
});

const cap = (s?: string | null) => (s ? s[0].toUpperCase() + s.slice(1) : "");

function Steps({ step }: { step: number }) {
  const names = ["Project", "Template", "Voice"];
  return (
    <div className="vw-steps" aria-label={`Step ${step} of 3: ${names[step - 1]}`}>
      <ol>
        {names.map((name, i) => (
          <li key={i} className={i + 1 < step ? "done" : i + 1 === step ? "on" : ""} title={name}
              aria-current={i + 1 === step ? "step" : undefined}>
            <span>{i + 1 < step ? <CheckIcon size={14} /> : i + 1}</span>
          </li>
        ))}
      </ol>
    </div>
  );
}

/** The New video page (/app/videos/new?notebook_id=… | document_id=…). */
export default function VideoCreate() {
  const [params] = useSearchParams();
  return <VideoCreateForm startNotebook={params.get("notebook_id")} startDoc={params.get("document_id")} />;
}

/** The three-step video wizard: as a page, or inside a modal (inModal: no page header, no step-1 Back, no outer card;
 * the modal's own close button leaves it). */
export function VideoCreateForm({ startNotebook = null, startDoc = null, inModal = false }: {
  startNotebook?: string | null; startDoc?: string | null; inModal?: boolean;
}) {
  const navigate = useNavigate();
  const { openUpgrade } = useUpgrade();

  const [config, setConfig] = useState<VideoConfig | null>(null);
  const [catalog, setCatalog] = useState<VideoCatalog | null>(null);
  const [voices, setVoices] = useState<VideoVoicesResponse | null>(null);
  const [quota, setQuota] = useState<VideoQuota | null>(null);
  const [loadError, setLoadError] = useState<string | null>(null);

  const [step, setStep] = useState(1);
  const [source, setSource] = useState<VideoSource | null>(
    startNotebook ? { kind: "notebook", id: startNotebook } : startDoc ? { kind: "post", id: startDoc }
      : sourceCache.archiveId ? { kind: "notebook", id: sourceCache.archiveId } : null,
  );
  const [postIds, setPostIds] = useState<string[]>([]);
  // Step 1's "focus on": the AI's three suggestions for the source chosen (sourceKey), and the one picked (none =
  // the whole material).
  const [topics, setTopics] = useState<VideoFocusTopic[] | null>(null);
  const topicsFor = useRef(""); // the sourceKey of the suggestions shown or on their way
  const [focus, setFocus] = useState<VideoFocusTopic | null>(null);
  // Or the user's own topic: one or the other (or neither, for a general video).
  const [custom, setCustom] = useState("");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const { playing, play, stop } = useAudio();

  /** Notestack voices have no stored sample: the Voice page speaks a line in them. */
  function playVoice(v: VideoSavedVoice) {
    if (v.source !== "notestack") return play(v.voice_id, v.preview_url);
    if (playing === v.voice_id) return stop();
    voiceApi.preview(v.voice_id).then((r) => play(v.voice_id, r.url)).catch((e) => setError(errorMessage(e)));
  }

  const [form, setForm] = useState<VideoOptions>({
    stock_footage_enabled: true,
    aspect_ratio: "landscape",
    video_length: "medium", // no length picker: the server sets it from a house style
    logo_position: "bottom_right",
    logo_opacity: 0.9,
    template: "default",
    video_style: "auto",
    ...FALLBACK_COLORS,
    content_language: null,
    voice_gender: "female",
    voice_accent: "american",
    bgm_volume: 0.1,
  });
  const set = (patch: Partial<VideoOptions>) => setForm((f) => ({ ...f, ...patch }));
  const gridBox = useRef<HTMLDivElement>(null);

  const loadVoices = useCallback(
    () => videoVoicesApi.list().then((v) => {
      setVoices(v);
      return v;
    }),
    [],
  );

  useEffect(() => {
    videosApi.config().then(setConfig).catch((e) => setLoadError(errorMessage(e)));
    videosApi.quota().then(setQuota).catch(() => undefined);
    // Nothing picked on the way in: start from every post, in the "All posts" notebook.
    if (!startNotebook && !startDoc && !sourceCache.archiveId) {
      loadArchiveId().then((id) => setSource((s) => s ?? { kind: "notebook", id })).catch(() => undefined);
    }
  }, [startNotebook, startDoc]);

  useEffect(() => {
    if (!config?.configured) return;
    videosApi.catalog().then((c) => {
      setCatalog(c);
      // Start on a random built-in template, unless the form already names a real one.
      const first = c.templates[Math.floor(Math.random() * c.templates.length)];
      const known = new Set([...c.my_templates, ...c.templates].map((t) => t.id));
      if (first) setForm((f) => (known.has(f.template) ? f : { ...f, ...templateFields(first) }));
      // Start on the first house style (Overview) unless the form already names one on offer.
      const house = c.video_styles.filter((s) => s.kind === "house");
      if (house.length) setForm((f) => (house.some((s) => s.id === f.video_style) ? f : { ...f, video_style: house[0].id }));
    }).catch((e) => setLoadError(errorMessage(e)));
    loadVoices()
      .then((v) => v.saved[0] && pickVoice(v.saved[0]))
      .catch(() => setVoices({ saved: [], library: [], notestack: [] }));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [config?.configured]);

  // Keep the chosen template visible inside the template grid's own scroll box (never scrolls the page).
  useEffect(() => {
    const box = gridBox.current;
    const card = box?.querySelector<HTMLElement>(`[data-id="${CSS.escape(form.template)}"]`);
    if (!box || !card) return;
    const top = card.offsetTop; // the box is position: relative, so this is measured from its top
    if (top < box.scrollTop || top + card.offsetHeight > box.scrollTop + box.clientHeight) {
      box.scrollTop = top - 8;
    }
  }, [form.template, step, catalog]);

  const templates = catalog?.templates ?? [];
  const shown: VideoTemplate[] = templates;
  // The house styles alone when the account has them; otherwise "Auto" and the rest, as before.
  const listed = catalog?.video_styles ?? [];
  const houseStyles = listed.some((s) => s.kind === "house");
  const styles: VideoStyleItem[] = houseStyles ? listed : [{ id: "auto", name: "Auto", kind: "builtin" }, ...listed];
  const picked = styles.find((s) => s.id === form.video_style);
  // A video speaks in a free built-in voice; a Notestack voice (made on the Voice page) is for audio overviews.
  const saved = (voices?.saved ?? []).filter((v) => v.source !== "notestack");
  const left = quota ? Math.max(quota.limit - quota.used, 0) : null;

  function pickTemplate(t: VideoTemplate) {
    set(templateFields(t));
  }

  function pickVoice(v: VideoSavedVoice) {
    setForm((f) => ({
      ...f,
      voice_gender: v.gender === "male" ? "male" : "female",
      voice_accent: v.accent === "british" ? "british" : "american",
      custom_voice_id: v.voice_id,
    }));
  }

  const sourceReady = source?.kind === "post" || (source?.kind === "notebook" && postIds.length > 0);

  /** Step 1's choice as API fields: the same for the focus suggestions and the create. */
  const sourceFields = (): VideoFocusSource | null => !source ? null
    : source.kind === "post" ? { document_id: source.id }
    : { document_ids: postIds, notebook_id: source.id };
  // The focus suggestions belong to one source choice. They are asked for as soon as the choice is complete and show
  // below it on step 1; a new source or other ticks asks again. The short wait lets a run of ticks settle into one
  // request.
  const sourceKey = !source ? ""
    : `${source.kind}:${source.id}:${source.kind === "notebook" ? [...postIds].sort().join(",") : ""}`;

  useEffect(() => {
    if (!sourceReady || sourceKey === topicsFor.current) return;
    const fields = sourceFields();
    if (!fields) return;
    const timer = setTimeout(() => {
      topicsFor.current = sourceKey;
      setTopics(null);
      setFocus(null);
      // An answer for a choice that has since changed is dropped (topicsFor moved on). A failure counts as no
      // topics: the block hides, and this choice is not asked again.
      videosApi.focusTopics(fields)
        .then((r) => topicsFor.current === sourceKey && setTopics(r.topics))
        .catch(() => topicsFor.current === sourceKey && setTopics([]));
    }, 600);
    return () => clearTimeout(timer);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [sourceKey, sourceReady]);
  // Suggestions made for an earlier choice are never shown for this one: the cards wait for the new ones (and so
  // does Go to step 2). null = still loading; [] = none to show.
  const shownTopics = topicsFor.current === sourceKey ? topics : null;

  /** The focus for the create: a suggested topic, the user's own, or none (a general video). */
  function focusFields(): Pick<VideoCreateBody, "focus" | "focus_detail" | "focus_prompt"> {
    if (focus) return { focus: focus.title, focus_detail: focus.description };
    return custom.trim() ? { focus_prompt: custom.trim() } : {};
  }

  function options(): VideoOptions {
    const o: VideoOptions = { ...form };
    if (o.voice_gender === "none") delete o.custom_voice_id;
    return o;
  }

  async function submit() {
    setError(null);
    setBusy(true);
    try {
      const from = sourceFields();
      if (!from) return;
      const a = await videosApi.create({ ...options(), ...from, ...focusFields() });
      navigate(`/app/videos/${a.id}`);
    } catch (e) {
      setError(errorMessage(e)); // 402 also opens the upgrade popup (api/client.ts)
      setBusy(false);
    }
  }

  if (loadError) {
    return (
      <div className={inModal ? "vw-in-modal" : "page-wrap"}>
        {!inModal && <PageHeader eyebrow="Videos" title="New video" />}
        <ErrorText message={loadError} page />
      </div>
    );
  }
  if (!config) return <Loading label="Loading" center="full" />;
  if (!config.configured) {
    return (
      <div className={inModal ? "vw-in-modal" : "page-wrap"}>
        {!inModal && <PageHeader eyebrow="Videos" title="New video" />}
        <p className="notice">Video is not set up on this server yet.</p>
      </div>
    );
  }

  const currentVoice = saved.find((v) => v.voice_id === form.custom_voice_id);

  return (
    <div className={inModal ? "stack vw-in-modal" : "page-wrap"}>
      {inModal ? (
        left !== null && <span className="mono muted small vw-modal-quota">{left} of {quota!.limit} video{quota!.limit === 1 ? "" : "s"} left</span>
      ) : (
        <PageHeader eyebrow="Videos" title="New video">
          {left !== null && (
            <span className="mono muted">{left} of {quota!.limit} video{quota!.limit === 1 ? "" : "s"} left</span>
          )}
        </PageHeader>
      )}

      {step === 1 && !inModal && (
        // Leaves the wizard for wherever it was opened from. Steps 2 and 3 have their own Back at the bottom.
        <button type="button" className="vw-back"
                onClick={() => (window.history.length > 1 ? navigate(-1) : navigate("/app/archive?tab=videos"))}>
          Back
        </button>
      )}
      <Steps step={step} />
      <section className={inModal ? "stack vw" : "card stack vw"}>

        {/* Stays mounted on steps 2 and 3, so going Back keeps the loaded posts and the ticks */}
        <div style={{ display: step === 1 ? "contents" : "none" }}>
          <SourcePicker source={source} onSource={setSource} postIds={postIds} onPostIds={setPostIds} />
        </div>

        {step === 1 && (
          <>

            {/* Landscape with stock footage, always: the form's defaults, no picker */}
            <div className="vw-style-row">
              <div className="field">
                <span className="vw-label">Video style</span>
                {catalog === null ? <Loading label="Loading styles" /> : (
                  <div className="vw-chips vw-style-chips">
                    {styles.map((s) => (
                      <button key={s.id} type="button" className={`vw-chip${form.video_style === s.id ? " on" : ""}`}
                              aria-pressed={form.video_style === s.id} title={s.description ?? undefined}
                              onClick={() => set({ video_style: s.id })}>
                        {s.name}{s.kind === "custom" ? " (yours)" : ""}
                      </button>
                    ))}
                  </div>
                )}
                {houseStyles && picked?.description && (
                  <small className="muted vw-style-note">{picked.description}</small>
                )}
              </div>
            </div>

            {/* The suggestions are asked for as soon as the source is ready (hidden if there are none); the custom
                topic is always there */}
            {sourceReady && (
              <div className="field vw-focus">
                <span className="vw-label">What should the video focus on?</span>
                {shownTopics?.length !== 0 && (
                  <div className="vw-focus-grid" aria-busy={shownTopics === null}>
                    {shownTopics === null
                      ? [0, 1, 2].map((i) => (
                        <div key={i} className="vw-focus-card wait" aria-hidden="true">
                          <SparkleIcon size={16} />
                          <span className="vw-focus-text">
                            <span className="vw-focus-bar" />
                            <span className="vw-focus-bar short" />
                          </span>
                        </div>
                      ))
                      : shownTopics.map((t) => {
                        const on = focus?.title === t.title;
                        return (
                          <button key={t.title} type="button" className={`vw-focus-card${on ? " on" : ""}`}
                                  aria-pressed={on} onClick={() => {
                                    setFocus(on ? null : t);
                                    setCustom("");
                                  }}>
                            <SparkleIcon size={16} />
                            <span className="vw-focus-text">
                              <strong>{t.title}</strong>
                              {t.description && <small className="vw-focus-desc">{t.description}</small>}
                            </span>
                            {on && <CheckIcon size={16} />}
                          </button>
                        );
                      })}
                  </div>
                )}
                <label className={`vw-focus-custom${custom.trim() ? " on" : ""}`}>
                  <span className="vw-focus-custom-head">Custom topic</span>
                  <textarea rows={2} maxLength={500} value={custom}
                            placeholder="Describe your own, e.g. how rebalancing protects a long-term portfolio"
                            onFocus={() => setFocus(null)} // choosing the custom topic unpicks a suggested one
                            onChange={(e) => {
                              setCustom(e.target.value);
                              setFocus(null);
                            }} />
                  <span className="vw-focus-custom-foot">
                    <small className="muted">
                      Keep it to what the selected posts cover; anything they don't cover is left out of the video.
                    </small>
                    <small className="muted mono">{custom.length}/500</small>
                  </span>
                </label>
                
              </div>
            )}

            {error && <ErrorText message={error} />}
            <div className="vw-nav">
              {/* Waits for the focus suggestions (shown, or none to show), so they are never skipped past */}
              <button className="btn btn-primary vw-next" disabled={!sourceReady || shownTopics === null}
                      onClick={() => setStep(2)}>
                Go to step 2
              </button>
            </div>
          </>
        )}

        {step === 2 && (
          <>
            <div>
              {catalog === null ? (
                <Loading label="Loading templates" />
              ) : shown.length === 0 ? (
                <p className="muted">No templates available.</p>
              ) : (
                <div className="vw-templates-scroll" ref={gridBox}>
                <div className="vw-templates">
                  {shown.map((t) => (
                    <button key={t.id} type="button" data-id={t.id} className={`vw-template${form.template === t.id ? " on" : ""}`}
                            aria-pressed={form.template === t.id} onClick={() => pickTemplate(t)}>
                      <TemplateThumb template={t} portrait={form.aspect_ratio === "portrait"} />
                      {t.custom ? <span className="vw-badge mono">Yours</span>
                        : (t.badge || t.popular_template) && <span className="vw-badge mono">{t.badge ?? "Popular"}</span>}
                      <strong>{t.name}</strong>
                      {form.template === t.id && <span className="vw-template-check" aria-hidden="true"><CheckIcon size={14} /></span>}
                    </button>
                  ))}
                </div>
                </div>
              )}
            </div>

            <div className="vw-style-row">
              <div className="field">
                <span className="vw-label">Video colors</span>
                <div className="vw-colors">
                  {([["accent_color", "Accent"], ["bg_color", "Background"], ["text_color", "Text"]] as const).map(([k, label]) => (
                    <label key={k} className="vw-color">
                      <input type="color" value={form[k] ?? "#000000"} onChange={(e) => set({ [k]: e.target.value })} aria-label={label} />
                      <span>{label}</span>
                    </label>
                  ))}
                </div>
              </div>
            </div>

            <div className="vw-nav">
              <button className="btn" onClick={() => setStep(1)}>Back</button>
              <button className="btn btn-primary vw-next" onClick={() => setStep(3)}>
                Go to step 3
              </button>
            </div>
          </>
        )}

        {step === 3 && (
          <>
            <div className="field">
              <span className="vw-label">Language</span>
              {/* "" is Auto: the language is detected from the content */}
              <Dropdown
                label="Language"
                value={form.content_language ?? ""}
                options={[
                  { value: "", label: "Auto", hint: "Detect from the content" },
                  ...(catalog?.languages ?? []).map((l) => ({ value: l.code, label: l.name })),
                ]}
                onChange={(v) => set({ content_language: v || null })}
              />
              <small className="muted">Language of the video content</small>
            </div>

            <label className="vw-option">
              <input type="checkbox" checked={form.voice_gender === "none"}
                     onChange={(e) => {
                       if (e.target.checked) return set({ voice_gender: "none" });
                       const v = currentVoice ?? saved[0];
                       if (v) pickVoice(v);
                       else set({ voice_gender: "female" });
                     }} />
              No voiceover
            </label>

            <span className="vw-label">Voice: play to preview</span>

            <div className={`stack${form.voice_gender === "none" ? " vw-dim" : ""}`}>
              {voices === null ? (
                <Loading label="Loading voices" />
              ) : saved.length === 0 ? (
                <p className="muted">No voices yet. Add some in <Link to="/app/voices">Manage voices</Link>.</p>
              ) : (
                <div className="vw-voice-list vw-voice-list-compact" role="radiogroup" aria-label="Narration voice">
                  {saved.map((v) => {
                    const on = form.custom_voice_id === v.voice_id && form.voice_gender !== "none";
                    return (
                      <div key={v.voice_id} className={`vw-vrow${on ? " on" : ""}`}>
                        <PlayButton on={playing === v.voice_id} disabled={v.source !== "notestack" && !v.preview_url}
                                    label={v.name} onClick={() => playVoice(v)} />
                        <button type="button" role="radio" aria-checked={on} className="vw-vpick"
                                disabled={form.voice_gender === "none"} onClick={() => pickVoice(v)}>
                          <strong>{v.name}</strong>
                          <span className="muted">{[cap(v.gender), cap(v.accent)].filter(Boolean).join(" • ")}</span>
                        </button>
                        {on && <span className="vw-hero-check"><CheckIcon size={14} /></span>}
                      </div>
                    );
                  })}
                </div>
              )}
            </div>

            {error && <ErrorText message={error} />}
            {left === 0 && (
              <p className="notice">
                You have used all your videos{quota?.resets_at ? " this period" : " on your plan"}.{" "}
                <button type="button" className="link-btn" onClick={() => openUpgrade()}>See plans</button>
              </p>
            )}
            <div className="vw-nav">
              <button className="btn" onClick={() => setStep(2)} disabled={busy}>Back</button>
              <button className="btn btn-primary vw-next" onClick={submit} disabled={busy}>
                {busy ? "Launching..." : "Generate Video"}
              </button>
            </div>
          </>
        )}
      </section>

    </div>
  );
}