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

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

{% block content %}
<div class="max-w-4xl 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-2">Aide &amp; documentation</h1>
        <p class="text-gray-500 text-sm">
            Guide d'utilisation de l'application <strong class="text-gray-700">Scan Inventaire</strong> :
            comment scanner, corriger, comparer et exporter vos inventaires de véhicules, et qui peut faire quoi.
        </p>
    </div>

    {# ─── Sommaire ─── #}
    <nav class="bg-white border border-gray-200 rounded-2xl shadow-sm p-5 text-sm">
        <p class="font-display font-semibold text-gray-900 mb-2">Sommaire</p>
        <ul class="grid sm:grid-cols-2 gap-x-6 gap-y-1.5 text-blue-600">
            <li><a class="hover:underline" href="#connexion">1. Connexion</a></li>
            <li><a class="hover:underline" href="#scanner">2. Scanner un inventaire</a></li>
            <li><a class="hover:underline" href="#corriger">3. Vérifier &amp; corriger</a></li>
            <li><a class="hover:underline" href="#statuts">4. Statuts &amp; validation</a></li>
            <li><a class="hover:underline" href="#comparer">5. Comparer au stock</a></li>
            <li><a class="hover:underline" href="#exports">6. Exports &amp; email</a></li>
            <li><a class="hover:underline" href="#droits">7. Droits des utilisateurs</a></li>
            <li><a class="hover:underline" href="#contact">8. Contact</a></li>
        </ul>
    </nav>

    {# ─── 1. Connexion ─── #}
    <section id="connexion" class="bg-white border border-gray-200 rounded-2xl shadow-sm p-6 space-y-3">
        <h2 class="font-display font-semibold text-xl text-gray-900">1. Connexion</h2>
        <p class="text-sm text-gray-600">
            La connexion se fait <strong>par email</strong>, sans mot de passe :
        </p>
        <ol class="space-y-1.5 text-sm text-gray-600">
            <li class="flex gap-2"><span class="text-red-brand shrink-0 font-semibold">1.</span> Saisissez votre adresse professionnelle (domaines <code class="bg-gray-100 px-1 rounded">@emilfrey.fr</code> et <code class="bg-gray-100 px-1 rounded">@autosphere.fr</code>).</li>
            <li class="flex gap-2"><span class="text-red-brand shrink-0 font-semibold">2.</span> Vous recevez un <strong>code à 6 chiffres</strong> par email (valable 15 minutes).</li>
            <li class="flex gap-2"><span class="text-red-brand shrink-0 font-semibold">3.</span> Saisissez le code pour accéder à l'application.</li>
        </ol>
        <p class="text-sm text-gray-600">
            À la première connexion, vous choisissez votre <strong>groupe</strong> (voir §7) et vos <strong>concessions</strong>.
            Un administrateur valide ensuite votre accès. Vous n'êtes connecté que sur les concessions qui vous sont attribuées.
        </p>
        <p class="text-xs text-gray-400">La session se ferme automatiquement après 2 heures d'inactivité.</p>
    </section>

    {# ─── 2. Scanner ─── #}
    <section id="scanner" class="bg-white border border-gray-200 rounded-2xl shadow-sm p-6 space-y-3">
        <h2 class="font-display font-semibold text-xl text-gray-900">2. Scanner un inventaire</h2>
        <p class="text-sm text-gray-600">Depuis la page <strong>Scanner</strong> :</p>
        <ul class="space-y-1.5 text-sm text-gray-600">
            <li class="flex gap-2"><span class="text-red-brand shrink-0">•</span> Choisissez la (ou les) <strong>concession(s)</strong> concernée(s), et éventuellement un <strong>lieu</strong> (ex. « Parking nord »).</li>
            <li class="flex gap-2"><span class="text-red-brand shrink-0">•</span> Pour chaque véhicule, photographiez <strong>d'abord le VIN</strong> (obligatoire), puis la <strong>plaque</strong> si besoin.</li>
            <li class="flex gap-2"><span class="text-red-brand shrink-0">•</span> Le type de chaque photo (VIN ou plaque) est <strong>détecté automatiquement</strong> ; les photos sont traitées dans l'ordre de leur nom de fichier (ex. <code class="bg-gray-100 px-1 rounded">001.jpg, 002.jpg…</code>).</li>
            <li class="flex gap-2"><span class="text-red-brand shrink-0">•</span> La lecture des caractères (plaque / VIN) est réalisée par une <strong>intelligence artificielle</strong> (OCR). Formats acceptés : JPG, PNG, HEIC (iPhone), 15 Mo max, jusqu'à 2 000 photos.</li>
            <li class="flex gap-2"><span class="text-red-brand shrink-0">•</span> Cliquez sur <strong>« Lancer le scan »</strong> (ou « Lancer le scan et envoyer email » pour recevoir le rapport Excel).</li>
        </ul>
        <p class="text-sm text-gray-600">À la fin, le bouton <strong>« Ouvrir l'inventaire »</strong> mène à la fiche détaillée où vous pouvez vérifier et corriger.</p>
    </section>

    {# ─── 3. Corriger ─── #}
    <section id="corriger" class="bg-white border border-gray-200 rounded-2xl shadow-sm p-6 space-y-3">
        <h2 class="font-display font-semibold text-xl text-gray-900">3. Vérifier &amp; corriger</h2>
        <p class="text-sm text-gray-600">
            Sur la fiche d'un inventaire, chaque <strong>véhicule en erreur</strong> est mis en évidence :
            la plaque ou le VIN concerné est <span class="bg-yellow-200 px-1 rounded font-mono">surligné en jaune</span>,
            avec un liseré et un badge <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-yellow-100 text-yellow-800 border border-yellow-300 normal-case">à corriger</span>.
        </p>
        <p class="text-sm text-gray-600">Une valeur est signalée « en erreur » quand :</p>
        <ul class="space-y-1.5 text-sm text-gray-600">
            <li class="flex gap-2"><span class="text-red-brand shrink-0">•</span> le <strong>VIN est manquant</strong> (obligatoire), illisible, ou n'a pas 17 caractères ;</li>
            <li class="flex gap-2"><span class="text-red-brand shrink-0">•</span> la <strong>plaque</strong> a un format inhabituel, ou la lecture est peu fiable.</li>
        </ul>
        <p class="text-sm text-gray-600">Tant que l'inventaire est <strong>« En cours »</strong>, vous pouvez :</p>
        <ul class="space-y-1.5 text-sm text-gray-600">
            <li class="flex gap-2"><span class="text-red-brand shrink-0">•</span> <strong>Corriger</strong> le texte d'une plaque ou d'un VIN à la main (bouton « Corriger » sous la photo) ;</li>
            <li class="flex gap-2"><span class="text-red-brand shrink-0">•</span> <strong>Remplacer / ajouter / supprimer</strong> une photo (l'OCR est relancé), <strong>déplacer</strong> une photo vers un autre véhicule ;</li>
            <li class="flex gap-2"><span class="text-red-brand shrink-0">•</span> Ajouter ou supprimer un véhicule, joindre d'<strong>autres documents</strong>, modifier les concessions de l'inventaire.</li>
        </ul>
    </section>

    {# ─── 4. Statuts ─── #}
    <section id="statuts" class="bg-white border border-gray-200 rounded-2xl shadow-sm p-6 space-y-3">
        <h2 class="font-display font-semibold text-xl text-gray-900">4. Statuts &amp; validation</h2>
        <p class="text-sm text-gray-600">Un inventaire passe par les statuts suivants :</p>
        <div class="space-y-2 text-sm">
            <p class="flex items-start gap-2"><span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium border bg-blue-50 text-blue-700 border-blue-200 shrink-0">En cours</span> <span class="text-gray-600">Brouillon modifiable. Les nouveaux scans démarrent dans ce statut.</span></p>
            <p class="flex items-start gap-2"><span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium border bg-amber-50 text-amber-700 border-amber-200 shrink-0">À valider</span> <span class="text-gray-600">Soumis à la relecture (chaque véhicule doit avoir un VIN). <strong>Irréversible</strong> : une fois soumis, seul un administrateur peut rouvrir l'inventaire.</span></p>
            <p class="flex items-start gap-2"><span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium border bg-green-50 text-green-700 border-green-200 shrink-0">Validé</span> <span class="text-gray-600">Inventaire confirmé. L'export PDF n'est possible qu'à ce stade.</span></p>
            <p class="flex items-start gap-2"><span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium border bg-gray-100 text-gray-600 border-gray-200 shrink-0">Annulé</span> <span class="text-gray-600">Inventaire écarté.</span></p>
        </div>
        <p class="text-sm text-gray-600">
            Le bouton <strong>« Rouvrir »</strong> ramène un inventaire en « En cours » pour le modifier à nouveau : il est <strong>réservé à l'administrateur</strong> (passer un inventaire à « À valider » ou « Validé » est définitif pour les autres rôles).
            Le changement de statut est par ailleurs réservé aux Superviseurs, Audit et Administrateurs (voir §7).
            Toute action sensible est tracée dans le <strong>Journal</strong>.
        </p>
    </section>

    {# ─── 5. Comparer ─── #}
    <section id="comparer" class="bg-white border border-gray-200 rounded-2xl shadow-sm p-6 space-y-3">
        <h2 class="font-display font-semibold text-xl text-gray-900">5. Comparer au stock</h2>
        <p class="text-sm text-gray-600">Depuis la page <strong>Comparer</strong>, deux modes :</p>
        <ul class="space-y-1.5 text-sm text-gray-600">
            <li class="flex gap-2"><span class="text-red-brand shrink-0">•</span> <strong>Entre deux inventaires</strong> : voir ce qui a été ajouté / retiré entre deux scans.</li>
            <li class="flex gap-2"><span class="text-red-brand shrink-0">•</span> <strong>Avec l'export de stock</strong> : confronter un inventaire scanné à la « photo du stock » du DMS, pour repérer les véhicules <strong>manquants</strong>, <strong>en trop</strong> et <strong>présents</strong> des deux côtés.</li>
        </ul>
        <p class="text-sm text-gray-600">
            La photo du stock et le référentiel des concessions sont importés une fois par un administrateur dans
            <strong>Paramètres</strong> (fichiers Excel <code class="bg-gray-100 px-1 rounded">.xlsx</code>). Le résultat est exportable en Excel et PDF.
        </p>
    </section>

    {# ─── 6. Exports ─── #}
    <section id="exports" class="bg-white border border-gray-200 rounded-2xl shadow-sm p-6 space-y-3">
        <h2 class="font-display font-semibold text-xl text-gray-900">6. Exports &amp; email</h2>
        <ul class="space-y-1.5 text-sm text-gray-600">
            <li class="flex gap-2"><span class="text-red-brand shrink-0">•</span> <strong>Excel (.xlsx)</strong> : disponible à tout moment. Les plaques / VIN <strong>en erreur</strong> y sont <span class="bg-yellow-200 px-1 rounded">surlignés en jaune</span>.</li>
            <li class="flex gap-2"><span class="text-red-brand shrink-0">•</span> <strong>PDF + photos</strong> : réservé aux inventaires <strong>Validés</strong>. Génère un rapport avec une ligne par véhicule (photos plaque &amp; VIN, immatriculation, VIN, heure, commentaire).</li>
            <li class="flex gap-2"><span class="text-red-brand shrink-0">•</span> <strong>Email</strong> : le rapport Excel peut être envoyé directement depuis la page Scanner.</li>
        </ul>
    </section>

    {# ─── 7. Droits ─── #}
    <section id="droits" class="bg-white border border-gray-200 rounded-2xl shadow-sm p-6 space-y-4">
        <h2 class="font-display font-semibold text-xl text-gray-900">7. Droits des utilisateurs</h2>
        <p class="text-sm text-gray-600">
            Chaque utilisateur appartient à un <strong>groupe</strong> qui définit ce qu'il peut faire.
            Les Superviseurs, Opérateurs et Lecteurs ne voient que les inventaires de <strong>leurs concessions</strong> ;
            les Administrateurs et l'Audit voient tout.
        </p>
        <div class="space-y-3">
            <div class="flex flex-col sm:flex-row sm:items-start gap-1 sm:gap-3">
                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium border bg-purple-50 text-purple-700 border-purple-200 shrink-0 sm:w-40">Administrateur</span>
                <span class="text-sm text-gray-600">Accès total : scanner, valider, <strong>supprimer</strong>, <strong>Paramètres</strong> (référentiel concessions, photo du stock), <strong>validation des comptes</strong>, Journal d'audit.</span>
            </div>
            <div class="flex flex-col sm:flex-row sm:items-start gap-1 sm:gap-3">
                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium border bg-purple-50 text-purple-700 border-purple-200 shrink-0 sm:w-40">Audit</span>
                <span class="text-sm text-gray-600">Comme l'administrateur pour la consultation, le changement de statut, la validation des comptes et le Journal — mais <strong>sans suppression ni Paramètres</strong>, et <strong>sans rouvrir</strong> un inventaire (réservé à l'administrateur).</span>
            </div>
            <div class="flex flex-col sm:flex-row sm:items-start gap-1 sm:gap-3">
                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium border bg-blue-50 text-blue-700 border-blue-200 shrink-0 sm:w-40">Superviseur</span>
                <span class="text-sm text-gray-600">Sur ses concessions : scanner, corriger, et <strong>changer les statuts</strong> (valider / annuler). La <strong>réouverture</strong> d'un inventaire est réservée à l'administrateur.</span>
            </div>
            <div class="flex flex-col sm:flex-row sm:items-start gap-1 sm:gap-3">
                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium border bg-blue-50 text-blue-700 border-blue-200 shrink-0 sm:w-40">Opérateur saisie</span>
                <span class="text-sm text-gray-600">Sur ses concessions : <strong>créer</strong> des inventaires, les corriger, les soumettre <strong>« À valider »</strong> et les archiver. Ne valide pas lui-même.</span>
            </div>
            <div class="flex flex-col sm:flex-row sm:items-start gap-1 sm:gap-3">
                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium border bg-gray-100 text-gray-600 border-gray-200 shrink-0 sm:w-40">Lecteur</span>
                <span class="text-sm text-gray-600"><strong>Lecture seule</strong> : consulte les inventaires et statistiques de ses concessions. Ne crée, ne modifie et ne supprime rien.</span>
            </div>
        </div>
        <p class="text-xs text-gray-400">Le changement de groupe ou de concessions d'un compte est effectué par un Administrateur ou l'Audit, depuis la page Utilisateurs.</p>
    </section>

    {# ─── 8. Contact ─── #}
    <section id="contact" class="bg-blue-50 border border-blue-200 rounded-2xl p-6 space-y-2">
        <h2 class="font-display font-semibold text-xl text-gray-900">8. Besoin d'aide ?</h2>
        <p class="text-sm text-gray-700">
            Pour toute question, demande d'accès, ajout de concession ou anomalie, contactez :
        </p>
        <a href="mailto:{{ helpEmail }}?subject=Aide%20Scan%20Inventaire" class="inline-flex items-center gap-2 text-sm font-medium text-red-brand hover:underline">
            <svg class="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
            {{ helpEmail }}
        </a>
    </section>

</div>
{% endblock %}
