// Providers Page Module

class ProvidersPage {
    constructor() {
        this.providers = [];
        this.init();
    }

    async init() {
        // Load data
        await this.loadProviderStats();
        await this.loadProvidersList();
        await this.loadModelsList();
        await this.loadConnectionTests();
        
        // Setup event listeners
        this.setupEventListeners();
    }

    async loadProviderStats() {
        const container = document.getElementById('provider-stats');
        if (!container) return;
        
        container.innerHTML = `
            <div class="stat-card">
                <div class="stat-icon primary">
                    <i class="fas fa-server"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-value">4</div>
                    <div class="stat-label">Total Providers</div>
                    <div class="stat-change">
                        <i class="fas fa-check-circle"></i>
                        3 active
                    </div>
                </div>
            </div>
            
            <div class="stat-card">
                <div class="stat-icon success">
                    <i class="fas fa-plug"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-value">3</div>
                    <div class="stat-label">Connected</div>
                    <div class="stat-change positive">
                        <i class="fas fa-arrow-up"></i>
                        All systems operational
                    </div>
                </div>
            </div>
            
            <div class="stat-card">
                <div class="stat-icon warning">
                    <i class="fas fa-exclamation-triangle"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-value">1</div>
                    <div class="stat-label">Issues</div>
                    <div class="stat-change">
                        <i class="fas fa-info-circle"></i>
                        DeepSeek: 85% health
                    </div>
                </div>
            </div>
            
            <div class="stat-card">
                <div class="stat-icon danger">
                    <i class="fas fa-times-circle"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-value">1</div>
                    <div class="stat-label">Offline</div>
                    <div class="stat-change">
                        <i class="fas fa-redo"></i>
                        Grok: Connection failed
                    </div>
                </div>
            </div>
        `;
    }

    async loadProvidersList() {
        const container = document.getElementById('providers-list');
        if (!container) return;
        
        this.providers = [
            { name: 'OpenAI', enabled: true, status: 'online', apiKey: 'sk-*****123', models: ['gpt-4', 'gpt-3.5-turbo'], lastUsed: '2024-01-15 14:32:15' },
            { name: 'Gemini', enabled: true, status: 'online', apiKey: 'AIza*****456', models: ['gemini-pro', 'gemini-pro-vision'], lastUsed: '2024-01-15 14:30:45' },
            { name: 'DeepSeek', enabled: true, status: 'warning', apiKey: 'sk-*****789', models: ['deepseek-chat', 'deepseek-coder'], lastUsed: '2024-01-15 14:28:12' },
            { name: 'Grok', enabled: false, status: 'offline', apiKey: 'gk-*****012', models: ['grok-beta'], lastUsed: '2024-01-12 10:15:22' }
        ];
        
        container.innerHTML = this.providers.map(provider => {
            const statusClass = provider.status === 'online' ? 'success' : 
                              provider.status === 'warning' ? 'warning' : 'danger';
            const statusIcon = provider.status === 'online' ? 'check-circle' :
                              provider.status === 'warning' ? 'exclamation-triangle' : 'times-circle';
            
            return `
                <div class="provider-card">
                    <div class="provider-header">
                        <div class="provider-info">
                            <h4 class="provider-name">${provider.name}</h4>
                            <span class="status-badge ${statusClass}">
                                <i class="fas fa-${statusIcon}"></i>
                                ${provider.status}
                            </span>
                        </div>
                        <div class="provider-actions">
                            <label class="toggle-switch">
                                <input type="checkbox" ${provider.enabled ? 'checked' : ''} data-provider="${provider.name}">
                                <span class="toggle-slider"></span>
                            </label>
                            <button class="btn-action" title="Configure" data-action="configure" data-provider="${provider.name}">
                                <i class="fas fa-cog"></i>
                            </button>
                            <button class="btn-action" title="Test Connection" data-action="test" data-provider="${provider.name}">
                                <i class="fas fa-play"></i>
                            </button>
                        </div>
                    </div>
                    <div class="provider-details">
                        <div class="detail-item">
                            <span class="detail-label">API Key:</span>
                            <code class="detail-value">${provider.apiKey}</code>
                            <button class="btn-copy" data-text="${provider.apiKey}" title="Copy">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">Models:</span>
                            <span class="detail-value">${provider.models.join(', ')}</span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">Last Used:</span>
                            <span class="detail-value">${provider.lastUsed}</span>
                        </div>
                    </div>
                </div>
            `;
        }).join('');
        
        // Add CSS for provider cards
        this.addProviderStyles();
    }

