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

/**
 * GeneratePage 步骤底部操作按钮（5 步向导：素材→配音→标题→确认生成→封面）
 * v3: 修复 #1954 off-by-one —— 步骤4 单视频/批量生成完成后正确显示「下一步：选择封面」
 *
 * 步骤 1~3：上一步 / 下一步
 * 步骤 4（确认生成/进度）：未开始 →「✨ 确认生成视频」；生成中 →「⏳ 视频渲染中…」；
 *                       失败 →「🔄 重新生成」；全部完成 →「下一步：选择封面 →」
 * 步骤 5（选择封面）：上一步 + 完成按钮
 */
import React from "react"
import { Tooltip } from "antd"
import { ThunderboltOutlined, ExclamationCircleOutlined } from "@ant-design/icons"

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
  /** 本次预估消耗积分 */
  estimatedCost?: number
  /** 是否积分不足 */
  pointsInsufficient?: boolean
  /** 积分不足原因 */
  insufficientReason?: string
  /** 本次使用的免费混剪次数 */
  freeClipsUsedThisTime?: number
  /** 前往充值 */
  onRecharge?: () => void
  /** Step5 点击完成（保存入库并跳转） */
  onFinish?: () => void | Promise<void>
  /** Step5 保存中 */
  finishing?: boolean
}

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

    /* 步骤 4：确认生成 / 进度 / 完成进封面 */
    if (currentStep === 4) {
      // #1954 修复：单视频/批量 全部生成完成后显示「下一步：选择封面」
      if (generated && !generating && !generateError) {
        return (
          <button className="xx-btn xx-btn-primary" onClick={onNext}>
            下一步：选择封面 →
          </button>
        )
      }

      const costTag =
        typeof estimatedCost === "number" && estimatedCost > 0 ? (
          <span className="xx-step-cost-tag">
            <ThunderboltOutlined />
            {estimatedCost}
          </span>
        ) : typeof estimatedCost === "number" &&
          estimatedCost === 0 &&
          typeof freeClipsUsedThisTime === "number" ? (
          <span className="xx-step-cost-tag free">使用 {freeClipsUsedThisTime} 次免费额度</span>
        ) : null

      if (generating) {
        return (
          <button className="xx-btn xx-btn-primary" disabled>
            ⏳ 正在提交生成任务…
          </button>
        )
      }
      if (generateError) {
        return (
          <button className="xx-btn xx-btn-primary" onClick={onConfirmGenerate}>
            🔄 重新生成
            {costTag}
          </button>
        )
      }
      if (pointsInsufficient) {
        return (
          <Tooltip title={insufficientReason ?? "积分不足，请充值"}>
            <span>
              <button className="xx-btn xx-btn-primary" disabled>
                <ExclamationCircleOutlined /> 积分不足
                {costTag}
              </button>
              {onRecharge && (
                <button
                  className="xx-btn xx-btn-ghost"
                  style={{ marginLeft: 8, color: "#7c3aed", borderColor: "#c4b5fd" }}
                  onClick={onRecharge}
                >
                  去充值 →
                </button>
              )}
            </span>
          </Tooltip>
        )
      }
      return (
        <button className="xx-btn xx-btn-primary" onClick={onConfirmGenerate}>
          {selectedCount > 1 ? `✨ 确认生成 ${selectedCount} 个视频` : "✨ 确认生成视频"}
          {costTag}
        </button>
      )
    }

    /* 步骤 5（封面，最后一步）：完成按钮 */
    return (
      <button
        className="xx-btn xx-btn-primary"
        onClick={() => {
          if (onFinish && !finishing) void onFinish()
        }}
        disabled={finishing}
      >
        {finishing ? "⏳ 保存中…" : "✅ 完成"}
      </button>
    )
  }

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

export default GenerateStepActions