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

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

{% block content %}
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-10 space-y-8" data-controller="scan" data-scan-s3-value="{{ s3Storage ? '1' : '0' }}">
    <div>
        <h1 class="font-display font-bold text-3xl text-gray-900 mb-2">Scanner des véhicules</h1>
        <p class="text-gray-500 text-sm">
            Pour chaque véhicule : prenez d'abord le <span class="text-gray-700 font-medium">VIN</span> (obligatoire),
            puis éventuellement la <span class="text-gray-700">plaque</span>. Le type de chaque photo (VIN ou plaque)
            est <span class="text-gray-700">détecté automatiquement</span>. Les photos sont traitées dans l'ordre de leur nom.
        </p>
    </div>

    {# ─── Concessions de cet inventaire ─── #}
    {# Replié par défaut : avec un grand référentiel (centaines de concessions), un picker
       ouvert déroulait une très longue liste interne et la page « défilait à l'infini ». #}
    <div data-scan-target="concessionSection">
        {{ include('partials/_concession_picker_inline.html.twig', {
            concessions: concessions,
            selectedConcessions: selectedConcessions,
            pickerOpen: false,
            pickerTitle: 'Concession(s) à scanner :',
            pickerSummary: selectedConcessions ? selectedConcessions|concession_names|join(' / ') : 'à choisir',
            pickerActionLabel: 'Choisir',
        }) }}
    </div>

    {# ─── Type d'inventaire (VN / VO / VN & VO) — obligatoire ─── #}
    <div data-scan-target="typeSection" class="space-y-2">
        <label class="block text-sm font-medium text-gray-700">Type d'inventaire <span class="text-red-brand font-normal">(obligatoire)</span></label>
        <div class="flex flex-wrap gap-3">
            <label class="flex items-center gap-2 px-4 py-2.5 bg-white border border-gray-300 rounded-xl cursor-pointer hover:border-red-brand transition-colors has-[:checked]:border-red-brand has-[:checked]:bg-blue-50/60">
                <input type="radio" name="scanType" value="VN" class="w-4 h-4 text-red-brand focus:ring-red-brand">
                <span class="text-sm font-medium text-gray-800">VN <span class="text-gray-500 font-normal">(Véhicules neufs)</span></span>
            </label>
            <label class="flex items-center gap-2 px-4 py-2.5 bg-white border border-gray-300 rounded-xl cursor-pointer hover:border-red-brand transition-colors has-[:checked]:border-red-brand has-[:checked]:bg-blue-50/60">
                <input type="radio" name="scanType" value="VO" class="w-4 h-4 text-red-brand focus:ring-red-brand">
                <span class="text-sm font-medium text-gray-800">VO <span class="text-gray-500 font-normal">(Véhicules d'occasion)</span></span>
            </label>
            <label class="flex items-center gap-2 px-4 py-2.5 bg-white border border-gray-300 rounded-xl cursor-pointer hover:border-red-brand transition-colors has-[:checked]:border-red-brand has-[:checked]:bg-blue-50/60">
                <input type="radio" name="scanType" value="VNVO" class="w-4 h-4 text-red-brand focus:ring-red-brand">
                <span class="text-sm font-medium text-gray-800">VN &amp; VO <span class="text-gray-500 font-normal">(Véhicules neufs et d'occasions)</span></span>
            </label>
        </div>
    </div>

    {# ─── Annotation Lieu ─── #}
    <div data-scan-target="locationSection" class="space-y-2">
        <label for="locationNote" class="block text-sm font-medium text-gray-700">Lieu <span class="text-red-brand font-normal">(obligatoire)</span></label>
        <input id="locationNote" type="text" maxlength="255" data-scan-target="locationNote"
               placeholder="Ex : Parking nord, Atelier 2…"
               class="w-full px-4 py-2.5 bg-white border border-gray-300 rounded-xl text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-red-brand focus:border-transparent text-sm">
        <p class="text-xs text-gray-400">Cette note apparaîtra dans l'export Excel et dans la liste des inventaires.</p>
    </div>

    {# ─── Signature de l'opérateur (obligatoire, apposée au lancement du scan) ─── #}
    <div data-scan-target="signatureSection" class="space-y-2">
        <label class="block text-sm font-medium text-gray-700">Signature <span class="text-red-brand font-normal">(obligatoire)</span></label>
        <div data-controller="signature" class="space-y-2">
            <div class="relative">
                <canvas data-signature-target="canvas"
                        data-action="pointerdown->signature#start pointermove->signature#move pointerup->signature#end pointerleave->signature#end pointercancel->signature#end"
                        class="w-full h-44 bg-white border border-gray-300 rounded-xl cursor-crosshair touch-none"></canvas>
                <span data-signature-target="placeholder"
                      class="pointer-events-none absolute inset-0 flex items-center justify-center text-gray-400 text-sm select-none">
                    Signez ici avec la souris ou le doigt
                </span>
            </div>
            <div class="flex items-center justify-between">
                <p class="text-xs text-gray-400">La signature et sa date figureront à la fin du rapport PDF par photo.</p>
                <button type="button" data-action="signature#clear"
                        class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-600 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="M16 15v-1a4 4 0 00-4-4H8m0 0l3 3m-3-3l3-3m9 14a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                    Recommencer
                </button>
            </div>
        </div>
    </div>

    {# ─── Zone d'upload ─── #}
    <div data-scan-target="dropzoneSection" class="space-y-3">
        <label data-scan-target="dropzone"
               data-action="dragover->scan#dragOver dragleave->scan#dragLeave drop->scan#drop"
               class="relative flex flex-col items-center justify-center w-full min-h-[220px] rounded-2xl border-2 border-dashed cursor-pointer transition-all duration-200 group border-gray-300 bg-gray-50 hover:border-red-brand hover:bg-gray-100">
            {# accept = EXTENSIONS uniquement (pas de type MIME image/*) : sur iOS, déclarer
               des types image fait apparaître « Prendre une photo » dans le menu natif. En se
               limitant aux extensions, iOS ne propose plus la caméra (seulement Photothèque /
               Parcourir). La validation réelle du type reste faite par isValidType() côté JS. #}
            <input type="file" multiple accept=".jpg,.jpeg,.png,.heic"
                   data-scan-target="fileInput" data-action="scan#onFileInput"
                   class="absolute inset-0 opacity-0 cursor-pointer" aria-label="Sélectionner des photos">
            <div class="w-16 h-16 rounded-2xl flex items-center justify-center mb-4 bg-gray-200 group-hover:bg-gray-300 transition-colors">
                <svg class="w-8 h-8 text-gray-400 group-hover:text-gray-600 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                    <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>
            </div>
            <div class="text-center px-6">
                <p class="text-gray-900 font-semibold text-base mb-1">Glisser-déposer vos photos</p>
                <p class="text-gray-500 text-sm">ou <span class="text-red-brand underline underline-offset-2">parcourir</span> vos fichiers</p>
                <p class="text-gray-400 text-xs mt-3">JPG · PNG · HEIC · jusqu'à 2 000 fichiers · max 15 Mo chacun</p>
            </div>
            <div data-scan-target="fileCounter" class="hidden absolute top-3 right-3 bg-gray-200 border border-gray-300 text-gray-600 text-xs px-2.5 py-1 rounded-full font-mono"></div>
        </label>
        <p data-scan-target="dropError" class="hidden text-amber-700 text-xs bg-amber-50 border border-amber-200 rounded-lg px-3 py-2"></p>
    </div>

    {# ─── File d'attente ─── #}
    <div data-scan-target="queueSection" class="hidden bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm">
        <div class="flex items-center justify-between px-4 py-3 border-b border-gray-200 bg-gray-50">
            <div class="flex items-center gap-3">
                <span class="text-sm font-medium text-gray-900" data-scan-target="queueCount"></span>
                <div class="flex gap-2" data-scan-target="queueBadges"></div>
            </div>
            <button data-action="scan#clearFiles" class="px-3 py-1.5 text-xs font-medium text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors">Tout effacer</button>
        </div>
        <ul class="max-h-64 overflow-y-auto divide-y divide-gray-100" data-scan-target="queueList"></ul>
    </div>

    {# ─── Progression ─── #}
    <div data-scan-target="progressSection" class="hidden bg-white border border-gray-200 rounded-2xl p-5 space-y-4 shadow-sm">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-2">
                <div class="w-2 h-2 rounded-full bg-red-brand animate-pulse"></div>
                <span class="text-sm font-medium text-gray-900">Traitement en cours…</span>
            </div>
            <button data-action="scan#cancel" class="px-3 py-1.5 text-xs font-medium text-red-700 border border-red-200 rounded-lg hover:bg-red-50 transition-colors">Annuler le scan</button>
        </div>
        <div>
            <div class="flex justify-between text-xs text-gray-500 mb-1.5">
                <span data-scan-target="progressLabel">0 / 0</span>
                <span data-scan-target="progressPercent">0%</span>
            </div>
            <div class="h-2 bg-gray-100 rounded-full overflow-hidden">
                <div data-scan-target="progressBar" class="h-full bg-red-brand rounded-full transition-all duration-300" style="width:0%"></div>
            </div>
        </div>
        <div class="flex items-center justify-between text-xs text-gray-400">
            <div class="flex flex-col gap-0.5 min-w-0">
                <span class="truncate max-w-xs" data-scan-target="progressFilename">Initialisation…</span>
                <span class="text-red-brand/80 font-medium" data-scan-target="progressStep"></span>
            </div>
            <div class="flex items-center gap-3 shrink-0 ml-2">
                <span data-scan-target="progressElapsed">Écoulé : 0s</span>
                <span data-scan-target="progressEta"></span>
            </div>
        </div>
    </div>

    {# ─── Actions ─── #}
    <div data-scan-target="actions" class="hidden flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
        <p class="text-xs text-gray-400" data-scan-target="vehicleCount"></p>
        <div class="flex items-center gap-3">
            <button data-action="scan#startScanAndEmail" 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 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>
                Lancer le scan et envoyer email
            </button>
        </div>
    </div>

    {# ─── Statut email ─── #}
    <div data-scan-target="emailStatus" class="hidden items-center gap-2 px-4 py-3 rounded-xl text-sm font-medium"></div>

    {# ─── Résultats ─── #}
    <div data-scan-target="resultsSection" class="hidden space-y-6">
        <div class="flex items-center justify-between">
            <div>
                <h2 class="text-xl font-display font-semibold text-gray-900">Résultats</h2>
                <p class="text-gray-500 text-sm mt-0.5" data-scan-target="resultsSubtitle"></p>
            </div>
            <button data-action="scan#reset" 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">Nouveau scan</button>
        </div>
        <div data-scan-target="resultsContent"></div>
    </div>

    {# ─── Annulé ─── #}
    <div data-scan-target="cancelledSection" class="hidden text-center py-10">
        <p class="text-gray-500 mb-4">Scan annulé.</p>
        <button data-action="scan#reset" class="px-4 py-2 text-sm font-medium text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-100 transition-colors">Recommencer</button>
    </div>

    {# ─── Aide ─── #}
    <div data-scan-target="helpBox" class="bg-gray-50 border border-gray-200 rounded-2xl p-5">
        <h3 class="text-gray-900 font-medium text-sm mb-3 flex items-center gap-2">
            <svg class="w-4 h-4 text-red-brand" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
            Comment préparer vos fichiers ?
        </h3>
        <ul class="space-y-1.5 text-gray-500 text-xs">
            <li class="flex gap-2"><span class="text-red-brand shrink-0">•</span> Pour chaque véhicule : <strong>le VIN d'abord</strong> (obligatoire), puis la plaque si besoin</li>
            <li class="flex gap-2"><span class="text-red-brand shrink-0">•</span> Nommez vos photos séquentiellement (ex : <code class="bg-gray-200 px-1 rounded">001.jpg, 002.jpg, 003.jpg…</code>) — elles sont traitées dans l'ordre du nom</li>
            <li class="flex gap-2"><span class="text-red-brand shrink-0">•</span> Le type (VIN ou plaque) est <strong>détecté automatiquement</strong> ; vous pourrez corriger chaque véhicule après le scan</li>
            <li class="flex gap-2"><span class="text-red-brand shrink-0">•</span> Formats acceptés : JPG, PNG, HEIC (photos iPhone) · Max 15 Mo par fichier</li>
            <li class="flex gap-2"><span class="text-red-brand shrink-0">•</span> Jusqu'à 2 000 photos par session</li>
        </ul>
    </div>
</div>
{% endblock %}
