(() => {
  for (const feed of document.querySelectorAll("[data-activity-feed]")) {
    const items = [...feed.querySelectorAll("[data-activity-item]")];
    const batchSize = Number.parseInt(feed.dataset.batchSize || "6", 10);
    const controls = feed.parentElement.querySelector("[data-activity-controls]");
    const status = controls?.querySelector("[data-activity-status]");
    const button = controls?.querySelector("[data-activity-more]");

    if (!controls || !status || !button || items.length <= batchSize) continue;

    let visibleCount = Math.min(batchSize, items.length);

    const render = () => {
      for (const [index, item] of items.entries()) {
        item.hidden = index >= visibleCount;
      }

      const remaining = items.length - visibleCount;
      status.textContent = `Showing ${visibleCount} of ${items.length} recent activity items.`;
      button.disabled = remaining === 0;
      button.textContent = remaining
        ? `Show ${Math.min(batchSize, remaining)} more`
        : "All activity shown";
      controls.hidden = false;
    };

    button.addEventListener("click", () => {
      visibleCount = Math.min(visibleCount + batchSize, items.length);
      render();
    });

    render();
  }
})();