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

{% block title %}Comparer des inventaires — Scan Inventaire{% endblock %}

{% macro inv_label(s) %}{{ s.label }} — {{ s.createdAt|date('d/m/Y H:i') }} ({{ s.count }} véh.){% endmacro %}

{% block content %}
{% set mode = app.request.request.get('mode') ?: app.request.query.get('mode') %}
{% if mode not in ['duo', 'stock'] %}
    {% set mode = (stockDiff is not null or stockId is not empty) ? 'stock' : 'duo' %}
{% endif %}
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-10 space-y-6">
    <div>
        <h1 class="font-display font-bold text-3xl text-gray-900 mb-1">Comparer</h1>
        <p class="text-gray-500 text-sm">Comparez deux inventaires entre eux, ou confrontez un inventaire scanné à un export de stock (DMS).</p>
    </div>

    {# ─── Choix de la concession ─── #}
    <div class="bg-white border border-gray-200 rounded-2xl p-6 shadow-sm">
        <form method="get" action="{{ path('app_compare') }}" class="flex flex-wrap items-end gap-3">
            <input type="hidden" name="mode" value="{{ mode }}">
            <div class="flex-1 min-w-[240px]">
                <label class="block text-xs font-medium text-gray-500 uppercase tracking-wide mb-1.5">Concession</label>
                <select name="concession" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-red-brand">
                    <option value="">— Choisir —</option>
                    {% for id, name in concessionList %}
                        <option value="{{ id }}" {{ id == concession ? 'selected' }}>{{ name }}</option>
                    {% endfor %}
                </select>
            </div>
            <button type="submit" class="px-4 py-2 text-sm font-medium text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-100 transition-colors">Charger</button>
        </form>
    </div>

    {% if concession %}
        {# ─── Choix du type de comparaison ─── #}
        <div>
            <p class="text-xs font-medium text-gray-500 uppercase tracking-wide mb-2">Type de comparaison</p>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                <a href="{{ path('app_compare', {concession: concession, mode: 'duo'}) }}"
                   class="flex items-start gap-4 p-5 rounded-2xl border-2 transition-colors {{ mode == 'duo' ? 'border-red-brand bg-blue-50/60 shadow-sm' : 'border-gray-200 bg-white hover:border-gray-300' }}">
                    <span class="flex items-center justify-center w-10 h-10 rounded-xl shrink-0 {{ mode == 'duo' ? 'bg-red-brand text-white' : 'bg-gray-100 text-gray-500' }}">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21 3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"/></svg>
                    </span>
                    <span>
                        <span class="block font-display font-semibold {{ mode == 'duo' ? 'text-red-brand' : 'text-gray-900' }}">Entre deux inventaires</span>
                        <span class="block text-sm text-gray-500 mt-0.5">Repérer les ajouts et les retraits entre deux scans de la concession.</span>
                    </span>
                </a>
                <a href="{{ path('app_compare', {concession: concession, mode: 'stock'}) }}"
                   class="flex items-start gap-4 p-5 rounded-2xl border-2 transition-colors {{ mode == 'stock' ? 'border-red-brand bg-blue-50/60 shadow-sm' : 'border-gray-200 bg-white hover:border-gray-300' }}">
                    <span class="flex items-center justify-center w-10 h-10 rounded-xl shrink-0 {{ mode == 'stock' ? 'bg-red-brand text-white' : 'bg-gray-100 text-gray-500' }}">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m6.75 12H9m5.25 3H9m1.5-6H9m10.5-4.5V18a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 18V6a2.25 2.25 0 0 1 2.25-2.25h5.379a2.25 2.25 0 0 1 1.59.659l4.622 4.621c.422.422.659.995.659 1.591Z"/></svg>
                    </span>
                    <span>
                        <span class="block font-display font-semibold {{ mode == 'stock' ? 'text-red-brand' : 'text-gray-900' }}">Avec un export de stock</span>
                        <span class="block text-sm text-gray-500 mt-0.5">Confronter un inventaire scanné à la photo du stock importée dans Paramètres.</span>
                    </span>
                </a>
            </div>
        </div>

        {% if mode == 'duo' %}
            {# ─── A. Comparer deux inventaires ─── #}
            <div class="bg-white border border-gray-200 rounded-2xl p-6 shadow-sm space-y-4">
                <h2 class="font-display font-semibold text-lg text-gray-900">Comparer deux inventaires</h2>
                {% if inventories|length < 2 %}
                    <p class="text-sm text-gray-400">Au moins deux inventaires sont nécessaires pour cette concession ({{ inventories|length }} disponible(s)).</p>
                {% else %}
                    <form method="get" action="{{ path('app_compare') }}" class="space-y-3">
                        <input type="hidden" name="concession" value="{{ concession }}">
                        <input type="hidden" name="mode" value="duo">
                        <div>
                            <label class="block text-xs font-medium text-gray-500 uppercase tracking-wide mb-1.5">Inventaire A (référence)</label>
                            <select name="a" required class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-red-brand">
                                <option value="">— Choisir —</option>
                                {% for s in inventories %}
                                    <option value="{{ s.id }}" {{ s.id == idA ? 'selected' }}>{{ _self.inv_label(s) }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-500 uppercase tracking-wide mb-1.5">Inventaire B (comparé)</label>
                            <select name="b" required class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-red-brand">
                                <option value="">— Choisir —</option>
                                {% for s in inventories %}
                                    <option value="{{ s.id }}" {{ s.id == idB ? 'selected' }}>{{ _self.inv_label(s) }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <button type="submit" class="px-4 py-2 text-sm font-medium bg-red-brand text-white rounded-lg hover:bg-red-brand-dark transition-colors">Comparer</button>
                    </form>
                {% endif %}
            </div>
        {% else %}
            {# ─── B. Comparer à la photo du stock ─── #}
            <div class="bg-white border border-gray-200 rounded-2xl p-6 shadow-sm space-y-4">
                <h2 class="font-display font-semibold text-lg text-gray-900">Comparer à la photo du stock</h2>
                {% if stockSummary.count == 0 %}
                    <p class="text-sm text-gray-400">
                        Aucune photo du stock n'a été importée.
                        {% if is_granted('ROLE_ADMIN') %}
                            <a href="{{ path('app_param') }}" class="text-red-brand font-medium hover:underline">Importer la photo du stock dans Paramètres</a>.
                        {% else %}
                            Demandez à un administrateur de l'importer dans Paramètres.
                        {% endif %}
                    </p>
                {% elseif inventories|length < 1 %}
                    <p class="text-sm text-gray-400">Aucun inventaire disponible pour cette concession.</p>
                {% else %}
                    <p class="text-sm text-gray-500">
                        Photo du stock : <span class="font-medium text-gray-700">{{ stockSummary.count }} véhicule(s)</span>
                        — date du stock :
                        {% if stockSummary.dates is not empty %}
                            <span class="font-medium text-gray-700">{% for d in stockSummary.dates %}{{ d|date('d/m/Y') }}{% if not loop.last %}, {% endif %}{% endfor %}</span>
                        {% else %}
                            <span class="text-gray-400">non renseignée</span>
                        {% endif %}
                        {% if stockSummary.importedAt %} · importée le {{ stockSummary.importedAt|date('d/m/Y H:i') }}{% endif %}
                    </p>
                    <form method="get" action="{{ path('app_compare') }}" class="space-y-3">
                        <input type="hidden" name="concession" value="{{ concession }}">
                        <input type="hidden" name="mode" value="stock">
                        <div>
                            <label class="block text-xs font-medium text-gray-500 uppercase tracking-wide mb-1.5">Inventaire scanné</label>
                            <select name="id" required class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-red-brand">
                                <option value="">— Choisir —</option>
                                {% for s in inventories %}
                                    <option value="{{ s.id }}" {{ s.id == stockId ? 'selected' }}>{{ _self.inv_label(s) }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="max-w-[200px]">
                            <label class="block text-xs font-medium text-gray-500 uppercase tracking-wide mb-1.5">Type (VN/VO)</label>
                            <select name="vnvo" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-red-brand">
                                <option value="" {{ currentVnVo is empty ? 'selected' }}>Tous</option>
                                <option value="VN" {{ currentVnVo == 'VN' ? 'selected' }}>VN (neuf)</option>
                                <option value="VO" {{ currentVnVo == 'VO' ? 'selected' }}>VO (occasion)</option>
                            </select>
                        </div>
                        <button type="submit" class="px-4 py-2 text-sm font-medium bg-red-brand text-white rounded-lg hover:bg-red-brand-dark transition-colors">Confronter au stock</button>
                    </form>
                {% endif %}
            </div>
        {% endif %}
    {% endif %}

    {# ─── Résultat : comparaison de deux inventaires ─── #}
    {% if diff is not null and sessionA and sessionB %}
        <div class="flex flex-wrap items-center justify-between gap-3">
            <div class="flex flex-wrap gap-2 text-sm">
                <span class="inline-flex items-center px-3 py-1 rounded-lg bg-green-50 text-green-700 border border-green-200 font-medium">{{ diff.added|length }} ajout(s)</span>
                <span class="inline-flex items-center px-3 py-1 rounded-lg bg-red-50 text-red-700 border border-red-200 font-medium">{{ diff.removed|length }} suppression(s)</span>
                <span class="inline-flex items-center px-3 py-1 rounded-lg bg-gray-100 text-gray-600 border border-gray-200 font-medium">{{ diff.unchanged|length }} inchangé(s)</span>
            </div>
            <a href="{{ path('app_compare_export', {a: idA, b: idB}) }}"
               class="px-4 py-2 text-sm font-medium bg-red-brand text-white rounded-lg hover:bg-red-brand-dark transition-colors">Exporter en Excel</a>
        </div>

        <div class="bg-white border border-gray-200 rounded-2xl shadow-sm overflow-hidden">
            <table class="w-full text-sm">
                <thead class="bg-gray-50 text-gray-500 text-xs uppercase tracking-wide">
                    <tr>
                        <th class="text-left px-4 py-2.5 font-medium">État</th>
                        <th class="text-left px-4 py-2.5 font-medium">Plaque</th>
                        <th class="text-left px-4 py-2.5 font-medium">VIN</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    {% for r in diff.added %}
                        <tr class="bg-green-50/40">
                            <td class="px-4 py-2"><span class="inline-flex items-center gap-1 text-green-700 font-medium">+ Ajouté</span></td>
                            <td class="px-4 py-2 font-mono">{{ comparator.plate(r) }}</td>
                            <td class="px-4 py-2 font-mono text-xs text-gray-600">{{ comparator.vin(r) }}</td>
                        </tr>
                    {% endfor %}
                    {% for r in diff.removed %}
                        <tr class="bg-red-50/40">
                            <td class="px-4 py-2"><span class="inline-flex items-center gap-1 text-red-700 font-medium">− Supprimé</span></td>
                            <td class="px-4 py-2 font-mono">{{ comparator.plate(r) }}</td>
                            <td class="px-4 py-2 font-mono text-xs text-gray-600">{{ comparator.vin(r) }}</td>
                        </tr>
                    {% endfor %}
                    {% for r in diff.unchanged %}
                        <tr>
                            <td class="px-4 py-2"><span class="text-gray-500">Inchangé</span></td>
                            <td class="px-4 py-2 font-mono">{{ comparator.plate(r) }}</td>
                            <td class="px-4 py-2 font-mono text-xs text-gray-600">{{ comparator.vin(r) }}</td>
                        </tr>
                    {% endfor %}
                    {% if diff.added|length == 0 and diff.removed|length == 0 and diff.unchanged|length == 0 %}
                        <tr><td colspan="3" class="px-4 py-8 text-center text-gray-400">Aucun véhicule identifiable (VIN/plaque) dans ces inventaires.</td></tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
    {% endif %}

    {# ─── Résultat : comparaison au stock ─── #}
    {% if stockDiff is not null and stockSession %}
        <div class="flex flex-wrap items-center justify-between gap-3">
            <div class="flex flex-wrap gap-2 text-sm">
                <span class="inline-flex items-center px-3 py-1 rounded-lg bg-red-50 text-red-700 border border-red-200 font-medium">{{ stockDiff.missing|length }} manquant(s) au scan</span>
                <span class="inline-flex items-center px-3 py-1 rounded-lg bg-amber-50 text-amber-700 border border-amber-200 font-medium">{{ stockDiff.extra|length }} en trop</span>
                <span class="inline-flex items-center px-3 py-1 rounded-lg bg-green-50 text-green-700 border border-green-200 font-medium">{{ stockDiff.matched|length }} concordant(s)</span>
            </div>
            <div class="flex items-center gap-2">
                <a href="{{ path('app_compare_stock_export', {id: stockSession.id, vnvo: currentVnVo, format: 'xlsx'}) }}" class="px-4 py-2 text-sm font-medium bg-red-brand text-white rounded-lg hover:bg-red-brand-dark transition-colors">Exporter en Excel</a>
                <a href="{{ path('app_compare_stock_export', {id: stockSession.id, vnvo: currentVnVo, format: 'pdf'}) }}" class="px-4 py-2 text-sm font-medium text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-100 transition-colors">Exporter en PDF</a>
            </div>
        </div>
        <p class="text-sm text-gray-500">Inventaire : <span class="font-medium text-gray-700">{{ stockSession.label }}</span> — {{ stockSession.createdAt|date('d/m/Y H:i') }} · Concession : <span class="font-medium text-gray-700">{{ stockSession.concessions|concession_names|join(', ')|default('-') }}</span> · Type : <span class="font-medium text-gray-700">{{ currentVnVo|default('Tous') }}</span> · Date du stock : <span class="font-medium text-gray-700">{{ stockDates|join(', ')|default('non renseignée') }}</span></p>

        <div class="bg-white border border-gray-200 rounded-2xl shadow-sm overflow-hidden">
            <table class="w-full text-sm">
                <thead class="bg-gray-50 text-gray-500 text-xs uppercase tracking-wide">
                    <tr>
                        <th class="text-left px-4 py-2.5 font-medium">État</th>
                        <th class="text-left px-4 py-2.5 font-medium">Plaque</th>
                        <th class="text-left px-4 py-2.5 font-medium">VIN</th>
                        <th class="text-left px-4 py-2.5 font-medium">Type</th>
                        <th class="text-left px-4 py-2.5 font-medium">Localisation</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    {% for r in stockDiff.missing %}
                        <tr class="bg-red-50/40">
                            <td class="px-4 py-2"><span class="text-red-700 font-medium">Manquant au scan</span></td>
                            <td class="px-4 py-2 font-mono">{{ comparator.plate(r) }}</td>
                            <td class="px-4 py-2 font-mono text-xs text-gray-600">{{ comparator.vin(r) }}</td>
                            <td class="px-4 py-2 text-gray-600">{{ r.type ?? '' }}</td>
                            <td class="px-4 py-2 text-gray-600">{{ r.localisation ?? '' }}</td>
                        </tr>
                    {% endfor %}
                    {% for r in stockDiff.extra %}
                        <tr class="bg-amber-50/40">
                            <td class="px-4 py-2"><span class="text-amber-700 font-medium">En trop</span></td>
                            <td class="px-4 py-2 font-mono">{{ comparator.plate(r) }}</td>
                            <td class="px-4 py-2 font-mono text-xs text-gray-600">{{ comparator.vin(r) }}</td>
                            <td class="px-4 py-2 text-gray-600">{{ r.type ?? '' }}</td>
                            <td class="px-4 py-2 text-gray-600">{{ r.localisation ?? '' }}</td>
                        </tr>
                    {% endfor %}
                    {% for r in stockDiff.matched %}
                        <tr>
                            <td class="px-4 py-2"><span class="text-green-700">Concordant</span></td>
                            <td class="px-4 py-2 font-mono">{{ comparator.plate(r) }}</td>
                            <td class="px-4 py-2 font-mono text-xs text-gray-600">{{ comparator.vin(r) }}</td>
                            <td class="px-4 py-2 text-gray-600">{{ r.type ?? '' }}</td>
                            <td class="px-4 py-2 text-gray-600">{{ r.localisation ?? '' }}</td>
                        </tr>
                    {% endfor %}
                    {% if stockDiff.missing|length == 0 and stockDiff.extra|length == 0 and stockDiff.matched|length == 0 %}
                        <tr><td colspan="5" class="px-4 py-8 text-center text-gray-400">Aucun véhicule identifiable dans le stock ou l'inventaire.</td></tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
    {% endif %}
</div>
{% endblock %}
