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

/**
 * 转场特效选择器 — Drawer 形式
 * 14 种转场预设卡片网格 + 转场时长滑块
 * 支持全局默认转场 + 单个片段间独立设置
 */
import React, { useCallback } from "react"
import { Drawer, Slider } from "antd"
import { TRANSITION_OPTIONS } from "@/api/template-editor"
import type { TransitionConfig, TransitionType } from "../types"
import { DEFAULT_TRANSITION } from "../types"

/* ──────────── Props ──────────── */
interface TransitionSelectorProps {
  open: boolean
  onClose: () => void
  /** 当前转场配置 */
  config: TransitionConfig
  onChange: (config: TransitionConfig) => void
  /** 标题提示（区分全局 / 片段间） */
  title?: string
}

const TransitionSelector: React.FC<TransitionSelectorProps> = ({
  open,
  onClose,
  config,
  onChange,
  title = "转场特效",
}) => {
  /* ── 选择转场类型 ── */
  const handleSelectType = useCallback(
    (type: TransitionType) => {
      onChange({ ...config, type })
    },
    [config, onChange],
  )

  /* ── 修改时长 ── */
  const handleChangeDuration = useCallback(
    (duration: number) => {
      onChange({ ...config, duration })
    },
    [config, onChange],
  )

  /* ── 重置为无转场 ── */
  const handleReset = useCallback(() => {
    onChange({ ...DEFAULT_TRANSITION })
  }, [onChange])

  return (
    <Drawer
      title={`🎬 ${title}`}
      placement="right"
      width={480}
      open={open}
      onClose={onClose}
      className="transition-selector-drawer"
    >
      {/* ── 时长滑块 ── */}
      <div className="ts-duration-section">
        <div className="ts-duration-header">
          <span className="ts-duration-label">转场时长</span>
          <span className="ts-duration-value">{config.duration.toFixed(1)}s</span>
        </div>
        <Slider
          min={0.3}
          max={2.0}
          step={0.1}
          value={config.duration}
          onChange={handleChangeDuration}
          tooltip={{ formatter: (v) => `${(v as number).toFixed(1)}s` }}
        />
        <div className="ts-duration-marks">
          <span>0.3s</span>
          <span>1.0s</span>
          <span>2.0s</span>
        </div>
      </div>

      {/* ── 转场类型卡片网格 ── */}
      <div className="ts-grid">
        {TRANSITION_OPTIONS.map((opt) => {
          const isActive = config.type === opt.value
          return (
            <div
              key={opt.value}
              className={`ts-card${isActive ? " active" : ""}`}
              onClick={() => handleSelectType(opt.value)}
            >
              <div className="ts-card-icon">{opt.icon}</div>
              <div className="ts-card-name">{opt.label}</div>
              {isActive && <span className="ts-card-check">✓</span>}
            </div>
          )
        })}
      </div>

      {/* ── 底部操作 ── */}
      <div className="ts-footer">
        <button className="ts-reset-btn" onClick={handleReset}>
          重置为无转场
        </button>
        <div className="ts-current">
          当前：
          {TRANSITION_OPTIONS.find((o) => o.value === config.type)?.label ?? "无转场"}
          {" · "}
          {config.duration.toFixed(1)}s
        </div>
      </div>
    </Drawer>
  )
}

export default TransitionSelector