"use client"; import { useEffect, useState } from "react"; import Link from "next/link"; import { useSession } from "next-auth/react"; import { useTranslations, useLocale } from "next-intl"; import { Bell, MessageSquare } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { formatDistanceToNow } from "@/lib/date"; interface CommentNotification { id: string; type: "COMMENT" | "REPLY"; createdAt: string; actor: { id: string; name: string | null; username: string; avatar: string | null; } | null; promptId: string | null; promptTitle: string | null; } interface Notifications { pendingChangeRequests: number; unreadComments: number; commentNotifications: CommentNotification[]; } export function NotificationBell() { const { data: session } = useSession(); const t = useTranslations("notifications"); const locale = useLocale(); const [notifications, setNotifications] = useState({ pendingChangeRequests: 0, unreadComments: 0, commentNotifications: [], }); const [isLoading, setIsLoading] = useState(true); useEffect(() => { if (!session?.user) { setIsLoading(false); return; } const fetchNotifications = async () => { try { const response = await fetch("/api/user/notifications"); if (response.ok) { const data = await response.json(); setNotifications(data); } } catch (error) { console.error("Failed to fetch notifications:", error); } finally { setIsLoading(false); } }; fetchNotifications(); }, [session?.user]); if (!session?.user || isLoading) { return null; } const totalCount = notifications.pendingChangeRequests + notifications.unreadComments; const handleMarkAsRead = async (notificationIds?: string[]) => { try { await fetch("/api/user/notifications", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ notificationIds }), }); // Refresh notifications const response = await fetch("/api/user/notifications"); if (response.ok) { const data = await response.json(); setNotifications(data); } } catch (error) { console.error("Failed to mark notifications as read:", error); } }; if (totalCount === 0) { return ( ); } return ( {t("title")} {totalCount > 0 && ( )} {notifications.pendingChangeRequests > 0 && ( {t("pendingChangeRequests")} {notifications.pendingChangeRequests} )} {notifications.commentNotifications.length > 0 && ( <> {notifications.pendingChangeRequests > 0 && } {notifications.commentNotifications.map((notification) => ( handleMarkAsRead([notification.id])} className="flex items-start gap-3 py-2" > {notification.actor?.name?.charAt(0) || notification.actor?.username?.charAt(0) || "?"}

@{notification.actor?.username} {" "} {notification.type === "COMMENT" ? t("commentedOnPrompt") : t("repliedToComment")}

{notification.promptTitle && (

{notification.promptTitle}

)}

{formatDistanceToNow(new Date(notification.createdAt), locale)}

))} )} {totalCount === 0 && (

{t("noNotifications")}

)} ); }