cameleer-server/ui/src/components/NotificationBell.tsx

import { Link } from 'react-router';
import { Bell } from 'lucide-react';
import { useUnreadCount } from '../api/queries/alerts';
import { useSelectedEnv } from '../api/queries/alertMeta';
import css from './NotificationBell.module.css';

/**
 * Global notification bell shown in the layout header. Links to the alerts
 * inbox and renders a badge coloured by the highest unread severity
 * (CRITICAL > WARNING > INFO) — matches the sidebar SeverityBadge palette.
 */
export function NotificationBell() {
  const env = useSelectedEnv();
  const { data } = useUnreadCount();

  if (!env) return null;

  const total = data?.total ?? 0;
  const bySeverity = data?.bySeverity ?? {};
  const severityClass =
    (bySeverity.CRITICAL ?? 0) > 0 ? css.badgeCritical
    : (bySeverity.WARNING ?? 0) > 0 ? css.badgeWarning
    : css.badgeInfo;

  return (
    <Link
      to="/alerts/inbox"
      role="button"
      aria-label={`Notifications (${total} unread)`}
      className={css.bell}
    >
      <Bell size={16} />
      {total > 0 && (
        <span className={`${css.badge} ${severityClass}`} aria-hidden>
          {total > 99 ? '99+' : total}
        </span>
      )}
    </Link>
  );
}