{% load i18n short_name tz %}
<div id="section-chronologie" class="card mb-4 shadow-sm border-0"
     data-default-count="{{ timeline_default_count|default:intervention.events.count }}"
     data-total-count="{{ timeline_total_count|default:intervention.events.count }}">
    <div class="card-header bg-light d-flex flex-wrap align-items-center justify-content-between py-2 px-3 gap-2">
        <div class="d-flex align-items-center gap-2">
            <h4 class="mb-0 fs-6 fw-bold text-dark d-flex align-items-center">
                <i class="bi bi-clock-history text-primary me-2"></i>
                {% translate "Chronologie et historique" %}
            </h4>
            <span class="badge rounded-pill bg-primary" id="historyCounterBadge">
                {{ timeline_default_count|default:intervention.events.count }}
            </span>
        </div>

        <!-- Filtre mode d'affichage -->
        <div class="d-flex align-items-center gap-2">
            <div class="btn-group btn-group-sm" role="group" aria-label="{% translate 'Filtrer l\'historique' %}">
                <button type="button"
                        class="btn btn-outline-primary active btn-sm"
                        id="btnHistoryDefault"
                        onclick="switchHistoryTimeline('default')"
                        title="{% translate 'Afficher les statuts et les assignations' %}">
                    <i class="bi bi-list-check me-1"></i>{% translate "Statuts & Assignations" %}
                </button>
                <button type="button"
                        class="btn btn-outline-primary btn-sm"
                        id="btnHistoryFull"
                        onclick="switchHistoryTimeline('full')"
                        title="{% translate 'Afficher toutes les modifications détaillées' %}">
                    <i class="bi bi-clock-history me-1"></i>{% translate "Historique complet" %}
                    {% if timeline_detailed_count or timeline_modification_count %}
                    <span class="badge bg-secondary ms-1">+{{ timeline_detailed_count|default:timeline_modification_count }}</span>
                    {% endif %}
                </button>
            </div>
        </div>
    </div>

    <div class="card-body p-3">
        {% with events_list=timeline_events|default:intervention.events.all %}
        {% if events_list %}
        <div class="history-timeline">
            {% for event in events_list %}
            <div class="history-timeline-item {% if not event.is_default_visible %}history-item-detailed history-item-modification d-none{% endif %}"
                 data-event-type="{{ event.event_type }}">
                <!-- Node Icon -->
                <div class="history-timeline-node {{ event.get_badge_class }}">
                    <i class="bi {{ event.get_icon }}"></i>
                </div>

                <!-- Card Bubble -->
                <div class="history-timeline-card">
                    <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
                        <!-- Event Info -->
                        <div class="d-flex flex-wrap align-items-center gap-2">
                            {% if event.event_type == 'status_change' %}
                                <span class="badge bg-primary">{% translate "Statut" %}</span>
                                {% if event.from_status %}
                                    <span class="badge bg-{{ event.get_from_status_color }}">{{ event.get_from_status_display }}</span>
                                    <i class="bi bi-arrow-right text-muted small"></i>
                                {% endif %}
                                <span class="badge bg-{{ event.get_to_status_color }}">{{ event.get_to_status_display }}</span>
                                {% if event.event_description %}
                                    <span class="small text-muted ms-1">({{ event.event_description }})</span>
                                {% endif %}
                            {% elif event.event_type == 'assignment' %}
                                <span class="badge bg-info text-dark">{% translate "Assignation" %}</span>
                                <span class="fw-semibold text-dark">{{ event.event_description|default:_("Assignation mise à jour") }}</span>
                            {% elif event.event_type == 'creation' %}
                                <span class="badge bg-success">{% translate "Création" %}</span>
                                <span class="fw-semibold text-dark">{% translate "Intervention initialisée" %}</span>
                                {% if event.to_status %}
                                    <span class="badge bg-{{ event.get_to_status_color }} ms-1">{{ event.get_to_status_display }}</span>
                                {% endif %}
                            {% elif event.event_type == 'transfer' %}
                                <span class="badge bg-warning text-dark">{% translate "Transfert" %}</span>
                                <span class="fw-semibold text-dark">{{ event.event_description|default:_("Intervention transférée") }}</span>
                            {% elif event.event_type == 'modification' %}
                                <span class="badge bg-secondary">{% translate "Modification" %}</span>
                                <span class="fw-semibold text-secondary">{{ event.event_description|default:_("Attributs modifiés") }}</span>
                            {% elif event.event_type == 'note' %}
                                <span class="badge bg-info text-dark">{% translate "Note" %}</span>
                                <span class="fw-semibold text-dark">{{ event.event_description }}</span>
                            {% elif event.event_type == 'document' %}
                                <span class="badge bg-secondary">{% translate "Document" %}</span>
                                <span class="fw-semibold text-dark">{{ event.event_description }}</span>
                            {% elif event.event_type == 'link' %}
                                <span class="badge bg-dark">{% translate "Lien" %}</span>
                                <span class="fw-semibold text-dark">{{ event.event_description }}</span>
                            {% else %}
                                <span class="badge bg-secondary">{{ event.get_event_type_display }}</span>
                                {% if event.to_status %}
                                    <span class="badge bg-{{ event.get_to_status_color }} ms-1">{{ event.get_to_status_display }}</span>
                                {% endif %}
                            {% endif %}
                        </div>

                        <!-- Author & Time -->
                        <div class="d-flex align-items-center gap-3 ms-auto text-nowrap">
                            <span class="small text-secondary" title="{% translate 'Auteur de la modification' %}">
                                <i class="bi bi-person me-1"></i><strong class="text-dark">{{ event.event_user|short_name|default:_("Système") }}</strong>
                            </span>
                            <span class="small text-muted" title="{% translate 'Date et heure' %}">
                                <i class="bi bi-clock me-1"></i>{{ event.event_time|timezone:"Europe/Brussels"|date:"d/m/Y H:i" }}
                            </span>
                        </div>
                    </div>

                    <!-- Detailed Field Changes (if any) -->
                    {% if event.field_changes %}
                    <div class="history-changes mt-2 pt-2 border-top">
                        {% for field_key, change in event.field_changes.items %}
                        <div class="history-field-row d-flex flex-wrap align-items-center py-1 small">
                            <span class="badge bg-light text-dark border me-2 py-1 px-2 fw-semibold">{{ change.label|default:field_key }}</span>
                            {% if change.old and change.new %}
                                <span class="text-muted text-decoration-line-through me-1">{{ change.old }}</span>
                                <i class="bi bi-arrow-right text-muted mx-1"></i>
                                <span class="fw-bold text-dark ms-1">{{ change.new }}</span>
                            {% elif change.new %}
                                <span class="fw-bold text-dark">{{ change.new }}</span>
                            {% elif change.old %}
                                <span class="text-muted text-decoration-line-through">{{ change.old }}</span>
                            {% else %}
                                <span class="text-muted fst-italic">({% translate "vide" %})</span>
                            {% endif %}
                        </div>
                        {% endfor %}
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="text-center text-muted py-4">
            <i class="bi bi-clock-history fs-3 d-block mb-2 text-secondary opacity-50"></i>
            <p class="mb-0 small">{% translate "Aucun événement enregistré dans l'historique." %}</p>
        </div>
        {% endif %}
        {% endwith %}
    </div>
</div>

<script>
function switchHistoryTimeline(mode) {
    const defaultBtn = document.getElementById('btnHistoryDefault');
    const fullBtn = document.getElementById('btnHistoryFull');
    const badge = document.getElementById('historyCounterBadge');
    const detailedItems = document.querySelectorAll('.history-item-detailed, .history-item-modification');
    const section = document.getElementById('section-chronologie');
    const defaultCount = section ? section.dataset.defaultCount : '';
    const totalCount = section ? section.dataset.totalCount : '';

    if (mode === 'full') {
        defaultBtn?.classList.remove('active');
        fullBtn?.classList.add('active');
        detailedItems.forEach(el => el.classList.remove('d-none'));
        if (badge && totalCount) badge.textContent = totalCount;
    } else {
        fullBtn?.classList.remove('active');
        defaultBtn?.classList.add('active');
        detailedItems.forEach(el => el.classList.add('d-none'));
        if (badge && defaultCount) badge.textContent = defaultCount;
    }
}
</script>