{% extends 'base.html' %}
{% block title %}IvoryOS | Design execution{% endblock %}

{% block body %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.js"></script>

    {% if no_deck_warning and not dismiss %}
        {# auto pop import when there is no deck#}
        <script type="text/javascript">
            function OpenBootstrapPopup() {
                $("#importModal").modal('show');
            }
            window.onload = function () {
                OpenBootstrapPopup();
            };
        </script>
    {% endif %}
        <div id="progress-warning" style="border: 1px solid #f5c2c7; background-color: #f8d7da; color: #842029; padding: 1rem; border-radius: 0.5rem; margin: 1rem 0; font-size: 0.95rem;">
            ⚠️ <strong>Note:</strong> Real-time progress tracking in this demo is currently <strong>not working</strong>. The system may report busy if multiple runs are initiated.
            <br>
            Workflow will still work, results can be tracked via the <strong>Data</strong> tab.
            <br>
        </div>
    <div class="row">
        {% include 'components/run_panel.html' %}
        {% include 'components/progress_panel.html' %}
        {% include 'components/logging_panel.html' %}
    </div>

    {# Include error modal #}
    {% include 'components/error_modal.html' %}

    <script src="{{ url_for('static', filename='js/socket_handler.js') }}"></script>
    <script>
        var rowCount = 0;
        var configColumns = [
            {% for column in config_list %}
                '{{ column }}'{{ ',' if not loop.last else '' }}
            {% endfor %}
        ];
        var configTypes = {
            {% for column, type in config_type_list.items() %}
                '{{ column }}': '{{ type }}'{{ ',' if not loop.last else '' }}
            {% endfor %}
        };

        // State management
        var originalFileData = null;
        var isModifiedFromFile = false;
        var saveTimeout = null;
        var lastSavedData = null;

        function addRow(data = null, skipSave = false) {
            rowCount++;
            var tableBody = document.getElementById("tableBody");
            var newRow = tableBody.insertRow(-1);

            // Row number cell
            var rowNumCell = newRow.insertCell(-1);
            rowNumCell.innerHTML = '<span class="badge bg-secondary">' + rowCount + '</span>';

            // Data cells
            configColumns.forEach(function(column, index) {
                var cell = newRow.insertCell(-1);
                var value = data && data[column] ? data[column] : '';
                var placeholder = configTypes[column] || 'value';
                cell.innerHTML = '<input type="text" class="form-control form-control-sm" name="' +
                    column + '[' + rowCount + ']" value="' + value + '" placeholder="' + placeholder +
                    '" oninput="onInputChange()" onchange="onInputChange()">';
            });

            // Action cell
            var actionCell = newRow.insertCell(-1);
            actionCell.innerHTML = '<button type="button" class="btn btn-sm btn-outline-danger" onclick="removeRow(this)" title="Remove row">' +
                '<i class="bi bi-trash"></i></button>';

            if (!skipSave) {
                markAsModified();
                debouncedSave();
            }
        }

        function removeRow(button) {
            var row = button.closest('tr');
            row.remove();
            updateRowNumbers();
            markAsModified();
            debouncedSave();
        }

        function updateRowNumbers() {
            var tableBody = document.getElementById("tableBody");
            var rows = tableBody.getElementsByTagName('tr');
            for (var i = 0; i < rows.length; i++) {
                var badge = rows[i].querySelector('.badge');
                if (badge) {
                    badge.textContent = i + 1;
                }
            }
        }

        function clearAllRows() {
            if (confirm('Are you sure you want to clear all rows?')) {
                var tableBody = document.getElementById("tableBody");
                tableBody.innerHTML = '';
                rowCount = 0;
                markAsModified();
                clearSavedData();
                // Add 5 empty rows by default
                for (let i = 0; i < 5; i++) {
                    addRow(null, true);
                }
                debouncedSave();
            }
        }

        function resetToFile() {
            if (originalFileData && confirm('Reset to original file data? This will lose all manual changes.')) {
                loadDataFromSource(originalFileData, false);
                isModifiedFromFile = false;
                updateStatusIndicators();
                debouncedSave();
            }
        }

        function onInputChange() {
            markAsModified();
            debouncedSave();
        }

        function markAsModified() {
            if (originalFileData) {
                isModifiedFromFile = true;
                updateStatusIndicators();
            }
        }

        function updateStatusIndicators() {
            var modifiedStatus = document.getElementById('modifiedStatus');
            var resetBtn = document.getElementById('resetToFileBtn');

            if (isModifiedFromFile && originalFileData) {
                modifiedStatus.style.display = 'inline-block';
                resetBtn.style.display = 'inline-block';
            } else {
                modifiedStatus.style.display = 'none';
                resetBtn.style.display = 'none';
            }
        }

        function showSaveStatus() {
            var saveStatus = document.getElementById('saveStatus');
            saveStatus.style.display = 'inline-block';
            setTimeout(function() {
                saveStatus.style.display = 'none';
            }, 2000);
        }

        function debouncedSave() {
            clearTimeout(saveTimeout);
            saveTimeout = setTimeout(function() {
                saveFormData();
                showSaveStatus();
            }, 1000); // Save 1 second after user stops typing
        }

        function saveFormData() {
            var formData = getCurrentFormData();
            try {
                sessionStorage.setItem('configFormData', JSON.stringify(formData));
                sessionStorage.setItem('configModified', isModifiedFromFile.toString());
                lastSavedData = formData;
            } catch (e) {
                console.warn('Could not save form data to sessionStorage:', e);
            }
        }

        function getCurrentFormData() {
            var tableBody = document.getElementById("tableBody");
            var rows = tableBody.getElementsByTagName('tr');
            var data = [];

            for (var i = 0; i < rows.length; i++) {
                var inputs = rows[i].getElementsByTagName('input');
                var rowData = {};
                var hasData = false;

                for (var j = 0; j < inputs.length; j++) {
                    var input = inputs[j];
                    var name = input.name;
                    if (name) {
                        var columnName = name.substring(0, name.indexOf('['));
                        rowData[columnName] = input.value;
                        if (input.value.trim() !== '') {
                            hasData = true;
                        }
                    }
                }

                if (hasData) {
                    data.push(rowData);
                }
            }

            return data;
        }

        function loadSavedData() {
            try {
                var savedData = sessionStorage.getItem('configFormData');
                var savedModified = sessionStorage.getItem('configModified');

                if (savedData) {
                    var parsedData = JSON.parse(savedData);
                    isModifiedFromFile = savedModified === 'true';
                    return parsedData;
                }
            } catch (e) {
                console.warn('Could not load saved form data:', e);
            }
            return null;
        }

        function clearSavedData() {
            try {
                sessionStorage.removeItem('configFormData');
                sessionStorage.removeItem('configModified');
            } catch (e) {
                console.warn('Could not clear saved data:', e);
            }
        }

        function loadDataFromSource(data, isFromFile = false) {
            // Clear existing rows
            var tableBody = document.getElementById("tableBody");
            tableBody.innerHTML = '';
            rowCount = 0;

            // Add rows with data
            data.forEach(function(rowData) {
                addRow(rowData, true);
            });

            // Add a few empty rows for additional input
            for (let i = 0; i < 3; i++) {
                addRow(null, true);
            }

            if (isFromFile) {
                originalFileData = JSON.parse(JSON.stringify(data)); // Deep copy
                isModifiedFromFile = false;
                clearSavedData(); // Clear saved data when loading from file
            }

            updateStatusIndicators();
        }

        function loadConfigData() {
            // Check for saved form data first
            var savedData = loadSavedData();

            {% if config_preview %}
                var fileData = {{ config_preview | tojson | safe }};
                originalFileData = JSON.parse(JSON.stringify(fileData)); // Deep copy

                if (savedData && savedData.length > 0) {
                    // Load saved data if available
                    loadDataFromSource(savedData, false);
                    console.log('Loaded saved form data');
                } else {
                    // Load from file
                    loadDataFromSource(fileData, true);
                    console.log('Loaded file data');
                }
            {% else %}
                if (savedData && savedData.length > 0) {
                    // Load saved data
                    loadDataFromSource(savedData, false);
                    console.log('Loaded saved form data');
                } else {
                    // Add default empty rows
                    for (let i = 0; i < 5; i++) {
                        addRow(null, true);
                    }
                }
            {% endif %}
        }

        // Handle page unload
        window.addEventListener('beforeunload', function() {
            saveFormData();
        });

        // Initialize table when page loads
        document.addEventListener("DOMContentLoaded", function() {
            loadConfigData();
        });
    </script>
{% endblock %}