{% extends "base.html" %}

{% block content %}

<div class="container py-4">
  <h1 class="h3 mb-4">📢 Activity Feed</h1>
  <div id="act-list"></div>
  <div id="loading" class="text-center py-4" style="display:none;">
    <div class="spinner-border text-primary" role="status"></div>
  </div>
  <div id="empty" class="text-center py-5 text-muted" style="display:none;">
    <div style="font-size:3rem;">🦗</div>
    <p class="mt-3">No activity yet.</p>
  </div>
  <div class="text-center mt-3" id="more-wrap" style="display:none;">
    <button class="btn btn-outline-primary" onclick="loadMore()">Load More</button>
  </div>
</div>

<script>
var offset = 0, LIMIT = 30;

function timeAgo(iso) {
  var d = (Date.now() - new Date(iso).getTime()) / 1000;
  if (d < 60)    return 'just now';
  if (d < 3600)  return Math.floor(d/60) + 'm ago';
  if (d < 86400) return Math.floor(d/3600) + 'h ago';
  if (d < 604800) return Math.floor(d/86400) + 'd ago';
  return new Date(iso).toLocaleDateString();
}

function renderAct(a) {
  return '<div class="act-item">' +
    '<div class="act-icon">' + a.icon + '</div>' +
    '<div class="act-body">' +
      '<div><strong>' + a.user + '</strong> <span class="act-badge ab-' + a.type + '">' + a.type.replace('_',' ') + '</span></div>' +
      '<div>' + a.detail + ' — <a href="/recipe/' + a.recipe_id + '">' + a.recipe_title + '</a></div>' +
      '<div class="act-time">' + timeAgo(a.timestamp) + '</div>' +
    '</div></div>';
}

function load(append) {
  document.getElementById('loading').style.display = 'block';
  fetch('/api/activity?limit=' + LIMIT + '&offset=' + offset)
    .then(function(r){return r.json();})
    .then(function(data) {
      document.getElementById('loading').style.display = 'none';
      var list = document.getElementById('act-list');
      if (!append) list.innerHTML = '';
      if (data.activities.length === 0 && offset === 0) {
        document.getElementById('empty').style.display = 'block'; return;
      }
      data.activities.forEach(function(a) { list.insertAdjacentHTML('beforeend', renderAct(a)); });
      offset += data.activities.length;
      document.getElementById('more-wrap').style.display = data.has_more ? 'block' : 'none';
    });
}
function loadMore() { load(true); }
load(false);
</script>
{% endblock %}