"use client";

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

export type StepperStepState = "complete" | "active" | "pending";

export interface StepperStep {
  id: string;
  label: string;
  description?: string;
  state: StepperStepState;
}

export interface StepperProps {
  steps: StepperStep[];
  ariaLabel?: string;
  className?: string;
  onStepClick?: (stepId: string) => void;
}

const stateClasses: Record<StepperStepState, { dot: string; label: string; line: string }> = {
  complete: {
    dot: "bg-success-green text-white border-success-green",
    label: "text-ink",
    line: "bg-success-green",
  },
  active: {
    dot: "bg-brand-green text-white border-brand-green ring-2 ring-brand-green/30",
    label: "text-brand-green font-semibold",
    line: "bg-border",
  },
  pending: {
    dot: "bg-surface text-muted border-border",
    label: "text-muted",
    line: "bg-border",
  },
};

export function Stepper({
  steps,
  ariaLabel = "Progress steps",
  className,
  onStepClick,
}: StepperProps) {
  return (
    <nav aria-label={ariaLabel} className={cn("w-full", className)}>
      <ol className="flex min-w-0 items-start gap-0 overflow-x-auto pb-1">
        {steps.map((step, index) => {
          const styles = stateClasses[step.state];
          const isLast = index === steps.length - 1;
          const interactive = Boolean(onStepClick);

          return (
            <li
              key={step.id}
              className={cn("flex min-w-[120px] flex-1 items-start", isLast && "flex-none")}
            >
              <div className="flex w-full min-w-0 flex-col items-center">
                <div className="flex w-full items-center">
                  {interactive ? (
                    <button
                      type="button"
                      onClick={() => onStepClick?.(step.id)}
                      className={cn(
                        "flex size-11 shrink-0 items-center justify-center rounded-full border-2",
                        "cursor-pointer transition-colors duration-200",
                        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-green-deep focus-visible:ring-offset-2",
                        "motion-reduce:transition-none",
                        styles.dot,
                      )}
                      aria-current={step.state === "active" ? "step" : undefined}
                      aria-label={`${step.label}${step.description ? `: ${step.description}` : ""}`}
                    >
                      {step.state === "complete" ? (
                        <Check className="size-4" aria-hidden="true" />
                      ) : (
                        <span className="font-inter text-sm font-semibold">{index + 1}</span>
                      )}
                    </button>
                  ) : (
                    <div
                      className={cn(
                        "flex size-11 shrink-0 items-center justify-center rounded-full border-2",
                        styles.dot,
                      )}
                      aria-current={step.state === "active" ? "step" : undefined}
                    >
                      {step.state === "complete" ? (
                        <Check className="size-4" aria-hidden="true" />
                      ) : (
                        <span className="font-inter text-sm font-semibold">{index + 1}</span>
                      )}
                    </div>
                  )}
                  {!isLast ? (
                    <div
                      className={cn("mx-2 h-0.5 min-w-[24px] flex-1", styles.line)}
                      aria-hidden="true"
                    />
                  ) : null}
                </div>
                <div className="mt-2 w-full px-1 text-center">
                  <p className={cn("font-inter text-sm", styles.label)}>{step.label}</p>
                  {step.description ? (
                    <p className="font-inter text-xs text-muted">{step.description}</p>
                  ) : null}
                </div>
              </div>
            </li>
          );
        })}
      </ol>
    </nav>
  );
}