xiaoxia-saas/apps/web/src/components/voice/CloneModal.tsx

/**
 * CloneModal — 音色克隆弹窗（共享组件）
 *
 * 功能：
 * - 步骤引导：上传/录制音频 → 填写信息 → 提交克隆
 * - 两种输入方式：上传文件（wav/mp3/m4a，≤10MB）或浏览器原生录音（MediaRecorder）
 * - 提交：先 uploadAsset 获取真实 URL，再 createVoiceClone
 * - 进度展示：上传中 → 克隆中 → 完成（三阶段可视化）
 * - 错误处理：上传失败、格式错误、大小超限、录音权限拒绝等提示
 *
 * V21 Design System — 零 antd 直接导入
 */
import React, { useState, useCallback, useRef, useEffect } from "react"
import { Modal, Button } from "@/components/ui"
import { createVoiceClone, toVoiceClone } from "@/api/voice-clone"
import type { VoiceClone } from "@/api/voice-clone"
import { uploadAsset } from "@/api/assets"
import "./clone-modal.css"

/* ── 类型定义 ───────────────────────────────────────────── */

type ModalPhase = "input" | "uploading" | "cloning" | "done"

export interface CloneModalProps {
  /** 弹窗是否可见 */
  open: boolean
  /** 关闭弹窗回调 */
  onClose: () => void
  /** 克隆成功回调（返回新创建的音色） */
  onSuccess?: (voice: VoiceClone) => void
}

/* ── 进度阶段配置 ─────────────────────────────────────────── */

const PROGRESS_STEPS: { key: string; label: string; icon: string }[] = [
  { key: "uploading", label: "上传中", icon: "📤" },
  { key: "cloning", label: "克隆中", icon: "🧬" },
  { key: "done", label: "完成", icon: "✅" },
]

/* ── 常量 ───────────────────────────────────────────────── */

const ACCEPTED_EXTENSIONS = ["mp3", "wav", "m4a"]
const ACCEPTED_MIME = ".mp3,.wav,.m4a,audio/mpeg,audio/wav,audio/mp4"
const MAX_FILE_SIZE = 10 * 1024 * 1024 // 10MB

/** 最长录制时长：5 分钟（秒） */
const MAX_RECORD_SECONDS = 5 * 60

/* ── 组件 ───────────────────────────────────────────────── */

