document.addEventListener("DOMContentLoaded", () => {

    const form = document.querySelector("form");

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

        e.preventDefault();

        const text = document.querySelector("textarea").value;

        let resultDiv = document.getElementById("result");

        if (!resultDiv) {
            resultDiv = document.createElement("div");
            resultDiv.id = "result";
            document.querySelector(".container").appendChild(resultDiv);
        }

        resultDiv.innerHTML = `
            <div class="result-box">
                <p> Analyzing...</p>
            </div>
        `;

        try {

            const response = await fetch("/predict", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    text: text
                })
            });

            const data = await response.json();

            let html = `
                <div class="result-box">

                    <h2>Prediction</h2>

                    <p class="prediction">
                         ${data.prediction.toUpperCase()}
                    </p>

                    <h3>Confidence Scores</h3>
            `;

            for (const [model, score] of Object.entries(data.scores)) {

                html += `
                    <p>
                        <strong>${model.toUpperCase()}</strong> :
                        ${score}
                    </p>
                `;
            }

            html += `
                </div>
            `;

            resultDiv.innerHTML = html;

        } catch (error) {

            resultDiv.innerHTML = `
                <div class="result-box">
                    <p>Error while analyzing text.</p>
                </div>
            `;

            console.error(error);
        }

    });

});