document.addEventListener('DOMContentLoaded', () => {
    const ssoLoginButton = document.getElementById('sso-login-btn');

    if (ssoLoginButton) {
        ssoLoginButton.addEventListener('click', () => {
            // Open the SSO provider's login page in a popup
            
            const popupWidth = 500;
            const popupHeight = 600;
            const left = (screen.width / 2) - (popupWidth / 2);
            const top = (screen.height / 2) - (popupHeight / 2);

            const popup = window.open(
                ssoUrl,
                'ssoLogin',
                `width=${popupWidth},height=${popupHeight},top=${top},left=${left}`
            );

            // Listen for a message from the popup
            window.addEventListener('message', (event) => {
                // IMPORTANT: Verify the origin of the message for security
                const ssoOrigin = new URL(ssoUrl).origin;
                if (event.origin !== ssoOrigin) {
                    console.warn(`Received message from untrusted origin: ${event.origin}, expected: ${ssoOrigin}`);
                    return;
                }

                // Check if the message contains the expected data structure
                if (event.data && event.data.type === 'LOGIN_SUCCESS' && event.data.token) {
                    popup.close();

                    // Reload the page with the token in the query string
                    // This will be handled by our backend ssoHandler middleware
                    window.location.search = `?token=${event.data.token}`;
                }
            }, { once: true }); // Use 'once' to automatically remove the listener after it's called
        });
    }
});