import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Bell } from "lucide-react";
import { useMemo, useState } from "react";
import { useEditContext } from "../client/editContext";
import { Button } from "../../components/ui/button";
import { Popover, PopoverContent, PopoverTrigger, } from "../../components/ui/popover";
import { Tooltip, TooltipContent, TooltipTrigger, } from "../../components/ui/tooltip";
import { NotificationItem } from "./NotificationItem";
import { resolveNotificationAction, resolveNotificationSubscriptionTarget, } from "./notificationRoutes";
import { useNotifications } from "./useNotifications";
export function NotificationCenter() {
    const editContext = useEditContext();
    const [open, setOpen] = useState(false);
    const [showAll, setShowAll] = useState(false);
    const [unsubscribingId, setUnsubscribingId] = useState(null);
    const { notifications, subscriptions, unreadCount, loading, loadingMore, hasMore, loadMore, markRead, markAllRead, unsubscribe, } = useNotifications(editContext, { showAll });
    const hasNotifications = notifications.length > 0;
    const triggerTooltip = unreadCount > 0
        ? `Notifications (${unreadCount > 99 ? "99+" : unreadCount} unread)`
        : "Notifications";
    const headerText = useMemo(() => {
        if (unreadCount <= 0)
            return "All caught up";
        if (unreadCount === 1)
            return "1 unread";
        return `${unreadCount} unread`;
    }, [unreadCount]);
    const handleOpenNotification = async (notification) => {
        const action = resolveNotificationAction(editContext, notification);
        if (!action)
            return;
        if (!notification.isRead) {
            void markRead(notification.id);
        }
        const opened = await action.open();
        if (opened) {
            setOpen(false);
        }
    };
    const handleUnsubscribe = async (notification) => {
        const target = resolveNotificationSubscriptionTarget(notification);
        if (!target)
            return;
        setUnsubscribingId(notification.id);
        try {
            await unsubscribe(target.targetType, target.targetId);
        }
        finally {
            setUnsubscribingId((current) => current === notification.id ? null : current);
        }
    };
    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { size: "iconSm", variant: "ghost", className: "relative", "aria-label": triggerTooltip, "data-testid": "notification-center-trigger", children: [_jsx(Bell, { className: "h-4 w-4" }), unreadCount > 0 && (_jsx("span", { className: "bg-feedback-red absolute -top-1 -right-1 min-w-[16px] rounded-full px-1 text-center text-[10px] leading-4 text-white", children: unreadCount > 99 ? "99+" : unreadCount }))] }) }) }), _jsx(TooltipContent, { children: triggerTooltip })] }), _jsxs(PopoverContent, { align: "end", className: "w-[360px] p-0", children: [_jsx("div", { className: "border-b px-3 py-2", children: _jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { children: [_jsx("div", { className: "text-neutral-grey-100 text-sm font-semibold", children: "Notifications" }), _jsx("div", { className: "text-neutral-grey-50 text-xs", children: headerText })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { size: "xxs", variant: "ghost", onClick: () => setShowAll((prev) => !prev), "data-testid": "notification-center-toggle-filter", children: showAll ? "Show unread" : "Show all" }), _jsx(Button, { size: "xxs", variant: "ghost", disabled: unreadCount === 0, onClick: () => void markAllRead(), "data-testid": "notification-center-mark-all-read", children: "Mark all read" })] })] }) }), _jsxs("div", { className: "max-h-[420px] space-y-2 overflow-y-auto p-2", "data-testid": "notification-center-list", children: [loading && !hasNotifications ? (_jsx("div", { className: "text-neutral-grey-50 px-2 py-4 text-xs", children: "Loading..." })) : null, !loading && !hasNotifications ? (_jsx("div", { className: "text-neutral-grey-50 px-2 py-4 text-xs", children: showAll ? "No notifications yet." : "No unread notifications." })) : null, notifications.map((notification) => {
                                const target = resolveNotificationSubscriptionTarget(notification);
                                const isSubscribed = Boolean(target &&
                                    subscriptions.some((subscription) => subscription.targetType.toLowerCase() ===
                                        target.targetType &&
                                        subscription.targetId === target.targetId &&
                                        !subscription.isMuted));
                                return (_jsx(NotificationItem, { notification: notification, onOpen: resolveNotificationAction(editContext, notification)
                                        ? (_id) => {
                                            void handleOpenNotification(notification);
                                        }
                                        : undefined, onUnsubscribe: isSubscribed
                                        ? (_id) => {
                                            void handleUnsubscribe(notification);
                                        }
                                        : undefined, unsubscribeDisabled: unsubscribingId === notification.id }, notification.id));
                            }), hasNotifications && hasMore ? (_jsx("div", { className: "pt-1", children: _jsx(Button, { size: "sm", variant: "ghost", className: "w-full justify-center text-xs", disabled: loadingMore, onClick: () => void loadMore(), "data-testid": "notification-center-load-more", children: loadingMore ? "Loading more..." : "Load more" }) })) : null] })] })] }));
}
//# sourceMappingURL=NotificationCenter.js.map