{% extends "base.html" %}
{% load i18n %}
{% load static %}
{% load roles %}
{% load mention_tags %}

{% block head %}
<style>
    .notif-item {
        transition: background 0.15s;
        border-left: 4px solid transparent;
    }
    .notif-item.unread {
        background-color: #f0f4ff;
        border-left-color: #2563eb;
    }
    .notif-item:hover {
        background-color: #e8edf8;
    }
    .notif-badge-type {
        font-size: 0.7rem;
        padding: 2px 6px;
    }
    .discussion-item {
        transition: all 0.15s ease-in-out;
        border-left: 4px solid transparent;
    }
    .discussion-item.has-unread {
        background-color: #f4f7ff;
        border-left-color: #2563eb;
    }
    .discussion-item:hover {
        background-color: #edf2fc;
        text-decoration: none;
    }
    .avatar-discussion {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }
    .avatar-group {
        display: inline-flex;
        align-items: center;
    }
    .avatar-group .avatar-circle {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        font-size: 0.7rem;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 2px solid #ffffff;
        margin-left: -6px;
        transition: transform 0.15s ease, z-index 0.15s ease;
        box-shadow: 0 1px 2px rgba(0,0,0,0.08);
        cursor: default;
    }
    .avatar-group .avatar-circle:first-child {
        margin-left: 0;
    }
    .avatar-group .avatar-circle:hover {
        transform: translateY(-2px) scale(1.15);
        z-index: 5;
    }
    .avatar-group .avatar-more {
        background-color: #f1f5f9;
        color: #475569;
        font-size: 0.68rem;
        font-weight: 700;
    }
    .inbox-nav-tabs .nav-link {
        font-size: 1.05rem;
        padding: 0.6rem 1.25rem;
        border: none;
        border-bottom: 3px solid transparent;
        color: #6c757d;
        font-weight: 500;
        background: transparent;
    }
    .inbox-nav-tabs .nav-link:hover {
        color: #2563eb;
        border-bottom-color: #dee2e6;
    }
    .inbox-nav-tabs .nav-link.active {
        color: #2563eb;
        font-weight: 700;
        border-bottom-color: #2563eb;
        background: transparent;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-4">

    <!-- Header with Tabs and Contextual Actions -->
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-4 gap-3 border-bottom pb-2">
        <!-- Tabs -->
        <ul class="nav inbox-nav-tabs mb-0 flex-nowrap" id="inboxTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link {% if active_tab != 'discussions' %}active{% endif %}"
                        id="tab-notifications-btn"
                        data-bs-toggle="tab"
                        data-bs-target="#pane-notifications"
                        type="button"
                        role="tab"
                        aria-controls="pane-notifications"
                        aria-selected="{% if active_tab != 'discussions' %}true{% else %}false{% endif %}">
                    <i class="bi bi-bell me-2"></i>{% translate "Notifications" %}
                    {% if unread_count > 0 %}
                    <span class="badge rounded-pill ms-1" style="background-color: #2563eb; font-size: 0.75rem;">
                        {{ unread_count }}
                    </span>
                    {% endif %}
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link {% if active_tab == 'discussions' %}active{% endif %}"
                        id="tab-discussions-btn"
                        data-bs-toggle="tab"
                        data-bs-target="#pane-discussions"
                        type="button"
                        role="tab"
                        aria-controls="pane-discussions"
                        aria-selected="{% if active_tab == 'discussions' %}true{% else %}false{% endif %}">
                    <i class="bi bi-chat-dots me-2"></i>{% translate "Discussions" %}
                    {% if unread_discussions_count > 0 %}
                    <span class="badge rounded-pill ms-1" style="background-color: #2563eb; font-size: 0.75rem;">
                        {{ unread_discussions_count }}
                    </span>
                    {% endif %}
                </button>
            </li>
        </ul>

        <!-- Action buttons (contextual according to active tab) -->
        <div class="d-flex gap-2 align-items-center">
            <!-- Notifications Tab Actions -->
            <div id="actions-notifications" class="d-flex gap-2 align-items-center {% if active_tab == 'discussions' %}d-none{% endif %}">
                {% if unread_count > 0 %}
                <form method="post" action="{% url 'notifications:mark_all_read' %}" class="d-inline">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-outline-secondary btn-sm">
                        <i class="bi bi-check2-all me-1"></i>{% translate "Tout marquer comme lu" %}
                    </button>
                </form>
                {% endif %}
                {% if user.config|has_any_role:"admin" %}
                <a href="{% url 'notifications:create' %}" class="btn btn-primary btn-sm">
                    <i class="bi bi-plus-circle me-1"></i>{% translate "Nouvelle notification" %}
                </a>
                {% endif %}
            </div>

            <!-- Discussions Tab Actions -->
            <div id="actions-discussions" class="d-flex gap-2 align-items-center {% if active_tab != 'discussions' %}d-none{% endif %}">
                <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#newDiscussionModal">
                    <i class="bi bi-chat-plus-fill me-1"></i>{% translate "Nouvelle discussion" %}
                </button>
            </div>

            <!-- Settings Button -->
            <a href="{% url 'notifications:settings' %}" class="btn btn-outline-secondary btn-sm" title="{% translate 'Paramètres' %}">
                <i class="bi bi-gear me-1"></i>{% translate "Paramètres" %}
            </a>
        </div>
    </div>

    <!-- Tabs Content -->
    <div class="tab-content" id="inboxTabsContent">

        <!-- ================= Pane 1: Notifications ================= -->
        <div class="tab-pane fade {% if active_tab != 'discussions' %}show active{% endif %}"
             id="pane-notifications"
             role="tabpanel"
             aria-labelledby="tab-notifications-btn">

            <!-- Filters -->
            <div class="card mb-3 border-0 shadow-sm">
                <div class="card-body py-2">
                    <form method="get" class="row g-2 align-items-center" id="notifications-filter-form">
                        <input type="hidden" name="tab" value="notifications">
                        <div class="col-auto">
                            <select name="type" class="form-select form-select-sm" onchange="this.form.submit()">
                                <option value="">{% translate "Tous les types" %}</option>
                                {% for val, label in notification_types %}
                                <option value="{{ val }}" {% if filter_type == val %}selected{% endif %}>{{ label }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-auto">
                            <div class="form-check form-switch mb-0">
                                <input class="form-check-input" type="checkbox" id="showArchived"
                                       name="archived" value="1"
                                       {% if show_archived %}checked{% endif %}
                                       onchange="this.form.submit()">
                                <label class="form-check-label" for="showArchived">{% translate "Archivées" %}</label>
                            </div>
                        </div>
                        {% if filter_type or show_archived %}
                        <div class="col-auto">
                            <a href="{% url 'notifications:inbox' %}" class="btn btn-link btn-sm text-muted">
                                <i class="bi bi-x-circle me-1"></i>{% translate "Réinitialiser" %}
                            </a>
                        </div>
                        {% endif %}
                    </form>
                </div>
            </div>

            <!-- Notifications list -->
            {% if notifications %}
            <div class="card border-0 shadow-sm">
                <div class="list-group list-group-flush">
                {% for item in notifications %}
                    {% with notif=item.notification %}
                    <div class="list-group-item list-group-item-action notif-item
                                {% if not item.is_read and not item.is_archived %}unread{% endif %}"
                         id="notif-row-{{ item.recipient_id }}-{{ item.recipient_type }}">
                        <div class="d-flex align-items-start gap-3 py-1">

                            <!-- Icon -->
                            <div class="flex-shrink-0 mt-1">
                                <span class="text-{{ notif.type_color }} fs-4">
                                    <i class="bi {{ notif.type_icon }}"></i>
                                </span>
                            </div>

                            <!-- Body -->
                            <div class="flex-grow-1 min-w-0">
                                <div class="d-flex justify-content-between align-items-start gap-2">
                                    <div>
                                        <span class="fw-semibold {% if not item.is_read and not item.is_archived %}text-dark{% else %}text-muted{% endif %}">
                                            {{ notif.title }}
                                        </span>
                                        {% if not item.is_read and not item.is_archived %}
                                        <span class="badge bg-primary notif-badge-type ms-1">{% translate "Nouveau" %}</span>
                                        {% endif %}
                                    </div>
                                    <div class="d-flex gap-2 flex-shrink-0 align-items-center">
                                        <!-- Mark read checkbox -->
                                        {% if not item.is_read %}
                                        <div class="form-check mb-0">
                                            <input class="form-check-input mark-read-btn" type="checkbox"
                                                   id="mark-read-{{ item.recipient_id }}-{{ item.recipient_type }}"
                                                   data-pk="{{ item.recipient_id }}"
                                                   data-type="{{ item.recipient_type }}"
                                                   title="{% if notif.is_single_claim %}{% translate 'Marquer comme traitée' %}{% else %}{% translate 'Marquer comme lu' %}{% endif %}">
                                            <label class="form-check-label small text-muted"
                                                   for="mark-read-{{ item.recipient_id }}-{{ item.recipient_type }}">
                                                {% if notif.is_single_claim %}
                                                    {% translate "Marquer comme traitée" %}
                                                {% else %}
                                                    {% translate "Marquer comme lu" %}
                                                {% endif %}
                                            </label>
                                        </div>
                                        {% endif %}
                                        <!-- Archive (personal only) -->
                                        {% if item.recipient_type == 'personal' and not item.is_archived %}
                                        <button class="btn btn-link btn-sm text-muted p-0 archive-btn"
                                                data-pk="{{ item.recipient_id }}"
                                                title="{% translate 'Archiver' %}">
                                            <i class="bi bi-archive"></i>
                                        </button>
                                        {% endif %}
                                    </div>
                                </div>

                                {% if notif.content %}
                                <p class="mb-1 text-muted small mt-1">{{ notif.content|linebreaksbr }}</p>
                                {% endif %}

                                <div class="d-flex flex-wrap gap-2 align-items-center mt-1">
                                    <!-- Metadata -->
                                    <span class="badge bg-{{ notif.type_color }} bg-opacity-10 text-{{ notif.type_color }} notif-badge-type">
                                        <i class="bi {{ notif.type_icon }} me-1"></i>{{ notif.get_notification_type_display }}
                                    </span>
                                    {% if item.team_name %}
                                    <span class="badge bg-secondary notif-badge-type">
                                        <i class="bi bi-people me-1"></i>{{ item.team_name }}
                                    </span>
                                    {% endif %}
                                    {% if notif.source_app %}
                                    <span class="badge bg-light text-muted notif-badge-type">{{ notif.source_app }}</span>
                                    {% endif %}
                                    <span class="text-muted small">
                                        <i class="bi bi-clock me-1"></i>{{ notif.created_at|date:"d/m/Y H:i" }}
                                    </span>
                                    {% if notif.sender %}
                                    <span class="text-muted small">
                                        <i class="bi bi-person me-1"></i>{{ notif.sender.get_full_name|default:notif.sender.username }}
                                    </span>
                                    {% endif %}
                                    {% if notif.expires_at %}
                                    <span class="text-muted small {% if notif.is_expired %}text-danger{% endif %}">
                                        <i class="bi bi-hourglass me-1"></i>{% translate "Expire le" %} {{ notif.expires_at|date:"d/m/Y H:i" }}
                                    </span>
                                    {% endif %}
                                    {% if notif.action_url and notif.action_url != request.path and notif.action_url != '/notifications/' and notif.action_url != '/notifications' %}
                                    <a href="{{ notif.action_url }}" class="btn btn-sm btn-outline-primary py-0 px-2">
                                        {{ notif.action_label|default:notif.action_url }}
                                        <i class="bi bi-arrow-right ms-1"></i>
                                    </a>
                                    {% endif %}
                                </div>

                                <!-- Attachments -->
                                {% with attachments=notif.attachments.all %}
                                {% if attachments %}
                                <div class="mt-2 d-flex flex-wrap gap-2">
                                    {% for att in attachments %}
                                    {% if att.is_image %}
                                    <a href="{{ att.file.url }}" target="_blank" title="{{ att.name }}">
                                        <img src="{{ att.file.url }}" alt="{{ att.name }}"
                                             style="height:60px; width:60px; object-fit:cover; border-radius:4px; border:1px solid #dee2e6;">
                                    </a>
                                    {% else %}
                                    <a href="{{ att.file.url }}" target="_blank"
                                       class="btn btn-sm btn-outline-secondary py-0 px-2">
                                        <i class="bi bi-paperclip me-1"></i>{{ att.name }}
                                    </a>
                                    {% endif %}
                                    {% endfor %}
                                </div>
                                {% endif %}
                                {% endwith %}
                            </div>
                        </div>
                    </div>
                    {% endwith %}
                {% endfor %}
                </div>
            </div>
            {% else %}
            <div class="text-center py-5 text-muted">
                <i class="bi bi-bell-slash" style="font-size: 3rem;"></i>
                <p class="mt-3">
                    {% if show_archived %}
                        {% translate "Aucune notification archivée." %}
                    {% else %}
                        {% translate "Vous n'avez aucune notification." %}
                    {% endif %}
                </p>
            </div>
            {% endif %}
        </div>

        <!-- ================= Pane 2: Discussions ================= -->
        <div class="tab-pane fade {% if active_tab == 'discussions' %}show active{% endif %}"
             id="pane-discussions"
             role="tabpanel"
             aria-labelledby="tab-discussions-btn">

            <!-- Filter by Flag -->
            <div class="card mb-3 border-0 shadow-sm">
                <div class="card-body py-2 d-flex flex-wrap align-items-center justify-content-between gap-2">
                    <div class="d-flex flex-wrap align-items-center gap-1.5">
                        <span class="small text-muted me-1 fw-medium"><i class="bi bi-funnel me-1"></i>{% translate "Statut" %} :</span>
                        <a href="?tab=discussions" class="btn btn-sm {% if not filter_flag %}btn-primary{% else %}btn-outline-secondary{% endif %} rounded-pill px-2.5 py-0.5" style="font-size: 0.8rem;">
                            {% translate "Tous" %} ({{ flag_counts.all|default:"0" }})
                        </a>
                        <a href="?tab=discussions&flag=red" class="btn btn-sm {% if filter_flag == 'red' %}btn-danger text-white{% else %}btn-outline-danger{% endif %} rounded-pill px-2.5 py-0.5" style="font-size: 0.8rem;">
                            <i class="bi bi-flag-fill me-1"></i>{% translate "Important" %} ({{ flag_counts.red|default:"0" }})
                        </a>
                        <a href="?tab=discussions&flag=orange" class="btn btn-sm {% if filter_flag == 'orange' %}btn-warning text-dark{% else %}btn-outline-warning text-dark{% endif %} rounded-pill px-2.5 py-0.5" style="font-size: 0.8rem; {% if filter_flag != 'orange' %}border-color: #fd7e14;{% endif %}">
                            <i class="bi bi-flag-fill me-1" style="color: #fd7e14;"></i>{% translate "En cours" %} ({{ flag_counts.orange|default:"0" }})
                        </a>
                        <a href="?tab=discussions&flag=green" class="btn btn-sm {% if filter_flag == 'green' %}btn-success text-white{% else %}btn-outline-success{% endif %} rounded-pill px-2.5 py-0.5" style="font-size: 0.8rem;">
                            <i class="bi bi-flag-fill me-1"></i>{% translate "Traité" %} ({{ flag_counts.green|default:"0" }})
                        </a>
                    </div>
                    {% if filter_flag %}
                    <div>
                        <a href="?tab=discussions" class="btn btn-link btn-sm text-muted p-0 text-decoration-none" style="font-size: 0.8rem;">
                            <i class="bi bi-x-circle me-1"></i>{% translate "Réinitialiser" %}
                        </a>
                    </div>
                    {% endif %}
                </div>
            </div>

            {% if not discussion_items %}
            <div class="card border-0 shadow-sm rounded-3">
                <div class="card-body text-center py-5 text-muted">
                    <i class="bi bi-chat-square fs-1 d-block mb-3 text-primary opacity-50"></i>
                    <p class="mb-0">{% translate "Vous n'avez encore aucune discussion." %}</p>
                </div>
            </div>
            {% else %}
            <div class="card border-0 shadow-sm rounded-3 overflow-hidden">
                <div class="list-group list-group-flush">
                    {% for item in discussion_items %}
                    <a href="{% url 'notifications:discussion_detail' item.discussion.pk %}"
                       class="list-group-item list-group-item-action discussion-item px-3 px-md-4 py-3 {% if item.unread_count %}has-unread{% endif %}">
                        <div class="d-flex align-items-start gap-3">
                            <!-- Icône typée -->
                            {% with type_info=item.discussion.type_info %}
                            <div class="avatar-discussion {{ type_info.bg_class }} {{ type_info.text_class }} border {{ type_info.border_class }}" title="{{ type_info.label }}">
                                <i class="bi {{ type_info.icon }} fs-5"></i>
                            </div>
                            {% endwith %}

                            <!-- Contenu -->
                            <div class="flex-grow-1 min-width-0">
                                <div class="d-flex justify-content-between align-items-start gap-2 mb-1">
                                    <div class="d-flex align-items-center gap-2 flex-wrap min-width-0">
                                        <span class="fw-semibold text-dark text-truncate" style="font-size: 0.975rem;">
                                            {{ item.discussion.title|default:item.discussion }}
                                        </span>
                                        {% if item.discussion.flag %}
                                        <span class="badge {{ item.discussion.flag_info.badge_class }} rounded-pill px-2 py-0.5 small"
                                              style="{{ item.discussion.flag_info.style }}"
                                              title="{{ item.discussion.flag_info.label }}{% if item.discussion.flag_set_by %} - {{ item.discussion.flag_set_by.get_full_name|default:item.discussion.flag_set_by.username }}{% endif %}">
                                            <i class="bi {{ item.discussion.flag_info.icon }} me-1"></i>{{ item.discussion.flag_info.label }}
                                        </span>
                                        {% endif %}
                                        {% if item.discussion.object_label and item.discussion.object_label != item.discussion.title %}
                                        <span class="badge bg-light text-secondary border small rounded-pill px-2 py-0.5">
                                            <i class="bi bi-link-45deg me-0.5"></i>{{ item.discussion.object_label }}
                                        </span>
                                        {% endif %}
                                        {% if item.discussion.is_closed %}
                                        <span class="badge bg-secondary-subtle text-secondary small rounded-pill px-2 py-0.5">
                                            <i class="bi bi-lock-fill me-0.5"></i>{% translate "Clôturée" %}
                                        </span>
                                        {% endif %}
                                    </div>
                                    <span class="text-muted small ms-2 text-nowrap d-flex align-items-center gap-1">
                                        <i class="bi bi-clock opacity-75"></i>
                                        {{ item.discussion.updated_at|date:"d/m/Y H:i" }}
                                    </span>
                                </div>

                                <!-- Aperçu du message nettoyé des tags @[Nom](u:id) -->
                                {% if item.last_message %}
                                <p class="mb-2 small text-muted text-truncate mt-0.5" style="max-width: 780px;">
                                    {% if item.last_message.is_system %}
                                    <span class="text-secondary opacity-75 fst-italic">{{ item.last_message.content|clean_mentions_preview|safe }}</span>
                                    {% else %}
                                    <strong class="text-secondary">{{ item.last_message.author.get_full_name|default:item.last_message.author.username }}</strong> :
                                    <span class="text-dark opacity-75">{{ item.last_message.content|clean_mentions_preview|truncatechars:140 }}</span>
                                    {% endif %}
                                </p>
                                {% else %}
                                <p class="mb-2 small text-muted mt-0.5 fst-italic">{% translate "Aucun message encore." %}</p>
                                {% endif %}

                                <!-- Pied de ligne : Participants en avatars empilés & compteur non lu -->
                                <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 pt-1">
                                    <div class="d-flex align-items-center gap-2">
                                        <span class="text-muted small d-none d-sm-inline" style="font-size: 0.78rem;">
                                            <i class="bi bi-people me-1 opacity-75"></i>{% translate "Participants" %} :
                                        </span>
                                        <div class="avatar-group">
                                            {% for p in item.discussion.participants.all|slice:":6" %}
                                            <div class="avatar-circle"
                                                 style="background-color: {{ p|avatar_bg_color }}; color: {{ p|avatar_text_color }};"
                                                 data-bs-toggle="tooltip"
                                                 data-bs-placement="top"
                                                 title="{{ p.get_full_name|default:p.username }}">
                                                {{ p|user_initials }}
                                            </div>
                                            {% endfor %}
                                            {% if item.discussion.participants.count > 6 %}
                                            <div class="avatar-circle avatar-more"
                                                 data-bs-toggle="tooltip"
                                                 data-bs-placement="top"
                                                 title="{{ item.discussion.participants.count }} {% translate 'participants au total' %}">
                                                +{{ item.discussion.participants.count|add:"-6" }}
                                            </div>
                                            {% endif %}
                                        </div>
                                    </div>

                                    <!-- Badge non-lus -->
                                    {% if item.unread_count %}
                                    <span class="badge rounded-pill bg-primary px-2.5 py-1 small fw-semibold shadow-sm" style="background-color: #2563eb !important;">
                                        {{ item.unread_count }} {% translate "non lu(s)" %}
                                    </span>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </a>
                    {% endfor %}
                </div>
            </div>
            {% endif %}

        </div>

    </div>

</div>

{% include "notifications/_new_discussion_modal.html" %}
{% endblock content %}

{% block script %}
<script>
const CSRF_TOKEN = "{{ csrf_token }}";

// ---- Tab Switching & State Persistence ----
document.addEventListener('DOMContentLoaded', () => {
    // Initialiser les tooltips Bootstrap
    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
    [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));

    const notifTabBtn = document.getElementById('tab-notifications-btn');
    const discTabBtn = document.getElementById('tab-discussions-btn');
    const notifActions = document.getElementById('actions-notifications');
    const discActions = document.getElementById('actions-discussions');

    function syncActionsToolbar(targetId) {
        if (targetId === '#pane-discussions' || targetId === 'discussions') {
            if (notifActions) notifActions.classList.add('d-none');
            if (discActions) discActions.classList.remove('d-none');
        } else {
            if (discActions) discActions.classList.add('d-none');
            if (notifActions) notifActions.classList.remove('d-none');
        }
    }

    if (notifTabBtn && discTabBtn) {
        notifTabBtn.addEventListener('shown.bs.tab', (e) => {
            syncActionsToolbar(e.target.getAttribute('data-bs-target'));
            if (history.replaceState) {
                const url = new URL(window.location);
                url.searchParams.delete('tab');
                url.hash = 'notifications';
                history.replaceState(null, '', url.pathname + url.search + url.hash);
            }
        });

        discTabBtn.addEventListener('shown.bs.tab', (e) => {
            syncActionsToolbar(e.target.getAttribute('data-bs-target'));
            if (history.replaceState) {
                const url = new URL(window.location);
                url.searchParams.set('tab', 'discussions');
                url.hash = 'discussions';
                history.replaceState(null, '', url.pathname + url.search + url.hash);
            }
        });

        // Check URL hash or query params on load
        const urlParams = new URLSearchParams(window.location.search);
        const tabParam = urlParams.get('tab');
        const hash = window.location.hash;

        if (tabParam === 'discussions' || hash === '#discussions') {
            const tab = bootstrap.Tab.getOrCreateInstance(discTabBtn);
            tab.show();
            syncActionsToolbar('discussions');
        } else if (tabParam === 'notifications' || hash === '#notifications') {
            const tab = bootstrap.Tab.getOrCreateInstance(notifTabBtn);
            tab.show();
            syncActionsToolbar('notifications');
        }
    }
});

// ---- Mark Read ----
document.querySelectorAll('.mark-read-btn').forEach(checkbox => {
    checkbox.addEventListener('change', async () => {
        if (!checkbox.checked) return;
        checkbox.disabled = true;
        const pk = checkbox.dataset.pk;
        const type = checkbox.dataset.type;
        const resp = await fetch("{% url 'notifications:mark_read' 0 %}".replace('0', pk), {
            method: 'POST',
            headers: {
                'X-CSRFToken': CSRF_TOKEN,
                'X-Requested-With': 'XMLHttpRequest',
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: `type=${type}`,
        });
        if (resp.ok) {
            const row = document.getElementById(`notif-row-${pk}-${type}`);
            if (row) {
                row.classList.remove('unread');
                // Masquer le bloc form-check avec une courte animation
                const formCheck = checkbox.closest('.form-check');
                if (formCheck) {
                    formCheck.style.transition = 'opacity 0.4s';
                    formCheck.style.opacity = '0';
                    setTimeout(() => formCheck.remove(), 400);
                }
            }
            const data = await resp.json();
            updateBadge(data.unread_count);
        } else {
            checkbox.checked = false;
            checkbox.disabled = false;
        }
    });
});

// ---- Archive ----
document.querySelectorAll('.archive-btn').forEach(btn => {
    btn.addEventListener('click', async () => {
        const pk = btn.dataset.pk;
        const resp = await fetch("{% url 'notifications:archive' 0 %}".replace('0', pk), {
            method: 'POST',
            headers: {
                'X-CSRFToken': CSRF_TOKEN,
                'X-Requested-With': 'XMLHttpRequest',
            },
        });
        if (resp.ok) {
            const row = document.getElementById(`notif-row-${pk}-personal`);
            if (row) row.remove();
            const data = await resp.json();
            updateBadge(data.unread_count);
        }
    });
});

function updateBadge(count) {
    const badge = document.getElementById('navbar-notif-badge');
    if (!badge) return;
    if (count > 0) {
        badge.textContent = count;
        badge.style.display = '';
    } else {
        badge.style.display = 'none';
    }
}
</script>
{% endblock script %}