"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import Link from "next/link";
import { ArrowDown, ArrowUp, Bell, Loader2, RotateCcw, Settings2, X } from "lucide-react";
import { Button } from "../../primitives/button.js";
import { IconButton } from "../../primitives/icon-button.js";
import { Sheet, SheetContent, SheetTitle } from "../../primitives/sheet.js";
import { NotificationItem } from "./NotificationItem.js";
function NotificationPanel({
  open,
  onOpenChange,
  notifications,
  unreadCount,
  onMarkAsRead,
  onExecuteAction,
  onDismiss,
  dismissUndo,
  onUndoDismiss,
  onMarkAllRead,
  t,
  customRenderers
}) {
  const [filter, setFilter] = React.useState("all");
  const [markingAllRead, setMarkingAllRead] = React.useState(false);
  const filteredNotifications = React.useMemo(() => {
    switch (filter) {
      case "unread":
        return notifications.filter((n) => n.status === "unread");
      case "action":
        return notifications.filter(
          (n) => n.actions && n.actions.length > 0 && n.status !== "actioned"
        );
      default:
        return notifications;
    }
  }, [notifications, filter]);
  const handleMarkAllRead = async () => {
    setMarkingAllRead(true);
    try {
      await onMarkAllRead();
    } finally {
      setMarkingAllRead(false);
    }
  };
  React.useEffect(() => {
    if (!open || typeof document === "undefined") return;
    const previous = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = previous;
    };
  }, [open]);
  return /* @__PURE__ */ jsx(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
    SheetContent,
    {
      side: "right",
      className: "gap-0 p-0",
      hideClose: true,
      "aria-label": t("notifications.title", "Notifications"),
      children: [
        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 border-b px-5 py-4", children: [
          /* @__PURE__ */ jsx(SheetTitle, { className: "text-base font-medium leading-6 tracking-tight text-foreground", children: t("notifications.title", "Notifications") }),
          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
            unreadCount > 0 ? /* @__PURE__ */ jsxs(
              "button",
              {
                type: "button",
                onClick: handleMarkAllRead,
                disabled: markingAllRead,
                className: "inline-flex items-center gap-1 rounded-md px-1 text-sm font-medium leading-5 text-accent-indigo transition-colors hover:text-accent-indigo/80 disabled:opacity-50",
                children: [
                  markingAllRead ? /* @__PURE__ */ jsx(Loader2, { className: "size-3.5 animate-spin" }) : null,
                  t("notifications.markAllRead", "Mark all read")
                ]
              }
            ) : null,
            /* @__PURE__ */ jsx(
              IconButton,
              {
                type: "button",
                variant: "ghost",
                size: "sm",
                onClick: () => onOpenChange(false),
                "aria-label": t("notifications.close", "Close notifications"),
                children: /* @__PURE__ */ jsx(X, { className: "size-4" })
              }
            )
          ] })
        ] }),
        /* @__PURE__ */ jsx("div", { role: "tablist", className: "flex items-center gap-5 border-b px-5 py-3.5", children: ["all", "unread", "action"].map((value) => {
          const isActive = filter === value;
          const label = value === "all" ? t("notifications.filters.all", "All") : value === "unread" ? t("notifications.filters.unread", "Unread") : t("notifications.filters.actionRequired", "Action Required");
          return /* @__PURE__ */ jsxs(
            "button",
            {
              type: "button",
              role: "tab",
              "aria-selected": isActive,
              onClick: () => setFilter(value),
              className: "relative inline-flex items-center gap-1.5 pb-2 text-sm font-medium leading-5 tracking-tight transition-colors focus:outline-none focus-visible:text-foreground data-[active=true]:text-foreground data-[active=false]:text-muted-foreground hover:text-foreground",
              "data-active": isActive,
              children: [
                /* @__PURE__ */ jsx("span", { children: label }),
                value === "unread" && unreadCount > 0 ? /* @__PURE__ */ jsx("span", { className: "inline-flex min-w-4 items-center justify-center rounded-full bg-accent-indigo px-1 text-overline font-medium text-accent-indigo-foreground", children: unreadCount > 99 ? "99+" : unreadCount }) : null,
                isActive ? /* @__PURE__ */ jsx(
                  "span",
                  {
                    className: "absolute bottom-[-14px] left-0 right-0 h-0.5 bg-foreground",
                    "aria-hidden": "true"
                  }
                ) : null
              ]
            },
            value
          );
        }) }),
        dismissUndo && onUndoDismiss && /* @__PURE__ */ jsx("div", { className: "border-b bg-muted/50 px-4 py-2 text-sm", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
          /* @__PURE__ */ jsx("span", { children: t("notifications.toast.dismissed", "Notification dismissed") }),
          /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", onClick: () => onUndoDismiss(), children: [
            /* @__PURE__ */ jsx(RotateCcw, { className: "mr-1 h-3 w-3" }),
            t("notifications.actions.undo", "Undo")
          ] })
        ] }) }),
        /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto overflow-x-hidden overscroll-contain", children: filteredNotifications.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-2 py-16 text-muted-foreground", children: [
          /* @__PURE__ */ jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-muted/50", children: /* @__PURE__ */ jsx(Bell, { className: "size-5", "aria-hidden": "true" }) }),
          /* @__PURE__ */ jsx("p", { className: "text-sm", children: t("notifications.empty", "No notifications") })
        ] }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1 p-2", children: filteredNotifications.map((notification, idx) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
          idx > 0 ? /* @__PURE__ */ jsx("div", { className: "my-px h-px bg-border", "aria-hidden": "true" }) : null,
          /* @__PURE__ */ jsx(
            NotificationItem,
            {
              notification,
              onMarkAsRead: () => onMarkAsRead(notification.id),
              onExecuteAction: (actionId) => onExecuteAction(notification.id, actionId),
              onDismiss: () => onDismiss(notification.id),
              t,
              customRenderer: customRenderers?.[notification.type]
            }
          )
        ] }, notification.id)) }) }),
        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 border-t px-5 py-3.5 text-xs leading-4 text-muted-foreground", children: [
          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ jsx("span", { children: t("notifications.footer.useHint", "Use") }),
            /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded border bg-muted/50 px-1 py-0.5", children: /* @__PURE__ */ jsx(ArrowUp, { className: "size-3", "aria-hidden": "true" }) }),
            /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded border bg-muted/50 px-1 py-0.5", children: /* @__PURE__ */ jsx(ArrowDown, { className: "size-3", "aria-hidden": "true" }) }),
            /* @__PURE__ */ jsx("span", { children: t("notifications.footer.toNavigate", "to navigate") })
          ] }),
          /* @__PURE__ */ jsxs(
            Link,
            {
              href: "/backend/config/notifications",
              onClick: () => onOpenChange(false),
              className: "inline-flex items-center gap-1.5 font-medium text-muted-foreground transition-colors hover:text-foreground",
              children: [
                /* @__PURE__ */ jsx(Settings2, { className: "size-3.5", "aria-hidden": "true" }),
                t("notifications.footer.manage", "Manage notifications")
              ]
            }
          )
        ] })
      ]
    }
  ) });
}
export {
  NotificationPanel
};
//# sourceMappingURL=NotificationPanel.js.map
