starr-philproperties/src/components/generic/NotificationBell.jsx

import { useState } from "react";
import { Bell, AlertCircle, UserPlus, Megaphone } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";
import { useAdminNotifications } from "@/contexts/AdminNotificationContext";
import { cn } from "@/lib/utils";
import { useDateFormat } from "@/hooks/useDateFormat";

const TYPE_ICON = {
    task_overdue:      AlertCircle,
    user_registration: UserPlus,
    announcement:      Megaphone,
};

function NotificationIcon({ type, className }) {
    const Icon = TYPE_ICON[type] ?? Bell;
    return <Icon className={cn("shrink-0", className)} />;
}

function timeAgo(dateStr) {
    const diff = Date.now() - new Date(dateStr).getTime();
    const m = Math.floor(diff / 60_000);
    if (m < 1)  return "just now";
    if (m < 60) return `${m}m ago`;
    const h = Math.floor(m / 60);
    if (h < 24) return `${h}h ago`;
    return `${Math.floor(h / 24)}d ago`;
}

export default function NotificationBell() {
    const { notifications, unseenCount, loading, fetchNotifications, markSeen, markAllSeen } =
        useAdminNotifications();
    const { fmtDateTime } = useDateFormat();

    const [selected, setSelected] = useState(null);

    function handleOpen(open) {
        if (open) fetchNotifications();
    }

    function handleClickNotification(n) {
        if (!n.seen) markSeen(n.notification_id);
        setSelected(n);
    }

    return (
        <>
            <Popover onOpenChange={handleOpen}>
                <PopoverTrigger asChild>
                    <Button variant="outline" size="icon" className="relative">
                        <Bell className="h-5 w-5" />
                        {unseenCount > 0 && (
                            <span className="absolute -top-0.5 -right-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[10px] font-bold text-white leading-none">
                                {unseenCount > 99 ? "99+" : unseenCount}
                            </span>
                        )}
                    </Button>
                </PopoverTrigger>

                <PopoverContent align="end" className="w-80 p-0">
                    <div className="flex items-center justify-between px-4 py-3">
                        <span className="text-sm font-semibold">Notifications</span>
                        {unseenCount > 0 && (
                            <button
                                onClick={markAllSeen}
                                className="text-xs text-muted-foreground hover:text-foreground transition-colors"
                            >
                                Mark all as read
                            </button>
                        )}
                    </div>

                    <Separator />

                    <ScrollArea className="h-80">
                        {loading && notifications.length === 0 ? (
                            <p className="py-8 text-center text-xs text-muted-foreground">Loading...</p>
                        ) : notifications.length === 0 ? (
                            <p className="py-8 text-center text-xs text-muted-foreground">No notifications yet.</p>
                        ) : (
                            <ul>
                                {notifications.map((n, i) => (
                                    <li key={n.notification_id}>
                                        <button
                                            onClick={() => handleClickNotification(n)}
                                            className={cn(
                                                "w-full text-left px-4 py-3 hover:bg-muted/50 transition-colors",
                                                !n.seen && "bg-blue-50 dark:bg-blue-950/20"
                                            )}
                                        >
                                            <div className="flex items-start gap-3">
                                                <div className="mt-0.5">
                                                    <NotificationIcon type={n.type} className="h-4 w-4 text-muted-foreground" />
                                                </div>
                                                <div className="flex-1 min-w-0">
                                                    <div className="flex items-center gap-1.5">
                                                        {!n.seen && (
                                                            <span className="h-2 w-2 shrink-0 rounded-full bg-blue-500" />
                                                        )}
                                                        <p className="text-xs font-medium truncate">{n.title}</p>
                                                    </div>
                                                    <p className="text-xs text-muted-foreground mt-0.5 line-clamp-2">{n.message}</p>
                                                    <p className="text-[10px] text-muted-foreground mt-1">{timeAgo(n.createdAt)}</p>
                                                </div>
                                            </div>
                                        </button>
                                        {i < notifications.length - 1 && <Separator />}
                                    </li>
                                ))}
                            </ul>
                        )}
                    </ScrollArea>
                </PopoverContent>
            </Popover>

            {/* Detail dialog — outside Popover so it isn't clipped */}
            <Dialog open={!!selected} onOpenChange={(open) => !open && setSelected(null)}>
                <DialogContent className="sm:max-w-lg">
                    <DialogHeader>
                        <div className="flex items-center gap-3 mb-1">
                            <div className="flex h-9 w-9 items-center justify-center rounded-full bg-muted">
                                <NotificationIcon
                                    type={selected?.type}
                                    className="h-5 w-5 text-foreground"
                                />
                            </div>
                            <DialogTitle className="leading-snug">{selected?.title}</DialogTitle>
                        </div>
                        <DialogDescription className="text-sm text-foreground/80 leading-relaxed">
                            {selected?.message}
                        </DialogDescription>
                    </DialogHeader>

                    <Separator />

                    <div className="flex items-center justify-between text-xs text-muted-foreground">
                        <span className="capitalize">{selected?.type?.replace(/_/g, ' ')}</span>
                        <span>{selected ? fmtDateTime(selected.createdAt) : ""}</span>
                    </div>
                </DialogContent>
            </Dialog>
        </>
    );
}