{{ $pageId := . }}
<script defer>
/**
 * =================
 * Initialize all Action Menu features
 * - comment toggle
 * - comment count
 * - like
 * =================
 */

/**
 * =================
 * Toggle Comment Section
 * =================
 */

function initializeComments() {
  const commentsToggle = document.getElementById('comments-toggle');
  const commentsSection = document.getElementById('comments-section');

  if (!commentsToggle || !commentsSection) return;

  // click on toggle
  commentsToggle.addEventListener('click', function() {
    const isHidden = commentsSection.classList.contains('hidden');
    const entranceAnimation = 'animate-slide-in-down';
    const exitAnimation = 'animate-slide-out-up';

    if (isHidden) {
      // swtich on
      commentsSection.classList.remove('hidden', exitAnimation);
      commentsSection.classList.add(entranceAnimation);
    } else {
      // switch off
      commentsSection.classList.remove(entranceAnimation);
      commentsSection.classList.add(exitAnimation);
      setTimeout(() => {
        commentsSection.classList.add('hidden');
      }, 200);
    }
  });
}

/**
 * =================
 * Fetch and set Comment Count
 * =================
 */

function initializeCommentCount() {
  const commentCountEl = document.getElementById('comment-count');
  if (!commentCountEl) return;

  const observer = new MutationObserver(() => {
    // check if giscus is loaded
    const giscusIframe = document.querySelector('iframe.giscus-frame');
    if (!giscusIframe) return;

    giscusIframe.addEventListener('load', () => {
      // receive message from giscus iframe
      window.addEventListener('message', function(event) {
        if (event.origin !== 'https://giscus.app') return;
        const giscusData = event.data;
        if (giscusData.giscus?.discussion) {
          const discussion = giscusData.giscus.discussion;
          const totalComments = (discussion.totalCommentCount || 0) + (discussion.totalReplyCount || 0);
          // set comment count
          commentCountEl.textContent = totalComments.toString();
        // if no discussion found, set to 0
        } else commentCountEl.textContent = '0';
      });
    });

    observer.disconnect();
  });
  observer.observe(document.body, { childList: true, subtree: true });
}

/**
 * =================
 * Initialize like functionality
 * =================
 */

function initializeLikes(pageId) {
  if (window.location.host !== 'www.geedea.pro') return;

  const elements = {
    count: document.getElementById("like-count-" + pageId),
    btn: document.getElementById("like-btn-" + pageId),
    container: document.getElementById("like-container-" + pageId),
    icon: document.getElementById("like-icon-" + pageId)
  };

  if (!elements.count || !elements.btn || !elements.container) return;

  function setLikedState() {
    // update classes
    elements.icon?.classList.add('liked-heart');
    elements.icon?.classList.add('animate-heart-beat');
    elements.count?.classList.add('liked-count');
    elements.btn.disabled = true;
    elements.container.classList.add('liked');
    // update tooltip
    elements.btn.setAttribute('title',
      elements.container.classList.contains('liked')
        ? elements.btn.getAttribute('data-liked-title')
        : '为这篇文章献上心脏'
    );
  }

  async function fetchLikes() {
    try {
      const response = await fetch("https://like.guhub.cn/like/" + pageId);
      const data = await response.json();
      elements.count.innerText = data.likes ?? 0;
      if (localStorage.getItem("liked_" + pageId)) {
        setLikedState();
      }
    } catch(e) {
      console.log(e);
      elements.count.innerText = "❌";
    }
  }

  window.sendLike = async function(pageId) {
    if (localStorage.getItem("liked_" + pageId)) return;

    if (window.location.hostname !== 'localhost' && typeof umami !== 'undefined') {
      umami.track('👍 Hit Like Button');
    }

    try {
      const response = await fetch("https://like.guhub.cn/like/" + pageId, { method: "POST" });
      const data = await response.json();
      localStorage.setItem("liked_" + pageId, "1");
      elements.count.innerText = data.likes ?? 1;
      setLikedState();
    } catch(e) {
      console.log(e);
      alert("点赞失败，请稍后再试");
    }
  };

  // fetch likes when action menu is visible
  const observer = new IntersectionObserver((entries, obs) => {
    if (entries[0].isIntersecting) {
      fetchLikes();
      obs.disconnect();
    }
  });
  observer.observe(document.getElementById("action-menu"));
}

/**
 * =================
 * Load features after DOMContentLoaded
 * =================
 */

function initializeFeatures() {
  const pageId = "{{ $pageId }}";
  if (!pageId) return;

  initializeComments();
  initializeLikes(pageId);
  initializeCommentCount();
}

document.addEventListener('DOMContentLoaded', initializeFeatures);
</script>