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

/**
 * GeneratePage 步骤内容渲染（#1970 流程重构）
 * 步骤顺序：选择模式(1) → 选择素材(2) → 选择标题(3) → 确认生成(4) → 选择封面(5)
 * 原步骤"选择配音"已从主流程移除，改为 Step1 下一步分支弹窗（VoiceSelectModal / ScriptSelectModal → TtsVoiceModal）。
 */
import React from "react"
import type { CoverConfig } from "../types/cover"
import type { TitleSettings } from "../types"
import Step1EditMode from "./Step1EditMode"
import type { EditMode } from "./Step1EditMode"
import Step2MaterialSelect from "../components/Step2MaterialSelect"
import Step4TitleSettings from "../components/Step4TitleSettings"
import Step6CoverSettings from "../components/Step6CoverSettings"
import BatchGenerationGrid from "./BatchGenerationGrid"
import Step3VoiceWithMode from "./Step3VoiceWithMode"
import type { BatchTaskState } from "../hooks/generate-video/useGenerationPolling"
import type { GeneratedVideo } from "@/api/template-editor"
import type { TitleTemplate } from "@/components/title/template-types"

export interface GenerateStepContentProps {
  currentStep: number
  /* Step1：剪辑模式 + 生成设置 */
  editMode: EditMode
  onEditModeChange: (m: EditMode) => void
  dedupEnabled: boolean
  onDedupEnabledChange: (v: boolean) => void
  /* ── 片段数量（#1899） ── */
  clipCount: number
  onClipCountChange: (n: number) => void
  /* ── 生成数量/比例（Step1 设置） ── */
  previewCount: number
  onPreviewCountChange: (n: number) => void
  videoRatio: "9:16" | "16:9"
  onVideoRatioChange: (r: "9:16" | "16:9") => void
  /* ── 素材 ── */
  materialMode: "manual" | "auto"
  onMaterialModeChange: (mode: "manual" | "auto") => void
  selectedMaterials: string[]
  onSelectedMaterialsChange: (ids: string[]) => void
  smartSelectedIds: string[]
  onSmartSelectedIdsChange: (ids: string[]) => void
  selectedTemplate?: string
  /* ── 标题 ── */
  titleSettings: TitleSettings
  onTitleSettingsChange: (settings: TitleSettings) => void
  onUpdatePosition: (position: string) => void
  onUpdateFont: (font: string) => void
  onUpdateSize: (size: number) => void
  onToggleBold: () => void
  onToggleItalic: () => void
  onToggleStroke: () => void
  onToggleShadow: () => void
  onApplyPreset: (presetKey: string) => void
  onUpdateStyle?: (patch: Partial<TitleSettings>) => void
  activePreset: string | null
  titlePresets: Array<{
    key: string
    label: string
    emoji?: string
    style: Record<string, unknown>
  }>
  enableTemplates?: boolean
  selectedTemplateId?: string | null
  onApplyTemplate?: (settings: import("../types").TitleSettings, template: TitleTemplate) => void
  /* ── 封面 ── */
  coverSettings: CoverConfig
  onCoverSettingsChange: (settings: CoverConfig) => void
  /* ── 配音 ── */
  selectedVoice: string
  onSelectedVoiceChange: (id: string) => void
  /* ── 生成 ── */
  generating: boolean
  generated: boolean
  generateError: string | null
  progress: number
  generatedVideos: GeneratedVideo[]
  onRetry: () => void
  onRetryBatchTask: (taskId: string) => void
  onDismissError: () => void
  batchTasks: BatchTaskState[]
  bgm: boolean
  bgmConfig?: { enabled: boolean; music_id?: string }
  /* ── 批量生成 ── */
  previewTitles: string[]
  onPreviewTitlesChange: (titles: string[]) => void
  voiceModePerVideo: boolean
  onVoiceModePerVideoChange: (v: boolean) => void
  voiceLibraryIds: string[]
  onVoiceLibraryIdsChange: (ids: string[]) => void
  previewCovers: string[]
  onPreviewCoversChange: (urls: string[]) => void
  selectedVariantIds?: number[]
  selectedCoverTemplate?: string
  onSelectedCoverTemplateChange?: (templateId: string) => void
  /** 单视频任务 ID（兜底，awaiting_cover 状态下 results 接口未入库时用） */
  currentTaskId?: string
  /** Step3 右上角确认生成按钮 */
  onConfirmGenerate?: () => void | Promise<void>
}

