{% 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 %}
<style>
    #config-container {
        height: 70vh;
        /* Initial height */
        overflow-y: auto;
        min-height: 50px;
        transition: height 0.1s ease-out;
        /* Smooth resizing mostly */
    }



    #resizer {
        height: 12px;
        background: #f8f9fa;
        border-top: 1px solid #dee2e6;
        border-bottom: 1px solid #dee2e6;
        cursor: row-resize;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
    }

    #resizer:hover {
        background: #e9ecef;
    }

    #resizer i {
        color: #adb5bd;
        font-size: 1.2rem;
    }
</style>

{# Last screen before a run: say plainly which steps cannot succeed against the
   deck that is loaded. Steps whose module or method is gone will raise; the rest
   are worth a look but may still run. #}
{% if compat_steps or compat_deck_note %}
    {% set blocking = compat_steps | selectattr('blocking') | list %}
    <div class="alert {{ 'alert-danger' if blocking else 'alert-warning' }} py-2 px-3 mb-2"
         id="run-compatibility-warning">
        <div class="fw-semibold">
            <i class="bi bi-exclamation-triangle-fill me-1"></i>
            {% if blocking %}
                {{ blocking | length }} step{{ 's' if blocking | length != 1 }} will fail against the current deck
            {% else %}
                {{ compat_steps | length }} step{{ 's' if compat_steps | length != 1 }} may not run as designed
            {% endif %}
        </div>
        {% if compat_deck_note %}<div class="small mt-1">{{ compat_deck_note }}</div>{% endif %}
        {# One line per step. The full sentences are the title, so the detail is a
           hover away rather than a wall of text above the run controls. #}
        <ul class="mb-0 mt-1 small">
            {% for entry in compat_steps %}
                <li title="{% for issue in entry.issues %}{{ issue.message }}
{% endfor %}">
                    <span class="text-muted">{{ entry.phase }} step {{ entry.id }}</span>
                    <code>{{ entry.label }}</code>
                    &middot; {{ entry.summary }}
                </li>
            {% endfor %}
        </ul>
    </div>
{% endif %}

<div class="d-flex flex-column" style="height: calc(100vh - 100px);">
    <div id="config-container" class="d-flex flex-column flex-shrink-0">
        <div class="row h-100 m-0">
            {% include 'components/run_panel.html' %}
        </div>
    </div>

    <div id="resizer" title="Drag to resize">
        <i class="bi bi-three-dots"></i>
    </div>

    <div id="monitor-container" class="d-flex flex-column flex-grow-1"
        style="overflow: hidden; min-height: 20px; padding-top: 10px;">
        <div class="row h-100">
            {% include 'components/progress_panel.html' %}
            {% include 'components/logging_panel.html' %}
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const resizer = document.getElementById('resizer');
        const configContainer = document.getElementById('config-container');
        let isResizing = false;

        resizer.addEventListener('mousedown', function (e) {
            isResizing = true;
            document.body.style.cursor = 'row-resize';
            document.body.style.userSelect = 'none';
            configContainer.style.transition = 'none'; // Disable transition during drag
        });

        document.addEventListener('mousemove', function (e) {
            if (!isResizing) return;

            const rect = configContainer.getBoundingClientRect();
            const offset = rect.top + window.scrollY; // Position relative to document
            const newHeight = e.pageY - offset; // Use pageY for robust drag

            if (newHeight > 50 && newHeight < window.innerHeight - 200) {
                configContainer.style.height = newHeight + 'px';
            }
        });

        document.addEventListener('mouseup', function (e) {
            if (isResizing) {
                isResizing = false;
                document.body.style.cursor = '';
                document.body.style.userSelect = '';
                // configContainer.style.transition = 'height 0.1s ease-out'; // Re-enable if desired
            }
        });
    });
</script>



