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

/**
 * 生成数量选择弹窗（Issue #1677）
 * Step1 选完模板点「下一步」时弹出：要生成几个视频？（1~10）
 * 默认 1，回车 = 1（零额外操作）
 */
import React, { useState, useEffect, useRef } from "react"
import { MAX_PREVIEW_COUNT } from "../constants"

interface PreviewCountModalProps {
  open: boolean
  /** 默认值（上次选择，默认1） */
  defaultCount?: number
  onConfirm: (count: number) => void
  onCancel: () => void
}

const PreviewCountModal: React.FC<PreviewCountModalProps> = ({
  open,
  defaultCount = 1,
  onConfirm,
  onCancel,
}) => {
  const [count, setCount] = useState(defaultCount)
  const inputRef = useRef<HTMLInputElement>(null)

  useEffect(() => {
    if (open) {
      setCount(defaultCount)
      // 弹窗打开后聚焦并选中，方便直接回车=默认1
      setTimeout(() => inputRef.current?.focus(), 50)
    }
  }, [open, defaultCount])

  const clamp = (n: number) => Math.max(1, Math.min(MAX_PREVIEW_COUNT, n || 1))

  const handleConfirm = () => {
    onConfirm(clamp(count))
  }

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Enter") {
      e.preventDefault()
      handleConfirm()
    }
    if (e.key === "Escape") {
      onCancel()
    }
  }

  if (!open) return null

  return (
    <div className="xx-modal-mask" onClick={onCancel}>
      <div className="xx-modal-box xx-count-modal" onClick={(e) => e.stopPropagation()}>
        <h3 style={{ margin: "0 0 8px", fontSize: 18 }}>要生成几个视频？</h3>
        <p style={{ margin: "0 0 20px", fontSize: 13, color: "var(--text-secondary, #666)" }}>
          素材共用，AI 随机剪辑出不同版本，每个视频可独立设置标题、配音和封面
        </p>

        <div className="xx-count-selector">
          <button
            type="button"
            className="xx-count-btn"
            onClick={() => setCount((c) => clamp(c - 1))}
            disabled={count <= 1}
            aria-label="减少"
          >
            −
          </button>
          <input
            ref={inputRef}
            type="number"
            min={1}
            max={MAX_PREVIEW_COUNT}
            value={count}
            onChange={(e) => setCount(clamp(parseInt(e.target.value, 10) || 1))}
            onKeyDown={handleKeyDown}
            className="xx-count-input"
          />
          <button
            type="button"
            className="xx-count-btn"
            onClick={() => setCount((c) => clamp(c + 1))}
            disabled={count >= MAX_PREVIEW_COUNT}
            aria-label="增加"
          >
            +
          </button>
        </div>

        <div className="xx-count-quick">
          {[1, 3, 5, 10].map((n) => (
            <button
              key={n}
              type="button"
              className={`xx-count-chip ${count === n ? "active" : ""}`}
              onClick={() => setCount(n)}
            >
              {n} 个
            </button>
          ))}
        </div>

        <div className="xx-count-actions">
          <button type="button" className="xx-btn xx-btn-ghost" onClick={onCancel}>
            取消
          </button>
          <button type="button" className="xx-btn xx-btn-primary" onClick={handleConfirm}>
            {count === 1 ? "生成 1 个视频" : `生成 ${count} 个视频`}
          </button>
        </div>
        <p
          style={{
            margin: "12px 0 0",
            fontSize: 12,
            color: "var(--text-tertiary, #999)",
            textAlign: "center",
          }}
        >
          直接按回车 = 生成 1 个
        </p>
      </div>
    </div>
  )
}

export default PreviewCountModal