/**
 * Blog Toast Notifications
 * Provides toast notification functionality for blog actions
 */

class BlogToast {
    constructor() {
        this.createContainer();
    }
    
    createContainer() {
        // Create toast container if it doesn't exist
        if (!document.getElementById('blog-toast-container')) {
            const container = document.createElement('div');
            container.id = 'blog-toast-container';
            container.className = 'blog-toast-container';
            document.body.appendChild(container);
            
            // Add styles
            this.addStyles();
        }
    }
    
    addStyles() {
        const styleId = 'blog-toast-styles';
        if (document.getElementById(styleId)) return;
        
        const style = document.createElement('style');
        style.id = styleId;
        style.textContent = `
            .blog-toast-container {
                position: fixed;
                top: 20px;
                right: 20px;
                z-index: 9999;
            }
            
            .blog-toast {
                background: #fff;
                border-left: 4px solid #0073aa;
                border-radius: 4px;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                margin-bottom: 10px;
                max-width: 350px;
                min-width: 300px;
                padding: 15px 20px;
                position: relative;
                transform: translateX(100%);
                transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
                opacity: 0;
            }
            
            .blog-toast.show {
                transform: translateX(0);
                opacity: 1;
            }
            
            .blog-toast.blog-toast-success {
                border-left-color: #46b450;
            }
            
            .blog-toast.blog-toast-success .blog-toast-icon {
                color: #46b450;
            }
            
            .blog-toast.blog-toast-error {
                border-left-color: #dc3232;
            }
            
            .blog-toast.blog-toast-error .blog-toast-icon {
                color: #dc3232;
            }
            
            .blog-toast.blog-toast-warning {
                border-left-color: #ffb900;
            }
            
            .blog-toast.blog-toast-warning .blog-toast-icon {
                color: #ffb900;
            }
            
            .blog-toast.blog-toast-info {
                border-left-color: #0073aa;
            }
            
            .blog-toast.blog-toast-info .blog-toast-icon {
                color: #0073aa;
            }
            
            .blog-toast-header {
                display: flex;
                align-items: center;
                margin-bottom: 5px;
            }
            
            .blog-toast-icon {
                font-size: 16px;
                margin-right: 10px;
                font-weight: bold;
            }
            
            .blog-toast-title {
                font-weight: 600;
                font-size: 14px;
                color: #333;
            }
            
            .blog-toast-message {
                color: #666;
                font-size: 13px;
                line-height: 1.4;
            }
            
            .blog-toast-close {
                position: absolute;
                top: 8px;
                right: 10px;
                background: none;
                border: none;
                cursor: pointer;
                font-size: 16px;
                color: #999;
                padding: 0;
                width: 20px;
                height: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            
            .blog-toast-close:hover {
                color: #333;
            }
        `;
        document.head.appendChild(style);
    }
    
    show(message, type = 'info', title = null, duration = 5000) {
        const toast = this.createToast(message, type, title);
        const container = document.getElementById('blog-toast-container');
        
        container.appendChild(toast);
        
        // Trigger animation
        setTimeout(() => {
            toast.classList.add('show');
        }, 10);
        
        // Auto remove after duration
        if (duration > 0) {
            setTimeout(() => {
                this.remove(toast);
            }, duration);
        }
        
        return toast;
    }
    
    createToast(message, type, title) {
        const toast = document.createElement('div');
        toast.className = `blog-toast blog-toast-${type}`;
        
        const icons = {
            success: '✓',
            error: '✗',
            warning: '⚠',
            info: 'ℹ'
        };
        
        const titles = {
            success: title || 'Success',
            error: title || 'Error',
            warning: title || 'Warning',
            info: title || 'Info'
        };
        
        toast.innerHTML = `
            <div class="blog-toast-header">
                <span class="blog-toast-icon">${icons[type] || icons.info}</span>
                <span class="blog-toast-title">${titles[type]}</span>
            </div>
            <div class="blog-toast-message">${message}</div>
            <button class="blog-toast-close" onclick="this.closest('.blog-toast').remove()">×</button>
        `;
        
        return toast;
    }
    
    remove(toast) {
        if (toast && toast.parentNode) {
            toast.classList.remove('show');
            setTimeout(() => {
                if (toast.parentNode) {
                    toast.parentNode.removeChild(toast);
                }
            }, 300);
        }
    }
    
    success(message, title = null, duration = 5000) {
        return this.show(message, 'success', title, duration);
    }
    
    error(message, title = null, duration = 7000) {
        return this.show(message, 'error', title, duration);
    }
    
    warning(message, title = null, duration = 6000) {
        return this.show(message, 'warning', title, duration);
    }
    
    info(message, title = null, duration = 5000) {
        return this.show(message, 'info', title, duration);
    }
    
    // Utility methods
    clear() {
        const container = document.getElementById('blog-toast-container');
        if (container) {
            container.innerHTML = '';
        }
    }
    
    showBlogAction(action, success, message) {
        const actionTitles = {
            save: 'Save Draft',
            publish: 'Publish Blog',
            edit: 'Edit Blog',
            delete: 'Delete Blog',
            image: 'Image Generation'
        };
        
        const title = actionTitles[action] || 'Blog Action';
        
        if (success) {
            this.success(message, title);
        } else {
            this.error(message, title);
        }
    }
}

// Create global instance
window.BlogToast = new BlogToast();

// Also expose the class
window.BlogToastClass = BlogToast;
