import { jsx, jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
import { cn } from "../utils/cn.js";
import { S as StCheck } from "../../StCheck-DWjoYM69.js";
import { MinimalStepper } from "./stepper-minimal.js";
const Stepper = forwardRef(
  ({
    steps,
    currentStep: currentStepProp,
    variant = "default",
    orientation = "horizontal",
    size = "md",
    clickable = false,
    allowFutureSteps = false,
    onStepClick,
    hideDescriptionOnMobile = false,
    className,
    ...props
  }, ref) => {
    const currentStep = steps.length === 0 ? 0 : Math.max(
      0,
      Math.min(
        currentStepProp < 0 ? 0 : currentStepProp,
        steps.length - 1
      )
    );
    const sizes = {
      sm: {
        indicator: "h-5 w-5 text-xs",
        text: "text-sm",
        icon: "h-5 w-5",
        connector: orientation === "horizontal" ? "h-[2px]" : "w-[2px] h-6",
        indicatorSize: "1.25rem"
        // h-5 = 1.25rem
      },
      md: {
        indicator: "h-6 w-6 text-sm",
        text: "text-base",
        icon: "h-5 w-5",
        connector: orientation === "horizontal" ? "h-[2px]" : "w-[2px] h-8",
        indicatorSize: "1.5rem"
        // h-6 = 1.5rem
      },
      lg: {
        indicator: "h-8 w-8 text-base",
        text: "text-lg",
        icon: "h-5 w-5",
        connector: orientation === "horizontal" ? "h-[2px]" : "w-[2px] h-10",
        indicatorSize: "2rem"
        // h-8 = 2rem
      }
    };
    const getStepState = (index) => {
      if (index < currentStep) return "completed";
      if (index === currentStep) return "current";
      return "upcoming";
    };
    const isStepClickable = (index) => {
      if (!clickable || !onStepClick) return false;
      if (allowFutureSteps) return true;
      return index <= currentStep;
    };
    const handleStepClick = (index) => {
      if (isStepClickable(index)) {
        onStepClick?.(index);
      }
    };
    const renderStepIndicator = (step, index, state) => {
      const isClickable = isStepClickable(index);
      const sizeConfig = sizes[size];
      const indicatorClasses = cn(
        "stepper-indicator rounded-full flex items-center justify-center transition-colors font-medium",
        sizeConfig.indicator,
        {
          "bg-accent text-white": state === "completed",
          "bg-accent/20 text-accent": state === "current",
          "bg-subtle text-subtle": state === "upcoming",
          "bg-negative-strong text-default-inverse": step.error,
          "cursor-pointer hover:opacity-80": isClickable,
          "cursor-not-allowed opacity-50": clickable && !isClickable
        }
      );
      const content = step.error ? "!" : step.icon ? /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center", children: step.icon }) : state === "completed" ? /* @__PURE__ */ jsx(StCheck, { className: `${sizeConfig.icon} text-white` }) : index + 1;
      const indicatorElement = /* @__PURE__ */ jsx("div", { className: indicatorClasses, children: content });
      if (isClickable) {
        return /* @__PURE__ */ jsx(
          "button",
          {
            type: "button",
            onClick: () => handleStepClick(index),
            className: "focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2 rounded-full",
            "aria-label": `${step.label} - ${state === "completed" ? "completed" : state === "current" ? "current step" : "upcoming"}`,
            children: indicatorElement
          }
        );
      }
      return indicatorElement;
    };
    const renderProgressBar = () => {
      const progress = currentStep / (steps.length - 1) * 100;
      return /* @__PURE__ */ jsx(
        "nav",
        {
          ref,
          "aria-label": "Progress",
          className: cn("w-full", className),
          ...props,
          children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
            /* @__PURE__ */ jsx(
              "div",
              {
                role: "progressbar",
                "aria-valuenow": currentStep,
                "aria-valuemin": 0,
                "aria-valuemax": steps.length - 1,
                className: "w-full bg-subtle rounded-full h-2 overflow-hidden",
                children: /* @__PURE__ */ jsx(
                  "div",
                  {
                    className: "h-full bg-accent transition-all duration-300 ease-out",
                    style: { width: `${progress}%` }
                  }
                )
              }
            ),
            /* @__PURE__ */ jsx(
              "ol",
              {
                className: cn(
                  "flex justify-between",
                  orientation === "horizontal" ? "flex-row" : "flex-col gap-4"
                ),
                children: steps.map((step, index) => {
                  const state = getStepState(index);
                  return /* @__PURE__ */ jsxs(
                    "li",
                    {
                      "aria-current": state === "current" ? "step" : void 0,
                      "aria-label": `${step.label} - ${state === "completed" ? "completed" : state === "current" ? "current step" : "upcoming"}`,
                      className: "flex flex-col items-center",
                      children: [
                        /* @__PURE__ */ jsx(
                          "span",
                          {
                            className: cn(
                              "font-medium",
                              sizes[size].text,
                              "text-strong"
                            ),
                            children: step.label
                          }
                        ),
                        step.description && /* @__PURE__ */ jsx(
                          "span",
                          {
                            className: cn(
                              "text-sm text-subtle mt-1 text-center",
                              hideDescriptionOnMobile && "hidden md:block"
                            ),
                            children: step.description
                          }
                        )
                      ]
                    },
                    index
                  );
                })
              }
            )
          ] })
        }
      );
    };
    const renderDefaultStyle = () => {
      return /* @__PURE__ */ jsx(
        "nav",
        {
          ref,
          "aria-label": "Progress",
          className: cn("w-full", className),
          ...props,
          children: /* @__PURE__ */ jsx(
            "ol",
            {
              className: cn(
                "flex",
                orientation === "horizontal" ? "flex-row justify-between" : "flex-col"
              ),
              children: steps.map((step, index) => {
                const state = getStepState(index);
                const isLast = index === steps.length - 1;
                const sizeConfig = sizes[size];
                return /* @__PURE__ */ jsx(
                  "li",
                  {
                    "aria-current": state === "current" ? "step" : void 0,
                    "aria-label": `${step.label} - ${state === "completed" ? "completed" : state === "current" ? "current step" : "upcoming"}`,
                    "aria-invalid": step.error ?? void 0,
                    className: cn(
                      "flex",
                      orientation === "horizontal" ? "flex-col items-center flex-1 relative" : "flex-row items-start relative pb-8 last:pb-0"
                    ),
                    children: /* @__PURE__ */ jsxs(
                      "div",
                      {
                        className: cn(
                          "flex",
                          orientation === "horizontal" ? "flex-col items-center w-full" : "flex-row items-start w-full"
                        ),
                        children: [
                          /* @__PURE__ */ jsxs(
                            "div",
                            {
                              className: cn(
                                "flex flex-col items-center relative z-10",
                                orientation === "horizontal" ? "mb-2" : "shrink-0"
                              ),
                              children: [
                                /* @__PURE__ */ jsx("div", { className: "absolute inset-[3px] bg-default rounded-full" }),
                                /* @__PURE__ */ jsx("div", { className: "relative", children: renderStepIndicator(step, index, state) })
                              ]
                            }
                          ),
                          !isLast && /* @__PURE__ */ jsx(
                            "div",
                            {
                              "aria-hidden": "true",
                              className: cn(
                                "stepper-connector absolute",
                                state === "completed" ? cn(sizeConfig.connector, "bg-accent") : cn(
                                  orientation === "horizontal" ? "h-[2px]" : cn(
                                    sizeConfig.connector.split(" ").find((c) => c.startsWith("h-")),
                                    "w-[2px]"
                                  ),
                                  "bg-subtle"
                                )
                              ),
                              style: {
                                ...orientation === "horizontal" ? {
                                  left: `calc(50% + ${sizeConfig.indicatorSize} / 2 + 6px)`,
                                  right: `calc(-50% + ${sizeConfig.indicatorSize} / 2 + 6px)`,
                                  top: `calc(${sizeConfig.indicatorSize} / 2 - 1px)`
                                } : {
                                  top: `calc(${sizeConfig.indicatorSize} + 8px)`,
                                  bottom: `-6px`,
                                  left: `calc(${sizeConfig.indicatorSize} / 2 - 1px)`
                                },
                                ...state !== "completed" ? {
                                  maskImage: orientation === "horizontal" ? `url("data:image/svg+xml,%3Csvg width='8' height='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='4' height='2' rx='1' fill='black'/%3E%3C/svg%3E")` : `url("data:image/svg+xml,%3Csvg width='2' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='2' height='4' ry='1' fill='black'/%3E%3C/svg%3E")`,
                                  maskRepeat: orientation === "horizontal" ? "repeat-x" : "repeat-y",
                                  WebkitMaskImage: orientation === "horizontal" ? `url("data:image/svg+xml,%3Csvg width='8' height='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='4' height='2' rx='1' fill='black'/%3E%3C/svg%3E")` : `url("data:image/svg+xml,%3Csvg width='2' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='2' height='4' ry='1' fill='black'/%3E%3C/svg%3E")`,
                                  WebkitMaskRepeat: orientation === "horizontal" ? "repeat-x" : "repeat-y"
                                } : {}
                              }
                            }
                          ),
                          /* @__PURE__ */ jsxs(
                            "div",
                            {
                              className: cn(
                                orientation === "horizontal" ? "text-center w-full" : "ml-4 flex-1"
                              ),
                              children: [
                                /* @__PURE__ */ jsx(
                                  "p",
                                  {
                                    className: cn(
                                      "font-medium",
                                      sizeConfig.text,
                                      "text-strong"
                                    ),
                                    children: step.label
                                  }
                                ),
                                step.description && /* @__PURE__ */ jsx(
                                  "p",
                                  {
                                    className: cn(
                                      "text-sm text-subtle mt-1",
                                      hideDescriptionOnMobile && "hidden md:block"
                                    ),
                                    children: step.description
                                  }
                                )
                              ]
                            }
                          )
                        ]
                      }
                    )
                  },
                  index
                );
              })
            }
          )
        }
      );
    };
    if (steps.length === 0) {
      return /* @__PURE__ */ jsx("nav", { ref, "aria-label": "Progress", className, ...props });
    }
    if (size === "minimal") {
      return /* @__PURE__ */ jsx(
        MinimalStepper,
        {
          ref,
          steps,
          currentStep,
          orientation,
          clickable,
          allowFutureSteps,
          onStepClick,
          className,
          ...props
        }
      );
    }
    switch (variant) {
      case "progress":
        return renderProgressBar();
      default:
        return renderDefaultStyle();
    }
  }
);
Stepper.displayName = "Stepper";
export {
  Stepper
};
