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

/**
 * GeneratePage 步骤底部操作按钮（Issue #1677 修正：固定 6 步）
 *
 * 步骤 1~3：上一步 / 下一步
 * 步骤 4（选择标题）：「✨ 确认生成视频 / 确认生成 N 个视频」→ 创建正式生成任务，成功后跳步骤5
 * 步骤 5（确认生成）：渲染进度页，全部完成后「下一步：选择封面」；仅上一步
 * 步骤 6（选择封面）：仅上一步
 */
import React from "react"

export interface GenerateStepActionsProps {
  currentStep: number
  onPrev: () => void
  onNext: () => void
  /** 步骤4：确认生成视频（校验 + 创建渲染任务） */
  onConfirmGenerate: () => void | Promise<void>
  generating: boolean
  generated: boolean
  generateError: string | null
  /** 批量模式下勾选的视频数量（N=1 时为1） */
  selectedCount?: number
}

const GenerateStepActions: React.FC<GenerateStepActionsProps> = ({
  currentStep,
  onPrev,
  onNext,
  onConfirmGenerate,
  generating,
  generated,
  generateError,
  selectedCount = 1,
}) => {
  const renderPrimaryButton = () => {
    /* 步骤 1~3：上一步 / 下一步 */
    if (currentStep < 4) {
      return (
        <button className="xx-btn xx-btn-primary" onClick={onNext}>
          下一步 →
        </button>
      )
    }

    /* 步骤 4：选择标题 — 确认生成 */
    if (currentStep === 4) {
      if (generating) {
        return (
          <button className="xx-btn xx-btn-primary" disabled>
            ⏳ 正在提交生成任务…
          </button>
        )
      }
      if (generateError) {
        return (
          <button className="xx-btn xx-btn-primary" onClick={onConfirmGenerate}>
            🔄 重新生成
          </button>
        )
      }
      return (
        <button className="xx-btn xx-btn-primary" onClick={onConfirmGenerate}>
          {selectedCount > 1 ? `✨ 确认生成 ${selectedCount} 个视频` : "✨ 确认生成视频"}
        </button>
      )
    }

    /* 步骤 5：确认生成进度页 — 全部完成后下一步进封面 */
    if (currentStep === 5) {
      if (generated) {
        return (
          <button className="xx-btn xx-btn-primary" onClick={onNext}>
            下一步：选择封面 →
          </button>
        )
      }
      return (
        <button className="xx-btn xx-btn-primary" disabled>
          ⏳ 视频渲染中…
        </button>
      )
    }

    /* 步骤 6（封面，最后一步）：无主按钮 */
    return null
  }

  return (
    <div className="xx-step-actions">
      <button className="xx-btn xx-btn-ghost" onClick={onPrev} disabled={currentStep === 1}>
        ← 上一步
      </button>
      {renderPrimaryButton()}
    </div>
  )
}

export default GenerateStepActions