{% extends 'main/base.html' %}

{% block content %}

<style>
    .equal-height {
        display: flex;
        align-items: stretch;
    }

    .equal-height > div {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .box-content {
        flex-grow: 1;
        min-height: 250px;
        max-height: 700px;
        overflow: auto;
    }
    .table-container {
        position: sticky;
        top: 0;
        background: white;
        z-index: 10;
        padding: 10px 0;
    }

    .sticky-scroll {
        max-height: 550px;
        overflow-y: auto;
        overflow-x: auto;
        white-space: nowrap;
        display: block;
    }

</style>

<div class="container mt-4">
    <h2 class="text-center">Tool Live Testing - {{ tool_name|title }}</h2>

    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mt-3 gap-3">
        
        <div class="w-100 w-md-auto">
            <label for="codeExample" class="form-label fw-bold">Select Code Example:</label>
            <select class="form-select" id="codeExample" onchange="updateCodeSnippet()">
            </select>
        </div>

        <div class="w-100 w-md-auto">
            <label class="fw-bold d-block">Select Sub-Tool Type:</label>
            <div class="btn-group d-flex flex-wrap" role="group" id="toolTypeButtons">
                {% for subtype in tool_subtypes %}
                    <button type="button" class="btn btn-outline-success {% if forloop.first %}active{% endif %}"
                            onclick="updateOutput('{{ subtype }}', this)">
                        {{ subtype }}
                    </button>
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-12 col-md-6 mb-3 mb-md-0">
            <h5>Selected Code Snippet</h5>
            <pre id="codeSnippet" class="p-3 border bg-light rounded box-content">
                {{ code_snippets.example1 }}
            </pre>
        </div>

        <div class="col-12 col-md-6">
            <h5>Output</h5>
            <div id="outputSection" class="p-3 border bg-light rounded box-content">
                <p class="text-muted">Select a tool type to see the output.</p>
            </div>
        </div>
    </div>
</div>

<script>
    const codeSnippets = JSON.parse('{{ code_snippets|escapejs }}');
    const toolOutputs = JSON.parse('{{ tool_outputs_json|escapejs }}');

    console.log(toolOutputs);

    function loadCodeExamples() {
        let dropdown = document.getElementById("codeExample");

        dropdown.innerHTML = "";

        for (const key in codeSnippets) {
            let option = document.createElement("option");
            option.value = key;
            option.textContent = key.replace(/_/g, " ").toUpperCase();
            dropdown.appendChild(option);
        }

        updateCodeSnippet();
    }

    function updateCodeSnippet() {
        let selectedExample = document.getElementById("codeExample").value;
        document.getElementById("codeSnippet").innerText = codeSnippets[selectedExample];

        let activeButton = document.querySelector("#toolTypeButtons .btn-success");
        if (!activeButton) {
            activeButton = document.querySelector("#toolTypeButtons button");
            if (activeButton) {
                activeButton.classList.add("btn-success", "active");
                activeButton.classList.remove("btn-outline-success");
            }
        }

        if (activeButton) {
            updateOutput(activeButton.innerText.trim(), selectedExample);
        }
    }

    function updateOutput(toolTypeRaw, selectedExample) {
        let outputSection = document.getElementById("outputSection");
        let toolType = toolTypeRaw.trim();

        if (toolOutputs.hasOwnProperty(toolType) && toolOutputs[toolType].hasOwnProperty(selectedExample)) {
            let output = toolOutputs[toolType][selectedExample];

            if (output.type === "table") {
                let tableContent = `<p><strong>${toolType} Output: </strong>${output.header}</p>`;
                tableContent += `<div class="table-container">
                                    <div class="sticky-scroll">
                                        <table class="table table-bordered table-striped">
                                            <thead><tr>`;
                
                output.content[0].forEach(col => {
                    tableContent += `<th>${col}</th>`;
                });

                tableContent += `</tr></thead><tbody>`;

                output.content.slice(1).forEach(row => {
                    tableContent += `<tr>`;
                    row.forEach(cell => {
                        tableContent += `<td>${cell}</td>`;
                    });
                    tableContent += `</tr>`;
                });

                tableContent += `</tbody></table></div></div>`;
                
                outputSection.innerHTML = tableContent;
            }
            else if (output.type === "text") {
                outputSection.innerHTML = `<p><strong>${output.content}</strong></p>`;
            } 
            else if (output.type === "graph") {
                outputSection.innerHTML = `<p><strong>${output.text_content}</strong></p><img src="${output.content1}" class="img-fluid" alt="Graph Output"><img src="${output.content2}" class="img-fluid" alt="Graph Output">`;
            } 
            else if (output.type === "code") {
                outputSection.innerHTML = `
                    <pre class="p-3 border bg-light rounded">${output.content}</pre>`;
            }
        } else {
            outputSection.innerHTML = `<p class="text-danger">No output available for this selection.</p>`;
        }
    }

    document.addEventListener("DOMContentLoaded", function() {
        loadCodeExamples();

        let firstButton = document.querySelector("#toolTypeButtons button.active");
        let selectedExample = document.getElementById("codeExample").value;

        if (firstButton) {
            updateOutput(firstButton.innerText.trim(), selectedExample);
        }

        document.querySelectorAll("#toolTypeButtons button").forEach(button => {
            button.addEventListener("click", function() {
                let selectedExample = document.getElementById("codeExample").value;
                updateOutput(this.innerText.trim(), selectedExample);

                document.querySelectorAll("#toolTypeButtons button").forEach(btn => {
                    btn.classList.remove("active", "btn-success");
                    btn.classList.add("btn-outline-success");
                });

                this.classList.remove("btn-outline-success");
                this.classList.add("btn-success", "active");
            });
        });
    });
</script>

{% endblock %}