<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Demo WebApp</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
    <style>
        .rocket.launch {
            animation: launchRocket 4s forwards;
        }

        @keyframes launchRocket {
            0% {
                transform: translate(0, 0) rotate(0deg);
            }
            100% {
                transform: translate(700px, -500px) rotate(45deg);
            }
        }

        .loading-circle {
            border: 8px solid var(--border-color);
            border-top: 8px solid var(--button-color);
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite;
            display: none;
            margin-left: 10px;
        }

        .loading-circle-left {
            margin-right: 10px;
            margin-left: 0;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .training-params {
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .training-params input {
            width: 100px;
            padding: 5px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
        }
        
        .training-params label {
            color: var(--text-color);
            font-weight: bold;
        }

        .form-select {
            width: 200px;
            padding: 5px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            background-color: white;
            color: var(--text-color);
        }

        .applications-checklist {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 15px;
        }

        .application-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .application-item input[type="checkbox"] {
            margin: 0;
        }

        .application-item label {
            color: var(--text-color);
            font-size: 14px;
        }

        .config-section {
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .config-group {
            border: 1px solid var(--border-color);
            padding: 15px;
            border-radius: 4px;
        }

        .config-group h3 {
            margin-top: 0;
            color: var(--text-color);
            font-size: 1.1em;
            margin-bottom: 15px;
        }

        .select-container {
            margin-bottom: 15px;
        }

        .select-container label {
            color: var(--text-color);
            font-weight: bold;
        }

        .select-container input {
            width: 100px;
            padding: 5px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
        }

        .loading-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.8);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }

        .loading-overlay .loading-circle {
            display: block;
        }

        .config-row {
            display: flex;
            gap: 20px;
        }

        .instructions-summary-box {
            border: 1px solid var(--border-color);
            padding: 15px;
            border-radius: 4px;
            background-color: #f9f9f9;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="loading-overlay" id="loadingOverlay">
        <div class="loading-circle"></div>
    </div>
    <div class="container">
        <div class="box shadow-effect">
            <div class="tabs">
                <div class="tab-buttons">
                    <button class="tab-btn" onclick="openTab(event, 'setupTab')">Application</button>
                    <button class="tab-btn" onclick="openTab(event, 'configTab')">Config</button>
                    <button class="tab-btn active" onclick="openTab(event, 'inputTab')">Language Input</button>
                    <button class="tab-btn" onclick="openTab(event, 'resultsTab')">Results</button>
                </div>
                <div class="tab-text">
                    See <a href="https://elsci.org">elsci.org</a> for more information 
                    <a href="https://elsci.org"><img src="https://github.com/pdfosborne/elsciRL-Wiki/blob/main/Resources/images/elsciRL_logo_owl_cropped.png?raw=true" alt="elsciRL-Logo" style="width:24px;height:24px;"></a>  
                </div>
                
            </div>
            <div id="setupTab" class="tab-content" style="display:none;">
                <div class="config-section" style="width: 95%;">
                    <div class="config-row" style="display: flex; flex-wrap: wrap; gap: 20px;">
                        <div class="config-group" style="flex: 1;">
                            <h3>Applications</h3>
                            <div class="select-container">
                                <label for="applicationSelect">Select Application:</label>
                                <select id="applicationSelect" class="form-select" required>
                                    <!-- Remove the initial option here -->
                                </select>
                            </div>
                            <div id="configSelections" style="display: none;">
                                <div class="training-params">
                                    <label for="localConfigSelect">Local Config:</label>
                                    <select id="localConfigSelect" class="form-select">
                                        <option value="" disabled selected>Choose config...</option>
                                    </select>
                                </div>
                                <div class="training-params">
                                    <label for="observedStateSelect">Observed State Input:</label>
                                    <select id="observedStateSelect" class="form-select">
                                        <!-- Options will be populated dynamically -->
                                    </select>
                                </div>
                                <div class="training-params">
                                    <label for="plotSelect">Select Analysis File:</label>
                                    <select id="plotSelect" class="form-select">
                                        <option value="" disabled selected>Choose plot...</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div id="prerenderImageContainer" class="image-section shadow-effect" style="flex: 1;">
                            <div class="select-container">
                                <label for="prerenderImageSelect">Select Preview Image:</label>
                                <select id="prerenderImageSelect" class="form-select">
                                    <!-- Options will be populated dynamically -->
                                </select>
                            </div>
                            <img id="prerenderImage" class="shadow-effect" style="display: none;">
                        </div>
                    </div>
                </div>
            </div>
            <div id="configTab" class="tab-content" style="display:none;">
                <div class="config-section" style="width: 95%;">
                    <!-- Add experiment config selection at the top -->
                    <div class="config-group" style="margin-bottom: 20px;">
                        <h3>Experiment Configuration</h3>
                        <div class="select-container">
                            <label for="experimentConfigSelect">Select Experiment Config:</label>
                            <select id="experimentConfigSelect" class="form-select">
                                <option value="" disabled selected>Choose experiment config...</option>
                            </select>
                        </div>
                    </div>

                    <div class="config-row" style="display: flex; flex-wrap: wrap; gap: 20px;">
                        <div class="config-group" style="flex: 1;">
                            <h3>Agent Type</h3>
                            <div class="applications-checklist">
                                <div class="application-item">
                                    <input type="checkbox" id="agent-Qlearntab" name="agentType" value="Qlearntab" checked>
                                    <label for="agent-Qlearntab">Q-Learning</label>
                                </div>
                                <!-- TODO: DISABLED NEURAL AGENTS FOR NOW, UNCOMMENT WHEN READY -->
                                <!-- <div class="application-item">
                                    <input type="checkbox" id="agent-DQN" name="agentType" value="DQN">
                                    <label for="agent-DQN">Deep Q-Network</label>
                                </div>  
                                <div class="application-item">
                                    <input type="checkbox" id="agent-SB3_DQN" name="agentType" value="SB3_DQN">
                                    <label for="agent-SB3_DQN">Stable Baselines DQN</label>
                                </div>
                                <div class="application-item">
                                    <input type="checkbox" id="agent-SB3_PPO" name="agentType" value="SB3_PPO">
                                    <label for="agent-SB3_PPO">Stable Baselines PPO</label>
                                </div>
                                <div class="application-item">
                                    <input type="checkbox" id="agent-SB3_A2C" name="agentType" value="SB3_A2C">
                                    <label for="agent-SB3_A2C">Stable Baselines A2C</label>
                                </div> -->
                            </div>
                        </div>
                        <!-- Add new adapter selection section -->
                        <div class="config-group" style="flex: 1;">
                            <h3>Adapters</h3>
                            <div class="applications-checklist" id="adapterChecklist">
                                <!-- Adapters will be populated dynamically -->
                            </div>
                        </div>
                    </div>
                    <div class="config-row" style="display: flex; flex-wrap: wrap; gap: 20px;">
                        <div class="config-group" style="flex: 1;">
                            <h3>Training Configuration</h3>
                            <div class="training-params">
                                <label for="trainingEpisodes">Training Episodes:</label>
                                <input type="number" id="trainingEpisodes" min="100" max="10000" value="1000" step="500">
                            </div>
                            <div class="training-params">
                                <label for="trainingRepeats">Training Repeats (fixed starting position):</label>
                                <input type="number" id="trainingRepeats" min="1" max="100" value="5">
                            </div>
                            <div class="training-params">
                                <label for="trainingSeeds">Training Seeds (random starting position):</label>
                                <input type="number" id="trainingSeeds" min="1" max="100" value="1">
                            </div>
                        </div>

                        <div class="config-group" style="flex: 1;">
                            <h3>Testing Configuration</h3>
                            <div class="training-params">
                                <label for="testEpisodes">Test Episodes:</label>
                                <input type="number" id="testEpisodes" min="1" max="1000" value="200">
                            </div>
                            <div class="training-params">
                                <label for="testRepeats">Test Repeats:</label>
                                <input type="number" id="testRepeats" min="1" max="100" value="10">
                            </div>
                        </div>
                    </div>

                    <div id="qlearn-params" class="config-group" style="flex: 1;">
                        <h3>Q-Learning Parameters</h3>
                        <div class="training-params">
                            <label for="alpha">Learning Rate (Alpha):</label>
                            <input type="number" id="alpha" min="0" max="1" value="0.1" step="0.01">
                        </div>
                        <div class="training-params">
                            <label for="gamma">Discount Factor (Gamma):</label>
                            <input type="number" id="gamma" min="0" max="1" value="0.95" step="0.01">
                        </div>
                        <div class="training-params">
                            <label for="epsilon">Exploration Rate (Epsilon):</label>
                            <input type="number" id="epsilon" min="0" max="1" value="0.2" step="0.01">
                        </div>
                        <div class="training-params">
                            <label for="epsilonStep">Epsilon Step:</label>
                            <input type="number" id="epsilonStep" min="0" max="1" value="0.01" step="0.001">
                        </div>
                    </div>
                    <div id="dqn-params" class="config-group" style="flex: 1; display: none;">
                        <h3>DQN Parameters</h3>
                        <div class="training-params">
                            <label for="input_size">Input Size:</label>
                            <input type="number" id="input_size" min="1" value="64">
                        </div>
                        <div class="training-params">
                            <label for="sent_hidden_dim">Sentence Hidden Dimension:</label>
                            <input type="number" id="sent_hidden_dim" min="1" value="32">
                        </div>
                        <div class="training-params">
                            <label for="hidden_dim">Hidden Dimension:</label>
                            <input type="number" id="hidden_dim" min="1" value="64">
                        </div>
                        <div class="training-params">
                            <label for="num_hidden">Number of Hidden Layers:</label>
                            <input type="number" id="num_hidden" min="1" value="2">
                        </div>
                        <div class="training-params">
                            <label for="sequence_size">Sequence Size:</label>
                            <input type="number" id="sequence_size" min="1" value="32">
                        </div>
                        <div class="training-params">
                            <label for="memory_size">Memory Size:</label>
                            <input type="number" id="memory_size" min="1" value="2000">
                        </div>
                        <div class="training-params">
                            <label for="target_replace_iter">Target Replace Iterations:</label>
                            <input type="number" id="target_replace_iter" min="1" value="100">
                        </div>
                        <div class="training-params">
                            <label for="learning_rate">Learning Rate:</label>
                            <input type="number" id="learning_rate" min="0" max="1" value="0.01" step="0.001">
                        </div>
                        <div class="training-params">
                            <label for="batch_size">Batch Size:</label>
                            <input type="number" id="batch_size" min="1" value="32">
                        </div>
                        <div class="training-params">
                            <label for="output_size">Output Size:</label>
                            <input type="number" id="output_size" min="1" value="4">
                        </div>
                        <div class="training-params">
                            <label for="learn_step_counter">Learn Step Counter:</label>
                            <input type="number" id="learn_step_counter" min="0" value="0">
                        </div>
                        <div class="training-params">
                            <label for="dqn_epsilon">Epsilon:</label>
                            <input type="number" id="dqn_epsilon" min="0" max="1" value="0.9" step="0.01">
                        </div>
                        <div class="training-params">
                            <label for="dqn_epsilon_step">Epsilon Step:</label>
                            <input type="number" id="dqn_epsilon_step" min="0" max="1" value="0.0005" step="0.0001">
                        </div>
                    </div>
                    
                    <div id="sb3-dqn-params" class="config-group" style="flex: 1; display: none;">
                        <h3>SB3 DQN Parameters</h3>
                        <div class="training-params">
                            <label for="sb3_policy">Policy:</label>
                            <input type="text" id="sb3_policy" value="MlpPolicy">
                        </div>
                        <div class="training-params">
                            <label for="sb3_learning_rate">Learning Rate:</label>
                            <input type="number" id="sb3_learning_rate" min="0" max="1" value="0.0001" step="0.0001">
                        </div>
                        <div class="training-params">
                            <label for="sb3_buffer_size">Buffer Size:</label>
                            <input type="number" id="sb3_buffer_size" min="1" value="1000000">
                        </div>
                    </div>

                    <div id="sb3-ppo-params" class="config-group" style="flex: 1; display: none;">
                        <h3>SB3 PPO Parameters</h3>
                        <div class="training-params">
                            <label for="sb3_ppo_policy">Policy:</label>
                            <input type="text" id="sb3_ppo_policy" value="MlpPolicy">
                        </div>
                        <div class="training-params">
                            <label for="sb3_ppo_learning_rate">Learning Rate:</label>
                            <input type="number" id="sb3_ppo_learning_rate" min="0" max="1" value="0.0003" step="0.0001">
                        </div>
                        <div class="training-params">
                            <label for="sb3_ppo_n_steps">N Steps:</label>
                            <input type="number" id="sb3_ppo_n_steps" min="1" value="2048">
                        </div>
                    </div>

                    <div id="sb3-a2c-params" class="config-group" style="flex: 1; display: none;">
                        <h3>SB3 A2C Parameters</h3>
                        <div class="training-params">
                            <label for="sb3_a2c_policy">Policy:</label>
                            <input type="text" id="sb3_a2c_policy" value="MlpPolicy">
                        </div>
                        <div class="training-params">
                            <label for="sb3_a2c_learning_rate">Learning Rate:</label>
                            <input type="number" id="sb3_a2c_learning_rate" min="0" max="1" value="0.0007" step="0.0001">
                        </div>
                        <div class="training-params">
                            <label for="sb3_a2c_n_steps">N Steps:</label>
                            <input type="number" id="sb3_a2c_n_steps" min="1" value="500">
                        </div>
                    </div>
                    
                </div>
            </div>

            <div id="inputTab" class="tab-content" style="display:block;">
                <div align="center">   
                    <button id="runExperimentBtn" onclick="runExperiment()">Run Experiment</button>
                    <p><b>Provide language instructions to help the agent or leave blank if you want to run an experiment without</b></p>
                </div>

                <div class="input-console-container" style="display: flex; gap: 20px;">
                    <div class="input-section shadow-effect" style="flex: 1;">
                        <p>User Input</p>
                        <textarea id="userInput" placeholder="Enter your commands here..."></textarea>
                        <div class="button-group">
                            <div style="display: flex; align-items: center;">
                                <button id="submitBtn" class="submit-btn" onclick="processInput()">Submit</button>
                                <div id="loadingCircleSubmit" class="loading-circle"></div>
                            </div>
                            <button id="newInstructionBtn" onclick="newInstruction()">New Instruction</button>
                        </div>
                        <div id="rocket" class="rocket" style="display:none;">
                            🚀
                        </div>
                    </div>
                    <div class="console-section shadow-effect" style="flex: 1;">
                        <p>What the agent see to match with your input instructions</p>
                        <div id="consoleOutput"></div>
                        <div id="confirmationBlock">
                            <p>Was the result correct?</p>
                            <div style="display: flex; align-items: center;">
                                <button id="correctBtn" onclick="confirmResult(true)">Correct</button>
                                <button id="incorrectBtn" onclick="confirmResult(false)">Incorrect</button>
                                <div id="loadingCircleConfirm" class="loading-circle loading-circle-left"></div>
                            </div>
                        </div>
                        <div id="confirmationResult"></div>
                    </div>
                </div>
                <div class="image-container" style="display: flex; gap: 20px;">
                    <div id="additionalPrerenderImageContainer" class="image-section shadow-effect">
                        <div class="select-container">
                            <label for="additionalPrerenderImageSelect">Select Preview Image:</label>
                            <select id="additionalPrerenderImageSelect" class="form-select">
                                <!-- Options will be populated dynamically -->
                            </select>
                        </div>
                        <img id="additionalPrerenderImage" class="shadow-effect" style="display: none;">
                    </div>
                    <div id="instructionMatchPlots" class="image-section shadow-effect"></div>
                </div>
            </div>

            <div id="resultsTab" class="tab-content" style="display:none;">
                <div><h2>Instructions</h2></div>
                <div class="instructions-summary-box">
                    <div class="instructions-summary" id="instructionsSummary">
                        <!-- Instructions summary will be populated dynamically -->
                    </div>
                </div>
                <div><hr><p> </p></div>
                <div><h2>Problems Specific Results</h2></div>
                <div class="results-container" id="resultsContainer">
                    <!-- Results will be populated dynamically -->
                </div>
                <div><hr><p> </p></div>
                <div><h2>Full Variance Analysis</h2></div>
                <div class="variance-analysis-container" id="varianceAnalysisContainer">
                    <!-- Variance analysis chart will be populated dynamically -->
                </div>
            </div>
        </div>
    </div>

    <script>
        let isTraining = false;
        let cancelTraining = false;
        let allConfigs = {};
        let allObservedStates = {};
        let allPlotOptions = {};
        let allExperimentConfigs = {}; // New global variable for experiment configs

        fetch('/get_applications')
            .then(response => response.json())
            .then(data => {
                const select = document.getElementById('applicationSelect');
                const defaultOption = document.createElement('option');
                defaultOption.value = '';
                defaultOption.text = 'Choose application...';
                defaultOption.disabled = true;
                defaultOption.selected = true;
                select.appendChild(defaultOption);
                data.applications.forEach(app => {
                    const option = document.createElement('option');
                    option.value = app;
                    option.textContent = app;
                    select.appendChild(option);
                });
            })
            .catch(error => console.error('Error loading applications:', error));

        fetch('/get_all_options')
            .then(response => response.json())
            .then(data => {
                allConfigs = data.localConfigs;
                allObservedStates = data.observedStates;
                allPlotOptions = data.plotOptions;
                allExperimentConfigs = data.experimentConfigs; // assign experiment configs
            })
            .catch(error => console.error('Error loading options:', error));

        document.getElementById('applicationSelect').addEventListener('change', function() {
            const selectedApp = this.value;
            const configSelections = document.getElementById('configSelections');
            const loadingOverlay = document.getElementById('loadingOverlay');
            
            if (selectedApp) {
                loadingOverlay.style.display = 'flex';
                setTimeout(() => {
                    const configSelect = document.getElementById('localConfigSelect');
                    configSelect.innerHTML = '';
                    const defaultConfigOption = document.createElement('option');
                    defaultConfigOption.value = '';
                    defaultConfigOption.text = 'Choose config...';
                    defaultConfigOption.disabled = true;
                    configSelect.appendChild(defaultConfigOption);
                    if (allConfigs[selectedApp]) {
                        allConfigs[selectedApp].forEach((config, index) => {
                            const option = document.createElement('option');
                            option.value = config;
                            option.text = config;
                            if (index === 0) {
                                option.selected = true;
                            }
                            configSelect.appendChild(option);
                        });
                    }

                    const observedStateSelect = document.getElementById('observedStateSelect');
                    observedStateSelect.innerHTML = '';
                    const defaultObservedStateOption = document.createElement('option');
                    defaultObservedStateOption.value = '';
                    defaultObservedStateOption.text = 'Select observed states data';
                    defaultObservedStateOption.disabled = true;
                    observedStateSelect.appendChild(defaultObservedStateOption);
                    if (allObservedStates[selectedApp]) {
                        allObservedStates[selectedApp].forEach((state, index) => {
                            const option = document.createElement('option');
                            option.value = state;
                            option.text = state;
                            if (index === 0) {
                                option.selected = true;
                            }
                            observedStateSelect.appendChild(option);
                        });
                    }

                    const plotSelect = document.getElementById('plotSelect');
                    plotSelect.innerHTML = '';
                    const defaultPlotOption = document.createElement('option');
                    defaultPlotOption.value = '';
                    defaultPlotOption.text = 'Choose plot...';
                    defaultPlotOption.disabled = true;
                    plotSelect.appendChild(defaultPlotOption);
                    if (allPlotOptions[selectedApp]) {
                        allPlotOptions[selectedApp].forEach((plot, index) => {
                            const option = document.createElement('option');
                            option.value = plot;
                            option.text = plot;
                            if (index === 0) {
                                option.selected = true;
                            }
                            plotSelect.appendChild(option);
                        });
                    }
                    
                    // New: Populate Experiment Config dropdown in Presets tab
                    const experimentConfigSelect = document.getElementById('experimentConfigSelect');
                    experimentConfigSelect.innerHTML = '';
                    const defaultExperimentConfigOption = document.createElement('option');
                    defaultExperimentConfigOption.value = '';
                    defaultExperimentConfigOption.text = 'Choose experiment config...';
                    defaultExperimentConfigOption.disabled = true;
                    defaultExperimentConfigOption.selected = true;
                    experimentConfigSelect.appendChild(defaultExperimentConfigOption);
                    if (allExperimentConfigs[selectedApp]) {
                        allExperimentConfigs[selectedApp].forEach((config, index) => {
                            const option = document.createElement('option');
                            option.value = config;
                            option.text = config;
                            // Remove the automatic selection of first option
                            experimentConfigSelect.appendChild(option);
                        });
                    }

                    // Add event listener for experiment config selection
                    experimentConfigSelect.addEventListener('change', function() {
                        const selectedConfig = this.value;
                        if (selectedConfig && allExperimentConfigs[selectedApp]) {
                            // Get the config data from the server
                            fetch('/get_experiment_config', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                },
                                body: JSON.stringify({
                                    application: selectedApp,
                                    config: selectedConfig
                                })
                            })
                            .then(response => response.json())
                            .then(data => {
                                if (data.config) {
                                    // Update agent checkboxes
                                    const agentCheckboxes = document.querySelectorAll('input[name="agentType"]');
                                    agentCheckboxes.forEach(checkbox => {
                                        checkbox.checked = data.config.agent_select.includes(checkbox.value);
                                    });

                                    // Update training parameters
                                    document.getElementById('trainingEpisodes').value = data.config.number_training_episodes || 1000;
                                    document.getElementById('trainingRepeats').value = data.config.number_training_repeats || 5;
                                    document.getElementById('trainingSeeds').value = data.config.number_training_seeds || 1;
                                    document.getElementById('testEpisodes').value = data.config.number_test_episodes || 200;
                                    document.getElementById('testRepeats').value = data.config.number_test_repeats || 10;

                                    // Update Q-Learning parameters if they exist
                                    if (data.config.agent_parameters && data.config.agent_parameters.Qlearntab) {
                                        const qlearnParams = data.config.agent_parameters.Qlearntab;
                                        document.getElementById('alpha').value = qlearnParams.alpha || 0.1;
                                        document.getElementById('gamma').value = qlearnParams.gamma || 0.95;
                                        document.getElementById('epsilon').value = qlearnParams.epsilon || 0.2;
                                        document.getElementById('epsilonStep').value = qlearnParams.epsilon_step || 0.01;
                                    }

                                    // Update SB3 DQN parameters if they exist
                                    if (data.config.agent_parameters && data.config.agent_parameters.SB3_DQN) {
                                        const sb3DqnParams = data.config.agent_parameters.SB3_DQN;
                                        document.getElementById('sb3_policy').value = sb3DqnParams.policy || 'MlpPolicy';
                                        document.getElementById('sb3_learning_rate').value = sb3DqnParams.learning_rate || 0.0001;
                                        document.getElementById('sb3_buffer_size').value = sb3DqnParams.buffer_size || 1000000;
                                    }

                                    // Update SB3 PPO parameters if they exist
                                    if (data.config.agent_parameters && data.config.agent_parameters.SB3_PPO) {
                                        const sb3PpoParams = data.config.agent_parameters.SB3_PPO;
                                        document.getElementById('sb3_ppo_policy').value = sb3PpoParams.policy || 'MlpPolicy';
                                        document.getElementById('sb3_ppo_learning_rate').value = sb3PpoParams.learning_rate || 0.0003;
                                        document.getElementById('sb3_ppo_n_steps').value = sb3PpoParams.n_steps || 2048;
                                    }

                                    // Update SB3 A2C parameters if they exist
                                    if (data.config.agent_parameters && data.config.agent_parameters.SB3_A2C) {
                                        const sb3A2cParams = data.config.agent_parameters.SB3_A2C;
                                        document.getElementById('sb3_a2c_policy').value = sb3A2cParams.policy || 'MlpPolicy';
                                        document.getElementById('sb3_a2c_learning_rate').value = sb3A2cParams.learning_rate || 0.0007;
                                        document.getElementById('sb3_a2c_n_steps').value = sb3A2cParams.n_steps || 500;
                                    }

                                    // Update adapter checkboxes
                                    const adapterCheckboxes = document.querySelectorAll('input[name="adapter"]');
                                    adapterCheckboxes.forEach(checkbox => {
                                        checkbox.checked = data.config.adapter_input_dict[checkbox.value] !== undefined;
                                    });

                                    // Show/hide parameter sections based on selected agents
                                    document.querySelectorAll('input[name="agentType"]').forEach(checkbox => {
                                        const event = new Event('change');
                                        checkbox.dispatchEvent(event);
                                    });
                                }
                            })
                            .catch(error => console.error('Error loading experiment config:', error));
                        }
                    });

                    configSelections.style.display = 'block';
                    loadingOverlay.style.display = 'none';
                }, 2000); // 2-second delay

                // Fetch and display prerender images
                fetch('/get_prerender_image', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ application: selectedApp })
                })
                .then(response => response.json())
                .then(data => {
                    const prerenderImageSelect = document.getElementById('prerenderImageSelect');
                    const prerenderImage = document.getElementById('prerenderImage');
                    const additionalPrerenderImageSelect = document.getElementById('additionalPrerenderImageSelect');
                    const additionalPrerenderImage = document.getElementById('additionalPrerenderImage');
                    prerenderImageSelect.innerHTML = '';
                    prerenderImage.style.display = 'none';
                    additionalPrerenderImageSelect.innerHTML = '';
                    additionalPrerenderImage.style.display = 'none';
                    if (data.imagePaths) {
                        data.imagePaths.forEach((imagePath, index) => {
                            const option = document.createElement('option');
                            option.value = imagePath;
                            option.text = imagePath.split('/').pop();
                            if (index === 0) {
                                option.selected = true;
                                prerenderImage.src = `/${imagePath}`;
                                prerenderImage.style.display = 'block';
                                additionalPrerenderImage.src = `/${imagePath}`;
                                additionalPrerenderImage.style.display = 'block';
                            }
                            prerenderImageSelect.appendChild(option);
                            additionalPrerenderImageSelect.appendChild(option.cloneNode(true));
                        });
                    }
                })
                .catch(error => console.error('Error loading prerender images:', error));

                // Add adapter fetch
                fetch('/get_adapters', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ application: selectedApp })
                })
                .then(response => response.json())
                .then(data => {
                    const adapterChecklist = document.getElementById('adapterChecklist');
                    adapterChecklist.innerHTML = '';
                    if (data.adapters) {
                        data.adapters.forEach(adapter => {
                            const div = document.createElement('div');
                            div.className = 'application-item';
                            div.innerHTML = `
                                <input type="checkbox" id="adapter-${adapter}" name="adapter" value="${adapter}" checked>
                                <label for="adapter-${adapter}">${adapter}</label>
                            `;
                            adapterChecklist.appendChild(div);
                        });
                    }
                });
            } else {
                configSelections.style.display = 'none';
            }
        });

        document.getElementById('prerenderImageSelect').addEventListener('change', function() {
            const selectedImage = this.value;
            const prerenderImage = document.getElementById('prerenderImage');
            if (selectedImage) {
                prerenderImage.src = `/${selectedImage}`;
                prerenderImage.style.display = 'block';
            } else {
                prerenderImage.style.display = 'none';
            }
        });

        document.getElementById('additionalPrerenderImageSelect').addEventListener('change', function() {
            const selectedImage = this.value;
            const additionalPrerenderImage = document.getElementById('additionalPrerenderImage');
            if (selectedImage) {
                additionalPrerenderImage.src = `/${selectedImage}`;
                additionalPrerenderImage.style.display = 'block';
            } else {
                additionalPrerenderImage.style.display = 'none';
            }
        });

        async function processInput() {
            const input = document.getElementById('userInput');
            const submitBtn = document.getElementById('submitBtn');
            const consoleOutput = document.getElementById('consoleOutput');
            const loadingCircleSubmit = document.getElementById('loadingCircleSubmit');
            const rocket = document.getElementById('rocket');
            const instructionMatchPlots = document.getElementById('instructionMatchPlots');

            const selectedAgents = Array.from(document.querySelectorAll('input[name="agentType"]:checked'))
                .map(cb => cb.value);            

            const selectedApp = document.getElementById('applicationSelect').value;
            const localConfig = document.getElementById('localConfigSelect').value;
            const observedState = document.getElementById('observedStateSelect').value;
            const selectedPlot = document.getElementById('plotSelect').value;

            const trainingEpisodes = document.getElementById('trainingEpisodes').value;

            if (!selectedApp) {
                alert('Please select an application');
                return;
            }

            input.disabled = true;
            submitBtn.disabled = true;
            loadingCircleSubmit.style.display = 'block';
            rocket.style.display = 'block';
            rocket.classList.add('launch');

            try {
                const response = await fetch('/process_input', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        userInput: input.value,
                        selectedApps: [selectedApp],
                        selectedAgents: selectedAgents,
                        observedStateInput: observedState,
                        localConfigInput: localConfig,
                        selectedPlot: selectedPlot,
                        trainingEpisodes: document.getElementById('trainingEpisodes').value
                    })
                });

                const data = await response.json();
                loadingCircleSubmit.style.display = 'none';
                input.disabled = false;
                submitBtn.disabled = false;
                consoleOutput.innerHTML = data.console_output;
                rocket.style.display = 'none';
                rocket.classList.remove('launch');
                instructionMatchPlots.innerHTML = '';
                if (data.matchPlots && data.matchPlots.length > 0) {
                    data.matchPlots.forEach(plot => {
                        const img = document.createElement('img');
                        img.src = `/${plot}?t=${new Date().getTime()}`;
                        img.alt = 'Instruction match plot';
                        img.className = 'shadow-effect';
                        instructionMatchPlots.appendChild(img);
                    });
                }
            } catch (error) {
                console.error('Error processing input:', error);
                loadingCircleSubmit.style.display = 'none';
                input.disabled = false;
                submitBtn.disabled = false;
            }
        }

        function confirmResult(isCorrect) {
            const confirmationResult = document.getElementById('confirmationResult');
            const loadingCircleConfirm = document.getElementById('loadingCircleConfirm');
            const user_input = document.getElementById('userInput').value;
            const selectedApp = document.getElementById('applicationSelect').value;

            confirmationResult.innerHTML = '';
            loadingCircleConfirm.style.display = 'block';
            document.getElementById('loadingOverlay').style.display = 'flex';

            console.log(`Sending confirmation: isCorrect=${isCorrect}, userInput=${user_input}`);

            fetch('/confirm_result', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    isCorrect: isCorrect, 
                    userInput: user_input,
                    selectedApps: [selectedApp],
                })    
            })
            .then(response => {
                if (!response.ok) {
                    console.error('Error response from server:', response);
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                console.log('Server response:', data);
                confirmationResult.innerHTML = data.message;
                confirmationResult.style.color = isCorrect ? 'green' : 'red';
                loadingCircleConfirm.style.display = 'none';
                document.getElementById('loadingOverlay').style.display = 'none';
            })
            .catch(error => {
                console.error('Error sending confirmation:', error);
                confirmationResult.innerHTML = 'Error sending confirmation';
                confirmationResult.style.color = 'red';
                loadingCircleConfirm.style.display = 'none';
                document.getElementById('loadingOverlay').style.display = 'none';
            });
        }

        function newInstruction() {
            document.getElementById('userInput').value = '';
            document.getElementById('consoleOutput').innerHTML = '';
            document.getElementById('instructionMatchPlots').innerHTML = '';
            document.getElementById('confirmationResult').innerHTML = '';
            fetch('/new_instruction', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ instruction: document.getElementById('userInput').value })
            })
            .then(response => response.json())
            .then(data => {
                console.log('New instruction processed:', data);
                // Clear the match plots
                document.getElementById('instructionMatchPlots').innerHTML = '';
            })
            .catch(error => console.error('Error processing new instruction:', error));
        }

        async function runExperiment() {
            const selectedAgents = Array.from(document.querySelectorAll('input[name="agentType"]:checked'))
                .map(cb => cb.value);
            const selectedAdapters = Array.from(document.querySelectorAll('input[name="adapter"]:checked'))
                .map(cb => cb.value);

            const selectedApp = document.getElementById('applicationSelect').value;
            const localConfig = document.getElementById('localConfigSelect').value;
            const observedState = document.getElementById('observedStateSelect').value;
            const selectedPlot = document.getElementById('plotSelect').value;

            const trainingEpisodes = parseInt(document.getElementById('trainingEpisodes').value);
            const trainingRepeats = parseInt(document.getElementById('trainingRepeats').value);
            const trainingSeeds = parseInt(document.getElementById('trainingSeeds').value);
            const testEpisodes = parseInt(document.getElementById('testEpisodes').value);
            const testRepeats = parseInt(document.getElementById('testRepeats').value);
            const alpha = parseFloat(document.getElementById('alpha').value);
            const gamma = parseFloat(document.getElementById('gamma').value);
            const epsilon = parseFloat(document.getElementById('epsilon').value);
            const epsilonStep = parseFloat(document.getElementById('epsilonStep').value);

            if (!selectedApp) {
                alert('Please select an application');
                return;
            }

            const params = {
                userInput: document.getElementById('userInput').value,
                trainingEpisodes: trainingEpisodes,
                trainingRepeats: trainingRepeats,
                trainingSeeds: trainingSeeds,
                testEpisodes: testEpisodes,
                testRepeats: testRepeats,
                alpha: alpha,
                gamma: gamma,
                epsilon: epsilon,
                epsilonStep: epsilonStep,
                selectedAgents: selectedAgents,
                selectedAdapters: selectedAdapters,
                selectedApps: [selectedApp],
                localConfigInput: localConfig,
                observedStateInput: observedState,
                selectedPlot: selectedPlot,
            };

            if (selectedAgents.includes('DQN')) {
                params.dqnParams = {
                    input_size: parseInt(document.getElementById('input_size').value),
                    sent_hidden_dim: parseInt(document.getElementById('sent_hidden_dim').value),
                    hidden_dim: parseInt(document.getElementById('hidden_dim').value),
                    num_hidden: parseInt(document.getElementById('num_hidden').value),
                    sequence_size: parseInt(document.getElementById('sequence_size').value),
                    memory_size: parseInt(document.getElementById('memory_size').value),
                    target_replace_iter: parseInt(document.getElementById('target_replace_iter').value),
                    learning_rate: parseFloat(document.getElementById('learning_rate').value),
                    batch_size: parseInt(document.getElementById('batch_size').value),
                    output_size: parseInt(document.getElementById('output_size').value),
                    learn_step_counter: parseInt(document.getElementById('learn_step_counter').value),
                    epsilon: parseFloat(document.getElementById('dqn_epsilon').value),
                    epsilon_step: parseFloat(document.getElementById('dqn_epsilon_step').value),
                    // action_space_index: document.getElementById('action_space_index').value,
                    target_replace_iter: parseInt(document.getElementById('target_replace_iter').value)
                };
            }

            if (selectedAgents.includes('SB3_DQN')) {
                params.sbDqnParams = {
                    policy: document.getElementById('sb3_policy').value,
                    learning_rate: parseFloat(document.getElementById('sb3_learning_rate').value),
                    buffer_size: parseInt(document.getElementById('sb3_buffer_size').value)
                };
            }

            if (selectedAgents.includes('SB3_PPO')) {
                params.sb3PpoParams = {
                    policy: document.getElementById('sb3_ppo_policy').value,
                    learning_rate: parseFloat(document.getElementById('sb3_ppo_learning_rate').value),
                    n_steps: parseInt(document.getElementById('sb3_ppo_n_steps').value)
                };
            }

            if (selectedAgents.includes('SB3_A2C')) {
                params.sb3A2cParams = {
                    policy: document.getElementById('sb3_a2c_policy').value,
                    learning_rate: parseFloat(document.getElementById('sb3_a2c_learning_rate').value),
                    n_steps: parseInt(document.getElementById('sb3_a2c_n_steps').value)
                };
            }

            const loadingOverlay = document.getElementById('loadingOverlay');
            loadingOverlay.style.display = 'flex';

            try {
                const response = await fetch('/train_model', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(params)
                });

                const data = await response.json();
                const instructionsSummary = document.getElementById('instructionsSummary');
                const resultsContainer = document.getElementById('resultsContainer');
                const varianceAnalysisContainer = document.getElementById('varianceAnalysisContainer');
                instructionsSummary.innerHTML = ''; // Clear existing instructions summary
                resultsContainer.innerHTML = ''; // Clear existing results
                varianceAnalysisContainer.innerHTML = ''; // Clear existing variance analysis

                // Fetch all validated correct instructions
                const correctInstructionsResponse = await fetch('/get_correct_instructions');
                const correctInstructionsData = await correctInstructionsResponse.json();
                const correctInstructions = correctInstructionsData.correctInstructions;

                // Populate instructions summary
                correctInstructions.forEach((instruction, index) => {
                    const instructionDiv = document.createElement('div');
                    const instructions = instruction.split('\n').join(' - ');
                    instructionDiv.innerHTML = `<b>Instruction ${index}:</b> ${instructions}`;
                    instructionsSummary.appendChild(instructionDiv);
                });

                // Populate results and variance analysis
                if (data.figures && data.figures.length > 0) {
                    data.figures.forEach(figPath => {
                        const img = document.createElement('img');
                        img.src = `/${figPath}?t=${new Date().getTime()}`;
                        img.alt = 'Analysis result';
                        img.className = 'shadow-effect';
                        
                        if (figPath.includes('variance_analysis')) {
                            // Create a container for the plot with title
                            const plotContainer = document.createElement('div');
                            plotContainer.className = 'plot-container';
                            plotContainer.style.marginBottom = '20px';
                            
                            // Extract filename from path and create title
                            const filename = figPath.split('/').pop().split('.')[0];
                            const title = document.createElement('h3');
                            title.textContent = filename.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
                            title.style.marginBottom = '10px';
                            title.style.color = 'var(--text-color)';
                            
                            plotContainer.appendChild(title);
                            plotContainer.appendChild(img);
                            varianceAnalysisContainer.appendChild(plotContainer);
                        } else {
                            // Create a container for the plot with title
                            const plotContainer = document.createElement('div');
                            plotContainer.className = 'plot-container';
                            plotContainer.style.marginBottom = '20px';
                            
                            // Extract filename from path and create title
                            const filename = figPath.split('/').pop().split('.')[0];
                            const title = document.createElement('h3');
                            title.textContent = filename.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
                            title.style.marginBottom = '10px';
                            title.style.color = 'var(--text-color)';
                            
                            plotContainer.appendChild(title);
                            plotContainer.appendChild(img);
                            resultsContainer.appendChild(plotContainer);
                        }
                    });
                }
            } catch (error) {
                console.error('Error running experiment:', error);
            } finally {
                loadingOverlay.style.display = 'none';
            }
        }

        function openTab(evt, tabName) {
            var i, tabcontent, tablinks;
            
            tabcontent = document.getElementsByClassName("tab-content");
        
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
            tablinks = document.getElementsByClassName("tab-btn");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" active", "");
            }
            document.getElementById(tabName).style.display = "block";
            if (evt) {
                evt.currentTarget.className += " active";
            } else {
                document.querySelector(`[onclick="openTab(event, '${tabName}')"]`).className += " active";
            }
        }

        window.onload = function() {
            openTab(null, 'setupTab');
            fetch('/load_data')
                .then(response => response.json())
                .then(data => {
                    console.log('Data loaded successfully');
                })
                .catch(error => console.error('Error loading data:', error));
        };

        document.querySelectorAll('input[name="agentType"]').forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                const qlearnParams = document.getElementById('qlearn-params');
                const dqnParams = document.getElementById('dqn-params');
                const sb3DqnParams = document.getElementById('sb3-dqn-params');
                const sb3PpoParams = document.getElementById('sb3-ppo-params');
                const sb3A2cParams = document.getElementById('sb3-a2c-params');
                
                if (this.value === 'Qlearntab') {
                    qlearnParams.style.display = this.checked ? 'block' : 'none';
                } else if (this.value === 'DQN') {
                    dqnParams.style.display = this.checked ? 'block' : 'none';
                } else if (this.value === 'SB3_DQN') {
                    sb3DqnParams.style.display = this.checked ? 'block' : 'none';
                } else if (this.value === 'SB3_PPO') {
                    sb3PpoParams.style.display = this.checked ? 'block' : 'none';
                } else if (this.value === 'SB3_A2C') {
                    sb3A2cParams.style.display = this.checked ? 'block' : 'none';
                }
            });
        });

    </script>
</body>
</html>