xiaoxia-saas/apps/web/src/pages/editing-planner/components/TimelinePanel.tsx

/**
 * 水平轨道时间线 — 支持裁剪手柄、分割、右键菜单
 * 时间标尺(20px) + 水平片段卡片轨道(100x100) + HTML5拖拽排序
 * "+" 卡片 → 类型+时长选择器
 *
 * 裁剪交互：
 * - 鼠标悬停片段两端显示拖拽手柄，拖动调整入点/出点
 * - 拖动时实时显示裁剪预览（入点/出点/时长）
 * - 右键片段弹出菜单：分割 / 恢复原始长度 / 删除
 */
import React, {
  useState,
  useRef,
  useCallback,
  useEffect,
  useLayoutEffect,
  useMemo,
} from "react";
import type { ClipData, ClipType, TrimConfig } from "../types";
import { TRANSITION_OPTIONS } from "@/api/editPlans";

interface TimelinePanelProps {
  clips: ClipData[];
  selectedClipId: string | null;
  currentMode: string;
  onClipSelect: (clipId: string) => void;
  onClipReorder: (fromIdx: number, toIdx: number) => void;
  onClipRemove: (clipId: string) => void;
  onAddClip: (type: ClipType, duration: number) => void;
  /** 裁剪更新：调整片段的 trim_config 和 duration */
  onClipTrim?: (
    clipId: string,
    trimConfig: TrimConfig,
    newDuration: number,
  ) => void;
  /** 在指定位置分割片段 */
  onClipSplit?: (clipId: string, splitRatio: number) => void;
  /** 恢复片段原始长度 */
  onClipResetTrim?: (clipId: string) => void;
  /** 当前播放时间（秒） */
  currentTime?: number;
  /** 缩放：每秒像素数 */
  pixelsPerSecond?: number;
  /** 缩放变更回调 */
  onZoomChange?: (pps: number) => void;
  /** 播放头跳转回调 */
  onSeek?: (time: number) => void;
  /** 总时长（秒），可选（默认由 clips 计算） */
  totalDuration?: number;
}

/** 片段类型图标 */
const CLIP_TYPE_ICONS: Record<ClipType, string> = {
  voice: "🎙️",
  pip: "🖼️",
};

/** 片段类型标签 */
const CLIP_TYPE_LABELS: Record<ClipType, string> = {
  voice: "口播",
  pip: "画中画",
};

/** 裁剪拖拽方向 */
type TrimDirection = "left" | "right";

/** 裁剪拖拽状态 */
interface TrimDragState {
  clipId: string;
  direction: TrimDirection;
  startX: number;
  originalTrim: TrimConfig;
  originalDuration: number;
}

/** 右键菜单状态 */
interface ContextMenuState {
  x: number;
  y: number;
  clipId: string;
}

