import { jsxs, jsx } from "react/jsx-runtime";
import * as React from "react";
import { cn } from "../../lib/utils.js";
import { Popover, PopoverTrigger, PopoverContent, PopoverHeader, PopoverTitle, PopoverBody, PopoverFooter } from "../Popover/popover.js";
import { Button } from "../Button/button.js";
import { AspectRatio } from "../AspectRatio/aspect-ratio.js";
import { OVERLAY_SIDE_OFFSET } from "../../tokens/elevation/overlay-geometry.js";
const KIND_TITLE = {
  tips: "使用技巧",
  "new-features": "新功能介紹"
};
const Coachmark = React.forwardRef(
  ({
    open,
    defaultOpen,
    onOpenChange,
    children,
    image,
    mediaRatio = 16 / 9,
    kind,
    title,
    description,
    step,
    onSkip,
    onNext,
    onPrev,
    isLastStep = false,
    doneLabel = "知道了",
    // i18n-allow: DS default; consumer override via doneLabel prop
    side = "bottom",
    align = "center",
    sideOffset = OVERLAY_SIDE_OFFSET,
    className,
    ...props
  }, ref) => {
    const isSingleStep = isLastStep && !onPrev;
    const showSkip = Boolean(onSkip) && !onPrev && !isSingleStep;
    const nextLabel = isSingleStep ? doneLabel : isLastStep ? "Done" : "Next";
    const hasFooterContent = Boolean(step || showSkip || onNext || onPrev);
    const stepText = step ? `${step.current} of ${step.total}` : null;
    const headerTitle = kind === "tips" || kind === "new-features" ? KIND_TITLE[kind] : kind;
    const titleId = React.useId();
    const dialogLabelledBy = headerTitle || title ? titleId : void 0;
    return /* @__PURE__ */ jsxs(Popover, { open, defaultOpen, onOpenChange, children: [
      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children }),
      /* @__PURE__ */ jsxs(
        PopoverContent,
        {
          ref,
          side,
          align,
          sideOffset,
          className: cn("w-80 p-0 overflow-hidden", className),
          onOpenAutoFocus: (e) => e.preventDefault(),
          "aria-labelledby": dialogLabelledBy,
          "aria-label": dialogLabelledBy ? void 0 : "提示",
          ...props,
          children: [
            headerTitle && // Header title 走 `<PopoverTitle>` 共用 Popover typography canonical(text-body font-medium)。
            // **不 hideClose** — 對齊 Popover / Dialog / 所有 overlay 家族 canonical:header 必有 dismiss X
            // (user 可隨時關閉,跟 Skip / Done 是不同入口,canonical 重複不冗)
            /* @__PURE__ */ jsx(PopoverHeader, { children: /* @__PURE__ */ jsx(PopoverTitle, { id: titleId, children: headerTitle }) }),
            image && /* @__PURE__ */ jsx(AspectRatio, { ratio: mediaRatio, className: "w-full overflow-hidden bg-muted", children: image }),
            (title || description) && // 對齊 Dialog / Popover canonical:body 左對齊(不中置)
            // Why: Coachmark 雖是 onboarding / feature discovery,但文字可讀性 > 視覺焦點;
            // 中文 / 長句中置會「每行起點不同」造成閱讀鋸齒,左對齊最穩。
            // 世界級參考:Notion / Linear / Figma onboarding tour 皆左對齊;Intercom Messenger 亦如是。
            /* @__PURE__ */ jsxs(PopoverBody, { className: "flex flex-col", children: [
              title && /* @__PURE__ */ jsx("h3", { id: !headerTitle ? titleId : void 0, className: "text-body-lg font-medium text-foreground", children: title }),
              description && // title(body-lg 16)+ desc(body 14)→ reading-lg token(label tier 決定)
              // 對齊 Dialog / Sheet canonical;移除原 gap-1(4px)drift
              /* @__PURE__ */ jsx("p", { className: "mt-[var(--item-gap-label-desc-reading-lg)] text-body text-fg-secondary", children: description })
            ] }),
            hasFooterContent && // 專屬 Coachmark canonical:footer 無上方分隔線(media + body + footer 視覺一氣呵成,
            // 不像 Dialog 需要 header/footer 分隔強化結構)。override SurfaceFooter default border-t
            /* @__PURE__ */ jsxs(PopoverFooter, { className: "justify-between !border-t-0", children: [
              stepText ? (
                // step 文字走 text-body 跟 body content 字體一致
                /* @__PURE__ */ jsx("span", { className: "text-body text-fg-secondary tabular-nums", children: stepText })
              ) : /* @__PURE__ */ jsx("span", { "aria-hidden": true }),
              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                onPrev && /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "sm", onClick: onPrev, children: "Previous" }),
                showSkip && /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "sm", onClick: onSkip, children: "Skip" }),
                onNext && /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", onClick: onNext, children: nextLabel })
              ] })
            ] })
          ]
        }
      )
    ] });
  }
);
Coachmark.displayName = "Coachmark";
const coachmarkMeta = {
  component: "Coachmark",
  family: null,
  // non-family composite / overlay / layout
  variants: {},
  sizes: {},
  states: ["default"],
  // 純 Popover composition — 無自有 hover / active / disabled 視覺(spec「邊界狀態」)
  tokens: {
    bg: ["bg-muted"],
    fg: ["text-fg-secondary", "text-foreground"],
    ring: []
  }
};
export {
  Coachmark,
  coachmarkMeta
};
//# sourceMappingURL=coachmark.js.map
