"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { Phone, Mail, Users, StickyNote, ListTodo, SlidersHorizontal } from "lucide-react";
import { cn } from "@open-mercato/shared/lib/utils";
import { useT } from "@open-mercato/shared/lib/i18n/context";
import { Button } from "@open-mercato/ui/primitives/button";
import { IconButton } from "@open-mercato/ui/primitives/icon-button";
import { Popover, PopoverContent, PopoverTrigger } from "@open-mercato/ui/primitives/popover";
import { readApiResultOrThrow } from "@open-mercato/ui/backend/utils/apiCall";
const FILTER_TYPES = [
  { type: "note", icon: StickyNote },
  { type: "call", icon: Phone },
  { type: "meeting", icon: Users },
  { type: "email", icon: Mail },
  { type: "task", icon: ListTodo }
];
const CHIP_BASE = "inline-flex h-7 items-center gap-1.5 rounded-lg px-2.5 text-sm font-medium transition-colors";
const CHIP_INACTIVE = "border border-border bg-card text-muted-foreground hover:bg-accent/40";
const CHIP_ACTIVE = "border border-status-info-border bg-status-info-bg text-status-info-text";
function ActivityTimelineFilters({
  entityId,
  activeTypes,
  dateFrom,
  dateTo,
  onTypesChange,
  onDateFromChange,
  onDateToChange,
  onReset
}) {
  const t = useT();
  const hasActiveFilters = activeTypes.length > 0 || dateFrom || dateTo;
  const allActive = activeTypes.length === 0;
  const [counts, setCounts] = React.useState(null);
  React.useEffect(() => {
    if (!entityId) return;
    const controller = new AbortController();
    void (async () => {
      try {
        const payload = await readApiResultOrThrow(
          `/api/customers/interactions/counts?entityId=${encodeURIComponent(entityId)}`,
          { signal: controller.signal }
        );
        const source = payload.result ?? payload;
        setCounts({
          call: source.call ?? 0,
          email: source.email ?? 0,
          meeting: source.meeting ?? 0,
          note: source.note ?? 0,
          task: source.task ?? 0,
          total: source.total ?? 0
        });
      } catch {
        setCounts(null);
      }
    })();
    return () => controller.abort();
  }, [entityId]);
  const handleTypeToggle = React.useCallback((type) => {
    if (activeTypes.includes(type)) {
      onTypesChange(activeTypes.filter((filterType) => filterType !== type));
    } else {
      onTypesChange([...activeTypes, type]);
    }
  }, [activeTypes, onTypesChange]);
  const handleSelectAll = React.useCallback(() => {
    onTypesChange([]);
  }, [onTypesChange]);
  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 md:flex-row md:items-center md:justify-between", children: [
    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2.5", children: [
      /* @__PURE__ */ jsx(
        Button,
        {
          type: "button",
          variant: "ghost",
          size: "sm",
          onClick: handleSelectAll,
          "aria-pressed": allActive,
          className: cn(CHIP_BASE, allActive ? CHIP_ACTIVE : CHIP_INACTIVE),
          children: /* @__PURE__ */ jsx("span", { children: t("customers.timeline.filter.all", "All Activities") })
        }
      ),
      FILTER_TYPES.map(({ type, icon: Icon }) => {
        const isActive = activeTypes.includes(type);
        const count = counts?.[type];
        const hasCount = typeof count === "number" && count > 0;
        return /* @__PURE__ */ jsxs(
          Button,
          {
            type: "button",
            variant: "ghost",
            size: "sm",
            onClick: () => handleTypeToggle(type),
            "aria-pressed": isActive,
            className: cn(CHIP_BASE, isActive ? CHIP_ACTIVE : CHIP_INACTIVE),
            children: [
              /* @__PURE__ */ jsx(Icon, { className: "size-[18px] shrink-0" }),
              /* @__PURE__ */ jsxs("span", { children: [
                t(`customers.timeline.filter.${type}`, type),
                hasCount ? ` ${count}` : ""
              ] })
            ]
          },
          type
        );
      })
    ] }),
    /* @__PURE__ */ jsxs(Popover, { children: [
      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
        IconButton,
        {
          type: "button",
          variant: "outline",
          size: "sm",
          className: "size-7 rounded-md text-muted-foreground",
          "aria-label": t("customers.people.detail.activities.moreFilters", "More filters"),
          children: /* @__PURE__ */ jsx(SlidersHorizontal, { className: "size-3.5" })
        }
      ) }),
      /* @__PURE__ */ jsxs(PopoverContent, { align: "end", className: "w-72 space-y-3", children: [
        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
          /* @__PURE__ */ jsx("label", { className: "text-xs font-medium", children: t("customers.activities.filters.dateRange", "Date range") }),
          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ jsx(
              "input",
              {
                type: "date",
                value: dateFrom,
                onChange: (event) => onDateFromChange(event.target.value),
                className: "h-8 w-full rounded-md border bg-background px-2 text-xs focus:outline-none focus:ring-1 focus:ring-ring",
                "aria-label": t("customers.timeline.filter.from", "From date")
              }
            ),
            /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: "\u2014" }),
            /* @__PURE__ */ jsx(
              "input",
              {
                type: "date",
                value: dateTo,
                onChange: (event) => onDateToChange(event.target.value),
                className: "h-8 w-full rounded-md border bg-background px-2 text-xs focus:outline-none focus:ring-1 focus:ring-ring",
                "aria-label": t("customers.timeline.filter.to", "To date")
              }
            )
          ] })
        ] }),
        hasActiveFilters ? /* @__PURE__ */ jsx(
          Button,
          {
            type: "button",
            variant: "ghost",
            size: "sm",
            onClick: onReset,
            className: "h-7 w-full text-xs",
            children: t("customers.activities.filters.clearAll", "Clear filters")
          }
        ) : null
      ] })
    ] })
  ] });
}
export {
  ActivityTimelineFilters
};
//# sourceMappingURL=ActivityTimelineFilters.js.map
