// Settings Page Module

class SettingsPage {
    constructor() {
        this.settings = {};
        this.init();
    }

    async init() {
        // Load settings
        await this.loadSettings();
        await this.loadSystemInfo();
        
        // Setup event listeners
        this.setupEventListeners();
    }

    async loadSettings() {
        try {
            // In a real app, this would fetch from /api/settings
            this.settings = {
                serverPort: 8080,
                logLevel: 'info',
                dbPath: './data/llm-proxy.db',
                backupInterval: 24,
                sessionTimeout: 30,
                enableRateLimiting: true,
                enableCostTracking: true,
                enableMetrics: true,
                enableWebSocket: true
            };
            
            this.renderSettingsForm();
            
        } catch (error) {
            console.error('Error loading settings:', error);
        }
    }

    renderSettingsForm() {
        const form = document.getElementById('settings-form');
        if (!form) return;
        
        // Server port
        const portInput = document.getElementById('server-port');
        if (portInput) portInput.value = this.settings.serverPort;
        
        // Log level
        const logLevelSelect = document.getElementById('log-level');
        if (logLevelSelect) logLevelSelect.value = this.settings.logLevel;
        
        // Database path
        const dbPathInput = document.getElementById('db-path');
        if (dbPathInput) dbPathInput.value = this.settings.dbPath;
        
        // Backup interval
        const backupInput = document.getElementById('backup-interval');
        if (backupInput) backupInput.value = this.settings.backupInterval;
        
        // Session timeout
        const sessionInput = document.getElementById('session-timeout');
        if (sessionInput) sessionInput.value = this.settings.sessionTimeout;
    }

    async loadSystemInfo() {
        const container = document.getElementById('system-info');
        if (!container) return;
        
        // In a real app, this would fetch system information
        const systemInfo = {
            version: '1.0.0',
            uptime: '5 days, 3 hours',
            platform: 'Linux x86_64',
            node: 'v18.17.0',
            memory: '2.4 GB / 8.0 GB',
            disk: '45 GB / 256 GB',
            lastBackup: '2024-01-15 02:00:00',
            lastRestart: '2024-01-10 14:30:00'
        };
        
        container.innerHTML = `
            <div class="info-grid">
                <div class="info-item">
                    <span class="info-label">Version:</span>
                    <span class="info-value">${systemInfo.version}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Uptime:</span>
                    <span class="info-value">${systemInfo.uptime}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Platform:</span>
                    <span class="info-value">${systemInfo.platform}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Node.js:</span>
                    <span class="info-value">${systemInfo.node}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Memory:</span>
                    <span class="info-value">${systemInfo.memory}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Disk:</span>
                    <span class="info-value">${systemInfo.disk}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Last Backup:</span>
                    <span class="info-value">${systemInfo.lastBackup}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Last Restart:</span>
                    <span class="info-value">${systemInfo.lastRestart}</span>
                </div>
            </div>
        `;
        
        // Add CSS for info grid
        this.addInfoStyles();
    }

    addInfoStyles() {
        const style = document.createElement('style');
        style.textContent = `
            .info-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
                gap: 1rem;
            }
            
            .info-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0.75rem;
                background-color: var(--bg-secondary);
                border-radius: var(--border-radius-sm);
            }
            
            .info-label {
                font-size: 0.875rem;
                color: var(--text-secondary);
                font-weight: 500;
            }
            
            .info-value {
                font-size: 0.875rem;
                color: var(--text-primary);
                font-family: monospace;
            }
            
            .form-section {
                margin-bottom: 2rem;
                padding-bottom: 1.5rem;
                border-bottom: 1px solid var(--border-color);
            }
            
            .form-section:last-child {
                border-bottom: none;
                margin-bottom: 0;
            }
            
            .form-section h4 {
                font-size: 1rem;
                font-weight: 600;
                color: var(--text-primary);
                margin-bottom: 1rem;
            }
        `;
        document.head.appendChild(style);
    }

