{# Reaction Buttons Component #}
{% if includeStyles is defined and includeStyles %}
<style>
    .article-reactions {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin-bottom: 20px;
    }

    .reaction-btn {
        padding: 12px 24px;
        border: 2px solid #e7eaec;
        background: #fff;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 16px;
    }

    .reaction-btn:hover {
        border-color: #667eea;
        background: #f8f9ff;
    }

    .reaction-btn.active {
        border-color: #667eea;
        background: #667eea;
        color: #fff;
    }

    .reaction-btn i {
        font-size: 20px;
    }

    .reaction-count {
        font-weight: 600;
    }
</style>
{% endif %}

<div class="article-reactions" data-article-id="{{ articleId }}" data-type-num="{{ typeNum }}">
    <button
        class="reaction-btn {{ userReaction == 'helpful' ? 'active' : '' }}"
        data-reaction="helpful"
        onclick="submitReaction({{ articleId }}, 'helpful', this)"
    >
        <i class="fa fa-thumbs-up"></i>
        <span>Helpful</span>
        <span class="reaction-count" data-count="helpful">{{ helpfulCount|default(0) }}</span>
    </button>

    <button
        class="reaction-btn {{ userReaction == 'not_helpful' ? 'active' : '' }}"
        data-reaction="not_helpful"
        onclick="submitReaction({{ articleId }}, 'not_helpful', this)"
    >
        <i class="fa fa-thumbs-down"></i>
        <span>Not Helpful</span>
        <span class="reaction-count" data-count="not_helpful">{{ notHelpfulCount|default(0) }}</span>
    </button>
</div>

<script>
// Handle reaction submission
function submitReaction(articleId, reactionType, button) {
    var $btn = $(button);
    var $container = $btn.closest('.article-reactions');
    var $allBtns = $container.find('.reaction-btn');
    var csrfToken = $('meta[name="csrf_token"]').attr('content');
    var typeNum = $container.data('type-num');

    // Disable all buttons during request
    $allBtns.prop('disabled', true);

    $.ajax({
        type: 'POST',
        url: '/api/' + typeNum + '/support/articles/' + articleId + '/reaction/',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-Token': csrfToken
        },
        data: JSON.stringify({
            reactionType: reactionType
        }),
        xhrFields: {
            withCredentials: true
        },
        success: function(response) {
            // Update UI
            $allBtns.removeClass('active');
            $btn.addClass('active');

            // Update counts from reactionCounts object
            if (response.reactionCounts) {
                if (response.reactionCounts.helpful !== undefined) {
                    $container.find('[data-count="helpful"]').text(response.reactionCounts.helpful);
                }
                if (response.reactionCounts.not_helpful !== undefined) {
                    $container.find('[data-count="not_helpful"]').text(response.reactionCounts.not_helpful);
                }
            }

            // Show thank you message
            if (typeof swal === 'function') {
                swal('Thank you!', 'Your feedback helps us improve our articles.', 'success');
            }
        },
        error: function(xhr, status, error) {
            console.error('Reaction submission failed:', error);
            if (typeof swal === 'function') {
                swal('Error', 'Failed to submit reaction. Please try again.', 'error');
            } else {
                alert('Failed to submit reaction. Please try again.');
            }
        },
        complete: function() {
            // Re-enable buttons
            $allBtns.prop('disabled', false);
        }
    });
}
</script>