// MY GENI — Phase 25 · #24 · Central toast host.
//
// One fixed region (bottom-center) owns every toast: consistent position,
// 4s lifetime, proper stacking instead of overlapping singletons. Any
// component can push via window.MYGENI_TOAST.push(text) — no local toast
// state, no per-page CSS.
function ToastHost() {
  const [toasts, setToasts] = React.useState([]);

  React.useEffect(() => {
    window.MYGENI_TOAST = {
      push(text) {
        const id = Date.now() + Math.random();
        setToasts(prev => [...prev, { id, text }]);
        setTimeout(() => setToasts(prev => prev.filter(t => t.id !== id)), 4000);
      },
    };
    return () => { delete window.MYGENI_TOAST; };
  }, []);

  if (!toasts.length) return null;
  return (
    <div className="toast-region" role="status" aria-live="polite">
      {toasts.map((t, i) => (
        <div className="toast" key={t.id} style={{ bottom: 24 + i * 60 }}>
          <span className="toast-icon">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
              <path d="M5 12l4 4L19 7" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </span>
          <span className="toast-text">{t.text}</span>
          <span className="toast-tag">local prototype</span>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { ToastHost });