import { Bell } from "lucide-react";
import { useEffect, useRef, useState } from "react";

import { useMarkNotificationsRead, useNotifications } from "../hooks/notifications";
import { NotificationPanel } from "./NotificationPanel";

/** Колокольчик в правом верхнем углу: бейдж непрочитанных + выпадающая панель. */
export function NotificationBell({ enabled }: { enabled: boolean }) {
  const { data } = useNotifications(enabled);
  const markRead = useMarkNotificationsRead();
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);
  const unread = data?.unread_count ?? 0;

  // Закрытие панели по клику вне неё.
  useEffect(() => {
    if (!open) return;
    const onDoc = (e: MouseEvent) => {
      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
    };
    document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, [open]);

  if (!enabled) return null;

  const toggle = () => {
    const next = !open;
    setOpen(next);
    if (next && unread > 0) markRead.mutate(undefined); // открыли — гасим бейдж
  };

  return (
    <div className="notif-bell-wrap" ref={ref}>
      <button className="notif-bell" aria-label="Уведомления" onClick={toggle}>
        <Bell size={20} />
        {unread > 0 && <span className="notif-badge">{unread > 99 ? "99+" : unread}</span>}
      </button>
      {open && <NotificationPanel items={data?.items ?? []} onClose={() => setOpen(false)} />}
    </div>
  );
}