import { jsxs, jsx, Fragment } from "react/jsx-runtime";
import { createContext, forwardRef, useState, useEffect, Children, isValidElement, useRef, useContext } from "react";
import { S as StClose } from "../../StClose-BQuYK7Le.js";
import { c as cn } from "../../cn-FAaWYZ6x.js";
import { Badge } from "../badge/badge.js";
import { Button } from "../button/button.js";
import { Input } from "../input/input.js";
import { Popover, PopoverTrigger, PopoverContent } from "../popover/popover.js";
import { Checkbox } from "../checkbox/checkbox.js";
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "../select/select.js";
const StFilter2 = ({ width = 24, height = 24, color, style, ...otherProps }) => /* @__PURE__ */ jsxs("svg", { id: "icon_StFilter2", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", width, height, style: {
  ...color && {
    "--stroke-color": color,
    "--stroke-fg-color": color
  },
  ...style
}, ...otherProps, children: [
  /* @__PURE__ */ jsx("line", { x1: 3.75, y1: 6.25, x2: 20.25, y2: 6.25, stroke: "var(--stroke-color, currentColor)", strokeWidth: "var(--stroke-width, 1.5)", strokeLinecap: "square" }),
  /* @__PURE__ */ jsx("line", { x1: 6.75, y1: 12.25, x2: 17.25, y2: 12.25, stroke: "var(--stroke-color, currentColor)", strokeWidth: "var(--stroke-width, 1.5)", strokeLinecap: "square" }),
  /* @__PURE__ */ jsx("line", { x1: 10.75, y1: 18.25, x2: 13.25, y2: 18.25, stroke: "var(--stroke-color, currentColor)", strokeWidth: "var(--stroke-width, 1.5)", strokeLinecap: "square" })
] });
StFilter2.displayName = "StFilter2";
const CollectionToolbarContext = createContext(void 0);
const useCollectionToolbar = () => {
  const context = useContext(CollectionToolbarContext);
  return context;
};
const CollectionToolbar = forwardRef(({ className, children, ...props }, ref) => {
  const [activeFilters, setActiveFilters] = useState(
    /* @__PURE__ */ new Map()
  );
  const [isMobile, setIsMobile] = useState(false);
  useEffect(() => {
    const checkMobile = () => {
      setIsMobile(window.matchMedia("(max-width: 767px)").matches);
    };
    checkMobile();
    window.addEventListener("resize", checkMobile);
    return () => window.removeEventListener("resize", checkMobile);
  }, []);
  const contextValue = {
    isMobile,
    activeFilters,
    setActiveFilters
  };
  const childArray = Children.toArray(children);
  const title = childArray.find(
    (child) => isValidElement(child) && child.type === CollectionTitle
  );
  const search = childArray.find(
    (child) => isValidElement(child) && child.type === CollectionSearch
  );
  const filters = childArray.find(
    (child) => isValidElement(child) && child.type === CollectionFilters
  );
  const sort = childArray.find(
    (child) => isValidElement(child) && child.type === CollectionSort
  );
  const actions = childArray.find(
    (child) => isValidElement(child) && child.type === CollectionActions
  );
  return /* @__PURE__ */ jsx(CollectionToolbarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
    "div",
    {
      ref,
      role: "toolbar",
      className: cn(
        // Mobile: Stack vertically
        "flex flex-col gap-4",
        // Desktop: Intelligent horizontal layout
        "md:flex-row md:flex-wrap md:items-center md:justify-between",
        className
      ),
      ...props,
      children: isMobile ? (
        // Mobile layout: Title and actions on top, search and filters on same row
        /* @__PURE__ */ jsxs(Fragment, { children: [
          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full gap-2", children: [
            title && /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: title }),
            actions && /* @__PURE__ */ jsx("div", { className: "flex gap-2 flex-shrink-0", children: actions })
          ] }),
          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-full", children: [
            search && /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: search }),
            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
              filters,
              sort
            ] })
          ] })
        ] })
      ) : (
        // Desktop layout: Intelligent horizontal arrangement
        /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full gap-4", children: [
          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: title }),
          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
            filters,
            sort,
            search,
            actions
          ] })
        ] }) })
      )
    }
  ) });
});
CollectionToolbar.displayName = "CollectionToolbar";
const CollectionTitle = forwardRef(
  ({ count, className, children, ...props }, ref) => {
    return /* @__PURE__ */ jsxs(
      "div",
      {
        ref,
        className: cn("flex items-center gap-2", className),
        ...props,
        children: [
          /* @__PURE__ */ jsx("h2", { className: "headline-md line-clamp-1", children }),
          count !== void 0 && /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: count })
        ]
      }
    );
  }
);
CollectionTitle.displayName = "CollectionTitle";
const CollectionSearch = forwardRef(
  ({
    onSearch,
    debounceMs = 300,
    className,
    placeholder = "Search...",
    ...props
  }, ref) => {
    const [value, setValue] = useState("");
    const timeoutRef = useRef(void 0);
    useEffect(() => {
      if (onSearch) {
        clearTimeout(timeoutRef.current);
        timeoutRef.current = setTimeout(() => {
          onSearch(value);
        }, debounceMs);
      }
      return () => clearTimeout(timeoutRef.current);
    }, [value, onSearch, debounceMs]);
    const context = useCollectionToolbar();
    const isMobile = context?.isMobile ?? false;
    return /* @__PURE__ */ jsx(
      "div",
      {
        className: cn(
          "relative",
          isMobile ? "w-full" : className?.includes("w-") ? "" : "w-[200px]"
        ),
        children: /* @__PURE__ */ jsx(
          Input,
          {
            ref,
            type: "search",
            role: "searchbox",
            "aria-label": "Search",
            value,
            onChange: (e) => setValue(e.target.value),
            placeholder,
            className: cn(
              "h-8 pl-8 pr-2 w-full",
              className?.includes("w-") ? className : ""
            ),
            ...props
          }
        )
      }
    );
  }
);
CollectionSearch.displayName = "CollectionSearch";
const CollectionFilters = forwardRef(({ activeCount, onClearAll, className, children, ...props }, ref) => {
  const context = useCollectionToolbar();
  const { isMobile } = context || { isMobile: false };
  let childFilterCount = 0;
  Children.forEach(children, (child) => {
    if (isValidElement(child) && child.type === CollectionFilter) {
      const childProps = child.props;
      const value = childProps.value;
      if (Array.isArray(value)) {
        childFilterCount += value.length;
      }
    }
  });
  const totalFilterCount = activeCount ?? childFilterCount;
  if (isMobile) {
    return /* @__PURE__ */ jsxs(Fragment, { children: [
      /* @__PURE__ */ jsx(CollectionToolbarAnnouncer, { filterCount: totalFilterCount }),
      /* @__PURE__ */ jsxs(Popover, { children: [
        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
          Button,
          {
            variant: "ghost",
            size: "sm",
            "aria-expanded": "false",
            className: "px-3",
            leftIcon: totalFilterCount > 0 ? /* @__PURE__ */ jsx(Badge, { className: "h-4 min-w-[16px] flex items-center justify-center p-0", children: totalFilterCount }) : /* @__PURE__ */ jsx(StFilter2, { className: "h-4 w-4" }),
            children: "Filter"
          }
        ) }),
        /* @__PURE__ */ jsx(
          PopoverContent,
          {
            className: "w-80 max-h-[400px] overflow-y-auto",
            align: "start",
            children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
              children,
              totalFilterCount > 0 && onClearAll && /* @__PURE__ */ jsx(
                Button,
                {
                  variant: "ghost",
                  onClick: onClearAll,
                  className: "w-full",
                  leftIcon: /* @__PURE__ */ jsx(StClose, { className: "h-4 w-4" }),
                  children: "Clear"
                }
              )
            ] })
          }
        )
      ] })
    ] });
  }
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(CollectionToolbarAnnouncer, { filterCount: totalFilterCount }),
    /* @__PURE__ */ jsxs(
      "div",
      {
        ref,
        className: cn("flex items-center gap-2", className),
        ...props,
        children: [
          totalFilterCount > 0 && onClearAll && /* @__PURE__ */ jsx(
            Button,
            {
              variant: "ghost",
              size: "sm",
              onClick: onClearAll,
              leftIcon: /* @__PURE__ */ jsx(StClose, { className: "h-4 w-4" }),
              children: "Clear"
            }
          ),
          children
        ]
      }
    )
  ] });
});
CollectionFilters.displayName = "CollectionFilters";
const CollectionFilter = forwardRef(({ label, options, value, onChange, multiple = true }, ref) => {
  const context = useCollectionToolbar();
  const isMobile = context?.isMobile ?? false;
  const [open, setOpen] = useState(false);
  const handleSelect = (optionValue) => {
    if (multiple) {
      const newValue = value.includes(optionValue) ? value.filter((v) => v !== optionValue) : [...value, optionValue];
      onChange(newValue);
    } else {
      onChange([optionValue]);
      setOpen(false);
    }
  };
  if (isMobile) {
    return /* @__PURE__ */ jsxs("div", { ref, className: "space-y-3", children: [
      /* @__PURE__ */ jsx("h3", { className: "font-medium", children: label }),
      options.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "No options available" }) : /* @__PURE__ */ jsx("div", { role: "listbox", children: options.map((option) => /* @__PURE__ */ jsxs(
        "label",
        {
          className: "flex items-center gap-2 cursor-pointer hover:bg-muted/50 p-2 rounded-md",
          children: [
            /* @__PURE__ */ jsx(
              Checkbox,
              {
                checked: value.includes(option.value),
                onCheckedChange: () => handleSelect(option.value)
              }
            ),
            /* @__PURE__ */ jsx("span", { className: "flex-1", children: option.label })
          ]
        },
        option.value
      )) })
    ] });
  }
  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
      Button,
      {
        variant: "ghost",
        size: "sm",
        role: "button",
        "aria-expanded": open,
        className: "whitespace-nowrap h-8",
        leftIcon: value.length > 0 ? /* @__PURE__ */ jsx(Badge, { className: "h-4 min-w-[16px] flex items-center justify-center p-0", children: value.length }) : /* @__PURE__ */ jsx(StFilter2, { className: "h-4 w-4" }),
        children: label
      }
    ) }),
    /* @__PURE__ */ jsx(PopoverContent, { className: "w-56 p-0", align: "start", children: options.length === 0 ? /* @__PURE__ */ jsx("p", { className: "p-3 text-muted-foreground", children: "No options available" }) : /* @__PURE__ */ jsx("div", { className: "max-h-[300px] overflow-y-auto", role: "listbox", children: options.map((option) => /* @__PURE__ */ jsxs(
      "div",
      {
        onClick: () => handleSelect(option.value),
        className: cn(
          "flex w-full items-center gap-2 px-3 py-2 hover:bg-muted cursor-pointer",
          value.includes(option.value) && "bg-accent/10"
        ),
        role: "option",
        "aria-selected": value.includes(option.value),
        children: [
          multiple && /* @__PURE__ */ jsx(
            Checkbox,
            {
              checked: value.includes(option.value),
              className: "pointer-events-none",
              tabIndex: -1
            }
          ),
          /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: option.label })
        ]
      },
      option.value
    )) }) })
  ] });
});
CollectionFilter.displayName = "CollectionFilter";
const CollectionSort = forwardRef(
  ({ options, value, onChange }, ref) => {
    return /* @__PURE__ */ jsx("div", { ref, children: /* @__PURE__ */ jsxs(Select, { value, onValueChange: onChange, children: [
      /* @__PURE__ */ jsx(SelectTrigger, { className: "whitespace-nowrap h-8", size: "sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Sort" }) }),
      /* @__PURE__ */ jsx(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
    ] }) });
  }
);
CollectionSort.displayName = "CollectionSort";
const CollectionActions = forwardRef(({ className, children, ...props }, ref) => {
  return /* @__PURE__ */ jsx(
    "div",
    {
      ref,
      className: cn("flex items-center gap-2", className),
      ...props,
      children
    }
  );
});
CollectionActions.displayName = "CollectionActions";
const CollectionAction = forwardRef(
  ({
    priority = "secondary",
    className,
    children,
    leftIcon,
    rightIcon,
    ...props
  }, ref) => {
    return /* @__PURE__ */ jsx(
      Button,
      {
        ref,
        variant: priority === "primary" ? "default" : "secondary",
        size: "sm",
        "data-priority": priority,
        className,
        leftIcon,
        rightIcon,
        ...props,
        children
      }
    );
  }
);
CollectionAction.displayName = "CollectionAction";
const CollectionToolbarAnnouncer = ({
  filterCount
}) => {
  const [announcement, setAnnouncement] = useState("");
  useEffect(() => {
    if (filterCount > 0) {
      setAnnouncement(
        `${filterCount} filter${filterCount === 1 ? "" : "s"} applied`
      );
    } else {
      setAnnouncement("No filters applied");
    }
  }, [filterCount]);
  return /* @__PURE__ */ jsx(
    "div",
    {
      role: "status",
      "aria-live": "polite",
      "aria-atomic": "true",
      className: "sr-only",
      children: announcement
    }
  );
};
export {
  CollectionAction,
  CollectionActions,
  CollectionFilter,
  CollectionFilters,
  CollectionSearch,
  CollectionSort,
  CollectionTitle,
  CollectionToolbar,
  CollectionToolbarAnnouncer
};
