import { useEffect, useRef, useState } from "react";
import { useNavigate } from "react-router";
import { t } from "@lingui/core/macro";
import { useWS } from "../hooks/useWS.ts";

export function NotificationBell() {
  const { unreadNotificationCount, lastNotification } = useWS();
  const navigate = useNavigate();
  const [ringing, setRinging] = useState(false);
  const animatingRef = useRef(false);
  // Initialised to the ID already in context — so the first effect run never
  // animates, regardless of whether lastNotification is null or stale.
  const lastSeenIdRef = useRef<string | null>(lastNotification?.id ?? null);

  useEffect(() => {
    if (!lastNotification) return;
    if (lastNotification.id === lastSeenIdRef.current) return;
    lastSeenIdRef.current = lastNotification.id;

    if (animatingRef.current) return;
    animatingRef.current = true;
    const tStart = setTimeout(() => setRinging(true), 0);
    const tEnd = setTimeout(() => {
      setRinging(false);
      animatingRef.current = false;
    }, 700);
    return () => {
      clearTimeout(tStart);
      clearTimeout(tEnd);
    };
  }, [lastNotification]);

  return (
    <button
      type="button"
      className={`notification-bell${
        ringing ? " notification-bell--ringing" : ""
      }`}
      onClick={() => navigate("/notifications")}
      aria-label={unreadNotificationCount > 0
        ? t`Notifications (${unreadNotificationCount} unread)`
        : t`Notifications`}
    >
      <span className="notification-bell-icon">🔔</span>
      {unreadNotificationCount > 0 && (
        <span className="notification-badge">
          {unreadNotificationCount > 99 ? "99+" : unreadNotificationCount}
        </span>
      )}
    </button>
  );
}