{% extends 'app_base.html.twig' %}

{% block title %}Historique — Scan Inventaire{% endblock %}

{% set statusLabels = {'en_cours': 'En cours', 'a_valider': 'À valider', 'valide': 'Validé', 'annule': 'Annulé'} %}
{% set statusColors = {
    'en_cours':  {bg: 'bg-blue-50',  text: 'text-blue-700',  border: 'border-blue-200'},
    'a_valider': {bg: 'bg-amber-50', text: 'text-amber-700', border: 'border-amber-200'},
    'valide':    {bg: 'bg-green-50', text: 'text-green-700', border: 'border-green-200'},
    'annule':    {bg: 'bg-gray-100', text: 'text-gray-600',  border: 'border-gray-200'},
} %}

{% block content %}
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-10" data-controller="history">
    <div class="mb-8">
        <h1 class="font-display font-bold text-3xl text-gray-900 mb-2">Historique</h1>
        <p class="text-gray-500 text-sm">
            Retrouvez vos sessions de scan précédentes, validez ou annulez les inventaires en attente.
            L'historique est lié à votre compte et visible uniquement par vous.
        </p>
    </div>

    {# État vide #}
    <div data-history-target="empty" class="{{ sessions|length > 0 ? 'hidden' : '' }} text-center py-16 bg-gray-50 border border-gray-200 rounded-2xl">
        <div class="w-14 h-14 bg-gray-200 rounded-2xl flex items-center justify-center mx-auto mb-4">
            <svg class="w-7 h-7 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
        </div>
        <p class="text-gray-900 font-medium mb-1">Aucune session enregistrée</p>
        <p class="text-gray-500 text-sm mb-5">Vos scans apparaîtront ici après traitement.</p>
        {% if is_granted('SCAN_CREATE') %}<a href="{{ path('app_scan') }}" class="inline-flex items-center gap-2 px-5 py-2.5 bg-red-brand text-white text-sm font-medium rounded-xl hover:bg-red-brand-dark transition-colors">Démarrer un scan</a>{% endif %}
    </div>

    {# Liste #}
    <div data-history-target="listWrapper" class="{{ sessions|length > 0 ? '' : 'hidden' }} space-y-4">
        <div class="flex items-center justify-between">
            <span class="text-sm text-gray-500"><span data-history-target="count">{{ sessions|length }}</span> session(s)</span>
            <button data-action="history#clearAll" class="text-xs text-gray-500 hover:text-red-brand transition-colors">Tout effacer</button>
        </div>

        <ul class="space-y-3" data-history-target="list">
            {% for s in sessions %}
                {% set c = statusColors[s.status] %}
                <li data-history-target="card" data-id="{{ s.id }}" class="bg-white border border-gray-200 rounded-2xl p-4 shadow-sm">
                    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                        <div class="min-w-0 flex-1">
                            <div class="flex items-center gap-2 flex-wrap mb-1">
                                <span class="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium border {{ c.bg }} {{ c.text }} {{ c.border }}">{{ statusLabels[s.status] }}</span>
                                <span class="font-medium text-gray-900 text-sm truncate">{{ s.label }}</span>
                            </div>
                            <p class="text-xs text-gray-500">
                                {{ s.count }} véhicule{{ s.count > 1 ? 's' }} · {{ s.totalFiles }} fichier{{ s.totalFiles > 1 ? 's' }}
                                · {{ s.createdAt|date('d/m/Y à H:i') }}
                                {% if s.locationNote %} · 📍 {{ s.locationNote }}{% endif %}
                            </p>
                        </div>
                        <div class="flex items-center gap-2 shrink-0 flex-wrap">
                            <a href="{{ path('app_inventaire_detail', {id: s.id}) }}"
                               class="px-3 py-1.5 text-xs font-medium text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-100 transition-colors">Voir</a>
                            {% if s.status == 'en_cours' and s.canSubmit %}
                                {# En cours → soumettre à la relecture (ouvert à l'opérateur). #}
                                <button data-action="history#setStatus" data-history-id-param="{{ s.id }}" data-history-status-param="a_valider"
                                        class="px-3 py-1.5 text-xs font-medium bg-amber-500 text-white rounded-lg hover:bg-amber-600 transition-colors">À valider</button>
                            {% endif %}
                            {% if s.canChangeStatus and s.status not in ['valide', 'en_cours'] %}
                                <button data-action="history#setStatus" data-history-id-param="{{ s.id }}" data-history-status-param="valide"
                                        class="px-3 py-1.5 text-xs font-medium bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">Valider</button>
                            {% endif %}
                            {% if s.canChangeStatus and s.status != 'annule' %}
                                <button data-action="history#setStatus" data-history-id-param="{{ s.id }}" data-history-status-param="annule"
                                        class="px-3 py-1.5 text-xs font-medium text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-100 transition-colors">Annuler</button>
                            {% endif %}
                            <button data-action="history#export" data-history-id-param="{{ s.id }}"
                                    class="px-3 py-1.5 text-xs font-medium bg-red-brand text-white rounded-lg hover:bg-red-brand-dark transition-colors">Excel</button>
                            <button data-action="history#delete" data-history-id-param="{{ s.id }}" title="Supprimer"
                                    class="p-2 text-gray-400 hover:text-red-brand hover:bg-gray-100 rounded-lg transition-colors {{ s.canDelete ? '' : 'hidden' }}">
                                <svg class="w-4 h-4 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
                            </button>
                        </div>
                    </div>
                </li>
            {% endfor %}
        </ul>
    </div>
</div>
{% endblock %}