const CloneModal: React.FC<CloneModalProps> = ({ open, onClose, onSuccess }) => {
  const [phase, setPhase] = useState<ModalPhase>("input")
  const [voiceName, setVoiceName] = useState("")
  const [voiceDescription, setVoiceDescription] = useState("")
  const [selectedFile, setSelectedFile] = useState<File | null>(null)
  const [dragActive, setDragActive] = useState(false)
  const [errorMessage, setErrorMessage] = useState("")

  // 录音状态
  const [isRecording, setIsRecording] = useState(false)
  const [recordTime, setRecordTime] = useState(0)
  const [recordedBlob, setRecordedBlob] = useState<Blob | null>(null)

  const fileInputRef = useRef<HTMLInputElement>(null)
  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
  const recordTimerRef = useRef<ReturnType<typeof setInterval> | null>(null)
  const mediaRecorderRef = useRef<MediaRecorder | null>(null)
  const audioChunksRef = useRef<Blob[]>([])
  /** 默认音色名称计数器（组件级 ref，避免多实例串号） */
  const cloneCounterRef = useRef(1)

  /** 生成下一个默认音色名称 */
  const getNextDefaultName = useCallback((): string => {
    const name = `我的声音 ${cloneCounterRef.current}`
    cloneCounterRef.current += 1
    return name
  }, [])

  /** 组件卸载时清理定时器和 MediaRecorder */
  useEffect(() => {
    return () => {
      if (timerRef.current) clearTimeout(timerRef.current)
      if (recordTimerRef.current) clearInterval(recordTimerRef.current)
      if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
        mediaRecorderRef.current.stop()
      }
    }
  }, [])

  /** 重置弹窗状态 */
  const resetState = useCallback(() => {
    setPhase("input")
    setVoiceName(getNextDefaultName())
    setVoiceDescription("")
    setSelectedFile(null)
    setDragActive(false)
    setErrorMessage("")
    setIsRecording(false)
    setRecordTime(0)
    setRecordedBlob(null)
    audioChunksRef.current = []
    if (recordTimerRef.current) {
      clearInterval(recordTimerRef.current)
      recordTimerRef.current = null
    }
    if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
      mediaRecorderRef.current.stop()
    }
    mediaRecorderRef.current = null
  }, [getNextDefaultName])

  /** 关闭弹窗 */
  const handleClose = useCallback(() => {
    resetState()
    onClose()
  }, [resetState, onClose])

  /** 弹窗打开时重置状态 */
  useEffect(() => {
    if (open) {
      resetState()
    }
  }, [open, resetState])

  /* ── 文件验证 ──────────────────────────────────────── */

  const validateFile = (file: File): string | null => {
    const ext = file.name.split(".").pop()?.toLowerCase()
    if (!ext || !ACCEPTED_EXTENSIONS.includes(ext)) {
      return "不支持的音频格式，请上传 MP3、WAV 或 M4A 文件"
    }
    if (file.size > MAX_FILE_SIZE) {
      return "文件大小超过 10MB，请压缩后重试"
    }
    return null
  }

  /* ── 文件上传 ──────────────────────────────────────── */

  const handleUploadClick = () => {
    fileInputRef.current?.click()
  }

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (file) {
      const error = validateFile(file)
      if (error) {
        setErrorMessage(error)
        setSelectedFile(null)
      } else {
        setErrorMessage("")
        setSelectedFile(file)
        // 清除录音
        setRecordedBlob(null)
        setIsRecording(false)
        setRecordTime(0)
      }
    }
    e.target.value = ""
  }

  /* ── 拖拽 ──────────────────────────────────────────── */

  const handleDrag = (e: React.DragEvent) => {
    e.preventDefault()
    e.stopPropagation()
    if (e.type === "dragenter" || e.type === "dragover") {
      setDragActive(true)
    } else if (e.type === "dragleave") {
      setDragActive(false)
    }
  }

  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault()
    e.stopPropagation()
    setDragActive(false)
    const file = e.dataTransfer.files?.[0]
    if (file) {
      const error = validateFile(file)
      if (error) {
        setErrorMessage(error)
        setSelectedFile(null)
      } else {
        setErrorMessage("")
        setSelectedFile(file)
        setRecordedBlob(null)
        setIsRecording(false)
        setRecordTime(0)
      }
    }
  }

  /* ── 录音（真实 MediaRecorder） ───────────────────── */

  const handleRecord = async () => {
    if (isRecording) {
      // 停止录制
      setIsRecording(false)
      if (recordTimerRef.current) {
        clearInterval(recordTimerRef.current)
        recordTimerRef.current = null
      }
      if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
        mediaRecorderRef.current.stop()
      }
    } else {
      // 开始录制
      try {
        const stream = await navigator.mediaDevices.getUserMedia({
          audio: true,
        })
        const mediaRecorder = new MediaRecorder(stream)
        mediaRecorderRef.current = mediaRecorder
        audioChunksRef.current = []

        mediaRecorder.ondataavailable = (event) => {
          if (event.data.size > 0) {
            audioChunksRef.current.push(event.data)
          }
        }

        mediaRecorder.onstop = () => {
          const blob = new Blob(audioChunksRef.current, { type: "audio/webm" })
          setRecordedBlob(blob)
          // 清除上传的文件
          setSelectedFile(null)
          // 停止音轨
          stream.getTracks().forEach((track) => track.stop())
        }

        mediaRecorder.start()
        setIsRecording(true)
        setRecordTime(0)
        setRecordedBlob(null)
        setErrorMessage("")

        recordTimerRef.current = setInterval(() => {
          setRecordTime((prev) => {
            const next = prev + 1
            if (next >= MAX_RECORD_SECONDS) {
              // 达到 5 分钟上限，自动停止录制
              setTimeout(() => {
                setIsRecording(false)
                if (recordTimerRef.current) {
                  clearInterval(recordTimerRef.current)
                  recordTimerRef.current = null
                }
                if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
                  mediaRecorderRef.current.stop()
                }
                setErrorMessage("已达最长录制时长（5分钟），已自动停止")
              }, 0)
              return MAX_RECORD_SECONDS
            }
            return next
          })
        }, 1000)
      } catch {
        setErrorMessage("无法访问麦克风，请检查浏览器权限设置")
      }
    }
  }

  /** 格式化录制时间 mm:ss */
  const formatRecordTime = (seconds: number): string => {
    const m = Math.floor(seconds / 60)
    const s = seconds % 60
    return `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`
  }

  /* ── 表单验证 ──────────────────────────────────────── */

  const hasAudio = selectedFile !== null || recordedBlob !== null

  const validateForm = (): string | null => {
    const name = voiceName.trim()
    if (!name) {
      return "请输入音色名称"
    }
    if (name.length < 2 || name.length > 20) {
      return "音色名称需在 2-20 个字符之间"
    }
    if (!hasAudio) {
      return "请上传音频文件或录制一段声音"
    }
    return null
  }

  /* ── 提交克隆 ──────────────────────────────────────── */

  const handleSubmit = async () => {
    const formError = validateForm()
    if (formError) {
      setErrorMessage(formError)
      return
    }

    setErrorMessage("")

    try {
      // 阶段 1：上传音频
      setPhase("uploading")

      let fileToUpload: File
      if (selectedFile) {
        fileToUpload = selectedFile
      } else {
        // 将录音 Blob 转为 File
        fileToUpload = new File([recordedBlob!], `recorded-${Date.now()}.webm`, {
          type: "audio/webm",
        })
      }

      const formData = new FormData()
      formData.append("file", fileToUpload)
      const uploadResult = await uploadAsset(formData)

      // 阶段 2：克隆
      setPhase("cloning")
      const result = await createVoiceClone({
        name: voiceName.trim(),
        description: voiceDescription.trim() || undefined,
        audio_url: uploadResult.url,
      })

      // 阶段 3：完成
      setPhase("done")

      // 2秒后自动关闭
      timerRef.current = setTimeout(() => {
        onSuccess?.(toVoiceClone(result))
        handleClose()
      }, 2000)
    } catch (err) {
      setPhase("input")
      setErrorMessage(err instanceof Error ? err.message : "克隆失败，请重试")
    }
  }

  /* ── 计算属性 ──────────────────────────────────────── */

  const canSubmit = voiceName.trim().length >= 2 && voiceName.trim().length <= 20 && hasAudio

  const isProcessing = phase === "uploading" || phase === "cloning"

  /** 当前进度索引 */
  const getProgressIndex = (): number => {
    switch (phase) {
      case "uploading":
        return 0
      case "cloning":
        return 1
      case "done":
        return 2
      default:
        return -1
    }
  }

  const progressIndex = getProgressIndex()

  return (
    <Modal
      open={open}
      onCancel={handleClose}
      title="克隆我的音色"
      width={560}
      footer={null}
      destroyOnClose
      maskClosable={!isProcessing}
      keyboard={!isProcessing}
    >
      {/* ── 输入阶段 ──────────────────────────────────── */}
      {phase === "input" && (
        <div className="xx-clonemodal-body">
          {/* 步骤引导 */}
          <div className="xx-clonemodal-steps">
            <div className="xx-clonemodal-step xx-clonemodal-step--active">
              <div className="xx-clonemodal-step-number">1</div>
              <span className="xx-clonemodal-step-label">上传/录制音频</span>
            </div>
            <div className="xx-clonemodal-step-connector" />
            <div className="xx-clonemodal-step">
              <div className="xx-clonemodal-step-number">2</div>
              <span className="xx-clonemodal-step-label">填写信息</span>
            </div>
            <div className="xx-clonemodal-step-connector" />
            <div className="xx-clonemodal-step">
              <div className="xx-clonemodal-step-number">3</div>
              <span className="xx-clonemodal-step-label">提交克隆</span>
            </div>
          </div>

          {/* 音色名称 */}
          <div className="xx-clonemodal-field">
            <label className="xx-clonemodal-label">
              音色名称 <span className="xx-clonemodal-required">*</span>
            </label>
            <input
              type="text"
              className="xx-clonemodal-input"
              value={voiceName}
              onChange={(e) => setVoiceName(e.target.value)}
              placeholder="输入音色名称（2-20字符）"
              maxLength={20}
            />
            <div className="xx-clonemodal-char-count">{voiceName.length}/20</div>
          </div>

          {/* 上传区域 */}
          <div className="xx-clonemodal-field">
            <label className="xx-clonemodal-label">上传音频</label>
            <div
              className={`xx-clonemodal-upload-zone${dragActive ? " xx-clonemodal-upload-zone--active" : ""}${selectedFile ? " xx-clonemodal-upload-zone--has-file" : ""}`}
              onClick={handleUploadClick}
              onDragEnter={handleDrag}
              onDragOver={handleDrag}
              onDragLeave={handleDrag}
              onDrop={handleDrop}
            >
              <div className="xx-clonemodal-upload-icon">{selectedFile ? "📄" : "🎵"}</div>
              <p className="xx-clonemodal-upload-title">
                {selectedFile ? selectedFile.name : "拖拽音频文件到此处，或点击上传"}
              </p>
              <p className="xx-clonemodal-upload-hint">支持 MP3、WAV、M4A 格式，最大 10MB</p>
              <input
                ref={fileInputRef}
                type="file"
                accept={ACCEPTED_MIME}
                style={{ display: "none" }}
                onChange={handleFileChange}
              />
            </div>
          </div>

          {/* 或分隔 */}
          <div className="xx-clonemodal-divider">
            <div className="xx-clonemodal-divider-line" />
            <span className="xx-clonemodal-divider-text">或</span>
            <div className="xx-clonemodal-divider-line" />
          </div>

          {/* 录制区域 */}
          <div className="xx-clonemodal-field">
            <label className="xx-clonemodal-label">直接录制</label>
            <div className="xx-clonemodal-record-area">
              <div className="xx-clonemodal-record-info">
                <p className="xx-clonemodal-record-hint">
                  {isRecording
                    ? `录制中 ${formatRecordTime(recordTime)}`
                    : recordedBlob
                      ? `已录制 ${formatRecordTime(recordTime)}`
                      : "点击按钮开始录制（最长 5 分钟）"}
                </p>
                {isRecording && (
                  <div className="xx-clonemodal-record-wave">
                    <span className="xx-clonemodal-record-wave-bar" />
                    <span className="xx-clonemodal-record-wave-bar" />
                    <span className="xx-clonemodal-record-wave-bar" />
                    <span className="xx-clonemodal-record-wave-bar" />
                    <span className="xx-clonemodal-record-wave-bar" />
                  </div>
                )}
              </div>
              <button
                type="button"
                className={`xx-clonemodal-record-btn${isRecording ? " xx-clonemodal-record-btn--recording" : ""}`}
                onClick={handleRecord}
                title={isRecording ? "停止录制" : "开始录制"}
              >
                {isRecording ? "⏹" : "🎙️"}
              </button>
            </div>
          </div>

          {/* 音色描述 */}
          <div className="xx-clonemodal-field">
            <label className="xx-clonemodal-label">音色描述</label>
            <textarea
              className="xx-clonemodal-textarea"
              value={voiceDescription}
              onChange={(e) => setVoiceDescription(e.target.value)}
              placeholder="可选，描述这个音色的特点（最多100字符）"
              maxLength={100}
              rows={3}
            />
            <div className="xx-clonemodal-char-count">{voiceDescription.length}/100</div>
          </div>

          {/* 错误提示 */}
          {errorMessage && (
            <div className="xx-clonemodal-error">
              <span className="xx-clonemodal-error-icon">⚠️</span>
              <span>{errorMessage}</span>
            </div>
          )}

          {/* 提示 */}
          <div className="xx-clonemodal-tip">
            <span className="xx-clonemodal-tip-icon">💡</span>
            <span>建议上传 10 秒 ~ 3 分钟的清晰语音，环境安静、语速均匀效果最佳</span>
          </div>

          {/* 底部按钮 */}
          <div className="xx-clonemodal-footer">
            <Button buttonType="ghost" onClick={handleClose}>
              取消
            </Button>
            <Button buttonType="primary" disabled={!canSubmit} onClick={handleSubmit}>
              🎤 开始克隆
            </Button>
          </div>
        </div>
      )}

      {/* ── 进度阶段（上传中 / 克隆中） ──────────────── */}
      {isProcessing && (
        <div className="xx-clonemodal-progress-body">
          {/* 步骤指示器 */}
          <div className="xx-clonemodal-steps-progress">
            {PROGRESS_STEPS.map((step, idx) => {
              const isActive = idx === progressIndex
              const isDone = idx < progressIndex
              const stepClass = [
                "xx-clonemodal-step-progress",
                isActive ? "xx-clonemodal-step-progress--active" : "",
                isDone ? "xx-clonemodal-step-progress--done" : "",
              ]
                .filter(Boolean)
                .join(" ")

              return (
                <React.Fragment key={step.key}>
                  {idx > 0 && (
                    <div
                      className={`xx-clonemodal-step-connector${isDone ? " xx-clonemodal-step-connector--done" : ""}`}
                    />
                  )}
                  <div className={stepClass}>
                    <div className="xx-clonemodal-step-icon">{isDone ? "✓" : step.icon}</div>
                    <span className="xx-clonemodal-step-label">{step.label}</span>
                  </div>
                </React.Fragment>
              )
            })}
          </div>

          {/* 当前阶段描述 */}
          <div className="xx-clonemodal-progress-info">
            {phase === "uploading" && (
              <>
                <div className="xx-clonemodal-progress-spinner" />
                <p className="xx-clonemodal-progress-text">正在上传音频文件…</p>
                <p className="xx-clonemodal-progress-sub">请稍候，正在将音频上传至服务器</p>
              </>
            )}
            {phase === "cloning" && (
              <>
                <div className="xx-clonemodal-progress-spinner xx-clonemodal-progress-spinner--cloning" />
                <p className="xx-clonemodal-progress-text">AI 正在克隆你的声音…</p>
                <p className="xx-clonemodal-progress-sub">正在分析声音特征，生成专属音色模型</p>
              </>
            )}
          </div>
        </div>
      )}

      {/* ── 完成阶段 ──────────────────────────────────── */}
      {phase === "done" && (
        <div className="xx-clonemodal-progress-body">
          {/* 步骤指示器（全部完成） */}
          <div className="xx-clonemodal-steps-progress">
            {PROGRESS_STEPS.map((step, idx) => (
              <React.Fragment key={step.key}>
                {idx > 0 && (
                  <div className="xx-clonemodal-step-connector xx-clonemodal-step-connector--done" />
                )}
                <div className="xx-clonemodal-step-progress xx-clonemodal-step-progress--done">
                  <div className="xx-clonemodal-step-icon">✓</div>
                  <span className="xx-clonemodal-step-label">{step.label}</span>
                </div>
              </React.Fragment>
            ))}
          </div>

          <div className="xx-clonemodal-success">
            <div className="xx-clonemodal-success-icon">🎉</div>
            <h3 className="xx-clonemodal-success-title">克隆已提交</h3>
            <p className="xx-clonemodal-success-desc">
              音色正在生成中，完成后将出现在「我的克隆」列表中
            </p>
          </div>
        </div>
      )}
    </Modal>
  )
}

export default CloneModal