"use client";

/**
 * NotificationBell — header affordance for signed-in users. Links to the
 * /notifications page and shows a dot when there are unread items. The
 * unread count is fetched once on mount (good enough until websocket/push
 * delivery lands); visiting the page marks everything read.
 */

import { useEffect, useState } from "react";
import Link from "next/link";
import { Bell } from "lucide-react";
import { notifications } from "@/lib/social";

export function NotificationBell() {
  const [unread, setUnread] = useState(0);

  useEffect(() => {
    let cancelled = false;
    notifications
      .unreadCount()
      .then((r) => {
        if (!cancelled) setUnread(r?.count ?? 0);
      })
      .catch(() => {
        /* badge is non-critical — ignore */
      });
    return () => {
      cancelled = true;
    };
  }, []);

  return (
    <Link
      href="/notifications"
      aria-label={
        unread > 0 ? `Notifications (${unread} unread)` : "Notifications"
      }
      className="relative size-9 inline-flex items-center justify-center rounded-lg text-foreground hover:bg-muted transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring"
    >
      <Bell className="size-5" />
      {unread > 0 ? (
        <span className="absolute top-1.5 right-1.5 size-2 rounded-full bg-primary ring-2 ring-background" />
      ) : null}
    </Link>
  );
}