    addProviderStyles() {
        const style = document.createElement('style');
        style.textContent = `
            .provider-card {
                background-color: var(--bg-card);
                border: 1px solid var(--border-color);
                border-radius: var(--border-radius);
                padding: 1rem;
                margin-bottom: 1rem;
            }
            
            .provider-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 1rem;
            }
            
            .provider-info {
                display: flex;
                align-items: center;
                gap: 0.5rem;
            }
            
            .provider-name {
                font-size: 1rem;
                font-weight: 600;
                color: var(--text-primary);
                margin: 0;
            }
            
            .provider-actions {
                display: flex;
                align-items: center;
                gap: 0.5rem;
            }
            
            .toggle-switch {
                position: relative;
                display: inline-block;
                width: 50px;
                height: 24px;
            }
            
            .toggle-switch input {
                opacity: 0;
                width: 0;
                height: 0;
            }
            
            .toggle-slider {
                position: absolute;
                cursor: pointer;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: var(--text-light);
                transition: .4s;
                border-radius: 24px;
            }
            
            .toggle-slider:before {
                position: absolute;
                content: "";
                height: 16px;
                width: 16px;
                left: 4px;
                bottom: 4px;
                background-color: white;
                transition: .4s;
                border-radius: 50%;
            }
            
            input:checked + .toggle-slider {
                background-color: var(--success);
            }
            
            input:checked + .toggle-slider:before {
                transform: translateX(26px);
            }
            
            .provider-details {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                gap: 0.75rem;
                font-size: 0.875rem;
            }
            
            .detail-item {
                display: flex;
                align-items: center;
                gap: 0.5rem;
            }
            
            .detail-label {
                color: var(--text-secondary);
                font-weight: 500;
                min-width: 70px;
            }
            
            .detail-value {
                color: var(--text-primary);
                flex: 1;
            }
            
            .btn-copy {
                background: none;
                border: none;
                color: var(--text-secondary);
                cursor: pointer;
                font-size: 0.75rem;
                padding: 0.25rem;
                transition: color 0.2s ease;
            }
            
            .btn-copy:hover {
                color: var(--primary);
            }
        `;
        document.head.appendChild(style);
    }

    async loadModelsList() {
        const container = document.getElementById('models-list');
        if (!container) return;
        
        const models = [
            { provider: 'OpenAI', name: 'gpt-4', enabled: true, context: 8192, maxTokens: 4096 },
            { provider: 'OpenAI', name: 'gpt-3.5-turbo', enabled: true, context: 16384, maxTokens: 4096 },
            { provider: 'Gemini', name: 'gemini-pro', enabled: true, context: 32768, maxTokens: 8192 },
            { provider: 'Gemini', name: 'gemini-pro-vision', enabled: true, context: 32768, maxTokens: 4096 },
            { provider: 'DeepSeek', name: 'deepseek-chat', enabled: true, context: 16384, maxTokens: 4096 },
            { provider: 'DeepSeek', name: 'deepseek-coder', enabled: true, context: 16384, maxTokens: 4096 },
            { provider: 'Grok', name: 'grok-beta', enabled: false, context: 8192, maxTokens: 2048 }
        ];
        
        container.innerHTML = models.map(model => `
            <div class="model-item">
                <div class="model-header">
                    <span class="model-name">${model.name}</span>
                    <span class="model-provider">${model.provider}</span>
                </div>
                <div class="model-details">
                    <span class="model-detail">
                        <i class="fas fa-microchip"></i>
                        Context: ${model.context.toLocaleString()} tokens
                    </span>
                    <span class="model-detail">
                        <i class="fas fa-ruler"></i>
                        Max: ${model.maxTokens.toLocaleString()} tokens
                    </span>
                    <span class="model-status ${model.enabled ? 'enabled' : 'disabled'}">
                        <i class="fas fa-${model.enabled ? 'check' : 'times'}"></i>
                        ${model.enabled ? 'Enabled' : 'Disabled'}
                    </span>
                </div>
            </div>
        `).join('');
        
        // Add CSS for model items
        this.addModelStyles();
    }

