{% extends 'layouts/base.twig' %}

{% block title %}{{ translations.notification_history|default('Historia powiadomień') }}{% endblock %}

{% block page_heading %}
    <div class="page-heading">
        <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
            <div>
                <h3>{{ translations.notification_history|default('Historia powiadomień') }}</h3>
                <p class="text-subtitle text-muted">
                    {{ translations.notification_history_subtitle|default('Powiadomienia które już odczytałeś') }}
                </p>
            </div>
        </div>
    </div>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">

        {% if notifications is empty %}
            <div class="card">
                <div class="card-body text-center py-5">
                    <i class="bi bi-bell-slash fs-1 text-muted mb-3 d-block"></i>
                    <h5 class="text-muted">{{ translations.no_read_notifications|default('Brak odczytanych powiadomień') }}</h5>
                    <p class="text-muted small">{{ translations.no_read_notifications_hint|default('Powiadomienia pojawią się tutaj po ich odczytaniu.') }}</p>
                </div>
            </div>
        {% else %}
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mb-0">
                        <i class="bi bi-clock-history me-2"></i>
                        {{ translations.notification_history|default('Historia powiadomień') }}
                        <span class="badge bg-secondary ms-2">{{ notifications|length }}</span>
                    </h4>
                </div>
                <div class="card-body p-0">
                    <div class="list-group list-group-flush" id="notif-history-list">
                        {% for notif in notifications %}
                            {% set priorityClass = 'border-secondary' %}
                            {% set priorityIconClass = 'text-secondary' %}
                            {% set priorityIcon = 'bi-info-circle' %}
                            {% if notif.getPriority() == 'warning' %}
                                {% set priorityClass = 'border-warning' %}
                                {% set priorityIconClass = 'text-warning' %}
                                {% set priorityIcon = 'bi-exclamation-triangle' %}
                            {% elseif notif.getPriority() == 'urgent' %}
                                {% set priorityClass = 'border-danger' %}
                                {% set priorityIconClass = 'text-danger' %}
                                {% set priorityIcon = 'bi-exclamation-octagon' %}
                            {% endif %}

                            {# Ustal URL akcji - z modelu lub fallback z batch_id #}
                            {% set actionUrl = notif.getActionUrl() %}

                            {% if not actionUrl and notif.getBatchId() %}
                                {% set actionUrl = root ~ '/price-change-batches/' ~ notif.getBatchId() %}
                            {% endif %}
                            {% set actionLabel = notif.getActionLabel()|default(translations.go_to|default('Przejdź')) %}

                            <div class="list-group-item border-start border-3 {{ priorityClass }}">
                                <div class="d-flex align-items-start gap-3 py-2">
                                    <div class="flex-shrink-0 pt-1">
                                        <i class="bi {{ priorityIcon }} fs-5 {{ priorityIconClass }}"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <div class="d-flex justify-content-between align-items-start flex-wrap gap-1">
                                            <div>
                                                <span class="fw-semibold">{{ notif.getTitle() }}</span>
                                                {% if notif.getPriority() == 'urgent' %}
                                                    <span class="badge bg-danger ms-1 small">{{ translations.urgent|default('Pilne') }}</span>
                                                {% elseif notif.getPriority() == 'warning' %}
                                                    <span class="badge bg-warning text-dark ms-1 small">{{ translations.warning|default('Ważne') }}</span>
                                                {% endif %}
                                            </div>
                                            <div class="d-flex align-items-center gap-2 text-muted small flex-shrink-0">
                                                {% if notif.getLastReadAt() %}
                                                    <span title="{{ translations.getLastReadAt()|default('Ostatnio odczytane') }}">
                                                        <i class="bi bi-check2-circle text-success me-1"></i>
                                                        {{ notif.getLastReadAt()|slice(0,16) }}
                                                    </span>
                                                {% endif %}
                                                {% if notif.getReadCount() > 1 %}
                                                    <span class="badge bg-light text-dark border"
                                                          title="{{ translations.getReadCount()|default('Liczba odczytań') }}">
                                                        {{ notif.getReadCount() }}&times;
                                                    </span>
                                                {% endif %}
                                            </div>
                                        </div>

                                        <p class="mb-1 text-muted small mt-1">{{ notif.getMessage() }}</p>

                                        {# Szczegóły batcha zmian cen #}
                                        {% if notif.getBatchId() %}
                                            <div class="d-flex flex-wrap gap-2 mt-2 mb-1">
                                                {% if notif.getBatchSupplierId() %}
                                                    <span class="badge bg-light text-dark border small">
                                                        <i class="bi bi-truck me-1"></i>{{ translations.supplier|default('Dostawca') }} #{{ notif.getBatchSupplierId() }}
                                                    </span>
                                                {% endif %}
                                                {% if notif.getBatchItemCount() %}
                                                    <span class="badge bg-light text-dark border small">
                                                        <i class="bi bi-tag me-1"></i>{{ notif.getBatchItemCount() }} {{ translations.products|default('produktów') }}
                                                    </span>
                                                {% endif %}
                                                {% if notif.getBatchStatus() == 'read' and notif.getBatchReadAt() %}
                                                    <span class="badge bg-success-light text-success border border-success small">
                                                        <i class="bi bi-check-circle me-1"></i>{{ translations.confirmed_at|default('Zatwierdzone') }}: {{ notif.getBatchReadAt()|slice(0,16) }}
                                                    </span>
                                                {% elseif notif.getBatchStatus() == 'locked' %}
                                                    <span class="badge bg-info-light text-info border border-info small">
                                                        <i class="bi bi-lock me-1"></i>{{ translations.status_locked|default('Przeglądane') }}
                                                    </span>
                                                {% endif %}
                                            </div>
                                        {% endif %}

                                        {% if actionUrl %}
                                            <a href="{{ actionUrl }}"
                                               class="btn btn-sm btn-outline-primary mt-1">
                                                <i class="bi bi-arrow-right-circle me-1"></i>
                                                {{ actionLabel }}
                                            </a>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>

                {% if notifications|length >= limit %}
                <div class="card-footer text-center" id="load-more-footer">
                    <button type="button" class="btn btn-outline-secondary btn-sm" id="btnLoadMore"
                            data-offset="{{ offset + limit }}" data-limit="{{ limit }}">
                        <i class="bi bi-arrow-down-circle me-1"></i>
                        {{ translations.load_more|default('Załaduj więcej') }}
                    </button>
                </div>
                {% endif %}
            </div>
        {% endif %}

    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function () {
    const btnLoadMore = document.getElementById('btnLoadMore');
    if (!btnLoadMore) return;

    btnLoadMore.addEventListener('click', async function () {
        const offset = parseInt(this.dataset.offset);
        const limit  = parseInt(this.dataset.limit);

        try {
            btnLoadMore.disabled = true;
            btnLoadMore.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Ładowanie...';

            const resp = await api(`/ajax/notifications/read?limit=${limit}&offset=${offset}`, { method: 'GET' });
            const items = resp.data || [];

            if (items.length === 0) {
                document.getElementById('load-more-footer').innerHTML =
                    '<p class="text-muted small mb-0">Brak więcej powiadomień</p>';
                return;
            }

            const list = document.getElementById('notif-history-list');
            items.forEach(n => {
                const priorityClass     = n.getPriority() === 'urgent' ? 'border-danger'
                                        : n.getPriority() === 'warning' ? 'border-warning' : 'border-secondary';
                const priorityIcon      = n.getPriority() === 'urgent' ? 'bi-exclamation-octagon'
                                        : n.getPriority() === 'warning' ? 'bi-exclamation-triangle' : 'bi-info-circle';
                const priorityIconClass = n.getPriority() === 'urgent' ? 'text-danger'
                                        : n.getPriority() === 'warning' ? 'text-warning' : 'text-secondary';

                const readAt        = n.getLastReadAt() ? escapeHtml(n.getLastReadAt().substring(0, 16)) : '';
                const readCountHtml = (n.getReadCount() && n.getReadCount() > 1)
                    ? `<span class="badge bg-light text-dark border">${n.getReadCount()}&times;</span>` : '';

                // Ustal URL akcji - z modelu lub fallback z batch_id
                const actionUrl   = n.getActionUrl() || (n.getBatchId() ? `{{ root }}/price-change-batches/${n.getBatchId()}` : null);
                const actionLabel = escapeHtml(n.getActionLabel() || '{{ translations.go_to|default("Przejdź") }}');
                const actionHtml  = actionUrl
                    ? `<a href="${escapeHtml(actionUrl)}" class="btn btn-sm btn-outline-primary mt-1">
                           <i class="bi bi-arrow-right-circle me-1"></i>${actionLabel}
                       </a>` : '';

                // Szczegóły batcha
                let batchHtml = '';
                if (n.getBatchId()) {
                    const supplierBadge = n.getBatchSupplierId()
                        ? `<span class="badge bg-light text-dark border small"><i class="bi bi-truck me-1"></i>{{ translations.supplier|default('Dostawca') }} #${n.getBatchSupplierId()}</span>` : '';
                    const itemsBadge = n.getBatchItemCount()
                        ? `<span class="badge bg-light text-dark border small"><i class="bi bi-tag me-1"></i>${n.getBatchItemCount()} {{ translations.products|default('produktów') }}</span>` : '';
                    const statusBadge = (n.getBatchStatus() === 'read' && n.getBatchReadAt())
                        ? `<span class="badge bg-success-light text-success border border-success small"><i class="bi bi-check-circle me-1"></i>{{ translations.confirmed_at|default('Zatwierdzone') }}: ${escapeHtml(n.getBatchReadAt().substring(0,16))}</span>`
                        : (n.getBatchStatus() === 'locked'
                            ? `<span class="badge bg-info-light text-info border border-info small"><i class="bi bi-lock me-1"></i>{{ translations.status_locked|default('Przeglądane') }}</span>`
                            : '');
                    if (supplierBadge || itemsBadge || statusBadge) {
                        batchHtml = `<div class="d-flex flex-wrap gap-2 mt-2 mb-1">${supplierBadge}${itemsBadge}${statusBadge}</div>`;
                    }
                }

                const div = document.createElement('div');
                div.className = `list-group-item border-start border-3 ${priorityClass}`;
                div.innerHTML = `
                    <div class="d-flex align-items-start gap-3 py-2">
                        <div class="flex-shrink-0 pt-1">
                            <i class="bi ${priorityIcon} fs-5 ${priorityIconClass}"></i>
                        </div>
                        <div class="flex-grow-1">
                            <div class="d-flex justify-content-between align-items-start flex-wrap gap-1">
                                <span class="fw-semibold">${escapeHtml(n.getTitle())}</span>
                                <div class="d-flex align-items-center gap-2 text-muted small flex-shrink-0">
                                    ${readAt ? `<span><i class="bi bi-check2-circle text-success me-1"></i>${readAt}</span>` : ''}
                                    ${readCountHtml}
                                </div>
                            </div>
                            <p class="mb-1 text-muted small mt-1">${escapeHtml(n.message)}</p>
                            ${batchHtml}
                            ${actionHtml}
                        </div>
                    </div>
                `;
                list.appendChild(div);
            });

            if (items.length < limit) {
                document.getElementById('load-more-footer').innerHTML =
                    '<p class="text-muted small mb-0">Brak więcej powiadomień</p>';
            } else {
                btnLoadMore.dataset.offset = offset + limit;
                btnLoadMore.disabled = false;
                btnLoadMore.innerHTML = '<i class="bi bi-arrow-down-circle me-1"></i>Załaduj więcej';
            }
        } catch (e) {
            console.error(e);
            btnLoadMore.disabled = false;
            btnLoadMore.innerHTML = '<i class="bi bi-arrow-down-circle me-1"></i>Załaduj więcej';
        }
    });
});
</script>
{% endblock %}