document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.vip-like-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      if (!vipReactsData.is_logged_in) {
        alert("Please log in to react.");
        return;
      }

      const linkId = btn.dataset.id;
      const value = btn.dataset.value;

      fetch(vipReactsData.ajax_url, {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: `action=save_vip_reaction&link_id=${linkId}&value=${value}`
      })
      .then(res => res.json())
      .then(response => {
        if (response.success && response.data) {
          const { likes, dislikes } = response.data;

          document.querySelectorAll(`.vip-like-btn[data-id="${linkId}"]`).forEach(el => {
            el.style.fontWeight = 'normal';

            if (el.dataset.value === 'like') {
              el.innerHTML = `👍 ${likes}`;
            }

            if (el.dataset.value === 'dislike') {
              el.innerHTML = `👎 ${dislikes}`;
            }
          });

          btn.style.fontWeight = 'bold';
        } else {
          console.error("Invalid response:", response);
        }
      });
    });
  });
});