"use client"

import { FC, useEffect, useRef, useState } from "react"
import { Check } from "lucide-react"
import { Step } from "@/app/(auth)/onboarding/types"

interface ProgressStepsProps {
  steps: Step[]
  currentStep: number
  completedSteps: number[]
  goToStep: (stepId: number) => void
}

const ProgressSteps: FC<ProgressStepsProps> = ({
  steps,
  currentStep,
  completedSteps,
  goToStep,
}) => {
  const stepRefs = useRef<(HTMLDivElement | null)[]>([])
  const [mounted, setMounted] = useState(false)

  // Scroll into view when step changes
  useEffect(() => {
    const currentStepIndex = steps.findIndex(step => step.id === currentStep)
    if (currentStepIndex >= 0 && stepRefs.current[currentStepIndex]) {
      stepRefs.current[currentStepIndex]?.scrollIntoView({
        behavior: "smooth",
        block: "nearest",
        inline: "center",
      })
    }
  }, [currentStep, steps])

  // Set mounted state to trigger animations
  useEffect(() => {
    setMounted(true)
  }, [])

  return (
    <div className="mb-10 overflow-hidden">
      <div className="flex items-center justify-center mb-8 overflow-x-auto py-4 px-2 no-scrollbar">
        {steps.map((step, index) => {
          const isCompleted = completedSteps.includes(step.id)
          const isCurrent = step.id === currentStep
          const isClickable = completedSteps.includes(step.id) || isCurrent

          return (
            <div
              key={step.id}
              className="flex items-center"
              ref={el => {
                stepRefs.current[index] = el
              }}
            >
              {/* Step circle */}
              <div className="flex flex-col items-center group">
                <button
                  onClick={() => isClickable && goToStep(step.id)}
                  disabled={!isClickable}
                  className={`
                    w-12 h-12 rounded-full flex items-center justify-center text-sm font-medium relative
                    transition-all duration-300 ease-in-out
                    transform hover:scale-105 active:scale-95
                    ${mounted ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}
                    ${
                      isCompleted
                        ? "bg-amber-400 text-black shadow-md hover:bg-amber-500"
                        : isCurrent
                          ? "border-2 border-amber-400 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 shadow-md"
                          : "bg-white dark:bg-gray-800 text-gray-400 border-2 border-gray-200 dark:border-gray-700"
                    }
                    ${isClickable ? "cursor-pointer" : "cursor-not-allowed"}
                  `}
                  style={{
                    transitionDelay: `${index * 100}ms`,
                  }}
                >
                  <span
                    className={`
                      transition-all duration-300 ease-in-out absolute
                      ${isCompleted ? "scale-100 opacity-100" : "scale-0 opacity-0"}
                    `}
                  >
                    <Check className="w-5 h-5" />
                  </span>
                  <span
                    className={`
                      transition-all duration-300 ease-in-out
                      ${isCompleted ? "scale-0 opacity-0" : "scale-100 opacity-100"}
                      ${isCurrent ? "font-bold" : ""}
                    `}
                  >
                    {step.id}
                  </span>
                </button>

                {/* Step label */}
                <div className="mt-3 text-center w-32">
                  <p
                    className={`text-sm transition-colors duration-300
                    ${
                      isCurrent
                        ? "text-gray-900 dark:text-gray-100 font-medium"
                        : isCompleted
                          ? "text-gray-700 dark:text-gray-300"
                          : "text-gray-400 dark:text-gray-500"
                    }`}
                  >
                    {step.title}
                  </p>
                </div>
              </div>

              {/* Line after step (if not the last step) */}
              {index < steps.length - 1 && (
                <div className="w-24 md:w-40 h-[2px] mx-2 transition-all duration-300">
                  <div className="bg-gray-200 dark:bg-gray-700 h-full w-full relative overflow-hidden">
                    <div
                      className="absolute top-0 left-0 h-full bg-amber-400 transition-all duration-500"
                      style={{
                        width: isCompleted ? "100%" : "0%",
                        transitionDelay: "200ms",
                      }}
                    />
                  </div>
                </div>
              )}
            </div>
          )
        })}
      </div>
    </div>
  )
}

export default ProgressSteps
