// Toast notifications context
const ToastContext = React.createContext(null);

function ToastProvider({ children }) {
  const [toasts, setToasts] = React.useState([]);
  const remove = React.useCallback((id) => {
    setToasts((prev) => prev.filter(t => t.id !== id));
  }, []);
  const notify = React.useCallback((message, type = 'info', duration = 4000) => {
    const id = Math.random().toString(36).slice(2);
    setToasts((prev) => [...prev, { id, message, type }]);
    if (duration > 0) setTimeout(() => remove(id), duration);
    return id;
  }, [remove]);
  const api = React.useMemo(() => ({
    notify,
    success: (m, d) => notify(m, 'success', d),
    error: (m, d) => notify(m, 'error', d),
    info: (m, d) => notify(m, 'info', d),
    remove,
  }), [notify, remove]);

  return (
    <ToastContext.Provider value={api}>
      {children}
      <div className="toasts-container">
        {toasts.map(t => (
          <div key={t.id} className={`toast ${t.type}`} onClick={() => remove(t.id)}>
            {t.message}
          </div>
        ))}
      </div>
    </ToastContext.Provider>
  );
}

function useToast() { return React.useContext(ToastContext); }

window.Toast = { ToastProvider, useToast };