{# Bayesian optimization tab component #}

<div class="tab-pane fade" id="tab3" role="tabpanel" aria-labelledby="tab3-tab">


    {#            <div class="row align-items-center mb-3">#}
{#                <div class="col-6">#}
{#                    <form method="POST" id="loadHistory" name="loadHistory" action="{{ url_for('execute.execute_files.upload_history') }}" enctype="multipart/form-data">#}
{#                        <div class="input-group">#}
{#                            <input class="form-control" name="historyfile" id="historyfile" type="file" accept=".csv" onchange="var f=document.getElementById('loadHistory'); if(f) f.submit();">                        </div>#}
{#                    </form>#}
{#                </div>#}
{#            </div>#}
            <h6 class="fw-bold mt-2 mb-1">Load Previous Data</h6>

        <form method="POST" name="bo" action="{{ url_for('execute.run_bo') }}">
            <div class="container py-2">

                <!-- Data Loading Section -->
                <div class="input-group mb-3">
                    <label class="input-group-text"><i class="bi bi-folder2-open"></i></label>
                    <select class="form-select" id="existing_data" name="existing_data">
                        <option value="">Load existing data...</option>
                        {% for data in data_list %}
                            <option value="{{ data }}">{{ data }} </option>
                        {% endfor %}
                    </select>
                </div>

                <!-- Data preview section -->
                <div class="row mb-3" id="data_preview_section" style="display: none;">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header py-2">
                                <small class="fw-bold">Data Preview</small>
                            </div>
                            <div class="card-body py-2">
                                <div id="data_preview_content">
                                    <small class="text-muted">Select a data source to preview</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <hr class="my-3">
                <!-- Optimizer Selection -->
                <div class="input-group mb-3">
                    <label class="input-group-text"><i class="bi bi-gear"></i></label>
                    <select class="form-select" id="optimizer_type" name="optimizer_type" onchange="updateOptimizerInfo()">
                        <option value="">Select optimizer...</option>
                        {% for optimizer_name, optimizer_info in optimizer_schema.items() %}
                            <option value="{{ optimizer_name }}"
                                    data-multiobjective="{{ optimizer_info.multiple_objectives }}"
                                    data-parameter-types="{{ optimizer_info.parameter_types|join(',') }}"
                                    data-optimizer-config="{{ optimizer_info.optimizer_config|tojson|e }}">
                                {{ optimizer_name }} {% if optimizer_info.multiple_objectives %}(Multi-objective supported){% endif %}
                            </option>
                        {% endfor %}
                    </select>
                </div>
                <!-- Tabs Navigation -->
                <ul class="nav nav-tabs" id="configTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="parameters-tab" data-bs-toggle="tab" data-bs-target="#parameters" type="button" role="tab" aria-controls="parameters" aria-selected="true">
                            Parameters
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="advanced-tab" data-bs-toggle="tab" data-bs-target="#advanced" type="button" role="tab" aria-controls="advanced" aria-selected="false">
                            Advanced Settings
                        </button>
                    </li>
                </ul>

                <!-- Tab Content -->
                <div class="tab-content" id="configTabContent">
                    <!-- Parameters Tab -->
                    <div class="tab-pane fade show active" id="parameters" role="tabpanel" aria-labelledby="parameters-tab">
                        <div class="py-3">
                            <h6 class="fw-bold mt-2 mb-1">Parameters</h6>
                            <div id="parameters_container">
                                {% for config in config_list %}
                                    <div class="row align-items-center mb-2 parameter-row">
                                        <div class="col-3 col-form-label-sm">
                                            {{ config }}:
                                        </div>
                                        <div class="col-3">
                                            <select class="form-select form-select-sm parameter-type" id="{{config}}_type" name="{{config}}_type" onchange="updateParameterInputs(this)">
                                                <!-- Options will be populated by JavaScript -->
                                            </select>
                                        </div>
                                        <div class="col-6 parameter-inputs">
                                            <input type="text" class="form-control form-control-sm single-input" id="{{config}}_value" name="{{config}}_value" placeholder="1, 2, 3">
                                            <div class="range-inputs" style="display: none;">
                                                <div class="row">
                                                    <div class="col-6">
                                                        <input type="text" class="form-control form-control-sm" id="{{config}}_min" name="{{config}}_min" placeholder="Min value">
                                                    </div>
                                                    <div class="col-6">
                                                        <input type="text" class="form-control form-control-sm" id="{{config}}_max" name="{{config}}_max" placeholder="Max value">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>

                            <!-- Objectives -->
                            <h6 class="fw-bold mt-3 mb-1">Objectives</h6>
                            {% for objective in return_list %}
                                <div class="row align-items-center mb-2">
                                    <div class="col-3 col-form-label-sm">
                                        {{ objective }}:
                                    </div>
                                    <div class="col-6">
                                        <select class="form-select form-select-sm" id="{{objective}}_min" name="{{objective}}_min">
                                            <option selected>minimize</option>
                                            <option>maximize</option>
                                            <option>none</option>
                                        </select>
                                    </div>
                                    {% if not return_list|length == 1 %}
                                    <div class="col-3">
                                        <input class="form-control" type="number" id="{{objective}}_weight" name="{{objective}}_weight" min="1" max="1000" value="1">
                                    </div>
                                    {% endif %}
                                </div>
                            {% endfor %}

                            <!-- Budget -->
                            <h6 class="fw-bold mt-3 mb-1">Budget</h6>
                            <div class="input-group mb-3">
                                <label class="input-group-text" for="repeat">Max iteration </label>
                                <input class="form-control" type="number" id="repeat" name="repeat" min="1" max="1000" value="25">
                            </div>
                        </div>
                    </div>

                    <!-- Advanced Settings Tab -->
                    <div class="tab-pane fade" id="advanced" role="tabpanel" aria-labelledby="advanced-tab">
                        <div class="py-3">
                            <h6 class="fw-bold mt-2 mb-1">Optimizer Configuration</h6>
                            <div id="optimizer_config_container" style="display: none;">

                                <!-- Step 1 Configuration -->
                                <div class="card mb-3">
                                    <div class="card-header py-2">
                                        <small class="fw-bold">Step 1 Configuration</small>
                                    </div>
                                    <div class="card-body py-2">
                                        <div class="row align-items-center mb-2">
                                            <div class="col-3 col-form-label-sm">
                                                Model:
                                            </div>
                                            <div class="col-6">
                                                <select class="form-select form-select-sm" id="step1_model" name="step1_model">
                                                    <!-- Options will be populated by JavaScript -->
                                                </select>
                                            </div>
                                        </div>
                                        <div class="row align-items-center mb-2" id="step1_num_samples_row">
                                            <div class="col-3 col-form-label-sm">
                                                Num Samples:
                                            </div>
                                            <div class="col-6">
                                                <input type="number" class="form-control form-control-sm" id="step1_num_samples" name="step1_num_samples" min="1" value="">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Step 2 Configuration -->
                                <div class="card mb-3">
                                    <div class="card-header py-2">
                                        <small class="fw-bold">Step 2 Configuration</small>
                                    </div>
                                    <div class="card-body py-2">
                                        <div class="row align-items-center mb-2">
                                            <div class="col-3 col-form-label-sm">
                                                Model:
                                            </div>
                                            <div class="col-6">
                                                <select class="form-select form-select-sm" id="step2_model" name="step2_model">
                                                    <!-- Options will be populated by JavaScript -->
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="optimizer_config_placeholder">
                                <small class="text-muted">Select an optimizer to configure advanced settings</small>
                            </div>
                        </div>
                    </div>
                </div>

                {% if not no_deck_warning%}
                    <div class="input-group mb-3 mt-3">
                        <button class="form-control" type="submit" name="bo">Run</button>
                    </div>
                {% endif %}
            </div>
        </form>
</div>
    <script>

        const optimizerSchema = {{ optimizer_schema|tojson }};

        document.addEventListener('DOMContentLoaded', function() {
            const dataSelect = document.getElementById('existing_data');
            const previewSection = document.getElementById('data_preview_section');
            const previewContent = document.getElementById('data_preview_content');

            // Data preview functionality
            dataSelect.addEventListener('change', function() {
                const filename = dataSelect.value;
                if (!filename) {
                    previewSection.style.display = 'none';
                    previewContent.innerHTML = '<small class="text-muted">Select a data source to preview</small>';
                    return;
                }
                fetch('{{ url_for("execute.data_preview", filename="FILENAME") }}'.replace('FILENAME', encodeURIComponent(filename)))
                    .then(response => {
                        if (!response.ok) throw new Error('Network response was not ok');
                        return response.json();
                    })
                    .then(data => {
                        previewSection.style.display = '';
                        if (!data.rows || data.rows.length === 0) {
                            previewContent.innerHTML = '<small class="text-muted">No data found in file.</small>';
                            return;
                        }
                        let html = '<table class="table table-sm table-bordered mb-0"><thead><tr>';
                        data.columns.forEach(col => html += `<th>${col}</th>`);
                        html += '</tr></thead><tbody>';
                        data.rows.forEach(row => {
                            html += '<tr>';
                            data.columns.forEach(col => html += `<td>${row[col] || ''}</td>`);
                            html += '</tr>';
                        });
                        html += '</tbody></table>';
                        previewContent.innerHTML = html;
                    })
                    .catch(() => {
                        previewSection.style.display = '';
                        previewContent.innerHTML = '<small class="text-danger">Failed to load preview.</small>';
                    });
            });
        });

        function updateOptimizerInfo() {
            const optimizerSelect = document.getElementById('optimizer_type');
            const selectedOption = optimizerSelect.selectedOptions[0];

            if (!selectedOption || !selectedOption.value) {
                // Hide optimizer config and reset parameter types
                document.getElementById('optimizer_config_container').style.display = 'none';
                document.getElementById('optimizer_config_placeholder').style.display = 'block';
                resetParameterTypes();
                return;
            }

            // Update parameter types
            const parameterTypes = selectedOption.dataset.parameterTypes.split(',');
            updateParameterTypeOptions(parameterTypes);

            // Update optimizer config - use the stored schema data instead
            const optimizerName = selectedOption.value;
            if (optimizerSchema[optimizerName] && optimizerSchema[optimizerName].optimizer_config) {
                updateOptimizerConfig(optimizerSchema[optimizerName].optimizer_config);
            } else {
                document.getElementById('optimizer_config_container').style.display = 'none';
                document.getElementById('optimizer_config_placeholder').style.display = 'block';
            }
        }

        function updateParameterTypeOptions(availableTypes) {
            const parameterTypeSelects = document.querySelectorAll('.parameter-type');

            parameterTypeSelects.forEach(select => {
                // Clear existing options
                select.innerHTML = '';

                // Add available options based on optimizer
                availableTypes.forEach(type => {
                    const option = document.createElement('option');
                    option.value = type;
                    option.textContent = type;
                    if (type === 'range') {
                        option.selected = true;
                    }
                    select.appendChild(option);
                });

                // Update inputs for the current selection
                updateParameterInputs(select);
            });
        }

        function resetParameterTypes() {
            const parameterTypeSelects = document.querySelectorAll('.parameter-type');

            parameterTypeSelects.forEach(select => {
                select.innerHTML = '';
                const defaultTypes = ['range', 'choice', 'fixed'];
                defaultTypes.forEach(type => {
                    const option = document.createElement('option');
                    option.value = type;
                    option.textContent = type;
                    if (type === 'range') {
                        option.selected = true;
                    }
                    select.appendChild(option);
                });

                updateParameterInputs(select);
            });
        }

        function updateParameterInputs(selectElement) {
            const parameterRow = selectElement.closest('.parameter-row');
            const singleInput = parameterRow.querySelector('.single-input');
            const rangeInputs = parameterRow.querySelector('.range-inputs');

            if (selectElement.value === 'range') {
                singleInput.style.display = 'none';
                rangeInputs.style.display = 'block';
            } else {
                singleInput.style.display = 'block';
                rangeInputs.style.display = 'none';
            }
        }

        function updateOptimizerConfig(config) {
            const container = document.getElementById('optimizer_config_container');
            const placeholder = document.getElementById('optimizer_config_placeholder');

            console.log('Updating optimizer config:', config); // Debug log

            if (!config || !config.step_1) {
                container.style.display = 'none';
                placeholder.style.display = 'block';
                return;
            }

            placeholder.style.display = 'none';
            container.style.display = 'block';

            // Update Step 1
            const step1ModelSelect = document.getElementById('step1_model');
            if (step1ModelSelect && config.step_1.model) {
                step1ModelSelect.innerHTML = '';
                config.step_1.model.forEach(model => {
                    const option = document.createElement('option');
                    option.value = model;
                    option.textContent = model;
                    step1ModelSelect.appendChild(option);
                });
            }

            // Update Step 1 num_samples if exists
            const step1NumSamplesRow = document.getElementById('step1_num_samples_row');
            const step1NumSamplesInput = document.getElementById('step1_num_samples');
            if (step1NumSamplesRow && step1NumSamplesInput) {
                if (config.step_1.num_samples !== undefined) {
                    step1NumSamplesRow.style.display = '';
                    step1NumSamplesInput.value = config.step_1.num_samples;
                } else {
                    step1NumSamplesRow.style.display = 'none';
                }
            }

            // Update Step 2
            if (config.step_2) {
                const step2ModelSelect = document.getElementById('step2_model');
                if (step2ModelSelect && config.step_2.model) {
                    step2ModelSelect.innerHTML = '';
                    config.step_2.model.forEach(model => {
                        const option = document.createElement('option');
                        option.value = model;
                        option.textContent = model;
                        step2ModelSelect.appendChild(option);
                    });
                }
            }
        }

        // Initialize parameter inputs on page load
        document.addEventListener('DOMContentLoaded', function() {
            const parameterTypeSelects = document.querySelectorAll('.parameter-type');
            parameterTypeSelects.forEach(select => {
                updateParameterInputs(select);
            });
        });
    </script>