xiaoxia-saas/apps/web/src/pages/editing-planner/components/generation-progress-modal/ProgressPhase.tsx

import React from "react"
import { Modal } from "@/components/ui"
import type { TaskItem } from "@/api/tasks"
import { getStepLabel, getStatusColor } from "./constants"

interface ProgressPhaseProps {
  open: boolean
  task: TaskItem | null
  onCancel: () => void
}

/** progress（进度轮询）阶段弹窗 */
export const ProgressPhase: React.FC<ProgressPhaseProps> = ({ open, task, onCancel }) => {
  const progress = task?.progress ?? 0
  const status = task?.status ?? ""
  const currentStep = task?.current_step ?? ""
  const userMessage = task?.user_message ?? ""
  const stepColor = getStatusColor(status, currentStep)

  return (
    <Modal open={open} title="视频生成中" footer={null} onCancel={onCancel} closable width={480}>
      <div className="ep-gen-progress">
        {/* 进度环 */}
        <div className="ep-gen-progress-ring-wrap">
          <svg className="ep-gen-progress-ring" viewBox="0 0 120 120">
            <circle className="ep-gen-progress-ring-bg" cx="60" cy="60" r="52" />
            <circle
              className="ep-gen-progress-ring-fill"
              cx="60"
              cy="60"
              r="52"
              style={{
                strokeDasharray: `${2 * Math.PI * 52}`,
                strokeDashoffset: `${2 * Math.PI * 52 * (1 - progress / 100)}`,
                stroke: stepColor,
              }}
            />
          </svg>
          <span className="ep-gen-progress-pct" style={{ color: stepColor }}>
            {progress}%
          </span>
        </div>

        {/* 当前步骤 */}
        <div className="ep-gen-step-text">
          {userMessage || getStepLabel(currentStep) || "处理中…"}
        </div>

        {/* 进度条 */}
        <div className="ep-gen-progress-bar">
          <div
            className="ep-gen-progress-bar-fill"
            style={{
              width: `${progress}%`,
              backgroundColor: stepColor,
            }}
          />
        </div>

        {/* 任务 ID */}
        {task?.id && <div className="ep-gen-task-id">任务 ID: {task.id}</div>}
      </div>
    </Modal>
  )
}