$(document).ready(function () {
    $('#upload-form').submit(function (event) {
        event.preventDefault();
        $('#error-message').text('');
        $('.loading-spinner').show();

        var response = grecaptcha.getResponse();
        if (!response) {
            $('.loading-spinner').hide();
            alert("Please complete the reCAPTCHA verification.");
            return;
        }

        var formData = new FormData(this);
        formData.append('csrf_token', $('#csrf_token').val());

        $.ajax({
            url: '/',
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            beforeSend: function (xhr) {
                xhr.setRequestHeader('X-CSRFToken', $('#csrf_token').val());
            },
            success: function (response) {
                $('.loading-spinner').hide();

                if (response.error) {
                    $('#error-message').text(response.error);
                } else {
                    let scoreSectionHtml = '';
                    let resultSectionHtml = '';

                    if (response.score !== null) {
                        scoreSectionHtml = `
                            <div class="score-container" id="score-section">
                                <canvas id="scoreChart"></canvas>
                                <div>
                                    <p class="score-text">Your CV compatibility score is <span id="score-text">${response.score}</span>/100</p>
                                </div>
                            </div>`;
                    }

                    if (response.summary) {
                        resultSectionHtml = `
                            <div class="mt-4" id="result-section">
                                <h4>Summary:</h4>
                                <div id="summary-text">${response.summary}</div>
                                <button class="btn btn-secondary" id="clear-form">Upload Another</button>
                            </div>`;
                    }

                    // Remove previous sections before inserting new ones
                    $('#score-section, #result-section').remove();

                    // Append score section first, then summary section
                    if (scoreSectionHtml) {
                        $('#upload-form').after(scoreSectionHtml);
                        updateScoreChart(response.score);
                    }
                    if (resultSectionHtml) {
                        $('#score-section').after(resultSectionHtml); // Ensure summary is BELOW score
                    }

                    // Attach event listener to new "Upload Another" button
                    $('#clear-form').click(function () {
                        $('#score-section, #result-section').remove();
                        $('#upload-form')[0].reset();
                        grecaptcha.reset(); // Reset reCAPTCHA
                    });
                }
            },
            error: function (xhr) {
                $('.loading-spinner').hide();
                let errorMessage = 'An error occurred. Please try again.';
                if (xhr.responseJSON && xhr.responseJSON.error) {
                    errorMessage = xhr.responseJSON.error;
                }
                $('#error-message').text(errorMessage);
            }
        });
    });
});

function updateScoreChart(score) {
    let ctx = document.getElementById('scoreChart').getContext('2d');

    if (window.scoreChartInstance) {
        window.scoreChartInstance.destroy();
    }

    // Set color based on score
    let scoreColor = "#4caf50"; // Green (default)
    if (score < 75) scoreColor = "#ffeb3b"; // Yellow (below 75)
    if (score < 50) scoreColor = "#f44336"; // Red (below 50)

    window.scoreChartInstance = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ["Score", "Remaining"],
            datasets: [{
                data: [score, 100 - score],
                backgroundColor: [scoreColor, "#e0e0e0"],
                borderWidth: 1
            }]
        },
        options: {
            responsive: false,
            cutout: '60%',
            plugins: {
                legend: { display: false }
            }
        }
    });
}