pn-new-crm/src/components/alerts/alert-bell.tsx

'use client';

import { useState } from 'react';
import Link from 'next/link';
import { ShieldAlert } from 'lucide-react';

import { Button } from '@/components/ui/button';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Separator } from '@/components/ui/separator';
import { useUIStore } from '@/stores/ui-store';
import { cn } from '@/lib/utils';
import { AlertCard, AlertCardEmpty } from './alert-card';
import { useAlertCount, useAlertList, useAlertRealtime } from './use-alerts';

export function AlertBell() {
  const portSlug = useUIStore((s) => s.currentPortSlug);
  const [open, setOpen] = useState(false);
  // Count is cheap (one aggregate query) - fire on every page so the badge stays live.
  // List is heavier - only fetch when the popover is actually open.
  const { data: count } = useAlertCount();
  const { data: list, isLoading } = useAlertList('open', open);
  useAlertRealtime();

  const total = count?.total ?? 0;
  const critical = count?.bySeverity.critical ?? 0;
  const alerts = list?.data ?? [];
  const top = alerts.slice(0, 5);

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="ghost"
          size="icon"
          className="relative"
          aria-label={`Alerts${total > 0 ? ` (${total} active)` : ''}`}
          data-testid="alert-bell"
        >
          <ShieldAlert className="h-5 w-5" />
          {total > 0 ? (
            <span
              key={total}
              data-testid="alert-bell-badge"
              className={cn(
                'absolute -top-0.5 -right-0.5 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-bold text-white shadow-sm ring-2 ring-background animate-badge-pop',
                critical > 0 ? 'bg-destructive' : 'bg-amber-500',
              )}
            >
              {total > 99 ? '99+' : total}
            </span>
          ) : null}
        </Button>
      </PopoverTrigger>
      <PopoverContent align="end" className="w-96 p-0">
        <div className="flex items-center justify-between px-4 py-3">
          <h4 className="text-sm font-semibold">Active alerts</h4>
          <Link
            href={portSlug ? (`/${portSlug}/alerts` as never) : ('/alerts' as never)}
            className="text-xs text-muted-foreground hover:text-foreground"
          >
            View all
          </Link>
        </div>
        <Separator />
        <ScrollArea className="max-h-[420px]">
          {isLoading ? (
            <div className="px-4 py-6 text-center text-sm text-muted-foreground">Loading…</div>
          ) : top.length === 0 ? (
            <div className="p-3">
              <AlertCardEmpty />
            </div>
          ) : (
            <div className="space-y-2 p-3">
              {top.map((a) => (
                <AlertCard key={a.id} alert={a} />
              ))}
            </div>
          )}
        </ScrollArea>
      </PopoverContent>
    </Popover>
  );
}