src/pips/static/js/ui/dom-manager.js

/**
 * DOM Manager - Handles DOM references, basic UI operations, and status management
 */
import { Logger } from '../core/logger.js';

export class DOMManager {
    constructor() {
        this.elements = {};
    }

    setupDOMReferences() {
        // Cache all DOM elements
        this.elements = {
            // Input elements
            questionInput: document.getElementById('questionInput'),
            imageInput: document.getElementById('imageInput'),
            imagePreview: document.getElementById('imagePreview'),
            
            // Button elements
            solveBtn: document.getElementById('solveBtn'),
            interruptBtn: document.getElementById('interruptBtn'),
            settingsBtn: document.getElementById('settingsBtn'),
            downloadBtn: document.getElementById('downloadBtn'),
            newSessionBtn: document.getElementById('newSessionBtn'),
            
            // UI elements
            chatArea: document.getElementById('chatArea'),
            statusIndicator: document.getElementById('statusIndicator'),
            progressContainer: document.getElementById('progressContainer'),
            progressFill: document.getElementById('progressFill'),
            sessionInfo: document.getElementById('sessionInfo'),
            
            // Settings modal elements
            settingsModal: document.getElementById('settingsModal'),
            settingsForm: document.getElementById('settingsForm'),
            closeBtn: document.querySelector('.close'),
            
            // Form elements
            modelSelect: document.getElementById('modelSelect'),
            generatorModelSelect: document.getElementById('generatorModelSelect'),
            criticModelSelect: document.getElementById('criticModelSelect'),
            openaiApiKeyInput: document.getElementById('openaiApiKeyInput'),
            googleApiKeyInput: document.getElementById('googleApiKeyInput'),
            anthropicApiKeyInput: document.getElementById('anthropicApiKeyInput'),
            maxIterations: document.getElementById('maxIterations'),
            temperature: document.getElementById('temperature'),
            maxTokens: document.getElementById('maxTokens'),
            maxExecutionTime: document.getElementById('maxExecutionTime'),
            pipsModeSwitch: document.getElementById('pipsModeSwitch'),
            pipsModeAgent: document.getElementById('pipsModeAgent'),
            pipsModeInteractive: document.getElementById('pipsModeInteractive'),
            modeDescription: document.getElementById('modeDescription'),
            customRules: document.getElementById('customRules'),
            customRulesSettings: document.getElementById('customRulesSettings'),
            
            // Session elements
            sessionsToggle: document.getElementById('sessionsToggle'),
            sessionsContainer: document.getElementById('sessionsContainer'),
            sessionsList: document.getElementById('sessionsList'),
            clearSessionsBtn: document.getElementById('clearSessionsBtn'),
            exportSessionsBtn: document.getElementById('exportSessionsBtn'),
            importSessionsBtn: document.getElementById('importSessionsBtn'),
            importSessionsInput: document.getElementById('importSessionsInput'),
            
            // Upload elements
            imageUpload: document.querySelector('.image-upload'),
            imageUploadBtn: document.querySelector('.image-upload-btn')
        };

        // Verify critical elements exist
        const criticalElements = [
            'questionInput', 'solveBtn', 'chatArea', 'statusIndicator'
        ];

        for (const elementName of criticalElements) {
            if (!this.elements[elementName]) {
                Logger.error(`Critical element missing: ${elementName}`);
            }
        }

        Logger.debug('DOM', 'DOM references set up successfully');
    }

    async initializeIcons() {
        try {
            if (typeof feather !== 'undefined') {
                feather.replace();
                Logger.log('Feather icons initialized successfully');
            } else {
                Logger.warn('Feather icons library not found');
            }
        } catch (e) {
            Logger.error('Error initializing Feather icons:', e);
        }
    }

    updateStatus(message, type = 'info') {
        this.elements.statusIndicator.textContent = message;
        this.elements.statusIndicator.className = `status-bar show ${type}`;
        
        // Auto-hide status after 5 seconds unless it's an error
        if (type !== 'error') {
            setTimeout(() => {
                this.elements.statusIndicator.classList.remove('show');
            }, 5000);
        }
    }

    updateSessionInfo(text) {
        this.elements.sessionInfo.textContent = text;
    }

    resetSolvingState() {
        this.elements.solveBtn.style.display = 'inline-flex';
        this.elements.interruptBtn.style.display = 'none';
        this.elements.questionInput.disabled = false;
        this.elements.progressContainer.classList.remove('show');
        this.elements.progressFill.style.width = '0%';
    }

    setSolvingState() {
        this.elements.solveBtn.style.display = 'none';
        this.elements.interruptBtn.style.display = 'inline-flex';
        this.elements.questionInput.disabled = true;
        this.elements.progressContainer.classList.add('show');
    }

    updateProgress(progress) {
        if (progress !== undefined) {
            this.elements.progressFill.style.width = `${progress}%`;
        }
    }

    clearInputs() {
        this.elements.questionInput.value = '';
        this.elements.imagePreview.style.display = 'none';
    }

    getElement(name) {
        return this.elements[name];
    }

    getAllElements() {
        return this.elements;
    }
}

// Create singleton instance
export const domManager = new DOMManager();