const TimelinePanel: React.FC<TimelinePanelProps> = ({
  clips,
  selectedClipId,
  currentMode,
  onClipSelect,
  onClipReorder,
  onClipRemove,
  onAddClip,
  onClipTrim,
  onClipSplit,
  onClipResetTrim,
  currentTime = 0,
  pixelsPerSecond = 40,
  onZoomChange,
  onSeek,
  totalDuration: totalDurationProp,
}) => {
  const [dragIdx, setDragIdx] = useState<number | null>(null);
  const [dragOverIdx, setDragOverIdx] = useState<number | null>(null);
  const dragRef = useRef<number | null>(null);
  const [showAddPicker, setShowAddPicker] = useState(false);
  const pickerRef = useRef<HTMLDivElement>(null);
  const addCardRef = useRef<HTMLDivElement>(null);
  const [pickerPos, setPickerPos] = useState<{ top: number; right: number }>({
    top: 0,
    right: 0,
  });

  /* ── 裁剪拖拽状态 ── */
  const [trimDrag, setTrimDrag] = useState<TrimDragState | null>(null);
  const [trimPreview, setTrimPreview] = useState<{
    clipId: string;
    startTime: number;
    endTime: number;
    duration: number;
    x: number;
    y: number;
  } | null>(null);

  /* ── 右键菜单 ── */
  const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
  const contextMenuRef = useRef<HTMLDivElement>(null);

  /* ── 悬停的片段 ID（显示裁剪手柄） ── */
  const [hoveredClipId, setHoveredClipId] = useState<string | null>(null);

  /* ── 播放头拖拽状态 ── */
  const [playheadDragging, setPlayheadDragging] = useState(false);
  const trackRef = useRef<HTMLDivElement>(null);

  /* ── 根据模式决定可选类型 ── */
  const availableTypes: ClipType[] = useMemo(
    () =>
      currentMode === "voice_over"
        ? ["voice"]
        : currentMode === "pip"
          ? ["pip"]
          : ["voice", "pip"], // voice_pip / one_take / 默认
    [currentMode],
  );

  /* ── 默认添加类型：跟随模式 ── */
  const defaultAddType: ClipType = useMemo(() => {
    if (currentMode === "voice_over") return "voice";
    if (currentMode === "pip") return "pip";
    return "voice";
  }, [currentMode]);

  /* ── "+" 卡片：类型+时长选择状态 ── */
  const [addType, setAddType] = useState<ClipType>(defaultAddType);
  const [addDuration, setAddDuration] = useState<number>(5);

  /* ── 模式切换时自动同步默认添加类型 ── */
  useEffect(() => {
    if (!availableTypes.includes(addType)) {
      setAddType(defaultAddType);
    }
  }, [currentMode, addType, availableTypes, defaultAddType]);

  /* ── 面板尺寸 ── */
  const PICKER_W = 240;
  const GAP = 6;

  /* ── 计算 picker 初始位置 ── */
  const updatePickerPosition = useCallback(() => {
    if (!addCardRef.current) return;
    const rect = addCardRef.current.getBoundingClientRect();
    const vw = window.innerWidth;
    const roughHeight = 180;
    let top = rect.top - GAP - roughHeight;
    if (top < 8) top = 8;
    let right = vw - rect.right;
    if (rect.right - PICKER_W < 8) {
      right = vw - PICKER_W - 8;
    }
    setPickerPos({ top, right });
  }, []);

  const handleTogglePicker = () => {
    if (!showAddPicker) {
      const defaultType =
        currentMode === "pip"
          ? "pip"
          : currentMode === "voice_over"
            ? "voice"
            : "voice";
      setAddType(defaultType);
      updatePickerPosition();
    }
    setShowAddPicker((v) => !v);
  };

  /* ── 渲染后精确边界校正 ── */
  useLayoutEffect(() => {
    if (!showAddPicker || !pickerRef.current || !addCardRef.current) return;
    const pickerEl = pickerRef.current;
    const addRect = addCardRef.current.getBoundingClientRect();
    const pickerH = pickerEl.offsetHeight;
    const vh = window.innerHeight;
    const vw = window.innerWidth;
    let top = addRect.top - GAP - pickerH;
    if (top < 8) {
      top = addRect.bottom + GAP;
      if (top + pickerH > vh - 8) {
        top = vh - 8 - pickerH;
        if (top < 8) top = 8;
      }
    }
    let right = vw - addRect.right;
    const pickerRect = pickerEl.getBoundingClientRect();
    if (pickerRect.left < 8) {
      right = vw - PICKER_W - 8;
    }
    setPickerPos({ top, right });
  }, [showAddPicker]);

  /* ── 点击外部关闭添加面板 ── */
  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      if (pickerRef.current && !pickerRef.current.contains(e.target as Node)) {
        setShowAddPicker(false);
      }
    };
    if (showAddPicker) {
      document.addEventListener("mousedown", handleClickOutside);
    }
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, [showAddPicker]);

  /* ── 点击外部关闭右键菜单 ── */
  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      if (
        contextMenuRef.current &&
        !contextMenuRef.current.contains(e.target as Node)
      ) {
        setContextMenu(null);
      }
    };
    if (contextMenu) {
      document.addEventListener("mousedown", handleClickOutside);
    }
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, [contextMenu]);

  /* ── 缩放 & 时长 ── */
  const pps = pixelsPerSecond ?? 40;
  const totalDuration =
    totalDurationProp ?? clips.reduce((s, c) => s + c.duration, 0);

  /* ── 播放头拖拽全局 mousemove/mouseup ── */
  useEffect(() => {
    if (!playheadDragging) return;

    const handleMouseMove = (e: MouseEvent) => {
      const trackEl = trackRef.current;
      if (!trackEl) return;
      const rect = trackEl.getBoundingClientRect();
      const x = e.clientX - rect.left + trackEl.scrollLeft;
      const time = Math.max(0, Math.min(x / pps, totalDuration));
      onSeek?.(Math.round(time * 10) / 10);
    };

    const handleMouseUp = () => {
      setPlayheadDragging(false);
    };

    document.addEventListener("mousemove", handleMouseMove);
    document.addEventListener("mouseup", handleMouseUp);
    return () => {
      document.removeEventListener("mousemove", handleMouseMove);
      document.removeEventListener("mouseup", handleMouseUp);
    };
  }, [playheadDragging, pps, totalDuration, onSeek]);

  /* ── 标尺点击跳转播放头 ── */
  const handleRulerClick = useCallback(
    (e: React.MouseEvent<HTMLDivElement>) => {
      const rect = e.currentTarget.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const time = Math.max(0, Math.min(x / pps, totalDuration));
      onSeek?.(Math.round(time * 10) / 10);
    },
    [pps, totalDuration, onSeek],
  );

  /* ── 播放头拖拽开始 ── */
  const handlePlayheadMouseDown = useCallback((e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setPlayheadDragging(true);
  }, []);

  /* ── 确认添加片段 ── */
  const handleConfirmAdd = () => {
    onAddClip(addType, addDuration);
    setShowAddPicker(false);
  };

  /* ── 片段拖拽排序 ── */
  const handleDragStart = (e: React.DragEvent, idx: number) => {
    // 如果正在裁剪拖拽，不允许排序拖拽
    if (trimDrag) return;
    dragRef.current = idx;
    setDragIdx(idx);
    e.dataTransfer.setData("application/x-clip-drag", String(idx));
    e.dataTransfer.effectAllowed = "move";
  };

  const handleDragOver = (e: React.DragEvent, idx: number) => {
    e.preventDefault();
    e.dataTransfer.dropEffect = "move";
    setDragOverIdx(idx);
  };

  const handleDragEnd = () => {
    dragRef.current = null;
    setDragIdx(null);
    setDragOverIdx(null);
  };

  const handleDrop = (e: React.DragEvent, toIdx: number) => {
    e.preventDefault();
    setDragOverIdx(null);
    const fromStr = e.dataTransfer.getData("application/x-clip-drag");
    if (fromStr !== "") {
      const fromIdx = Number(fromStr);
      if (fromIdx !== toIdx) {
        onClipReorder(fromIdx, toIdx);
      }
    }
  };

  /* ── 空轨道区域不接受素材拖入 ── */
  const handleEmptyDragOver = (e: React.DragEvent) => {
    e.preventDefault();
  };

  /* ── 裁剪手柄拖拽 ── */
  const handleTrimHandleMouseDown = useCallback(
    (e: React.MouseEvent, clipId: string, direction: TrimDirection) => {
      e.preventDefault();
      e.stopPropagation();
      const clip = clips.find((c) => c.id === clipId);
      if (!clip) return;

      const trim: TrimConfig = clip.trim_config ?? {
        start_time: 0,
        end_time: clip.duration,
        original_duration: clip.duration,
      };

      setTrimDrag({
        clipId,
        direction,
        startX: e.clientX,
        originalTrim: { ...trim },
        originalDuration: clip.duration,
      });
    },
    [clips],
  );

  /* ── 裁剪拖拽全局 mousemove/mouseup ── */
  useEffect(() => {
    if (!trimDrag) return;

    const PX_PER_SECOND = pixelsPerSecond ?? 40; // 与缩放级别同步

    const handleMouseMove = (e: MouseEvent) => {
      const dx = e.clientX - trimDrag.startX;
      const dtSec = dx / PX_PER_SECOND;
      const clip = clips.find((c) => c.id === trimDrag.clipId);
      if (!clip) return;

      const origTrim = trimDrag.originalTrim;
      const origDur = origTrim.original_duration ?? trimDrag.originalDuration;
      let newStart = origTrim.start_time;
      let newEnd = origTrim.end_time;

      if (trimDrag.direction === "left") {
        // 左手柄：调整入点
        newStart = Math.max(
          0,
          Math.min(origTrim.start_time + dtSec, newEnd - 1),
        );
      } else {
        // 右手柄：调整出点
        newEnd = Math.max(
          origTrim.start_time + 1,
          Math.min(origTrim.end_time + dtSec, origDur),
        );
      }

      const newDuration = Math.round((newEnd - newStart) * 10) / 10;

      setTrimPreview({
        clipId: trimDrag.clipId,
        startTime: Math.round(newStart * 10) / 10,
        endTime: Math.round(newEnd * 10) / 10,
        duration: newDuration,
        x: e.clientX,
        y: e.clientY,
      });
    };

    const handleMouseUp = () => {
      if (trimPreview && trimPreview.clipId === trimDrag.clipId && onClipTrim) {
        const newTrim: TrimConfig = {
          start_time: trimPreview.startTime,
          end_time: trimPreview.endTime,
          original_duration:
            trimDrag.originalTrim.original_duration ??
            trimDrag.originalDuration,
        };
        onClipTrim(trimDrag.clipId, newTrim, trimPreview.duration);
      }
      setTrimDrag(null);
      setTrimPreview(null);
    };

    document.addEventListener("mousemove", handleMouseMove);
    document.addEventListener("mouseup", handleMouseUp);
    return () => {
      document.removeEventListener("mousemove", handleMouseMove);
      document.removeEventListener("mouseup", handleMouseUp);
    };
  }, [trimDrag, trimPreview, clips, onClipTrim, pixelsPerSecond]);

  /* ── 右键菜单 ── */
  const handleContextMenu = useCallback(
    (e: React.MouseEvent, clipId: string) => {
      e.preventDefault();
      e.stopPropagation();
      setContextMenu({ x: e.clientX, y: e.clientY, clipId });
    },
    [],
  );

  /* ── 右键菜单操作 ── */
  const handleContextSplit = useCallback(() => {
    if (!contextMenu) return;
    if (onClipSplit) {
      onClipSplit(contextMenu.clipId, 0.5); // 在中间分割
    }
    setContextMenu(null);
  }, [contextMenu, onClipSplit]);

  const handleContextResetTrim = useCallback(() => {
    if (!contextMenu) return;
    if (onClipResetTrim) {
      onClipResetTrim(contextMenu.clipId);
    }
    setContextMenu(null);
  }, [contextMenu, onClipResetTrim]);

  const handleContextDelete = useCallback(() => {
    if (!contextMenu) return;
    onClipRemove(contextMenu.clipId);
    setContextMenu(null);
  }, [contextMenu, onClipRemove]);

  /* ── 时间标尺 ── */
  const trackWidth = Math.max(totalDuration * pps, 300);
  const rulerMarks: number[] = [];
  const step = totalDuration <= 30 ? 5 : totalDuration <= 60 ? 10 : 15;
  for (let t = 0; t <= totalDuration + step; t += step) {
    rulerMarks.push(t);
  }

  const formatTime = (sec: number) => {
    const m = Math.floor(sec / 60);
    const s = Math.floor(sec % 60);
    return `${m}:${s.toString().padStart(2, "0")}`;
  };

  /** 格式化裁剪时间（精确到0.1秒） */
  const formatTrimTime = (sec: number) => {
    return `${sec.toFixed(1)}s`;
  };

  return (
    <div className="ep-timeline-area">
      {/* 时间线头部 */}
      <div className="ep-timeline-header">
        <div className="ep-timeline-title">
          <span>🎬 时间线</span>
          <span className="ep-timeline-duration">
            总时长: {formatTime(totalDuration)}
          </span>
        </div>
        <div className="ep-timeline-actions">
          {/* 缩放控件 */}
          <div className="ep-timeline-zoom">
            <button
              className="ep-zoom-btn"
              onClick={() => onZoomChange?.(Math.max(10, pps - 10))}
              title="缩小"
            >
              −
            </button>
            <input
              type="range"
              className="ep-zoom-slider"
              min={10}
              max={120}
              step={5}
              value={pps}
              onChange={(e) => onZoomChange?.(Number(e.target.value))}
            />
            <button
              className="ep-zoom-btn"
              onClick={() => onZoomChange?.(Math.min(120, pps + 10))}
              title="放大"
            >
              +
            </button>
            <span className="ep-zoom-label">{pps}px/s</span>
          </div>
          <button
            className="ep-timeline-action-btn"
            onClick={() => {
              if (clips.length > 1) {
                const last = clips[clips.length - 1];
                onClipRemove(last.id);
              }
            }}
            title="删除最后一个片段"
          >
            ↩
          </button>
          <button className="ep-timeline-action-btn" title="重做">
            ↪
          </button>
        </div>
      </div>

      {/* 一镜到底提示 */}
      {currentMode === "one_take" && (
        <div className="ep-one-take-hint">🎥 一镜到底模式无片段</div>
      )}

      {/* 时间标尺 */}
      {currentMode !== "one_take" && (
        <div className="ep-time-ruler" onClick={handleRulerClick}>
          <div className="ep-time-ruler-inner" style={{ width: trackWidth }}>
            {rulerMarks.map((t) => (
              <span
                key={t}
                className="ep-time-mark"
                style={{ left: `${t * pps}px` }}
              >
                {t}s
              </span>
            ))}
          </div>
        </div>
      )}

      {/* 水平片段轨道 */}
      {currentMode !== "one_take" && (
        <div
          className="ep-clip-track"
          ref={trackRef}
          onDragOver={handleEmptyDragOver}
        >
          {/* 播放头 */}
          {currentMode !== "one_take" && totalDuration > 0 && (
            <div
              className="ep-playhead"
              style={{ left: currentTime * pps }}
              onMouseDown={handlePlayheadMouseDown}
            >
              <div className="ep-playhead-handle" />
            </div>
          )}
          {clips.length === 0 ? (
            <div className="ep-track-empty">
              <div className="ep-track-empty-icon">🎬</div>
              <div className="ep-track-empty-text">点击右侧 + 添加片段</div>
            </div>
          ) : (
            clips.map((clip, idx) => {
              /* 转场指示器 */
              const trans = clip.transition;
              const showTransition = idx > 0 && trans && trans.type !== "none";
              const transOpt = showTransition
                ? TRANSITION_OPTIONS.find((o) => o.value === trans!.type)
                : undefined;

              /* 速度徽章 */
              const speed = clip.speed;
              const showSpeed = speed && Math.abs(speed.rate - 1.0) > 0.01;

              /* 裁剪状态 */
              const hasTrim = !!clip.trim_config;
              const isHovered = hoveredClipId === clip.id;

              return (
                <React.Fragment key={clip.id}>
                  {/* 转场指示器 */}
                  {showTransition && transOpt && (
                    <div
                      className="ep-transition-indicator"
                      title={`${transOpt.label} · ${trans!.duration.toFixed(1)}s`}
                    >
                      <span className="ep-trans-icon">{transOpt.icon}</span>
                      <span className="ep-trans-duration">
                        {trans!.duration.toFixed(1)}s
                      </span>
                    </div>
                  )}

                  <div
                    className={`ep-clip-card ${selectedClipId === clip.id ? "selected" : ""} ${dragIdx === idx ? "dragging" : ""} ${dragOverIdx === idx ? "drag-over" : ""} ${hasTrim ? "trimmed" : ""}`}
                    style={{ width: Math.max(clip.duration * pps, 60) }}
                    draggable={!trimDrag}
                    onDragStart={(e) => handleDragStart(e, idx)}
                    onDragOver={(e) => handleDragOver(e, idx)}
                    onDragEnd={handleDragEnd}
                    onDrop={(e) => handleDrop(e, idx)}
                    onClick={() => onClipSelect(clip.id)}
                    onContextMenu={(e) => handleContextMenu(e, clip.id)}
                    onMouseEnter={() => setHoveredClipId(clip.id)}
                    onMouseLeave={() => setHoveredClipId(null)}
                  >
                    {/* 左裁剪手柄 */}
                    {isHovered && onClipTrim && (
                      <div
                        className="ep-trim-handle ep-trim-handle-left"
                        onMouseDown={(e) =>
                          handleTrimHandleMouseDown(e, clip.id, "left")
                        }
                        title="拖动调整入点"
                      >
                        <div className="ep-trim-handle-line" />
                      </div>
                    )}

                    {/* 类型图标 */}
                    <div className="ep-clip-thumbnail">
                      {CLIP_TYPE_ICONS[clip.type] || "🎬"}
                    </div>

                    {/* 片段信息 */}
                    <div className="ep-clip-info">
                      <span className="ep-clip-name">
                        {CLIP_TYPE_LABELS[clip.type] || "片段"} {idx + 1}
                      </span>
                      <span className="ep-clip-duration">
                        {clip.duration}s
                        {hasTrim && (
                          <span className="ep-trim-indicator" title="已裁剪">
                            ✂
                          </span>
                        )}
                      </span>
                    </div>

                    {/* 速度徽章 */}
                    {showSpeed && (
                      <span className="ep-speed-badge">
                        {speed!.rate.toFixed(1)}x
                      </span>
                    )}

                    {/* 裁剪徽章 */}
                    {hasTrim && (
                      <span
                        className="ep-trim-badge"
                        title={`入点 ${clip.trim_config!.start_time.toFixed(1)}s / 出点 ${clip.trim_config!.end_time.toFixed(1)}s`}
                      >
                        ✂
                      </span>
                    )}

                    {/* 右裁剪手柄 */}
                    {isHovered && onClipTrim && (
                      <div
                        className="ep-trim-handle ep-trim-handle-right"
                        onMouseDown={(e) =>
                          handleTrimHandleMouseDown(e, clip.id, "right")
                        }
                        title="拖动调整出点"
                      >
                        <div className="ep-trim-handle-line" />
                      </div>
                    )}

                    {/* 删除按钮 */}
                    <button
                      className="ep-clip-remove"
                      onClick={(e) => {
                        e.stopPropagation();
                        onClipRemove(clip.id);
                      }}
                    >
                      ✕
                    </button>
                  </div>
                </React.Fragment>
              );
            })
          )}

          {/* ── 轨道末尾 "+" 添加卡片 ── */}
          <div className="ep-track-add-card-wrapper">
            <div
              ref={addCardRef}
              className="ep-track-add-card"
              onClick={handleTogglePicker}
              title="添加片段"
            >
              +
            </div>
          </div>
        </div>
      )}

      {/* 裁剪预览 tooltip */}
      {trimPreview && (
        <div
          className="ep-trim-preview"
          style={{
            position: "fixed",
            left: trimPreview.x + 12,
            top: trimPreview.y - 40,
          }}
        >
          <div className="ep-trim-preview-row">
            <span className="ep-trim-preview-label">入点</span>
            <span className="ep-trim-preview-value">
              {formatTrimTime(trimPreview.startTime)}
            </span>
          </div>
          <div className="ep-trim-preview-row">
            <span className="ep-trim-preview-label">出点</span>
            <span className="ep-trim-preview-value">
              {formatTrimTime(trimPreview.endTime)}
            </span>
          </div>
          <div className="ep-trim-preview-row ep-trim-preview-duration">
            <span className="ep-trim-preview-label">时长</span>
            <span className="ep-trim-preview-value">
              {formatTrimTime(trimPreview.duration)}
            </span>
          </div>
        </div>
      )}

      {/* 右键菜单 */}
      {contextMenu && (
        <div
          ref={contextMenuRef}
          className="ep-context-menu"
          style={{
            position: "fixed",
            left: contextMenu.x,
            top: contextMenu.y,
          }}
        >
          <div className="ep-context-menu-item" onClick={handleContextSplit}>
            <span className="ep-context-menu-icon">✂️</span>
            <span>分割片段</span>
          </div>
          {clips.find((c) => c.id === contextMenu.clipId)?.trim_config && (
            <div
              className="ep-context-menu-item"
              onClick={handleContextResetTrim}
            >
              <span className="ep-context-menu-icon">↩️</span>
              <span>恢复原始长度</span>
            </div>
          )}
          <div className="ep-context-menu-divider" />
          <div
            className="ep-context-menu-item ep-context-menu-item-danger"
            onClick={handleContextDelete}
          >
            <span className="ep-context-menu-icon">🗑️</span>
            <span>删除片段</span>
          </div>
        </div>
      )}

      {/* 类型+时长选择面板 */}
      {showAddPicker && (
        <div
          ref={pickerRef}
          className="ep-add-clip-picker ep-add-clip-picker--portal"
          style={{
            position: "fixed",
            top: pickerPos.top,
            right: pickerPos.right,
          }}
        >
          <div className="ep-add-clip-picker-title">添加片段</div>

          {/* 类型选择 */}
          <div className="ep-add-clip-type-row">
            <span className="ep-add-clip-type-label">类型:</span>
            {availableTypes.map((t) => (
              <button
                key={t}
                className={`ep-add-clip-type-btn${addType === t ? " active" : ""}`}
                onClick={() => setAddType(t)}
              >
                {CLIP_TYPE_ICONS[t]} {CLIP_TYPE_LABELS[t]}
              </button>
            ))}
          </div>

          {/* 时长输入 */}
          <div className="ep-add-clip-duration-row">
            <span className="ep-add-clip-type-label">时长:</span>
            <input
              type="number"
              className="ep-duration-input"
              min={1}
              max={120}
              value={addDuration}
              onChange={(e) =>
                setAddDuration(
                  Math.max(1, Math.min(120, Number(e.target.value) || 1)),
                )
              }
            />
            <span className="ep-add-clip-duration-unit">秒</span>
          </div>

          {/* 确认按钮 */}
          <button
            className="ep-add-clip-confirm-btn"
            onClick={handleConfirmAdd}
          >
            添加
          </button>
        </div>
      )}
    </div>
  );
};

export default TimelinePanel;