{% set _review_summary = get_review_summary(_page_id) %}
{% set _review_list = get_reviews(_page_id, approved_only=True, limit=20) %}
<section class="py-16 bg-white dark:bg-gray-950" id="reviews-section" data-page-id="{{ _page_id }}">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-10">
            <span class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-yellow-500/30 bg-yellow-500/10 text-yellow-400 text-sm font-medium mb-4">
                <i class="fa fa-star text-xs"></i> {% trans %}Reviews & Ratings{% endtrans %}
            </span>
            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-3">{% trans %}What People Are Saying{% endtrans %}</h2>
            <p class="text-gray-500 dark:text-gray-400 max-w-xl mx-auto">{% trans %}Real feedback from real users. Share your experience and help others.{% endtrans %}</p>
        </div>

        <div class="flex justify-center">
            <div class="rounded-2xl bg-gray-800 dark:bg-gray-900 p-10 text-center inline-block min-w-[280px]">
                <div class="text-7xl font-bold text-white tracking-tight mb-4" data-testid="text-avg-rating">
                    {{ _review_summary.average }}
                </div>
                <div class="flex items-center justify-center gap-2 mb-3 rating-stars-display cursor-pointer" data-testid="stars-avg-rating">
                    {% for i in range(1, 6) %}
                    <i class="fa fa-star text-2xl transition-all duration-200 hover:scale-125 rating-star {% if i <= _review_summary.average|round(0, 'floor')|int %}text-yellow-400{% else %}text-gray-600{% endif %}" data-star="{{ i }}"></i>
                    {% endfor %}
                </div>
                <p class="text-sm text-gray-400" data-testid="text-review-count">
                    {% trans %}Based on{% endtrans %} {{ _review_summary.count }} {% trans %}reviews{% endtrans %}
                </p>
            </div>
        </div>

        {% if site is defined and site.social_buttons_enabled == '1' %}
        <div class="flex flex-wrap items-center justify-center gap-3 mt-6">
            {% if site.social_bookmark_enabled != '0' %}
            <a href="javascript:void(0);" class="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-orange-500 hover:bg-orange-600 text-white font-semibold text-sm transition-all shadow-md hover:shadow-lg social-bookmark-btn" data-testid="button-bookmark">
                <i class="fa fa-star"></i> {% trans %}Bookmark{% endtrans %}
            </a>
            {% endif %}
            {% if site.social_like_enabled != '0' %}
            <button type="button" class="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-semibold text-sm transition-all shadow-md hover:shadow-lg social-like-btn" data-testid="button-like">
                <i class="fa fa-thumbs-up"></i> {% trans %}Like{% endtrans %} {{ site.social_like_count or '0' }}
            </button>
            {% endif %}
            {% if site.social_share_enabled != '0' %}
            <a href="https://www.facebook.com/sharer/sharer.php?u={{ request.url | urlencode }}" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-blue-500 hover:bg-blue-600 text-white font-semibold text-sm transition-all shadow-md hover:shadow-lg" data-testid="button-share">
                <i class="fab fa-facebook"></i> {% trans %}Share{% endtrans %} {{ site.social_share_count or '0' }}
            </a>
            {% endif %}
            {% if site.social_tweet_enabled != '0' %}
            <a href="https://twitter.com/intent/tweet?text={{ (site.social_tweet_text or '') | urlencode }}&url={{ request.url | urlencode }}" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-sky-400 hover:bg-sky-500 text-white font-semibold text-sm transition-all shadow-md hover:shadow-lg" data-testid="button-tweet">
                <i class="fab fa-twitter"></i> {% trans %}Tweet{% endtrans %}
            </a>
            {% endif %}
        </div>
        {% endif %}

        {% if _review_list %}
        {% set _has_text_reviews = [] %}
        {% for review in _review_list %}{% if review.review_text %}{% if _has_text_reviews.append(review) %}{% endif %}{% endif %}{% endfor %}
        {% if _has_text_reviews %}
        <div class="mt-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            {% for review in _has_text_reviews %}
            <div class="rounded-xl bg-gray-800/60 dark:bg-gray-900/60 border border-gray-700/30 p-4" data-testid="card-review-{{ review.id }}">
                <div class="flex items-center justify-between mb-3">
                    <div class="flex items-center gap-2">
                        <div class="w-8 h-8 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center text-white font-bold text-xs flex-shrink-0">
                            {{ review.reviewer_name[0]|upper if review.reviewer_name else 'A' }}
                        </div>
                        <span class="font-semibold text-white text-sm" data-testid="text-reviewer-name">{{ review.reviewer_name }}</span>
                    </div>
                    <div class="flex items-center gap-0.5">
                        {% for i in range(1, 6) %}
                        <i class="fa fa-star text-xs {% if i <= review.rating %}text-yellow-400{% else %}text-gray-600{% endif %}"></i>
                        {% endfor %}
                    </div>
                </div>
                <p class="text-gray-400 text-sm leading-relaxed line-clamp-3" data-testid="text-review-content">{{ review.review_text }}</p>
            </div>
            {% endfor %}
        </div>
        {% endif %}
        {% endif %}
    </div>

    <div class="hidden fixed inset-0 z-50 items-center justify-center bg-black/60 backdrop-blur-sm" id="rating-modal">
        <div class="bg-gray-800 dark:bg-gray-900 rounded-2xl p-8 w-full max-w-sm mx-4 shadow-2xl border border-gray-700/50">
            <div class="text-center mb-6">
                <h3 class="text-lg font-bold text-white mb-4">{% trans %}Rate this page{% endtrans %}</h3>
                <div class="flex items-center justify-center gap-3 mb-2" id="modal-star-selector">
                    {% for i in range(1, 6) %}
                    <i class="fa fa-star text-3xl text-gray-600 cursor-pointer transition-all duration-200 hover:scale-125 modal-star" data-star="{{ i }}"></i>
                    {% endfor %}
                </div>
                <p class="text-sm text-gray-400 modal-rating-label">{% trans %}Tap a star to rate{% endtrans %}</p>
            </div>
            <form class="rating-submit-form">
                <input type="hidden" name="page_id" value="{{ _page_id }}">
                <input type="hidden" name="rating" class="modal-rating-value" value="0">
                <div class="space-y-3">
                    <input type="text" name="reviewer_name" required maxlength="100" placeholder="{% trans %}Your name{% endtrans %}"
                        class="w-full px-4 py-2.5 rounded-lg border border-gray-600 bg-gray-700/50 text-white placeholder-gray-500 focus:ring-2 focus:ring-yellow-400/50 focus:border-yellow-400 outline-none transition-all text-sm"
                        data-testid="input-reviewer-name">
                    <div class="review-text-toggle">
                        <button type="button" id="toggle-review-text" class="text-xs text-yellow-400 hover:text-yellow-300 transition-all flex items-center gap-1" data-testid="button-toggle-review-text">
                            <i class="fa fa-pencil text-[10px]"></i> {% trans %}Write a review (optional){% endtrans %}
                        </button>
                        <div id="review-text-wrapper" class="hidden mt-2">
                            <textarea name="review_text" maxlength="1000" rows="3" placeholder="{% trans %}Share your experience...{% endtrans %}"
                                class="w-full px-4 py-2.5 rounded-lg border border-gray-600 bg-gray-700/50 text-white placeholder-gray-500 focus:ring-2 focus:ring-yellow-400/50 focus:border-yellow-400 outline-none transition-all text-sm resize-none"
                                data-testid="input-review-text"></textarea>
                        </div>
                    </div>
                </div>
                <div class="flex items-center gap-3 mt-5">
                    <button type="submit" class="flex-1 inline-flex items-center justify-center gap-2 px-6 py-2.5 rounded-lg bg-yellow-500 hover:bg-yellow-400 text-gray-900 font-bold transition-all text-sm disabled:opacity-50" data-testid="button-submit-rating">
                        {% trans %}Submit Rating{% endtrans %}
                    </button>
                    <button type="button" id="close-rating-modal" class="px-4 py-2.5 rounded-lg border border-gray-600 text-gray-400 text-sm font-medium hover:bg-gray-700 transition-all">
                        {% trans %}Cancel{% endtrans %}
                    </button>
                </div>
            </form>
        </div>
    </div>

    {% if _review_summary.count > 0 %}
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Product",
        "name": "{{ request.path | replace('/', ' ') | trim | title }}",
        "url": "{{ current_url }}",
        "aggregateRating": {
            "@type": "AggregateRating",
            "ratingValue": "{{ _review_summary.average }}",
            "bestRating": "5",
            "worstRating": "1",
            "ratingCount": "{{ _review_summary.count }}"
        }
    }
    </script>
    {% endif %}