export const GenerateStepContent: React.FC<GenerateStepContentProps> = (props) => {
  // Only destructure props actually referenced in JSX below
  const {
    currentStep,
    editMode,
    onEditModeChange,
    dedupEnabled,
    onDedupEnabledChange,
    clipCount,
    onClipCountChange,
    previewCount,
    onPreviewCountChange,
    videoRatio,
    onVideoRatioChange,
    materialMode,
    onMaterialModeChange,
    selectedMaterials,
    onSelectedMaterialsChange,
    smartSelectedIds,
    onSmartSelectedIdsChange,
    selectedTemplate,
    titleSettings,
    onTitleSettingsChange,
    onUpdatePosition,
    onUpdateFont,
    onUpdateSize,
    onToggleBold,
    onToggleItalic,
    onToggleStroke,
    onToggleShadow,
    onApplyPreset,
    onUpdateStyle,
    enableTemplates,
    selectedTemplateId,
    onApplyTemplate,
    activePreset,
    titlePresets,
    coverSettings,
    onCoverSettingsChange,
    generating,
    generateError,
    progress,
    onRetry,
    generatedVideos,
    batchTasks,
    onRetryBatchTask,
    previewTitles,
    onPreviewTitlesChange,
    previewCovers,
    onPreviewCoversChange,
    selectedVariantIds,
    selectedCoverTemplate,
    onSelectedCoverTemplateChange,
    onConfirmGenerate,
    selectedVoice,
    onSelectedVoiceChange,
    voiceModePerVideo,
    onVoiceModePerVideoChange,
    voiceLibraryIds,
    onVoiceLibraryIdsChange,
  } = props

  switch (currentStep) {
    case 1:
      return (
        <Step1EditMode
          editMode={editMode}
          onEditModeChange={onEditModeChange}
          previewCount={previewCount}
          onPreviewCountChange={onPreviewCountChange}
          videoRatio={videoRatio}
          onVideoRatioChange={onVideoRatioChange}
          dedupEnabled={dedupEnabled}
          onDedupEnabledChange={onDedupEnabledChange}
        />
      )
    case 2:
      return (
        <Step2MaterialSelect
          editMode={editMode}
          materialMode={materialMode}
          onMaterialModeChange={onMaterialModeChange}
          selectedMaterials={selectedMaterials}
          onSelectedMaterialsChange={onSelectedMaterialsChange}
          smartSelectedIds={smartSelectedIds}
          onSmartSelectedIdsChange={onSmartSelectedIdsChange}
          clipCount={clipCount}
          onClipCountChange={onClipCountChange}
          selectedTemplate={selectedTemplate}
        />
      )
    case 3:
      return (
        <>
          <Step4TitleSettings
            titleSettings={titleSettings}
            onTitleSettingsChange={onTitleSettingsChange}
            onUpdatePosition={onUpdatePosition}
            onUpdateFont={onUpdateFont}
            onUpdateSize={onUpdateSize}
            onToggleBold={onToggleBold}
            onToggleItalic={onToggleItalic}
            onToggleStroke={onToggleStroke}
            onToggleShadow={onToggleShadow}
            onApplyPreset={onApplyPreset}
            onUpdateStyle={onUpdateStyle}
            activePreset={activePreset}
            titlePresets={titlePresets}
            enableTemplates={enableTemplates}
            selectedTemplateId={selectedTemplateId}
            onApplyTemplate={onApplyTemplate}
            previewCount={previewCount}
            previewTitles={previewTitles}
            onPreviewTitlesChange={onPreviewTitlesChange}
            onConfirmGenerate={onConfirmGenerate}
            generating={props.generating}
            selectedCount={
              props.previewCount && props.previewCount > 1
                ? props.selectedVariantIds?.length || 1
                : 1
            }
          />
          {/* 批量配音选择：共用/独立切换（#2096） */}
          <Step3VoiceWithMode
            previewCount={previewCount}
            selectedVoice={selectedVoice}
            onSelectedVoiceChange={onSelectedVoiceChange}
            voiceModePerVideo={voiceModePerVideo}
            onVoiceModePerVideoChange={onVoiceModePerVideoChange}
            voiceLibraryIds={voiceLibraryIds}
            onVoiceLibraryIdsChange={onVoiceLibraryIdsChange}
          />
        </>
      )
    case 4:
      return (
        <div className="xx-form-section">
          {previewCount > 1 ? (
            <BatchGenerationGrid
              tasks={batchTasks}
              titles={previewTitles}
              onRetryTask={onRetryBatchTask}
            />
          ) : generating ? (
            <div className="xx-gen-progress-card">
              <div className="xx-gen-progress-header">
                <div className="xx-gen-progress-info">
                  <div className="xx-gen-progress-phase">
                    ⏳ 视频渲染中… {Math.round(progress)}%
                  </div>
                  <div className="xx-gen-progress-sub">
                    生成过程中可以切换到其他页面，完成后可在任务历史查看
                  </div>
                </div>
              </div>
              <div className="xx-gen-progress-bar">
                <div
                  className="xx-gen-progress-bar-fill"
                  style={{ width: `${Math.min(Math.round(progress), 100)}%` }}
                />
              </div>
            </div>
          ) : generateError ? (
            <div className="xx-gen-error-card">
              <div className="xx-gen-error-info">
                <div className="xx-gen-error-title">生成失败</div>
                <div className="xx-gen-error-msg">{generateError}</div>
              </div>
              <button type="button" className="xx-btn xx-btn-primary xx-btn-sm" onClick={onRetry}>
                🔄 重试
              </button>
            </div>
          ) : null}
        </div>
      )
    case 5:
      return (
        <Step6CoverSettings
          coverSettings={coverSettings}
          onCoverSettingsChange={onCoverSettingsChange}
          titleSettings={titleSettings}
          generatedVideos={generatedVideos}
          previewCount={previewCount}
          previewTitles={previewTitles}
          previewCovers={previewCovers}
          onPreviewCoversChange={onPreviewCoversChange}
          selectedVariantIndexes={selectedVariantIds}
          selectedTemplate={selectedCoverTemplate}
          onTemplateChange={onSelectedCoverTemplateChange}
          currentTaskId={props.currentTaskId}
        />
      )
    default:
      return null
  }
}

export default GenerateStepContent