{% extends "layouts/mobile_base.twig" %}
{% block title %}{{ translations.nav_notifications|default('Powiadomienia') }} · TFBuddy{% endblock %}
{% block topbar_title %}{{ translations.nav_notifications|default('Powiadomienia') }}{% endblock %}

{% block head %}
<style>
    .notif-item {
        display: flex; align-items: flex-start; gap: .85rem;
        padding: .85rem 0; border-bottom: 1px solid #f3f4f6;
        cursor: pointer; -webkit-tap-highlight-color: transparent;
    }
    .notif-item:last-child { border-bottom: none; }
    .notif-item.unread .notif-title { font-weight: 800; }
    .notif-icon {
        width: 40px; height: 40px; border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0; font-size: 1.1rem;
    }
    .notif-icon.info    { background: #eff6ff; color: #2563eb; }
    .notif-icon.warning { background: #fef9c3; color: #ca8a04; }
    .notif-icon.error   { background: #fef2f2; color: #dc2626; }
    .notif-icon.success { background: #f0fdf4; color: #16a34a; }
    .notif-title  { font-size: .875rem; color: #111827; line-height: 1.3; }
    .notif-msg    { font-size: .775rem; color: #6c757d; margin-top: .2rem; line-height: 1.4; }
    .notif-time   { font-size: .7rem; color: #9ca3af; margin-top: .25rem; }
    .notif-unread-dot {
        width: 8px; height: 8px; border-radius: 50%;
        background: #2563eb; flex-shrink: 0; margin-top: 6px;
    }
    #notif-skeleton .sk-row { height: 60px; border-radius: 12px; margin-bottom: 8px; }
</style>
{% endblock %}

{% block content %}

<div id="notif-filter" style="display:flex;gap:.5rem;margin-bottom:1rem;overflow-x:auto;padding-bottom:2px;">
    <button class="filter-pill active" data-filter="unread"
            style="border:none;border-radius:999px;padding:.35rem .9rem;font-size:.78rem;font-weight:700;cursor:pointer;white-space:nowrap;background:#2563eb;color:#fff;">
        {{ translations.unread|default('Nieprzeczytane') }}
    </button>
    <button class="filter-pill" data-filter="all"
            style="border:none;border-radius:999px;padding:.35rem .9rem;font-size:.78rem;font-weight:700;cursor:pointer;white-space:nowrap;background:#f3f4f6;color:#374151;">
        {{ translations.all_notifications|default('Wszystkie') }}
    </button>
</div>

<div id="notif-skeleton">
    <div class="sk-row skeleton-card"></div>
    <div class="sk-row skeleton-card"></div>
    <div class="sk-row skeleton-card"></div>
</div>

<div id="notif-list" style="display:none;"></div>

{% endblock %}

{% block scripts %}
<!-- PJAX_SCRIPTS_START -->
<script>
(function () {
    const ROOT = '{{ root }}';
    const T    = {{ translations | json_encode | raw }};

    const ICON_MAP = {
        info:    'bi-info-circle-fill',
        warning: 'bi-exclamation-triangle-fill',
        error:   'bi-x-circle-fill',
        success: 'bi-check-circle-fill',
    };

    let currentFilter = 'unread';

    function priorityIcon(p) {
        return ICON_MAP[p] || ICON_MAP.info;
    }

    function timeAgo(ts) {
        if (!ts) return '';
        const d = new Date(ts.replace(' ', 'T'));
        const diff = Math.floor((Date.now() - d.getTime()) / 1000);
        if (diff < 60)   return T.just_now ?? 'przed chwilą';
        if (diff < 3600) return Math.floor(diff / 60) + ' min';
        if (diff < 86400) return Math.floor(diff / 3600) + ' h';
        return Math.floor(diff / 86400) + ' ' + (T.days_ago ?? 'dni temu');
    }

    async function load() {
        document.getElementById('notif-skeleton').style.display = '';
        document.getElementById('notif-list').style.display = 'none';

        let items = [];
        try {
            if (currentFilter === 'unread') {
                const res = await fetch(ROOT + '/ajax/notifications?status=published', { credentials: 'include' });
                const j   = await res.json();
                items = Array.isArray(j) ? j : (j.data || []);
            } else {
                const [resU, resR] = await Promise.all([
                    fetch(ROOT + '/ajax/notifications?status=published', { credentials: 'include' }),
                    fetch(ROOT + '/ajax/notifications/read?limit=50', { credentials: 'include' }),
                ]);
                const jU = await resU.json();
                const jR = await resR.json();
                const unread = Array.isArray(jU) ? jU : (jU.data || []);
                const read   = Array.isArray(jR) ? jR : (jR.data || []);
                const seen = new Set();
                unread.concat(read).forEach(function(n) {
                    if (!seen.has(n.id)) { seen.add(n.id); items.push(n); }
                });
            }
        } catch (e) {}

        document.getElementById('notif-skeleton').style.display = 'none';
        const list = document.getElementById('notif-list');
        list.style.display = '';

        if (!items.length) {
            list.innerHTML = '<div class="pwa-empty-state"><i class="bi bi-bell text-secondary"></i><p>' +
                (T.no_notifications ?? 'Brak nowych powiadomień') + '</p></div>';
            return;
        }

        const isUnread = (n) => !n.last_read_at || n.read_count === 0;

        list.innerHTML = '<div class="pwa-card" style="padding:.25rem 1rem;">' +
            items.map(function (n) {
                const unread = isUnread(n);
                const icon   = priorityIcon(n.priority);
                const url    = n.action_url || '';
                return '<div class="notif-item ' + (unread ? 'unread' : '') + '" data-id="' + n.id + '" data-url="' + url + '">' +
                    '<div class="notif-icon ' + (n.priority || 'info') + '"><i class="bi ' + icon + '"></i></div>' +
                    '<div class="flex-grow-1">' +
                        '<div class="notif-title">' + (n.title || '') + '</div>' +
                        '<div class="notif-msg">' + (n.message || '') + '</div>' +
                        '<div class="notif-time">' + timeAgo(n.last_read_at) + '</div>' +
                    '</div>' +
                    (unread ? '<div class="notif-unread-dot"></div>' : '') +
                    '</div>';
            }).join('') +
        '</div>';

        // Mark as read on click
        list.querySelectorAll('.notif-item').forEach(function (el) {
            el.addEventListener('click', async function () {
                const id  = el.dataset.id;
                const url = el.dataset.url;
                el.classList.remove('unread');
                el.querySelector('.notif-unread-dot')?.remove();
                try {
                    await fetch(ROOT + '/ajax/notifications/' + id + '/read', { method: 'POST', credentials: 'include' });
                    updateBadge();
                } catch (e) {}
                if (url && url !== '') window.location.href = url;
            });
        });
    }

    // Filter pills
    document.querySelectorAll('#notif-filter .filter-pill').forEach(function (btn) {
        btn.addEventListener('click', function () {
            document.querySelectorAll('#notif-filter .filter-pill').forEach(function (b) {
                b.style.background = '#f3f4f6'; b.style.color = '#374151';
            });
            btn.style.background = '#2563eb'; btn.style.color = '#fff';
            currentFilter = btn.dataset.filter;
            load();
        });
    });

    load();
})();
</script>
<!-- PJAX_SCRIPTS_END -->
{% endblock %}