"use client";

import { useEffect, useState } from "react";
import { Check } from "lucide-react";

interface WorkflowStepIndicatorProps {
  currentStep: 1 | 2;
}

const STEPS = [
  { number: 1, label: "Upload & Assign Banks" },
  { number: 2, label: "Compare with Database" },
];

export function WorkflowStepIndicator({
  currentStep,
}: WorkflowStepIndicatorProps) {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => setMounted(true), 100);
    return () => clearTimeout(timer);
  }, []);

  return (
    <div className="flex items-center justify-center py-6">
      {STEPS.map((step, index) => {
        const isActive = step.number === currentStep;
        const isCompleted = step.number < currentStep;

        return (
          <div key={step.number} className="flex items-center">
            {/* Connector line */}
            {index > 0 && (
              <div className="relative h-0.5 w-16 sm:w-24 bg-gray-200 overflow-hidden rounded-full">
                <div
                  className="absolute inset-y-0 left-0 bg-[#428B4D] rounded-full transition-all duration-700 ease-out"
                  style={{
                    width: isCompleted || isActive ? "100%" : "0%",
                    transitionDelay: mounted ? "300ms" : "0ms",
                  }}
                />
              </div>
            )}
            {/* Step circle + label */}
            <div
              className="flex flex-col items-center transition-all duration-500 ease-out"
              style={{
                opacity: mounted ? 1 : 0,
                transform: mounted ? "translateY(0) scale(1)" : "translateY(8px) scale(0.9)",
                transitionDelay: `${index * 150}ms`,
              }}
            >
              <div
                className={`relative flex h-10 w-10 items-center justify-center rounded-full border-2 text-sm font-semibold transition-all duration-500 ${
                  isCompleted
                    ? "border-[#428B4D] bg-[#428B4D] text-white shadow-md shadow-[#428B4D]/30"
                    : isActive
                    ? "border-[#428B4D] bg-[#428B4D] text-white shadow-lg shadow-[#428B4D]/40"
                    : "border-gray-300 bg-white text-gray-400"
                }`}
              >
                {isActive && (
                  <span className="absolute inset-0 rounded-full animate-ping bg-[#428B4D]/20" />
                )}
                {isCompleted ? (
                  <Check className="h-5 w-5" />
                ) : (
                  step.number
                )}
              </div>
              <span
                className={`mt-2 text-xs whitespace-nowrap transition-all duration-300 ${
                  isActive
                    ? "font-bold text-[#428B4D]"
                    : isCompleted
                    ? "font-semibold text-[#428B4D]"
                    : "text-gray-400"
                }`}
              >
                {step.label}
              </span>
            </div>
          </div>
        );
      })}
    </div>
  );
}