import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import type { Background, ExportJob, Layout, OutputSettings, PublicConfig, Segment, Take, TakeCrop, Transcript, Video } from '../../shared/types.ts';
import { MATTE_RESOLUTIONS, OUTPUT_HEIGHTS, backgroundOf, cropOf, exportSignature, matteBelowSetting, systemVolumeOf } from '../../shared/types.ts';
import { computeGeometry, placeCropped } from '../../shared/layout.ts';
import { cutRange, locate, moveSegment, randomId, segDuration, segmentStarts, splitAt, timelineDuration } from '../../shared/timeline.ts';
import { navigate } from '../App.tsx';
import { api } from '../api.ts';
import { Icon } from '../components/Icon.tsx';
import { CropDialog } from '../components/CropDialog.tsx';
import { ConfirmDialog, type ConfirmRequest } from '../components/Modal.tsx';
import { Stage, captureFrame } from '../components/Stage.tsx';
import { Timeline, takeHue, type PeaksData } from '../components/Timeline.tsx';
import { TranscriptPanel } from '../components/TranscriptPanel.tsx';
import { decodePeaks, fmtBytes, fmtDateTime, fmtDuration, fmtTimecode, loadPref, savePref } from '../lib/format.ts';
import { TimelinePlayer, usePlayerPlaying, usePlayerTime } from '../lib/player.ts';

type Tab = 'details' | 'transcript' | 'export';
type Marks = { in: number | null; out: number | null };
const NO_MARKS: Marks = { in: null, out: null };
const FRAME = 1 / 30;
const isLeft = (c: string) => c === 'tl' || c === 'bl';

// Keep locally edited fields; take server-managed fields (takes, thumbnail, export) from `fresh`.
function mergeServer(v: Video, fresh: Video): Video {
  const takes = JSON.stringify(v.takes) === JSON.stringify(fresh.takes) ? v.takes : fresh.takes;
  return { ...v, takes, thumbnail: fresh.thumbnail, export: fresh.export };
}