</section>

<script>
(function _waitForJQuery() {
    if (typeof jQuery !== 'undefined') {
        jQuery(function() { _initRatingWidget(); });
    } else {
        setTimeout(_waitForJQuery, 50);
    }
})();
function _ocToast(type, msg) {
    var el = document.createElement('div');
    el.textContent = msg;
    el.style.cssText = 'position:fixed;top:1.25rem;right:1.25rem;z-index:99999;padding:0.75rem 1.25rem;border-radius:0.5rem;font-size:0.875rem;font-weight:600;color:#fff;opacity:0;transition:opacity 0.3s ease;pointer-events:none;box-shadow:0 4px 16px rgba(0,0,0,0.18);';
    el.style.background = type === 'success' ? '#10B981' : '#ef4444';
    document.body.appendChild(el);
    setTimeout(function(){ el.style.opacity = '1'; }, 10);
    setTimeout(function(){ el.style.opacity = '0'; setTimeout(function(){ el.parentNode && el.parentNode.removeChild(el); }, 350); }, 3200);
}
function _initRatingWidget() {
    var $ = jQuery;
    var $section = $('#reviews-section');
    var $modal = $('#rating-modal');
    var selectedRating = 0;

    $section.find('.rating-stars-display .rating-star').on('click', function() {
        selectedRating = parseInt($(this).data('star'));
        $modal.find('.modal-rating-value').val(selectedRating);
        $modal.find('.modal-star').each(function() {
            var s = parseInt($(this).data('star'));
            $(this).toggleClass('text-yellow-400', s <= selectedRating).toggleClass('text-gray-600', s > selectedRating);
        });
        var labels = ['', 'Poor', 'Fair', 'Good', 'Very Good', 'Excellent'];
        $modal.find('.modal-rating-label').text(labels[selectedRating]);
        $modal.removeClass('hidden').addClass('flex');
    });

    $modal.find('.modal-star').on('click', function() {
        selectedRating = parseInt($(this).data('star'));
        $modal.find('.modal-rating-value').val(selectedRating);
        $modal.find('.modal-star').each(function() {
            var s = parseInt($(this).data('star'));
            $(this).toggleClass('text-yellow-400', s <= selectedRating).toggleClass('text-gray-600', s > selectedRating);
        });
        var labels = ['', 'Poor', 'Fair', 'Good', 'Very Good', 'Excellent'];
        $modal.find('.modal-rating-label').text(labels[selectedRating]);
    });

    $modal.find('.modal-star').on('mouseenter', function() {
        var h = parseInt($(this).data('star'));
        $modal.find('.modal-star').each(function() {
            var s = parseInt($(this).data('star'));
            $(this).toggleClass('text-yellow-400', s <= h).toggleClass('text-gray-600', s > h);
        });
    });

    $('#modal-star-selector').on('mouseleave', function() {
        $modal.find('.modal-star').each(function() {
            var s = parseInt($(this).data('star'));
            $(this).toggleClass('text-yellow-400', s <= selectedRating).toggleClass('text-gray-600', s > selectedRating);
        });
    });

    $('#toggle-review-text').on('click', function() {
        $('#review-text-wrapper').toggleClass('hidden');
        var $icon = $(this).find('i');
        if ($('#review-text-wrapper').hasClass('hidden')) {
            $(this).html('<i class="fa fa-pencil text-[10px]"></i> {% trans %}Write a review (optional){% endtrans %}');
        } else {
            $(this).html("<i class='fa fa-chevron-up text-[10px]'></i> Masquer le texte de l'avis");
        }
    });

    $('#close-rating-modal').on('click', function() {
        $modal.removeClass('flex').addClass('hidden');
    });

    $modal.on('click', function(e) {
        if (e.target === this) $modal.removeClass('flex').addClass('hidden');
    });

    $section.on('click', '.social-bookmark-btn', function(e) {
        e.preventDefault();
        var isMac = (navigator.userAgent || '').toLowerCase().indexOf('mac') !== -1;
        toastr.info('Press ' + (isMac ? 'Cmd' : 'Ctrl') + '+D to bookmark this page.');
    });

    $section.on('click', '.social-like-btn', function() {
        $(this).addClass('opacity-75');
        _ocToast('success', 'Thanks for liking!');
    });

    $modal.find('.rating-submit-form').on('submit', function(e) {
        e.preventDefault();
        e.stopPropagation();
        if (selectedRating === 0) { _ocToast('error', 'Please select a star rating'); return; }
        var $form = $(this);
        var $btn = $form.find('[data-testid="button-submit-rating"]');
        $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin mr-2"></i>...');
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/api/reviews', true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        xhr.onload = function() {
            $btn.prop('disabled', false).text('Submit Rating');
            try {
                var resp = JSON.parse(xhr.responseText);
                if (resp.status === 'ok') {
                    _ocToast('success', 'Thank you for your rating!');
                    $modal.removeClass('flex').addClass('hidden');
                    $form[0].reset(); selectedRating = 0;
                    setTimeout(function() { location.reload(); }, 1500);
                } else { _ocToast('error', resp.message || 'Failed'); }
            } catch(ex) { _ocToast('error', 'An error occurred'); }
        };
        xhr.onerror = function() {
            $btn.prop('disabled', false).text('Submit Rating');
            _ocToast('error', 'An error occurred');
        };
        var params = 'page_id=' + encodeURIComponent($form.find('[name="page_id"]').val()) +
            '&rating=' + encodeURIComponent(selectedRating) +
            '&reviewer_name=' + encodeURIComponent($form.find('[name="reviewer_name"]').val() || '') +
            '&review_text=' + encodeURIComponent($form.find('[name="review_text"]').val() || '');
        xhr.send(params);
        return false;
    });
}
</script>