{% extends 'dashboard/base.html' %}
{% block title %}Notifications{% endblock %}
{% block breadcrumb %}Notifications{% endblock %}

{% block content %}
<main class="mx-auto px-4 py-5">
  <div class="mb-6">
    <h1 class="text-2xl font-bold text-gray-900">Notifications</h1>
    <p class="text-sm text-gray-600 mt-1">View all notifications and manage read status.</p>
  </div>

  <div class="fluent-card p-4">
    <div class="flex items-center justify-between mb-3">
      <div class="text-subtitle">All Notifications</div>
      <button id="refresh-notifications" class="fluent-btn fluent-btn-sm" type="button">Refresh</button>
    </div>

    <div id="notifications-list" class="divide-y"></div>
    <div id="notifications-empty" class="text-small text-gray-500 hidden">No notifications.</div>
  </div>
</main>

<script>
  (function(){
    const list = document.getElementById('notifications-list');
    const empty = document.getElementById('notifications-empty');
    const refresh = document.getElementById('refresh-notifications');

    function getCsrfToken() {
      const meta = document.querySelector('meta[name="csrf-token"]');
      if (meta && meta.content) return meta.content;
      const v = document.cookie.match('(^|;)\\s*csrftoken\\s*=\\s*([^;]+)');
      return v ? v.pop() : '';
    }

    function render(items) {
      list.innerHTML = '';
      if (!items.length) {
        empty.classList.remove('hidden');
        return;
      }
      empty.classList.add('hidden');
      items.forEach(n => {
        const row = document.createElement('div');
        row.className = 'py-3 flex items-start justify-between gap-3';
        row.innerHTML = `
          <div>
            <div class="font-medium ${n.read ? 'text-gray-500' : 'text-gray-900'}">${n.title}</div>
            <div class="text-small text-gray-600">${n.message}</div>
            <div class="text-xs text-gray-400 mt-1">${new Date(n.created_at).toLocaleString()}</div>
          </div>
          <div class="flex gap-2">
            ${n.read ? '' : `<button data-id="${n.id}" class="fluent-btn fluent-btn-sm mark-read">Mark read</button>`}
            <button data-id="${n.id}" class="fluent-btn fluent-btn-sm delete">Delete</button>
          </div>
        `;
        list.appendChild(row);
      });

      list.querySelectorAll('.mark-read').forEach(btn => {
        btn.addEventListener('click', () => {
          const id = btn.dataset.id;
          fetch(`/notifications/mark-read/${id}/`, {
            method: 'POST',
            headers: {'X-CSRFToken': getCsrfToken()}
          }).then(r => r.json()).then(() => load());
        });
      });

      list.querySelectorAll('.delete').forEach(btn => {
        btn.addEventListener('click', () => {
          const id = btn.dataset.id;
          fetch(`/notifications/delete/${id}/`, {
            method: 'POST',
            headers: {'X-CSRFToken': getCsrfToken()}
          }).then(r => r.json()).then(() => load());
        });
      });
    }

    function load() {
      fetch('{% url "notifications-list" %}')
        .then(r => r.json())
        .then(data => {
          if (!data.success) return;
          render(data.notifications || []);
        }).catch(()=>{});
    }

    if (refresh) refresh.addEventListener('click', load);
    load();
  })();
</script>
{% endblock %}