export function VideoPage({ videoId }: { videoId: string }) {
  const [video, setVideo] = useState<Video | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [notice, setNotice] = useState<string | null>(null);
  const [config, setConfig] = useState<PublicConfig | null>(null);
  const [tab, setTabState] = useState<Tab>(() => loadPref('takes.editor', { tab: 'details' as Tab }).tab);
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [marks, setMarks] = useState<Marks>(NO_MARKS);
  const [history, setHistory] = useState<Segment[][]>([]);
  const [future, setFuture] = useState<Segment[][]>([]);
  const [peaks, setPeaks] = useState<Record<string, PeaksData>>({});
  const [transcripts, setTranscripts] = useState<Record<string, Transcript>>({});
  const [job, setJob] = useState<ExportJob | null>(null);
  const [confirm, setConfirm] = useState<ConfirmRequest | null>(null);
  const [cropping, setCropping] = useState<{ take: Take; time: number } | null>(null);
  const [zoom, setZoom] = useState(1);
  const [saveState, setSaveState] = useState<'saved' | 'saving' | 'error'>('saved');
  const player = useMemo(() => new TimelinePlayer(), []);

  const setTab = (t: Tab) => {
    setTabState(t);
    savePref('takes.editor', { tab: t });
  };

  useEffect(() => () => player.destroy(), [player]);

  useEffect(() => {
    api
      .video(videoId)
      .then((v) => {
        setVideo(v);
        document.title = `${v.title} · Takes`;
      })
      .catch((e) => setError(e.message));
    api.config().then(setConfig).catch(() => {});
    api.exportStatus(videoId).then(setJob).catch(() => {});
  }, [videoId]);

  useEffect(() => {
    if (video) player.setData(video.timeline, video.takes);
  }, [video?.timeline, video?.takes, player]);

  // ---- saving (debounced PATCH of edited fields) ----
  const pending = useRef<Partial<Video>>({});
  const timer = useRef(0);
  const flush = useCallback(async () => {
    clearTimeout(timer.current);
    const p = pending.current;
    pending.current = {};
    if (Object.keys(p).length === 0) return;
    setSaveState('saving');
    try {
      await api.patchVideo(videoId, p);
      setSaveState('saved');
    } catch (e) {
      setSaveState('error');
      setError(`Could not save: ${(e as Error).message}`);
    }
  }, [videoId]);

  const patch = useCallback(
    (p: Partial<Video>, delay = 500) => {
      setVideo((v) => (v ? { ...v, ...p } : v));
      pending.current = { ...pending.current, ...p };
      clearTimeout(timer.current);
      timer.current = window.setTimeout(flush, delay);
    },
    [flush],
  );

  useEffect(() => {
    const onUnload = () => {
      if (Object.keys(pending.current).length === 0) return;
      fetch(`/api/videos/${videoId}`, {
        method: 'PATCH',
        keepalive: true,
        headers: { 'Content-Type': 'application/json', 'X-Takes': '1' },
        body: JSON.stringify(pending.current),
      });
    };
    window.addEventListener('pagehide', onUnload);
    return () => {
      window.removeEventListener('pagehide', onUnload);
      flush();
    };
  }, [videoId, flush]);

  // ---- peaks and transcripts ----
  const requested = useRef(new Map<string, string>());
  useEffect(() => {
    if (!video) return;
    for (const t of video.takes) {
      if (t.status !== 'ready' || !t.audio) continue;
      const pk = `peaks/${t.id}`;
      if (!requested.current.has(pk)) {
        requested.current.set(pk, '1');
        api.peaks(videoId, t.id).then((p) => p && setPeaks((m) => ({ ...m, [t.id]: { rate: p.rate, values: decodePeaks(p.data) } })));
      }
      const tk = `transcript/${t.id}`;
      if (t.transcript?.status === 'done' && requested.current.get(tk) !== t.transcript.updatedAt) {
        requested.current.set(tk, t.transcript.updatedAt);
        api.transcript(videoId, t.id).then((tr) => tr && setTranscripts((m) => ({ ...m, [t.id]: tr })));
      }
    }
  }, [video?.takes, videoId]);

  // ---- polling while the server is working ----
  const busy =
    !!video &&
    (video.takes.some((t) => t.status === 'processing' || t.transcript?.status === 'pending' || t.matte?.status === 'queued' || t.matte?.status === 'running') ||
      job?.status === 'running');

  // With a background chosen, make sure every camera take gets processed (including takes recorded later).
  const bgMode = video ? backgroundOf(video.layout).mode : 'none';
  const unprocessed = video?.takes.filter((t) => t.status === 'ready' && t.tracks.camera && !t.matte).map((t) => t.id).join(',') ?? '';
  useEffect(() => {
    if (bgMode === 'none' || !unprocessed) return;
    api
      .requestMattes(videoId)
      .then((fresh) => setVideo((v) => (v ? mergeServer(v, fresh) : v)))
      .catch((e) => setError(e.message));
  }, [bgMode, unprocessed, videoId]);
  useEffect(() => {
    if (!busy) return;
    const iv = setInterval(async () => {
      try {
        const j = await api.exportStatus(videoId);
        const fresh = await api.video(videoId);
        setJob(j);
        setVideo((v) => (v ? mergeServer(v, fresh) : v));
      } catch {
        // try again on the next tick
      }
    }, 1000);
    return () => clearInterval(iv);
  }, [busy, videoId]);

  const flashNotice = (msg: string) => {
    setNotice(msg);
    setTimeout(() => setNotice((n) => (n === msg ? null : n)), 2500);
  };

  // ---- timeline editing ----
  const tl = video?.timeline ?? [];
  const now = () => player.getSnapshot().time;

  const commit = (next: Segment[]) => {
    if (!video || next === video.timeline) return;
    setHistory((h) => [...h.slice(-199), video.timeline]);
    setFuture([]);
    patch({ timeline: next }, 300);
  };
  const undo = () => {
    if (!video || history.length === 0) return;
    setFuture((f) => [video.timeline, ...f]);
    patch({ timeline: history[history.length - 1] }, 300);
    setHistory((h) => h.slice(0, -1));
  };
  const redo = () => {
    if (!video || future.length === 0) return;
    setHistory((h) => [...h, video.timeline]);
    patch({ timeline: future[0] }, 300);
    setFuture((f) => f.slice(1));
  };

  const hasRange = marks.in !== null && marks.out !== null && marks.out > marks.in;
  const split = () => commit(splitAt(tl, now()));
  const cutMarked = () => {
    if (!hasRange) return;
    commit(cutRange(tl, marks.in!, marks.out!));
    setMarks(NO_MARKS);
    setTimeout(() => player.seek(marks.in!), 0);
  };
  const currentSeg = () => {
    const loc = locate(tl, now());
    return loc ? { index: loc.index, start: segmentStarts(tl)[loc.index], seg: tl[loc.index] } : null;
  };
  const trimStart = () => {
    const c = currentSeg();
    if (!c) return;
    commit(cutRange(tl, c.start, now()));
    setTimeout(() => player.seek(c.start), 0);
  };
  const trimEnd = () => {
    const c = currentSeg();
    if (c) commit(cutRange(tl, now(), c.start + segDuration(c.seg)));
  };
  const deleteSelected = () => {
    if (!selectedId) return;
    commit(tl.filter((s) => s.id !== selectedId));
    setSelectedId(null);
  };
  const moveSelected = (delta: number) => {
    const i = tl.findIndex((s) => s.id === selectedId);
    if (i >= 0) commit(moveSegment(tl, i, delta));
  };
  const markIn = () => setMarks((m) => ({ in: now(), out: m.out !== null && m.out > now() ? m.out : null }));
  const markOut = () => setMarks((m) => ({ in: m.in !== null && m.in < now() ? m.in : null, out: now() }));

  const setThumbnail = async () => {
    if (!video) return;
    const blob = await captureFrame(video, player);
    if (!blob) return;
    try {
      const fresh = await api.uploadThumbnail(videoId, blob);
      setVideo((v) => (v ? mergeServer(v, fresh) : v));
      flashNotice('Thumbnail updated');
    } catch (e) {
      setError((e as Error).message);
    }
  };

  // ---- keyboard shortcuts ----
  const keyHandler = useRef<(e: KeyboardEvent) => void>(() => {});
  keyHandler.current = (e: KeyboardEvent) => {
    const el = e.target as HTMLElement;
    if (el.closest('input, textarea, select, [contenteditable]') || confirm || cropping) return;
    const mod = e.ctrlKey || e.metaKey;
    const k = e.key;
    const step = e.shiftKey ? 5 : 1;
    if (mod && k.toLowerCase() === 'z') (e.shiftKey ? redo : undo)();
    else if (mod && k.toLowerCase() === 'y') redo();
    else if (mod) return;
    else if (k === ' ') player.toggle();
    else if (k === 'ArrowLeft') player.seek(now() - step);
    else if (k === 'ArrowRight') player.seek(now() + step);
    else if (k === ',') player.seek(now() - FRAME);
    else if (k === '.') player.seek(now() + FRAME);
    else if (k === 'Home') player.seek(0);
    else if (k === 'End') player.seek(player.duration);
    else if (k === 's' || k === 'S') split();
    else if (k === 'i' || k === '[') markIn();
    else if (k === 'o' || k === ']') markOut();
    else if (k === 'x' || k === 'X') cutMarked();
    else if (k === 'Delete' || k === 'Backspace') (hasRange ? cutMarked : deleteSelected)();
    else if (k === 'Escape') {
      setMarks(NO_MARKS);
      setSelectedId(null);
    } else return;
    e.preventDefault();
  };
  useEffect(() => {
    const on = (e: KeyboardEvent) => keyHandler.current(e);
    window.addEventListener('keydown', on);
    return () => window.removeEventListener('keydown', on);
  }, []);

  if (error && !video)
    return (
      <div className="page">
        <div className="banner error">{error}</div>
        <a href="#/">Back to videos</a>
      </div>
    );
  if (!video) return <div className="page loading">Loading…</div>;

  const readyTakes = video.takes.filter((t) => t.status === 'ready');
  const takeNumber = (id: string) => video.takes.findIndex((t) => t.id === id) + 1;
  const duration = timelineDuration(video.timeline);
  const stale = !!video.export && video.export.signature !== exportSignature(video);

  // ---- take actions ----
  const refresh = (fresh: Video) => setVideo((v) => (v ? mergeServer(v, fresh) : v));
  const replaceFromServer = async (op: () => Promise<Video>) => {
    await flush();
    try {
      const fresh = await op();
      setVideo(fresh);
      setHistory([]);
      setFuture([]);
    } catch (e) {
      setError((e as Error).message);
    }
  };
  const addToTimeline = (t: Take) => commit([...tl, { id: randomId(), takeId: t.id, start: 0, end: t.duration }]);
  const askDeleteTake = (t: Take) =>
    setConfirm({
      title: `Delete take ${takeNumber(t.id)}?`,
      message: 'The recording will be permanently deleted from disk, and any parts of it in the timeline will be removed.',
      confirmLabel: 'Delete take',
      danger: true,
      onConfirm: () => replaceFromServer(() => api.deleteTake(videoId, t.id)),
    });
  const transcribe = async (takeId: string) => {
    try {
      refresh(await api.transcribe(videoId, takeId));
    } catch (e) {
      setError((e as Error).message);
    }
  };
  const startExport = async () => {
    await flush();
    try {
      setJob(await api.startExport(videoId));
    } catch (e) {
      setError((e as Error).message);
    }
  };
  const setLayout = (l: Partial<Layout>) => patch({ layout: { ...video.layout, ...l } }, 200);
  const setOutput = (o: Partial<OutputSettings>) => patch({ output: { ...video.output, ...o } }, 200);
  const background = backgroundOf(video.layout);
  const setBackground = (b: Partial<Background>) => setLayout({ background: { ...background, ...b } });
  const startMatte = async (takeId: string) => {
    try {
      refresh(await api.requestMattes(videoId, takeId));
    } catch (e) {
      setError((e as Error).message);
    }
  };
  const cancelMatte = async (takeId?: string) => {
    try {
      refresh(await api.cancelMattes(videoId, takeId));
    } catch (e) {
      setError((e as Error).message);
    }
  };
  const openCrop = (t: Take) => {
    // Show the frame under the playhead if it is in this take.
    const loc = locate(tl, now());
    setCropping({ take: t, time: loc && tl[loc.index].takeId === t.id ? loc.takeTime : 0 });
  };
  // Replace this take's crop; with applyToAll, also give each track's crop to every other take that has that track.
  const saveCrop = (take: Take, crop: TakeCrop, applyToAll: boolean) => {
    const crops = { ...video.crops };
    const targets = applyToAll ? readyTakes : [take];
    for (const t of targets) {
      const next: TakeCrop = { ...crops[t.id] };
      for (const track of ['screen', 'camera'] as const) {
        if (!take.tracks[track] || !t.tracks[track]) continue;
        if (crop[track]) next[track] = crop[track];
        else delete next[track];
      }
      if (next.screen || next.camera) crops[t.id] = next;
      else delete crops[t.id];
    }
    patch({ crops }, 200);
  };
  const cameraTakes = readyTakes.filter((t) => t.tracks.camera);
  const matteActive = cameraTakes.some((t) => t.matte?.status === 'queued' || t.matte?.status === 'running');
  // The largest camera box in the output and the number of camera lines it shows (more when the
  // camera is cropped), as a guide for the processing resolution.
  const cameraBox = cameraTakes.reduce<{ w: number; h: number; lines: number } | null>((best, t) => {
    const cam = computeGeometry(video.layout, video.output, t.tracks.screen, true).camera;
    if (!cam) return best;
    const lines = Math.round(cam.box.h / (cropOf(video, t.id, 'camera')?.h ?? 1));
    return !best || lines > best.lines ? { w: cam.box.w, h: cam.box.h, lines } : best;
  }, null);
  // How much the export scales the screen down, for the timeline take where it is scaled most, at
  // each output height: 1 or more shows the recording at full size. Takes recorded before the
  // screen size was stored are left out until the server has probed them.
  const screenScale = (take: Take, height: OutputSettings['height']) => {
    const box = computeGeometry(video.layout, { ...video.output, height }, true, take.tracks.camera).screen;
    if (!box || !take.screenSize) return null;
    const { width, height: h } = take.screenSize;
    const crop = cropOf(video, take.id, 'screen');
    return placeCropped(box, width, h, crop, 'contain').clip.w / ((crop?.w ?? 1) * width);
  };
  const screenFit = [...new Set(video.timeline.map((s) => s.takeId))]
    .map((id) => readyTakes.find((t) => t.id === id))
    .reduce<{ take: Take; scale: number } | null>((worst, t) => {
      const scale = t ? screenScale(t, video.output.height) : null;
      return t && scale !== null && (!worst || scale < worst.scale) ? { take: t, scale } : worst;
    }, null);
  const fullSizeAt = screenFit ? OUTPUT_HEIGHTS.find((h) => (screenScale(screenFit.take, h) ?? 0) >= 0.995) : undefined;
  // Takes in the timeline whose camera appears in the output but has not had its background removed yet.
  const matteBlocking =
    background.mode === 'none'
      ? []
      : [...new Set(video.timeline.map((s) => s.takeId))]
          .map((id) => video.takes.find((t) => t.id === id)!)
          .filter((t) => t && t.matte?.status !== 'done' && computeGeometry(video.layout, video.output, t.tracks.screen, t.tracks.camera).camera);

  const anyBoth = readyTakes.some((t) => t.tracks.screen && t.tracks.camera);

  return (
    <div className="page editor">
      <header className="topbar">
        <a className="btn ghost" href="#/" onClick={() => flush()}>
          <Icon name="back" /> Videos
        </a>
        <input className="title-input" value={video.title} onChange={(e) => patch({ title: e.target.value })} aria-label="Title" />
        <span className={`save-state ${saveState}`}>{saveState === 'saving' ? 'Saving…' : saveState === 'error' ? 'Not saved' : 'Saved'}</span>
        <div className="spacer" />
        <button className="btn ghost" onClick={() => api.openFolder(videoId).catch((e) => setError(e.message))} title="Open this video's folder">
          <Icon name="folder" /> Folder
        </button>
        <button
          className="btn record"
          onClick={async () => {
            await flush();
            navigate(`video/${videoId}/record`);
          }}
        >
          <Icon name="record" /> Record take
        </button>
      </header>

      {error && (
        <div className="banner error" onClick={() => setError(null)}>
          {error} <span className="muted">(click to dismiss)</span>
        </div>
      )}
      {notice && <div className="toast">{notice}</div>}

      <div className="editor-grid">
        <section className="editor-main">
          {video.takes.length === 0 ? (
            <div className="empty">
              <h2>No takes yet</h2>
              <p className="muted">Record your camera, your screen, or both. You can record several takes and combine them.</p>
              <button className="btn record big" onClick={() => navigate(`video/${videoId}/record`)}>
                <Icon name="record" /> Record first take
              </button>
            </div>
          ) : (
            <>
              <Stage video={video} player={player} />
              <div className="transport">
                <PlayButton player={player} />
                <TimeDisplay player={player} duration={duration} />
                <div className="sep" />
                <button className="icon-btn" title="Undo (Ctrl+Z)" disabled={history.length === 0} onClick={undo}>
                  <Icon name="undo" />
                </button>
                <button className="icon-btn" title="Redo (Ctrl+Shift+Z)" disabled={future.length === 0} onClick={redo}>
                  <Icon name="redo" />
                </button>
                <div className="sep" />
                <button className="icon-btn" title="Split at playhead (S)" onClick={split}>
                  <Icon name="split" />
                </button>
                <button className="icon-btn" title="Trim: cut from start of this segment to playhead" onClick={trimStart}>
                  <Icon name="trimStart" />
                </button>
                <button className="icon-btn" title="Trim: cut from playhead to end of this segment" onClick={trimEnd}>
                  <Icon name="trimEnd" />
                </button>
                <div className="sep" />
                <button className="btn small" title="Mark in (I)" onClick={markIn}>
                  In
                </button>
                <button className="btn small" title="Mark out (O)" onClick={markOut}>
                  Out
                </button>
                <button className="btn small danger" title="Cut marked range (X)" disabled={!hasRange} onClick={cutMarked}>
                  <Icon name="scissors" /> Cut {hasRange ? fmtTimecode(marks.out! - marks.in!) : ''}
                </button>
                <div className="sep" />
                <button className="icon-btn" title="Move selected segment earlier" disabled={!selectedId} onClick={() => moveSelected(-1)}>
                  <Icon name="left" />
                </button>
                <button className="icon-btn" title="Move selected segment later" disabled={!selectedId} onClick={() => moveSelected(1)}>
                  <Icon name="right" />
                </button>
                <button className="icon-btn danger" title="Remove selected segment (Delete)" disabled={!selectedId} onClick={deleteSelected}>
                  <Icon name="trash" />
                </button>
                <div className="spacer" />
                <label className="zoom" title="Timeline zoom">
                  <span className="muted small">Zoom</span>
                  <input type="range" min={1} max={20} step={0.5} value={zoom} onChange={(e) => setZoom(parseFloat(e.target.value))} />
                </label>
                <button className="icon-btn" title="Use current frame as thumbnail" onClick={setThumbnail}>
                  <Icon name="image" />
                </button>
              </div>
              <Timeline segments={video.timeline} takeNumber={takeNumber} player={player} selectedId={selectedId} onSelect={setSelectedId} marks={marks} peaks={peaks} zoom={zoom} />
              <p className="shortcuts muted small">
                Space play/pause · ←/→ 1 s (Shift 5 s) · , / . one frame · S split · I / O mark in/out · X cut marked · Delete remove segment · Ctrl+Z undo
              </p>

              <h3 className="section-title">Takes</h3>
              <div className="takes">
                {video.takes.map((t) => (
                  <TakeCard
                    key={t.id}
                    take={t}
                    n={takeNumber(t.id)}
                    inTimeline={video.timeline.some((s) => s.takeId === t.id)}
                    cropped={!!(video.crops?.[t.id]?.screen || video.crops?.[t.id]?.camera)}
                    onAdd={() => addToTimeline(t)}
                    onCrop={() => openCrop(t)}
                    onDelete={() => askDeleteTake(t)}
                    onRecover={() => replaceFromServer(() => api.finalizeTake(videoId, t.id))}
                  />
                ))}
              </div>
            </>
          )}
        </section>

        <aside className="editor-side">
          <div className="tabs">
            <button className={tab === 'details' ? 'active' : ''} onClick={() => setTab('details')}>
              Details
            </button>
            <button className={tab === 'transcript' ? 'active' : ''} onClick={() => setTab('transcript')}>
              Transcript
            </button>
            <button className={tab === 'export' ? 'active' : ''} onClick={() => setTab('export')}>
              Layout &amp; export
            </button>
          </div>

          {tab === 'details' && (
            <div className="panel">
              <label className="field">
                <span>Description</span>
                <textarea rows={4} value={video.description} onChange={(e) => patch({ description: e.target.value })} />
              </label>
              <label className="field grow">
                <span>Notes (teleprompter)</span>
                <textarea className="notes" value={video.notes} onChange={(e) => patch({ notes: e.target.value })} />
              </label>
              <p className="muted small">Created {fmtDateTime(video.createdAt)}</p>
            </div>
          )}

          {tab === 'transcript' && (
            <div className="panel">
              <TranscriptPanel
                segments={video.timeline}
                takes={video.takes}
                transcripts={transcripts}
                takeNumber={takeNumber}
                player={player}
                marks={marks}
                onMarks={setMarks}
                onCut={cutMarked}
                onTranscribe={transcribe}
                hasKey={!!config?.hasDeepgramKey}
              />
            </div>
          )}

          {tab === 'export' && (
            <div className="panel">
              <h4>Camera and screen layout</h4>
              {!anyBoth && <p className="muted small">These apply to takes that have both camera and screen.</p>}
              <div className="seg-control">
                {(
                  [
                    ['pip', 'Picture in picture'],
                    ['side-by-side', 'Side by side'],
                    ['screen-only', 'Screen'],
                    ['camera-only', 'Camera'],
                  ] as const
                ).map(([m, label]) => (
                  <button key={m} className={video.layout.mode === m ? 'active' : ''} onClick={() => setLayout({ mode: m })}>
                    {label}
                  </button>
                ))}
              </div>
              {(video.layout.mode === 'pip' || video.layout.mode === 'side-by-side') && (
                <div className="field">
                  <span>{video.layout.mode === 'pip' ? 'Corner' : 'Camera side'}</span>
                  <div className="seg-control">
                    {(video.layout.mode === 'pip'
                      ? ([
                          ['tl', 'Top left'],
                          ['tr', 'Top right'],
                          ['bl', 'Bottom left'],
                          ['br', 'Bottom right'],
                        ] as const)
                      : ([
                          ['bl', 'Left'],
                          ['br', 'Right'],
                        ] as const)
                    ).map(([c, label]) => (
                      <button
                        key={c}
                        className={(video.layout.mode === 'pip' ? video.layout.corner === c : isLeft(video.layout.corner) === isLeft(c)) ? 'active' : ''}
                        onClick={() => setLayout({ corner: c })}
                      >
                        {label}
                      </button>
                    ))}
                  </div>
                </div>
              )}
              {video.layout.mode === 'pip' && (
                <>
                  <label className="field">
                    <span>Camera size ({Math.round(video.layout.size * 100)}% of width)</span>
                    <input type="range" min={0.12} max={0.45} step={0.01} value={video.layout.size} onChange={(e) => setLayout({ size: parseFloat(e.target.value) })} />
                  </label>
                  <div className="field">
                    <span>Shape</span>
                    <div className="seg-control">
                      {(
                        [
                          ['rect', 'Rectangle'],
                          ['rounded', 'Rounded'],
                          ['circle', 'Circle'],
                        ] as const
                      ).map(([s, label]) => (
                        <button key={s} className={video.layout.shape === s ? 'active' : ''} onClick={() => setLayout({ shape: s })}>
                          {label}
                        </button>
                      ))}
                    </div>
                  </div>
                </>
              )}

              {cameraTakes.length > 0 && (
                <>
                  <h4>Background behind you</h4>
                  <div className="seg-control">
                    {(
                      [
                        ['none', 'Original'],
                        ['blur', 'Blur'],
                        ['color', 'Color'],
                        ['cutout', 'Cutout'],
                      ] as const
                    ).map(([m, label]) => (
                      <button
                        key={m}
                        className={background.mode === m ? 'active' : ''}
                        title={m === 'cutout' ? 'Picture in picture only: just you, over the screen' : undefined}
                        onClick={() => setBackground({ mode: m })}
                      >
                        {label}
                      </button>
                    ))}
                  </div>
                  {background.mode === 'cutout' && video.layout.mode !== 'pip' && (
                    <p className="muted small">Cutout applies to picture in picture; with this layout the color below is used instead.</p>
                  )}
                  {(background.mode === 'color' || (background.mode === 'cutout' && video.layout.mode !== 'pip')) && (
                    <label className="row">
                      <span className="small muted">Color</span>
                      <input type="color" value={background.color} onChange={(e) => setBackground({ color: e.target.value })} />
                    </label>
                  )}
                  {background.mode === 'blur' && (
                    <label className="field">
                      <span>Blur strength</span>
                      <input type="range" min={4} max={50} step={1} value={background.blur} onChange={(e) => setBackground({ blur: parseInt(e.target.value) })} />
                    </label>
                  )}
                  {background.mode !== 'none' && (
                    <>
                      <div className="field">
                        <span>Processing resolution</span>
                        <div className="seg-control">
                          {MATTE_RESOLUTIONS.map((r) => (
                            <button key={r} className={background.resolution === r ? 'active' : ''} onClick={() => setBackground({ resolution: r })}>
                              {r}p
                            </button>
                          ))}
                        </div>
                      </div>
                      {cameraBox && (
                        <p className="muted small">
                          The camera box is {cameraBox.w}×{cameraBox.h} px in the {video.output.height}p output
                          {cameraBox.lines > cameraBox.h ? `, which shows about ${cameraBox.lines} lines of the cropped camera` : ''}. Processing time grows with the number of pixels, so a resolution a little above that is usually enough.
                        </p>
                      )}
                      <div className="matte-status">
                        {cameraTakes.map((t) => (
                          <div key={t.id} className="row small">
                            <span>Take {takeNumber(t.id)}:</span>
                            <MatteStatus take={t} background={background} onStart={() => startMatte(t.id)} onCancel={() => cancelMatte(t.id)} />
                          </div>
                        ))}
                        {matteActive && (
                          <div className="row">
                            <button className="btn small" onClick={() => cancelMatte()}>
                              Cancel all
                            </button>
                          </div>
                        )}
                        <p className="muted small">
                          Background removal runs on {config?.matteHost ? <code>{config.matteHost}</code> : 'this computer'} (Robust Video Matting) and is done once per take.
                        </p>
                      </div>
                    </>
                  )}
                </>
              )}

              <h4>Output</h4>
              <div className="field">
                <span>Resolution</span>
                <div className="seg-control">
                  {OUTPUT_HEIGHTS.map((h) => (
                    <button key={h} className={video.output.height === h ? 'active' : ''} onClick={() => setOutput({ height: h })}>
                      {h}p
                    </button>
                  ))}
                </div>
              </div>
              {screenFit?.take.screenSize && (
                <p className="muted small">
                  The screen was recorded at {screenFit.take.screenSize.width}×{screenFit.take.screenSize.height}
                  {screenFit.scale >= 0.995
                    ? `, which ${video.output.height}p shows at full size.`
                    : `; ${video.output.height}p shows it at ${Math.round(screenFit.scale * 100)}% of that size. ` +
                      (fullSizeAt ? `${fullSizeAt}p shows it at full size.` : `Even ${OUTPUT_HEIGHTS[OUTPUT_HEIGHTS.length - 1]}p scales it down.`)}{' '}
                  Higher resolutions export more slowly and make larger files.
                </p>
              )}
              <label className="check">
                <input type="checkbox" checked={video.output.normalizeAudio} onChange={(e) => setOutput({ normalizeAudio: e.target.checked })} />
                Normalize loudness (−16 LUFS)
              </label>
              {readyTakes.some((t) => t.systemAudio) && (
                <label className="field">
                  <span>Computer audio level ({Math.round(systemVolumeOf(video.output) * 100)}%)</span>
                  <input type="range" min={0} max={1} step={0.05} value={systemVolumeOf(video.output)} onChange={(e) => setOutput({ systemVolume: parseFloat(e.target.value) })} />
                </label>
              )}

              <div className="export-box">
                {job?.status === 'running' ? (
                  <>
                    <div className="progress">
                      <div style={{ width: `${Math.round(job.progress * 100)}%` }} />
                    </div>
                    <p className="small muted">Exporting… {Math.round(job.progress * 100)}%</p>
                  </>
                ) : (
                  <button
                    className="btn primary"
                    disabled={video.timeline.length === 0 || matteBlocking.length > 0}
                    title={matteBlocking.length > 0 ? 'Waiting for background removal to finish' : undefined}
                    onClick={startExport}
                  >
                    <Icon name="film" /> {video.export ? 'Export again' : 'Export MP4'}
                  </button>
                )}
                {job?.status !== 'running' && matteBlocking.length > 0 && (
                  <p className="small muted">Export will be available once background removal has finished for the takes in the timeline.</p>
                )}
                {job?.status === 'failed' && <p className="small error-text">Export failed: {job.error}</p>}
                {video.export && (
                  <div className="export-info">
                    <div>
                      <a href={`/media/${videoId}/${video.export.file}`} target="_blank" rel="noreferrer">
                        {video.export.file}
                      </a>{' '}
                      <span className="muted small">
                        {fmtDuration(video.export.duration)} · {fmtBytes(video.export.bytes)} · {fmtDateTime(video.export.exportedAt)}
                      </span>
                    </div>
                    {stale && <p className="small warn-text">The timeline, layout, or crop changed since this export.</p>}
                    <button className="btn small" onClick={() => api.openFolder(videoId).catch((e) => setError(e.message))}>
                      <Icon name="folder" /> Show in folder
                    </button>
                  </div>
                )}
              </div>
            </div>
          )}
        </aside>
      </div>

      {confirm && <ConfirmDialog req={confirm} onClose={() => setConfirm(null)} />}
      {cropping && (
        <CropDialog
          video={video}
          take={cropping.take}
          initialTime={cropping.time}
          onSave={(crop, all) => saveCrop(cropping.take, crop, all)}
          onClose={() => setCropping(null)}
        />
      )}
    </div>
  );
}

