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

// 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) => {
                const configCard = document.createElement('div');
                configCard.className = 'config-card';
                
                let detailsHtml = `
                    <div class="config-content">
                        <div class="detail-item">
                            <strong>Num Cores:</strong>
                            <span>${config.num_cores}</span>
                        </div>
                        <div class="detail-item">
                            <strong>Auto Cast Type:</strong>
                            <span>${config.auto_cast_type}</span>
                        </div>
                        <div class="detail-item">
                            <strong>Batch Size:</strong>
                            <span>${config.batch_size}</span>
                        </div>
                        <div class="detail-item">
                            <strong>Sequence Length:</strong>
                            <span>${config.sequence_length}</span>
                        </div>
                        <div class="detail-item">
                            <strong>Compiler Type:</strong>
                            <span>${config.compiler_type}</span>
                        </div>
                        <div class="detail-item">
                            <strong>Compiler Version:</strong>
                            <span>${config.compiler_version}</span>
                        </div>
                    </div>
                `;
                
                configCard.innerHTML = detailsHtml;
                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;
        
        // Sort models alphabetically by title (case-insensitive)
        const sortedModels = [...models].sort((a, b) => 
            a.name.toLowerCase().localeCompare(b.name.toLowerCase())
        );
        
        const paginatedModels = sortedModels.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><strong>${model.name}</strong></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();
    }
}

function createConfigurationElement(config) {
    const configElement = document.createElement('div');
    configElement.className = 'config-item';
    
    // Add your configuration content here, but skip the title
    // For example:
    configElement.innerHTML = `
        <div class="config-content">
            <!-- Your configuration details here -->
        </div>
    `;
    
    return configElement;
}