// Application State
let appState = {
    user: null,
    currentPage: 'dashboard',
    models: [],
    isTraining: false,
    trainingInterval: null
};

// Initialize Application
document.addEventListener('DOMContentLoaded', function() {
    initializeApp();
    loadStoredData();
    setupEventListeners();
    checkAuthStatus();
});

function initializeApp() {
    // Load saved models
    const savedModels = localStorage.getItem('aiModels');
    if (savedModels) {
        appState.models = JSON.parse(savedModels);
    }
    
    // Update UI
    updateModelsList();
    updateStats();
}

function loadStoredData() {
    // Check for saved user session
    const savedUser = localStorage.getItem('currentUser');
    if (savedUser) {
        appState.user = JSON.parse(savedUser);
        updateUserUI();
    }
}

function setupEventListeners() {
    // Navigation
    document.querySelectorAll('.nav-link').forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const page = this.dataset.page;
            if (page) {
                navigateToPage(page);
            }
        });
    });

    // Action cards navigation
    document.querySelectorAll('.action-card').forEach(card => {
        card.addEventListener('click', function() {
            const page = this.dataset.page;
            if (page) {
                navigateToPage(page);
            }
        });
    });

    // User menu
    document.getElementById('userBtn').addEventListener('click', function() {
        document.getElementById('userDropdown').classList.toggle('show');
    });

    // Close dropdown when clicking outside
    document.addEventListener('click', function(e) {
        if (!e.target.closest('.user-menu')) {
            document.getElementById('userDropdown').classList.remove('show');
        }
    });

    // Modals
    document.getElementById('closeLoginModal').addEventListener('click', () => closeModal('loginModal'));
    document.getElementById('closeRegisterModal').addEventListener('click', () => closeModal('registerModal'));
    document.getElementById('closeTrainingModal').addEventListener('click', () => closeModal('trainingModal'));

    // Login/Register forms
    document.getElementById('loginForm').addEventListener('submit', handleLogin);
    document.getElementById('registerForm').addEventListener('submit', handleRegister);

    // Switch between login/register
    document.getElementById('showRegister').addEventListener('click', function(e) {
        e.preventDefault();
        closeModal('loginModal');
        openModal('registerModal');
    });

    document.getElementById('showLogin').addEventListener('click', function(e) {
        e.preventDefault();
        closeModal('registerModal');
        openModal('loginModal');
    });

    // Train form
    document.getElementById('trainForm').addEventListener('submit', handleTrainSubmit);

    // Logout
    document.getElementById('logoutBtn').addEventListener('click', handleLogout);

    // Profile navigation
    document.querySelectorAll('.dropdown-item').forEach(item => {
        item.addEventListener('click', function(e) {
            e.preventDefault();
            const page = this.dataset.page;
            if (page) {
                navigateToPage(page);
                document.getElementById('userDropdown').classList.remove('show');
            }
        });
    });

    // Model search and filter
    document.getElementById('modelSearch').addEventListener('input', filterModels);
    document.getElementById('modelFilter').addEventListener('change', filterModels);

    // Training controls
    document.getElementById('stopTraining').addEventListener('click', stopTraining);
    document.getElementById('pauseTraining').addEventListener('click', pauseTraining);
}

function checkAuthStatus() {
    if (!appState.user) {
        openModal('loginModal');
    }
}

function navigateToPage(page) {
    // Hide all pages
    document.querySelectorAll('.page').forEach(p => {
        p.classList.add('hidden');
    });

    // Show selected page
    const pageElement = document.getElementById(page + 'Page');
    if (pageElement) {
        pageElement.classList.remove('hidden');
    }

    // Update nav active state
    document.querySelectorAll('.nav-link').forEach(link => {
        link.classList.remove('active');
        if (link.dataset.page === page) {
            link.classList.add('active');
        }
    });

    appState.currentPage = page;

    // Page-specific actions
    if (page === 'models') {
        updateModelsList();
    }
}

function openModal(modalId) {
    document.getElementById(modalId).classList.add('show');
}

function closeModal(modalId) {
    document.getElementById(modalId).classList.remove('show');
}

function handleLogin(e) {
    e.preventDefault();
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;

    // Simulate authentication
    const user = {
        id: Date.now(),
        email: email,
        name: email.split('@')[0],
        memberSince: new Date().toLocaleDateString('en-US', { month: 'long', year: 'numeric' })
    };

    appState.user = user;
    localStorage.setItem('currentUser', JSON.stringify(user));
    updateUserUI();
    closeModal('loginModal');
    showToast('Successfully logged in!');
}

