const ToastContext = React.createContext();

function ToastProvider({ children }) {
    const [toasts, setToasts] = React.useState([]);

    const addToast = (message, type = 'info') => {
        const id = Date.now() + Math.random();
        setToasts(prev => [...prev, { id, message, type }]);
        
        // Auto dismiss
        setTimeout(() => {
            removeToast(id);
        }, 4000);
    };

    const removeToast = (id) => {
        setToasts(prev => prev.filter(t => t.id !== id));
    };

    return (
        <ToastContext.Provider value={{ addToast }}>
            {children}
            <div className="fixed top-5 right-5 z-[9999] flex flex-col gap-3 pointer-events-none">
                {toasts.map(toast => (
                    <div 
                        key={toast.id}
                        className={`pointer-events-auto min-w-[300px] max-w-md p-4 rounded-lg shadow-xl flex items-start gap-3 transform transition-all duration-300 animate-slide-in ${
                            toast.type === 'success' ? 'bg-white border-l-4 border-green-500 text-gray-800' :
                            toast.type === 'error' ? 'bg-white border-l-4 border-red-500 text-gray-800' :
                            'bg-gray-800 text-white'
                        }`}
                        role="alert"
                    >
                        <div className={`mt-0.5 shrink-0 ${
                            toast.type === 'success' ? 'text-green-500' :
                            toast.type === 'error' ? 'text-red-500' :
                            'text-gray-400'
                        }`}>
                            <div className={`icon-${
                                toast.type === 'success' ? 'check-circle' :
                                toast.type === 'error' ? 'alert-circle' :
                                'info'
                            } text-xl`}></div>
                        </div>
                        <div className="flex-1">
                            <h4 className={`font-bold text-sm ${
                                toast.type === 'success' ? 'text-green-800' :
                                toast.type === 'error' ? 'text-red-800' :
                                'text-gray-100'
                            }`}>
                                {toast.type === 'success' ? 'Berhasil' : 
                                 toast.type === 'error' ? 'Gagal' : 'Info'}
                            </h4>
                            <p className="text-sm mt-0.5 opacity-90 leading-snug">{toast.message}</p>
                        </div>
                        <button 
                            onClick={() => removeToast(toast.id)} 
                            className="text-gray-400 hover:text-gray-600 transition-colors"
                        >
                            <div className="icon-x text-lg"></div>
                        </button>
                    </div>
                ))}
            </div>
        </ToastContext.Provider>
    );
}

const useToast = () => {
    const context = React.useContext(ToastContext);
    if (!context) {
        throw new Error('useToast must be used within a ToastProvider');
    }
    return context;
};

// Expose globally
window.ToastSystem = {
    ToastProvider,
    useToast
};