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

{% block title %}Paramètres — Scan Inventaire{% endblock %}

{% block content %}
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-10 space-y-8">
    <div>
        <h1 class="font-display font-bold text-3xl text-gray-900 mb-2">Paramètres</h1>
        <p class="text-gray-500 text-sm">Administration de la liste des concessions sélectionnables et de la photo du stock.</p>
    </div>

    {# État courant #}
    <div class="bg-white border border-gray-200 rounded-2xl p-5 shadow-sm">
        <div class="flex items-center justify-between gap-4 flex-wrap">
            <div>
                <p class="text-sm font-medium text-gray-900">Référentiel actif</p>
                <p class="text-xs text-gray-500 mt-0.5">
                    {% if count > 0 %}
                        <span class="font-mono">{{ count }}</span> concession(s) (ID + nom)
                    {% else %}
                        <span class="text-amber-600 font-medium">Aucun référentiel importé — les sélecteurs de concessions sont vides.</span>
                    {% endif %}
                </p>
            </div>
            <div class="flex items-center gap-2">
                <a href="{{ path('app_param_export') }}" class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-100 transition-colors">
                    <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
                    Exporter la liste
                </a>
            </div>
        </div>
        {% if sample is not empty %}
            <div class="mt-4 flex flex-wrap gap-1.5">
                {% for name in sample %}
                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-600 border border-gray-200">{{ name }}</span>
                {% endfor %}
                {% if count > sample|length %}<span class="text-xs text-gray-400 self-center">+ {{ count - sample|length }} autres…</span>{% endif %}
            </div>
        {% endif %}
    </div>

    {# Import Excel #}
    <div class="bg-white border border-gray-200 rounded-2xl p-6 shadow-sm">
        <h2 class="text-lg font-display font-semibold text-gray-900 mb-1">Importer depuis un fichier</h2>
        <p class="text-gray-500 text-sm mb-2">
            Le fichier <strong>.xlsx</strong> ou <strong>.csv</strong> doit contenir <strong>une concession par ligne</strong> :
        </p>
        <p class="text-gray-600 text-sm mb-2 font-mono">colonne A = ID_CONCESSION · colonne B = NOM</p>
        <p class="text-gray-500 text-sm mb-5">
            L'ID est l'identifiant stable du DMS : en cas de renommage d'une concession, réimportez la liste
            avec le même ID et le nouveau nom — il sera mis à jour partout (inventaires, utilisateurs, stock).
            L'import remplace entièrement le référentiel, puis convertit automatiquement les données
            existantes encore stockées par nom vers les IDs.
        </p>

        <form method="post" action="{{ path('app_param_import') }}" enctype="multipart/form-data" class="space-y-4"
              data-controller="import-progress"
              data-action="submit->import-progress#submit"
              data-import-progress-progress-url-value="{{ path('app_param_import_progress', {token: 'PROGRESS-TOKEN'}) }}">
            <input type="hidden" name="_token" value="{{ csrf_token('param_concessions') }}">

            <div>
                <label for="file" class="block text-sm font-medium text-gray-700 mb-2">Fichier (.xlsx ou .csv)</label>
                <input id="file" type="file" name="file" accept=".xlsx,.csv" required
                       class="block w-full text-sm text-gray-600 file:mr-4 file:py-2.5 file:px-4 file:rounded-xl file:border-0 file:text-sm file:font-medium file:bg-red-brand file:text-white hover:file:bg-red-brand-dark file:cursor-pointer border border-gray-300 rounded-xl cursor-pointer">
            </div>

            <label class="flex items-center gap-2.5 text-sm text-gray-700 cursor-pointer">
                <input type="checkbox" name="skip_header" value="1" class="w-4 h-4 rounded border-gray-300 text-red-brand focus:ring-red-brand">
                Ignorer la première ligne (en-tête de colonne)
            </label>

            <div data-import-progress-target="panel" class="hidden space-y-1.5">
                <div class="h-2 bg-gray-100 rounded-full overflow-hidden">
                    <div data-import-progress-target="bar" class="h-full bg-red-brand rounded-full transition-all duration-300" style="width: 0%"></div>
                </div>
                <p data-import-progress-target="label" class="text-xs text-gray-500"></p>
            </div>

            <button type="submit" data-import-progress-target="submit" class="inline-flex items-center gap-2 px-5 py-3 bg-red-brand text-white font-semibold rounded-xl hover:bg-red-brand-dark hover:shadow-red-glow transition-all active:scale-95 text-sm">
                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" /></svg>
                Importer la liste
            </button>
        </form>
    </div>

    {# ─── Photo du stock ─── #}
    <div>
        <h2 class="font-display font-bold text-2xl text-gray-900 mb-1">Photo du stock</h2>
        <p class="text-gray-500 text-sm">Stock théorique utilisé par la comparaison « Avec un export de stock » (page Comparer). Importé une fois, il sert à toutes les comparaisons sans re-téléverser de fichier.</p>
    </div>

    {# État courant du stock #}
    <div class="bg-white border border-gray-200 rounded-2xl p-5 shadow-sm">
        <div class="flex items-center justify-between gap-4 flex-wrap">
            <div>
                <p class="text-sm font-medium text-gray-900">Photo active</p>
                <p class="text-xs text-gray-500 mt-0.5">
                    {% if stock.count > 0 %}
                        <span class="font-mono">{{ stock.count }}</span> véhicule(s) · <span class="font-mono">{{ stock.concessions }}</span> concession(s)
                        — date du stock :
                        {% if stock.dates is not empty %}
                            <span class="text-red-brand font-medium">{% for d in stock.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 stock.importedAt %} · importée le {{ stock.importedAt|date('d/m/Y à H:i') }}{% endif %}
                    {% else %}
                        Aucune photo du stock importée.
                    {% endif %}
                </p>
            </div>
            {% if stock.count > 0 %}
                <form method="post" action="{{ path('app_param_stock_reset') }}" onsubmit="return confirm('Supprimer la photo du stock ? La comparaison au stock ne sera plus disponible.');">
                    <input type="hidden" name="_token" value="{{ csrf_token('param_stock') }}">
                    <button type="submit" class="px-3 py-1.5 text-xs font-medium text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-100 transition-colors">
                        Supprimer la photo du stock
                    </button>
                </form>
            {% endif %}
        </div>
    </div>

    {# Import du stock #}
    <div class="bg-white border border-gray-200 rounded-2xl p-6 shadow-sm">
        <h2 class="text-lg font-display font-semibold text-gray-900 mb-1">Importer la photo du stock</h2>
        <p class="text-gray-500 text-sm mb-2">
            Fichier <strong>.xlsx</strong> (un CSV peut être ré-enregistré en .xlsx depuis Excel), <strong>un véhicule par ligne</strong>,
            avec une ligne d'en-tête contenant les colonnes :
        </p>
        <p class="text-gray-600 text-sm mb-2 font-mono">ID_CONCESSION · DATE_STOCK · TYPE · IMMATRICULATION · VIN · LOCALISATION</p>
        <p class="text-gray-500 text-sm mb-5">
            Les noms de colonnes sont reconnus sans tenir compte de la casse, des accents ni des underscores.
            ID_CONCESSION = l'identifiant du référentiel ci-dessus (pas le nom).
            <strong>L'import remplace entièrement la photo actuelle.</strong>
        </p>

        <form method="post" action="{{ path('app_param_stock_import') }}" enctype="multipart/form-data" class="space-y-4"
              data-controller="import-progress"
              data-action="submit->import-progress#submit"
              data-import-progress-progress-url-value="{{ path('app_param_import_progress', {token: 'PROGRESS-TOKEN'}) }}">
            <input type="hidden" name="_token" value="{{ csrf_token('param_stock') }}">

            <div>
                <label for="stock_file" class="block text-sm font-medium text-gray-700 mb-2">Fichier (.xlsx)</label>
                <input id="stock_file" type="file" name="file" accept=".xlsx" required
                       class="block w-full text-sm text-gray-600 file:mr-4 file:py-2.5 file:px-4 file:rounded-xl file:border-0 file:text-sm file:font-medium file:bg-red-brand file:text-white hover:file:bg-red-brand-dark file:cursor-pointer border border-gray-300 rounded-xl cursor-pointer">
            </div>

            <div data-import-progress-target="panel" class="hidden space-y-1.5">
                <div class="h-2 bg-gray-100 rounded-full overflow-hidden">
                    <div data-import-progress-target="bar" class="h-full bg-red-brand rounded-full transition-all duration-300" style="width: 0%"></div>
                </div>
                <p data-import-progress-target="label" class="text-xs text-gray-500"></p>
            </div>

            <button type="submit" data-import-progress-target="submit" class="inline-flex items-center gap-2 px-5 py-3 bg-red-brand text-white font-semibold rounded-xl hover:bg-red-brand-dark hover:shadow-red-glow transition-all active:scale-95 text-sm">
                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" /></svg>
                Importer la photo du stock
            </button>
        </form>
    </div>
</div>
{% endblock %}
