"use client";

import { useEffect, useRef, useSyncExternalStore, type ReactNode } from "react";

const key = (id: string) => `panel-dismissed:${id}`;
const listeners = new Set<() => void>();
const subscribe = (cb: () => void) => { listeners.add(cb); window.addEventListener("storage", cb); return () => { listeners.delete(cb); window.removeEventListener("storage", cb); }; };

function read(id: string): boolean {
  try { return window.localStorage.getItem(key(id)) === "1"; } catch { return false; }
}

/** A dismissible dialog shown once per browser. Content is rendered on the server and passed as children. */
export function PopupHost({ id, label, closeLabel = "Close", children }: { id: string; label: string; closeLabel?: string; children: ReactNode }) {
  // Server snapshot says "dismissed" so nothing flashes before the browser's stored choice is known.
  const dismissed = useSyncExternalStore(subscribe, () => read(id), () => true);
  const closeRef = useRef<HTMLButtonElement>(null);
  const close = () => {
    try { window.localStorage.setItem(key(id), "1"); } catch { /* private mode: closes for this view only */ }
    listeners.forEach((l) => l());
  };
  useEffect(() => {
    if (dismissed) return;
    closeRef.current?.focus();
    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") close(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  });
  if (dismissed) return null;
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4" onClick={close}>
      <div role="dialog" aria-modal="true" aria-label={label} className="relative max-h-[85vh] w-full max-w-2xl overflow-auto rounded-xl bg-[var(--background)] shadow-xl" onClick={(e) => e.stopPropagation()}>
        <button ref={closeRef} type="button" onClick={close} aria-label={closeLabel} className="absolute right-3 top-3 z-10 rounded-md border border-border bg-[var(--background)] px-2 py-1 text-sm">×</button>
        {children}
      </div>
    </div>
  );
}