function handleRegister(e) {
    e.preventDefault();
    const name = document.getElementById('regName').value;
    const email = document.getElementById('regEmail').value;
    const password = document.getElementById('regPassword').value;

    // Simulate registration
    const user = {
        id: Date.now(),
        email: email,
        name: name,
        memberSince: new Date().toLocaleDateString('en-US', { month: 'long', year: 'numeric' })
    };

    appState.user = user;
    localStorage.setItem('currentUser', JSON.stringify(user));
    updateUserUI();
    closeModal('registerModal');
    showToast('Account created successfully!');
}

function handleLogout() {
    appState.user = null;
    localStorage.removeItem('currentUser');
    updateUserUI();
    openModal('loginModal');
    showToast('Logged out successfully');
}

function updateUserUI() {
    if (appState.user) {
        document.getElementById('username').textContent = appState.user.name;
        document.getElementById('dashboardUsername').textContent = appState.user.name;
        document.getElementById('profileName').textContent = appState.user.name;
        document.getElementById('profileEmail').textContent = appState.user.email;
        document.getElementById('memberSince').textContent = appState.user.memberSince;
    } else {
        document.getElementById('username').textContent = 'Guest';
        document.getElementById('dashboardUsername').textContent = 'Guest';
    }
}

function handleTrainSubmit(e) {
    e.preventDefault();
    
    if (!appState.user) {
        showToast('Please login to train models');
        openModal('loginModal');
        return;
    }

    const formData = {
        modelName: document.getElementById('modelName').value,
        modelType: document.getElementById('modelType').value,
        datasetPath: document.getElementById('datasetPath').value,
        trainSplit: document.getElementById('trainSplit').value,
        valSplit: document.getElementById('valSplit').value,
        epochs: parseInt(document.getElementById('epochs').value),
        batchSize: parseInt(document.getElementById('batchSize').value),
        learningRate: parseFloat(document.getElementById('learningRate').value),
        autoSave: document.getElementById('autoSave').checked,
        generateConfig: document.getElementById('generateConfig').checked,
        useGPU: document.getElementById('useGPU').checked,
        userId: appState.user.id
    };

    // Create new model entry
    const model = {
        id: Date.now(),
        ...formData,
        status: 'training',
        createdAt: new Date().toISOString(),
        metrics: {
            accuracy: 0,
            loss: 1.0,
            epochs: 0
        }
    };

    appState.models.unshift(model);
    localStorage.setItem('aiModels', JSON.stringify(appState.models));

    // Start training simulation
    startTraining(model);
}

