import { Check } from "lucide-react";
import { cn } from "@/lib/utils";

interface Step {
  id: number | string;
  label: string;
}

interface Props {
  steps: Step[];
  current: number; // zero-based
  className?: string;
}

export function Stepper({ steps, current, className }: Props) {
  return (
    <ol
      aria-label="Progress"
      className={cn("flex w-full", className)}
    >
      {steps.map((step, idx) => {
        const isDone = idx < current;
        const isActive = idx === current;
        const isFirst = idx === 0;
        const isLast = idx === steps.length - 1;

        return (
          <li
            key={step.id}
            aria-current={isActive ? "step" : undefined}
            className="relative flex min-w-0 flex-1 flex-col items-center gap-2.5"
          >
            {/* Start connector: li-start → circle-start (50% - 20px from start = 50% + 20px from end) */}
            {!isFirst && (
              <div className="absolute top-5 start-0 end-[calc(50%+20px)] h-0.5 -translate-y-1/2 overflow-hidden rounded-full bg-slate-200 dark:bg-slate-800">
                <span
                  className={cn(
                    "absolute inset-y-0 start-0 rounded-full transition-all duration-500",
                    idx <= current
                      ? "w-full bg-gradient-to-r rtl:bg-gradient-to-l from-emerald-400 to-emerald-500"
                      : "w-0",
                  )}
                />
              </div>
            )}

            {/* End connector: circle-end (50% + 20px from start) → li-end */}
            {!isLast && (
              <div className="absolute top-5 start-[calc(50%+20px)] end-0 h-0.5 -translate-y-1/2 overflow-hidden rounded-full bg-slate-200 dark:bg-slate-800">
                <span
                  className={cn(
                    "absolute inset-y-0 start-0 rounded-full transition-all duration-500",
                    isDone
                      ? "w-full bg-gradient-to-r rtl:bg-gradient-to-l from-emerald-400 to-emerald-500"
                      : "w-0",
                  )}
                />
              </div>
            )}

            {/* Circle */}
            <span
              className={cn(
                "relative z-10 grid h-10 w-10 shrink-0 place-items-center rounded-full border-2 text-sm font-bold transition-all duration-500",
                isDone && [
                  "border-emerald-500 bg-gradient-to-br from-emerald-400 to-emerald-600 text-white",
                  "shadow-[0_4px_14px_-4px_rgba(16,185,129,0.6)]",
                ],
                isActive && [
                  "border-brand-500 bg-gradient-to-br from-brand-500 to-brand-700 text-white",
                  "shadow-[0_4px_20px_-4px_rgba(50,109,255,0.7)]",
                  "ring-4 ring-brand-200 dark:ring-brand-500/25",
                ],
                !isDone && !isActive && [
                  "border-slate-200 bg-white text-slate-400",
                  "dark:border-slate-700 dark:bg-slate-900 dark:text-slate-500",
                ],
              )}
            >
              {isDone ? (
                <Check className="h-4 w-4" strokeWidth={2.5} aria-hidden />
              ) : (
                <span>{idx + 1}</span>
              )}
              {isActive && (
                <span
                  aria-hidden
                  className="absolute inset-0 animate-ping rounded-full bg-brand-400/30"
                />
              )}
            </span>

            {/* Label */}
            <span
              className={cn(
                "max-w-full whitespace-normal break-words text-center text-xs font-semibold uppercase tracking-[0.08em] transition-colors duration-300",
                isActive
                  ? "text-brand-600 dark:text-brand-400"
                  : isDone
                    ? "text-emerald-600 dark:text-emerald-400"
                    : "text-slate-400 dark:text-slate-500",
              )}
            >
              {step.label}
            </span>
          </li>
        );
      })}
    </ol>
  );
}