"use client";
import { jsx as t, jsxs as c } from "react/jsx-runtime";
import { Check as D, ChevronLeft as E, X as C, ChevronRight as P } from "lucide-react";
import { useState as L, useLayoutEffect as V, useRef as p, useEffect as M } from "react";
import { Button as j } from "../atoms/button.js";
import { DS_SPARKLE_DURATION_MS as _, SparkleBurst as G } from "../atoms/sparkle-burst.js";
import { stepIndicatorIconVariants as K, stepIndicatorLabelVariants as F, StepIndicator as O } from "../atoms/step-indicator.js";
import { cn as l } from "../../../lib/utils.js";
function U({ step: e, stepNumber: n, isAttention: a }) {
  const s = /* @__PURE__ */ t(
    O,
    {
      className: "min-w-0",
      label: e.label,
      status: e.status,
      stepNumber: n
    }
  ), u = l(
    "flex min-w-0 flex-1 items-center justify-center",
    a && "step-attention-target"
  );
  return e.onClick ? /* @__PURE__ */ t(
    "button",
    {
      className: l(u, "cursor-pointer"),
      onClick: e.onClick,
      type: "button",
      children: s
    }
  ) : /* @__PURE__ */ t("span", { className: u, children: s });
}
function R(e) {
  return e.length - 1;
}
function X(e) {
  return e.findIndex((n) => n.status === "active");
}
function z(e, n) {
  return e.length === 0 ? n ? 0 : -1 : n ? e.length : R(e);
}
function g(e, n) {
  const { currentIndex: a, isDismissible: s = !1 } = n ?? {}, u = X(e);
  if (u >= 0)
    return u;
  if (e.length === 0)
    return s ? 0 : -1;
  const h = z(e, s);
  return a !== void 0 && a >= 0 && a <= h ? a : R(e);
}
function $(e, n, a) {
  const s = z(e, a);
  return n >= 0 && n <= s ? n : g(e, {
    currentIndex: n,
    isDismissible: a
  });
}
function q(e) {
  return `calc(${(e - 1) / e} * (100% - 4.25rem) + 0.75rem)`;
}
function te({
  steps: e,
  onDismiss: n,
  animateStepTransitions: a = !1,
  orientation: s = "horizontal",
  className: u,
  ...h
}) {
  const m = !!n, [T, b] = L(
    () => g(e, { isDismissible: m })
  );
  V(() => {
    b(
      (r) => g(e, {
        currentIndex: r,
        isDismissible: m
      })
    );
  }, [m, e]);
  const [v, N] = L(void 0), x = p(null), f = p(null), k = p(0);
  M(() => {
    const r = x.current, o = new Map(e.map((i) => [i.id, i.status]));
    if (r === null) {
      x.current = o;
      return;
    }
    if (a) {
      const i = e.find(
        (S) => S.status === "complete" && r.get(S.id) !== "complete"
      );
      i && (f.current !== null && window.clearTimeout(f.current), k.current += 1, N({ stepId: i.id, key: k.current }), f.current = window.setTimeout(() => {
        N(void 0), f.current = null;
      }, _));
    }
    x.current = o;
  }, [a, e]), M(
    () => () => {
      f.current !== null && window.clearTimeout(f.current);
    },
    []
  );
  const d = $(
    e,
    T,
    m
  ), A = e[d], w = e.length, I = d > 0, y = m ? d < w : d < e.length - 1, B = m && e.at(-1)?.status === "active";
  return s === "vertical" ? /* @__PURE__ */ t("section", { "aria-label": "Steps progress", className: l(u), ...h, children: /* @__PURE__ */ t("ol", { className: "flex flex-col", children: e.map((r, o) => {
    const i = o === e.length - 1;
    return /* @__PURE__ */ c(
      "li",
      {
        className: l("flex items-start gap-3", !i && "pb-5"),
        children: [
          /* @__PURE__ */ c("div", { className: "flex shrink-0 flex-col items-center self-stretch", children: [
            /* @__PURE__ */ t(
              "span",
              {
                className: l(
                  K({ status: r.status })
                ),
                children: r.status === "complete" ? /* @__PURE__ */ t(D, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ t("span", { className: "text-sm", children: o + 1 })
              }
            ),
            !i && /* @__PURE__ */ t("div", { className: "mt-2 w-px flex-1 bg-border" })
          ] }),
          /* @__PURE__ */ c(
            "span",
            {
              "aria-current": r.status === "active" ? "step" : void 0,
              className: l(
                F({ status: r.status }),
                "pt-0.5"
              ),
              children: [
                r.label,
                /* @__PURE__ */ c("span", { className: "sr-only", children: [
                  " — ",
                  r.status
                ] })
              ]
            }
          )
        ]
      },
      r.id
    );
  }) }) }) : /* @__PURE__ */ c(
    "section",
    {
      "aria-label": "Steps progress",
      className: l(
        "relative h-14 overflow-hidden border border-border bg-card text-foreground",
        u
      ),
      ...h,
      children: [
        B && /* @__PURE__ */ t(
          "span",
          {
            "aria-hidden": "true",
            className: "pointer-events-none absolute top-0 right-0 z-10 hidden h-0.5 bg-foreground sm:block",
            style: { left: q(e.length) }
          }
        ),
        A?.status === "active" && /* @__PURE__ */ t(
          "span",
          {
            "aria-hidden": "true",
            className: "pointer-events-none absolute inset-x-0 top-0 z-20 h-0.5 bg-foreground sm:hidden"
          }
        ),
        /* @__PURE__ */ c("div", { className: "relative z-10 flex h-full items-center sm:gap-3 sm:px-3", children: [
          /* @__PURE__ */ t(
            "button",
            {
              "aria-label": "Go to previous step",
              className: l(
                "flex h-full shrink-0 items-center px-2 text-muted-foreground sm:hidden",
                !I && "pointer-events-none invisible"
              ),
              onClick: () => b(d - 1),
              tabIndex: I ? 0 : -1,
              type: "button",
              children: /* @__PURE__ */ t(E, { className: "h-4 w-4" })
            }
          ),
          /* @__PURE__ */ c("ol", { className: "flex h-full min-w-0 flex-1 items-center gap-0", children: [
            e.map((r, o) => {
              const i = v?.stepId === r.id;
              return /* @__PURE__ */ c(
                "li",
                {
                  "aria-current": r.status === "active" ? "step" : void 0,
                  className: l(
                    "relative isolate flex h-full min-w-0 flex-1 items-center justify-center px-2 py-4 sm:px-3",
                    o !== d && "hidden sm:flex"
                  ),
                  "data-attention": i ? "true" : void 0,
                  "data-status": r.status,
                  children: [
                    o > 0 && /* @__PURE__ */ t(
                      "span",
                      {
                        "aria-hidden": "true",
                        className: "absolute left-0 hidden h-full w-px bg-border sm:block"
                      }
                    ),
                    /* @__PURE__ */ t(
                      U,
                      {
                        isAttention: i,
                        step: r,
                        stepNumber: o + 1
                      }
                    ),
                    i ? /* @__PURE__ */ t(
                      "span",
                      {
                        "aria-hidden": !0,
                        className: "pointer-events-none absolute inset-0 z-30 flex items-center justify-center",
                        children: /* @__PURE__ */ t(G, {}, v.key)
                      }
                    ) : null
                  ]
                },
                r.id
              );
            }),
            n && /* @__PURE__ */ t(
              "li",
              {
                className: l(
                  "relative isolate flex h-full flex-1 items-center justify-center sm:hidden",
                  d !== w && "hidden"
                ),
                children: /* @__PURE__ */ c(
                  j,
                  {
                    "aria-label": "Dismiss steps progress",
                    className: "h-8 gap-1.5 border border-border px-3 text-muted-foreground hover:bg-muted hover:text-foreground",
                    onClick: n,
                    type: "button",
                    variant: "ghost",
                    children: [
                      /* @__PURE__ */ t(C, { className: "h-4 w-4" }),
                      /* @__PURE__ */ t("span", { className: "text-sm", children: "Dismiss" })
                    ]
                  }
                )
              }
            )
          ] }),
          /* @__PURE__ */ t(
            "button",
            {
              "aria-label": "Go to next step",
              className: l(
                "flex h-full shrink-0 items-center px-2 text-muted-foreground sm:hidden",
                !y && "pointer-events-none invisible"
              ),
              onClick: () => b(d + 1),
              tabIndex: y ? 0 : -1,
              type: "button",
              children: /* @__PURE__ */ t(P, { className: "h-4 w-4" })
            }
          ),
          n && /* @__PURE__ */ t(
            j,
            {
              "aria-label": "Dismiss steps progress",
              className: "hidden h-8 w-8 shrink-0 border border-border text-muted-foreground hover:bg-muted hover:text-foreground sm:flex",
              onClick: n,
              size: "icon",
              type: "button",
              variant: "ghost",
              children: /* @__PURE__ */ t(C, { className: "h-4 w-4" })
            }
          )
        ] })
      ]
    }
  );
}
export {
  te as StepsProgress,
  g as getMobileIndexForSteps
};
