"use client";
import { useEffect, useRef, useState, type PointerEvent, type ReactNode } from "react";
import {
  X,
  ChevronDown,
  Download,
  Frame,
  Play,
  Pause,
  Maximize,
  Type,
  Magnet,
  Plus,
  Volume2,
  VolumeX,
  Undo2,
  Redo2,
  ZoomIn,
  ZoomOut,
  Shrink,
  Expand,
  Eye,
  EyeOff,
  Search,
} from "lucide-react";
import { EditPreview } from "./EditPreview";
import { TransitionPreview } from "./TransitionPreview";
import styles from "./SmartEditEditor.module.css";
import {
  planTimeline,
  editableCaptions,
  defaultCaptionStyle,
  SECOND,
  type EditPlan,
  type TimelineCaption,
  type CaptionStyle,
  type AudioClip,
  defaultVideoTransform,
} from "@/lib/video-canvas/smart-edit/contract";
import type { CanvasGenerationTask } from "@/lib/video-canvas/task-contract";
import { downloadCanvasMedia } from "@/lib/video-canvas/download";

const transitionNames = { fade: "淡入淡出", fadeblack: "黑场过渡", fadewhite: "白场过渡" };
const stamp = (s: number) =>
  `${String(Math.floor(s / 60)).padStart(2, "0")}:${String(Math.floor(s % 60)).padStart(2, "0")}`;
const frameStamp = (s: number) =>
  `00:${stamp(s)}:${String(Math.floor(s * 30) % 30).padStart(2, "0")}`;
