/**
 * 预览区 — V8 原型 1:1 还原
 * 手机模型预览(150x267) + 封面预览(150x267) 并排
 * 封面右侧竖排4个方案按钮
 */
import React from "react";
import type { ClipData, ClipType } from "../types";

interface CoverScheme {
  key: string;
  label: string;
}

interface TitleSettings {
  aiAutoSelect: boolean;
  title: string;
  position: string;
  font: string;
  size: number;
  bold: boolean;
  italic: boolean;
  stroke: boolean;
  shadow: boolean;
}

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

interface PreviewPlayerProps {
  clips: ClipData[];
  selectedClipId: string | null;
  isPlaying: boolean;
  currentCoverScheme: string;
  coverSchemes: CoverScheme[];
  aiCoverLoading: boolean;
  titleSettings?: TitleSettings;
  subtitleSettings?: SubtitleSettings;
  onClipSelect: (clipId: string) => void;
  onCoverSchemeChange: (scheme: string) => void;
  onPlayPause: () => void;
  onAiGenerateCover: (coverType: "ai_frame" | "ai_regenerate") => 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,
  currentCoverScheme,
  coverSchemes,
  aiCoverLoading,
  titleSettings,
  subtitleSettings,
  onCoverSchemeChange,
  onPlayPause,
  onAiGenerateCover,
}) => {
  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>
          )}

          {/* 标题实时预览 */}
          {titleSettings &&
            !titleSettings.aiAutoSelect &&
            titleSettings.title && (
              <div
                className="ep-preview-title"
                style={{
                  fontSize: `${Math.min(titleSettings.size, 20)}px`,
                  fontFamily: titleSettings.font,
                  fontWeight: titleSettings.bold ? "bold" : "normal",
                  fontStyle: titleSettings.italic ? "italic" : "normal",
                  textShadow: titleSettings.shadow
                    ? "2px 2px 4px rgba(0,0,0,0.5)"
                    : "none",
                  WebkitTextStroke: titleSettings.stroke
                    ? "1px rgba(0,0,0,0.6)"
                    : "none",
                  top:
                    titleSettings.position === "top"
                      ? "8px"
                      : titleSettings.position === "center"
                        ? "50%"
                        : "auto",
                  bottom: titleSettings.position === "bottom" ? "30px" : "auto",
                  transform:
                    titleSettings.position === "center"
                      ? "translateY(-50%)"
                      : "none",
                }}
              >
                {titleSettings.title}
              </div>
            )}

          {/* 字幕实时预览 */}
          {subtitleSettings?.enabled && (
            <div
              className="ep-preview-subtitle"
              style={{
                fontSize: `${Math.min(subtitleSettings.size, 14)}px`,
                fontFamily: 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 className="ep-cover-preview">
        <div className="ep-cover-image">
          {displayClip ? (
            <span className="ep-cover-icon">
              {CLIP_TYPE_ICONS[displayClip.type] || "🎬"}
            </span>
          ) : (
            <span>暂无封面</span>
          )}
        </div>
        <div className="ep-cover-label">
          {coverSchemes.find((s) => s.key === currentCoverScheme)?.label ||
            "封面预览"}
        </div>
        {/* AI 封面操作按钮 */}
        <div className="ep-cover-ai-btns">
          <button
            className="ep-cover-ai-btn"
            onClick={() => onAiGenerateCover("ai_frame")}
            disabled={aiCoverLoading}
            title="AI 智能选帧"
          >
            {aiCoverLoading ? "⏳" : "🤖"} AI 选帧
          </button>
          <button
            className="ep-cover-ai-btn"
            onClick={() => onAiGenerateCover("ai_regenerate")}
            disabled={aiCoverLoading}
            title="AI 重新生成封面"
          >
            {aiCoverLoading ? "⏳" : "🔄"} AI 重选
          </button>
        </div>
      </div>

      {/* 封面方案按钮（竖排4个） */}
      <div className="ep-cover-tags">
        {coverSchemes.map((scheme) => (
          <button
            key={scheme.key}
            className={`ep-cover-tag ${currentCoverScheme === scheme.key ? "active" : ""}`}
            onClick={() => onCoverSchemeChange(scheme.key)}
          >
            {scheme.label}
          </button>
        ))}
      </div>
    </div>
  );
};

export default PreviewPlayer;