function MatteStatus({ take, background, onStart, onCancel }: { take: Take; background: Background; onStart: () => void; onCancel: () => void }) {
  const m = take.matte;
  const cancel = (
    <button className="btn small" onClick={onCancel}>
      Cancel
    </button>
  );
  if (!m) return <span className="muted">waiting</span>;
  if (m.status === 'done')
    return (
      <>
        <span className="ok-text">done{m.height ? ` (${m.height}p)` : ''}</span>
        {matteBelowSetting(m, background) && (
          <button className="btn small" onClick={onStart}>
            Redo at {background.resolution}p
          </button>
        )}
      </>
    );
  if (m.status === 'queued')
    return (
      <>
        <span className="muted">queued</span>
        {cancel}
      </>
    );
  if (m.status === 'running')
    return (
      <>
        <span className="muted">{m.stage ?? 'Starting'}</span>
        {m.progress !== undefined && (
          <>
            <div className="progress mini">
              <div style={{ width: `${Math.round(m.progress * 100)}%` }} />
            </div>
            <span className="muted">{Math.round(m.progress * 100)}%</span>
          </>
        )}
        {cancel}
      </>
    );
  if (m.status === 'cancelled')
    return (
      <>
        <span className="muted">cancelled</span>
        <button className="btn small" onClick={onStart}>
          Start
        </button>
      </>
    );
  return (
    <>
      <span className="error-text" title={m.error}>
        failed
      </span>
      <button className="btn small" onClick={onStart}>
        Retry
      </button>
    </>
  );
}