    addModelStyles() {
        const style = document.createElement('style');
        style.textContent = `
            .model-item {
                background-color: var(--bg-secondary);
                border-radius: var(--border-radius-sm);
                padding: 0.75rem;
                margin-bottom: 0.5rem;
            }
            
            .model-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 0.5rem;
            }
            
            .model-name {
                font-weight: 600;
                color: var(--text-primary);
            }
            
            .model-provider {
                font-size: 0.75rem;
                color: var(--text-secondary);
                background-color: var(--bg-primary);
                padding: 0.25rem 0.5rem;
                border-radius: 12px;
            }
            
            .model-details {
                display: flex;
                flex-wrap: wrap;
                gap: 1rem;
                font-size: 0.75rem;
            }
            
            .model-detail {
                display: flex;
                align-items: center;
                gap: 0.25rem;
                color: var(--text-secondary);
            }
            
            .model-detail i {
                font-size: 0.625rem;
            }
            
            .model-status {
                font-size: 0.75rem;
                padding: 0.125rem 0.5rem;
                border-radius: 12px;
            }
            
            .model-status.enabled {
                background-color: rgba(16, 185, 129, 0.1);
                color: var(--success);
            }
            
            .model-status.disabled {
                background-color: rgba(239, 68, 68, 0.1);
                color: var(--danger);
            }
        `;
        document.head.appendChild(style);
    }

    async loadConnectionTests() {
        const container = document.getElementById('connection-tests');
        if (!container) return;
        
        const tests = [
            { provider: 'OpenAI', status: 'success', latency: 245, timestamp: '2024-01-15 14:35:00' },
            { provider: 'Gemini', status: 'success', latency: 189, timestamp: '2024-01-15 14:34:30' },
            { provider: 'DeepSeek', status: 'warning', latency: 520, timestamp: '2024-01-15 14:34:00' },
            { provider: 'Grok', status: 'error', latency: null, timestamp: '2024-01-15 14:33:30' }
        ];
        
        container.innerHTML = tests.map(test => {
            const statusClass = test.status === 'success' ? 'success' : 
                              test.status === 'warning' ? 'warning' : 'danger';
            const statusIcon = test.status === 'success' ? 'check-circle' :
                              test.status === 'warning' ? 'exclamation-triangle' : 'times-circle';
            
            return `
                <div class="test-result">
                    <div class="test-provider">${test.provider}</div>
                    <div class="test-status">
                        <span class="status-badge ${statusClass}">
                            <i class="fas fa-${statusIcon}"></i>
                            ${test.status}
                        </span>
                    </div>
                    <div class="test-latency">${test.latency ? `${test.latency}ms` : 'N/A'}</div>
                    <div class="test-time">${test.timestamp}</div>
                </div>
            `;
        }).join('');
        
        // Add CSS for test results
        this.addTestStyles();
    }

    addTestStyles() {
        const style = document.createElement('style');
        style.textContent = `
            .test-result {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr 2fr;
                gap: 1rem;
                align-items: center;
                padding: 0.75rem;
                border-bottom: 1px solid var(--border-color);
            }
            
            .test-result:last-child {
                border-bottom: none;
            }
            
            .test-provider {
                font-weight: 500;
                color: var(--text-primary);
            }
            
            .test-latency {
                color: var(--text-secondary);
                font-family: monospace;
            }
            
            .test-time {
                color: var(--text-light);
                font-size: 0.75rem;
            }
        `;
        document.head.appendChild(style);
    }

    setupEventListeners() {
        // Test all providers button
        const testAllBtn = document.getElementById('test-all-providers');
        if (testAllBtn) {
            testAllBtn.addEventListener('click', () => {
                this.testAllProviders();
            });
        }
        
        // Toggle switches
        document.addEventListener('change', (e) => {
            if (e.target.matches('.toggle-switch input')) {
                const provider = e.target.dataset.provider;
                const enabled = e.target.checked;
                this.toggleProvider(provider, enabled);
            }
        });
        
        // Action buttons
        document.addEventListener('click', (e) => {
            if (e.target.closest('.btn-action')) {
                const button = e.target.closest('.btn-action');
                const action = button.dataset.action;
                const provider = button.dataset.provider;
                
                switch (action) {
                    case 'configure':
                        this.configureProvider(provider);
                        break;
                    case 'test':
                        this.testProvider(provider);
                        break;
                }
            }
            
            // Copy buttons
            if (e.target.closest('.btn-copy')) {
                const button = e.target.closest('.btn-copy');
                const text = button.dataset.text;
                this.copyToClipboard(text);
                
                if (window.authManager) {
                    window.authManager.showToast('Copied to clipboard', 'success');
                }
            }
        });
    }

