{% load i18n %}

{# ========== Widget compteur d'incidents à traiter ========== #}
{% with team_param=user_team|yesno:"&team=1," %}
<div class="card shadow-sm border-primary h-100">
    <div class="card-header text-white bg-primary d-flex align-items-center justify-content-between">
        <a href="{% url 'observations:observations_index' %}?type=incident&status=to_process{{ team_param }}"
           class="text-white text-decoration-none fw-bold text-uppercase" style="letter-spacing:.05em;">
            <i class="bi bi-exclamation-triangle-fill me-2"></i>{% translate "Observations à traiter" %}
        </a>
        <span id="incident-counter-refresh-icon"
              class="spinner-border spinner-border-sm text-white d-none"
              role="status" aria-hidden="true"></span>
    </div>

            {# --- Compteur --- #}
            <div class="text-center py-2 border-bottom">
                <a href="{% url 'observations:observations_index' %}?type=incident&status=to_process{{ team_param }}"
                   class="text-decoration-none">
                    <span id="incident-counter-value"
                          class="display-5 fw-bold text-primary">{{ incident_to_process_count }}</span>
                </a>
            </div>

            {# --- Liste des 5 premiers incidents --- #}
            <ul class="list-group list-group-flush" id="incident-counter-list">
                {% for obs in incident_to_process_list %}
                <li class="list-group-item px-2 py-1 small">
                    <a href="{% url 'observations:observation_detail' obs.id %}" class="text-decoration-none d-block">
                        <div class="d-flex justify-content-between align-items-start">
                            <span class="fw-semibold text-primary text-truncate me-2" style="max-width:70%;">
                                {% if obs.description %}{{ obs.description|truncatechars:50 }}{% else %}<em class="text-muted">{% translate "Sans description" %}</em>{% endif %}
                            </span>
                            <span class="text-muted text-nowrap" style="font-size:.75rem;">{{ obs.created_at|date:"d/m H:i" }}</span>
                        </div>
                        <span class="text-muted" style="font-size:.75rem;">
                            {% if obs.address %}<i class="bi bi-geo-alt me-1"></i>{{ obs.address|truncatechars:40 }}{% endif %}
                            {% if obs.category %} &middot; {{ obs.category.get_name }}{% endif %}
                        </span>
                    </a>
                </li>
                {% empty %}
                <li class="list-group-item text-center text-muted py-2 small" id="incident-counter-empty">
                    <i class="bi bi-check-circle text-success me-1"></i>{% translate "Aucun incident à traiter" %}
                </li>
                {% endfor %}
            </ul>

            <div class="card-footer text-center text-muted small">
                <a href="{% url 'observations:observations_index' %}?type=incident&status=to_process{{ team_param }}"
                   class="text-muted text-decoration-none">
                    <i class="bi bi-arrow-right-circle me-1"></i>{% translate "Voir tous les incidents" %}
                </a>
                &nbsp;&middot;&nbsp;
                <i class="bi bi-clock me-1"></i>
                <span id="incident-counter-last-update">{% translate "À l'instant" %}</span>
            </div>
        </div>
{% endwith %}

<script>
(function () {
    const apiUrl = "{% url 'home:incident_count_api' %}";
    const valueEl = document.getElementById('incident-counter-value');
    const refreshIcon = document.getElementById('incident-counter-refresh-icon');
    const lastUpdateEl = document.getElementById('incident-counter-last-update');
    const listEl = document.getElementById('incident-counter-list');
    const detailUrlPattern = "{% url 'observations:observation_detail' 0 %}";
    const INTERVAL_MS = 60 * 1000; // 1 minute

    function formatTime(date) {
        return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
    }

    function detailUrl(id) {
        return detailUrlPattern.replace('/0/', '/' + id + '/');
    }

    function renderList(incidents) {
        if (!listEl) return;
        if (!incidents || incidents.length === 0) {
            listEl.innerHTML = '<li class="list-group-item text-center text-muted py-2 small">' +
                '<i class="bi bi-check-circle text-success me-1"></i>{% translate "Aucun incident à traiter" %}</li>';
            return;
        }
        listEl.innerHTML = incidents.map(function (obs) {
            var desc = obs.description
                ? (obs.description.length > 50 ? obs.description.slice(0, 50) + '…' : obs.description)
                : '<em class="text-muted">{% translate "Sans description" %}</em>';
            var meta = [];
            if (obs.address) meta.push('<i class="bi bi-geo-alt me-1"></i>' + obs.address.slice(0, 40));
            if (obs.category) meta.push(obs.category);
            return '<li class="list-group-item px-2 py-1 small">' +
                '<a href="' + detailUrl(obs.id) + '" class="text-decoration-none d-block">' +
                '<div class="d-flex justify-content-between align-items-start">' +
                '<span class="fw-semibold text-danger text-truncate me-2" style="max-width:70%;">' + desc + '</span>' +
                '<span class="text-muted text-nowrap" style="font-size:.75rem;">' + obs.created_at + '</span>' +
                '</div>' +
                (meta.length ? '<span class="text-muted" style="font-size:.75rem;">' + meta.join(' · ') + '</span>' : '') +
                '</a></li>';
        }).join('');
    }

    function refresh() {
        if (!valueEl) return;
        refreshIcon.classList.remove('d-none');
        fetch(apiUrl, { credentials: 'same-origin' })
            .then(function (res) { return res.json(); })
            .then(function (data) {
                valueEl.textContent = data.count;
                renderList(data.incidents);
                lastUpdateEl.textContent = formatTime(new Date());
            })
            .catch(function () {
                // Silent fail – keep displaying last known value
            })
            .finally(function () {
                refreshIcon.classList.add('d-none');
            });
    }

    // Auto-refresh every minute while the page is visible
    let timer = setInterval(refresh, INTERVAL_MS);

    // Pause when tab is hidden, resume when visible again
    document.addEventListener('visibilitychange', function () {
        if (document.hidden) {
            clearInterval(timer);
        } else {
            refresh();
            timer = setInterval(refresh, INTERVAL_MS);
        }
    });
})();
</script>