$(document).ready(function() {
    // doAJAX('daily-challenges', 'GET').promise.then((res) => {
    //     if(res.success) {
    //         const uploadReceiptChallenge = res.data.list.find(ch => ch.id === 6);

    //         if(uploadReceiptChallenge) {
    //             skaleChallenges.showChallengeItem(uploadReceiptChallenge);
    //         } else {
    //             console.error('Upload receipt challenge not found in the list.');
    //         }
    //     } else {
    //         console.error('Failed to fetch the list of challenges.');
    //     }
    // }).catch((err) => {
    //     console.error('An error occurred while fetching the list of challenges:', err);
    // });
    
    $('.main-game-wrapper span[name="reward_point"]').closest('.text-bold').hide();
    $('.main-game-wrapper span[name="chance_balance"]').closest('.text-bold').hide();
    
    // sizeGuidePopup used as welcome popup in registration page, not for size guide anymore
    const sizeGuidePopup = `
        <div class="modal fade modal-theme show" id="size-guide-popup" popup_status="default" role="dialog" style="display: none;" aria-modal="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-body text-center" style="padding-top:4rem">
                        <div class="modal-close z-2" data-dismiss="modal" aria-label="Close">
                            <i class="fas fa-times"></i>
                        </div>
                        
                        <div class="d-flex flex-column align-items-center gap-3 mb-4">
                        <img src="/file/images/MxARedemptionMechanicPopup.webp" class="img-circle elevation-2" alt="Promo Image" style="width: 100%; height: 100%;">
                        </div>
                        
                        <button id="close" class="btn btn-primary cta" onclick="return hide_popup()">Close</button>
                    </div>
                    <div class="modal-footer flex-column"></div>
                </div>
            </div>
        </div>
    `;
    
    $('body').append(sizeGuidePopup);
    
    if (window.location.pathname === '/register') {
        $('#size-guide-popup').modal('show');
    }
    
    window.hide_popup = function () {
        $('#size-guide-popup').modal('hide');
        return false;
    };
    
    // trigger upload receipt challenge popup after user clicks on receipt_rejected popup button
    $('#trigger-upload-challenge').on('click', function () {
        doAJAX('daily-challenges', 'GET').promise.then((res) => {
            if (res.success) {
                const uploadReceiptChallenge = res.data.list.find(ch => ch.id === 6);
    
                if (uploadReceiptChallenge) {
                    skaleChallenges.showChallengeItem(uploadReceiptChallenge);
                } else {
                    console.error('Upload receipt challenge not found in the list.');
                }
            } else {
                console.error('Failed to fetch the list of challenges.');
            }
        }).catch((err) => {
            console.error('An error occurred while fetching the list of challenges:', err);
        });
    });

    // // add break line for upload receipt challenge description and put small changes to the description
    // // hook into modal show event, which happens before the modal being display
    // $(document).on('show.bs.modal', '#popup_upload_receipt', function() {
    //     modifyDescriptionText();
    // });
    // function modifyDescriptionText() {
    //     // set a flag to avoid multiple modifications
    //     if ($('.challenge_item_description').data('modified')) {
    //         return;
    //     }
        
    //     // find the exact text pattern we want to modify
    //     const $description = $('.challenge_item_description');
    //     let content = $description.html() || '';
        
    //     // only modify if we have content with "Stack" in it
    //     if (content && content.includes('Stack')) {
    //         content = content.replace(/(\s)Stack/, '$1<br>Stack');
    //         $description.html(content);
    //         $description.data('modified', true);
    //     }
    // }
    
    // change copy of upload receipt challenge popup
    var $modal = $('#popup_upload_receipt'),
        modal  = $modal.get(0),
        $body  = $modal.find('.modal-body');
    $modal.on('show.bs.modal', function(){
        var $title  = $body.find('.challenge_item_title').empty(),
            $desc  = $body.find('.challenge_item_description').empty(),
            $extras = $body.find('.receipt_example, .receipt_example_content, .challenge_item_urls, .status_message').empty();

        var $ol = $(
            '<ol class="redemption-instructions mb-3" ' +
            'style="margin: 0 30px; text-align: left;"></ol>'
        );
        $desc.append($ol).append(`
        <h5 class="upload-receipt-cta-two text-center mb-1">
        <strong>FOR PURCHASES IN-STORE ONLY.</strong>
        </h5>
        <p class="upload-receipt-disclaimer-two text-center mb-1">
        Please check online platforms for different mechanics.
      </p>
      <h5 class="upload-receipt-cta text-center mb-1">
        <strong>MAX. 3 REDEMPTIONS PER USER.</strong>
      </h5>
      <p class="upload-receipt-disclaimer text-center">
        *<a href="https://qr1.be/OZ01" target="_blank"
           style="font-size: 15px; color: whitesmoke;
                  text-decoration: underline; cursor: pointer;">
          Terms & Conditions
        </a> apply, while stocks last.
      </p>
    `);
    });
    function addHero(){
        if (!$body.find('.milo-hero').length) {
            var $hero = $(
                '<div class="milo-hero d-flex justify-content-center mb-4">'+
                '<img src="/file/images/tshirt_image.webp" '+ 'alt="tshirt image" '+ 'class="tshirt-img mr-3" '+ 'style="width: 100%" />'+
                '</div>'
            );
            $body.prepend($hero);
        }
    }
    function removeHero(){
        $body.find('.milo-hero').remove();
    }
    var observer = new MutationObserver(function(muts){
        muts.forEach(function(m){
            if (m.type === 'attributes' && m.attributeName === 'popup_status') {
                var newStatus = $modal.attr('popup_status');
                if (newStatus === 'default') addHero();
                else               removeHero();
            }
        });
    });
    observer.observe(modal, {
        attributes: true,
        attributeFilter: ['popup_status']
    });

    // add image if first detected popup status is default
    if ($modal.attr('popup_status') === 'default') {
        addHero();
    }
  
  // change copy for rewards popup tabs
  $('#popup_rewards #wallet-tab').text('Reserved');
  $('#popup_rewards #reward-tab').text('Available');
  
    // change copy for the challenge shortcut upload receipt button
    const _origAppend = $.fn.append;
    $.fn.append = function(...args) {
        const ret = _origAppend.apply(this, args);
        // append into the .challenge-shortcut-content container
        // look for any new upload_receipt buttons and patch them
        this.filter('.challenge-shortcut-content')
            .add(this.find('.challenge-shortcut-content'))
            .children('button.challenge-shortcut-btn[data-type="upload_receipt"]')
            .each(function() {
                const $btn = $(this);
                // do only once
                if ($btn.data('patched')) return;
                const icon = $btn.find('i').first().prop('outerHTML');
                $btn.html(icon + ' UPLOAD RECEIPT, RESERVE NOW');
                $btn.data('patched', true);
            });
        return ret;
    };
});

document.addEventListener('DOMContentLoaded', function() {
    // add a class to separate logo css styling customization of register and home page
    if (window.location.pathname === '/register') {
        document.body.classList.add('register-page');
    }
});