/* global React, ReactDOM */
/* Pamp — toast system */

const { useState: useToastState, useEffect: useToastEffect, useCallback: useToastCallback } = React;

const ToastContext = React.createContext(null);

let _toastSeq = 0;

function ToastProvider({ children }) {
  const [toasts, setToasts] = useToastState([]);

  const remove = useToastCallback((id) => {
    setToasts((cur) => cur.filter((t) => t.id !== id));
  }, []);

  const show = useToastCallback((message, kind = "info") => {
    const id = ++_toastSeq;
    setToasts((cur) => [...cur, { id, message, kind, visible: false }]);
    // Trigger entrance
    requestAnimationFrame(() => {
      setToasts((cur) => cur.map((t) => (t.id === id ? { ...t, visible: true } : t)));
    });
    // Auto-dismiss after 3.5s
    setTimeout(() => {
      setToasts((cur) => cur.map((t) => (t.id === id ? { ...t, visible: false } : t)));
      setTimeout(() => remove(id), 260);
    }, 3500);
    return id;
  }, [remove]);

  // Convenience shorthands
  const api = React.useMemo(() => ({
    show,
    success: (m) => show(m, "success"),
    error:   (m) => show(m, "error"),
    info:    (m) => show(m, "info"),
  }), [show]);

  // Render to portal
  const portal = ReactDOM.createPortal(
    <>
      {toasts.map((t) => (
        <div key={t.id} className={`pamp-toast ${t.kind || "info"}${t.visible ? " show" : ""}`}>
          {t.message}
        </div>
      ))}
    </>,
    document.getElementById("toast-root") || document.body
  );

  return (
    <ToastContext.Provider value={api}>
      {children}
      {portal}
    </ToastContext.Provider>
  );
}

function useToast() {
  const ctx = React.useContext(ToastContext);
  if (!ctx) {
    // Fallback for callers outside provider — never throw
    return {
      show: (m) => console.warn("[toast outside provider]", m),
      success: (m) => console.warn(m),
      error:   (m) => console.warn(m),
      info:    (m) => console.warn(m),
    };
  }
  return ctx;
}

window.ToastProvider = ToastProvider;
window.useToast = useToast;