import { Check } from "lucide-react";
import { sellerSteps } from "./seller.schema";

export default function SellerStepper({
  currentStep,
  allComplete = false,
}: {
  currentStep: number;
  /** Once the request is submitted every step is done, the last one included. */
  allComplete?: boolean;
}) {
  const totalSteps = sellerSteps.length;
  const activeIndex = Math.min(Math.max(currentStep, 1), totalSteps) - 1;
  const activeLabel = sellerSteps[activeIndex];

  return (
    <>
      <div className="lg:hidden">
        <div className="flex items-baseline justify-between gap-3">
          <p className="text-[13px] font-semibold leading-5 text-slate-800">
            Step {activeIndex + 1} of {totalSteps}
          </p>
          <p className="min-w-0 truncate text-xs font-medium leading-4 text-[#dc2626]">{activeLabel}</p>
        </div>
        <div className="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-slate-200">
          <div
            className="h-full rounded-full bg-[#CC1414] transition-all"
            style={{ width: `${((activeIndex + 1) / totalSteps) * 100}%` }}
          />
        </div>
      </div>

      <div className="hidden overflow-x-auto pb-1 lg:block">
        <div className="flex min-w-[860px] items-start px-1 lg:min-w-0 lg:px-0">
          {sellerSteps.map((label, index) => {
            const stepNumber = index + 1;
            const isCompleted = allComplete || stepNumber < currentStep;
            const isActive = !isCompleted && stepNumber === currentStep;
            const statusLabel = isCompleted ? "Completed" : isActive ? "In Progress" : "Pending";
            const circleClassName = isCompleted
              ? "border-[#f2d1d1] bg-[#fdeeee] text-[#dc2626] shadow-[0_10px_24px_-18px_rgba(220,38,38,0.6)]"
              : isActive
                ? "border-[#ef4444] bg-white text-[#dc2626] shadow-[0_10px_24px_-18px_rgba(239,68,68,0.75)]"
                : "border-slate-300 bg-white text-slate-400 shadow-[0_8px_20px_-18px_rgba(15,23,42,0.35)]";
            const statusClassName = isCompleted ? "text-emerald-600" : isActive ? "text-[#dc2626]" : "text-slate-500";

            return (
              <div key={label} className="flex flex-1 items-start">
                <div className="flex w-full flex-col items-center px-1 text-center">
                  <div
                    className={`relative flex h-12 w-12 items-center justify-center rounded-full border text-[15px] font-semibold transition-colors ${circleClassName}`}
                  >
                    {isCompleted ? <Check className="h-5 w-5 stroke-[2.75]" /> : stepNumber}
                  </div>
                  <p className="mt-3 text-[13px] font-semibold leading-5 text-slate-800">{label}</p>
                  <p className={`mt-1 text-xs font-medium leading-4 ${statusClassName}`}>{statusLabel}</p>
                </div>

                {index < sellerSteps.length - 1 && (
                  <div className="mx-3 mt-[23px] flex-1 border-t border-dashed border-slate-300" aria-hidden />
                )}
              </div>
            );
          })}
        </div>
      </div>
    </>
  );
}