    setupEventListeners() {
        // Settings form
        const form = document.getElementById('settings-form');
        if (form) {
            form.addEventListener('submit', (e) => {
                e.preventDefault();
                this.saveSettings();
            });
        }
        
        // Reset settings button
        const resetBtn = document.getElementById('reset-settings');
        if (resetBtn) {
            resetBtn.addEventListener('click', () => {
                this.resetSettings();
            });
        }
        
        // Database management buttons
        const backupBtn = document.getElementById('backup-db');
        if (backupBtn) {
            backupBtn.addEventListener('click', () => {
                this.backupDatabase();
            });
        }
        
        const optimizeBtn = document.getElementById('optimize-db');
        if (optimizeBtn) {
            optimizeBtn.addEventListener('click', () => {
                this.optimizeDatabase();
            });
        }
    }

    saveSettings() {
        // Collect form values
        const settings = {
            serverPort: parseInt(document.getElementById('server-port').value) || 8080,
            logLevel: document.getElementById('log-level').value,
            dbPath: document.getElementById('db-path').value,
            backupInterval: parseInt(document.getElementById('backup-interval').value) || 24,
            sessionTimeout: parseInt(document.getElementById('session-timeout').value) || 30,
            dashboardPassword: document.getElementById('dashboard-password').value
        };
        
        // Validate settings
        if (settings.serverPort < 1024 || settings.serverPort > 65535) {
            if (window.authManager) {
                window.authManager.showToast('Server port must be between 1024 and 65535', 'error');
            }
            return;
        }
        
        if (settings.backupInterval < 1 || settings.backupInterval > 168) {
            if (window.authManager) {
                window.authManager.showToast('Backup interval must be between 1 and 168 hours', 'error');
            }
            return;
        }
        
        if (settings.sessionTimeout < 5 || settings.sessionTimeout > 1440) {
            if (window.authManager) {
                window.authManager.showToast('Session timeout must be between 5 and 1440 minutes', 'error');
            }
            return;
        }
        
        // In a real app, this would save settings via API
        this.settings = { ...this.settings, ...settings };
        
        if (window.authManager) {
            window.authManager.showToast('Settings saved successfully', 'success');
        }
        
        // Clear password field
        document.getElementById('dashboard-password').value = '';
    }

    resetSettings() {
        if (confirm('Are you sure you want to reset all settings to default values?')) {
            // Reset to defaults
            this.settings = {
                serverPort: 8080,
                logLevel: 'info',
                dbPath: './data/llm-proxy.db',
                backupInterval: 24,
                sessionTimeout: 30,
                enableRateLimiting: true,
                enableCostTracking: true,
                enableMetrics: true,
                enableWebSocket: true
            };
            
            this.renderSettingsForm();
            
            if (window.authManager) {
                window.authManager.showToast('Settings reset to defaults', 'success');
            }
        }
    }

    backupDatabase() {
        if (window.authManager) {
            window.authManager.showToast('Starting database backup...', 'info');
        }
        
        // Simulate backup process
        setTimeout(() => {
            // In a real app, this would trigger a database backup via API
            if (window.authManager) {
                window.authManager.showToast('Database backup completed successfully', 'success');
            }
        }, 2000);
    }

    optimizeDatabase() {
        if (confirm('Optimize database? This may improve performance but could take a few moments.')) {
            if (window.authManager) {
                window.authManager.showToast('Optimizing database...', 'info');
            }
            
            // Simulate optimization process
            setTimeout(() => {
                // In a real app, this would optimize the database via API
                if (window.authManager) {
                    window.authManager.showToast('Database optimization completed', 'success');
                }
            }, 3000);
        }
    }

    refresh() {
        this.loadSettings();
        this.loadSystemInfo();
    }
}

// Initialize settings page when needed
window.initSettings = async () => {
    window.settingsPage = new SettingsPage();
};

// Export for use in other modules
if (typeof module !== 'undefined' && module.exports) {
    module.exports = SettingsPage;
}