const clamp = (v: number, min: number, max: number) => Math.max(min, Math.min(max, v));
function Icon({
  title,
  children,
  onClick,
  active = false,
  disabled = false,
  extra = "",
}: {
  title: string;
  children: ReactNode;
  onClick: () => void;
  active?: boolean;
  disabled?: boolean;
  extra?: string;
}) {
  return (
    <button
      type="button"
      aria-label={title}
      title={title}
      aria-pressed={active || undefined}
      className={`se-icon ${active ? "active" : ""} ${extra}`}
      disabled={disabled}
      onClick={onClick}
    >
      {children}
    </button>
  );
}
function Thumb({ url, time, width }: { url: string; time: number; width?: number }) {
  return (
    <video
      style={width ? { width } : undefined}
      src={`${url}#t=${time.toFixed(3)}`}
      muted
      playsInline
      preload="metadata"
      aria-hidden="true"
      onLoadedMetadata={(e) => {
        e.currentTarget.currentTime = time;
      }}
    />
  );
}
export function SmartEditEditor({
  plan,
  onChange,
  onClose,
  onConfigure,
  onRender,
  tasks,
  canRender,
  exportState,
  onExportState,
}: {
  plan: EditPlan;
  onChange: (p: EditPlan) => void;
  onClose: () => void;
  onConfigure: () => void;
  onRender: (p: EditPlan) => Promise<unknown>;
  tasks: CanvasGenerationTask[];
  canRender: boolean;
  exportState?: { requestId: string; destination: "local" | "canvas" };
  onExportState: (
    value: { requestId: string; destination: "local" | "canvas" } | undefined,
  ) => void;
}) {
  const [time, setTime] = useState(0),
    [playing, setPlaying] = useState(false),
    [selected, setSelected] = useState<string>(),
    [draggedClip, setDraggedClip] = useState<{ id: string; offset: number }>(),
    [panel, setPanel] = useState<"video" | "audio" | "caption" | "transition" | null>(null),
    [audioId, setAudioId] = useState<string>(),
    [panelWidth, setPanelWidth] = useState(300),
    [libraryWidth, setLibraryWidth] = useState(372),
    [captionsOpen, setCaptionsOpen] = useState(false),
    [subTab, setSubTab] = useState<"list" | "text">("list"),
    [captionId, setCaptionId] = useState<string>(),
    [transitionsOpen, setTransitionsOpen] = useState(false),
    [transitionIndex, setTransitionIndex] = useState(1),
    [loopTransition, setLoopTransition] = useState(false),
    [zoom, setZoom] = useState(20),
    [viewportWidth, setViewportWidth] = useState(() =>
      typeof window === "undefined" ? 1280 : window.innerWidth,
    ),
    [snap, setSnap] = useState(false),
    [collapsed, setCollapsed] = useState(false),
    [timelineHeight, setTimelineHeight] = useState(() =>
      typeof window === "undefined" ? 244 : Math.round(window.innerHeight * 0.35) - 8,
    ),
    [exportOpen, setExportOpen] = useState(false),
    [error, setError] = useState(() => plan.warnings.join("；")),
    [busy, setBusy] = useState(false),
    [search, setSearch] = useState(""),
    [context, setContext] = useState<{
      x: number;
      y: number;
      kind: "clip" | "audio" | "caption" | "timeline";
    }>();
  const root = useRef<HTMLDivElement>(null),
    preview = useRef<HTMLDivElement>(null),
    scroll = useRef<HTMLDivElement>(null),
    trackLabels = useRef<HTMLDivElement>(null);
  const resized = useRef(false);
  useEffect(() => {
    const resize = () => {
      setViewportWidth(window.innerWidth);
      if (!resized.current) setTimelineHeight(Math.round(window.innerHeight * 0.35) - 8);
    };
    window.addEventListener("resize", resize);
    return () => window.removeEventListener("resize", resize);
  }, []);
  const undo = useRef<EditPlan[]>([]),
    redo = useRef<EditPlan[]>([]),
    latest = useRef(plan),
    downloaded = useRef<string>();
  latest.current = plan;
  const timeline = planTimeline(plan),
    duration = timeline.duration / SECOND,
    pps = 25 * 2 ** (zoom / 10),
    clipIndex = plan.clips.findIndex((c) => c.id === selected),
    clip = plan.clips[clipIndex],
    audioClip = plan.audioClips?.find((c) => c.id === audioId),
    captions = editableCaptions(plan),
    caption = captions.find((s) => s.id === captionId),
    captionStyle = caption?.style || defaultCaptionStyle;
  const pending = exportState && tasks.find((t) => t.requestId === exportState.requestId);
  const exportWaiting =
    busy ||
    Boolean(
      exportState && (!pending || ["pending", "running", "interrupted"].includes(pending.status)),
    );
  const resultUrl =
    pending?.status === "succeeded" ? (pending.result?.url as string | undefined) : undefined;
  const apply = (next: EditPlan, history = true) => {
    try {
      planTimeline(next);
      if (history) {
        undo.current.push(latest.current);
        if (undo.current.length > 50) undo.current.shift();
        redo.current = [];
      }
      setPlaying(false);
      setError("");
      onChange(next);
    } catch (e) {
      setError((e as Error).message);
    }
  };
  const changeClip = (index: number, patch: Partial<EditPlan["clips"][number]>) =>
    apply({ ...plan, clips: plan.clips.map((c, i) => (i === index ? { ...c, ...patch } : c)) });
  const changeAudio = (id: string, patch: Partial<AudioClip>) =>
    apply({
      ...plan,
      audioClips: (plan.audioClips || []).map((c) => (c.id === id ? { ...c, ...patch } : c)),
    });
  const detachAudio = () => {
    if (!clip || clip.audioDetached || !plan.assets.find((a) => a.id === clip.assetId)?.hasAudio)
      return;
    if ((plan.audioClips?.length || 0) >= 24) {
      setError("最多24个独立音频片段");
      return;
    }
    const id = crypto.randomUUID(),
      t = timeline.clips[clipIndex],
      next = timeline.clips[clipIndex + 1];
    apply({
      ...plan,
      clips: plan.clips.map((c) => (c.id === clip.id ? { ...c, audioDetached: true } : c)),
      audioClips: [
        ...(plan.audioClips || []),
        {
          id,
          assetId: clip.assetId,
          sourceIn: clip.sourceIn,
          sourceOut: clip.sourceOut,
          speed: clip.speed,
          gain: clip.gain,
          start: t.start,
          fadeIn: (t.overlap - t.padBefore) / SECOND,
          fadeInStart: t.overlap ? t.padBefore / t.overlap : 0,
          fadeOut: next ? (next.overlap - t.padAfter) / SECOND : 0,
          fadeOutEnd: next?.overlap ? t.padAfter / next.overlap : 0,
        },
      ],
    });
    setSelected(undefined);
    setAudioId(id);
    setPanel("audio");
    setContext(undefined);
  };
  const changeCaption = (id: string, patch: Partial<TimelineCaption>) =>
    apply({ ...plan, captions: captions.map((s) => (s.id === id ? { ...s, ...patch } : s)) });
  const changeStyle = (patch: Partial<CaptionStyle>) => {
    if (caption) changeCaption(caption.id, { style: { ...captionStyle, ...patch } });
  };
  const seek = (seconds: number) => {
    setLoopTransition(false);
    setTime(clamp(seconds, 0, duration));
    setPlaying(false);
  };
  const position = (clientX: number) => {
    const el = scroll.current;
    return el
      ? clamp((clientX - el.getBoundingClientRect().left + el.scrollLeft) / pps, 0, duration)
      : 0;
  };
  const snapped = (seconds: number) => {
    if (!snap) return seconds;
    const values = [
      0,
      time,
      duration,
      ...timeline.clips.flatMap((c) => [c.start / SECOND, c.end / SECOND]),
      ...timeline.audioClips.flatMap((c) => [c.start / SECOND, c.end / SECOND]),
    ];
    return values.find((v) => Math.abs(v - seconds) * pps < 8) ?? seconds;
  };
  const [, setHistoryRevision] = useState(0);
  const dragCleanup = useRef<() => void>();
  useEffect(() => () => dragCleanup.current?.(), []);
  const drag = (
    e: PointerEvent,
    move: (event: globalThis.PointerEvent) => void,
    finish?: () => void,
  ) => {
    e.preventDefault();
    e.stopPropagation();
    dragCleanup.current?.();
    const original = latest.current;
    const el = e.currentTarget as HTMLElement;
    el.setPointerCapture(e.pointerId);
    const cleanup = () => {
      window.removeEventListener("pointermove", move);
      window.removeEventListener("pointerup", end);
      window.removeEventListener("pointercancel", cancel);
      dragCleanup.current = undefined;
    };
    const end = () => {
      cleanup();
      finish?.();
      setHistoryRevision((value) => value + 1);
    };
    const cancel = () => {
      setDraggedClip(undefined);
      if (latest.current !== original) onChange(original);
      cleanup();
    };
    dragCleanup.current = cleanup;
    window.addEventListener("pointermove", move);
    window.addEventListener("pointerup", end);
    window.addEventListener("pointercancel", cancel);
  };
  const columnResize = (e: PointerEvent, side: "left" | "right") => {
    const x = e.clientX,
      initial = side === "left" ? libraryWidth : panelWidth;
    drag(e, (event) => {
      const value = clamp(
        initial + (event.clientX - x) * (side === "left" ? 1 : -1),
        side === "left" ? 280 : 240,
        Math.max(
          300,
          innerWidth - (side === "left" ? panelWidth : transitionsOpen ? libraryWidth : 0) - 220,
        ),
      );
      (side === "left" ? setLibraryWidth : setPanelWidth)(value);
    });
  };
  const dragTrim = (e: PointerEvent, index: number, side: "left" | "right") => {
    const original = plan,
      c = plan.clips[index],
      startX = e.clientX,
      asset = plan.assets.find((a) => a.id === c.assetId)!;
    let next = original;
    drag(
      e,
      (event) => {
        const delta = ((event.clientX - startX) / pps) * SECOND * c.speed;
        const value = Math.round(
          side === "left"
            ? clamp(c.sourceIn + delta, 0, c.sourceOut - 200000)
            : clamp(c.sourceOut + delta, c.sourceIn + 200000, asset.duration),
        );
        next = {
          ...original,
          clips: original.clips.map((item, i) =>
            i === index ? { ...item, [side === "left" ? "sourceIn" : "sourceOut"]: value } : item,
          ),
        };
        try {
          planTimeline(next);
          onChange(next);
        } catch {
          next = latest.current;
        }
      },
      () => {
        undo.current.push(original);
        redo.current = [];
        setPlaying(false);
      },
    );
  };
  const dragClip = (e: PointerEvent, index: number) => {
    if ((e.target as HTMLElement).closest(".se-handle")) return;
    const x = e.clientX,
      original = plan,
      id = plan.clips[index].id;
    setSelected(id);
    setPanel("video");
    setCaptionId(undefined);
    setPlaying(false);
    let moved = false,
      destination = index;
    drag(
      e,
      (event) => {
        if (Math.abs(event.clientX - x) < 6 && !moved) return;
        moved = true;
        setDraggedClip({ id, offset: event.clientX - x });
        const point = position(event.clientX) * SECOND;
        destination = timeline.clips.findIndex((c) => point >= c.start && point < c.end);
        if (destination < 0) destination = point >= timeline.duration ? plan.clips.length - 1 : 0;
      },
      () => {
        setDraggedClip(undefined);
        if (moved && destination !== index) {
          const clips = [...original.clips];
          clips.splice(destination, 0, clips.splice(index, 1)[0]);
          apply({ ...original, clips });
        }
      },
    );
  };
  const dragCaptionEdge = (e: PointerEvent, caption: TimelineCaption, side: "start" | "end") => {
    const x = e.clientX,
      original = plan;
    drag(
      e,
      (event) => {
        const point = Math.round(
          snapped(caption[side] / SECOND + (event.clientX - x) / pps) * SECOND,
        );
        const value =
          side === "start"
            ? clamp(point, 0, caption.end - 100000)
            : clamp(point, caption.start + 100000, timeline.duration);
        onChange({
          ...original,
          captions: captions.map((s) => (s.id === caption.id ? { ...s, [side]: value } : s)),
        });
      },
      () => {
        undo.current.push(original);
        redo.current = [];
        setPlaying(false);
      },
    );
  };
  const dragAudio = (e: PointerEvent, c: AudioClip, side?: "left" | "right") => {
    const original = plan,
      x = e.clientX,
      asset = plan.assets.find((a) => a.id === c.assetId)!;
    setAudioId(c.id);
    setSelected(undefined);
    setPanel("audio");
    setPlaying(false);
    drag(
      e,
      (event) => {
        const delta = ((event.clientX - x) / pps) * SECOND;
        let patch: Partial<AudioClip>;
        if (side === "left") {
          const sourceIn = Math.round(
            clamp(
              c.sourceIn + delta * c.speed,
              Math.max(0, c.sourceIn - c.start * c.speed),
              c.sourceOut - 200000,
            ),
          );
          patch = { sourceIn, start: Math.round(c.start + (sourceIn - c.sourceIn) / c.speed) };
        } else if (side === "right")
          patch = {
            sourceOut: Math.round(
              clamp(
                c.sourceOut + delta * c.speed,
                c.sourceIn + 200000,
                Math.min(asset.duration, c.sourceIn + (300 * SECOND - c.start) * c.speed),
              ),
            ),
          };
        else
          patch = {
            start: Math.round(
              clamp(
                snapped((c.start + delta) / SECOND) * SECOND,
                0,
                300 * SECOND - (c.sourceOut - c.sourceIn) / c.speed,
              ),
            ),
          };
        const next = {
          ...original,
          audioClips: original.audioClips!.map((a) => (a.id === c.id ? { ...a, ...patch } : a)),
        };
        try {
          planTimeline(next);
          onChange(next);
        } catch {}
      },
      () => {
        undo.current.push(original);
        redo.current = [];
      },
    );
  };
  const audioCutPoint = audioClip
    ? Math.round(audioClip.sourceIn + (time * SECOND - audioClip.start) * audioClip.speed)
    : 0;
  const canCutAudio = Boolean(
    panel === "audio" &&
      audioClip &&
      audioCutPoint - audioClip.sourceIn >= 200000 &&
      audioClip.sourceOut - audioCutPoint >= 200000,
  );
  const cutPoint = clip
    ? Math.round(clip.sourceIn + (time * SECOND - timeline.clips[clipIndex].start) * clip.speed)
    : 0;
  const canCut =
    canCutAudio ||
    Boolean(clip && cutPoint - clip.sourceIn >= 200000 && clip.sourceOut - cutPoint >= 200000);
  const cut = (kind: "split" | "left" | "right") => {
    if (panel === "audio" && audioClip && canCutAudio) {
      if (kind === "split") {
        if ((plan.audioClips?.length || 0) >= 24) {
          setError("最多24个独立音频片段");
          return;
        }
        apply({
          ...plan,
          audioClips: plan.audioClips!.flatMap((c) =>
            c.id !== audioClip.id
              ? [c]
              : [
                  { ...c, sourceOut: audioCutPoint, fadeOut: 0 },
                  {
                    ...c,
                    id: crypto.randomUUID(),
                    sourceIn: audioCutPoint,
                    start: Math.round(time * SECOND),
                    fadeIn: 0,
                  },
                ],
          ),
        });
      } else
        changeAudio(
          audioClip.id,
          kind === "left"
            ? { sourceIn: audioCutPoint, start: Math.round(time * SECOND) }
            : { sourceOut: audioCutPoint },
        );
      return;
    }
    if (!clip || !canCut) return;
    if (kind === "split") {
      if (plan.clips.length >= 12) {
        setError("最多 12 个片段");
        return;
      }
      apply({
        ...plan,
        clips: [
          ...plan.clips.slice(0, clipIndex),
          { ...clip, sourceOut: cutPoint },
          {
            ...clip,
            id: crypto.randomUUID(),
            sourceIn: cutPoint,
            transition: { type: "fade", duration: 0 },
          },
          ...plan.clips.slice(clipIndex + 1),
        ],
      });
    } else
      changeClip(clipIndex, kind === "left" ? { sourceIn: cutPoint } : { sourceOut: cutPoint });
  };
  const remove = () => {
    if (panel === "audio" && audioClip) {
      apply({ ...plan, audioClips: plan.audioClips!.filter((c) => c.id !== audioClip.id) });
      setAudioId(undefined);
      setPanel(null);
    } else if (panel === "caption" && caption) {
      apply({ ...plan, captions: captions.filter((s) => s.id !== caption.id) });
      setCaptionId(undefined);
    } else if (clip) {
      if (plan.clips.length === 1) {
        setError("请至少保留一个视频片段");
        return;
      }
      apply({ ...plan, clips: plan.clips.filter((c) => c.id !== selected) });
      setSelected(undefined);
      setPanel(null);
    }
    setContext(undefined);
  };
  const togglePlay = () => {
    setLoopTransition(false);
    if (time >= duration) setTime(0);
    setPlaying((v) => !v);
  };
  const history = (forward: boolean) => {
    const stack = forward ? redo : undo,
      target = stack.current.pop();
    if (target) {
      (forward ? undo : redo).current.push(latest.current);
      apply(target, false);
    }
  };
  useEffect(() => {
    if (time > duration) setTime(duration);
  }, [duration, time]);
  useEffect(() => {
    const key = (e: KeyboardEvent) => {
      if ((e.target as HTMLElement)?.closest("input,textarea,select,[contenteditable=true]"))
        return;
      if (
        ["Space", "ArrowLeft", "ArrowRight", "Backspace", "Delete", "Escape"].includes(e.code) ||
        ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "z")
      )
        e.stopPropagation();
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "z") {
        e.preventDefault();
        if (!e.repeat) history(e.shiftKey);
      } else if (e.code === "Space") {
        e.preventDefault();
        togglePlay();
      } else if (e.key === "Delete" || e.key === "Backspace") {
        e.preventDefault();
        remove();
      } else if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
        e.preventDefault();
        seek(time + (e.key === "ArrowLeft" ? -1 : 1) / 30);
      } else if (e.key === "Escape") {
        setContext(undefined);
        setExportOpen(false);
        setPanel(null);
        setSelected(undefined);
      }
    };
    window.addEventListener("keydown", key, true);
    return () => window.removeEventListener("keydown", key, true);
  });
  useEffect(() => {
    if (
      resultUrl &&
      exportState?.destination === "local" &&
      downloaded.current !== exportState.requestId
    ) {
      downloaded.current = exportState.requestId;
      void downloadCanvasMedia([{ url: resultUrl, name: plan.title }]).catch((e) =>
        setError(`成片已生成，下载失败：${e.message}`),
      );
    }
  }, [resultUrl, exportState, plan.title]);
  useEffect(() => {
    if (pending?.status === "failed") setError(pending.error || "导出失败，请重试");
  }, [pending?.status, pending?.error]);
  const exportPlan = async (destination: "local" | "canvas") => {
    setExportOpen(false);
    setBusy(true);
    setError("");
    setPlaying(false);
    try {
      const requestId = await onRender(plan);
      if (typeof requestId !== "string") throw Error("未取得导出任务编号，请在画布检查任务状态");
      onExportState({ requestId, destination });
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setBusy(false);
    }
  };
  const addCaption = () => {
    if (captions.length >= 500) {
      setError("字幕最多 500 条");
      return;
    }
    const start = Math.round(Math.min(time, Math.max(0, duration - 0.2)) * SECOND),
      id = crypto.randomUUID();
    apply({
      ...plan,
      subtitles: true,
      captions: [
        ...captions,
        { id, start, end: Math.min(timeline.duration, start + 2 * SECOND), text: "默认文本" },
      ],
    });
    setCaptionId(id);
    setSubTab("text");
    setPanel("caption");
  };
  const transition = plan.clips[transitionIndex]?.transition;
  const setTransition = (
    type: "fade" | "fadeblack" | "fadewhite",
    value = transition?.duration || 1,
  ) => {
    if (!plan.clips[transitionIndex]) {
      setError("至少需要两个片段才能添加转场");
      return;
    }
    setLoopTransition(true);
    changeClip(transitionIndex, { transition: { type, duration: value, alignment: "center" } });
  };
  const openContext = (e: React.MouseEvent, kind: "clip" | "audio" | "caption" | "timeline") => {
    e.preventDefault();
    e.stopPropagation();
    setContext({
      x: Math.min(e.clientX, innerWidth - 165),
      y: Math.min(e.clientY, innerHeight - 160),
      kind,
    });
  };
  return (
    <div
      ref={root}
      className={styles.root}
      role="dialog"
      aria-modal="true"
      aria-label="智能剪辑"
      onPointerDown={(e) => {
        e.stopPropagation();
        if (!(e.target as HTMLElement).closest(".se-actions")) setExportOpen(false);
      }}
      onWheel={(e) => e.stopPropagation()}
      onClick={(e) => {
        e.stopPropagation();
        setContext(undefined);
      }}
    >
      <header className="se-header">
        <span className="se-title">智能剪辑</span>
        <div className="se-actions">
          <button
            className="se-export"
            aria-label="导出"
            aria-expanded={exportOpen}
            disabled={!canRender || exportWaiting}
            title={!canRender ? "视频合成服务不可用" : undefined}
            onClick={() => setExportOpen((v) => !v)}
          >
            导出
            <ChevronDown />
          </button>
          <Icon title="退出剪辑" extra="se-exit" onClick={onClose}>
            <X />
          </Icon>
          {exportOpen && (
            <div className="se-menu" role="menu">
              <div className="se-menu-title">导出位置</div>
              <button role="menuitem" onClick={() => void exportPlan("local")}>
                <Download />
                导出到本地
              </button>
              <button role="menuitem" onClick={() => void exportPlan("canvas")}>
                <Frame />
                导出到画布
              </button>
            </div>
          )}
        </div>
      </header>
      {error && (
        <button className="se-error" role="alert" onClick={() => setError("")}>
          {error}
        </button>
      )}
      {resultUrl && (
        <div className="se-export-result">
          {exportState?.destination === "canvas" ? "成片已添加到画布" : "成片已生成"}
          <button
            onClick={() =>
              void downloadCanvasMedia([{ url: resultUrl, name: plan.title }]).catch((e) =>
                setError(e.message),
              )
            }
          >
            下载成片
          </button>
          <button aria-label="关闭导出提示" onClick={() => onExportState(undefined)}>
            ×
          </button>
        </div>
      )}
      {!collapsed && (
        <div className="se-body">
          {transitionsOpen && (
            <aside className="se-panel left" aria-label="转场库" style={{ width: libraryWidth }}>
              <div
                className="se-column-resizer right"
                role="separator"
                aria-label="调整转场库宽度"
                aria-orientation="vertical"
                onPointerDown={(e) => columnResize(e, "left")}
              />
              <div className="se-panel-head">
                转场库
                <Icon
                  title="关闭转场库"
                  onClick={() => {
                    setTransitionsOpen(false);
                    if (panel === "transition") setPanel(null);
                  }}
                >
                  <X />
                </Icon>
              </div>
              <div className="se-panel-scroll se-library-scroll">
                <div className="se-small-label">基础转场</div>
                <div className="se-transition-list">
                  {Object.entries(transitionNames).map(([type, name]) => (
                    <button
                      key={type}
                      className={`se-transition-card ${transition?.type === type && transition.duration ? "selected" : ""}`}
                      onClick={() => setTransition(type as keyof typeof transitionNames)}
                    >
                      <span className="se-transition-demo">
                        <img
                          src={`/video-canvas/transitions/${type}.webp`}
                          alt={name}
                          draggable={false}
                        />
                      </span>
                      <span className="se-transition-caption">{name}</span>
                    </button>
                  ))}
                </div>
              </div>
            </aside>
          )}
          <div
            className="se-preview"
            ref={preview}
            onClick={() => {
              setSelected(undefined);
              if (panel === "video") setPanel(null);
            }}
          >
            <div className="se-preview-stage">
              {panel === "transition" &&
              transition?.duration &&
              transitionIndex > 0 &&
              loopTransition &&
              !playing ? (
                <TransitionPreview plan={plan} index={transitionIndex} />
              ) : (
                <EditPreview
                  plan={plan}
                  time={time}
                  playing={playing}
                  onTime={setTime}
                  onPlaying={setPlaying}
                  onError={setError}
                  fit
                  selectedClipId={selected}
                  selectedCaptionId={captionId}
                  onSelectClip={(id) => {
                    setSelected(id);
                    setPanel("video");
                    setPlaying(false);
                  }}
                  onSelectCaption={(id) => {
                    setCaptionId(id);
                    setPanel("caption");
                    setSubTab("text");
                    setCaptionsOpen(true);
                    setPlaying(false);
                  }}
                  onTransform={(id, transform) =>
                    changeClip(
                      plan.clips.findIndex((c) => c.id === id),
                      { transform },
                    )
                  }
                  onCaptionPosition={(id, position) => {
                    const c = captions.find((c) => c.id === id);
                    if (c)
                      changeCaption(id, {
                        style: { ...(c.style || defaultCaptionStyle), ...position },
                      });
                  }}
                />
              )}
            </div>
            {exportWaiting && (
              <div className="se-progress" role="status">
                {pending?.result?.smartEdit?.stage || "正在导出，任务已保存，可返回画布继续工作"}
              </div>
            )}
          </div>
          {panel === "video" && clip && (
            <aside className="se-panel" aria-label="视频参数" style={{ width: panelWidth }}>
              <div
                className="se-column-resizer"
                role="separator"
                aria-label="调整参数栏宽度"
                aria-orientation="vertical"
                onPointerDown={(e) => columnResize(e, "right")}
              />
              <div className="se-panel-head">
                视频
                <Icon title="关闭视频参数" onClick={() => setPanel(null)}>
                  <X />
                </Icon>
              </div>
              <div className="se-panel-scroll">
                {clip.transform && (
                  <button
                    className="se-reset-transform"
                    onClick={() => changeClip(clipIndex, { transform: defaultVideoTransform })}
                  >
                    重置画面位置与缩放
                  </button>
                )}
                <h3>变速</h3>
                <ValueField
                  label="变速倍数"
                  suffix="x"
                  value={clip.speed}
                  min={0.5}
                  max={2}
                  precision={2}
                  onChange={(speed) => changeClip(clipIndex, { speed })}
                />
                <ValueField
                  label="时长"
                  suffix="s"
                  value={(clip.sourceOut - clip.sourceIn) / clip.speed / SECOND}
                  min={0.2 / clip.speed}
                  max={
                    (plan.assets.find((a) => a.id === clip.assetId)!.duration - clip.sourceIn) /
                    clip.speed /
                    SECOND
                  }
                  precision={1}
                  onChange={(v) =>
                    changeClip(clipIndex, {
                      sourceOut: Math.round(clip.sourceIn + v * clip.speed * SECOND),
                    })
                  }
                />
                <div className="se-divider" />
                <h3>音量</h3>
                <ValueField
                  label="音量增益"
                  suffix="dB"
                  value={clip.gain ? 20 * Math.log10(clip.gain) : -60}
                  min={-60}
                  max={0}
                  precision={1}
                  onChange={(v) => changeClip(clipIndex, { gain: v <= -60 ? 0 : 10 ** (v / 20) })}
                />
              </div>
            </aside>
          )}
          {panel === "audio" && audioClip && (
            <aside className="se-panel" aria-label="音频参数" style={{ width: panelWidth }}>
              <div className="se-panel-head">
                音频
                <Icon title="关闭音频参数" onClick={() => setPanel(null)}>
                  <X />
                </Icon>
              </div>
              <div className="se-panel-scroll">
                <h3>变速</h3>
                <ValueField
                  label="音频变速倍数"
                  suffix="ax"
                  value={audioClip.speed}
                  min={0.5}
                  max={2}
                  precision={2}
                  onChange={(speed) => changeAudio(audioClip.id, { speed })}
                />
                <div className="se-divider" />
                <h3>音量</h3>
                <ValueField
                  label="音频音量增益"
                  suffix="adB"
                  value={audioClip.gain ? 20 * Math.log10(audioClip.gain) : -60}
                  min={-60}
                  max={0}
                  precision={1}
                  onChange={(v) =>
                    changeAudio(audioClip.id, { gain: v <= -60 ? 0 : 10 ** (v / 20) })
                  }
                />
                <div className="se-divider" />
                <h3>淡入淡出</h3>
                <ValueField
                  label="淡入时长"
                  suffix="in"
                  value={audioClip.fadeIn}
                  min={0}
                  max={Math.min(
                    5,
                    (audioClip.sourceOut - audioClip.sourceIn) / audioClip.speed / SECOND,
                  )}
                  precision={1}
                  onChange={(fadeIn) => changeAudio(audioClip.id, { fadeIn, fadeInStart: 0 })}
                />
                <ValueField
                  label="淡出时长"
                  suffix="out"
                  value={audioClip.fadeOut}
                  min={0}
                  max={Math.min(
                    5,
                    (audioClip.sourceOut - audioClip.sourceIn) / audioClip.speed / SECOND,
                  )}
                  precision={1}
                  onChange={(fadeOut) => changeAudio(audioClip.id, { fadeOut, fadeOutEnd: 0 })}
                />
              </div>
            </aside>
          )}
          {panel === "transition" && (
            <aside className="se-panel" aria-label="转场参数" style={{ width: panelWidth }}>
              <div
                className="se-column-resizer"
                role="separator"
                aria-label="调整参数栏宽度"
                aria-orientation="vertical"
                onPointerDown={(e) => columnResize(e, "right")}
              />
              <div className="se-panel-head">
                转场
                <Icon title="关闭转场参数" onClick={() => setPanel(null)}>
                  <X />
                </Icon>
              </div>
              <div className="se-panel-scroll se-transition-settings">
                <div className="se-small-label">名称</div>
                <div className="se-transition-name">
                  {transition?.duration ? transitionNames[transition.type] : "未选择转场"}
                </div>
                <label className="se-small-label" htmlFor="se-transition-length">
                  时长
                </label>
                <TransitionDuration
                  value={transition?.duration || 0}
                  disabled={!transition?.duration}
                  onChange={(value) => setTransition(transition?.type || "fade", value)}
                />
                {transition?.duration && transitionIndex > 0 ? (
                  <TransitionPreview plan={plan} index={transitionIndex} cover />
                ) : (
                  <div className="se-transition-placeholder">选择片段接点和转场，预览实际效果</div>
                )}
                {transition?.duration &&
                Math.abs(timeline.clips[transitionIndex].overlap / SECOND - transition.duration) >
                  0.04 ? (
                  <p className="se-muted">
                    相邻片段较短，实际转场时长为{" "}
                    {(timeline.clips[transitionIndex].overlap / SECOND).toFixed(1)} 秒
                  </p>
                ) : null}
              </div>
              <div className="se-panel-foot">
                <button disabled={!transition?.duration} onClick={() => setTransition("fade", 0)}>
                  删除
                </button>
              </div>
            </aside>
          )}
          {panel === "caption" && (
            <aside className="se-panel" aria-label="字幕参数" style={{ width: panelWidth }}>
              <div
                className="se-column-resizer"
                role="separator"
                aria-label="调整参数栏宽度"
                aria-orientation="vertical"
                onPointerDown={(e) => columnResize(e, "right")}
              />
              <div className="se-tabs">
                <button
                  className={subTab === "list" ? "active" : ""}
                  onClick={() => setSubTab("list")}
                >
                  字幕
                </button>
                <button
                  className={subTab === "text" ? "active" : ""}
                  onClick={() => setSubTab("text")}
                >
                  文本
                </button>
              </div>
              <div className="se-panel-scroll">
                {subTab === "list" ? (
                  <>
                    <div className="se-search">
                      <input
                        aria-label="搜索字幕文本"
                        placeholder="搜索字幕文本"
                        value={search}
                        onChange={(e) => setSearch(e.target.value)}
                      />
                      <Search size={14} />
                    </div>
                    <button className="se-wide-button" onClick={addCaption}>
                      <Plus size={14} />
                      新建字幕
                    </button>
                    {!captions.length && <div className="se-empty">暂无字幕</div>}
                    {captions
                      .filter((s) => s.text.includes(search))
                      .map((s) => (
                        <div
                          key={s.id}
                          className={`se-caption-item ${s.id === captionId ? "active" : ""}`}
                          onClick={() => {
                            setCaptionId(s.id);
                            seek(s.start / SECOND);
                          }}
                        >
                          <div className="se-caption-times">
                            <input
                              aria-label="字幕开始时间"
                              type="number"
                              min="0"
                              step="0.1"
                              value={s.start / SECOND}
                              onChange={(e) => {
                                if (Number.isFinite(e.target.valueAsNumber))
                                  changeCaption(s.id, {
                                    start: Math.round(
                                      clamp(e.target.valueAsNumber * SECOND, 0, s.end - 100000),
                                    ),
                                  });
                              }}
                            />
                            —
                            <input
                              aria-label="字幕结束时间"
                              type="number"
                              min="0"
                              step="0.1"
                              value={s.end / SECOND}
                              onChange={(e) => {
                                if (Number.isFinite(e.target.valueAsNumber))
                                  changeCaption(s.id, {
                                    end: Math.round(
                                      clamp(
                                        e.target.valueAsNumber * SECOND,
                                        s.start + 100000,
                                        timeline.duration,
                                      ),
                                    ),
                                  });
                              }}
                            />
                          </div>
                          <p onDoubleClick={() => setSubTab("text")}>{s.text}</p>
                        </div>
                      ))}
                  </>
                ) : caption ? (
                  <>
                    <textarea
                      className="se-textarea"
                      aria-label="字幕文本"
                      maxLength={500}
                      value={caption.text}
                      onChange={(e) => changeCaption(caption.id, { text: e.target.value })}
                    />
                    <div className="se-style-row">
                      <label>字体</label>
                      <select
                        className="se-font"
                        aria-label="字幕字体"
                        value="source-han"
                        onChange={() => {}}
                      >
                        <option value="source-han">Source Han Sans CN</option>
                      </select>
                    </div>
                    <StyleNumber
                      label="字号"
                      value={captionStyle.fontSize}
                      min={8}
                      max={160}
                      onChange={(v) => changeStyle({ fontSize: v })}
                    />
                    <StyleColor
                      label="字体颜色"
                      value={captionStyle.color}
                      onChange={(color) => changeStyle({ color })}
                    />
                    <StyleNumber
                      label="字间距"
                      value={captionStyle.spacing}
                      min={-5}
                      max={30}
                      onChange={(spacing) => changeStyle({ spacing })}
                    />
                    <div className="se-style-row">
                      <label>预设样式</label>
                      <div className="se-presets">
                        {[
                          ["默认", "#ffffff", "#000000", 0],
                          ["白字黑边", "#ffffff", "#000000", 2],
                          ["黑字白边", "#000000", "#ffffff", 2],
                          ["黄字黑边", "#ffff00", "#000000", 2],
                          ["白字粉边", "#ffffff", "#ff65a0", 2],
                          ["粉字黑边", "#ff65a0", "#000000", 2],
                        ].map(([name, color, outlineColor, outlineWidth]) => (
                          <button
                            key={name}
                            title={String(name)}
                            aria-label={String(name)}
                            style={{
                              color: String(color),
                              WebkitTextStroke: `${outlineWidth ? 1 : 0}px ${outlineColor}`,
                            }}
                            onClick={() =>
                              changeStyle({
                                color: String(color),
                                outlineColor: String(outlineColor),
                                outlineWidth: Number(outlineWidth),
                              })
                            }
                          >
                            T
                          </button>
                        ))}
                      </div>
                    </div>
                    <StyleColor
                      label="描边颜色"
                      value={captionStyle.outlineColor}
                      onChange={(outlineColor) => changeStyle({ outlineColor })}
                    />
                    <StyleNumber
                      label="描边粗细"
                      value={captionStyle.outlineWidth}
                      min={0}
                      max={10}
                      onChange={(outlineWidth) => changeStyle({ outlineWidth })}
                    />
                    <StyleNumber
                      label="描边不透明度"
                      value={Math.round((captionStyle.outlineOpacity ?? 1) * 100)}
                      min={0}
                      max={100}
                      onChange={(v) => changeStyle({ outlineOpacity: v / 100 })}
                    />
                  </>
                ) : (
                  <div className="se-muted">请先选择一条字幕</div>
                )}
              </div>
              {subTab === "text" && caption && (
                <div className="se-panel-foot">
                  <button
                    onClick={() =>
                      apply({
                        ...plan,
                        captions: captions.map((s) => ({ ...s, style: { ...captionStyle } })),
                      })
                    }
                  >
                    应用到全部字幕
                  </button>
                </div>
              )}
            </aside>
          )}
        </div>
      )}
      <div
        className="se-timeline"
        style={{
          height: collapsed ? "calc(100% - 48px)" : timelineHeight,
          flex: collapsed ? 1 : undefined,
        }}
        onContextMenu={(e) => openContext(e, "timeline")}
      >
        <div
          className="se-resizer"
          role="separator"
          aria-label="拖拽调整高度"
          aria-orientation="horizontal"
          onPointerDown={(e) => {
            resized.current = true;
            const y = e.clientY,
              h = timelineHeight;
            drag(e, (event) =>
              setTimelineHeight(clamp(h + y - event.clientY, 130, innerHeight - 220)),
            );
          }}
        />
        <div className="se-toolbar">
          <div className="se-toolbar-group">
            <Icon
              title="撤销"
              extra="se-history"
              disabled={!undo.current.length}
              onClick={() => history(false)}
            >
              <Undo2 />
            </Icon>
            <Icon
              title="重做"
              extra="se-history"
              disabled={!redo.current.length}
              onClick={() => history(true)}
            >
              <Redo2 />
            </Icon>
            <Icon
              title="分割"
              disabled={
                !canCut ||
                (panel === "audio" ? (plan.audioClips?.length || 0) >= 24 : plan.clips.length >= 12)
              }
              onClick={() => cut("split")}
            >
              <CutIcon />
            </Icon>
            <Icon title="向左裁剪" disabled={!canCut} onClick={() => cut("left")}>
              <CutIcon side="left" />
            </Icon>
            <Icon title="向右裁剪" disabled={!canCut} onClick={() => cut("right")}>
              <CutIcon side="right" />
            </Icon>
            <Icon
              title="字幕轨道"
              active={captionsOpen}
              onClick={() => {
                setCaptionsOpen((v) => !v);
                setPanel(captionsOpen ? null : "caption");
                if (!captionsOpen) setSubTab("list");
              }}
            >
              <Type />
            </Icon>
            <Icon
              title="转场"
              active={transitionsOpen}
              onClick={() => {
                setTransitionsOpen((v) => !v);
                setPanel(transitionsOpen ? null : "transition");
                setLoopTransition(true);
                setPlaying(false);
              }}
            >
              <TransitionIcon />
            </Icon>
          </div>
          <div className="se-toolbar-middle">
            <span className="se-current-time">{stamp(time)}</span>
            <Icon title={playing ? "暂停" : "播放"} extra="se-play" onClick={togglePlay}>
              {playing ? (
                <Pause fill="currentColor" size={12} />
              ) : (
                <Play fill="currentColor" size={12} />
              )}
            </Icon>
            <span className="se-duration">{stamp(duration)}</span>
            <Icon
              title="全屏预览"
              onClick={() => {
                if (document.fullscreenElement) void document.exitFullscreen();
                else
                  void preview.current
                    ?.requestFullscreen()
                    .catch(() => setError("浏览器不支持全屏预览"));
              }}
            >
              <Maximize />
            </Icon>
          </div>
          <div className="se-toolbar-group">
            <Icon title="吸附" active={snap} onClick={() => setSnap((v) => !v)}>
              <Magnet />
            </Icon>
            <Icon title="缩小" onClick={() => setZoom((v) => Math.max(0, v - 2))}>
              <ZoomOut />
            </Icon>
            <input
              aria-label="时间轴缩放"
              className="se-zoom"
              type="range"
              min="0"
              max="40"
              value={zoom}
              onChange={(e) => setZoom(Number(e.target.value))}
            />
            <Icon title="放大" onClick={() => setZoom((v) => Math.min(40, v + 2))}>
              <ZoomIn />
            </Icon>
            <Icon
              title={collapsed ? "展开预览" : "收起预览"}
              onClick={() => setCollapsed((v) => !v)}
            >
              {collapsed ? <Expand /> : <Shrink />}
            </Icon>
          </div>
        </div>
        <div className="se-tracks">
          <div className="se-track-labels" ref={trackLabels}>
            {captionsOpen && (
              <div className="se-track-label caption">
                <Type size={14} />
                <Icon
                  title={plan.subtitles ? "隐藏字幕" : "显示字幕"}
                  onClick={() => apply({ ...plan, subtitles: !plan.subtitles })}
                >
                  {plan.subtitles ? <Eye /> : <EyeOff />}
                </Icon>
              </div>
            )}
            <div className="se-track-label">
              <span className="se-track-type">
                <TransitionIcon />
              </span>
              <Icon
                title={plan.clips.some((c) => c.gain > 0) ? "静音视频原声" : "恢复视频原声"}
                onClick={() =>
                  apply({
                    ...plan,
                    clips: plan.clips.map((c) => ({
                      ...c,
                      gain: plan.clips.some((c) => c.gain > 0) ? 0 : 1,
                    })),
                  })
                }
              >
                {plan.clips.some((c) => c.gain > 0) ? <Volume2 /> : <VolumeX />}
              </Icon>
            </div>
            {(plan.audioClips || []).map((c) => (
              <div className="se-track-label audio" key={c.id}>
                <Volume2 size={14} />
                <Icon
                  title={c.gain ? "静音独立音轨" : "恢复独立音轨"}
                  onClick={() => changeAudio(c.id, { gain: c.gain ? 0 : 1 })}
                >
                  {c.gain ? <Volume2 /> : <VolumeX />}
                </Icon>
              </div>
            ))}
          </div>
          <div
            className="se-scroll"
            ref={scroll}
            onScroll={(e) => {
              if (trackLabels.current) trackLabels.current.scrollTop = e.currentTarget.scrollTop;
            }}
          >
            <div
              className="se-track-content"
              style={{ width: Math.max(duration + 1, (viewportWidth - 112) / pps) * pps }}
            >
              <div
                className="se-ruler"
                aria-label="时间刻度"
                onPointerDown={(e) => {
                  seek(position(e.clientX));
                  drag(e, (event) => seek(snapped(position(event.clientX))));
                }}
              >
                {Array.from(
                  { length: Math.ceil(Math.max(duration + 1, (viewportWidth - 112) / pps) * 10) },
                  (_, i) => (
                    <div
                      key={i}
                      className={`se-tick ${i % 10 === 0 ? "major" : ""}`}
                      style={{ left: (i * pps) / 10 }}
                    >
                      {i % 10 === 0 && <span>{stamp(i / 10)}</span>}
                    </div>
                  ),
                )}
              </div>
              {captionsOpen && (
                <div className="se-caption-track" aria-label="字幕时间轴">
                  {captions.map((s) => (
                    <div
                      key={s.id}
                      role="button"
                      tabIndex={0}
                      aria-label={`字幕：${s.text}`}
                      className={`se-caption-block ${captionId === s.id ? "selected" : ""}`}
                      style={{
                        left: (s.start / SECOND) * pps,
                        width: ((s.end - s.start) / SECOND) * pps,
                        opacity: plan.subtitles ? 1 : 0.4,
                      }}
                      onClick={() => {
                        setCaptionId(s.id);
                        setPanel("caption");
                        setSubTab("text");
                      }}
                      onContextMenu={(e) => {
                        setCaptionId(s.id);
                        setPanel("caption");
                        openContext(e, "caption");
                      }}
                      onPointerDown={(e) => {
                        const x = e.clientX,
                          original = plan;
                        let moved = false;
                        drag(
                          e,
                          (event) => {
                            moved = true;
                            const start = Math.round(
                              clamp(
                                snapped(s.start / SECOND + (event.clientX - x) / pps) * SECOND,
                                0,
                                timeline.duration - (s.end - s.start),
                              ),
                            );
                            onChange({
                              ...original,
                              captions: captions.map((c) =>
                                c.id === s.id ? { ...c, start, end: start + s.end - s.start } : c,
                              ),
                            });
                          },
                          () => {
                            if (moved) {
                              undo.current.push(original);
                              redo.current = [];
                            }
                          },
                        );
                      }}
                    >
                      {s.text}
                      {captionId === s.id && (
                        <>
                          <div
                            className="se-handle left"
                            role="slider"
                            aria-label="字幕起点"
                            aria-valuenow={s.start / SECOND}
                            onPointerDown={(e) => dragCaptionEdge(e, s, "start")}
                          />
                          <div
                            className="se-handle right"
                            role="slider"
                            aria-label="字幕终点"
                            aria-valuenow={s.end / SECOND}
                            onPointerDown={(e) => dragCaptionEdge(e, s, "end")}
                          />
                        </>
                      )}
                    </div>
                  ))}
                </div>
              )}
              <div className="se-video-track" aria-label="视频时间轴">
                {timeline.clips.map((c, i) => {
                  const asset = plan.assets.find((a) => a.id === c.assetId)!,
                    width = (c.duration / SECOND) * pps;
                  return (
                    <div
                      key={c.id}
                      role="button"
                      tabIndex={0}
                      aria-label={`视频片段 ${i + 1}：${asset.name}`}
                      className={`se-clip ${selected === c.id ? "selected" : ""}`}
                      style={{
                        left: (c.start / SECOND) * pps,
                        width,
                        transform:
                          draggedClip?.id === c.id
                            ? `translateX(${draggedClip.offset}px)`
                            : undefined,
                        zIndex: draggedClip?.id === c.id ? 8 : undefined,
                        opacity: draggedClip?.id === c.id ? 0.8 : 1,
                      }}
                      onPointerDown={(e) => dragClip(e, i)}
                      onClick={() => {
                        setSelected(c.id);
                        setPanel("video");
                        setCaptionId(undefined);
                      }}
                      onContextMenu={(e) => {
                        setSelected(c.id);
                        setPanel("video");
                        openContext(e, "clip");
                      }}
                      onKeyDown={(e) => {
                        if (e.key === "Enter") {
                          setSelected(c.id);
                          setPanel("video");
                        }
                      }}
                    >
                      <div className="se-filmstrip">
                        {Array.from({ length: Math.min(24, Math.ceil(width / 88)) }, (_, j) => (
                          <Thumb
                            key={j}
                            url={asset.url}
                            width={width / Math.min(24, Math.ceil(width / 88))}
                            time={Math.min(
                              c.sourceOut / SECOND - 0.01,
                              c.sourceIn / SECOND +
                                (j * (c.sourceOut - c.sourceIn)) /
                                  SECOND /
                                  Math.min(24, Math.ceil(width / 88)),
                            )}
                          />
                        ))}
                      </div>
                      <div className="se-clip-name">
                        {asset.name} {frameStamp(c.duration / SECOND)}
                      </div>
                      <div className={`se-wave ${c.gain ? "" : "muted"}`} />
                      {selected === c.id && (
                        <>
                          <div
                            className="se-handle left"
                            role="slider"
                            aria-label="片段起点"
                            onPointerDown={(e) => dragTrim(e, i, "left")}
                          />
                          <div
                            className="se-handle right"
                            role="slider"
                            aria-label="片段终点"
                            onPointerDown={(e) => dragTrim(e, i, "right")}
                          />
                        </>
                      )}
                    </div>
                  );
                })}
                {timeline.clips.slice(1).map(
                  (c, i) =>
                    (transitionsOpen || c.overlap > 0) && (
                      <button
                        key={c.id}
                        className={`se-junction ${c.overlap ? "has-transition" : ""}`}
                        aria-label={`片段 ${i + 1} 与 ${i + 2} 的转场`}
                        style={{
                          left: ((c.transitionStart + c.overlap / 2) / SECOND) * pps,
                          width: c.overlap ? Math.max(24, (c.overlap / SECOND) * pps) : 24,
                        }}
                        title={
                          c.overlap
                            ? `${transitionNames[c.transitionType]} ${(c.overlap / SECOND).toFixed(1)}s`
                            : "添加转场"
                        }
                        onClick={() => {
                          setTransitionIndex(i + 1);
                          setLoopTransition(true);
                          setPlaying(false);
                          setTransitionsOpen(true);
                          setPanel("transition");
                        }}
                      >
                        <TransitionIcon />
                      </button>
                    ),
                )}
              </div>
              {timeline.audioClips.map((c) => (
                <div className="se-audio-track" key={c.id} aria-label="独立音频时间轴">
                  <div
                    role="button"
                    tabIndex={0}
                    aria-label={`独立音频：${plan.assets.find((a) => a.id === c.assetId)?.name}`}
                    className={`se-audio-clip ${audioId === c.id ? "selected" : ""}`}
                    style={{ left: (c.start / SECOND) * pps, width: (c.duration / SECOND) * pps }}
                    onPointerDown={(e) => dragAudio(e, c)}
                    onClick={() => {
                      setAudioId(c.id);
                      setSelected(undefined);
                      setPanel("audio");
                    }}
                    onContextMenu={(e) => {
                      setAudioId(c.id);
                      setSelected(undefined);
                      setPanel("audio");
                      openContext(e, "audio");
                    }}
                  >
                    <span>
                      {plan.assets.find((a) => a.id === c.assetId)?.name}{" "}
                      {frameStamp(c.duration / SECOND)}
                    </span>
                    {audioId === c.id && (
                      <>
                        <div
                          role="slider"
                          aria-label="音频起点"
                          className="se-handle left"
                          onPointerDown={(e) => dragAudio(e, c, "left")}
                        />
                        <div
                          role="slider"
                          aria-label="音频终点"
                          className="se-handle right"
                          onPointerDown={(e) => dragAudio(e, c, "right")}
                        />
                      </>
                    )}
                  </div>
                </div>
              ))}
              <div className="se-playhead" aria-label="播放头" style={{ left: time * pps }} />
            </div>
          </div>
        </div>
      </div>
      {context && (
        <div
          className="se-context"
          role="menu"
          style={{ left: context.x, top: context.y }}
          onClick={(e) => e.stopPropagation()}
        >
          {context.kind === "clip" && (
            <button
              role="menuitem"
              disabled={
                !clip ||
                clip.audioDetached ||
                !plan.assets.find((a) => a.id === clip.assetId)?.hasAudio
              }
              title={
                !plan.assets.find((a) => a.id === clip?.assetId)?.hasAudio
                  ? "当前视频无音轨，无法分离音视频"
                  : undefined
              }
              onClick={detachAudio}
            >
              音视频分离
            </button>
          )}
          {context.kind !== "timeline" && (
            <button role="menuitem" onClick={remove}>
              删除{context.kind === "clip" ? "片段" : context.kind === "audio" ? "音频" : "字幕"}
            </button>
          )}
          <button
            role="menuitem"
            disabled={!undo.current.length}
            onClick={() => {
              history(false);
              setContext(undefined);
            }}
          >
            撤销
          </button>
          <button
            role="menuitem"
            disabled={!redo.current.length}
            onClick={() => {
              history(true);
              setContext(undefined);
            }}
          >
            重做
          </button>
          <button role="menuitem" onClick={onConfigure}>
            智能剪辑设置
          </button>
        </div>
      )}
    </div>
  );
}
function StyleNumber({
  label,
  value,
  min,
  max,
  onChange,
}: {
  label: string;
  value: number;
  min: number;
  max: number;
  onChange: (v: number) => void;
}) {
  return (
    <div className="se-style-row">
      <label>{label}</label>
      <div className="se-style-controls">
        <input
          aria-label={`${label}滑块`}
          type="range"
          min={min}
          max={max}
          value={value}
          onChange={(e) => onChange(Number(e.target.value))}
        />
        <input
          aria-label={label}
          type="number"
          min={min}
          max={max}
          value={value}
          onChange={(e) => {
            if (Number.isFinite(e.target.valueAsNumber))
              onChange(clamp(e.target.valueAsNumber, min, max));
          }}
        />
      </div>
    </div>
  );
}
function StyleColor({
  label,
  value,
  onChange,
}: {
  label: string;
  value: string;
  onChange: (v: string) => void;
}) {
  return (
    <div className="se-style-row">
      <label>{label}</label>
      <div className="se-style-controls">
        <input
          className="se-color"
          aria-label={label}
          type="color"
          value={value}
          onChange={(e) => onChange(e.target.value)}
        />
        <input
          aria-label={`${label}十六进制`}
          type="text"
          maxLength={7}
          defaultValue={value.toUpperCase().slice(1)}
          key={value}
          onBlur={(e) => {
            const v = `#${e.target.value.replace(/^#/, "")}`;
            if (/^#[0-9a-f]{6}$/i.test(v)) onChange(v);
            else e.target.value = value.slice(1).toUpperCase();
          }}
        />
      </div>
    </div>
  );
}

function TransitionDuration({
  value,
  disabled,
  onChange,
}: {
  value: number;
  disabled: boolean;
  onChange: (value: number) => void;
}) {
  const [text, setText] = useState(value.toFixed(1));
  useEffect(() => setText(value.toFixed(1)), [value]);
  const commit = () => {
    const n = Number(text);
    if (text.trim() && Number.isFinite(n)) {
      const v = clamp(Math.round(n * 10) / 10, 0.2, 4);
      setText(v.toFixed(1));
      onChange(v);
    } else setText(value.toFixed(1));
  };
  return (
    <div className="se-transition-duration">
      <button
        aria-label="减少转场时长"
        disabled={disabled || value <= 0.2}
        onClick={() => onChange(Math.max(0.2, Math.round((value - 0.1) * 10) / 10))}
      >
        −
      </button>
      <div>
        <input
          id="se-transition-length"
          aria-label="转场时长（秒）"
          type="number"
          min={0.2}
          max={4}
          step={0.1}
          disabled={disabled}
          value={text}
          onChange={(e) => setText(e.target.value)}
          onBlur={commit}
          onKeyDown={(e) => {
            if (e.key === "Enter") e.currentTarget.blur();
          }}
        />
        <span>s</span>
      </div>
      <button
        aria-label="增加转场时长"
        disabled={disabled || value >= 4}
        onClick={() => onChange(Math.min(4, Math.round((value + 0.1) * 10) / 10))}
      >
        +
      </button>
    </div>
  );
}

function ValueField({
  label,
  suffix,
  value,
  min,
  max,
  precision,
  onChange,
}: {
  label: string;
  suffix: string;
  value: number;
  min: number;
  max: number;
  precision: number;
  onChange: (v: number) => void;
}) {
  const [text, setText] = useState(value.toFixed(precision));
  useEffect(() => setText(value.toFixed(precision)), [value, precision]);
  const commit = () => {
    const v = Number(text);
    if (text.trim() && Number.isFinite(v)) {
      const bounded = clamp(v, min, max);
      setText(bounded.toFixed(precision));
      onChange(bounded);
    } else setText(value.toFixed(precision));
  };
  const step = suffix.endsWith("dB") ? 0.5 : suffix.endsWith("x") ? 0.01 : 0.1;
  return (
    <div className="se-field">
      <label htmlFor={`se-value-${suffix}`}>{label}</label>
      <div className="se-value">
        <input
          id={`se-value-${suffix}`}
          aria-label={label}
          type="number"
          min={min}
          max={max}
          step={step}
          value={text}
          onChange={(e) => setText(e.target.value)}
          onBlur={commit}
          onKeyDown={(e) => {
            if (e.key === "Enter") e.currentTarget.blur();
          }}
        />
        <span>
          {suffix === "ax"
            ? "x"
            : suffix === "adB"
              ? "dB"
              : suffix === "in" || suffix === "out"
                ? "s"
                : suffix}
        </span>
        <div className="se-number-steps">
          <button
            type="button"
            aria-label={`增加${label}`}
            onClick={() =>
              onChange(
                clamp(
                  value + step,
                  min,
                  max,
                ),
              )
            }
          >
            ⌃
          </button>
          <button
            type="button"
            aria-label={`减少${label}`}
            onClick={() =>
              onChange(
                clamp(
                  value - step,
                  min,
                  max,
                ),
              )
            }
          >
            ⌄
          </button>
        </div>
      </div>
    </div>
  );
}

function CutIcon({ side }: { side?: "left" | "right" }) {
  return (
    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path
        d="M2.75 2.22h3.44v11.56H2.75"
        stroke="currentColor"
        strokeWidth="1.06"
        strokeDasharray={side === "left" ? "1.05 .7" : undefined}
      />
      <path
        d="M13.25 2.22H9.8v11.56h3.45"
        stroke="currentColor"
        strokeWidth="1.06"
        strokeDasharray={side === "right" ? "1.05 .7" : undefined}
      />
    </svg>
  );
}
function TransitionIcon() {
  return (
    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true">
      <rect
        x=".9"
        y=".9"
        width="18.2"
        height="18.2"
        rx="2.53"
        stroke="currentColor"
        strokeWidth="1.8"
      />
      <path d="M7.3 5.7 14.5 10l-7.2 4.3Z" fill="currentColor" />
    </svg>
  );
}

export function SmartEditEmptyEditor({
  onClose,
  onConfigure,
  onRetry,
  loading,
  message,
}: {
  onClose: () => void;
  onConfigure: () => void;
  onRetry: () => void;
  loading: boolean;
  message: string;
}) {
  return (
    <div className={styles.root} role="dialog" aria-modal="true" aria-label="智能剪辑">
      <header className="se-header">
        <span className="se-title">智能剪辑</span>
        <div className="se-actions">
          <button className="se-export" disabled>
            导出
            <ChevronDown />
          </button>
          <Icon title="退出剪辑" extra="se-exit" onClick={onClose}>
            <X />
          </Icon>
        </div>
      </header>
      <div className="se-body">
        <div className="se-preview">
          <div className="se-empty-start" role="status">
            <p>{message}</p>
            {!loading && (
              <div>
                <button className="se-wide-button" onClick={onConfigure}>
                  添加素材
                </button>
                {/失败|错误|中断/.test(message) && (
                  <button className="se-wide-button" onClick={onRetry}>
                    重试读取素材
                  </button>
                )}
              </div>
            )}
          </div>
        </div>
      </div>
      <div className="se-timeline" style={{ height: "calc(35vh - 8px)" }}>
        <div className="se-toolbar">
          <div className="se-toolbar-group">
            {["撤销", "重做", "分割", "向左裁剪", "向右裁剪", "字幕轨道", "转场"].map(
              (title, i) => (
                <Icon
                  key={title}
                  title={title}
                  extra={i < 2 ? "se-history" : ""}
                  disabled
                  onClick={() => {}}
                >
                  {i === 0 ? (
                    <Undo2 />
                  ) : i === 1 ? (
                    <Redo2 />
                  ) : i < 5 ? (
                    <CutIcon side={i === 3 ? "left" : i === 4 ? "right" : undefined} />
                  ) : i === 5 ? (
                    <Type />
                  ) : (
                    <TransitionIcon />
                  )}
                </Icon>
              ),
            )}
          </div>
          <div className="se-toolbar-middle">
            <span className="se-current-time">00:00</span>
            <Icon title="播放" extra="se-play" disabled onClick={() => {}}>
              <Play fill="currentColor" />
            </Icon>
            <span className="se-duration">00:00</span>
            <Icon title="全屏预览" disabled onClick={() => {}}>
              <Maximize />
            </Icon>
          </div>
          <div className="se-toolbar-group">
            <Icon title="吸附" disabled onClick={() => {}}>
              <Magnet />
            </Icon>
            <Icon title="缩小" disabled onClick={() => {}}>
              <ZoomOut />
            </Icon>
            <input
              className="se-zoom"
              aria-label="时间轴缩放"
              type="range"
              value={20}
              min={0}
              max={40}
              disabled
            />
            <Icon title="放大" disabled onClick={() => {}}>
              <ZoomIn />
            </Icon>
            <Icon title="收起预览" disabled onClick={() => {}}>
              <Shrink />
            </Icon>
          </div>
        </div>
      </div>
    </div>
  );
}