import { jsxs as r, jsx as t } from "react/jsx-runtime";
import { useState as s, useCallback as W, useEffect as q } from "react";
import { useNavigate as Z } from "react-router-dom";
import { useTranslation as z } from "react-i18next";
import { Filter as G, CheckCheck as H, Trash2 as S, Loader2 as J, Check as K, Bell as D, Settings as Q } from "lucide-react";
import { a as X, n as d, P as _, c as ee, g as te } from "./index-CeEMms9z.js";
import { C as ae } from "./ConfirmModal-Ve-8m7xp.js";
function me() {
  const m = Z(), { t: n } = z("common"), { currentTenant: P, userTenants: F, hasMultipleTenants: N } = X(), [u, b] = s(!0), [o, c] = s([]), [I, h] = s(!1), [M, y] = s(!1), [p, f] = s(1), [C, k] = s(1), [g, x] = s(0), [l, $] = s(void 0), [v, j] = s(void 0), A = W(async () => {
    try {
      b(!0);
      const e = await d.getAll(p, 20, l, v);
      c(e.items), k(e.totalPages), x(e.totalCount);
    } catch (e) {
      console.error("Failed to load notifications:", e);
    } finally {
      b(!1);
    }
  }, [p, l, v]);
  q(() => {
    A();
  }, [A]);
  const w = async (e) => {
    try {
      await d.markAsRead(e), c(
        (a) => a.map((i) => i.id === e ? { ...i, isRead: !0, readAt: (/* @__PURE__ */ new Date()).toISOString() } : i)
      );
    } catch (a) {
      console.error("Failed to mark as read:", a);
    }
  }, B = async () => {
    try {
      await d.markAllAsRead(), c((e) => e.map((a) => ({ ...a, isRead: !0, readAt: (/* @__PURE__ */ new Date()).toISOString() })));
    } catch (e) {
      console.error("Failed to mark all as read:", e);
    }
  }, O = async (e) => {
    try {
      await d.delete(e), c((a) => a.filter((i) => i.id !== e)), x((a) => a - 1);
    } catch (a) {
      console.error("Failed to delete notification:", a);
    }
  }, E = async () => {
    try {
      y(!0), await d.deleteAll(), c([]), x(0), k(1);
    } catch (e) {
      console.error("Failed to delete all notifications:", e);
    } finally {
      y(!1), h(!1);
    }
  }, L = (e) => {
    e.isRead || w(e.id), e.actionUrl && m(e.actionUrl);
  }, U = (e) => {
    switch (e) {
      case "TicketCreated":
        return "🎫";
      case "TicketAssigned":
        return "👤";
      case "StatusChanged":
        return "🔄";
      case "CommentAdded":
        return "💬";
      case "SlaResponseBreached":
      case "SlaResolutionBreached":
        return "⚠️";
      case "SlaWarning":
        return "⏰";
      case "TicketEscalated":
        return "📈";
      case "SatisfactionRequested":
        return "⭐";
      default:
        return "📌";
    }
  }, R = (e) => new Date(e).toLocaleString(), Y = (e) => {
    if (!N) return null;
    const a = te(e.tenantId, P?.id ?? null);
    return a === "global" ? /* @__PURE__ */ t("span", { className: "text-xs px-2 py-1 rounded bg-[var(--info-bg)] text-[var(--info-text)] border border-[var(--info-border)]", children: "System" }) : a === "current" ? /* @__PURE__ */ t("span", { className: "text-xs px-2 py-1 rounded bg-[var(--bg-secondary)] text-[var(--text-secondary)] border border-[var(--border-color)]", children: e.tenantName }) : /* @__PURE__ */ t("span", { className: "text-xs px-2 py-1 rounded bg-[var(--info-bg)] text-[var(--info-text)] border border-[var(--info-border)] font-medium", children: e.tenantName });
  }, T = o.filter((e) => !e.isRead).length, V = () => l === void 0 ? "" : l ? "read" : "unread";
  return /* @__PURE__ */ r(
    _,
    {
      title: n("pageTitle"),
      subtitle: `${g} notification${g !== 1 ? "s" : ""}, ${T} unread`,
      icon: /* @__PURE__ */ t(D, { className: "w-6 h-6" }),
      actions: /* @__PURE__ */ r(
        "button",
        {
          onClick: () => m("/myspace/notification-preferences"),
          className: "btn btn-secondary flex items-center gap-2",
          children: [
            /* @__PURE__ */ t(Q, { className: "w-4 h-4" }),
            n("preferences")
          ]
        }
      ),
      children: [
        /* @__PURE__ */ r("div", { className: "flex flex-col md:flex-row gap-4 items-start md:items-center justify-between", children: [
          /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ t(G, { className: "w-4 h-4 text-[var(--text-secondary)]" }),
            /* @__PURE__ */ r(
              "select",
              {
                value: V(),
                onChange: (e) => {
                  const a = e.target.value;
                  $(a === "" ? void 0 : a === "read"), f(1);
                },
                className: "input",
                children: [
                  /* @__PURE__ */ t("option", { value: "", children: "All Notifications" }),
                  /* @__PURE__ */ t("option", { value: "unread", children: "Unread Only" }),
                  /* @__PURE__ */ t("option", { value: "read", children: "Read Only" })
                ]
              }
            ),
            N && /* @__PURE__ */ r(
              "select",
              {
                value: v || "",
                onChange: (e) => {
                  j(e.target.value || void 0), f(1);
                },
                className: "input",
                children: [
                  /* @__PURE__ */ t("option", { value: "", children: "All Workspaces" }),
                  F.filter((e) => e.status === "Active").map((e) => /* @__PURE__ */ t("option", { value: e.id, children: e.name }, e.id))
                ]
              }
            )
          ] }),
          /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
            T > 0 && /* @__PURE__ */ r(
              "button",
              {
                onClick: B,
                className: "btn btn-secondary flex items-center gap-2",
                children: [
                  /* @__PURE__ */ t(H, { className: "w-4 h-4" }),
                  "Mark All Read"
                ]
              }
            ),
            o.length > 0 && /* @__PURE__ */ r(
              "button",
              {
                onClick: () => h(!0),
                className: "btn btn-secondary flex items-center gap-2 text-[var(--error-text)]",
                children: [
                  /* @__PURE__ */ t(S, { className: "w-4 h-4" }),
                  "Delete All"
                ]
              }
            )
          ] })
        ] }),
        u && /* @__PURE__ */ t("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ t(J, { className: "w-8 h-8 animate-spin text-[var(--color-accent-600)]" }) }),
        !u && o.length > 0 && /* @__PURE__ */ t("div", { className: "card divide-y divide-[var(--border-color)]", children: o.map((e) => /* @__PURE__ */ t(
          "button",
          {
            type: "button",
            onClick: () => L(e),
            className: `w-full text-left p-4 cursor-pointer hover:bg-[var(--bg-hover)] transition-colors ${e.isRead ? "" : "bg-[var(--info-bg)]/50"}`,
            children: /* @__PURE__ */ r("div", { className: "flex gap-4", children: [
              /* @__PURE__ */ t("span", { className: "text-2xl flex-shrink-0", children: U(e.type) }),
              /* @__PURE__ */ r("div", { className: "flex-1 min-w-0", children: [
                /* @__PURE__ */ r("div", { className: "flex items-start justify-between gap-4", children: [
                  /* @__PURE__ */ r("div", { children: [
                    /* @__PURE__ */ t("h3", { className: `${e.isRead ? "" : "font-semibold"}`, children: e.title }),
                    /* @__PURE__ */ t("p", { className: "text-sm text-[var(--text-secondary)] mt-1", children: e.message })
                  ] }),
                  /* @__PURE__ */ r("div", { className: "text-right flex-shrink-0", children: [
                    /* @__PURE__ */ t("div", { className: "text-sm text-[var(--text-secondary)]", children: R(e.createdAt) }),
                    e.isRead && e.readAt && /* @__PURE__ */ r("div", { className: "text-xs text-[var(--text-secondary)] mt-1", children: [
                      "Read ",
                      R(e.readAt)
                    ] })
                  ] })
                ] }),
                /* @__PURE__ */ r("div", { className: "flex items-center gap-2 mt-2", children: [
                  /* @__PURE__ */ t("span", { className: "text-xs px-2 py-1 bg-[var(--bg-secondary)] rounded", children: re(e.type) }),
                  Y(e),
                  e.relatedEntityType && /* @__PURE__ */ t("span", { className: "text-xs text-[var(--text-secondary)]", children: e.relatedEntityType })
                ] })
              ] }),
              /* @__PURE__ */ r("div", { className: "flex flex-col gap-2 flex-shrink-0", onClick: (a) => a.stopPropagation(), children: [
                !e.isRead && /* @__PURE__ */ t(
                  "button",
                  {
                    onClick: () => w(e.id),
                    className: "p-2 rounded hover:bg-[var(--bg-secondary)] transition-colors",
                    title: "Mark as read",
                    children: /* @__PURE__ */ t(K, { className: "w-4 h-4 text-[var(--success-text)]" })
                  }
                ),
                /* @__PURE__ */ t(
                  "button",
                  {
                    onClick: () => O(e.id),
                    className: "p-2 rounded hover:bg-[var(--bg-secondary)] transition-colors",
                    title: "Delete",
                    children: /* @__PURE__ */ t(S, { className: "w-4 h-4 text-[var(--error-text)]" })
                  }
                )
              ] })
            ] })
          },
          e.id
        )) }),
        !u && o.length === 0 && /* @__PURE__ */ r("div", { className: "card p-12 text-center", children: [
          /* @__PURE__ */ t(D, { className: "w-16 h-16 mx-auto mb-4 opacity-30" }),
          /* @__PURE__ */ t("h3", { className: "text-lg font-medium mb-2", children: "No notifications" }),
          /* @__PURE__ */ t("p", { className: "text-[var(--text-secondary)]", children: l === !1 ? "You have no unread notifications" : l === !0 ? "You have no read notifications" : "You're all caught up!" })
        ] }),
        !u && C > 1 && /* @__PURE__ */ t(
          ee,
          {
            page: p,
            totalPages: C,
            totalCount: g,
            onPageChange: f
          }
        ),
        /* @__PURE__ */ t(
          ae,
          {
            isOpen: I,
            title: n("notifications.deleteAll.title"),
            message: n("notifications.deleteAll.message"),
            confirmLabel: n("notifications.deleteAll.confirm"),
            variant: "danger",
            loading: M,
            onConfirm: E,
            onCancel: () => h(!1)
          }
        )
      ]
    }
  );
}
function re(m) {
  return m.replace(/([A-Z])/g, " $1").replace(/^./, (n) => n.toUpperCase()).trim();
}
export {
  me as NotificationsPage
};
//# sourceMappingURL=NotificationsPage-CSb4fWqf.js.map
