/**
 * SignupProgress Component
 *
 * Visual progress indicator for multi-step signup/onboarding flow.
 * Shows current step, completion percentage, and estimated time remaining.
 */

interface SignupProgressProps {
  currentStep: number;
  totalSteps: number;
  steps: string[];
  estimatedMinutesPerStep?: number;
}

export default function SignupProgress({
  currentStep,
  totalSteps,
  steps,
  estimatedMinutesPerStep = 1.5,
}: SignupProgressProps) {
  const progressPercent = Math.round((currentStep / totalSteps) * 100);
  const remainingSteps = totalSteps - currentStep;
  const estimatedMinutes = Math.ceil(remainingSteps * estimatedMinutesPerStep);

  return (
    <div className="mb-8">
      {/* Step Counter and Time Estimate */}
      <div className="flex justify-between items-center text-xs text-neutral-500 mb-2">
        <span>
          Step {currentStep} of {totalSteps}
        </span>
        <span>
          {estimatedMinutes > 0
            ? `~${estimatedMinutes} min remaining`
            : "Almost done!"}
        </span>
      </div>

      {/* Progress Bar */}
      <div className="w-full bg-slate-200 rounded-full h-2 mb-4">
        <div
          className="bg-brand-green h-2 rounded-full transition-all duration-500 ease-out"
          style={{ width: `${progressPercent}%` }}
        />
      </div>

      {/* Step Labels (Desktop Only) */}
      <div className="hidden md:flex justify-between text-xs">
        {steps.map((step, idx) => {
          const stepNumber = idx + 1;
          const isCompleted = stepNumber < currentStep;
          const isCurrent = stepNumber === currentStep;

          return (
            <div
              key={idx}
              className={`flex flex-col items-center ${
                isCompleted
                  ? "text-brand-green"
                  : isCurrent
                    ? "text-brand-green font-semibold"
                    : "text-neutral-400"
              }`}
            >
              {/* Step Circle */}
              <div
                className={`w-8 h-8 rounded-full flex items-center justify-center mb-1 transition-all ${
                  isCompleted
                    ? "bg-brand-green text-white"
                    : isCurrent
                      ? "bg-brand-green/20 text-brand-green border-2 border-brand-green"
                      : "bg-slate-200 text-neutral-400"
                }`}
              >
                {isCompleted ? "✓" : stepNumber}
              </div>

              {/* Step Label */}
              <span className="text-center max-w-[80px] leading-tight">
                {step}
              </span>
            </div>
          );
        })}
      </div>

      {/* Mobile Progress Text */}
      <div className="md:hidden text-center text-sm text-neutral-600 mt-2">
        {steps[currentStep - 1] || "Processing..."}
      </div>
    </div>
  );
}