(function(){
    var badges = document.querySelectorAll('.novlla-badge');

    badges.forEach(function(el){
        var id = el.getAttribute('data-id');
        var layout = el.getAttribute('data-layout') || 'default';

        fetch("https://trust.novlla.com/wp-json/novlla/v1/listing/" + id)
        .then(res => res.json())
        .then(data => {

            // ⭐ حساب النجوم
            var fullStars = Math.floor(data.rating);
            var halfStar = (data.rating - fullStars) >= 0.5 ? 1 : 0;
            var emptyStars = 5 - fullStars - halfStar;

            var starsHTML = '';
            for (var i=0; i<fullStars; i++) starsHTML += '<span>★</span>';
            if (halfStar) starsHTML += '<span>☆</span>';
            for (var i=0; i<emptyStars; i++) starsHTML += '<span class="empty">★</span>';

            // 🎨 أنماط حسب الشكل
            var boxStyle = 'width:220px;padding:12px;border-radius:10px;text-align:center;font-family:inherit;border:1px solid #eee;background:#fff;';
            var headerBg = '#052b3d';

            if(layout === 'compact'){
                boxStyle = 'width:180px;padding:8px;border-radius:8px;text-align:center;font-family:inherit;border:1px solid #eee;background:#fff;';
            }

            if(layout === 'dark'){
                boxStyle = 'width:220px;padding:12px;border-radius:10px;text-align:center;font-family:inherit;border:1px solid #333;background:#111;color:#fff;';
                headerBg = '#222';
            }

            // 🧱 بناء البادج
            el.innerHTML =
            '<div style="'+boxStyle+'direction:rtl;">' +

                // 🔹 خلفية اللوجو + رابط الموقع
                '<div style="background:'+headerBg+';padding:6px;border-radius:8px;margin-bottom:8px;">' +
                    '<a href="https://trust.novlla.com" target="_blank" style="display:block;">' +
                        '<img src="'+data.logo+'" style="width:180px;height:50px;margin:auto;display:block;object-fit:contain;">' +
                    '</a>' +
                '</div>' +

                // 🔹 اسم النشاط (الرابط)
                '<div style="font-size:15px;font-weight:bold;margin-bottom:6px;">' +
                    '<a href="'+data.link+'" target="_blank" style="text-decoration:none;color:inherit;">'+data.name+'</a>' +
                '</div>' +

                // ⭐ النجوم (أكبر وواضحة)
                '<div class="novlla-stars" style="display:flex;justify-content:center;margin-bottom:6px;font-size:20px;color:#f39c12;">' +
                    starsHTML +
                '</div>' +

                // 🔹 التقييم
                '<div style="font-size:13px;color:#555;margin-bottom:6px;">' +
                    data.rating.toFixed(1)+' ('+data.reviews+' مراجعة)' +
                '</div>' +

                // 🔹 رابط التوثيق
                '<a href="'+data.link+'" target="_blank" style="font-size:13px;color:#0073aa;text-decoration:none;">عرض التوثيق</a>' +

            '</div>';

            // 🎨 لون النجوم الفارغة
            var emptyStarsElems = el.querySelectorAll('.empty');
            emptyStarsElems.forEach(function(s){
                s.style.color = '#ddd';
            });

        })
        .catch(function(){
            el.innerHTML = "⚠️ فشل تحميل البيانات";
        });
    });
})();