{% extends "basic.html" %}

{% block title %}App Runner Test{% endblock %}

{% block extra_content %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/test_function.css') }}">

<h1>App Runner Test</h1>
<p>This page provides various tests to verify that the application is running correctly on App Runner.</p>

<section>
    <h2>Search environment variable/secret</h2>
    <p>Displays the value corresponding to the key of the environment variable/secret. Keys not set will display an empty value.</p>
    <label for="envKey">Environment variable/Secret key:</label>
    <input type="text" id="envKey" placeholder="Enter key here" />
    <div class="result-container">
        <div id="searchResult" class="result">Value will be displayed here</div>
        <button onclick="searchEnvVar()">Get Value</button>
    </div>
    
    <div style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #dee2e6;">
        <div id="toggleAllEnv" style="color: #007bff; cursor: pointer; font-size: 14px; display: flex; align-items: center; gap: 5px;">
            <span id="toggleArrow">▼</span>
            <span id="toggleText">Show all environment variables</span>
        </div>
        <div id="envLoading" style="display: none; text-align: center; color: #666; margin-top: 10px;">Loading environment variables...</div>
        <div id="envError" style="display: none; color: #dc3545; margin-top: 10px;"></div>
        <div id="envContent" style="display: none; margin-top: 15px;">
            <div style="background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 5px; padding: 15px; font-family: 'Courier New', monospace; white-space: pre-wrap; word-break: break-all; max-height: 400px; overflow-y: auto;"></div>
        </div>
    </div>
</section>

<!-- VPC Connection -->
<section>
    <h2>VPC Connection</h2>
    <p>You can test whether your application can access resources within a VPC network. Enter the host URL of a resource within the same VPC network as the app.</p>
    <label for="vpc-host-url">Host URL:</label>
    <input type="text" id="vpc-host-url" placeholder="Enter host URL" />
    <div class="result-container">
        <div id="vpc-connection-result" class="result">Result will be displayed here</div>
        <button id="vpc-connection-button" onclick="testVPCConnection()">Send Request</button>
    </div>
</section>

<!-- IAM Service Account -->
<section>
    <h2>IAM Service Account</h2>
    <p>Returns the IAM access token of the service account attached to the app runner. If token issuance fails, an error will be displayed.</p>
    <label for="productDomain">Product Domain:</label>
    <input type="text" id="productDomain" placeholder="Enter product domain e.g. 'flava-paas.stage.flava-qa'" />
    <div class="result-container">
        <div id="accessTokenResult" class="result">Result will be displayed here</div>
        <button onclick="fetchAccessToken()">Get Access Token</button>
    </div>
</section>

<!-- Volume -->
<section>
    <h2>Validate Volume</h2>
    <p>Check whether a file corresponding to the given key exists at the specified path, and return its contents if found.</p>
    <label for="key">Key:</label>
    <input type="text" id="key" placeholder="Enter key" />
    <label for="path">Path:</label>
    <input type="text" id="path" placeholder="Enter path" />
    <div class="result-container">
        <div id="validateVolumeResult" class="result">Result will be displayed here</div>
        <button id="validateVolumeButton" onclick="validateVolume()">Validate Volume</button>
    </div>

<script>
    let isExpanded = false;

    /**
     * Toggle the visibility of environment variables section
     */
    function toggleEnvVars() {
        const envContent = document.getElementById('envContent');
        const toggleArrow = document.getElementById('toggleArrow');
        const toggleText = document.getElementById('toggleText');

        if (!isExpanded) {
            // Expand and load data
            loadEnvVars();
            isExpanded = true;
        } else {
            // Collapse
            envContent.style.display = 'none';
            toggleArrow.textContent = '▼';
            toggleText.textContent = 'Show all environment variables';
            isExpanded = false;
        }
    }

    /**
     * Load and display environment variables
     */
    function loadEnvVars() {
        document.getElementById('envLoading').style.display = 'block';
        document.getElementById('envError').style.display = 'none';

        // Call App Runner environment variables API
        fetch('/api/app_runner/env_vars')
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    displayEnvVars(data.data);
                    document.getElementById('envLoading').style.display = 'none';
                    document.getElementById('envContent').style.display = 'block';
                    document.getElementById('toggleArrow').textContent = '▲';
                    document.getElementById('toggleText').textContent = 'Hide all environment variables';
                } else {
                    throw new Error('Failed to load environment variables');
                }
            })
            .catch(error => {
                document.getElementById('envLoading').style.display = 'none';
                document.getElementById('envError').style.display = 'block';
                document.getElementById('envError').textContent = 'Error loading environment variables: ' + error.message;
            });
    }

    /**
     * Display environment variables in a formatted way
     * @param {Object} envVars - Environment variables object
     */
    function displayEnvVars(envVars) {
        const envContent = document.getElementById('envContent');
        const contentDiv = envContent.querySelector('div');
        
        // Sort keys alphabetically for better readability
        const sortedKeys = Object.keys(envVars).sort();
        let content = '';
        
        sortedKeys.forEach(key => {
            content += `${key}: ${envVars[key]}\n`;
        });
        
        contentDiv.textContent = content;
    }

    /**
     * Search for a specific environment variable
     */
    function searchEnvVar() {
        const key = document.getElementById('envKey').value.trim();
        const resultDiv = document.getElementById('searchResult');
        
        if (!key) {
            resultDiv.textContent = 'Please enter a key to search for.';
            return;
        }

        resultDiv.textContent = 'Searching...';

        // Make API call to get specific environment variable
        fetch(`/api/app_runner/env_vars/${encodeURIComponent(key)}`)
            .then(response => {
                if (!response.ok) {
                    return response.json().then(err => Promise.reject(err));
                }
                return response.json();
            })
            .then(data => {
                if (data.status === 'success') {
                    resultDiv.textContent = `Value: ${data.data.value}`;
                } else {
                    throw new Error('Failed to load environment variable');
                }
            })
            .catch(error => {
                resultDiv.textContent = error.message || `Key "${key}" not found.`;
            });
    }

    // Initialize event listeners when DOM is ready
    document.addEventListener('DOMContentLoaded', function() {
        // Add Enter key support for search
        const envKeyInput = document.getElementById('envKey');
        if (envKeyInput) {
            envKeyInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    searchEnvVar();
                }
            });
        }
        
        // Add click event for toggle button
        const toggleAllEnv = document.getElementById('toggleAllEnv');
        if (toggleAllEnv) {
            toggleAllEnv.addEventListener('click', function() {
                toggleEnvVars();
            });
        }
    });

    function testVPCConnection() {
        const hostUrl = document.getElementById("vpc-host-url").value;
        const resultDiv = document.getElementById("vpc-connection-result");
        const button = document.getElementById("vpc-connection-button");

        if (!hostUrl) {
            resultDiv.innerText = "Please enter a host URL.";
            return;
        }

        // Save original button text and show spinner
        const originalButtonText = button.innerHTML;
        button.innerHTML = '<div class="spinner"></div>';
        button.disabled = true;

        fetch(`/api/app_runner/send_request?host=${encodeURIComponent(hostUrl)}`)
            .then(response => response.json())
            .then(data => {
                // Restore button text
                button.innerHTML = originalButtonText;
                button.disabled = false;

                if (data.success) {
                    resultDiv.innerText = `Success: ${data.message}`;
                } else {
                    resultDiv.innerText = `Failed: ${data.message}`;
                }
            })
            .catch(error => {
                // Restore button text
                button.innerHTML = originalButtonText;
                button.disabled = false;

                console.error("Error testing VPC connection:", error);
                resultDiv.innerText = "Error testing VPC connection.";
            });
    }

    function fetchAccessToken() {
        const productDomain = document.getElementById("productDomain").value;
        const resultDiv = document.getElementById("accessTokenResult");

        if (!productDomain) {
            resultDiv.innerText = "Please enter a product domain.";
            return;
        }
        fetch(`/api/app_runner/get_access_token?product_domain=${encodeURIComponent(productDomain)}`)
            .then(response => response.json())
            .then(data => {
                if (data.access_token) {
                    resultDiv.innerText = `Access Token: ${data.access_token}`;
                } else {
                    resultDiv.innerText = "Token not found";
                }
            })
            .catch(error => {
                console.error("Error fetching access token:", error);
                resultDiv.innerText = "Error fetching token";
            });
    }

    function validateVolume() {
        const key = document.getElementById("key").value;
        const path = document.getElementById("path").value;
        const resultContainer = document.getElementById("validateVolumeResult");

        if (!key || !path) {
            resultContainer.textContent = "Please fill in all fields.";
            return;
        }

        resultContainer.textContent = "Validating volume...";

        fetch("/api/app_runner/validate_volume", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ key: key, path: path }),
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                resultContainer.textContent = `Value:  ${data.content}`;
            } else {
                resultContainer.textContent = data.message;
            }
        })
        .catch(error => {
            resultContainer.textContent = `Error: ${error.message}`;
        });
    }
</script>
{% endblock %}