<!-- Task Name Modal -->
<div class="modal fade" id="taskNameModal" tabindex="-1" aria-labelledby="taskNameModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="taskNameModalLabel">System Busy - Queue Task</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label for="queueTaskName" class="form-label">Display Name</label>
                    <input type="text" class="form-control" id="queueTaskName" placeholder="Name (optional)">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="confirmQueueBtn">Add to Queue</button>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Select submit buttons for relevant forms
        // We target buttons directly to preserve their name/value in submission
        const runButtons = document.querySelectorAll(
            'form[name="run"] button[type="submit"], ' +
            'form[name="bo"] button[type="submit"], ' +
            'button[type="submit"][form="online-config"]'
        );

        // Helper to check system busy status
        async function isSystemBusy() {
            try {
                const response = await fetch("{{ url_for('execute.runner_status') }}");
                if (!response.ok) {
                    throw new Error(`Status check failed: ${response.status}`);
                }
                const data = await response.json();
                return { busy: data.busy, paused: data.paused };
            } catch (error) {
                console.error('Error checking system status:', error);
                return { busy: Boolean(window.platformState && window.platformState.is_running), paused: Boolean(window.platformState && window.platformState.is_paused) };
            }
        }

        runButtons.forEach(btn => {
            btn.addEventListener('click', async function (e) {
                // If we already processed this click, let it propagate naturally
                if (btn.dataset.processed === "true") {
                    return;
                }

                e.preventDefault(); // Stop immediate submission
                e.stopPropagation();

                const status = await isSystemBusy();
                const form = btn.form;

                if (status.busy || status.paused) {
                    // Check if Bootstrap is available
                    if (typeof bootstrap !== 'undefined') {
                        try {
                            const modalElement = document.getElementById('taskNameModal');
                            const modalTitle = document.getElementById('taskNameModalLabel');
                            if (status.paused && !status.busy) {
                                modalTitle.textContent = "System Paused - Queue Task";
                            } else {
                                modalTitle.textContent = "System Busy - Queue Task";
                            }
                            const modal = new bootstrap.Modal(modalElement);
                            const taskNameInput = document.getElementById('queueTaskName');

                            // Initialize input
                            taskNameInput.value = "";

                            modal.show();

                            // Handle confirm click
                            const confirmBtn = document.getElementById('confirmQueueBtn');
                            // Remove old listener to avoid duplicates if multiple clicks
                            const newConfirmBtn = confirmBtn.cloneNode(true);
                            confirmBtn.parentNode.replaceChild(newConfirmBtn, confirmBtn);

                            newConfirmBtn.addEventListener('click', function () {
                                const customName = taskNameInput.value;
                                if (customName) {
                                    // Append custom name to form
                                    let displayInput = form.querySelector('input[name="display_name"]');
                                    if (!displayInput) {
                                        displayInput = document.createElement('input');
                                        displayInput.type = 'hidden';
                                        displayInput.name = 'display_name';
                                        form.appendChild(displayInput);
                                    }
                                    displayInput.value = customName;
                                }

                                modal.hide();
                                btn.dataset.processed = "true";
                                btn.click();
                            });
                        } catch (err) {
                            console.error("Error showing modal:", err);
                            // Fallback if modal fails
                            if (confirm("System is busy. Add to queue?")) {
                                btn.dataset.processed = "true";
                                btn.click();
                            }
                        }
                    } else {
                        // Fallback if bootstrap missing
                        const confirmMsg = status.paused && !status.busy ? "System is paused. Add to queue?" : "System is busy. Add to queue?";
                        if (confirm(`${confirmMsg} (Display name unavailable)`)) {
                            btn.dataset.processed = "true";
                            btn.click();
                        }
                    }

                } else {
                    // System not busy, proceed normally
                    if (typeof window.clearActiveError === "function") {
                        window.clearActiveError();
                    }
                    btn.dataset.processed = "true";
                    btn.click();
                }
            });
        });
    });
</script>

{% endblock %}