{{ $pageID := .File.UniqueID | urlize }}
<!-- 点赞按钮 -->
<div class="relative" id="like-container-{{ $pageID }}">
  <button class="dark:invert flex items-center justify-center gap-1.5 min-w-12 h-12 px-2
      border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200
      hover:bg-black/5 hover:rounded-lg group animate-count-infinite"
      onclick="sendLike('{{ $pageID }}')"
      id="like-btn-{{ $pageID }}"
      title="{{ T "actionMenu.like" }}"
      data-liked-title="{{ T "actionMenu.liked" }}"
      data-tooltip>
    <img src="/img/heart-organ.svg" width="20" height="20"
        alt="{{ T "actionMenu.like" }}"
        class="brightness-40 flex-shrink-0 transition-all duration-300 dark:brightness-70 dark:contrast-120" id="like-icon-{{ $pageID }}" />
    <span class="text-xs font-bold text-gray-600 min-w-4 text-center bg-white/90 rounded-xl px-1.5 py-0.5 shadow-sm dark:text-gray-400 dark:bg-black/70" id="like-count-{{ $pageID }}">...</span>
  </button>
</div>

<style>
.liked-heart {
  filter: brightness(0) saturate(100%) invert(8%) sepia(100%) saturate(7500%) hue-rotate(0deg) brightness(70%) contrast(150%) !important;
}

.liked-count {
  color: #8B0000 !important;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', () => {
  // get page ID to fetch and update like data
  const pageId = "{{ $pageID }}";

  // get required elements
  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)
  };

  // return if no page ID found or not in production or no elements
  if (
    !pageId || window.location.host !== 'www.geedea.pro' ||
    !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();
        updateOrganFarm(data.likes);
      }
    } catch(e) {
      console.log(e);
      elements.count.innerText = "❌";
    }
  }

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

    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;
      updateOrganFarm(data.likes);
      setLikedState();
    } catch(e) {
      console.log(e);
      alert("点赞失败，请稍后再试");
    }
  };

  function updateOrganFarm(count) {
    const organFarm = document.getElementById("organ-farm");
    const organCount = count || parseInt(elements.count.innerText);
    const organImages = [
      "https://image.guhub.cn/picgo2025/oragn-3.png",
      "https://image.guhub.cn/picgo2025/organ-1.png",
      "https://image.guhub.cn/picgo2025/organ-2.png"
    ];

    if (!organFarm) return;
    if (organFarm.classList.contains("hidden")) {
      organFarm.classList.remove("hidden");
      organFarm.classList.add("animate-slide-in-down");
    }

    organFarm.innerHTML = "";
    for (let i = 0; i < organCount; i++) {
      const img = document.createElement("img");
      img.className = "transition hover:scale-150 dark:invert";

      const sizeRange = [6, 10];
      const size = Math.floor(Math.random() * (sizeRange[1] - sizeRange[0] + 1)) + sizeRange[0];
      img.classList.add(`w-${size}`, `h-${size}`);

      img.src = organImages[Math.floor(Math.random() * organImages.length)];
      // randomly offset and rotate
      img.classList.add("rotate-" + Math.floor(Math.random() * 5));
      img.classList.add("translate-x-" + Math.floor(Math.random() * 5));
      img.classList.add("translate-y-" + Math.floor(Math.random() * 5));
      img.classList.add("opacity" + (100 - Math.floor(Math.random() * 3)*10));

      organFarm.appendChild(img);
    }
  }

  // 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"));
});
</script>