// Toast Context and Provider
const { useState, useCallback, createContext, useContext } = React;

const ToastContext = createContext();

function ToastProvider({ children }) {
    const [toasts, setToasts] = useState([]);
    
    const addToast = useCallback((message, type = 'info') => {
        const id = Date.now();
        setToasts(prev => [...prev, { id, message, type }]);
        setTimeout(() => setToasts(prev => prev.filter(t => t.id !== id)), 4000);
    }, []);
    
    return (
        <ToastContext.Provider value={addToast}>
            {children}
            <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2">
                {toasts.map(toast => (
                    <div key={toast.id} className={`px-4 py-3 rounded-lg shadow-lg flex items-center gap-3 text-sm font-medium transition-all ${
                        toast.type === 'success' ? 'bg-emerald-500 text-white' :
                        toast.type === 'error' ? 'bg-red-500 text-white' : 'bg-slate-800 text-white'
                    }`}>
                        <span>{toast.type === 'success' ? '✓' : toast.type === 'error' ? '✕' : 'ℹ'}</span>
                        <span>{toast.message}</span>
                    </div>
                ))}
            </div>
        </ToastContext.Provider>
    );
}

const useToast = () => useContext(ToastContext);

// Export to global scope
window.ToastContext = ToastContext;
window.ToastProvider = ToastProvider;
window.useToast = useToast;