xiaoxia-saas/apps/web/src/pages/generate/components/Step6CoverSettings.tsx

import React from "react"
import { Modal, Spin } from "antd"
import type { CoverConfig } from "../types/cover"
import { useStep6Cover } from "../hooks/useStep6Cover"
import Button from "@/components/ui/Button"
import CoverSettingsModal from "./cover-settings/CoverSettingsModal"
import CoverEditorModal from "./cover-settings/CoverEditorModal"

interface Step6CoverSettingsProps {
  coverSettings: CoverConfig
  onCoverSettingsChange: (settings: CoverConfig) => void
  duration: number
  /** 当前素材 ID 列表，用于智能封面生成 */
  assetIds?: string[]
  /** 当前选中的模板 ID */
  selectedTemplate?: string
  /** Step4 标题设置，用于预览视频烧录标题 & 封面叠加标题 */
  titleSettings?: import("../types").TitleSettings
  /** 预览任务创建回调——将 task_id 暴露给父组件供 confirmGeneration 复用 */
  onPreviewTaskCreated?: (taskId: string) => void
  /** 从预览响应中提取到 source_edit_plan_id 时的回调 */
  onSourceEditPlanIdExtracted?: (planId: string) => void
  /** 配音模式 */
  voiceMode?: "preset" | "custom" | "clone"
  /** 选中的配音素材 ID */
  selectedVoice?: string
  /** 选中的克隆音色 ID */
  selectedClonedVoice?: string
  /** BGM 开关 */
  bgm?: boolean
  /** BGM 配置 */
  bgmConfig?: { enabled: boolean; music_id?: string }
}

const Step6CoverSettings: React.FC<Step6CoverSettingsProps> = (props) => {
  const {
    coverSettings,
    generating,
    generateAutoCover,
    showCoverSettings,
    setShowCoverSettings,
    showCoverEditor,
    setShowCoverEditor,
    selectedTemplateId,
    editingTemplate,
    coverTemplates,
    templatesLoading,
    templatesError,
    handleSelectTemplate,
    handleEditTemplate,
    handleSaveTemplate,
    handleDeleteTemplate,
  } = useStep6Cover({
    coverSettings: props.coverSettings,
    onCoverSettingsChange: props.onCoverSettingsChange,
    duration: props.duration,
    assetIds: props.assetIds,
    selectedTemplate: props.selectedTemplate,
    titleSettings: props.titleSettings,
    onPreviewTaskCreated: props.onPreviewTaskCreated,
    onSourceEditPlanIdExtracted: props.onSourceEditPlanIdExtracted,
    voiceMode: props.voiceMode,
    selectedVoice: props.selectedVoice,
    selectedClonedVoice: props.selectedClonedVoice,
    bgm: props.bgm,
    bgmConfig: props.bgmConfig,
  })

  const handleAutoGenerate = () => {
    generateAutoCover()
  }

  // 预览图：优先 thumbnail_url，其次 upload_url
  const previewUrl = coverSettings.thumbnail_url || coverSettings.upload_url

  return (
    <div className="xx-form-section">
      <h3>🖼️ 选择封面</h3>

      <div className="xx-cover-actions">
        <Button buttonType="primary" onClick={handleAutoGenerate}>
          ✨ 自动生成封面
        </Button>
        <Button buttonType="ghost" onClick={() => setShowCoverSettings(true)}>
          ⚙️ 封面设置
        </Button>
      </div>

      <div className="xx-section-title">封面预览</div>
      <div className="xx-cover-preview-box">
        {previewUrl ? (
          <img src={previewUrl} alt="封面预览" className="xx-cover-preview-img" />
        ) : (
          <div className="xx-cover-preview-placeholder">
            <span style={{ fontSize: 28 }}>🖼️</span>
            <span>点击"自动生成封面"或选择模板</span>
          </div>
        )}
        <div className="xx-cover-preview-ratio">9:16</div>
      </div>

      <CoverSettingsModal
        open={showCoverSettings}
        onClose={() => setShowCoverSettings(false)}
        templates={coverTemplates}
        loading={templatesLoading}
        error={templatesError}
        selectedTemplateId={selectedTemplateId}
        onSelectTemplate={handleSelectTemplate}
        onEditTemplate={handleEditTemplate}
        onDeleteTemplate={handleDeleteTemplate}
        onCreateNew={() => {
          setShowCoverSettings(false)
          setShowCoverEditor(true)
        }}
      />

      <CoverEditorModal
        open={showCoverEditor}
        onClose={() => setShowCoverEditor(false)}
        template={editingTemplate}
        onSave={handleSaveTemplate}
      />

      {/* AI 生成封面进度弹窗 */}
      <Modal open={generating} closable={false} footer={null} centered>
        <div style={{ textAlign: "center", padding: "24px 0" }}>
          <Spin size="large" />
          <p style={{ marginTop: 16, fontSize: 14, color: "#666" }}>AI 正在生成封面，请稍候...</p>
        </div>
      </Modal>
    </div>
  )
}

export default Step6CoverSettings