{% extends "base.html" %}
{% from "components/pagination.html" import render_pagination %}
{% from "components/empty_state.html" import empty_state %}

{% block title %}Activity · CampusCart{% endblock %}

{% block content %}
<div class="dashboard-page activity-page">

  {# ---------- Header (matches shared page-title styling) ---------- #}
  <div class="activity-header d-flex flex-wrap justify-content-between align-items-start gap-3 mb-4">
    <div>
      <h1 class="h3 fw-bold mb-1">Activity</h1>
      <p class="text-muted mb-0">Stay updated with everything happening on your account.</p>
    </div>
    <div class="activity-header-actions d-flex flex-wrap gap-2">
      <form method="post" action="{{ url_for('activity.mark_all_read') }}" class="d-inline">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <button class="btn btn-outline-secondary" type="submit" {{ 'disabled' if not unread_count }}>
          <i class="bi bi-check2-all me-1"></i> Mark all as read
        </button>
      </form>
      <form method="post" action="{{ url_for('activity.clear_read') }}" class="d-inline"
            onsubmit="return confirm('Remove all read activity? This cannot be undone.');">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <button class="btn btn-outline-danger" type="submit"><i class="bi bi-trash3 me-1"></i> Clear read</button>
      </form>
    </div>
  </div>

  {# ---------- Filters + search ---------- #}
  <div class="activity-toolbar mb-4">
    <div class="activity-filters" role="group" aria-label="Filter activity by type">
      {% for value, label, icon in categories %}
        <a class="activity-pill {{ 'is-active' if category == value }}"
           href="{{ url_for('activity.index', category=value if value != 'all' else none, unread='1' if unread_only else none) }}">
          <i class="bi {{ icon }}" aria-hidden="true"></i> {{ label }}
        </a>
      {% endfor %}
      <a class="activity-pill activity-pill--toggle {{ 'is-active' if unread_only }}"
         href="{{ url_for('activity.index', category=category if category != 'all' else none, unread=none if unread_only else '1') }}"
         aria-pressed="{{ 'true' if unread_only else 'false' }}">
        <i class="bi bi-dot" aria-hidden="true"></i> Unread{% if unread_count %} ({{ unread_count }}){% endif %}
      </a>
    </div>
    <div class="activity-search">
      <i class="bi bi-search" aria-hidden="true"></i>
      <input type="search" id="activitySearch" class="form-control form-control-sm"
             placeholder="Search activity…" aria-label="Search activity" autocomplete="off">
    </div>
  </div>

  {# ---------- Timeline (grouped by date) ---------- #}
  {% if items %}
    <div data-activity-list>
      {% for label, section_items in sections %}
        <section class="activity-section" data-activity-section>
          <h2 class="activity-section-title" data-section-title>{{ label }}</h2>
          <div class="activity-cards">
            {% for item in section_items %}
              <div class="activity-card tone-{{ item.tone }} {{ 'is-unread' if not item.is_read }} {{ 'is-clickable' if item.action_url }}"
                   data-activity-card
                   data-search="{{ (item.title ~ ' ' ~ (item.message or ''))|lower }}">
                <span class="activity-card-ico" aria-hidden="true"><i class="bi {{ item.icon or 'bi-bell' }}"></i></span>
                <div class="activity-card-main">
                  <div class="activity-card-head">
                    <span class="activity-card-title">
                      {{ item.title }}{% if item.count and item.count > 1 %} <span class="activity-card-count">×{{ item.count }}</span>{% endif %}
                    </span>
                    {% if not item.is_read %}<span class="badge activity-badge-new">NEW</span>{% endif %}
                    {% if item.status_label %}<span class="badge activity-status activity-status--{{ item.status_tone }}">{{ item.status_label }}</span>{% endif %}
                  </div>
                  {% if item.message %}<p class="activity-card-msg mb-0">{{ item.message }}</p>{% endif %}
                  <time class="activity-card-time" data-relative datetime="{{ item.created_at.isoformat() }}">{{ item.created_at.strftime('%d %b %Y, %H:%M') }}</time>
                </div>

                {% if item.action_url %}
                  <a class="stretched-link" href="{{ item.action_url }}"
                     aria-label="{{ item.action_label or item.title }}"></a>
                {% endif %}
                {% if item.id and not item.is_read %}
                  <form method="post" action="{{ url_for('activity.mark_read', activity_id=item.id) }}" class="activity-card-markread">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <input type="hidden" name="next" value="{{ request.full_path }}">
                    <button type="submit" class="activity-markread-btn" aria-label="Mark as read" title="Mark as read">
                      <i class="bi bi-check-lg"></i>
                    </button>
                  </form>
                {% endif %}
              </div>
            {% endfor %}
          </div>
        </section>
      {% endfor %}
    </div>

    {# Client-side search "no matches" notice (JS toggles it) #}
    <p class="activity-noresults text-muted text-center py-4" data-activity-noresults hidden>
      No activity matches your search.
    </p>

    <div class="mt-4">
      {{ render_pagination(pagination, 'activity.index',
                           {'unread': '1' if unread_only else none,
                            'category': category if category != 'all' else none}) }}
    </div>
  {% else %}
    {{ empty_state('bi-bell',
         ('No unread activity' if unread_only else 'No activity yet'),
         "You'll see messages, offers, listing updates and important notifications here.",
         cta_label='Browse Marketplace', cta_url=url_for('main.marketplace'), cta_icon='bi-shop') }}
  {% endif %}
</div>

<script>
  // Lightweight client-side search over the already-rendered activity cards.
  (function () {
    var input = document.getElementById('activitySearch');
    if (!input) return;
    var cards = Array.prototype.slice.call(document.querySelectorAll('[data-activity-card]'));
    var sections = Array.prototype.slice.call(document.querySelectorAll('[data-activity-section]'));
    var noResults = document.querySelector('[data-activity-noresults]');

    function apply() {
      var q = input.value.trim().toLowerCase();
      var anyVisible = false;
      cards.forEach(function (card) {
        var match = !q || card.getAttribute('data-search').indexOf(q) !== -1;
        card.hidden = !match;
        if (match) anyVisible = true;
      });
      // Hide a date section when all of its cards are filtered out.
      sections.forEach(function (sec) {
        var visible = sec.querySelectorAll('[data-activity-card]:not([hidden])').length;
        sec.hidden = visible === 0;
      });
      if (noResults) noResults.hidden = anyVisible;
    }
    input.addEventListener('input', apply);
  })();
</script>
{% endblock %}