xiaoxia-saas/apps/web/src/pages/voices/components/VideoExtractModal.tsx

import React, { useRef } from "react"
import { Modal } from "antd"
import { InboxOutlined, CloseOutlined } from "@ant-design/icons"

interface VideoExtractModalProps {
  open: boolean
  file: File | null
  progress: number | null
  isExtracting: boolean
  onClose: () => void
  onFileSelect: (file: File | null) => void
  onExtract: () => void
}

const ACCEPT_TYPES = ".mp4,.mov,.webm"

const VideoExtractModal: React.FC<VideoExtractModalProps> = ({
  open,
  file,
  progress,
  isExtracting,
  onClose,
  onFileSelect,
  onExtract,
}) => {
  const inputRef = useRef<HTMLInputElement>(null)

  return (
    <Modal
      title={<span style={{ fontSize: 16, fontWeight: 600 }}>提取视频配音</span>}
      open={open}
      onCancel={() => {
        if (inputRef.current) inputRef.current.value = ""
        if (isExtracting) return
        onClose()
      }}
      footer={null}
      width={480}
      maskClosable={!isExtracting}
    >
      {!file ? (
        <div
          className="vmat-upload-dropzone"
          onClick={() => inputRef.current?.click()}
          style={{
            border: "2px dashed #d9d9d9",
            borderRadius: 8,
            padding: "40px 20px",
            textAlign: "center",
            cursor: "pointer",
            transition: "border-color 0.3s",
          }}
          onMouseEnter={(e) => (e.currentTarget.style.borderColor = "#7c3aed")}
          onMouseLeave={(e) => (e.currentTarget.style.borderColor = "#d9d9d9")}
        >
          <InboxOutlined style={{ fontSize: 32, color: "#7c3aed", marginBottom: 12 }} />
          <p style={{ margin: "0 0 8px", fontSize: 14, color: "#333" }}>点击选择视频文件</p>
          <span style={{ fontSize: 12, color: "#999" }}>支持 MP4、MOV、WebM 格式</span>
          <input
            ref={inputRef}
            type="file"
            accept={ACCEPT_TYPES}
            style={{ display: "none" }}
            onChange={(e) => {
              const f = e.target.files?.[0]
              if (f) onFileSelect(f)
            }}
          />
        </div>
      ) : (
        <div>
          <div
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
              padding: "12px 16px",
              background: "#fafafa",
              borderRadius: 8,
              marginBottom: 16,
            }}
          >
            <span
              style={{
                flex: 1,
                overflow: "hidden",
                textOverflow: "ellipsis",
                whiteSpace: "nowrap",
                fontSize: 14,
                fontWeight: 500,
              }}
              title={file.name}
            >
              {file.name}
            </span>
            <span style={{ fontSize: 12, color: "#999", marginLeft: 8, flexShrink: 0 }}>
              {(file.size / (1024 * 1024)).toFixed(1)} MB
            </span>
            {!isExtracting && (
              <button
                type="button"
                onClick={() => {
                  if (inputRef.current) inputRef.current.value = ""
                  onFileSelect(null)
                }}
                style={{
                  border: "none",
                  background: "none",
                  cursor: "pointer",
                  color: "#999",
                  marginLeft: 8,
                  fontSize: 14,
                }}
                aria-label="移除文件"
              >
                <CloseOutlined />
              </button>
            )}
          </div>

          {progress !== null && (
            <div style={{ marginBottom: 12 }}>
              <div
                style={{
                  height: 6,
                  background: "#f0f0f0",
                  borderRadius: 3,
                  overflow: "hidden",
                }}
              >
                <div
                  style={{
                    height: "100%",
                    width: `${progress}%`,
                    background: "linear-gradient(90deg, #7c3aed, #a78bfa)",
                    borderRadius: 3,
                    transition: "width 0.3s",
                  }}
                />
              </div>
              <div
                style={{
                  textAlign: "right",
                  fontSize: 12,
                  color: "#999",
                  marginTop: 4,
                }}
              >
                {progress}%
              </div>
            </div>
          )}

          {isExtracting && (
            <p style={{ textAlign: "center", fontSize: 13, color: "#7c3aed", margin: "12px 0 0" }}>
              {"正在提取音频，请稍后..."}
            </p>
          )}
        </div>
      )}

      <div
        style={{
          display: "flex",
          justifyContent: "flex-end",
          gap: 8,
          marginTop: 24,
        }}
      >
        <button
          type="button"
          onClick={onClose}
          disabled={isExtracting}
          style={{
            padding: "6px 16px",
            borderRadius: 6,
            border: "1px solid #d9d9d9",
            background: "#fff",
            cursor: isExtracting ? "not-allowed" : "pointer",
            fontSize: 14,
            opacity: isExtracting ? 0.5 : 1,
          }}
        >
          取消
        </button>
        <button
          type="button"
          onClick={onExtract}
          disabled={!file || isExtracting}
          style={{
            padding: "6px 16px",
            borderRadius: 6,
            border: "none",
            background: !file || isExtracting ? "#d9d9d9" : "#7c3aed",
            color: "#fff",
            cursor: !file || isExtracting ? "not-allowed" : "pointer",
            fontSize: 14,
            fontWeight: 500,
          }}
        >
          {isExtracting ? "提取中..." : "开始提取"}
        </button>
      </div>
    </Modal>
  )
}

export default VideoExtractModal