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

/**
 * GeneratePage 步骤底部操作按钮
 *
 * 步骤 1~3：上一步 / 下一步
 * 步骤 4（标题+预览）：上一步 / 确认生成视频（点击后直接创建最终渲染任务，成功后跳转步骤5）
 * 步骤 5（确认生成）：上一步 / 下一步（渲染中禁用，渲染完成后可进入封面）
 * 步骤 6（选择封面）：仅上一步
 */
import React from "react"

export interface GenerateStepActionsProps {
  currentStep: number
  onPrev: () => void
  onNext: () => void
  /** 步骤4：确认生成视频（校验 + 创建渲染任务 + 成功后进入步骤5） */
  onConfirmGenerate: () => void | Promise<void>
  generating: boolean
  generated: boolean
  generateError: string | null
}

export const GenerateStepActions: React.FC<GenerateStepActionsProps> = ({
  currentStep,
  onPrev,
  onNext,
  onConfirmGenerate,
  generating,
  generated,
  generateError,
}) => {
  const renderPrimaryButton = () => {
    /* 步骤 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>
        )
      }
      if (generated) {
        return (
          <button className="xx-btn xx-btn-primary" onClick={onNext}>
            下一步 →
          </button>
        )
      }
      return (
        <button className="xx-btn xx-btn-primary" onClick={onConfirmGenerate}>
          ✨ 确认生成视频
        </button>
      )
    }

    /* 步骤 5：渲染中禁用，完成后下一步进入封面 */
    if (currentStep === 5) {
      return (
        <button
          className="xx-btn xx-btn-primary"
          onClick={onNext}
          disabled={generating || !generated}
        >
          {generating ? "视频生成中…" : "下一步 →"}
        </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