import React from "react"
import { Modal as AntModal } from "antd"

/* ============================================================
 * UploadProgressModal — 上传进度弹窗（圆形动画 + 百分比）
 * ============================================================ */
export interface UploadProgressModalProps {
  open: boolean
  progress: number
}

const UploadProgressModal: React.FC<UploadProgressModalProps> = ({ open, progress }) => (
  <AntModal
    open={open}
    footer={null}
    closable={false}
    centered
    width={260}
    maskClosable={false}
    className="xx-upload-progress-modal"
  >
    <div className="xx-upload-progress-body">
      <svg className="xx-upload-progress-ring" viewBox="0 0 120 120" width={120} height={120}>
        {/* 背景圆环 */}
        <circle
          cx="60"
          cy="60"
          r="52"
          fill="none"
          stroke="var(--border-primary, #e5e7eb)"
          strokeWidth="8"
        />
        {/* 进度圆弧 */}
        <circle
          cx="60"
          cy="60"
          r="52"
          fill="none"
          stroke="var(--primary-color, #6366f1)"
          strokeWidth="8"
          strokeLinecap="round"
          strokeDasharray={`${2 * Math.PI * 52}`}
          strokeDashoffset={`${2 * Math.PI * 52 * (1 - progress / 100)}`}
          transform="rotate(-90 60 60)"
          style={{ transition: "stroke-dashoffset 0.3s ease" }}
        />
      </svg>
      <div className="xx-upload-progress-text">
        <span className="xx-upload-progress-pct">{progress}%</span>
        <span className="xx-upload-progress-label">上传中…</span>
      </div>
    </div>
  </AntModal>
)

export default UploadProgressModal