omniai-ds-code-package/src/features/ecommerce/EcommerceProgressBar.tsx

import { useSmoothedProgress } from "../../hooks/useSmoothedProgress";
import type { ReactNode } from "react";

interface EcommerceProgressBarProps {
  status: "idle" | "generating" | "done" | "failed" | string;
  label?: string;
  onCancel?: () => void;
}

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 }: EcommerceProgressBarProps) {
  const progress = mapStatus(status) === "running" ? 50 : 100;
  const smoothed = useSmoothedProgress(progress, mapStatus(status));

  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>
  );
}