/**
 * Multi-Step Form Wrapper
 * Clean, modern UI for multi-step signup forms
 */

"use client";

import { useEffect, type ReactNode } from "react";
import { Button } from "@/components/atoms";
import { CheckIcon } from "@heroicons/react/24/solid";

export interface FormStep {
  key: string;
  title: string;
  description: string;
  content: ReactNode;
  isValid?: boolean;
}

interface MultiStepFormProps {
  steps: FormStep[];
  currentStep: number;
  onNext: () => void;
  onPrevious: () => void;
  isLastStep: boolean;
  isSubmitting?: boolean;
  canProceed?: boolean;
  onStepChange?: (stepIndex: number) => void;
  className?: string;
}

export function MultiStepForm({
  steps,
  currentStep,
  onNext,
  onPrevious,
  isLastStep,
  isSubmitting = false,
  canProceed = true,
  onStepChange,
  className = "",
}: MultiStepFormProps) {
  useEffect(() => {
    onStepChange?.(currentStep);
  }, [currentStep, onStepChange]);

  const step = steps[currentStep] ?? steps[0];
  const isFirstStep = currentStep === 0;
  const disableNext = isSubmitting || (!canProceed && !isLastStep);

  return (
    <div className={`space-y-6 ${className}`}>
      {/* Simple Step Indicators */}
      <div className="flex items-center justify-center gap-2">
        {steps.map((s, idx) => {
          const isCompleted = idx < currentStep;
          const isCurrent = idx === currentStep;

          return (
            <div key={s.key} className="flex items-center">
              <div
                className={`
                  flex items-center justify-center w-8 h-8 rounded-full text-sm font-semibold
                  transition-colors duration-200
                  ${
                    isCompleted
                      ? "bg-success text-success-foreground"
                      : isCurrent
                        ? "bg-primary text-primary-foreground"
                        : "bg-muted text-muted-foreground"
                  }
                `}
              >
                {isCompleted ? <CheckIcon className="w-4 h-4" /> : idx + 1}
              </div>
              {idx < steps.length - 1 && (
                <div
                  className={`w-8 h-0.5 mx-1 transition-colors duration-200 ${
                    isCompleted ? "bg-success" : "bg-border"
                  }`}
                />
              )}
            </div>
          );
        })}
      </div>

      {/* Step Title & Description */}
      <div className="text-center pb-2">
        <h3 className="text-xl font-semibold text-foreground">{step?.title}</h3>
        <p className="text-sm text-muted-foreground mt-1">{step?.description}</p>
      </div>

      {/* Step Content */}
      <div className="min-h-[350px]">{step?.content}</div>

      {/* Navigation Buttons */}
      <div className="flex gap-3 pt-4 border-t border-border">
        <Button
          type="button"
          variant="outline"
          onClick={onPrevious}
          disabled={isFirstStep || isSubmitting}
          className="flex-1 h-11"
        >
          Back
        </Button>

        <Button
          type="button"
          variant="default"
          onClick={onNext}
          disabled={disableNext}
          loading={isSubmitting && isLastStep}
          className="flex-1 h-11"
        >
          {isLastStep ? (isSubmitting ? "Creating Account..." : "Create Account") : "Continue"}
        </Button>
      </div>
    </div>
  );
}
