banyaro/backend/static/js/pages/notifications.js

/* BAN YARO — Notification Center */

window.Page_notifications = (() => {

  // ----------------------------------------------------------
  // Hilfsfunktionen
  // ----------------------------------------------------------

  /** Relativer Zeitstempel: "vor 2h", "vor 3 Tagen", etc. */
  function _relTime(isoStr) {
    if (!isoStr) return '';
    const diff = Date.now() - new Date(isoStr + (isoStr.includes('Z') ? '' : 'Z')).getTime();
    const min  = Math.floor(diff / 60000);
    if (min <   1) return 'gerade eben';
    if (min <  60) return `vor ${min} Min.`;
    const h = Math.floor(min / 60);
    if (h   <  24) return `vor ${h}h`;
    const d = Math.floor(h / 24);
    if (d   <  30) return `vor ${d} Tag${d !== 1 ? 'en' : ''}`;
    const mo = Math.floor(d / 30);
    return `vor ${mo} Monat${mo !== 1 ? 'en' : ''}`;
  }

  /** Phosphor-Icon-Name je nach Notification-Typ */
  function _iconForType(type) {
    switch (type) {
      case 'chat_message':    return 'chat-circle';
      case 'friend_request':  return 'user-plus';
      case 'health_reminder': return 'first-aid';
      case 'milestone':       return 'star';
      case 'poison_alert':    return 'warning';
      default:                return 'bell';
    }
  }

  /** Parst n.data sicher — egal ob String oder Objekt */
  function _parseData(raw) {
    if (!raw) return {};
    if (typeof raw === 'object') return raw;
    try { return JSON.parse(raw); } catch (_) { return {}; }
  }

  /** Ermittelt Ziel-Seite und optionale Label für den Toast */
  function _navTarget(n) {
    const d = _parseData(n.data);
    // Explizit gesetzte Zielseite hat Vorrang
    if (d.page) return { page: d.page, label: d.page };
    // Typ-basiertes Fallback
    switch (n.type) {
      case 'chat_message':   return { page: d.conversation_id ? `chat?id=${d.conversation_id}` : 'chat', label: 'Chat' };
      case 'friend_request': return { page: 'friends', label: 'Freunde' };
      case 'milestone':      return { page: 'diary',   label: 'Tagebuch' };
      case 'poison_alert':   return { page: 'map',     label: 'Karte' };
      default:               return { page: '', label: '' };
    }
  }

  /** Rendert eine einzelne Notification als HTML-String */
  function _renderItem(n) {
    const unread   = !n.read_at;
    const iconName = unread ? _iconForType(n.type) : 'bell';
    const cls      = ['notif-item', unread ? 'notif-unread' : ''].filter(Boolean).join(' ');
    const nav      = _navTarget(n);

    return `
      <div class="${cls}" data-id="${n.id}" data-page="${UI.escape(nav.page)}" data-nav-label="${UI.escape(nav.label)}">
        <span class="notif-icon">${UI.icon(iconName)}</span>
        <div class="notif-content">
          <div class="notif-title">${UI.escape(n.title)}</div>
          ${n.body ? `<div class="notif-body">${UI.escape(n.body)}</div>` : ''}
          <div class="notif-time">${_relTime(n.created_at)}</div>
        </div>
        <button class="notif-del-btn icon-btn" data-del="${n.id}" title="Löschen"
                aria-label="Benachrichtigung löschen">
          ${UI.icon('x')}
        </button>
      </div>`;
  }

  // ----------------------------------------------------------
  // init
  // ----------------------------------------------------------
  async function init(container, appState, params) {
    container.innerHTML = `
      <div class="page-header">
        <h2>${UI.icon('bell')} Benachrichtigungen</h2>
        <button class="btn btn-sm btn-ghost" id="notif-read-all">Alle gelesen</button>
      </div>
      <div id="notif-list" class="notif-list">
        <div class="loading-spinner"></div>
      </div>`;

    _addStyles();

    // Daten laden
    let items = [];
    try {
      items = await API.notifications.list();
    } catch (e) {
      document.getElementById('notif-list').innerHTML =
        `<div class="empty-state">${UI.icon('warning')} Fehler beim Laden.</div>`;
      return;
    }

    _render(items);

    // "Alle gelesen"-Button
    document.getElementById('notif-read-all')?.addEventListener('click', async () => {
      try {
        await API.notifications.readAll();
        // Alle als gelesen markieren (lokal)
        items = items.map(n => ({ ...n, read_at: new Date().toISOString() }));
        _render(items);
      } catch (e) {
        UI.toast?.('Fehler beim Markieren.', 'error');
      }
    });
  }

  // ----------------------------------------------------------
  // Render-Helfer
  // ----------------------------------------------------------
  function _render(items) {
    const list = document.getElementById('notif-list');
    if (!list) return;

    if (!items || items.length === 0) {
      list.innerHTML = `
        <div class="empty-state">
          ${UI.icon('bell-slash')}
          <p>Keine Benachrichtigungen</p>
        </div>`;
      return;
    }

    list.innerHTML = items.map(_renderItem).join('');

    // Klick auf Notification: als gelesen + ggf. navigieren
    list.querySelectorAll('.notif-item').forEach(el => {
      el.addEventListener('click', async (e) => {
        // Löschen-Button nicht doppelt behandeln
        if (e.target.closest('.notif-del-btn')) return;

        const id       = parseInt(el.dataset.id, 10);
        const page     = el.dataset.page;
        const navLabel = el.dataset.navLabel;

        // Sofortiges visuelles Feedback: als gelesen markieren
        el.classList.remove('notif-unread');
        el.style.opacity = '0.6';

        // API-Call im Hintergrund — nicht abwarten
        API.notifications.read(id).catch(() => {});

        if (page && window.App?.navigate) {
          if (navLabel) UI.toast?.(`Öffne ${navLabel}…`, 'info');
          // Kurze Pause damit der Toast sichtbar wird, dann navigieren
          setTimeout(() => window.App.navigate(page), 150);
        } else {
          // Keine Zielseite — Opacity nach kurzer Zeit zurücksetzen
          setTimeout(() => { el.style.opacity = ''; }, 800);
        }
      });
    });

    // Löschen-Buttons
    list.querySelectorAll('.notif-del-btn').forEach(btn => {
      btn.addEventListener('click', async (e) => {
        e.stopPropagation();
        const id   = parseInt(btn.dataset.del, 10);
        const item = btn.closest('.notif-item');

        // Sofortiges visuelles Feedback
        if (item) {
          item.style.transition = 'opacity 0.2s, transform 0.2s';
          item.style.opacity    = '0';
          item.style.transform  = 'translateX(20px)';
        }

        try {
          await API.notifications.delete(id);
          item?.remove();
          if (!list.querySelector('.notif-item')) {
            list.innerHTML = `
              <div class="empty-state">
                ${UI.icon('bell-slash')}
                <p>Keine Benachrichtigungen</p>
              </div>`;
          }
        } catch (_) {
          // Rückgängig machen falls Fehler
          if (item) {
            item.style.opacity   = '';
            item.style.transform = '';
          }
          UI.toast?.('Löschen fehlgeschlagen.', 'error');
        }
      });
    });
  }

  // ----------------------------------------------------------
  // Inline-Styles (einmalig einfügen)
  // ----------------------------------------------------------
  function _addStyles() {
    if (document.getElementById('notif-styles')) return;
    const style = document.createElement('style');
    style.id = 'notif-styles';
    style.textContent = `
      .notif-list {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        padding: var(--space-4) 0;
      }
      .notif-item {
        display: flex;
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
        border-radius: var(--radius-md);
        background: var(--c-surface);
        border: 1px solid var(--c-border-light);
        cursor: pointer;
        transition: background var(--transition-fast);
      }
      .notif-item:hover {
        background: var(--c-surface-2);
      }
      .notif-item.notif-unread {
        border-left: 3px solid var(--c-primary);
        background: var(--c-primary-subtle);
      }
      .notif-item.notif-unread .notif-title {
        font-weight: var(--weight-semibold);
      }
      .notif-icon {
        flex-shrink: 0;
        color: var(--c-primary);
        margin-top: 2px;
      }
      .notif-content {
        flex: 1;
        min-width: 0;
      }
      .notif-title {
        font-size: var(--text-sm);
        color: var(--c-text);
        line-height: var(--leading-snug);
      }
      .notif-body {
        font-size: var(--text-xs);
        color: var(--c-text-secondary);
        margin-top: var(--space-1);
        line-height: var(--leading-relaxed);
      }
      .notif-time {
        font-size: var(--text-xs);
        color: var(--c-text-muted);
        margin-top: var(--space-1);
      }
      .notif-del-btn {
        flex-shrink: 0;
        color: var(--c-text-muted);
        opacity: 0.45;
        transition: opacity var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-sm);
      }
      .notif-item:hover .notif-del-btn,
      .notif-del-btn:focus-visible {
        opacity: 1;
        color: var(--c-danger, #e53e3e);
      }
      .notif-del-btn:active {
        background: var(--c-danger-subtle, rgba(229,62,62,.12));
      }
    `;
    document.head.appendChild(style);
  }

  return { init };
})();