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

/**
 * 预览区 — V8 原型 1:1 还原
 * 手机模型预览
 */
import React from "react"
import type { ClipData, ClipType } from "../types"
import type { TitleConfig } from "@/api/template-editor"
import { getFontFamily } from "@/pages/generate/constants"

interface SubtitleSettings {
  enabled: boolean
  position: string
  font: string
  size: number
  animation: string
}

interface PreviewPlayerProps {
  clips: ClipData[]
  selectedClipId: string | null
  isPlaying: boolean
  titleConfig?: TitleConfig
  subtitleSettings?: SubtitleSettings
  onClipSelect: (clipId: string) => void
  onPlayPause: () => void
}

const CLIP_TYPE_ICONS: Record<ClipType, string> = {
  voice: "🎙️",
  pip: "🖼️",
}

const CLIP_TYPE_LABELS: Record<ClipType, string> = {
  voice: "口播",
  pip: "混剪",
}

const PreviewPlayer: React.FC<PreviewPlayerProps> = ({
  clips,
  selectedClipId,
  isPlaying,
  titleConfig,
  subtitleSettings,
  onPlayPause,
}) => {
  const selectedClip = clips.find((c) => c.id === selectedClipId)
  const displayClip = selectedClip || clips[0]

  return (
    <div className="ep-preview-area">
      {/* 手机模型预览 */}
      <div className="ep-phone-preview">
        <div className="ep-phone-status-bar">
          <span>9:41</span>
          <span>📶 🔋</span>
        </div>
        <div className="ep-phone-content">
          {displayClip ? (
            <>
              <button className="ep-phone-play-btn" onClick={onPlayPause}>
                {isPlaying ? "⏸" : "▶"}
              </button>
              <div className="ep-phone-progress">
                <div
                  className="ep-phone-progress-fill"
                  style={{ width: isPlaying ? "45%" : "0%" }}
                />
              </div>
              <div className="ep-phone-clip-label">
                {CLIP_TYPE_ICONS[displayClip.type] || "🎬"}{" "}
                {CLIP_TYPE_LABELS[displayClip.type] || "片段"}
              </div>
            </>
          ) : (
            <span className="ep-phone-empty-hint">暂无片段</span>
          )}

          {/* 标题实时预览 */}
          {titleConfig && !titleConfig.ai_auto_select && titleConfig.content && (
            <div
              className="ep-preview-title"
              style={{
                fontSize: `${Math.min(titleConfig.font_size, 20)}px`,
                fontFamily: getFontFamily(titleConfig.font_preset),
                fontWeight: "bold",
                fontStyle: "normal",
                textShadow: "2px 2px 4px rgba(0,0,0,0.5)",
                WebkitTextStroke: "1px rgba(0,0,0,0.6)",
                top:
                  titleConfig.position === "top"
                    ? "6.25%"
                    : titleConfig.position === "center"
                      ? "50%"
                      : "auto",
                bottom: titleConfig.position === "bottom" ? "30px" : "auto",
                transform: titleConfig.position === "center" ? "translateY(-50%)" : "none",
                color: titleConfig.font_color,
              }}
            >
              {titleConfig.content}
            </div>
          )}

          {/* 字幕实时预览 */}
          {subtitleSettings?.enabled && (
            <div
              className="ep-preview-subtitle"
              style={{
                fontSize: `${Math.min(subtitleSettings.size, 14)}px`,
                fontFamily: getFontFamily(subtitleSettings.font),
                top:
                  subtitleSettings.position === "top"
                    ? "8px"
                    : subtitleSettings.position === "center"
                      ? "50%"
                      : "auto",
                bottom: subtitleSettings.position === "bottom" ? "8px" : "auto",
                transform: subtitleSettings.position === "center" ? "translateY(-50%)" : "none",
              }}
            >
              字幕预览文字
            </div>
          )}
        </div>
      </div>
    </div>
  )
}

export default PreviewPlayer