let models = [];
let currentPage = 1;
const modelsPerPage = 10;

// DOM Elements
const modelGrid = document.getElementById('modelGrid');
const configSection = document.getElementById('configSection');
const configList = document.getElementById('configList');
const selectedModelId = document.getElementById('selectedModelId');
const configModelTitle = document.getElementById('configModelTitle');
const noConfig = document.getElementById('noConfig');
const prevPageBtn = document.getElementById('prevPage');
const nextPageBtn = document.getElementById('nextPage');
const pageInfo = document.getElementById('pageInfo');
const searchButton = document.getElementById('searchButton');
const modelIdSearch = document.getElementById('modelIdSearch');
const closeConfig = document.getElementById('closeConfig');
const loadingModels = document.getElementById('loadingModels');
const loadingConfig = document.getElementById('loadingConfig');

// Fetch models from the API
async function fetchModels() {
    loadingModels.style.display = 'block';
    
    try {
        const response = await fetch('/api/models');
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        console.log('Fetched models:', data);
        models = data || [];
        renderModels();
        updatePagination();
    } catch (error) {
        console.error('Error fetching models:', error);
        modelGrid.innerHTML = `
            <div class="empty-state">
                <i class="fas fa-exclamation-circle"></i>
                <h4>Error loading models</h4>
                <p>${error.message}</p>
            </div>
        `;
    } finally {
        loadingModels.style.display = 'none';
    }
}

// Fetch configurations for a specific model
async function showModelConfigurations(modelId) {
    configSection.style.display = 'block';
    selectedModelId.textContent = modelId;
    configList.innerHTML = '';
    loadingConfig.style.display = 'block';
    noConfig.style.display = 'none';

    try {
        const response = await fetch(`/api/models/${modelId}`);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        const configs = data.configurations;

        if (!configs || configs.length === 0) {
            noConfig.style.display = 'block';
            configList.innerHTML = '';
        } else {
            configs.forEach((config, idx) => {
                const configCard = document.createElement('div');
                configCard.className = 'config-card';
                
                // Group related configurations
                const groups = {
                    'Model Information': {
                        'checkpoint_id': config.checkpoint_id,
                        'checkpoint_revision': config.checkpoint_revision,
                        'task': config.task
                    },
                    'Hardware Configuration': {
                        'num_cores': config.num_cores,
                        'auto_cast_type': config.auto_cast_type
                    },
                    'Compiler Settings': {
                        'compiler_type': config.compiler_type,
                        'compiler_version': config.compiler_version
                    },
                    'Model Parameters': {
                        'batch_size': config.batch_size,
                        'sequence_length': config.sequence_length
                    }
                };

                let detailsHtml = '';
                for (const [groupName, groupFields] of Object.entries(groups)) {
                    detailsHtml += `
                        <div class="config-group">
                            <h5>${groupName}</h5>
                            ${Object.entries(groupFields)
                                .map(([key, value]) => `
                                    <div class="detail-item">
                                        <strong>${key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}:</strong>
                                        <span>${value}</span>
                                    </div>
                                `).join('')}
                        </div>
                    `;
                }
                
                configCard.innerHTML = `
                    <h4>Configuration ${idx + 1}</h4>
                    <div class="config-details">
                        ${detailsHtml}
                    </div>
                `;
                configList.appendChild(configCard);
            });
        }
    } catch (error) {
        console.error('Error fetching configurations:', error);
        noConfig.style.display = 'block';
        noConfig.innerHTML = `
            <i class="fas fa-exclamation-circle"></i>
            <h4>Error loading configurations</h4>
            <p>Failed to fetch configurations. Please try again later.</p>
        `;
        configList.innerHTML = '';
    } finally {
        loadingConfig.style.display = 'none';
    }
}

// Initialize the page
document.addEventListener('DOMContentLoaded', () => {
    fetchModels();
    
    // Add event listeners
    document.getElementById('searchButton').addEventListener('click', handleSearch);
    document.getElementById('prevPage').addEventListener('click', goToPrevPage);
    document.getElementById('nextPage').addEventListener('click', goToNextPage);
    document.getElementById('closeConfig').addEventListener('click', () => {
        document.getElementById('configSection').style.display = 'none';
    });
});

function renderModels() {
    loadingModels.style.display = 'block';
    modelGrid.innerHTML = '';
    
    // Simulate API delay
    setTimeout(() => {
        const startIdx = (currentPage - 1) * modelsPerPage;
        const endIdx = startIdx + modelsPerPage;
        const paginatedModels = models.slice(startIdx, endIdx);
        
        if (paginatedModels.length === 0) {
            modelGrid.innerHTML = `
                <div class="empty-state">
                    <i class="fas fa-exclamation-circle"></i>
                    <h4>No models available</h4>
                    <p>There are currently no models to display.</p>
                </div>
            `;
        } else {
            paginatedModels.forEach(model => {
                const modelCard = document.createElement('div');
                modelCard.className = 'model-card';
                modelCard.innerHTML = `
                    <h3>${model.name}</h3>
                    <p class="subtitle">Architecture: ${model.type}</p>
                `;
                modelCard.addEventListener('click', () => showModelConfigurations(model.id));
                modelGrid.appendChild(modelCard);
            });
        }
        
        loadingModels.style.display = 'none';
    }, 500);
}

function getModelIcon(type) {
    switch(type.toLowerCase()) {
        case 'regression': return 'fa-chart-line';
        case 'classification': return 'fa-tags';
        case 'ensemble': return 'fa-layer-group';
        case 'forecasting': return 'fa-calendar-alt';
        case 'clustering': return 'fa-object-group';
        default: return 'fa-cube';
    }
}

function handleSearch() {
    const searchTerm = modelIdSearch.value.trim();
    if (!searchTerm) {
        alert('Please enter a Model ID');
        return;
    }
    
    // Show configurations for the searched model
    showModelConfigurations(searchTerm);
}

function updatePagination() {
    const totalPages = Math.ceil(models.length / modelsPerPage);
    
    prevPageBtn.disabled = currentPage <= 1;
    nextPageBtn.disabled = currentPage >= totalPages;
    pageInfo.textContent = `Page ${currentPage} of ${totalPages}`;
}

function goToPrevPage() {
    if (currentPage > 1) {
        currentPage--;
        renderModels();
        updatePagination();
    }
}

function goToNextPage() {
    const totalPages = Math.ceil(models.length / modelsPerPage);
    
    if (currentPage < totalPages) {
        currentPage++;
        renderModels();
        updatePagination();
    }
}