// Global state
const appState = {
    currentModel: 'yolov11n',
    inputModality: 'image',
    inputSource: 'file',
    isLoading: false,
    results: []
};

// Initialize the application
function initApp() {
    console.log('MedVision Model Viewer initialized');
    
    // Load default model (YOLOv11n)
    loadModel('yolov11n');
    
    // Set up event listeners
    setupEventListeners();
}

// Load a model into the application
function loadModel(modelName) {
    appState.isLoading = true;
    document.getElementById('loading-overlay').classList.remove('hidden');
    
    console.log(`Loading model: ${modelName}`);
    
    // Simulate model loading
    setTimeout(() => {
        appState.currentModel = modelName;
        appState.isLoading = false;
        document.getElementById('loading-overlay').classList.add('hidden');
        updateUI();
    }, 1500);
}

// Run inference with the current model
function runInference(inputData) {
    if (appState.isLoading) return;
    
    appState.isLoading = true;
    document.getElementById('loading-overlay').classList.remove('hidden');
    
    console.log(`Running inference with ${appState.currentModel} on ${appState.inputModality} input`);
    
    // Simulate inference
    setTimeout(() => {
        // Mock results for demo purposes
        appState.results = generateMockResults();
        appState.isLoading = false;
        document.getElementById('loading-overlay').classList.add('hidden');
        updateUI();
        renderResults();
    }, 2000);
}

// Generate mock results for demo
function generateMockResults() {
    const classes = ['tumor', 'organ', 'lesion', 'vessel', 'bone'];
    const results = [];
    
    for (let i = 0; i < 5; i++) {
        results.push({
            class: classes[Math.floor(Math.random() * classes.length)],
            confidence: (Math.random() * 0.9 + 0.1).toFixed(2),
            bbox: {
                x: Math.floor(Math.random() * 100),
                y: Math.floor(Math.random() * 100),
                width: Math.floor(Math.random() * 30 + 10),
                height: Math.floor(Math.random() * 30 + 10)
            },
            color: `#${Math.floor(Math.random()*16777215).toString(16)}`
        });
    }
    
    return results;
}

// Update the UI based on current state
function updateUI() {
    // Update model indicator
    document.querySelectorAll('[data-model-indicator]').forEach(el => {
        el.textContent = appState.currentModel;
    });
}

// Render results to the results table
function renderResults() {
    const tbody = document.querySelector('tbody');
    
    if (appState.results.length === 0) {
        tbody.innerHTML = `
            <tr>
                <td colspan="4" class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-center">No results yet</td>
            </tr>
        `;
        return;
    }
    
    tbody.innerHTML = appState.results.map(result => `
        <tr>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 capitalize">${result.class}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${result.confidence}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">[${result.bbox.x}, ${result.bbox.y}, ${result.bbox.width}, ${result.bbox.height}]</td>
            <td class="px-6 py-4 whitespace-nowrap">
                <span class="inline-block w-4 h-4 rounded-full" style="background-color: ${result.color}"></span>
            </td>
        </tr>
    `).join('');
}
    // File upload handling
    document.getElementById('media-upload').addEventListener('change', (e) => {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = (event) => {
                const outputContainer = document.getElementById('output-container');
                if (file.type.startsWith('image/')) {
                    outputContainer.innerHTML = `<img src="${event.target.result}" class="max-w-full max-h-full" alt="Uploaded image">`;
                } else if (file.type.startsWith('video/')) {
                    outputContainer.innerHTML = `
                        <video controls class="max-w-full max-h-full">
                            <source src="${event.target.result}" type="${file.type}">
                            Your browser does not support the video tag.
                        </video>
                    `;
                }
            };
            reader.readAsDataURL(file);
        }
    });
    
    // Make file upload area clickable
    const fileUploadArea = document.querySelector('#file-upload-container .border-dashed');
    fileUploadArea.addEventListener('click', () => {
        document.getElementById('media-upload').click();
    });
    
    // Model upload handling
    const modelUpload = document.getElementById('model-upload');
    if (modelUpload) {
        modelUpload.addEventListener('change', (e) => {
            const file = e.target.files[0];
            if (file) {
                console.log('Model file selected:', file.name);
                // Here you would typically validate and process the model file
                alert(`Model file selected: ${file.name}`);
            }
        });
        
        // Make model upload area clickable
        const modelUploadArea = document.querySelector('#custom-model-upload .border-dashed');
        if (modelUploadArea) {
            modelUploadArea.addEventListener('click', () => {
                modelUpload.click();
            });
        }
        
        // Handle model URL input
        const modelUrlInput = document.querySelector('#custom-model-upload input[type="text"]');
        if (modelUrlInput) {
            modelUrlInput.addEventListener('change', (e) => {
                const url = e.target.value.trim();
                if (url) {
                    console.log('Model URL entered:', url);
                    // Here you would typically validate and load the model from URL
                    alert(`Model URL entered: ${url}`);
                }
            });
        }
    }
    
    // Drag and drop for file upload
    const uploadArea = document.getElementById('file-upload-container');
    uploadArea.addEventListener('dragover', (e) => {
        e.preventDefault();
        uploadArea.classList.add('border-primary-500', 'bg-amber-50');
    });
    
    uploadArea.addEventListener('dragleave', () => {
        uploadArea.classList.remove('border-primary-500', 'bg-amber-50');
    });
    
    uploadArea.addEventListener('drop', (e) => {
        e.preventDefault();
        uploadArea.classList.remove('border-primary-500', 'bg-amber-50');
        
        const file = e.dataTransfer.files[0];
        if (file) {
            document.getElementById('media-upload').files = e.dataTransfer.files;
            const event = new Event('change');
            document.getElementById('media-upload').dispatchEvent(event);
        }
    });
    
    // Drag and drop for model upload
    const modelUploadArea = document.querySelector('#custom-model-upload');
    if (modelUploadArea) {
        modelUploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            const dashedBorder = modelUploadArea.querySelector('.border-dashed');
            dashedBorder.classList.add('border-primary-500', 'bg-amber-50');
        });
        
        modelUploadArea.addEventListener('dragleave', (e) => {
            const dashedBorder = modelUploadArea.querySelector('.border-dashed');
            dashedBorder.classList.remove('border-primary-500', 'bg-amber-50');
        });
        
        modelUploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            const dashedBorder = modelUploadArea.querySelector('.border-dashed');
            dashedBorder.classList.remove('border-primary-500', 'bg-amber-50');
            
            const file = e.dataTransfer.files[0];
            if (file) {
                document.getElementById('model-upload').files = e.dataTransfer.files;
                const event = new Event('change');
                document.getElementById('model-upload').dispatchEvent(event);
            }
        });
    }
}
// Initialize the app when the DOM is loaded
document.addEventListener('DOMContentLoaded', initApp);