"use client";

import { cn } from "@aur-ui/ui/lib/utils";
import { CheckIcon } from "lucide-react";
import { Fragment, type ReactNode } from "react";

export type WizardStep = {
  id: string;
  title: ReactNode;
  description?: ReactNode;
};

/**
 * Horizontal step indicator for multi-step flows. Completed steps fill brand
 * with a check and stay clickable (`onStepSelect`); the connector segment
 * behind each completed step fills with it, so progress reads as one line.
 * Step content and prev/next controls stay with the consumer — the flow's
 * state is app logic.
 */
export function WizardStepper({
  steps,
  activeStep,
  onStepSelect,
  className,
}: {
  steps: WizardStep[];
  /** Index of the current step. */
  activeStep: number;
  /** Enables jumping back to a completed step. */
  onStepSelect?: (index: number) => void;
  className?: string;
}) {
  return (
    <ol
      data-slot="wizard-stepper"
      className={cn("flex items-start", className)}
    >
      {steps.map((step, index) => {
        const done = index < activeStep;
        const current = index === activeStep;
        const clickable = done && !!onStepSelect;

        return (
          <Fragment key={step.id}>
            {index > 0 ? (
              <span
                aria-hidden
                className={cn(
                  "mx-2 mt-3.5 h-0.5 min-w-6 flex-1 rounded-full transition-colors duration-300",
                  done || current ? "bg-brand" : "bg-ink-wash",
                )}
              />
            ) : null}
            <li className="flex max-w-36 shrink-0 flex-col items-center gap-1.5 text-center">
              <button
                type="button"
                disabled={!clickable}
                onClick={clickable ? () => onStepSelect(index) : undefined}
                aria-current={current ? "step" : undefined}
                className={cn(
                  "flex size-7 items-center justify-center rounded-full text-xs font-semibold transition-colors duration-300",
                  done && "bg-brand text-white",
                  current && "bg-brand-soft text-brand ring-2 ring-brand/40",
                  !done && !current && "bg-ink-wash text-ink-500",
                  clickable && "cursor-pointer hover:bg-brand-hover",
                )}
              >
                {done ? <CheckIcon className="size-3.5" /> : index + 1}
              </button>
              <span
                className={cn(
                  "text-xs font-medium",
                  current ? "text-ink-900" : "text-ink-500",
                )}
              >
                {step.title}
              </span>
              {step.description ? (
                <span className="text-xs text-ink-400">{step.description}</span>
              ) : null}
            </li>
          </Fragment>
        );
      })}
    </ol>
  );
}