"use client";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import Link from "next/link";
import { Button } from "../../ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger
} from "../../ui/dropdown-menu";
import { ScrollArea } from "../../ui/scroll-area";
import { Badge } from "../../ui/badge";
import { Bell, Check, CheckCheck, X, AlertCircle, Info, CheckCircle, AlertTriangle, Settings } from "lucide-react";
import { useNotifications } from "../../../hooks/useNotifications";
import { cn } from "../../../lib/utils";
import { useState, useCallback } from "react";
import { createTestId, createCyId, createAriaLabel } from "../../../lib/test";
import { useTranslations } from "next-intl";
const getNotificationIcon = (type) => {
  switch (type) {
    case "success":
      return /* @__PURE__ */ jsx(CheckCircle, { className: "h-4 w-4 text-green-500" });
    case "warning":
      return /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4 text-yellow-500" });
    case "error":
      return /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4 text-red-500" });
    default:
      return /* @__PURE__ */ jsx(Info, { className: "h-4 w-4 text-blue-500" });
  }
};
const formatTimeAgo = (date, locale = "es") => {
  const now = /* @__PURE__ */ new Date();
  const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1e3);
  if (diffInSeconds < 60) {
    return locale === "en" ? "Just now" : "Hace un momento";
  } else if (diffInSeconds < 3600) {
    const minutes = Math.floor(diffInSeconds / 60);
    return locale === "en" ? `${minutes} min ago` : `Hace ${minutes} min`;
  } else if (diffInSeconds < 86400) {
    const hours = Math.floor(diffInSeconds / 3600);
    return locale === "en" ? `${hours}h ago` : `Hace ${hours}h`;
  } else if (diffInSeconds < 604800) {
    const days = Math.floor(diffInSeconds / 86400);
    return locale === "en" ? `${days}d ago` : `Hace ${days}d`;
  } else {
    return date.toLocaleDateString(locale === "en" ? "en-US" : "es-ES", {
      day: "numeric",
      month: "short"
    });
  }
};
function NotificationItem({ notification, onMarkAsRead, onDelete }) {
  const handleClick = useCallback(() => {
    if (!notification.isRead) {
      onMarkAsRead(notification.id);
    }
  }, [notification.isRead, notification.id, onMarkAsRead]);
  const handleMarkAsRead = useCallback((e) => {
    e.stopPropagation();
    onMarkAsRead(notification.id);
  }, [notification.id, onMarkAsRead]);
  const handleDelete = useCallback((e) => {
    e.stopPropagation();
    onDelete(notification.id);
  }, [notification.id, onDelete]);
  const content = /* @__PURE__ */ jsxs(
    "div",
    {
      className: cn(
        "flex items-start gap-3 p-3 rounded-lg transition-colors cursor-pointer focus:outline-none focus:ring-2 focus:ring-accent",
        !notification.isRead ? "bg-primary/5 hover:bg-primary/10" : "hover:bg-muted/50"
      ),
      onClick: handleClick,
      role: "button",
      tabIndex: 0,
      onKeyDown: (e) => {
        if (e.key === "Enter" || e.key === " ") {
          e.preventDefault();
          handleClick();
        }
      },
      "aria-label": createAriaLabel(
        "{title} - {message} - {time} - {status}",
        {
          title: notification.title,
          message: notification.message,
          time: formatTimeAgo(notification.timestamp),
          status: notification.isRead ? "le\xEDda" : "no le\xEDda"
        }
      ),
      ...createTestId("notification", "item") && { "data-testid": createTestId("notification", "item") },
      ...createCyId("notification", "item") && { "data-cy": createCyId("notification", "item") },
      "data-notification-id": notification.id,
      "data-read": notification.isRead,
      "data-type": notification.type,
      children: [
        /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 mt-0.5", children: getNotificationIcon(notification.type) }),
        /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-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 leading-tight",
              !notification.isRead && "text-foreground"
            ), children: notification.title }),
            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
              !notification.isRead && /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-primary rounded-full" }),
              /* @__PURE__ */ jsx(
                Button,
                {
                  variant: "ghost",
                  size: "sm",
                  className: "h-6 w-6 p-0 opacity-0 group-hover:opacity-100 transition-opacity",
                  onClick: handleDelete,
                  "aria-label": `Eliminar notificaci\xF3n: ${notification.title}`,
                  ...createTestId("notification", "delete", "button") && { "data-testid": createTestId("notification", "delete", "button") },
                  ...createCyId("notification", "delete") && { "data-cy": createCyId("notification", "delete") },
                  children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3", "aria-hidden": "true" })
                }
              )
            ] })
          ] }),
          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground line-clamp-2", children: notification.message }),
          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: formatTimeAgo(notification.timestamp) }),
            !notification.isRead && /* @__PURE__ */ jsxs(
              Button,
              {
                variant: "ghost",
                size: "sm",
                className: "h-6 px-2 text-xs opacity-0 group-hover:opacity-100 transition-opacity",
                onClick: handleMarkAsRead,
                "aria-label": `Marcar como le\xEDda: ${notification.title}`,
                ...createTestId("notification", "mark", "read") && { "data-testid": createTestId("notification", "mark", "read") },
                ...createCyId("notification", "mark-read") && { "data-cy": createCyId("notification", "mark-read") },
                children: [
                  /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 mr-1", "aria-hidden": "true" }),
                  "Marcar le\xEDdo"
                ]
              }
            )
          ] })
        ] })
      ]
    }
  );
  if (notification.actionUrl) {
    return /* @__PURE__ */ jsx(Link, { href: notification.actionUrl, className: "block group", children: content });
  }
  return /* @__PURE__ */ jsx("div", { className: "group", children: content });
}
function NotificationsDropdown() {
  const { notifications, unreadCount, markAsRead, markAllAsRead, deleteNotification } = useNotifications();
  const [statusMessage, setStatusMessage] = useState("");
  const t = useTranslations("common");
  const handleMarkAllAsRead = useCallback(() => {
    markAllAsRead();
    setStatusMessage("Todas las notificaciones marcadas como le\xEDdas");
  }, [markAllAsRead]);
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(
      "div",
      {
        "aria-live": "polite",
        "aria-atomic": "true",
        className: "sr-only",
        ...createTestId("notifications", "status", "message") && { "data-testid": createTestId("notifications", "status", "message") },
        children: statusMessage
      }
    ),
    /* @__PURE__ */ jsxs(DropdownMenu, { children: [
      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
        Button,
        {
          variant: "ghost",
          size: "sm",
          className: "relative",
          "aria-label": createAriaLabel(
            "{notifications}{count}",
            {
              notifications: t("notifications.title"),
              count: unreadCount > 0 ? `, ${unreadCount} ${t("notifications.unread")}` : ""
            }
          ),
          "aria-haspopup": "true",
          "aria-expanded": "false",
          ...createTestId("notifications", "trigger", "button") && { "data-testid": createTestId("notifications", "trigger", "button") },
          ...createCyId("notifications", "trigger") && { "data-cy": createCyId("notifications", "trigger") },
          children: [
            /* @__PURE__ */ jsx(Bell, { className: "h-4 w-4", "aria-hidden": "true" }),
            unreadCount > 0 && /* @__PURE__ */ jsx(
              "div",
              {
                className: "absolute -top-1 -right-1 h-5 w-5 bg-red-500 rounded-full flex items-center justify-center",
                role: "status",
                "aria-label": `${unreadCount} ${t("notifications.unread")}`,
                ...createTestId("notifications", "badge") && { "data-testid": createTestId("notifications", "badge") },
                ...createCyId("notifications", "unread-badge") && { "data-cy": createCyId("notifications", "unread-badge") },
                children: /* @__PURE__ */ jsx("span", { className: "text-[10px] text-white font-medium", "aria-hidden": "true", children: unreadCount > 9 ? "9+" : unreadCount })
              }
            )
          ]
        }
      ) }),
      /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-80", children: [
        /* @__PURE__ */ jsx(DropdownMenuLabel, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
          /* @__PURE__ */ jsx("span", { children: t("notifications.title") }),
          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
            unreadCount > 0 && /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "text-xs", children: [
              unreadCount,
              " ",
              t("notifications.new"),
              unreadCount !== 1 ? "s" : ""
            ] }),
            unreadCount > 0 && /* @__PURE__ */ jsxs(
              Button,
              {
                variant: "ghost",
                size: "sm",
                className: "h-6 px-2 text-xs",
                onClick: handleMarkAllAsRead,
                "aria-label": t("notifications.markAllAsRead"),
                ...createTestId("notifications", "mark", "all") && { "data-testid": createTestId("notifications", "mark", "all") },
                ...createCyId("notifications", "mark-all") && { "data-cy": createCyId("notifications", "mark-all") },
                children: [
                  /* @__PURE__ */ jsx(CheckCheck, { className: "h-3 w-3 mr-1", "aria-hidden": "true" }),
                  t("notifications.markAll")
                ]
              }
            )
          ] })
        ] }) }),
        /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
        notifications.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "p-4 text-center", children: [
          /* @__PURE__ */ jsx(Bell, { className: "h-8 w-8 mx-auto text-muted-foreground mb-2" }),
          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("notifications.empty") })
        ] }) : /* @__PURE__ */ jsx(ScrollArea, { className: "h-96", children: /* @__PURE__ */ jsx("div", { className: "space-y-1 p-1", children: notifications.map((notification) => /* @__PURE__ */ jsx(
          NotificationItem,
          {
            notification,
            onMarkAsRead: markAsRead,
            onDelete: deleteNotification
          },
          notification.id
        )) }) }),
        /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
        /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxs(Link, { href: "/dashboard/settings/notifications", className: "w-full text-center", children: [
          /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4 mr-2" }),
          t("notifications.configure")
        ] }) })
      ] })
    ] })
  ] });
}
export {
  NotificationsDropdown
};
