"use client";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { Bell } from "lucide-react";
import { usePathname, useSearchParams } from "next/navigation";
import { IconButton } from "../../primitives/icon-button.js";
import { cn } from "@open-mercato/shared/lib/utils";
import { useNotifications } from "./useNotifications.js";
import { NotificationPanel } from "./NotificationPanel.js";
import { NotificationCountBadge } from "./NotificationCountBadge.js";
function NotificationBell({ className, t, customRenderers }) {
  const [panelOpen, setPanelOpen] = React.useState(false);
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const {
    unreadCount,
    hasNew,
    notifications,
    markAsRead,
    executeAction,
    dismiss,
    dismissUndo,
    undoDismiss,
    markAllRead
  } = useNotifications();
  const prevCountRef = React.useRef(unreadCount);
  const routeKey = React.useMemo(() => {
    const query = searchParams.toString();
    return query ? `${pathname}?${query}` : pathname;
  }, [pathname, searchParams]);
  const previousRouteKeyRef = React.useRef(routeKey);
  const [pulse, setPulse] = React.useState(false);
  React.useEffect(() => {
    if (hasNew && unreadCount > prevCountRef.current) {
      setPulse(true);
      const timer = setTimeout(() => setPulse(false), 1e3);
      return () => clearTimeout(timer);
    }
    prevCountRef.current = unreadCount;
  }, [unreadCount, hasNew]);
  React.useEffect(() => {
    if (panelOpen && routeKey !== previousRouteKeyRef.current) {
      setPanelOpen(false);
    }
    previousRouteKeyRef.current = routeKey;
  }, [panelOpen, routeKey]);
  const ariaLabel = unreadCount > 0 ? t("notifications.badge.unread", "{count} unread notifications", { count: unreadCount }) : t("notifications.title", "Notifications");
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsxs(
      IconButton,
      {
        variant: "ghost",
        size: "sm",
        type: "button",
        className: cn("relative", className),
        onClick: () => setPanelOpen(true),
        "aria-label": ariaLabel,
        children: [
          /* @__PURE__ */ jsx(Bell, { className: cn("h-5 w-5", pulse && "animate-pulse") }),
          /* @__PURE__ */ jsx(NotificationCountBadge, { count: unreadCount })
        ]
      }
    ),
    /* @__PURE__ */ jsx(
      NotificationPanel,
      {
        open: panelOpen,
        onOpenChange: setPanelOpen,
        notifications,
        unreadCount,
        onMarkAsRead: markAsRead,
        onExecuteAction: executeAction,
        onDismiss: dismiss,
        dismissUndo,
        onUndoDismiss: undoDismiss,
        onMarkAllRead: markAllRead,
        t,
        customRenderers
      }
    )
  ] });
}
export {
  NotificationBell
};
//# sourceMappingURL=NotificationBell.js.map
