// Modal functionality
function setupModal(modalId, openBtnId, closeBtnId) {
    const modal = document.getElementById(modalId);
    const openBtn = document.getElementById(openBtnId);
    const closeBtn = document.getElementById(closeBtnId);
    
    if (openBtn) {
        openBtn.addEventListener('click', () => {
            modal.classList.remove('hidden');
        });
    }
    
    if (closeBtn) {
        closeBtn.addEventListener('click', () => {
            modal.classList.add('hidden');
        });
    }
    
    // Close modal when clicking outside
    window.addEventListener('click', (event) => {
        if (event.target === modal) {
            modal.classList.add('hidden');
        }
    });
}

// Initialize modals and event listeners
document.addEventListener('DOMContentLoaded', () => {
    // Setup modals
    setupModal('upload-modal', 'upload-btn', 'close-modal');
    setupModal('training-modal', 'train-btn', 'close-training-modal');
    
    // Listen for custom events from web components
    document.addEventListener('upload-clicked', () => {
        document.getElementById('upload-modal').classList.remove('hidden');
    });
    
    document.addEventListener('train-clicked', () => {
        document.getElementById('training-modal').classList.remove('hidden');
    });
    
    // File upload interaction
    const fileUpload = document.querySelector('.file-upload');
    const fileInput = document.getElementById('file-input');
    
    if (fileUpload && fileInput) {
        fileUpload.addEventListener('click', function() {
            fileInput.click();
        });
        
        fileUpload.addEventListener('dragover', function(e) {
            e.preventDefault();
            this.classList.add('border-purple-500', 'bg-purple-900');
        });
        
        fileUpload.addEventListener('dragleave', function(e) {
            e.preventDefault();
            this.classList.remove('border-purple-500', 'bg-purple-900');
        });
        
        fileUpload.addEventListener('drop', function(e) {
            e.preventDefault();
            this.classList.remove('border-purple-500', 'bg-purple-900');
            // Handle dropped files
            console.log('Files dropped:', e.dataTransfer.files);
        });
    }
    
    // MoStar Quantum AI API Integration
    const API_BASE = 'https://basic.mo-overlord.tech/realtime';
    const QUANTUM_TIER = 'basic';
    const TEMPORAL_MODE = 'realtime';
    
    // Get AI Assistant Persona
    async function getAIAssistant() {
        try {
            const response = await fetch(`${API_BASE}/ai-assistant`, {
                headers: {
                    'Authorization': 'Bearer YOUR_BEARER_TOKEN_HERE',
                    'Content-Type': 'application/json'
                }
            });
            const data = await response.json();
            console.log('AI Assistant:', data);
            return data;
        } catch (error) {
            console.error('Error fetching AI assistant:', error);
        }
    }
    
    // Get Enhancement Roadmap
    async function getEnhancementRoadmap() {
        try {
            const response = await fetch(`${API_BASE}/enhancement-roadmap`);
            const data = await response.json();
            console.log('Enhancement Roadmap:', data);
            return data;
        } catch (error) {
            console.error('Error fetching enhancement roadmap:', error);
        }
    }
    
    // Submit Roadmap Feedback
    async function submitRoadmapFeedback(feedback) {
        try {
            const response = await fetch(`${API_BASE}/roadmap-feedback`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(feedback)
            });
            const data = await response.json();
            console.log('Feedback submitted:', data);
            return data;
        } catch (error) {
            console.error('Error submitting feedback:', error);
        }
    }
    
    // Generate Image
    async function generateImage(prompt, n = 1, size = '512x512') {
        try {
            const response = await fetch(`${API_BASE}/images/generations`, {
                method: 'POST',
                headers: {
                    'Authorization': 'Bearer YOUR_BEARER_TOKEN_HERE',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ prompt, n, size })
            });
            const data = await response.json();
            console.log('Generated images:', data);
            return data;
        } catch (error) {
            console.error('Error generating image:', error);
        }
    }
    
    // Create Embedding
    async function createEmbedding(model, input) {
        try {
            const response = await fetch(`${API_BASE}/embeddings`, {
                method: 'POST',
                headers: {
                    'Authorization': 'Bearer YOUR_BEARER_TOKEN_HERE',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ model, input })
            });
            const data = await response.json();
            console.log('Embedding created:', data);
            return data;
        } catch (error) {
            console.error('Error creating embedding:', error);
        }
    }
    
    // Create Transcription
    async function createTranscription(file, model, prompt = '', responseFormat = 'json') {
        try {
            const formData = new FormData();
            formData.append('file', file);
            formData.append('model', model);
            formData.append('prompt', prompt);
            formData.append('response_format', responseFormat);
            
            const response = await fetch(`${API_BASE}/audio/transcriptions`, {
                method: 'POST',
                headers: {
                    'Authorization': 'Bearer YOUR_BEARER_TOKEN_HERE'
                },
                body: formData
            });
            const data = await response.json();
            console.log('Transcription created:', data);
            return data;
        } catch (error) {
            console.error('Error creating transcription:', error);
        }
    }
    
    // Create Moderation
    async function createModeration(input, model = 'text-moderation-stable') {
        try {
            const response = await fetch(`${API_BASE}/moderations`, {
                method: 'POST',
                headers: {
                    'Authorization': 'Bearer YOUR_BEARER_TOKEN_HERE',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ input, model })
            });
            const data = await response.json();
            console.log('Moderation result:', data);
            return data;
        } catch (error) {
            console.error('Error creating moderation:', error);
        }
    }
    
    // Upload File
    async function uploadFile(file, purpose) {
        try {
            const formData = new FormData();
            formData.append('file', file);
            formData.append('purpose', purpose);
            
            const response = await fetch(`${API_BASE}/files`, {
                method: 'POST',
                headers: {
                    'Authorization': 'Bearer YOUR_BEARER_TOKEN_HERE'
                },
                body: formData
            });
            const data = await response.json();
            console.log('File uploaded:', data);
            return data;
        } catch (error) {
            console.error('Error uploading file:', error);
        }
    }
    
    // Get File Details
    async function getFileDetails(fileId) {
        try {
            const response = await fetch(`${API_BASE}/files/${fileId}`, {
                headers: {
                    'Authorization': 'Bearer YOUR_BEARER_TOKEN_HERE'
                }
            });
            const data = await response.json();
            console.log('File details:', data);
            return data;
        } catch (error) {
            console.error('Error getting file details:', error);
        }
    }
    
    // Create Fine Tune
    async function createFineTune(trainingFile, model, nEpochs = 4) {
        try {
            const response = await fetch(`${API_BASE}/fine-tunes`, {
                method: 'POST',
                headers: {
                    'Authorization': 'Bearer YOUR_BEARER_TOKEN_HERE',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ training_file: trainingFile, model, n_epochs: nEpochs })
            });
            const data = await response.json();
            console.log('Fine tune created:', data);
            return data;
        } catch (error) {
            console.error('Error creating fine tune:', error);
        }
    }
    
    // Get Usage Data
    async function getUsage() {
        try {
            const response = await fetch(`${API_BASE}/usage`, {
                headers: {
                    'Authorization': 'Bearer YOUR_BEARER_TOKEN_HERE'
                }
            });
            const data = await response.json();
            console.log('Usage data:', data);
            return data;
        } catch (error) {
            console.error('Error getting usage data:', error);
        }
    }
    
    // Get Billing Usage
    async function getBillingUsage() {
        try {
            const response = await fetch(`${API_BASE}/billing/usage`, {
                headers: {
                    'Authorization': 'Bearer YOUR_BEARER_TOKEN_HERE'
                }
            });
            const data = await response.json();
            console.log('Billing usage:', data);
            return data;
        } catch (error) {
            console.error('Error getting billing usage:', error);
        }
    }
    
    // List Subscriptions
    async function listSubscriptions() {
        try {
            const response = await fetch(`${API_BASE}/subscriptions`, {
                headers: {
                    'Authorization': 'Bearer YOUR_BEARER_TOKEN_HERE'
                }
            });
            const data = await response.json();
            console.log('Subscriptions:', data);
            return data;
        } catch (error) {
            console.error('Error listing subscriptions:', error);
        }
    }
    
    // Enhance Security Measures
    async function enhanceSecurityMeasures(securityLevel, description) {
        try {
            const response = await fetch(`${API_BASE}/security/enhanced`, {
                method: 'POST',
                headers: {
                    'Authorization': 'Bearer YOUR_BEARER_TOKEN_HERE',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ securityLevel, description })
            });
            const data = await response.json();
            console.log('Security enhanced:', data);
            return data;
        } catch (error) {
            console.error('Error enhancing security:', error);
        }
    }
    
    // Integrate with DHL
    async function integrateDHL(dhlUrl, dhlToken) {
        try {
            const response = await fetch(`${API_BASE}/integration/supply-chain/dhl`, {
                method: 'POST',
                headers: {
                    'Authorization': 'Bearer YOUR_BEARER_TOKEN_HERE',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ dhl_url: dhlUrl, dhl_token: dhlToken })
            });
            const data = await response.json();
            console.log('DHL integrated:', data);
            return data;
        } catch (error) {
            console.error('Error integrating DHL:', error);
        }
    }
    
    // Integrate with Figma
    async function integrateFigma(figmaUrl, figmaToken) {
        try {
            const response = await fetch(`${API_BASE}/integration/design/figma`, {
                method: 'POST',
                headers: {
                    'Authorization': 'Bearer YOUR_BEARER_TOKEN_HERE',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ figma_url: figmaUrl, figma_token: figmaToken })
            });
            const data = await response.json();
            console.log('Figma integrated:', data);
            return data;
        } catch (error) {
            console.error('Error integrating Figma:', error);
        }
    }
    
    // Register Federated Node
    async function registerFederatedNode(nodeId, modelType) {
        try {
            const response = await fetch(`${API_BASE}/federated-node/register`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ node_id: nodeId, model_type: modelType })
            });
            const data = await response.json();
            console.log('Node registered:', data);
            return data;
        } catch (error) {
            console.error('Error registering node:', error);
        }
    }
    
    // Submit Federated Training
    async function submitFederatedTraining(weights) {
        try {
            const response = await fetch(`${API_BASE}/federated-training/submit`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ weights })
            });
            const data = await response.json();
            console.log('Training submitted:', data);
            return data;
        } catch (error) {
            console.error('Error submitting training:', error);
        }
    }
    
    // Get Global Model
    async function getGlobalModel() {
        try {
            const response = await fetch(`${API_BASE}/federated-training/global-model`);
            const data = await response.json();
            console.log('Global model:', data);
            return data;
        } catch (error) {
            console.error('Error getting global model:', error);
        }
    }
    
    // Validate Hypothesis
    async function validateHypothesis(facts, rules, hypothesis) {
        try {
            const response = await fetch(`${API_BASE}/reasoning/validate-hypothesis`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ facts, rules, hypothesis })
            });
            const data = await response.json();
            console.log('Hypothesis validation:', data);
            return data;
        } catch (error) {
            console.error('Error validating hypothesis:', error);
        }
    }
    
    // Get MoStar Manifest
    async function getMostarManifest() {
        try {
            const response = await fetch(`${API_BASE}/mostar/manifest`);
            const data = await response.json();
            console.log('MoStar manifest:', data);
            return data;
        } catch (error) {
            console.error('Error getting MoStar manifest:', error);
        }
    }
    
    // Get MoStar Core
    async function getMostarCore() {
        try {
            const response = await fetch(`${API_BASE}/mostar/core`, {
                headers: {
                    'Authorization': 'Bearer YOUR_BEARER_TOKEN_HERE'
                }
            });
            const data = await response.json();
            console.log('MoStar core:', data);
            return data;
        } catch (error) {
            console.error('Error getting MoStar core:', error);
        }
    }
    
    // Activate Quantum Persona
    async function activateQuantumPersona(persona, particleDensity, statusColors) {
        try {
            const response = await fetch(`${API_BASE}/quantum/activate`, {
                method: 'POST',
                headers: {
                    'Authorization': 'Bearer YOUR_BEARER_TOKEN_HERE',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ persona, particle_density: particleDensity, status_colors: statusColors })
            });
            const data = await response.json();
            console.log('Quantum persona activated:', data);
            return data;
        } catch (error) {
            console.error('Error activating quantum persona:', error);
        }
    }
    
    // Example usage of API functions
    // Uncomment the following lines to test API integration
    
    /*
    // Get AI Assistant
    getAIAssistant();
    
    // Get Enhancement Roadmap
    getEnhancementRoadmap();
    
    // Submit Feedback
    submitRoadmapFeedback({
        feedback: "Great roadmap! Would love to see more focus on quantum integration.",
        user_id: "user_123",
        satisfaction_score: 5
    });
    
    // Generate Image
    generateImage("A futuristic cityscape with flying cars and holographic billboards", 1, "1024x1024");
    
    // Create Embedding
    createEmbedding("text-embedding-ada-002", "The quick brown fox jumps over the lazy dog");
    
    // Register Federated Node
    registerFederatedNode("node_456", "lstm");
    
    // Validate Hypothesis
    validateHypothesis(
        ["LassaFever(x) -> ViralDisease(x)", "Endemic(x, Nigeria)"],
        ["ViralDisease(x) ∧ Endemic(x, Nigeria) -> RequiresMonitoring(x)"],
        "RequiresMonitoring(LassaFever)"
    );
    
    // Get MoStar Manifest
    getMostarManifest();
    
    // Activate Quantum Persona
    activateQuantumPersona("JARVIS", 7500, ["quantum_red", "quantum_yellow"]);
    */
    
    // Live ticker
    async function updateFeed() {
        try {
            // Using a placeholder message since we don't have a real endpoint
            const tickerEl = document.getElementById('mostar-feed');
            if (tickerEl) {
                tickerEl.textContent = "🔸 [Mostar Feed] Grid sync stable – Neural nodes: 427 active – Last signal: 2.3s ago – Coherence: 99.98% – Flow: Optimal";
            }
        } catch (error) {
            console.error('Failed to fetch grid feed:', error);
        }
    }
    
    setInterval(updateFeed, 2000);
    updateFeed(); // Initial load
    // Update stats cards
    async function updateStats() {
        try {
            // Using placeholder data since we don't have a real endpoint
            const cards = document.querySelectorAll('.grid-card');
            if (cards.length > 0) {
                cards[0].querySelector('h3').textContent = '427';
            }
            if (cards.length > 1) {
                cards[1].querySelector('h3').textContent = '5';
            }
            if (cards.length > 2) {
                cards[2].querySelector('h3').textContent = '99.98%';
            }
            if (cards.length > 3) {
                cards[3].querySelector('h3').textContent = '2.3s ago';
            }
            if (cards.length > 4) {
                cards[4].querySelector('h3').textContent = '12';
            }
            if (cards.length > 5) {
                cards[5].querySelector('h3').textContent = 'Verified';
            }
            if (cards.length > 6) {
                cards[6].querySelector('h3').textContent = '1.2TB';
            }
            if (cards.length > 7) {
                cards[7].querySelector('h3').textContent = 'Optimal';
            }
        } catch (error) {
            console.error('Failed to fetch grid status:', error);
        }
    }
setInterval(updateStats, 5000);
    updateStats(); // Initial load
});