chatkit/frontend/src/components/StepIndicator.tsx

interface StepIndicatorProps {
  currentStep: 1 | 2 | 3;
  maxStep?: 1 | 2 | 3;
  onStepClick?: (step: 1 | 2 | 3) => void;
}

const steps = [
  { num: 1 as const, label: "上傳資料" },
  { num: 2 as const, label: "編輯提示詞" },
  { num: 3 as const, label: "檢視報告" },
];

export function StepIndicator({ currentStep, maxStep, onStepClick }: StepIndicatorProps) {
  const reachable = maxStep ?? currentStep;
  return (
    <div className="flex items-center justify-center gap-2 py-6 px-4">
      {steps.map((step, idx) => (
        <div key={step.num} className="flex items-center">
          <button
            onClick={() => onStepClick?.(step.num)}
            disabled={step.num > reachable}
            className={`flex items-center gap-2.5 px-4 py-2 rounded-full text-sm font-medium transition-all ${
              step.num === currentStep
                ? "bg-[var(--color-primary)] text-white"
                : step.num <= reachable
                ? "text-[var(--color-primary)] cursor-pointer hover:bg-[var(--color-primary)]/5"
                : "text-[var(--color-text-muted)] cursor-not-allowed"
            }`}
          >
            <span className={`w-5 h-5 rounded-full flex items-center justify-center text-xs font-semibold shrink-0 ${
              step.num === currentStep
                ? "bg-white/20 text-white"
                : step.num <= reachable
                ? "bg-[var(--color-primary)] text-white"
                : "bg-[var(--color-border)] text-[var(--color-text-muted)]"
            }`}>
              {step.num < currentStep ? "✓" : step.num}
            </span>
            <span className="hidden sm:inline">{step.label}</span>
            <span className="sm:hidden">{step.num}</span>
          </button>
          {idx < steps.length - 1 && (
            <div className={`w-8 h-px mx-1 ${
              step.num < currentStep ? "bg-[var(--color-primary)]/40" : "bg-[var(--color-border)]"
            }`} />
          )}
        </div>
      ))}
    </div>
  );
}