function PlayButton({ player }: { player: TimelinePlayer }) {
  const playing = usePlayerPlaying(player);
  return (
    <button className="icon-btn play" title="Play/pause (Space)" onClick={() => player.toggle()}>
      <Icon name={playing ? 'pause' : 'play'} size={18} />
    </button>
  );
}

function TimeDisplay({ player, duration }: { player: TimelinePlayer; duration: number }) {
  const time = usePlayerTime(player);
  return (
    <span className="timecode">
      {fmtTimecode(time)} <span className="muted">/ {fmtTimecode(duration)}</span>
    </span>
  );
}

function TakeCard({
  take,
  n,
  inTimeline,
  cropped,
  onAdd,
  onCrop,
  onDelete,
  onRecover,
}: {
  take: Take;
  n: number;
  inTimeline: boolean;
  cropped: boolean;
  onAdd: () => void;
  onCrop: () => void;
  onDelete: () => void;
  onRecover: () => void;
}) {
  return (
    <div className="take" style={{ ['--hue' as string]: takeHue(n) }}>
      <div className="take-head">
        <span className="take-swatch" />
        <strong>Take {n}</strong>
        <span className="kinds">
          {take.tracks.camera && <Icon name="camera" size={14} />}
          {take.tracks.screen && <Icon name="screen" size={14} />}
          {take.audio && <Icon name="mic" size={14} />}
          {take.systemAudio && <Icon name="speaker" size={14} />}
        </span>
      </div>
      <div className="small muted">
        {fmtDateTime(take.createdAt)}
        {take.status === 'ready' && ` · ${fmtDuration(take.duration)}`}
        {take.transcript?.status === 'done' && ' · transcribed'}
        {take.transcript?.status === 'pending' && ' · transcribing…'}
        {cropped && ' · cropped'}
        {take.matte?.status === 'done' && ' · background removed'}
        {(take.matte?.status === 'queued' || take.matte?.status === 'running') && ' · removing background…'}
      </div>
      {take.status === 'processing' && <div className="small">Processing…</div>}
      {(take.status === 'recording' || take.status === 'failed') && (
        <div className="small warn-text">{take.status === 'failed' ? `Failed: ${take.error}` : 'Interrupted recording (not finalized)'}</div>
      )}
      <div className="take-actions">
        {take.status === 'ready' && (
          <button className="btn small" onClick={onAdd} title="Append the whole take to the end of the timeline">
            <Icon name="plus" /> {inTimeline ? 'Add again' : 'Add to timeline'}
          </button>
        )}
        {take.status === 'ready' && (take.tracks.screen || take.tracks.camera) && (
          <button className="btn small" onClick={onCrop} title="Crop the screen or camera of this take">
            <Icon name="crop" /> Crop
          </button>
        )}
        {(take.status === 'recording' || take.status === 'failed') && (
          <button className="btn small" onClick={onRecover} title="Try to finalize whatever was recorded">
            Recover
          </button>
        )}
        <button className="icon-btn danger" onClick={onDelete} title="Delete take">
          <Icon name="trash" />
        </button>
      </div>
    </div>
  );
}