"use client";

// src/components/ui/coach-mark.tsx
import * as React from "react";
import { createPortal } from "react-dom";
import { Popover as PopoverPrimitive } from "radix-ui";
import { cva } from "class-variance-authority";

// src/lib/utils.ts
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs) {
  return twMerge(clsx(inputs));
}

// src/components/ui/coach-mark.tsx
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var coachMarkVariants = cva(
  "z-[60] flex flex-col overflow-hidden rounded-xl bg-brand-deep text-white shadow-xl outline-none hc:!bg-background hc:!text-foreground hc:!border-2 hc:!border-foreground hc:!shadow-none",
  {
    variants: {
      size: {
        default: "w-[320px]",
        sm: "w-[260px]",
        lg: "w-[400px]"
      }
    },
    defaultVariants: {
      size: "default"
    }
  }
);
function CoachMarkImage({
  src,
  alt
}) {
  return /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-hidden", children: /* @__PURE__ */ jsx(
    "img",
    {
      src,
      alt,
      className: "h-[160px] w-full object-cover"
    }
  ) });
}
function CoachMarkStepIndicator({
  current,
  total
}) {
  return /* @__PURE__ */ jsx(
    "output",
    {
      className: "flex items-center gap-1",
      "aria-live": "polite",
      "aria-label": `Step ${current + 1} of ${total}`,
      children: Array.from({ length: total }, (_, i) => /* @__PURE__ */ jsx(
        "span",
        {
          className: cn(
            "h-1.5 rounded-full transition-all duration-200",
            i === current ? "w-4 bg-white hc:bg-foreground" : "w-1.5 bg-white/30 hc:bg-foreground/40"
          ),
          "aria-hidden": "true"
        },
        i
      ))
    }
  );
}
function SpotlightOverlay({
  rect,
  maskId
}) {
  const padding = 6;
  const borderRadius = 8;
  const x = rect.x - padding;
  const y = rect.y - padding;
  const w = rect.width + padding * 2;
  const h = rect.height + padding * 2;
  const maskUrl = `url(#${maskId})`;
  return createPortal(
    /* @__PURE__ */ jsxs(
      "div",
      {
        className: "fixed inset-0 z-[55]",
        "aria-hidden": "true",
        children: [
          /* @__PURE__ */ jsxs("svg", { className: "absolute inset-0 size-full", children: [
            /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("mask", { id: maskId, children: [
              /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: "white" }),
              /* @__PURE__ */ jsx(
                "rect",
                {
                  x,
                  y,
                  width: w,
                  height: h,
                  rx: borderRadius,
                  ry: borderRadius,
                  fill: "black"
                }
              )
            ] }) }),
            /* @__PURE__ */ jsx(
              "rect",
              {
                width: "100%",
                height: "100%",
                fill: "rgba(0,0,0,0.5)",
                mask: maskUrl
              }
            )
          ] }),
          /* @__PURE__ */ jsx(
            "div",
            {
              className: "absolute rounded-lg ring-2 ring-brand hc:ring-foreground shadow-[0_0_0_4px_rgba(0,0,0,0.3)] hc:shadow-none",
              style: {
                left: x,
                top: y,
                width: w,
                height: h,
                borderRadius
              }
            }
          )
        ]
      }
    ),
    document.body
  );
}
function CoachMark({
  state,
  side = "bottom",
  align = "center",
  sideOffset = 12,
  nextLabel,
  skipLabel = "Skip",
  size,
  className
}) {
  const spotlightMaskId = React.useId().replace(/:/g, "");
  const {
    isOpen,
    step,
    currentStep,
    totalSteps,
    isFlow,
    isFirst,
    isLast,
    next,
    prev,
    skip,
    anchorRect
  } = state;
  if (!isOpen || !step) return null;
  if (!anchorRect) return null;
  const titleId = `coach-mark-title-${step.id}`;
  const descId = `coach-mark-desc-${step.id}`;
  const hasImage = Boolean(step.image);
  const primaryLabel = nextLabel ?? (isLast ? "Got it" : "Next");
  const resolvedSide = step.side ?? side;
  const resolvedAlign = step.align ?? align;
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(SpotlightOverlay, { rect: anchorRect, maskId: `coach-spotlight-${spotlightMaskId}` }),
    /* @__PURE__ */ jsxs(PopoverPrimitive.Root, { open: true, children: [
      /* @__PURE__ */ jsx(
        PopoverPrimitive.Anchor,
        {
          virtualRef: {
            current: {
              getBoundingClientRect: () => ({
                x: anchorRect.x,
                y: anchorRect.y,
                top: anchorRect.y,
                left: anchorRect.x,
                bottom: anchorRect.y + anchorRect.height,
                right: anchorRect.x + anchorRect.width,
                width: anchorRect.width,
                height: anchorRect.height,
                toJSON: () => {
                }
              })
            }
          }
        }
      ),
      /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
        PopoverPrimitive.Content,
        {
          "data-slot": "coach-mark",
          side: resolvedSide,
          align: resolvedAlign,
          sideOffset,
          onOpenAutoFocus: (e) => e.preventDefault(),
          onInteractOutside: (e) => e.preventDefault(),
          onEscapeKeyDown: () => skip(),
          "aria-labelledby": titleId,
          "aria-describedby": descId,
          className: cn(
            coachMarkVariants({ size }),
            /* animations */
            "data-[state=open]:animate-in data-[state=closed]:animate-out",
            "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
            "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
            "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
            "data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2",
            className
          ),
          children: [
            hasImage && /* @__PURE__ */ jsx(
              CoachMarkImage,
              {
                src: step.image,
                alt: step.imageAlt ?? step.title
              }
            ),
            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 p-4", children: [
              /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
                /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx(
                  "h3",
                  {
                    id: titleId,
                    className: "text-sm font-semibold text-white leading-snug",
                    children: step.title
                  }
                ) }),
                /* @__PURE__ */ jsx(
                  "button",
                  {
                    type: "button",
                    onClick: skip,
                    className: "shrink-0 -mt-0.5 -me-1 flex size-6 items-center justify-center rounded-md text-white/60 hover:bg-white/15 hover:text-white transition-colors focus-visible:outline-2 focus-visible:outline-white hc:!text-foreground hc:hover:!bg-foreground/10",
                    "aria-label": "Dismiss",
                    children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-xmark text-xs", "aria-hidden": "true" })
                  }
                )
              ] }),
              /* @__PURE__ */ jsx(
                "p",
                {
                  id: descId,
                  className: "text-sm text-white/80 leading-relaxed",
                  children: step.description
                }
              ),
              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 pt-1", children: [
                /* @__PURE__ */ jsx("div", { className: "flex-1", children: isFlow && /* @__PURE__ */ jsx(
                  CoachMarkStepIndicator,
                  {
                    current: currentStep,
                    total: totalSteps
                  }
                ) }),
                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
                  isFlow && !isLast && /* @__PURE__ */ jsx(
                    "button",
                    {
                      type: "button",
                      onClick: skip,
                      className: "h-8 px-3 text-xs font-medium text-white/60 hover:text-white transition-colors rounded-md focus-visible:outline-2 focus-visible:outline-white hc:!text-foreground hc:hover:!text-foreground/80",
                      children: skipLabel
                    }
                  ),
                  isFlow && !isFirst && /* @__PURE__ */ jsxs(
                    "button",
                    {
                      type: "button",
                      onClick: prev,
                      className: "inline-flex items-center gap-1.5 h-8 px-3 text-xs font-medium text-white bg-white/15 hover:bg-white/25 rounded-md border border-white/20 transition-colors focus-visible:outline-2 focus-visible:outline-white hc:!bg-background hc:!text-foreground hc:!border-foreground",
                      children: [
                        /* @__PURE__ */ jsx("i", { className: "fa-light fa-arrow-left text-xs", "aria-hidden": "true" }),
                        "Back"
                      ]
                    }
                  ),
                  /* @__PURE__ */ jsxs(
                    "button",
                    {
                      type: "button",
                      onClick: next,
                      className: "inline-flex items-center gap-1.5 h-8 px-3 text-xs font-medium text-brand-deep bg-white hover:bg-white/90 rounded-md transition-colors focus-visible:outline-2 focus-visible:outline-white hc:!bg-foreground hc:!text-background hc:border hc:border-foreground",
                      children: [
                        primaryLabel,
                        isFlow && !isLast && /* @__PURE__ */ jsx("i", { className: "fa-light fa-arrow-right text-xs", "aria-hidden": "true" })
                      ]
                    }
                  )
                ] })
              ] })
            ] }),
            /* @__PURE__ */ jsx(
              PopoverPrimitive.Arrow,
              {
                className: "fill-brand-deep drop-shadow-sm hc:fill-background",
                width: 12,
                height: 6
              }
            )
          ]
        }
      ) })
    ] })
  ] });
}
export {
  CoachMark
};
//# sourceMappingURL=coach-mark.js.map