"use client";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { ChevronDown } from "lucide-react";
import { cn } from "@open-mercato/shared/lib/utils";
import { useT } from "@open-mercato/shared/lib/i18n/context";
import { Button } from "../../primitives/button.js";
import { useGroupCollapse } from "./useGroupCollapse.js";
import { SortableGroupHandle, useSortableGroupHandle } from "./SortableGroupHandle.js";
const CollapsibleGroup = React.forwardRef(
  function CollapsibleGroup2({ groupId, title, pageType, defaultExpanded = true, errorCount = 0, fieldCount, chevronPosition = "right", icon, children }, ref) {
    const t = useT();
    const { expanded, toggle, setExpanded, isHydrated } = useGroupCollapse(pageType, groupId, defaultExpanded);
    const contentId = `collapsible-group-${groupId}`;
    const sortableHandle = useSortableGroupHandle();
    const showDragHandle = sortableHandle !== null;
    React.useImperativeHandle(ref, () => ({
      expand: () => setExpanded(true)
    }), [setExpanded]);
    const chevronIcon = /* @__PURE__ */ jsx(
      ChevronDown,
      {
        className: cn(
          "size-4 shrink-0 motion-safe:transition-transform motion-safe:duration-200",
          expanded && "rotate-180"
        )
      }
    );
    const fieldCountLabel = typeof fieldCount === "number" && fieldCount > 0 ? /* @__PURE__ */ jsxs("span", { className: "text-xs font-normal text-muted-foreground", children: [
      "\xB7 ",
      fieldCount,
      " ",
      fieldCount === 1 ? t("ui.collapsible.fieldSingular", "field") : t("ui.collapsible.fieldPlural", "fields")
    ] }) : null;
    const errorBadge = errorCount > 0 ? /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-full bg-destructive/10 px-2 py-0.5 text-xs font-medium text-destructive", children: errorCount === 1 ? t("ui.collapsible.errorSingular", "{{count}} error", { count: errorCount }) : t("ui.collapsible.errorPlural", "{{count}} errors", { count: errorCount }) }) : null;
    const dragHandle = showDragHandle ? /* @__PURE__ */ jsx(
      "span",
      {
        className: "inline-flex shrink-0 items-center",
        onClick: (event) => event.stopPropagation(),
        onPointerDown: (event) => event.stopPropagation(),
        onKeyDown: (event) => event.stopPropagation(),
        children: /* @__PURE__ */ jsx(SortableGroupHandle, { ariaLabel: t("ui.crud.dragHandle.aria", "Drag to reorder") })
      }
    ) : null;
    return /* @__PURE__ */ jsxs(
      "div",
      {
        id: `collapsible-group-wrapper-${groupId}`,
        className: cn(
          // Aligned with Figma Accordion `210:4022`: rounded-10, three visual
          // states (closed = white card + soft border + x-small shadow,
          // hover-while-closed = bg-muted + no border + no shadow,
          // open = bg-muted + no border + no shadow). Destructive border
          // wins over the Figma states when the group has validation errors.
          "rounded-[10px] border bg-card transition-colors",
          !isHydrated && "invisible",
          errorCount > 0 ? "border-destructive" : expanded ? "border-transparent bg-muted shadow-none" : "border-border shadow-xs hover:border-transparent hover:bg-muted hover:shadow-none"
        ),
        "data-collapsible-group-id": groupId,
        "data-state": expanded ? "open" : "closed",
        "data-persistence-hydrated": isHydrated ? "true" : "false",
        "aria-hidden": isHydrated ? void 0 : true,
        children: [
          title && /* @__PURE__ */ jsxs(
            "div",
            {
              className: cn(
                "flex items-center gap-2 px-2 py-2",
                chevronPosition === "left" ? "flex-row" : "flex-row"
              ),
              children: [
                dragHandle,
                /* @__PURE__ */ jsx(
                  Button,
                  {
                    type: "button",
                    variant: "muted",
                    onClick: toggle,
                    className: cn(
                      // Defer hover styling to the surrounding wrapper so the whole
                      // row toggles to `bg-muted` together (Figma Accordion behaviour)
                      // instead of stacking a second hover layer over the trigger
                      // button.
                      "flex-1 rounded-md px-2 py-1 text-sm font-medium hover:bg-transparent dark:hover:bg-transparent",
                      chevronPosition === "left" ? "justify-start gap-2" : "justify-between"
                    ),
                    "aria-expanded": expanded,
                    "aria-controls": contentId,
                    children: chevronPosition === "left" ? /* @__PURE__ */ jsxs(Fragment, { children: [
                      chevronIcon,
                      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
                        icon && /* @__PURE__ */ jsxs("span", { className: "relative shrink-0 text-muted-foreground", children: [
                          icon,
                          !expanded && errorCount > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -right-0.5 -top-0.5 size-2 rounded-full bg-destructive" })
                        ] }),
                        /* @__PURE__ */ jsx("span", { children: title }),
                        fieldCountLabel,
                        errorBadge
                      ] })
                    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
                      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
                        icon && /* @__PURE__ */ jsxs("span", { className: "relative shrink-0 text-muted-foreground", children: [
                          icon,
                          !expanded && errorCount > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -right-0.5 -top-0.5 size-2 rounded-full bg-destructive" })
                        ] }),
                        /* @__PURE__ */ jsx("span", { children: title }),
                        fieldCountLabel,
                        errorBadge
                      ] }),
                      chevronIcon
                    ] })
                  }
                )
              ]
            }
          ),
          /* @__PURE__ */ jsx(
            "div",
            {
              id: contentId,
              className: cn(
                "motion-safe:transition-all motion-safe:duration-200 overflow-hidden",
                expanded ? "max-h-[5000px] opacity-100" : "max-h-0 opacity-0"
              ),
              children: /* @__PURE__ */ jsx("div", { className: "px-4 py-3", children })
            }
          )
        ]
      }
    );
  }
);
export {
  CollapsibleGroup
};
//# sourceMappingURL=CollapsibleGroup.js.map
