{% extends "constance_edit_form.html" %}

{% block additional_buttons %}
<button type="button" id="test-sso-btn" class="button-green">Test SSO</button>
<br>
<div id="sso-test-result"></div>

<script>
    $('#id_SSO_SIGNING_CERTIFICATE').addClass('text-area-content');

    var ldapOptimizationCheckbox = $('#id_OPTIMIZE_LDAP_ATTEMPTS');
    var ssoEnabledCheckbox = $('#id_SSO_ENABLED');
    var monitoredSystemAuthEnabledCheckbox = $('#id_SYSTEM_AUTH_ENABLED');
    var issuerInput = $('#id_SSO_ISSUER');
    var ssoUrlInput = $('#id_SSO_SIGN_ON_URL');
    var signedResponseCheckbox = $('#id_SSO_WANT_RESPONSE_SIGNED');
    var signedAssertionCheckbox = $('#id_SSO_WANT_ASSERTIONS_SIGNED');
    var certificateTextarea = $('#id_SSO_SIGNING_CERTIFICATE');

    var testSSOButton = $('#test-sso-btn')

    // Fields to enable/disable if SSO is enabled/disabled.
    var dependentFields = $(`
        #id_SYSTEM_AUTH_ENABLED, #id_SSO_ISSUER, #id_SSO_SIGN_ON_URL,
        #id_SSO_WANT_RESPONSE_SIGNED, #id_SSO_WANT_ASSERTIONS_SIGNED,
        #id_SSO_SIGNING_CERTIFICATE, #test-sso-btn
    `);

    function validateFormState() {
        /**
         * Validates the form state, enabling/disabling and setting required properties
         * on fields based on the state of the main SSO checkboxes.
         */
        const isSsoEnabled = ssoEnabledCheckbox.prop('checked');
        const isMonitoredSystemAuthEnabled = monitoredSystemAuthEnabledCheckbox.prop('checked');

        // If SSO is disabled, disable everything else.
        dependentFields.prop('disabled', !isSsoEnabled);

        ldapOptimizationCheckbox.prop('disabled', isSsoEnabled && !isMonitoredSystemAuthEnabled);

        // If enabled, Issuer and Sign-On URL are required.
        $('#id_SSO_ISSUER, #id_SSO_SIGN_ON_URL').prop('required', isSsoEnabled);

        // If signing is on, the certificate is required.
        const isSigningRequired = isSsoEnabled && (signedResponseCheckbox.prop('checked') || signedAssertionCheckbox.prop('checked'));
        certificateTextarea.prop('required', isSigningRequired);
    }

    // Add event listeners to all relevant fields to re-validate on any change
    $('#id_SSO_ENABLED, #id_SYSTEM_AUTH_ENABLED, #id_SSO_WANT_RESPONSE_SIGNED, #id_SSO_WANT_ASSERTIONS_SIGNED')
        .on('change', validateFormState);

    // Run the validation once when the page loads
    $('document').ready(function() {
        validateFormState();
    });

    testSSOButton.on('click', async function() {
        const form = $(this).closest('form')[0];
        if (!form.reportValidity()) {
            return;
        }

        const ssoSettings = {
            sso_issuer: issuerInput.val(),
            sso_sign_on_url: ssoUrlInput.val(),
            sso_want_response_signed: signedResponseCheckbox.prop('checked'),
            sso_want_assertions_signed: signedAssertionCheckbox.prop('checked'),
            sso_signing_certificate: certificateTextarea.val(),
        };

        const resultDiv = $('#sso-test-result');
        resultDiv.html('Starting test...');

        try {
            // Call "sso_test_start" view in the background to get the IdP's URL.
            const startResponse = await fetch("{% url 'sso_test_start' %}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': '{{ csrf_token }}'
                },
                body: JSON.stringify(ssoSettings)
            });
            const startData = await startResponse.json();

            if (!startData.success) {
                // If the backend returned an error, display it.
                resultDiv.html(`<p class="error-color">Error: ${startData.error}</p>`);
                return;
            }

            // Open the popup window using the redirect_url from the JSON response.
            const popup = window.open(startData.redirect_url, 'sso_test', 'width=600,height=700');
            if (!popup) {
                throw new Error("Popup was blocked by the browser.");
            }
            resultDiv.html('Waiting for login in popup window...');
            
            // Disable the Test SSO button to prevent multiple parallel tests.
            testSSOButton.prop('disabled', true);
            // Poll for the result after the popup is closed.
            const pollTimer = setInterval(async function() {
                if (popup.closed) {
                    clearInterval(pollTimer);
                    
                    const checkResponse = await fetch("{% url 'sso_test_result' %}");
                    const checkData = await checkResponse.json();

                    if (checkData.success) {
                        resultDiv.html(`<p class="success-color">${checkData.message}</p>`);
                    } else if (checkData.message) {
                        resultDiv.html(`<p class="error-color">${checkData.message}</p>`);
                    } else {
                        resultDiv.html('<p class="error-color">Test window was closed before completion.</p>');
                    }
                    // Re-enable the Test SSO button.
                    testSSOButton.prop('disabled', false);
                }
            }, 1000);

        } catch (error) {
            resultDiv.html(`<p class="error-color">${error}</p>`);
        }
    });
</script>

{% endblock %}