'use client';
/**
 * ProgressBar — 5步流程条（熟手常驻）
 * 步骤：1开新任务/2选择文案/3选择图片/4确认文案/5成片发布
 * 组长/管理员不显示此条
 */
import { useAuthStore } from '@/stores/authStore';
import { clsx } from 'clsx';

const STEPS = [
  { index: 1, label: '开新任务', href: '/tasks/new' },
  { index: 2, label: '选择文案', href: '/tasks' },
  { index: 3, label: '选择图片', href: '/images' },
  { index: 4, label: '确认文案', href: '/confirm' },
  { index: 5, label: '成片发布', href: '/history' },
];

interface ProgressBarProps {
  currentStep: number;
}

export function ProgressBar({ currentStep }: ProgressBarProps) {
  const { role } = useAuthStore();
  // 组长/管理员不走流程条
  if (role === 'supervisor' || role === 'admin') return null;

  return (
    <div
      className="flex items-center justify-center gap-0 bg-brand-cream border-b border-border-default px-6 py-3"
      aria-label="任务流程进度"
      role="navigation"
    >
      {STEPS.map((step, idx) => {
        const done = step.index < currentStep;
        const active = step.index === currentStep;
        return (
          <div key={step.index} className="flex items-center">
            <div className="flex flex-col items-center gap-1">
              <div
                className={clsx(
                  'w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold',
                  done && 'bg-brand-green text-white',
                  active && 'bg-brand-orange text-white',
                  !done && !active && 'bg-surface-tertiary text-text-tertiary'
                )}
                aria-current={active ? 'step' : undefined}
              >
                {done ? '✓' : step.index}
              </div>
              <span
                className={clsx(
                  'text-xs whitespace-nowrap',
                  active ? 'text-brand-orange font-medium' : 'text-text-secondary'
                )}
              >
                {step.label}
              </span>
            </div>
            {idx < STEPS.length - 1 && (
              <div
                className={clsx(
                  'w-10 h-0.5 mx-2 mb-4',
                  done ? 'bg-brand-green' : 'bg-border-default'
                )}
                aria-hidden="true"
              />
            )}
          </div>
        );
      })}
    </div>
  );
}