function startTraining(model) {
    appState.isTraining = true;
    
    // Show training modal
    document.getElementById('trainingModelName').textContent = model.modelName;
    document.getElementById('trainingDataset').textContent = model.datasetPath;
    document.getElementById('totalEpochs').textContent = model.epochs;
    openModal('trainingModal');

    // Clear logs
    document.getElementById('logContainer').innerHTML = '';

    // Simulate training progress
    let currentEpoch = 0;
    let progress = 0;
    let startTime = Date.now();

    appState.trainingInterval = setInterval(() => {
        currentEpoch++;
        progress = (currentEpoch / model.epochs) * 100;

        // Update progress bar
        document.getElementById('progressFill').style.width = progress + '%';
        document.getElementById('progressPercent').textContent = Math.round(progress);
        document.getElementById('currentEpoch').textContent = currentEpoch;

        // Simulate metrics
        const loss = Math.max(0.1, 1.0 - (currentEpoch / model.epochs) * 0.9 + Math.random() * 0.1);
        const accuracy = Math.min(99, (currentEpoch / model.epochs) * 95 + Math.random() * 5);
        
        document.getElementById('currentLoss').textContent = loss.toFixed(3);
        document.getElementById('currentAccuracy').textContent = accuracy.toFixed(2) + '%';

        // Update time elapsed
        const elapsed = Math.floor((Date.now() - startTime) / 1000);
        const minutes = Math.floor(elapsed / 60);
        const seconds = elapsed % 60;
        document.getElementById('timeElapsed').textContent = 
            `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;

        // Add log entry
        addLogEntry(`Epoch ${currentEpoch}/${model.epochs} - Loss: ${loss.toFixed(3)}, Accuracy: ${accuracy.toFixed(2)}%`, 'info');

        // Update model in storage
        const modelIndex = appState.models.findIndex(m => m.id === model.id);
        if (modelIndex !== -1) {
            appState.models[modelIndex].metrics = {
                accuracy: accuracy,
                loss: loss,
                epochs: currentEpoch
            };
            localStorage.setItem('aiModels', JSON.stringify(appState.models));
        }

        // Check if training is complete
        if (currentEpoch >= model.epochs) {
            completeTraining(model);
        }
    }, 1000); // Update every second for demo purposes
}

function completeTraining(model) {
    clearInterval(appState.trainingInterval);
    appState.isTraining = false;

    // Update model status
    const modelIndex = appState.models.findIndex(m => m.id === model.id);
    if (modelIndex !== -1) {
        appState.models[modelIndex].status = 'completed';
        appState.models[modelIndex].completedAt = new Date().toISOString();
        localStorage.setItem('aiModels', JSON.stringify(appState.models));
    }

    addLogEntry('Training completed successfully!', 'success');
    showToast('Model training completed!');

    // Generate config files if requested
    if (model.generateConfig) {
        setTimeout(() => {
            addLogEntry('Configuration files generated and saved to your account', 'success');
        }, 1000);
    }

    // Close modal after delay
    setTimeout(() => {
        closeModal('trainingModal');
        navigateToPage('models');
        updateModelsList();
        updateStats();
    }, 3000);
}

function stopTraining() {
    if (appState.isTraining) {
        clearInterval(appState.trainingInterval);
        appState.isTraining = false;
        
        // Find current training model
        const trainingModel = appState.models.find(m => m.status === 'training');
        if (trainingModel) {
            trainingModel.status = 'failed';
            localStorage.setItem('aiModels', JSON.stringify(appState.models));
        }

        addLogEntry('Training stopped by user', 'error');
        showToast('Training stopped');
        
        setTimeout(() => {
            closeModal('trainingModal');
            updateModelsList();
        }, 1500);
    }
}

function pauseTraining() {
    // For demo purposes, pause just stops the interval
    if (appState.isTraining) {
        clearInterval(appState.trainingInterval);
        appState.isTraining = false;
        document.getElementById('pauseTraining').innerHTML = '<i class="fas fa-play"></i> Resume';
        addLogEntry('Training paused', 'info');
    } else {
        // Resume logic would go here
        showToast('Resume functionality not implemented in demo');
    }
}

function addLogEntry(message, type = 'info') {
    const logContainer = document.getElementById('logContainer');
    const entry = document.createElement('div');
    entry.className = `log-entry ${type}`;
    const timestamp = new Date().toLocaleTimeString();
    entry.textContent = `[${timestamp}] ${message}`;
    logContainer.appendChild(entry);
    logContainer.scrollTop = logContainer.scrollHeight;
}

function updateModelsList() {
    const grid = document.getElementById('modelsGrid');
    const userModels = appState.user ? 
        appState.models.filter(m => m.userId === appState.user.id) : 
        [];

    if (userModels.length === 0) {
        grid.innerHTML = `
            <div class="empty-state" style="grid-column: 1 / -1;">
                <i class="fas fa-robot"></i>
                <h3>No models yet</h3>
                <p>Start training your first AI model</p>
                <button class="btn btn-primary" onclick="navigateToPage('train')">
                    <i class="fas fa-plus"></i>
                    Train Model
                </button>
            </div>
        `;
        return;
    }

    grid.innerHTML = userModels.map(model => `
        <div class="model-card">
            <div class="model-header">
                <div>
                    <div class="model-title">${model.modelName}</div>
                    <div class="model-type">${model.modelType} • ${model.datasetPath}</div>
                </div>
                <div class="model-status status-${model.status}">
                    ${model.status}
                </div>
            </div>
            <div class="model-metrics">
                <div class="model-metric">
                    <h4>${model.metrics.accuracy.toFixed(1)}%</h4>
                    <p>Accuracy</p>
                </div>
                <div class="model-metric">
                    <h4>${model.metrics.loss.toFixed(3)}</h4>
                    <p>Loss</p>
                </div>
                <div class="model-metric">
                    <h4>${model.metrics.epochs}/${model.epochs}</h4>
                    <p>Epochs</p>
                </div>
            </div>
            <div class="model-actions">
                <button class="btn btn-secondary" onclick="downloadModel('${model.id}')">
                    <i class="fas fa-download"></i>
                    Download
                </button>
                <button class="btn btn-secondary" onclick="viewConfig('${model.id}')">
                    <i class="fas fa-cog"></i>
                    Config
                </button>
                <button class="btn btn-danger" onclick="deleteModel('${model.id}')">
                    <i class="fas fa-trash"></i>
                    Delete
                </button>
            </div>
        </div>
    `).join('');
}

function filterModels() {
    const searchTerm = document.getElementById('modelSearch').value.toLowerCase();
    const filterType = document.getElementById('modelFilter').value;
    
    const cards = document.querySelectorAll('.model-card');
    cards.forEach(card => {
        const title = card.querySelector('.model-title').textContent.toLowerCase();
        const type = card.querySelector('.model-type').textContent.toLowerCase();
        const status = card.querySelector('.model-status').textContent.toLowerCase();
        
        let matchesSearch = title.includes(searchTerm) || type.includes(searchTerm);
        let matchesFilter = filterType === 'all' || status === filterType;
        
        card.style.display = matchesSearch && matchesFilter ? 'block' : 'none';
    });
}

function downloadModel(modelId) {
    const model = appState.models.find(m => m.id == modelId);
    if (model) {
        showToast(`Downloading ${model.modelName}...`);
        
        // Simulate download
        setTimeout(() => {
            showToast(`${model.modelName} downloaded successfully!`);
        }, 2000);
    }
}

function viewConfig(modelId) {
    const model = appState.models.find(m => m.id == modelId);
    if (model) {
        // Create config object
        const config = {
            model_name: model.modelName,
            model_type: model.modelType,
            dataset: {
                path: model.datasetPath,
                train_split: model.trainSplit,
                validation_split: model.valSplit
            },
            training: {
                epochs: model.epochs,
                batch_size: model.batchSize,
                learning_rate: model.learningRate,
                use_gpu: model.useGPU
            },
            metrics: model.metrics,
            created_at: model.createdAt,
            status: model.status
        };
        
        // Show config in a modal or new window
        const configJson = JSON.stringify(config, null, 2);
        
        // Create a temporary modal for config
        const modal = document.createElement('div');
        modal.className = 'modal show';
        modal.innerHTML = `
            <div class="modal-content modal-large">
                <div class="modal-header">
                    <h2>Model Configuration</h2>
                    <button class="close-btn" onclick="this.closest('.modal').remove()">&times;</button>
                </div>
                <div class="modal-body">
                    <pre style="background: rgba(15, 23, 42, 0.5); padding: 1rem; border-radius: 0.5rem; overflow-x: auto;">${configJson}</pre>
                    <div style="margin-top: 1rem; display: flex; gap: 1rem;">
                        <button class="btn btn-primary" onclick="copyConfig('${btoa(configJson)}')">
                            <i class="fas fa-copy"></i>
                            Copy to Clipboard
                        </button>
                        <button class="btn btn-secondary" onclick="downloadConfig('${model.modelName}', '${btoa(configJson)}')">
                            <i class="fas fa-download"></i>
                            Download Config
                        </button>
                    </div>
                </div>
            </div>
        `;
        document.body.appendChild(modal);
    }
}

function copyConfig(encodedConfig) {
    const config = atob(encodedConfig);
    navigator.clipboard.writeText(config).then(() => {
        showToast('Configuration copied to clipboard!');
    });
}

function downloadConfig(modelName, encodedConfig) {
    const config = atob(encodedConfig);
    const blob = new Blob([config], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `${modelName}_config.json`;
    a.click();
    URL.revokeObjectURL(url);
    showToast('Configuration downloaded!');
}

function deleteModel(modelId) {
    if (confirm('Are you sure you want to delete this model?')) {
        appState.models = appState.models.filter(m => m.id != modelId);
        localStorage.setItem('aiModels', JSON.stringify(appState.models));
        updateModelsList();
        updateStats();
        showToast('Model deleted successfully');
    }
}

function updateStats() {
    const userModels = appState.user ? 
        appState.models.filter(m => m.userId === appState.user.id) : 
        [];

    document.getElementById('totalModels').textContent = userModels.length;
    
    const completedModels = userModels.filter(m => m.status === 'completed');
    const avgAccuracy = completedModels.length > 0 ?
        completedModels.reduce((sum, m) => sum + m.metrics.accuracy, 0) / completedModels.length : 0;
    document.getElementById('avgAccuracy').textContent = avgAccuracy.toFixed(1) + '%';
    
    const totalEpochs = userModels.reduce((sum, m) => sum + m.metrics.epochs, 0);
    document.getElementById('trainingHours').textContent = Math.round(totalEpochs * 0.1); // Estimate
    
    const uniqueDatasets = [...new Set(userModels.map(m => m.datasetPath))];
    document.getElementById('datasetsUsed').textContent = uniqueDatasets.length;
}

function resetForm() {
    document.getElementById('trainForm').reset();
    showToast('Form reset');
}

function showTutorial() {
    showToast('Tutorial coming soon!');
}

function showToast(message) {
    const toast = document.getElementById('toast');
    document.getElementById('toastMessage').textContent = message;
    toast.classList.add('show');
    
    setTimeout(() => {
        toast.classList.remove('show');
    }, 3000);
}