"use client";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { X, Bell, CheckCheck, Loader2, RotateCcw } from "lucide-react";
import { Button } from "../../primitives/button.js";
import { IconButton } from "../../primitives/icon-button.js";
import { Tabs, TabsList, TabsTrigger } from "../../primitives/tabs.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) return;
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = prevOverflow;
    };
  }, [open]);
  React.useEffect(() => {
    const handleKeyDown = (event) => {
      if (event.key === "Escape" && open) {
        onOpenChange(false);
      }
    };
    document.addEventListener("keydown", handleKeyDown);
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, [open, onOpenChange]);
  if (!open) return null;
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(
      "div",
      {
        className: "fixed inset-0 z-40 bg-black/20",
        onClick: () => onOpenChange(false),
        "aria-hidden": "true"
      }
    ),
    /* @__PURE__ */ jsx(
      "div",
      {
        className: "fixed right-0 top-0 z-50 h-full w-full max-w-md border-l bg-background shadow-lg",
        role: "dialog",
        "aria-modal": "true",
        "aria-label": t("notifications.title", "Notifications"),
        children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b px-4 py-3", children: [
            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
              /* @__PURE__ */ jsx(Bell, { className: "h-5 w-5" }),
              /* @__PURE__ */ jsx("h2", { className: "font-semibold", children: t("notifications.title", "Notifications") }),
              unreadCount > 0 && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-destructive px-2 py-0.5 text-xs text-destructive-foreground", children: unreadCount })
            ] }),
            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
              unreadCount > 0 && /* @__PURE__ */ jsxs(
                Button,
                {
                  variant: "ghost",
                  size: "sm",
                  onClick: handleMarkAllRead,
                  disabled: markingAllRead,
                  children: [
                    markingAllRead ? /* @__PURE__ */ jsx(Loader2, { className: "mr-1 h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(CheckCheck, { className: "mr-1 h-4 w-4" }),
                    t("notifications.markAllRead", "Mark all read")
                  ]
                }
              ),
              /* @__PURE__ */ jsx(IconButton, { variant: "ghost", size: "lg", onClick: () => onOpenChange(false), children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" }) })
            ] })
          ] }),
          /* @__PURE__ */ jsx(
            Tabs,
            {
              value: filter,
              onValueChange: (v) => setFilter(v),
              className: "border-b",
              children: /* @__PURE__ */ jsxs(TabsList, { className: "w-full justify-start rounded-none border-0 bg-transparent px-4", children: [
                /* @__PURE__ */ jsx(TabsTrigger, { value: "all", children: t("notifications.filters.all", "All") }),
                /* @__PURE__ */ jsx(TabsTrigger, { value: "unread", children: t("notifications.filters.unread", "Unread") }),
                /* @__PURE__ */ jsx(TabsTrigger, { value: "action", children: t("notifications.filters.actionRequired", "Action Required") })
              ] })
            }
          ),
          dismissUndo && onUndoDismiss && /* @__PURE__ */ jsx("div", { className: "border-b bg-muted/40 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 overscroll-contain", children: filteredNotifications.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-muted-foreground", children: [
            /* @__PURE__ */ jsx(Bell, { className: "mb-2 h-8 w-8 opacity-50" }),
            /* @__PURE__ */ jsx("p", { children: t("notifications.empty", "No notifications") })
          ] }) : /* @__PURE__ */ jsx("div", { className: "divide-y", children: filteredNotifications.map((notification) => /* @__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
          )) }) })
        ] })
      }
    )
  ] });
}
export {
  NotificationPanel
};
//# sourceMappingURL=NotificationPanel.js.map
