"use client";

import { useCallback, useEffect, useRef, useState } from "react";

// Globaler Popover-Manager: nur ein Popover gleichzeitig offen; Klick außerhalb
// oder Escape schließt es; ein neues Öffnen schließt das alte automatisch.
type Listener = (id: string | null) => void;
const listeners = new Set<Listener>();
let currentId: string | null = null;

function setActive(id: string | null) {
  currentId = id;
  listeners.forEach((l) => l(id));
}

export function usePopover(id: string) {
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const l: Listener = (activeId) => setOpen(activeId === id);
    listeners.add(l);
    return () => {
      listeners.delete(l);
    };
  }, [id]);

  useEffect(() => {
    if (!open) return;
    const onDown = (e: MouseEvent) => {
      if (ref.current && !ref.current.contains(e.target as Node)) setActive(null);
    };
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setActive(null);
    };
    document.addEventListener("mousedown", onDown);
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("mousedown", onDown);
      document.removeEventListener("keydown", onKey);
    };
  }, [open]);

  const toggle = useCallback(() => setActive(currentId === id ? null : id), [id]);
  const close = useCallback(() => setActive(null), []);

  return { open, toggle, close, ref };
}