"use client";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { Button } from "../../primitives/button.js";
import { IconButton } from "../../primitives/icon-button.js";
function XIcon({ className }) {
  return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
    /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
    /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
  ] });
}
function CheckIcon({ className }) {
  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", className, children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) });
}
const SEVERITY_STYLES = {
  info: "bg-status-info-bg text-status-info-text",
  success: "bg-status-success-bg text-status-success-text",
  warning: "bg-status-warning-bg text-status-warning-text",
  error: "bg-status-error-bg text-status-error-text"
};
function PortalNotificationPanel({
  open,
  onClose,
  notifications,
  unreadCount,
  onMarkAsRead,
  onDismiss,
  onMarkAllRead,
  t
}) {
  const [tab, setTab] = React.useState("all");
  const panelRef = React.useRef(null);
  React.useEffect(() => {
    if (!open) return;
    const handler = (e) => {
      if (e.key === "Escape") onClose();
    };
    window.addEventListener("keydown", handler);
    return () => window.removeEventListener("keydown", handler);
  }, [open, onClose]);
  if (!open) return null;
  const filtered = tab === "unread" ? notifications.filter((n) => n.status === "unread") : notifications;
  const formatTime = (iso) => {
    const diff = Date.now() - new Date(iso).getTime();
    const mins = Math.floor(diff / 6e4);
    if (mins < 1) return t("portal.notifications.justNow", "Just now");
    if (mins < 60) return t("portal.notifications.minutesAgo", "{m}m ago", { m: mins });
    const hours = Math.floor(mins / 60);
    if (hours < 24) return t("portal.notifications.hoursAgo", "{h}h ago", { h: hours });
    const days = Math.floor(hours / 24);
    return t("portal.notifications.daysAgo", "{d}d ago", { d: days });
  };
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-modal bg-black/20 backdrop-blur-sm", onClick: onClose }),
    /* @__PURE__ */ jsxs(
      "div",
      {
        ref: panelRef,
        className: "fixed right-0 top-0 z-modal flex h-full w-full max-w-md flex-col border-l bg-background shadow-2xl",
        children: [
          /* @__PURE__ */ jsxs("div", { className: "flex h-16 items-center justify-between border-b px-5", children: [
            /* @__PURE__ */ jsxs("div", { children: [
              /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold", children: t("portal.notifications.title", "Notifications") }),
              unreadCount > 0 ? /* @__PURE__ */ jsx("p", { className: "text-overline text-muted-foreground", children: t("portal.notifications.unreadSummary", "{count} unread", { count: unreadCount }) }) : null
            ] }),
            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
              unreadCount > 0 ? /* @__PURE__ */ jsxs(
                Button,
                {
                  type: "button",
                  variant: "ghost",
                  size: "sm",
                  className: "text-xs text-muted-foreground",
                  onClick: () => onMarkAllRead(),
                  children: [
                    /* @__PURE__ */ jsx(CheckIcon, { className: "mr-1 size-3.5" }),
                    t("portal.notifications.markAllRead", "Mark all read")
                  ]
                }
              ) : null,
              /* @__PURE__ */ jsx(IconButton, { variant: "ghost", size: "sm", type: "button", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx(XIcon, { className: "size-4" }) })
            ] })
          ] }),
          /* @__PURE__ */ jsx("div", { className: "flex gap-0 border-b px-5", children: ["all", "unread"].map((tabId) => /* @__PURE__ */ jsxs(
            "button",
            {
              type: "button",
              onClick: () => setTab(tabId),
              className: `border-b-2 px-3 py-2.5 text-sm font-medium transition-colors ${tab === tabId ? "border-foreground text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"}`,
              children: [
                tabId === "all" ? t("portal.notifications.tab.all", "All") : t("portal.notifications.tab.unread", "Unread"),
                tabId === "unread" && unreadCount > 0 ? /* @__PURE__ */ jsx("span", { className: "ml-1.5 inline-flex size-5 items-center justify-center rounded-full bg-foreground text-overline font-bold text-background", children: unreadCount }) : null
              ]
            },
            tabId
          )) }),
          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center gap-2 py-16 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-muted-foreground", children: tab === "unread" ? t("portal.notifications.emptyUnread", "All caught up!") : t("portal.notifications.empty", "No notifications yet") }) }) : filtered.map((notification) => /* @__PURE__ */ jsxs(
            "div",
            {
              className: `flex gap-3 border-b px-5 py-4 transition-colors ${notification.status === "unread" ? "bg-muted/30" : ""}`,
              children: [
                /* @__PURE__ */ jsx("div", { className: `mt-1 flex size-8 shrink-0 items-center justify-center rounded-lg text-overline font-bold ${SEVERITY_STYLES[notification.severity] ?? SEVERITY_STYLES.info}`, children: notification.severity.charAt(0).toUpperCase() }),
                /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
                  /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
                    /* @__PURE__ */ jsx("p", { className: "text-sm font-medium leading-snug", children: notification.title }),
                    /* @__PURE__ */ jsx("span", { className: "shrink-0 text-overline text-muted-foreground/60", children: formatTime(notification.createdAt) })
                  ] }),
                  notification.body ? /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs leading-relaxed text-muted-foreground", children: notification.body }) : null,
                  /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center gap-2", children: [
                    notification.status === "unread" ? /* @__PURE__ */ jsx(
                      Button,
                      {
                        type: "button",
                        variant: "ghost",
                        size: "sm",
                        className: "h-auto px-2 py-1 text-overline text-muted-foreground",
                        onClick: () => onMarkAsRead(notification.id),
                        children: t("portal.notifications.markRead", "Mark read")
                      }
                    ) : null,
                    /* @__PURE__ */ jsx(
                      Button,
                      {
                        type: "button",
                        variant: "ghost",
                        size: "sm",
                        className: "h-auto px-2 py-1 text-overline text-muted-foreground",
                        onClick: () => onDismiss(notification.id),
                        children: t("portal.notifications.dismiss", "Dismiss")
                      }
                    ),
                    notification.linkHref ? /* @__PURE__ */ jsx(
                      "a",
                      {
                        href: notification.linkHref,
                        className: "ml-auto text-overline font-medium text-foreground underline underline-offset-2 hover:opacity-80",
                        onClick: () => {
                          if (notification.status === "unread") onMarkAsRead(notification.id);
                          onClose();
                        },
                        children: t("portal.notifications.view", "View")
                      }
                    ) : null
                  ] })
                ] })
              ]
            },
            notification.id
          )) })
        ]
      }
    )
  ] });
}
export {
  PortalNotificationPanel
};
//# sourceMappingURL=PortalNotificationPanel.js.map
