'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useCallback } from 'react';
import { Bell, Check, CheckCheck } from 'lucide-react';
import { cn } from '../../../lib/utils.js';
import { Button } from '../../ui/button.js';
import { Badge } from '../../ui/badge.js';
import { Popover, PopoverContent, PopoverTrigger } from '../../ui/popover.js';
import { ScrollArea } from '../../ui/scroll-area.js';
import { markNotificationRead, markAllNotificationsRead } from '../../../app/actions/manage-notifications.js';
const TYPE_LABELS = {
    Assignment: 'Assigned',
    Mention: 'Mentioned',
    StateChange: 'State changed',
    Comment: 'New comment',
    DueDateApproaching: 'Due soon',
};
export function NotificationCenter({ recipientId, notifications, unreadCount, onNotificationsChange, onUnreadCountChange, onNavigate, className, }) {
    const [open, setOpen] = useState(false);
    const handleMarkRead = useCallback(async (notifId) => {
        const result = await markNotificationRead(notifId);
        if (!result.error) {
            const updated = notifications.map((n) => (n.id === notifId ? { ...n, isRead: true } : n));
            onNotificationsChange?.(updated);
            onUnreadCountChange?.(Math.max(0, unreadCount - 1));
        }
    }, [notifications, unreadCount, onNotificationsChange, onUnreadCountChange]);
    const handleMarkAllRead = useCallback(async () => {
        const result = await markAllNotificationsRead(recipientId);
        if (!result.error) {
            const updated = notifications.map((n) => ({ ...n, isRead: true }));
            onNotificationsChange?.(updated);
            onUnreadCountChange?.(0);
        }
    }, [recipientId, notifications, onNotificationsChange, onUnreadCountChange]);
    const handleClick = useCallback((notif) => {
        if (!notif.isRead) {
            handleMarkRead(notif.id);
        }
        if (notif.referenceType && notif.referenceId) {
            onNavigate?.(notif.referenceType, notif.referenceId);
            setOpen(false);
        }
    }, [handleMarkRead, onNavigate]);
    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "icon", className: cn('relative', className), children: [_jsx(Bell, { className: "h-5 w-5" }), unreadCount > 0 && (_jsx(Badge, { variant: "destructive", className: "absolute -top-1 -right-1 flex h-5 min-w-5 items-center justify-center px-1 text-xs", children: unreadCount > 99 ? '99+' : unreadCount }))] }) }), _jsxs(PopoverContent, { className: "w-80 p-0", align: "end", children: [_jsxs("div", { className: "flex items-center justify-between border-b px-4 py-3", children: [_jsx("h4", { className: "text-sm font-semibold", children: "Notifications" }), unreadCount > 0 && (_jsxs(Button, { variant: "ghost", size: "sm", className: "h-7 text-xs", onClick: handleMarkAllRead, children: [_jsx(CheckCheck, { className: "mr-1 h-3 w-3" }), "Mark all read"] }))] }), _jsx(ScrollArea, { className: "max-h-80", children: notifications.length === 0 ? (_jsx("div", { className: "text-muted-foreground px-4 py-8 text-center text-sm", children: "No notifications" })) : (_jsx("div", { className: "divide-y", children: notifications.map((notif) => (_jsx("button", { onClick: () => handleClick(notif), className: cn('hover:bg-muted/50 w-full px-4 py-3 text-left transition-colors', !notif.isRead && 'bg-muted/20'), children: _jsxs("div", { className: "flex items-start gap-2", children: [!notif.isRead && (_jsx("div", { className: "bg-primary mt-1.5 h-2 w-2 shrink-0 rounded-full" })), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate text-sm font-medium", children: notif.title }), notif.body ? (_jsx("p", { className: "text-muted-foreground mt-0.5 truncate text-xs", children: notif.body })) : null, _jsx("p", { className: "text-muted-foreground mt-1 text-xs", children: TYPE_LABELS[notif.type] ?? notif.type })] }), !notif.isRead && (_jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6 shrink-0", onClick: (e) => {
                                                e.stopPropagation();
                                                handleMarkRead(notif.id);
                                            }, children: _jsx(Check, { className: "h-3 w-3" }) }))] }) }, notif.id))) })) })] })] }));
}
