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

    const wrapper = $('.sifency-checkout-styler');

    // Only run if Multistep layout is active
    if (!wrapper.hasClass('sifency-checkout-layout-multistep')) {
        return;
    }

    const form = $('form.checkout');

    const navHTML = `
        <div class="sifency-multistep-nav">
            <div class="sifency-step-item active" data-step="1">
                <span class="sifency-step-number">1</span>
                <span class="sifency-step-text">Details</span>
            </div>
            <div class="sifency-step-item" data-step="2">
                <span class="sifency-step-number">2</span>
                <span class="sifency-step-text">Payment</span>
            </div>
        </div>
    `;

    form.before(navHTML);

    $('.col2-set').wrapAll('<div class="sifency-step-content active" id="sif-step-1"></div>');

    $('.woocommerce-additional-fields').appendTo('#sif-step-1 .col2-set');
    $('#order_review_heading, #order_review').wrapAll('<div class="sifency-step-content" id="sif-step-2"></div>');

    const btnNextHTML = `
        <div class="sifency-multistep-footer" id="footer-step-1">
            <button type="button" class="sifency-btn-next">Continue to Payment <i class="fas fa-arrow-right"></i></button>
        </div>
    `;

    const btnPrevHTML = `
        <div class="sifency-multistep-footer" id="footer-step-2">
            <button type="button" class="sifency-btn-prev"><i class="fas fa-arrow-left"></i> Back</button>
        </div>
    `;

    $('#sif-step-1').append(btnNextHTML);
    $('#sif-step-2').append(btnPrevHTML);

    // Move the actual Submit button inside Step 2 footer area for cleaner layout (optional)
    // $('#place_order').appendTo('#footer-step-2'); 

    // 3. Handle Interactions

    // Go to Step 2
    $(document).on('click', '.sifency-btn-next', function () {
        if (validateStep1()) {
            switchStep(2);
        }
    });

    // Back to Step 1
    $(document).on('click', '.sifency-btn-prev', function () {
        switchStep(1);
    });

    function switchStep(step) {
        // Handle Content
        $('.sifency-step-content').removeClass('active');
        $('#sif-step-' + step).addClass('active');

        // Handle Nav
        $('.sifency-step-item').removeClass('active');
        $('.sifency-step-item[data-step="' + step + '"]').addClass('active');

        if (step === 2) {
            $('.sifency-step-item[data-step="1"]').addClass('completed');
        } else {
            $('.sifency-step-item[data-step="1"]').removeClass('completed');
        }

        // Scroll to top
        $('html, body').animate({
            scrollTop: wrapper.offset().top - 100
        }, 500);
    }

    // Basic Client-side Validation for Step 1
    function validateStep1() {
        let valid = true;
        const requiredInputs = $('#sif-step-1 .validate-required input, #sif-step-1 .validate-required select');

        requiredInputs.each(function () {
            const val = $(this).val();
            if (!val || val === '') {
                $(this).closest('.form-row').addClass('woocommerce-invalid woocommerce-invalid-required-field');
                valid = false;
            } else {
                $(this).closest('.form-row').removeClass('woocommerce-invalid woocommerce-invalid-required-field');
            }
        });

        if (!valid) {
            // Trigger standard woo validation UI
            $('html, body').animate({
                scrollTop: $('.woocommerce-invalid').first().offset().top - 100
            }, 500);
        }

        return valid;
    }
});