import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { AtSign, BellOff, BellRing, CircleAlert, CircleCheck, CircleX, ClipboardCheck, ClipboardList, Eye, FilePen, Loader2, MessageCircleMore, PartyPopper, } from "lucide-react";
import { Button } from "../../components/ui/button";
import { Tooltip, TooltipContent, TooltipTrigger, } from "../../components/ui/tooltip";
import { ParheliaAgentIcon } from "../ui/Icons";
const typeIcons = {
    "item-changed": FilePen,
    feedback: MessageCircleMore,
    "review-invitation": Eye,
    "review-completed": CircleCheck,
    "review-rejected": CircleX,
    "task-assigned": ClipboardList,
    "task-status-changed": ClipboardList,
    mention: AtSign,
    "project-attention-required": CircleAlert,
    "project-task-completed": ClipboardCheck,
    "project-finished": PartyPopper,
    "agent-notification": ParheliaAgentIcon,
};
function formatTimestamp(value) {
    const date = new Date(value);
    if (Number.isNaN(date.getTime()))
        return null;
    const full = date.toLocaleString(undefined, {
        dateStyle: "medium",
        timeStyle: "short",
    });
    const diffMs = Date.now() - date.getTime();
    const diffMins = Math.floor(diffMs / 60000);
    const diffHours = Math.floor(diffMs / 3600000);
    const diffDays = Math.floor(diffMs / 86400000);
    if (diffMins < 1)
        return { label: "just now", full };
    if (diffMins < 60)
        return { label: `${diffMins}m ago`, full };
    if (diffHours < 24)
        return { label: `${diffHours}h ago`, full };
    if (diffDays < 7)
        return { label: `${diffDays}d ago`, full };
    return {
        label: date.toLocaleDateString(undefined, {
            month: "short",
            day: "numeric",
        }),
        full,
    };
}
export function NotificationItem(props) {
    const { notification, onOpen, onUnsubscribe, unsubscribeDisabled = false, } = props;
    const timestamp = formatTimestamp(notification.createdAt);
    const Icon = typeIcons[notification.type] ?? BellRing;
    const className = `group relative flex w-full items-start gap-2.5 px-3 py-2.5 text-left transition-colors ${onOpen
        ? "hover:bg-neutral-grey-5 focus-visible:ring-feedback-blue/50 cursor-pointer focus-visible:ring-2 focus-visible:ring-inset focus-visible:outline-none"
        : ""}`;
    const handleOpen = () => {
        if (!onOpen)
            return;
        void onOpen(notification.id);
    };
    const handleKeyDown = (event) => {
        if (!onOpen)
            return;
        if (event.key !== "Enter" && event.key !== " ")
            return;
        event.preventDefault();
        void onOpen(notification.id);
    };
    const handleUnsubscribe = (event) => {
        event.stopPropagation();
        if (!onUnsubscribe)
            return;
        void onUnsubscribe(notification.id);
    };
    return (_jsxs("div", { className: className, "data-testid": `notification-item-${notification.id}`, onClick: onOpen ? handleOpen : undefined, onKeyDown: onOpen ? handleKeyDown : undefined, role: onOpen ? "button" : undefined, tabIndex: onOpen ? 0 : undefined, children: [_jsx("span", { className: "bg-neutral-grey-5 text-neutral-grey-100 mt-px flex size-7 shrink-0 items-center justify-center rounded-[4px] transition-colors group-hover:bg-white", children: _jsx(Icon, { className: "size-3.5" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [_jsx("div", { className: `min-w-0 truncate text-xs ${notification.isRead
                                    ? "text-neutral-grey-100/75 font-medium"
                                    : "text-neutral-grey-100 font-medium"}`, children: notification.title }), _jsxs("div", { className: `flex shrink-0 items-center gap-1.5 transition-opacity ${onUnsubscribe
                                    ? "group-focus-within:opacity-0 group-hover:opacity-0"
                                    : ""} ${onUnsubscribe && unsubscribeDisabled ? "opacity-0" : ""}`, children: [timestamp ? (_jsx("span", { className: "text-neutral-grey-50 text-2xs whitespace-nowrap", title: timestamp.full, children: timestamp.label })) : null, !notification.isRead ? (_jsx("span", { className: "bg-neutral-grey-50 size-1.5 rounded-full", "aria-hidden": "true" })) : null] })] }), _jsx("div", { className: `mt-0.5 line-clamp-2 text-xs [overflow-wrap:anywhere] ${notification.isRead
                            ? "text-neutral-grey-50"
                            : "text-neutral-grey-100/70"}`, children: notification.message })] }), onUnsubscribe ? (_jsx("div", { className: `absolute top-1.5 right-1.5 transition-opacity ${unsubscribeDisabled
                    ? ""
                    : "opacity-0 group-focus-within:opacity-100 group-hover:opacity-100"}`, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { type: "button", size: "iconXs", variant: "ghost", className: "text-neutral-grey-50 hover:text-feedback-red size-6", disabled: unsubscribeDisabled, onClick: handleUnsubscribe, onKeyDown: (event) => event.stopPropagation(), "aria-label": "Unsubscribe", "data-testid": `notification-item-unsubscribe-${notification.id}`, children: unsubscribeDisabled ? (_jsx(Loader2, { strokeWidth: 1, className: "size-3.5 animate-spin" })) : (_jsx(BellOff, { strokeWidth: 1, className: "size-3.5" })) }) }), _jsx(TooltipContent, { children: "Unsubscribe" })] }) })) : null] }));
}
//# sourceMappingURL=NotificationItem.js.map