{% extends "base.html" %}

{% block title %}Model Studio - Sheikh LLM Studio{% endblock %}

{% block content %}
<div class="container">
    <div class="card">
        <h1><i class="fas fa-cogs"></i> Model Creation Studio</h1>
        <p>Create, train, and deploy your own AI models</p>
    </div>
    <div class="feature-grid">
        <div class="feature-card">
            <div class="feature-icon"><i class="fas fa-plus-circle"></i></div>
            <h3>Create New Model</h3>
            <p>Fine-tune existing models with your data</p>
            <button class="btn" onclick="showCreateModal()">Create Model</button>
        </div>
        <div class="feature-card">
            <div class="feature-icon"><i class="fas fa-list"></i></div>
            <h3>My Models</h3>
            <p>Manage your created models</p>
            <button class="btn" onclick="loadMyModels()">View Models</button>
        </div>
        <div class="feature-card">
            <div class="feature-icon"><i class="fas fa-chart-line"></i></div>
            <h3>Training Jobs</h3>
            <p>Monitor model training progress</p>
            <button class="btn" onclick="loadTrainingJobs()">View Jobs</button>
        </div>
    </div>
    <div class="card" id="modelCreationForm" style="display: none;">
        <h3>Create New Model</h3>
        <form id="createModelForm">
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem;">
                <div>
                    <label><strong>Base Model:</strong></label>
                    <select id="baseModel" class="btn" style="width: 100%; margin-top: 0.5rem;">
                        <option value="mistralai/Mistral-7B-Instruct-v0.3">Mistral 7B Instruct</option>
                        <option value="microsoft/DialoGPT-medium">DialoGPT Medium</option>
                    </select>
                </div>
                <div>
                    <label><strong>Model Name:</strong></label>
                    <input type="text" id="modelName" placeholder="my-custom-model" style="width: 100%; padding: 0.75rem; border: 1px solid #e1e5e9; border-radius: 8px; margin-top: 0.5rem;">
                </div>
            </div>
            <div style="margin-bottom: 1rem;">
                <label><strong>Training Dataset:</strong></label>
                <input type="text" id="datasetPath" placeholder="path/to/dataset" style="width: 100%; padding: 0.75rem; border: 1px solid #e1e5e9; border-radius: 8px; margin-top: 0.5rem;">
            </div>
            <div style="margin-bottom: 1rem;">
                <label><strong>Training Configuration:</strong></label>
                <textarea id="trainingConfig" style="width: 100%; height: 100px; padding: 0.75rem; border: 1px solid #e1e5e9; border-radius: 8px; margin-top: 0.5rem;" placeholder='{"epochs": 3, "learning_rate": 2e-5, "batch_size": 4}'></textarea>
            </div>
            <div style="display: flex; gap: 1rem;">
                <button type="button" class="btn" onclick="createModel()" style="background: var(--success);">
                    <i class="fas fa-rocket"></i> Start Training
                </button>
                <button type="button" class="btn" onclick="hideCreateModal()" style="background: var(--error);">
                    <i class="fas fa-times"></i> Cancel
                </button>
            </div>
        </form>
    </div>
    <div class="card" id="jobsDisplay" style="display: none;">
        <h3>Training Jobs</h3>
        <div id="jobsList"></div>
    </div>
</div>
<script>
    function showCreateModal() {
        document.getElementById('modelCreationForm').style.display = 'block';
        document.getElementById('jobsDisplay').style.display = 'none';
    }
    function hideCreateModal() {
        document.getElementById('modelCreationForm').style.display = 'none';
    }
    async function createModel() {
        const baseModel = document.getElementById('baseModel').value;
        const modelName = document.getElementById('modelName').value;
        const datasetPath = document.getElementById('datasetPath').value;
        const trainingConfig = document.getElementById('trainingConfig').value;
        if (!modelName || !datasetPath) {
            alert('Please fill in all required fields');
            return;
        }
        try {
            const config = trainingConfig ? JSON.parse(trainingConfig) : { epochs: 3, learning_rate: 2e-5, batch_size: 4 };
            const response = await fetch('/api/studio/create-model', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    base_model: baseModel,
                    dataset_path: datasetPath,
                    training_config: config
                })
            });
            const data = await response.json();
            if (data.status === 'success') {
                alert(`Training started! Job ID: ${data.job.job_id}`);
                hideCreateModal();
                loadTrainingJobs();
            } else {
                alert('Error starting training: ' + data.detail);
            }
        } catch (error) {
            alert('Error: ' + error.message);
        }
    }
    async function loadTrainingJobs() {
        document.getElementById('jobsDisplay').style.display = 'block';
        document.getElementById('modelCreationForm').style.display = 'none';
        const jobsList = document.getElementById('jobsList');
        jobsList.innerHTML = `
            <div style="padding: 1rem; background: #f8f9fa; border-radius: 8px; margin: 0.5rem 0;">
                <strong>Job: train_12345</strong>
                <div>Status: <span style="color: var(--success);">Completed</span></div>
                <div>Model: <a href="#">RecentCoders/my-custom-model</a></div>
            </div>
        `;
    }
    function loadMyModels() {
        alert('My Models feature coming soon!');
    }
</script>
{% endblock %}