    toggleProvider(providerName, enabled) {
        const provider = this.providers.find(p => p.name === providerName);
        if (!provider) return;
        
        // In a real app, this would update the provider via API
        provider.enabled = enabled;
        provider.status = enabled ? 'online' : 'offline';
        
        if (window.authManager) {
            window.authManager.showToast(
                `${providerName} ${enabled ? 'enabled' : 'disabled'}`,
                enabled ? 'success' : 'warning'
            );
        }
        
        // Refresh providers list
        this.loadProvidersList();
    }

    configureProvider(providerName) {
        const provider = this.providers.find(p => p.name === providerName);
        if (!provider) return;
        
        // Show configuration modal
        const modal = document.createElement('div');
        modal.className = 'modal active';
        modal.innerHTML = `
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Configure ${providerName}</h3>
                    <button class="modal-close">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="configure-provider-form">
                        <div class="form-control">
                            <label for="api-key">API Key</label>
                            <input type="password" id="api-key" value="${provider.apiKey}" placeholder="Enter API key" required>
                        </div>
                        <div class="form-control">
                            <label for="base-url">Base URL (Optional)</label>
                            <input type="text" id="base-url" placeholder="https://api.openai.com/v1">
                        </div>
                        <div class="form-control">
                            <label for="timeout">Timeout (seconds)</label>
                            <input type="number" id="timeout" value="30" min="1" max="300">
                        </div>
                        <div class="form-control">
                            <label for="retry-count">Retry Count</label>
                            <input type="number" id="retry-count" value="3" min="0" max="10">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary close-modal">Cancel</button>
                    <button class="btn btn-primary save-config">Save Configuration</button>
                </div>
            </div>
        `;
        
        document.body.appendChild(modal);
        
        // Setup event listeners
        const closeBtn = modal.querySelector('.modal-close');
        const closeModalBtn = modal.querySelector('.close-modal');
        const saveBtn = modal.querySelector('.save-config');
        
        const closeModal = () => {
            modal.classList.remove('active');
            setTimeout(() => modal.remove(), 300);
        };
        
        closeBtn.addEventListener('click', closeModal);
        closeModalBtn.addEventListener('click', closeModal);
        
        saveBtn.addEventListener('click', () => {
            // In a real app, this would save provider configuration
            if (window.authManager) {
                window.authManager.showToast(`${providerName} configuration saved`, 'success');
            }
            closeModal();
        });
        
        // Close on background click
        modal.addEventListener('click', (e) => {
            if (e.target === modal) {
                closeModal();
            }
        });
    }

    testProvider(providerName) {
        const provider = this.providers.find(p => p.name === providerName);
        if (!provider) return;
        
        // Show testing in progress
        if (window.authManager) {
            window.authManager.showToast(`Testing ${providerName} connection...`, 'info');
        }
        
        // Simulate API test
        setTimeout(() => {
            // In a real app, this would test the provider connection via API
            const success = Math.random() > 0.3; // 70% success rate for demo
            
            if (window.authManager) {
                window.authManager.showToast(
                    `${providerName} connection ${success ? 'successful' : 'failed'}`,
                    success ? 'success' : 'error'
                );
            }
            
            // Refresh connection tests
            this.loadConnectionTests();
        }, 1500);
    }

    testAllProviders() {
        if (window.authManager) {
            window.authManager.showToast('Testing all providers...', 'info');
        }
        
        // Test each provider sequentially
        this.providers.forEach((provider, index) => {
            setTimeout(() => {
                this.testProvider(provider.name);
            }, index * 2000); // Stagger tests
        });
    }

    copyToClipboard(text) {
        navigator.clipboard.writeText(text).catch(err => {
            console.error('Failed to copy:', err);
        });
    }

    refresh() {
        this.loadProviderStats();
        this.loadProvidersList();
        this.loadModelsList();
        this.loadConnectionTests();
    }
}

// Initialize providers page when needed
window.initProviders = async () => {
    window.providersPage = new ProvidersPage();
};

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