// reactions.js — toggle réactions via fetch, fallback formulaire natif

document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.reaction-form').forEach(function (form) {
        form.addEventListener('submit', function (e) {
            e.preventDefault();

            var btn    = form.querySelector('.reaction-btn');
            var type   = form.querySelector('[name="type"]').value;
            var uuid   = form.querySelector('[name="uuid"]').value;
            var badge  = form.querySelector('.reaction-count');
            var active = btn.classList.contains('btn-primary');

            var data = new URLSearchParams();
            data.append('uuid', uuid);
            data.append('type', type);
            data.append('_ajax', '1');

            fetch('/react', {
                method: 'POST',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                body: data.toString(),
            })
            .then(function (r) { return r.json(); })
            .then(function (json) {
                if (!json.ok) { form.submit(); return; }

                var nowActive = json.active;
                btn.classList.toggle('btn-primary', nowActive);
                btn.classList.toggle('btn-outline-secondary', !nowActive);
                if (badge) {
                    badge.classList.toggle('bg-light', nowActive);
                    badge.classList.toggle('text-primary', nowActive);
                    badge.classList.toggle('bg-secondary', !nowActive);
                    badge.textContent = json.count;
                }
            })
            .catch(function () { form.submit(); });
        });
    });
});