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

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

{% block content %}
{# Icon (Bootstrap Icons) + colour variant per notification type. #}
{% set NF_ICONS = {
  'message': ('bi-chat-dots-fill', 'blue'),
  'offer': ('bi-arrow-left-right', 'blue'),
  'offer_accepted': ('bi-check-circle-fill', 'green'),
  'offer_rejected': ('bi-x-circle-fill', 'red'),
  'favorite': ('bi-bookmark-fill', 'blue'),
  'listing': ('bi-box-seam-fill', 'blue'),
  'meetup': ('bi-geo-alt-fill', 'blue'),
  'premium': ('bi-star-fill', 'amber'),
  'advertisement': ('bi-megaphone-fill', 'amber'),
  'report': ('bi-flag-fill', 'red'),
  'system': ('bi-bell-fill', 'neutral')
} %}
{# Contextual action button per related-entity type (all open via the existing
   open_notification route, which marks read then redirects). #}
{% set NF_ACTIONS = {
  'conversation': ('bi-chat-dots', 'Open Chat'),
  'offer': ('bi-arrow-left-right', 'View Negotiation'),
  'listing': ('bi-eye', 'View Listing')
} %}
{# Coarse category used by the client-side type filter. #}
{% set NF_CATEGORY = {
  'message': 'message',
  'offer': 'offer', 'offer_accepted': 'offer', 'offer_rejected': 'offer',
  'listing': 'listing', 'favorite': 'listing'
} %}

<div class="dashboard-page notif-page">
  {{ page_header('Notifications', 'Stay updated on your listings, offers, and messages.') }}

  {% if pagination.items %}
    <div class="notif-toolbar">
      <div class="notif-search">
        <i class="bi bi-search notif-search-ico" aria-hidden="true"></i>
        <input type="search" id="notifSearch" class="notif-search-input"
               placeholder="Search notifications&hellip;" aria-label="Search notifications" autocomplete="off">
      </div>

      <div class="dropdown notif-tool">
        <button class="notif-tool-btn" type="button" data-bs-toggle="dropdown" aria-expanded="false">
          <i class="bi bi-funnel" aria-hidden="true"></i>
          <span class="d-none d-sm-inline">Filter</span>
          <i class="bi bi-chevron-down notif-caret" aria-hidden="true"></i>
        </button>
        <ul class="dropdown-menu dropdown-menu-end notif-menu" data-notif-filter>
          <li><button type="button" class="dropdown-item notif-menu-item is-active" data-filter="all"><i class="bi bi-check2 notif-check"></i> All</button></li>
          <li><button type="button" class="dropdown-item notif-menu-item" data-filter="offer"><i class="bi bi-check2 notif-check"></i> Offers</button></li>
          <li><button type="button" class="dropdown-item notif-menu-item" data-filter="message"><i class="bi bi-check2 notif-check"></i> Messages</button></li>
          <li><button type="button" class="dropdown-item notif-menu-item" data-filter="listing"><i class="bi bi-check2 notif-check"></i> Listings</button></li>
          <li><button type="button" class="dropdown-item notif-menu-item" data-filter="system"><i class="bi bi-check2 notif-check"></i> System</button></li>
        </ul>
      </div>

      <div class="dropdown notif-tool">
        <button class="notif-tool-btn" type="button" data-bs-toggle="dropdown" aria-expanded="false">
          <i class="bi bi-arrow-down-up" aria-hidden="true"></i>
          <span class="d-none d-sm-inline">Sort</span>
          <i class="bi bi-chevron-down notif-caret" aria-hidden="true"></i>
        </button>
        <ul class="dropdown-menu dropdown-menu-end notif-menu" data-notif-sort>
          <li><button type="button" class="dropdown-item notif-menu-item is-active" data-sort="newest"><i class="bi bi-check2 notif-check"></i> Newest First</button></li>
          <li><button type="button" class="dropdown-item notif-menu-item" data-sort="oldest"><i class="bi bi-check2 notif-check"></i> Oldest First</button></li>
        </ul>
      </div>

      <form method="post" action="{{ url_for('notifications.mark_all_read') }}" class="notif-markall-form">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <button type="submit" class="notif-markall">
          <i class="bi bi-check2-all" aria-hidden="true"></i>
          <span class="d-none d-sm-inline">Mark all read</span>
        </button>
      </form>
    </div>

    <div class="notif-feed" id="notifFeed">
      {% for notification in pagination.items %}
        {% set ntype = notification.notification_type.value %}
        {% set entity = notification.related_entity_type.value if notification.related_entity_type else none %}
        {% set icon, tone = NF_ICONS.get(ntype, ('bi-bell-fill', 'neutral')) %}
        {% set action = NF_ACTIONS.get(entity) %}
        {# Moderation notifications resolve their button from the shared link map
           (View Report / View My Listings / Community Guidelines). #}
        {% if not action and entity == 'report' %}
          {% set ml = mod_links.get(notification.title) %}
          {% if ml %}{% set action = (ml.icon, ml.label) %}{% endif %}
        {% endif %}
        {% set category = NF_CATEGORY.get(ntype, 'system') %}
        {% set open_url = url_for('notifications.open_notification', public_id=notification.public_id) %}
        <article class="notif-card {{ 'is-unread' if not notification.is_read }}"
                 data-href="{{ open_url }}"
                 data-type="{{ category }}"
                 data-ts="{{ notification.created_at.isoformat() }}"
                 data-search="{{ (notification.title ~ ' ' ~ notification.message)|lower }}"
                 tabindex="0" role="link"
                 aria-label="{{ notification.title }}">
          <span class="notif-ico notif-ico--{{ tone }}" aria-hidden="true"><i class="bi {{ icon }}"></i></span>

          <div class="notif-body">
            <div class="notif-row-top">
              <p class="notif-card-title">{{ notification.title }}</p>
              <span class="notif-time">
                {% if not notification.is_read %}<span class="notif-dot" aria-label="Unread"></span>{% endif %}
                <time data-relative datetime="{{ notification.created_at.isoformat() }}">{{ notification.created_at.strftime('%d %b') }}</time>
              </span>
            </div>
            <p class="notif-card-msg">{{ notification.message }}</p>

            {% if action %}
              <div class="notif-actions">
                <a class="notif-btn notif-btn-primary" href="{{ open_url }}">
                  <i class="bi {{ action[0] }}" aria-hidden="true"></i> {{ action[1] }}
                </a>
              </div>
            {% endif %}
          </div>
        </article>
      {% endfor %}
    </div>

    <p class="notif-no-results d-none" id="notifNoResults">No notifications match your search.</p>

    <div class="mt-4">
      {{ render_pagination(pagination, 'notifications.list_notifications') }}
    </div>

    <footer class="notif-footer">
      Showing your most recent notifications.
    </footer>
  {% else %}
    <div class="notif-empty">
      <div class="notif-empty-ico"><i class="bi bi-bell-slash" aria-hidden="true"></i></div>
      <h2 class="notif-empty-title">You're all caught up!</h2>
      <p class="notif-empty-text">New notifications will appear here when there's marketplace activity — offers, messages and updates on your listings.</p>
      <a class="notif-btn notif-btn-primary notif-empty-btn" href="{{ url_for('main.marketplace') }}">
        <i class="bi bi-shop" aria-hidden="true"></i> Browse Marketplace
      </a>
    </div>
  {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script>
  // Presentation-only: whole-card click, client-side search/filter/sort.
  (function () {
    var feed = document.getElementById('notifFeed');
    if (!feed) return;

    // Whole-card click / keyboard opens the notification (marks read + routes).
    feed.querySelectorAll('.notif-card').forEach(function (card) {
      card.addEventListener('click', function (e) {
        if (e.target.closest('a, button')) return;  // let real links/buttons work
        var href = card.getAttribute('data-href');
        if (href) window.location.href = href;
      });
      card.addEventListener('keydown', function (e) {
        if (e.key === 'Enter') { var h = card.getAttribute('data-href'); if (h) window.location.href = h; }
      });
    });

    var search = document.getElementById('notifSearch');
    var noResults = document.getElementById('notifNoResults');
    var activeFilter = 'all';

    function apply() {
      var q = (search && search.value.trim().toLowerCase()) || '';
      var visible = 0;
      feed.querySelectorAll('.notif-card').forEach(function (card) {
        var matchesFilter = activeFilter === 'all' || card.getAttribute('data-type') === activeFilter;
        var matchesSearch = !q || (card.getAttribute('data-search') || '').indexOf(q) !== -1;
        var show = matchesFilter && matchesSearch;
        card.style.display = show ? '' : 'none';
        if (show) visible++;
      });
      if (noResults) noResults.classList.toggle('d-none', visible !== 0);
    }

    if (search) search.addEventListener('input', apply);

    // Filter dropdown
    document.querySelectorAll('[data-notif-filter] .notif-menu-item').forEach(function (item) {
      item.addEventListener('click', function () {
        activeFilter = item.getAttribute('data-filter');
        document.querySelectorAll('[data-notif-filter] .notif-menu-item')
          .forEach(function (i) { i.classList.toggle('is-active', i === item); });
        apply();
      });
    });

    // Sort dropdown (reorders the current page's cards)
    document.querySelectorAll('[data-notif-sort] .notif-menu-item').forEach(function (item) {
      item.addEventListener('click', function () {
        var order = item.getAttribute('data-sort');
        document.querySelectorAll('[data-notif-sort] .notif-menu-item')
          .forEach(function (i) { i.classList.toggle('is-active', i === item); });
        var cards = Array.prototype.slice.call(feed.querySelectorAll('.notif-card'));
        cards.sort(function (a, b) {
          var ta = a.getAttribute('data-ts'), tb = b.getAttribute('data-ts');
          return order === 'oldest' ? (ta < tb ? -1 : ta > tb ? 1 : 0)
                                    : (ta > tb ? -1 : ta < tb ? 1 : 0);
        });
        cards.forEach(function (c) { feed.appendChild(c); });
      });
    });
  })();
</script>
{% endblock %}