import { NotificationSheet } from '@/components/admin/NotificationSheet';
import {
    Tooltip,
    TooltipContent,
    TooltipTrigger,
} from '@/components/ui/tooltip';
import { useNotificationCount } from '@/hooks/useNotificationCount';
import { cn } from '@/lib/utils';
import { Bell } from 'lucide-react';
import { useState } from 'react';

export function NotificationBell() {
    const [open, setOpen] = useState(false);
    const { count, refresh } = useNotificationCount();

    return (
        <>
            <Tooltip>
                <TooltipTrigger asChild>
                    <button
                        onClick={() => setOpen(true)}
                        className="text-muted-foreground hover:bg-muted/60 hover:text-foreground relative flex h-9 w-9 items-center justify-center rounded-xl transition-colors"
                        aria-label="Open notifications"
                    >
                        <Bell className="h-4 w-4" />
                        {count > 0 ? (
                            <span className="bg-destructive text-destructive-foreground ring-background absolute top-1 right-1 flex h-4 w-4 items-center justify-center rounded-full text-[9px] font-bold ring-2">
                                {count > 9 ? '9+' : count}
                            </span>
                        ) : (
                            <span
                                className={cn(
                                    'bg-accent ring-background absolute top-1.5 right-1.5 h-2 w-2 rounded-full ring-2',
                                    'opacity-0',
                                )}
                            />
                        )}
                    </button>
                </TooltipTrigger>
                <TooltipContent>Notifications</TooltipContent>
            </Tooltip>

            <NotificationSheet
                open={open}
                onOpenChange={setOpen}
                onCountChange={refresh}
            />
        </>
    );
}