import { useSmoothedProgress } from "../../hooks/useSmoothedProgress";

interface EcommerceProgressBarProps {
  status: "idle" | "generating" | "done" | "failed" | string;
  label?: string;
  onCancel?: () => void;
  /** 0-100 真实进度。传入时进度条按真实值推进；省略时按状态做平滑蠕动。 */
  progress?: number;
}

function mapStatus(status: string): "running" | "completed" | "failed" {
  if (status === "done") return "completed";
  if (status === "failed") return "failed";
  if (status === "generating" || status === "modeling") return "running";
  return "running";
}

export function EcommerceProgressBar({ status, label, onCancel, progress }: EcommerceProgressBarProps) {
  const mapped = mapStatus(status);
  // running 时目标取「真实进度」与兜底值 88 的较大者：有真实进度则跟随推进，
  // 后端不推中间进度时也由平滑器持续蠕动到高位，不再卡死在 75%。
  const realProgress = typeof progress === "number" ? Math.max(0, Math.min(100, progress)) : 0;
  const target = mapped === "running" ? Math.max(realProgress, 88) : 100;
  const smoothed = useSmoothedProgress(target, mapped);

  if (status === "idle") return null;

  return (
    <div className="ecommerce-progress-bar">
      <span className="ecommerce-progress-bar__label">{label || "AI 正在生成"}</span>
      {onCancel ? (
        <button
          type="button"
          className="ecommerce-progress-bar__cancel"
          onClick={(e) => { e.stopPropagation(); onCancel(); }}
          title="取消生成"
          aria-label="取消生成"
        >
          取消
        </button>
      ) : null}
      <div className="ecommerce-progress-bar__track">
        <div className="ecommerce-progress-bar__fill" style={{ width: `${smoothed}%` }} />
      </div>
      <span className="ecommerce-progress-bar__value">{smoothed}%</span>
    </div>
  );
}