Modal

import { useEffect, useRef, type ReactNode } from 'react';

/**
 * Fenêtre centrée, basée sur <dialog> : focus piégé, Échap et fond assombri gérés par le navigateur.
 * Fermée par ✕, Échap ou un clic sur le fond. Entrée et sortie animées par les attributs
 * data-starting-style / data-ending-style (voir .modal dans styles.css).
 * `children` peut être une fonction qui reçoit `close` : pour fermer depuis un bouton du contenu avec la même sortie animée.
 * `small` : fenêtre étroite, pour une simple question.
 */
export default function Modal({ title, onClose, small, children }: { title: string; onClose: () => void; small?: boolean; children: ReactNode | ((close: () => void) => ReactNode) }) {
  const ref = useRef<HTMLDialogElement>(null);
  const closing = useRef(false);
  // (pas de close() au démontage : il déclencherait onClose, et le retrait du DOM suffit)
  useEffect(() => {
    const d = ref.current!;
    if (d.open) return;
    d.setAttribute('data-starting-style', '');
    d.showModal();
    // calcule le style de départ (transparent, réduit) avant de le retirer, sinon la transition ne part pas
    void d.offsetWidth;
    d.removeAttribute('data-starting-style');
  }, []);

  /** Joue la sortie puis ferme : close() déclenche onClose, qui démonte la fenêtre. */
  const close = () => {
    const d = ref.current;
    if (!d || closing.current) return;
    closing.current = true;
    d.setAttribute('data-ending-style', '');
    void Promise.allSettled(d.getAnimations().map((a) => a.finished)).then(() => d.close());
  };

  const titleId = `modal-${title.replace(/\W+/g, '-')}`;
  return (
    <dialog
      ref={ref}
      className={small ? 'modal modal-small' : 'modal'}
      aria-labelledby={titleId}
      onClose={onClose}
      onCancel={(e) => {
        e.preventDefault();
        close();
      }}
      onKeyDown={(e) => e.stopPropagation()}
      onClick={(e) => e.target === ref.current && close()}
    >
      <div className="modal-body">
        <div className="map-menu-head">
          <h2 id={titleId}>{title}</h2>
          <button className="map-menu-close" onClick={close} aria-label="Fermer">
            <svg viewBox="0 0 20 20" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" aria-hidden="true">
              <path d="M5 5l10 10M15 5L5 15" />
            </svg>
          </button>
        </div>
        {typeof children === 'function' ? children(close) : children}
      </div>
    </dialog>
  );
}