import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Bell, CheckCheck, CircleCheck, Inbox, Loader2, } from "lucide-react";
import { useState } from "react";
import { toast } from "sonner";
import { useEditContext } from "../client/editContext";
import { Button } from "../../components/ui/button";
import { CountBadge } from "../../components/ui/badge";
import { Popover, PopoverContent, PopoverTrigger, } from "../../components/ui/popover";
import { Tooltip, TooltipContent, TooltipTrigger, } from "../../components/ui/tooltip";
import { cn } from "../../lib/utils";
import { NotificationItem } from "./NotificationItem";
import { resolveNotificationAction, resolveNotificationSubscriptionTarget, } from "./notificationRoutes";
import { useNotifications } from "./useNotifications";
import { WatchMenuSection } from "./WatchButton";
const filterOptions = [
    { label: "Unread", showAll: false },
    { label: "All", showAll: true },
];
export function NotificationCenter(props) {
    const { watchTarget } = props;
    const editContext = useEditContext();
    const [open, setOpen] = useState(false);
    const [showAll, setShowAll] = useState(false);
    const [markingAllRead, setMarkingAllRead] = 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 isWatchingTarget = Boolean(watchTarget &&
        subscriptions.some((subscription) => subscription.targetType.toLowerCase() === watchTarget.targetType &&
            subscription.targetId === watchTarget.targetId &&
            !subscription.isMuted));
    const triggerTooltip = unreadCount > 0
        ? `Notifications (${unreadCount > 99 ? "99+" : unreadCount} unread)`
        : "Notifications";
    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);
        }
    };
    const handleMarkAllRead = async () => {
        if (markingAllRead || unreadCount === 0)
            return;
        setMarkingAllRead(true);
        try {
            const succeeded = await markAllRead();
            if (!succeeded) {
                toast.error("Could not mark notifications as read");
            }
        }
        catch {
            toast.error("Could not mark notifications as read");
        }
        finally {
            setMarkingAllRead(false);
        }
    };
    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: cn("aria-expanded:bg-neutral-grey-5 aria-expanded:text-neutral-grey-100 aria-expanded:hover:bg-neutral-grey-5 aria-expanded:hover:text-neutral-grey-100 relative", isWatchingTarget &&
                                    "bg-neutral-grey-5 text-neutral-grey-100 hover:bg-neutral-grey-5"), "aria-label": triggerTooltip, "data-testid": "notification-center-trigger", children: [_jsx(Bell, { strokeWidth: 1, className: "h-4 w-4" }), unreadCount > 0 && (_jsx("span", { className: "bg-neutral-grey-100 absolute -top-1 -right-1 min-w-[16px] rounded-full px-1 text-center text-[10px] leading-4 font-medium text-white", children: unreadCount > 99 ? "99+" : unreadCount }))] }) }) }), _jsx(TooltipContent, { children: triggerTooltip })] }), _jsxs(PopoverContent, { align: "end", className: "w-[400px] overflow-hidden rounded-xl p-0 shadow-lg", children: [_jsxs("div", { className: "flex items-center justify-between gap-2 border-b px-4 py-3", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { className: "text-neutral-grey-100 text-base font-semibold", children: "Notifications" }), unreadCount > 0 ? (_jsx(CountBadge, { children: unreadCount > 99 ? "99+" : unreadCount })) : null] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [_jsx("div", { className: "bg-neutral-grey-5 flex items-center gap-0.5 rounded-lg p-0.5", "data-testid": "notification-center-toggle-filter", children: filterOptions.map((option) => (_jsx("button", { type: "button", onClick: () => setShowAll(option.showAll), className: `rounded-md px-2.5 py-1 text-xs font-medium transition-colors ${showAll === option.showAll
                                                ? "text-neutral-grey-100 bg-white shadow-sm"
                                                : "text-neutral-grey-50 hover:text-neutral-grey-100"}`, "data-testid": `notification-center-filter-${option.label.toLowerCase()}`, children: option.label }, option.label))) }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { size: "iconSm", variant: "ghost", className: "text-neutral-grey-100", "aria-label": "Mark all as read", disabled: unreadCount === 0 || markingAllRead, onClick: () => void handleMarkAllRead(), "data-testid": "notification-center-mark-all-read", children: markingAllRead ? (_jsx(Loader2, { strokeWidth: 1, className: "size-4 animate-spin" })) : (_jsx(CheckCheck, { strokeWidth: 1, className: "size-4" })) }) }), _jsx(TooltipContent, { children: "Mark all as read" })] })] })] }), _jsxs("div", { className: "max-h-[360px] overflow-y-auto overscroll-contain", "data-testid": "notification-center-list", children: [loading && !hasNotifications ? (_jsxs("div", { className: "text-neutral-grey-50 flex items-center justify-center gap-2 py-12 text-xs", children: [_jsx(Loader2, { strokeWidth: 1, className: "size-4 animate-spin" }), "Loading notifications..."] })) : null, !loading && !hasNotifications ? (_jsxs("div", { className: "flex flex-col items-center px-6 py-12 text-center", children: [showAll ? (_jsx(Inbox, { className: "text-neutral-grey-50 size-10", strokeWidth: 1 })) : (_jsx(CircleCheck, { className: "text-feedback-green size-10", strokeWidth: 1 })), _jsx("div", { className: "text-neutral-grey-100 mt-4 text-sm font-semibold", children: showAll ? "No notifications yet" : "You're all caught up" }), _jsx("div", { className: "text-neutral-grey-50 mt-1 text-xs", children: showAll
                                            ? "Updates for items you watch will show up here."
                                            : "New notifications will show up here." })] })) : null, hasNotifications ? (_jsx("div", { className: "divide-border-default/70 divide-y", children: 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)
                                            ? () => {
                                                void handleOpenNotification(notification);
                                            }
                                            : undefined, onUnsubscribe: isSubscribed
                                            ? () => {
                                                void handleUnsubscribe(notification);
                                            }
                                            : undefined, unsubscribeDisabled: unsubscribingId === notification.id }, notification.id));
                                }) })) : null, hasNotifications && hasMore ? (_jsx("div", { className: "border-t p-1.5", children: _jsx(Button, { size: "sm", variant: "ghost", className: "text-neutral-grey-50 hover:text-neutral-grey-100 h-7 w-full justify-center text-xs font-normal", disabled: loadingMore, onClick: () => void loadMore(), "data-testid": "notification-center-load-more", children: loadingMore ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { strokeWidth: 1, className: "size-3.5 animate-spin" }), "Loading more..."] })) : ("Load more") }) })) : null] }), watchTarget ? (_jsx(WatchMenuSection, { targetType: watchTarget.targetType, targetId: watchTarget.targetId })) : null] })] }));
}
//# sourceMappingURL=NotificationCenter.js.map