const Toast = Swal.mixin({
    toast: true,
    position: 'bottom-left',
    showConfirmButton: false,
    timer: 3000,
    timerProgressBar: true,
    didOpen: (toast) => {
        toast.addEventListener('mouseenter', Swal.stopTimer)
        toast.addEventListener('mouseleave', Swal.resumeTimer)
    }
});

jQuery(document).ready(function ($) {

    // Remove any default WooCommerce form components
    // jQuery('.woocommerce-form-login__submit, .woocommerce-form-login__rememberme, .woocommerce-LostPassword').hide();

    // Handle OTP input fields
    jQuery(document).on('keyup', '.otp-input', function (e) {
        const target = jQuery(this);
        const maxLength = parseInt(target.attr('maxlength'), 10);
        const currentLength = target.val().length;

        if (currentLength >= maxLength) {
            const nextIndex = parseInt(target.data('index'), 10) + 1;
            if (nextIndex <= 5) {
                jQuery('.otp-input[data-index="' + nextIndex + '"]').focus();
            }
        }

        // Handle backspace
        if (e.keyCode === 8 && currentLength === 0) {
            const prevIndex = parseInt(target.data('index'), 10) - 1;
            if (prevIndex >= 1) {
                jQuery('.otp-input[data-index="' + prevIndex + '"]').focus();
            }
        }
    });

    // Send OTP button click
    jQuery(document).on('click', '.send-otp-button', function () {
        const formType = jQuery(this).data('form-type');
        const phoneNumber = jQuery('#phone_number').val();
        let sendBtn = jQuery('.send-otp-button');

        if (!phoneNumber) {
            Toast.fire({
                icon: 'warning',
                title: 'لطفا شماره موبایل خود را وارد کنید'
            });
            return;
        }

        $.ajax({
            url: custom_otp_ajax.ajax_url,
            type: 'POST',
            data: {
                action: 'send_otp',
                nonce: custom_otp_ajax.nonce,
                phone_number: phoneNumber,
                form_type: formType
            },
            beforeSend: function () {
                // Show loading
                jQuery('.verify-otp-button').prop('disabled', false).show();
                sendBtn.prop('disabled', true).find('.btn-text').text('در حال ارسال...');
                sendBtn.find('.btn-spinner').removeClass('d-none');
            },
            success: function (response) {
                console.log(response);
                sendBtn.prop('disabled', false).find('.btn-text').text('دریافت کد تأیید');
                sendBtn.find('.btn-spinner').addClass('d-none');

                if (response.success) {
                    // Show OTP verification form
                    jQuery('.phone-number-container').hide();
                    jQuery('.otp-verification-container').show();
                    if (response.data['exists']) {
                        jQuery('.optional-otp-input').hide();
                    } else {
                        jQuery('.optional-otp-input').show();
                    }

                    // Start timer
                    startTimer();

                    // Focus on first OTP input
                    jQuery('.otp-input[data-index="1"]').focus();
                } else {
                    Toast.fire({
                        icon: 'error',
                        title: response.data.message
                    });
                }
            },
            error: function () {
                sendBtn.prop('disabled', false).find('.btn-text').text('دریافت کد تأیید');
                sendBtn.find('.btn-spinner').addClass('d-none');

                Toast.fire({
                    icon: 'error',
                    title: 'خطا در ارتباط با سرور. لطفا مجددا تلاش کنید.'
                });
            }
        });
    });

    // Verify OTP button click
    jQuery(document).on('click', '.verify-otp-button', function () {
        const formType = jQuery(this).data('form-type');
        const phoneNumber = jQuery('#phone_number').val();
        let firstName = jQuery('#first_name');
        let lastName = jQuery('#last_name');
        let email = jQuery('#email');
        let username = jQuery('#username');

        if (firstName.length) {
            firstName = firstName.val();
        } else {
            firstName = '';
        }
        if (lastName.length) {
            lastName = lastName.val();
        } else {
            lastName = '';
        }
        if (email.length){
            email = email.val();
        }else{
            email = '';
        }
        if (username.length) {
            username = username.val();
        } else{
            username = '';
        }
        let verifyBtn = jQuery('.verify-otp-button');

        // Collect OTP digits
        let otp = '';
        jQuery('.otp-input').each(function () {
            otp += jQuery(this).val();
        });

        if (otp.length !== 5) {
            Toast.fire({
                icon: 'warning',
                title: 'لطفا کد 5 رقمی را کامل وارد کنید.'
            });
            return;
        }

        $.ajax({
            url: custom_otp_ajax.ajax_url,
            type: 'POST',
            data: {
                action: 'verify_otp',
                nonce: custom_otp_ajax.nonce,
                phone_number: phoneNumber,
                otp: otp,
                username: username,
                first_name: firstName,
                last_name: lastName,
                email: email,
                form_type: formType
            },
            beforeSend: function () {
                // Show loading
                verifyBtn.prop('disabled', true).find('.btn-text').text('در حال بررسی...');
                verifyBtn.find('.btn-spinner').removeClass('d-none');
            },
            success: function (response) {
                verifyBtn.prop('disabled', false).find('.btn-text').text('تأیید');
                verifyBtn.find('.btn-spinner').addClass('d-none');

                if (response.success) {
                    // Redirect to account page or show success message
                    Toast.fire({
                        icon: 'success',
                        title: response.data.message
                    });
                    window.location.href = response.data.redirect;
                } else {
                    jQuery('.otp-input').val('');
                    Toast.fire({
                        icon: 'error',
                        title: response.data.message
                    });
                }
            },
            error: function () {
                verifyBtn.prop('disabled', false).find('.btn-text').text('تأیید');
                verifyBtn.find('.btn-spinner').addClass('d-none');

                Toast.fire({
                    icon: 'error',
                    title: 'خطا در ارتباط با سرور. لطفا مجددا تلاش کنید.'
                });
            }
        });
    });

    // Resend OTP button click
    jQuery(document).on('click', '.resend-otp-button', function () {
        // Hide resend button and show send button again
        jQuery('.resend-otp-button').hide();
        jQuery('.send-otp-button').trigger('click');
    });

    // Timer function
    function startTimer() {
        let timer = 120; // 2 minutes in seconds
        const timerElement = jQuery('.timer');

        // Reset timer display
        timerElement.text('02:00');

        // Hide resend button
        jQuery('.resend-otp-button').hide();

        const interval = setInterval(function () {
            timer--;

            const minutes = Math.floor(timer / 60);
            const seconds = timer % 60;

            // Format and display timer
            timerElement.text(
                (minutes < 10 ? '0' + minutes : minutes) + ':' +
                (seconds < 10 ? '0' + seconds : seconds)
            );

            if (timer <= 0) {
                clearInterval(interval);

                // Show resend button
                jQuery('.resend-otp-button').show();
                jQuery('.verify-otp-button').prop('disabled', true).hide();
            }
        }, 1000);
    }

    // On page load, completely hide the default form
    // jQuery('.woocommerce-form-login, .woocommerce-form-register').find('p:not(.custom-otp-form)').hide();
});


jQuery(document).on('click', 'a.showlogin', function(e) {
    e.preventDefault();
    jQuery('form.login').slideToggle();
});