/**
 * Blogibot Shared Modal System
 * Consistent modal dialogs across all plugin interfaces
 */

// Global modal functions
window.Blog82AI_Modal = {
    /**
     * Show success message modal
     */
    showSuccess: function(title, message, autoClose = true) {
        this.showMessage(title, message, '✅', true, autoClose);
    },

    /**
     * Show error message modal
     */
    showError: function(title, message) {
        this.showMessage(title, message, '❌', false, false);
    },

    /**
     * Show general message modal
     */
    showMessage: function(title, message, icon, isSuccess = true, autoClose = false) {
        // Create modal if it doesn't exist
        this.createModalIfNeeded();
        
        document.getElementById('blog82ai-message-title').textContent = title;
        document.getElementById('blog82ai-message-text').textContent = message;
        document.getElementById('blog82ai-message-icon').textContent = icon;
        
        const titleElement = document.getElementById('blog82ai-message-title');
        titleElement.style.color = isSuccess ? '#28a745' : '#dc3545';
        
        document.getElementById('blog82ai-message-modal').style.display = 'block';
        
        // Auto-close success messages after 3 seconds
        if (autoClose) {
            setTimeout(() => {
                this.closeMessage();
            }, 3000);
        }
    },

    /**
     * Show confirmation modal
     */
    showConfirm: function(title, message, onConfirm, onCancel = null) {
        this.createModalIfNeeded();
        
        // Create confirmation modal if it doesn't exist
        if (!document.getElementById('blog82ai-confirm-modal')) {
            const confirmModalHTML = `
                <!-- Blogibot Confirmation Modal -->
                <div id="blog82ai-confirm-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 10003;">
                    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 30px; border-radius: 8px; width: 400px; max-width: 90%; box-shadow: 0 4px 20px rgba(0,0,0,0.3);">
                        <div style="text-align: center;">
                            <div style="font-size: 48px; margin-bottom: 20px; color: #ff9800;">⚠️</div>
                            <h3 id="blog82ai-confirm-title" style="margin: 0 0 15px 0; color: #333;">Confirm Action</h3>
                            <p id="blog82ai-confirm-text" style="margin: 0 0 25px 0; color: #666; line-height: 1.5;">Are you sure you want to proceed?</p>
                            <div style="display: flex; gap: 10px; justify-content: center;">
                                <button type="button" id="blog82ai-confirm-cancel" 
                                        style="padding: 10px 20px; border: 1px solid #ddd; background: #f1f1f1; color: #333; border-radius: 4px; cursor: pointer; min-width: 80px;">
                                    Cancel
                                </button>
                                <button type="button" id="blog82ai-confirm-ok" 
                                        style="padding: 10px 20px; border: 1px solid #dc3545; background: #dc3545; color: white; border-radius: 4px; cursor: pointer; min-width: 80px;">
                                    OK
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            document.body.insertAdjacentHTML('beforeend', confirmModalHTML);
        }
        
        document.getElementById('blog82ai-confirm-title').textContent = title;
        document.getElementById('blog82ai-confirm-text').textContent = message;
        
        // Set up event handlers
        const cancelBtn = document.getElementById('blog82ai-confirm-cancel');
        const okBtn = document.getElementById('blog82ai-confirm-ok');
        
        // Remove existing event listeners
        cancelBtn.replaceWith(cancelBtn.cloneNode(true));
        okBtn.replaceWith(okBtn.cloneNode(true));
        
        // Add new event listeners
        document.getElementById('blog82ai-confirm-cancel').onclick = () => {
            this.closeConfirm();
            if (onCancel) onCancel();
        };
        
        document.getElementById('blog82ai-confirm-ok').onclick = () => {
            this.closeConfirm();
            if (onConfirm) onConfirm();
        };
        
        document.getElementById('blog82ai-confirm-modal').style.display = 'block';
    },

    /**
     * Close confirmation modal
     */
    closeConfirm: function() {
        const modal = document.getElementById('blog82ai-confirm-modal');
        if (modal) {
            modal.style.display = 'none';
        }
    },

    /**
     * Show loading modal
     */
    showLoading: function(message = 'Processing your request...') {
        this.createModalIfNeeded();
        
        document.getElementById('blog82ai-loading-message').textContent = message;
        document.getElementById('blog82ai-loading-modal').style.display = 'block';
        
        // Add a more prominent loading indicator and prevent background interaction
        const loadingModal = document.getElementById('blog82ai-loading-modal');
        loadingModal.style.zIndex = '99999';
        document.body.style.overflow = 'hidden'; // Prevent scrolling
    },

    /**
     * Show loading modal that persists during page reload
     */
    showLoadingForReload: function(message = 'Processing...') {
        this.showLoading(message);
        
        // Add additional styling for page reload scenarios
        const loadingModal = document.getElementById('blog82ai-loading-modal');
        if (loadingModal) {
            // Make the loading modal more prominent
            loadingModal.style.background = 'rgba(0,0,0,0.8)';
            loadingModal.style.backdropFilter = 'blur(3px)';
            
            // Update message to indicate page reload
            const messageEl = document.getElementById('blog82ai-loading-message');
            if (messageEl) {
                messageEl.innerHTML = message + '<br><small style="color: #999; margin-top: 10px; display: block;">Please wait while the page refreshes...</small>';
            }
        }
    },

    /**
     * Close message modal
     */
    closeMessage: function() {
        const modal = document.getElementById('blog82ai-message-modal');
        if (modal) {
            modal.style.display = 'none';
        }
    },

    /**
     * Close loading modal
     */
    closeLoading: function() {
        const modal = document.getElementById('blog82ai-loading-modal');
        if (modal) {
            modal.style.display = 'none';
            // Reset any special styling
            modal.style.background = 'rgba(0,0,0,0.5)';
            modal.style.backdropFilter = 'none';
        }
        // Restore body scrolling
        document.body.style.overflow = '';
    },

    /**
     * Create modal HTML if it doesn't exist
     */
    createModalIfNeeded: function() {
        if (document.getElementById('blog82ai-message-modal')) {
            return; // Already exists
        }

        const modalHTML = `
            <!-- Blogibot Message Modal -->
            <div id="blog82ai-message-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 10001;">
                <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 30px; border-radius: 8px; width: 400px; max-width: 90%; box-shadow: 0 4px 20px rgba(0,0,0,0.3);">
                    <div style="text-align: center;">
                        <div id="blog82ai-message-icon" style="font-size: 48px; margin-bottom: 20px;">✅</div>
                        <h3 id="blog82ai-message-title" style="margin: 0 0 15px 0; color: #333;">Success</h3>
                        <p id="blog82ai-message-text" style="margin: 0 0 25px 0; color: #666; line-height: 1.5;">Operation completed successfully.</p>
                        <button type="button" onclick="Blog82AI_Modal.closeMessage()" 
                                style="padding: 10px 20px; border: 1px solid #ddd; background: #0073aa; color: white; border-radius: 4px; cursor: pointer; min-width: 80px;">
                            OK
                        </button>
                    </div>
                </div>
            </div>

            <!-- Blogibot Loading Modal -->
            <div id="blog82ai-loading-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 10002;">
                <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 40px; border-radius: 12px; width: 350px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.3); border: 1px solid #ddd;">
                    <div style="font-size: 56px; margin-bottom: 25px; animation: pulse 1.5s ease-in-out infinite alternate;">⏳</div>
                    <h3 style="margin: 0 0 20px 0; color: #333; font-size: 20px;">Processing...</h3>
                    <p id="blog82ai-loading-message" style="margin: 0; color: #666; line-height: 1.6; font-size: 14px;">Processing your request...</p>
                    <div style="margin-top: 25px; width: 100%; height: 4px; background: #f0f0f0; border-radius: 2px; overflow: hidden;">
                        <div style="width: 100%; height: 100%; background: linear-gradient(90deg, #0073aa, #00a0d2); animation: progressBar 2s ease-in-out infinite;"></div>
                    </div>
                </div>
            </div>
            
            <style>
                @keyframes pulse {
                    from { transform: scale(1); opacity: 0.8; }
                    to { transform: scale(1.1); opacity: 1; }
                }
                @keyframes progressBar {
                    0% { transform: translateX(-100%); }
                    100% { transform: translateX(100%); }
                }
            </style>
        `;

        document.body.insertAdjacentHTML('beforeend', modalHTML);
    }
};

// Legacy compatibility functions for existing code
function showMessageModal(title, message, icon, isSuccess = true) {
    Blog82AI_Modal.showMessage(title, message, icon, isSuccess);
}

function closeMessageModal() {
    Blog82AI_Modal.closeMessage();
}

function showLoadingModal(message) {
    Blog82AI_Modal.showLoading(message);
}
