{% extends "base.html" %}

{% block title %}ErrorRate – Website Load & Performance Testing{% endblock %}

{% block content %}

  <div style="text-align: center;">
    <h1>Website Performance Test</h1>
    <form id="load-test-form" style="max-width: fit-content; margin-inline: auto;">
        <label>Number of Users (max 100):</label>
        <input type="number" id="users" name="users" min="1" max="100" required>

        <label>Test Duration (max 60 seconds):</label>
        <input type="number" id="duration" name="duration" min="1" max="60" required>

        <label>Simulated User Action:</label>
        <div class="radio-group">
            <label><input type="radio" name="scenario" value="homepage" required> View Homepage</label>
            <label><input type="radio" name="scenario" value="browse"> Browse Products</label>
            <label><input type="radio" name="scenario" value="product"> View Single Product</label>
            <label><input type="radio" name="scenario" value="cart"> Add to Cart</label>
            <label><input type="radio" name="scenario" value="checkout"> Checkout</label>
        </div>

        <button type="submit">Run Load Test</button>
    </form>
  </div>

    <div id="progress-container">
        <p>Running test, please wait...</p>
        <div id="progress-bar">0%</div>
    </div>

    <script>
        const form = document.getElementById("load-test-form");
        const progressContainer = document.getElementById("progress-container");
        const progressBar = document.getElementById("progress-bar");

        form.addEventListener("submit", async (e) => {
            e.preventDefault();

            // Show progress bar
            progressContainer.style.display = "block";
            progressBar.style.width = "0%";
            progressBar.innerText = "0%";

            // Fake animation while backend runs
            let progress = 0;
            const interval = setInterval(() => {
                if (progress < 90) {
                    progress += 1;
                    progressBar.style.width = progress + "%";
                    progressBar.innerText = progress + "%";
                }
            }, 200);

            // Send form data to backend
            const formData = new FormData(form);
            const params = new URLSearchParams(formData);

            const response = await fetch("/run-test", {
                method: "POST",
                body: params
            });

            clearInterval(interval);
            progressBar.style.width = "100%";
            progressBar.innerText = "100%";

            // Redirect to results page
            const html = await response.text();
            document.open();
            document.write(html);
            document.close();
        });
    </script>

{% endblock %}