"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { Button } from "@open-mercato/ui/primitives/button";
import { Input } from "@open-mercato/ui/primitives/input";
import { Popover, PopoverContent, PopoverTrigger } from "@open-mercato/ui/primitives/popover";
import { Check, ChevronDown, Download, Search } from "lucide-react";
import { useT } from "@open-mercato/shared/lib/i18n/context";
function FilterPopover({ allLabel, options, values, triggerLabel, onChange }) {
  const t = useT();
  const [search, setSearch] = React.useState("");
  const filteredOptions = React.useMemo(() => {
    const normalizedSearch = search.trim().toLowerCase();
    if (!normalizedSearch) return options;
    return options.filter((option) => option.label.toLowerCase().includes(normalizedSearch));
  }, [options, search]);
  const valuesSet = React.useMemo(() => new Set(values), [values]);
  const toggleValue = React.useCallback((value) => {
    if (valuesSet.has(value)) {
      onChange(values.filter((entry) => entry !== value));
      return;
    }
    onChange([...values, value]);
  }, [onChange, values, valuesSet]);
  return /* @__PURE__ */ jsxs(Popover, { children: [
    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "h-8 justify-between gap-2 rounded-lg px-3 text-xs", children: [
      /* @__PURE__ */ jsx("span", { className: "truncate", children: triggerLabel }),
      /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5 text-muted-foreground" })
    ] }) }),
    /* @__PURE__ */ jsxs(PopoverContent, { align: "start", className: "w-72 space-y-3 p-3", children: [
      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
        /* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" }),
        /* @__PURE__ */ jsx(
          Input,
          {
            value: search,
            onChange: (event) => setSearch(event.target.value),
            placeholder: t("customers.changelog.filters.search", "Search"),
            className: "h-8 pl-8 text-xs"
          }
        )
      ] }),
      /* @__PURE__ */ jsxs("div", { className: "max-h-64 space-y-1 overflow-y-auto", children: [
        /* @__PURE__ */ jsxs(
          Button,
          {
            type: "button",
            variant: "ghost",
            size: "sm",
            onClick: () => onChange([]),
            className: "h-auto w-full justify-start px-2 py-1.5 text-xs",
            children: [
              values.length === 0 ? /* @__PURE__ */ jsx(Check, { className: "mr-2 size-3.5 text-foreground" }) : /* @__PURE__ */ jsx("span", { className: "mr-5" }),
              allLabel
            ]
          }
        ),
        filteredOptions.map((option) => /* @__PURE__ */ jsxs(
          Button,
          {
            type: "button",
            variant: "ghost",
            size: "sm",
            onClick: () => toggleValue(option.value),
            className: "h-auto w-full justify-start px-2 py-1.5 text-xs",
            children: [
              valuesSet.has(option.value) ? /* @__PURE__ */ jsx(Check, { className: "mr-2 size-3.5 text-foreground" }) : /* @__PURE__ */ jsx("span", { className: "mr-5" }),
              /* @__PURE__ */ jsx("span", { className: "truncate", children: option.label })
            ]
          },
          option.value
        )),
        filteredOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-2 py-3 text-xs text-muted-foreground", children: t("customers.changelog.filters.empty", "No matching options") }) : null
      ] })
    ] })
  ] });
}
function ChangelogFilters({
  dateRange,
  fieldNames,
  actorUserIds,
  actionTypes,
  fieldOptions,
  userOptions,
  actionOptions,
  exportDisabled = false,
  onDateRangeChange,
  onFieldNamesChange,
  onActorUserIdsChange,
  onActionTypesChange,
  onExport
}) {
  const t = useT();
  const describeSelection = React.useCallback((allLabel, options, values) => {
    if (values.length === 0) return allLabel;
    if (values.length === 1) return options.find((option) => option.value === values[0])?.label ?? allLabel;
    return t("customers.changelog.filters.selectedCount", "{{count}} selected", { count: values.length });
  }, [t]);
  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 rounded-xl border bg-card px-4 py-3 lg:flex-row lg:items-center lg:justify-between", children: [
    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
      /* @__PURE__ */ jsxs("span", { className: "text-overline font-semibold uppercase tracking-[0.12em] text-muted-foreground", children: [
        t("customers.changelog.filter", "Filter"),
        ":"
      ] }),
      /* @__PURE__ */ jsx(
        FilterPopover,
        {
          allLabel: t("customers.changelog.allFields", "All fields"),
          options: fieldOptions,
          values: fieldNames,
          triggerLabel: describeSelection(t("customers.changelog.allFields", "All fields"), fieldOptions, fieldNames),
          onChange: onFieldNamesChange
        }
      ),
      /* @__PURE__ */ jsx(
        FilterPopover,
        {
          allLabel: t("customers.changelog.allUsers", "All users"),
          options: userOptions,
          values: actorUserIds,
          triggerLabel: describeSelection(t("customers.changelog.allUsers", "All users"), userOptions, actorUserIds),
          onChange: onActorUserIdsChange
        }
      ),
      /* @__PURE__ */ jsx(
        FilterPopover,
        {
          allLabel: t("customers.changelog.allActions", "All actions"),
          options: actionOptions,
          values: actionTypes,
          triggerLabel: describeSelection(t("customers.changelog.allActions", "All actions"), actionOptions, actionTypes),
          onChange: onActionTypesChange
        }
      )
    ] }),
    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
        /* @__PURE__ */ jsxs(
          "select",
          {
            value: dateRange,
            onChange: (event) => onDateRangeChange(event.target.value),
            className: "h-8 min-w-32 appearance-none rounded-lg border bg-background pl-3 pr-8 text-xs text-foreground outline-none ring-offset-background focus:ring-2 focus:ring-ring",
            children: [
              /* @__PURE__ */ jsx("option", { value: "7d", children: t("customers.changelog.last7days", "Last 7 days") }),
              /* @__PURE__ */ jsx("option", { value: "30d", children: t("customers.changelog.last30days", "Last 30 days") }),
              /* @__PURE__ */ jsx("option", { value: "90d", children: t("customers.changelog.last90days", "Last 90 days") })
            ]
          }
        ),
        /* @__PURE__ */ jsx(ChevronDown, { className: "pointer-events-none absolute right-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" })
      ] }),
      /* @__PURE__ */ jsxs(
        Button,
        {
          type: "button",
          variant: "outline",
          size: "sm",
          onClick: onExport,
          disabled: exportDisabled,
          className: "h-8 rounded-lg px-3 text-xs",
          children: [
            /* @__PURE__ */ jsx(Download, { className: "mr-1.5 size-3.5" }),
            t("customers.changelog.exportCsv", "Export CSV")
          ]
        }
      )
    ] })
  ] });
}
var ChangelogFilters_default = ChangelogFilters;
export {
  ChangelogFilters,
  ChangelogFilters_default as default
};
//# sourceMappingURL=ChangelogFilters.js.map
