import { CheckIcon } from "@/assets/icons";
import React, { ReactNode, useState } from "react";
export interface Step {
  title: string;
  description?: string;
  content: ReactNode;
}

interface StepperProps {
  steps: Step[];
  currentStep?: number;
  onStepChange?: (step: number) => void;
  onSubmit?: () => void;
  isSubmitting?: boolean;
}

const Stepper: React.FC<StepperProps> = ({
  steps,
  currentStep: controlledStep,
  onStepChange,
  onSubmit,
  isSubmitting = false,
}) => {
  const [internalStep, setInternalStep] = useState(0);
  const currentStep =
    controlledStep !== undefined ? controlledStep : internalStep;

  const handleStepClick = (index: number) => {
    if (index <= currentStep) {
      if (onStepChange) {
        onStepChange(index);
      } else {
        setInternalStep(index);
      }
    }
  };

  const nextStep = () => {
    if (currentStep === steps.length - 1) {
      // On last step, trigger submit
      if (onSubmit) {
        onSubmit();
      }
    } else if (currentStep < steps.length - 1) {
      const newStep = currentStep + 1;
      if (onStepChange) {
        onStepChange(newStep);
      } else {
        setInternalStep(newStep);
      }
    }
    if (window) {
      window.scroll({ top: 0, behavior: "smooth" });
    }
  };

  const prevStep = () => {
    if (currentStep > 0) {
      const newStep = currentStep - 1;
      if (onStepChange) {
        onStepChange(newStep);
      } else {
        setInternalStep(newStep);
      }
    }
    if (window) {
      window.scroll({ top: 0, behavior: "smooth" });
    }
  };

  return (
    <div className="mx-auto w-full max-w-4xl p-8">
      <div className="mb-8 flex items-center justify-between">
        {steps.map((step, index) => (
          <React.Fragment key={index}>
            <div className="flex flex-1 flex-col items-center">
              <button
                onClick={() => handleStepClick(index)}
                disabled={index > currentStep}
                className={`flex h-12 w-12 items-center justify-center rounded-full font-semibold transition-all duration-200 ${
                  index < currentStep
                    ? "cursor-pointer bg-primary text-white hover:bg-primary/90"
                    : index === currentStep
                      ? "bg-primary text-white ring-4 ring-primary/20"
                      : "cursor-not-allowed bg-gray-2 text-gray-5"
                }`}
              >
                {index < currentStep ? (
                  <CheckIcon className="h-6 w-6" />
                ) : (
                  <span>{index + 1}</span>
                )}
              </button>
              <div className="mt-2 text-center">
                <div
                  className={`text-sm font-medium ${
                    index <= currentStep ? "text-dark-2" : "text-gray-4"
                  }`}
                >
                  {step.title}
                </div>
                {step.description && (
                  <div className="mt-1 text-xs text-gray-5">
                    {step.description}
                  </div>
                )}
              </div>
            </div>
            {index < steps.length - 1 && (
              <div
                className={`mx-4 -mt-12 h-1 flex-1 transition-all duration-300 ${
                  index < currentStep ? "bg-primary" : "bg-stroke"
                }`}
              />
            )}
          </React.Fragment>
        ))}
      </div>

      <div>{steps[currentStep].content}</div>

      <div className="mt-6 flex justify-between">
        <button
          onClick={prevStep}
          disabled={currentStep === 0}
          className={`rounded-lg px-6 py-2 font-medium transition-all ${
            currentStep === 0
              ? "cursor-not-allowed bg-gray-1 text-gray-4"
              : "bg-gray-2 text-gray-7 hover:bg-gray-3"
          }`}
        >
          Previous
        </button>
        <button
          onClick={nextStep}
          disabled={isSubmitting}
          className={`rounded-lg px-6 py-2 font-medium transition-all ${
            isSubmitting
              ? "cursor-not-allowed bg-gray-1 text-gray-4"
              : "bg-primary text-white hover:bg-primary/90"
          }`}
        >
          {isSubmitting
            ? "Submitting..."
            : currentStep === steps.length - 1
              ? "Submit"
              : "Next"}
        </button>
      </div>
    </div>
  );
};

export default Stepper;
