"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { useRouter } from "next/navigation";
import { X, Bell, AlertTriangle, CheckCircle2, XCircle, Info, Loader2 } from "lucide-react";
import { Button } from "../../primitives/button.js";
import { cn } from "@open-mercato/shared/lib/utils";
import { formatRelativeTime } from "@open-mercato/shared/lib/time";
function resolveNotificationText(params) {
  const { key, fallback, variables, t } = params;
  if (key) {
    return t(key, fallback ?? key, variables ?? void 0);
  }
  if (fallback) {
    return t(fallback, variables ?? void 0);
  }
  return "";
}
const severityIcons = {
  info: Info,
  warning: AlertTriangle,
  success: CheckCircle2,
  error: XCircle
};
const severityColors = {
  info: "text-status-info-icon",
  warning: "text-status-warning-icon",
  success: "text-status-success-icon",
  error: "text-status-error-icon"
};
function NotificationItem({
  notification,
  onMarkAsRead,
  onExecuteAction,
  onDismiss,
  t,
  customRenderer: CustomRenderer
}) {
  const router = useRouter();
  const [executing, setExecuting] = React.useState(null);
  const isUnread = notification.status === "unread";
  const hasActions = notification.actions && notification.actions.length > 0;
  const severity = notification.severity;
  const IconComponent = severityIcons[severity] ?? Bell;
  const titleText = resolveNotificationText({
    key: notification.titleKey,
    fallback: notification.title,
    variables: notification.titleVariables ?? void 0,
    t
  });
  const bodyText = resolveNotificationText({
    key: notification.bodyKey,
    fallback: notification.body ?? void 0,
    variables: notification.bodyVariables ?? void 0,
    t
  });
  const handleClick = async () => {
    if (isUnread) {
      await onMarkAsRead();
    }
    if (notification.linkHref) {
      router.push(notification.linkHref);
    }
  };
  const handleAction = async (actionId, event) => {
    event?.stopPropagation();
    setExecuting(actionId);
    try {
      const result = await onExecuteAction(actionId);
      if (result.href) {
        router.push(result.href);
      }
    } finally {
      setExecuting(null);
    }
  };
  const handleDismiss = async (event) => {
    event?.stopPropagation();
    await onDismiss();
  };
  const rendererActions = notification.actions.map((action) => ({
    id: action.id,
    labelKey: action.labelKey ?? action.label,
    variant: action.variant,
    icon: action.icon
  }));
  if (CustomRenderer) {
    return /* @__PURE__ */ jsx(
      CustomRenderer,
      {
        notification: {
          id: notification.id,
          type: notification.type,
          title: titleText,
          body: bodyText || null,
          titleKey: notification.titleKey,
          bodyKey: notification.bodyKey,
          titleVariables: notification.titleVariables ?? null,
          bodyVariables: notification.bodyVariables ?? null,
          icon: notification.icon,
          severity: notification.severity,
          status: notification.status,
          sourceModule: notification.sourceModule,
          sourceEntityType: notification.sourceEntityType,
          sourceEntityId: notification.sourceEntityId,
          linkHref: notification.linkHref ?? null,
          createdAt: notification.createdAt
        },
        onAction: handleAction,
        onDismiss: handleDismiss,
        actions: rendererActions
      }
    );
  }
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: cn(
        "group relative px-4 py-3 hover:bg-muted/50 cursor-pointer transition-colors",
        isUnread && "bg-muted/30"
      ),
      onClick: handleClick,
      onKeyDown: (e) => {
        if (e.key === "Enter" || e.key === " ") {
          e.preventDefault();
          handleClick();
        }
      },
      role: "button",
      tabIndex: 0,
      children: [
        isUnread && /* @__PURE__ */ jsx("div", { className: "absolute left-1.5 top-1/2 -translate-y-1/2 h-2 w-2 rounded-full bg-primary" }),
        /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
          /* @__PURE__ */ jsx(
            "div",
            {
              className: cn(
                "flex-shrink-0 mt-0.5",
                severityColors[severity] ?? "text-muted-foreground"
              ),
              children: /* @__PURE__ */ jsx(IconComponent, { className: "h-5 w-5" })
            }
          ),
          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
            /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
              /* @__PURE__ */ jsx("h4", { className: cn("text-sm font-medium", isUnread && "font-semibold"), children: titleText }),
              /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 text-xs text-muted-foreground", children: formatRelativeTime(notification.createdAt, { translate: t }) ?? "" })
            ] }),
            bodyText && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground line-clamp-2", children: bodyText }),
            hasActions && notification.status !== "actioned" && /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap items-start gap-2", children: notification.actions.map((action) => /* @__PURE__ */ jsxs(
              Button,
              {
                variant: action.variant ?? "outline",
                size: "sm",
                className: "h-auto min-h-8 max-w-full min-w-0 whitespace-normal break-words text-left",
                onClick: (event) => handleAction(action.id, event),
                disabled: executing !== null,
                children: [
                  action.labelKey ? t(action.labelKey, action.label) : t(action.label, action.label),
                  executing === action.id && /* @__PURE__ */ jsx(Loader2, { className: "ml-1 h-3 w-3 animate-spin" })
                ]
              },
              action.id
            )) }),
            notification.status === "actioned" && notification.actionTaken && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground italic", children: t("notifications.actionTaken", "Action taken: {action}", {
              action: notification.actionTaken
            }) })
          ] }),
          /* @__PURE__ */ jsx(
            Button,
            {
              variant: "ghost",
              size: "icon",
              className: "flex-shrink-0 h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity",
              onClick: handleDismiss,
              children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
            }
          )
        ] })
      ]
    }
  );
}
export {
  NotificationItem
};
//# sourceMappingURL=NotificationItem.js.map
