// Shared UI components for keyword grabber extension

// Create and manage a progress dialog
class ProgressDialog {
    constructor() {
        this.dialog = null;
        this.messageElement = null;
    }

    create() {
        // Create dialog if it doesn't exist
        if (!this.dialog) {
            this.dialog = document.createElement('div');
            this.dialog.style.cssText = `
                position: fixed;
                top: 20px;
                right: 20px;
                background: white;
                border: 1px solid #ccc;
                border-radius: 4px;
                padding: 15px 20px;
                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
                z-index: 10000;
                font-family: Arial, sans-serif;
                min-width: 200px;
            `;

            // Add progress message
            this.messageElement = document.createElement('div');
            this.messageElement.style.cssText = `
                margin-bottom: 10px;
                color: #333;
                font-size: 14px;
            `;
            this.dialog.appendChild(this.messageElement);

            // Add spinner
            const spinner = document.createElement('div');
            spinner.style.cssText = `
                width: 20px;
                height: 20px;
                border: 2px solid #f3f3f3;
                border-top: 2px solid #3498db;
                border-radius: 50%;
                animation: spin 1s linear infinite;
                margin: 10px auto;
            `;
            this.dialog.appendChild(spinner);

            // Add spinner animation
            const style = document.createElement('style');
            style.textContent = `
                @keyframes spin {
                    0% { transform: rotate(0deg); }
                    100% { transform: rotate(360deg); }
                }
            `;
            document.head.appendChild(style);

            document.body.appendChild(this.dialog);
        }
        return this;
    }

    updateProgress(message) {
        if (this.messageElement) {
            this.messageElement.textContent = message;
        }
    }

    remove() {
        if (this.dialog && this.dialog.parentNode) {
            this.dialog.parentNode.removeChild(this.dialog);
            this.dialog = null;
            this.messageElement = null;
        }
    }
}

// Export for use in other scripts
window.KeywordGrabberUI = {
    ProgressDialog
};