@extends('admin.layout')

@section('title', __('Scanner des commandes'))

@section('content')

    <style>
        /* Faux plein ecran, et pas l'api Fullscreen : sur iOS Safari,
           requestFullscreen() n'existe pas sur un div, et la seule voie
           (video.webkitEnterFullscreen) ouvre le lecteur natif d'Apple, qui
           masquerait la croix, le compteur et le message. Un position:fixed
           se comporte pareil sur tous les telephones. */
        .scan-viseur {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 100000; /* au-dessus du 99999 du bouton « haut de page » */
            background: #000;
        }

        /* cover recadre l'image : jsQR lit le canvas, donc la trame entiere, y
           compris ce que le recadrage cache. Une etiquette au ras du bord peut
           donc etre lue avant d'etre vue — jamais l'inverse. */
        .scan-video {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .scan-surcouche {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: .5rem;
            padding: calc(.75rem + env(safe-area-inset-top, 0px)) .75rem .75rem;
            pointer-events: none; /* seuls les boutons prennent le doigt */
        }

        .scan-compteur,
        .scan-fermer {
            background: rgba(0, 0, 0, .55);
            color: #fff;
        }

        .scan-compteur {
            padding: .4rem .85rem;
            border-radius: 999px;
            font-size: .95rem;
            font-weight: 600;
        }

        /* 44 px : la cible tactile minimale, avec des gants et un telephone
           tenu d'une main. */
        .scan-fermer {
            pointer-events: auto;
            width: 44px;
            height: 44px;
            padding: 0;
            border: 0;
            border-radius: 50%;
            font-size: 1.1rem;
            line-height: 1;
        }

        .scan-toast {
            position: absolute;
            right: .75rem;
            bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
            left: .75rem;
            padding: .85rem 1rem;
            border-radius: 8px;
            background: rgba(33, 37, 41, .9);
            color: #fff;
            font-size: 1.05rem;
            text-align: center;
            opacity: 0;
            transition: opacity .2s;
            pointer-events: none; /* ne doit jamais intercepter un geste */
        }

        .scan-toast.est-visible { opacity: 1; }
        .scan-toast.est-succes  { background: rgba(25, 135, 84, .92); }
        .scan-toast.est-alerte  { background: rgba(255, 193, 7, .95); color: #000; }
        .scan-toast.est-erreur  { background: rgba(220, 53, 69, .94); }

        /* La page dessous ne doit pas defiler sous le viseur : sur Android, un
           glissement fait remonter le contenu derriere l'image. */
        body.scan-plein { overflow: hidden; }
    </style>

    <div class="pagetitle">
        <h1>@yield('title')</h1>
    </div><!-- End Page Title -->

    <section class="section contact">
        <div class="row gy-4">
            <div class="col-xl-12">
                <div class="card p-4">

                    @if (session('success'))
                        <div class="alert alert-success">{{ session('success') }}</div>
                    @endif
                    @if (session('error'))
                        <div class="alert alert-danger">{{ session('error') }}</div>
                    @endif

                    {{-- La caméra ne démarre pas toute seule : iOS Safari exige un
                         geste de l'utilisateur, et démarrer sans qu'on l'ait demandé
                         allumerait l'objectif d'un téléphone posé sur un établi. --}}
                    <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 pb-3">
                        <span class="text-muted">
                            {{ __('Visez le QR code de la fiche. Chaque commande lue s’ajoute à la liste.') }}
                        </span>

                        {{-- flex-wrap : sur un telephone tenu en main, les trois
                             boutons ne tiennent pas sur une ligne et « La liste »
                             sortait de l'ecran. --}}
                        <div class="d-flex flex-wrap gap-2">
                            <button type="button" id="scan-demarrer" class="btn btn-primary">
                                <i class="bi bi-camera-video"></i> {{ __('Démarrer la caméra') }}
                            </button>
                            {{-- Couvert par le viseur pendant le scan : c'est la croix
                                 qui sert. Il reste la comme secours, pour le navigateur
                                 assez vieux pour rater le plein ecran et laisser la
                                 camera allumee sans moyen de la couper. --}}
                            <button type="button" id="scan-arreter" class="btn btn-outline-secondary d-none">
                                <i class="bi bi-stop-circle"></i> {{ __('Arrêter') }}
                            </button>
                            <a href="{{ route('scans.index') }}" class="btn btn-outline-secondary">
                                {{ __('La liste') }}
                            </a>
                        </div>
                    </div>

                    {{-- Les refus de caméra tombent avant l'ouverture du viseur :
                         ils n'ont pas de plein écran où s'afficher, et restent donc
                         dans la page. --}}
                    <div id="scan-message" class="alert d-none" role="status"></div>

                    {{-- Le viseur prend tout l'écran : à bout de bras devant un
                         portail, viser compte plus que lire la liste, qui n'était de
                         toute façon lisible qu'en baissant le téléphone. Le compteur
                         et le message en surimpression remplacent la ligne qui
                         s'ajoutait sous le viseur. --}}
                    <div id="scan-viseur" class="scan-viseur d-none">
                        <video id="scan-video" class="scan-video" playsinline muted></video>
                        <canvas id="scan-canvas" class="d-none"></canvas>

                        <div class="scan-surcouche">
                            <span id="scan-compteur" class="scan-compteur"></span>
                            <button type="button" id="scan-fermer" class="scan-fermer"
                                aria-label="{{ __('Fermer') }}" title="{{ __('Fermer') }}">
                                <i class="bi bi-x-lg"></i>
                            </button>
                        </div>

                        <div id="scan-toast" class="scan-toast" role="status" aria-live="polite"></div>
                    </div>

                    @include('admin.scans._liste')

                </div>
            </div>
        </div>
    </section>

@endsection

@push('scripts')
    <script src="{{ asset('assets/vendor/jsqr/jsQR.min.js') }}"></script>
    <script>
        (function () {
            'use strict';

            var video = document.getElementById('scan-video');
            var canvas = document.getElementById('scan-canvas');
            var viseur = document.getElementById('scan-viseur');
            var message = document.getElementById('scan-message');
            var toast = document.getElementById('scan-toast');
            var compteur = document.getElementById('scan-compteur');
            var boutonDemarrer = document.getElementById('scan-demarrer');
            var boutonArreter = document.getElementById('scan-arreter');
            var boutonFermer = document.getElementById('scan-fermer');
            var corps = document.getElementById('scans-lignes');

            var contexte = canvas.getContext('2d', { willReadFrequently: true });
            var flux = null;
            var boucle = null;
            var effacement = null;

            // Le moteur de decodage d'Android, quand le navigateur l'expose.
            // Null tant qu'on ne sait pas, et pour toujours s'il n'est pas la :
            // c'est jsQR qui prend le relais.
            var detecteur = null;
            var enCours = false;

            var dernierCode = null;
            var dernierMoment = 0;
            var DELAI_MEME_CODE = 2500;

            // Une confirmation se lit d'un coup d'oeil ; un refus ou une panne
            // reseau demandent qu'on s'arrete, donc qu'on ait le temps de lire.
            var DUREE_TOAST = 2000;
            var DUREE_TOAST_ALERTE = 4000;

            var urlJson = @js(route('scans.ajouter-json'));
            var urlRetirer = @js(route('scans.retirer', ['commande' => '__ID__']));
            var jeton = @js(csrf_token());

            var textes = {
                indisponible: @js(__('Ce navigateur ne donne pas accès à la caméra. Utilisez l’appareil photo du téléphone : le QR ouvre directement la page.')),
                nonSecurise: @js(__('La caméra n’est accessible qu’en HTTPS.')),
                refus: @js(__('Accès à la caméra refusé.')),
                erreur: @js(__('La caméra n’a pas pu démarrer.')),
                reseau: @js(__('Le serveur n’a pas répondu, la commande n’est pas enregistrée.')),
                retirer: @js(__('Retirer de la liste')),
                compteur: @js(__(':n scannée(s)')),
            };

            var classesToast = {
                success: 'est-succes',
                warning: 'est-alerte',
                danger: 'est-erreur',
            };

            function viseurOuvert() {
                return !viseur.classList.contains('d-none');
            }

            // Le meme appel sert avant et pendant le scan : en plein ecran la
            // page est cachee, un message pose dedans ne serait jamais lu.
            function afficher(texte, type) {
                if (!viseurOuvert()) {
                    message.textContent = texte;
                    message.className = 'alert alert-' + (type || 'info');
                    return;
                }

                toast.textContent = texte;
                toast.className = 'scan-toast est-visible ' + (classesToast[type] || '');

                clearTimeout(effacement);
                effacement = setTimeout(function () {
                    toast.classList.remove('est-visible');
                }, type === 'warning' || type === 'danger' ? DUREE_TOAST_ALERTE : DUREE_TOAST);
            }

            // Retour tactile : dans un atelier bruyant, la vibration est le seul
            // signal fiable qu'une etiquette est passee.
            function signaler() {
                if (navigator.vibrate) {
                    navigator.vibrate(60);
                }
            }

            // Le seul repere permanent du plein ecran : en rafale, la question
            // n'est pas laquelle vient de passer, c'est combien sont passees.
            function majCompteur() {
                var n = corps ? corps.querySelectorAll('tr[data-commande]').length : 0;

                compteur.textContent = textes.compteur.replace(':n', n);
            }

            // Sans contrainte de taille, le navigateur sert du 640x480 : net
            // dans une vignette, bouillie une fois etire sur tout l'ecran. On
            // demande donc mieux.
            //
            // Mais `ideal` ne garantit rien : la specification dit que le
            // navigateur doit s'approcher au mieux, plusieurs Android rendent
            // une erreur. On reessaie donc sans rien exiger : une image molle
            // vaut mieux qu'un scanner mort. Le refus d'acces, lui, ne se
            // retente pas : l'utilisateur a dit non, insister ne fait que
            // reposer la question.
            function ouvrirFlux() {
                return navigator.mediaDevices
                    .getUserMedia({
                        video: {
                            facingMode: 'environment',
                            width: { ideal: 1920 },
                            height: { ideal: 1080 },
                        },
                    })
                    .catch(function (e) {
                        if (e && (e.name === 'NotAllowedError' || e.name === 'SecurityError')) {
                            throw e;
                        }

                        // `environment` demande la camera arriere ; un poste fixe
                        // n'en a qu'une et le navigateur retombe dessus tout seul.
                        return navigator.mediaDevices.getUserMedia({
                            video: { facingMode: 'environment' },
                        });
                    });
            }

            /* Cherche le decodeur natif du systeme.

               C'est lui qui explique l'ecart de fluidite avec une application
               mobile : jsQR est du javascript pur qui parcourt chaque pixel sur
               le fil principal, la ou BarcodeDetector est du code compile et
               accelere. Il lit en prime la video a sa definition entiere, quand
               jsQR travaille sur un canvas reduit a 800 px : a moteur natif, une
               etiquette se lit donc aussi de plus loin.

               Tout est optionnel. L'api n'existe pas sur iOS ni sur Firefox, et
               Brave la desactive parfois au titre de l'anti-empreinte. On ne
               demande jamais, on regarde si c'est la. */
            function preparerDetecteur() {
                if (!('BarcodeDetector' in window)) {
                    return;
                }

                window.BarcodeDetector.getSupportedFormats()
                    .then(function (formats) {
                        if (formats.indexOf('qr_code') !== -1) {
                            detecteur = new window.BarcodeDetector({ formats: ['qr_code'] });
                        }

                        // Visible depuis chrome://inspect quand on branche le
                        // telephone : le seul moyen de savoir lequel des deux
                        // moteurs tourne vraiment sur un appareil donne.
                        console.info('scanner : ' + (detecteur ? 'decodeur natif' : 'jsQR'));
                    })
                    .catch(function () {
                        // Formats illisibles : on restera sur jsQR.
                    });
            }

            function demarrer() {
                if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
                    afficher(window.isSecureContext === false ? textes.nonSecurise : textes.indisponible, 'warning');
                    return;
                }

                ouvrirFlux()
                    .then(function (obtenu) {
                        flux = obtenu;
                        video.srcObject = flux;
                        video.setAttribute('playsinline', true);
                        return video.play();
                    })
                    .then(function () {
                        message.classList.add('d-none');
                        majCompteur();
                        viseur.classList.remove('d-none');
                        document.body.classList.add('scan-plein');
                        boutonDemarrer.classList.add('d-none');
                        boutonArreter.classList.remove('d-none');
                        boucle = requestAnimationFrame(lire);
                    })
                    .catch(function (e) {
                        if (e && e.name === 'NotAllowedError') {
                            afficher(textes.refus, 'danger');
                            return;
                        }

                        // Le nom de l'erreur est le seul indice exploitable quand
                        // ca rate sur un telephone qu'on n'a pas sous la main.
                        afficher(textes.erreur + (e && e.name ? ' (' + e.name + ')' : ''), 'danger');
                    });
            }

            function arreter() {
                if (boucle) {
                    cancelAnimationFrame(boucle);
                    boucle = null;
                }
                if (flux) {
                    flux.getTracks().forEach(function (piste) { piste.stop(); });
                    flux = null;
                }
                video.srcObject = null;

                enCours = false;

                clearTimeout(effacement);
                toast.classList.remove('est-visible');

                viseur.classList.add('d-none');
                document.body.classList.remove('scan-plein');
                boutonArreter.classList.add('d-none');
                boutonDemarrer.classList.remove('d-none');
            }

            // Le decodage ne suit pas la definition du flux. jsQR est du
            // javascript pur et parcourt chaque pixel : lui donner une trame
            // 1080p ferait tomber la cadence a quelques images par seconde, et
            // un scanner lent est pire qu'un scanner flou. On reduit donc avant
            // de la lui passer : la reduction est faite en code natif par le
            // navigateur, et une image reduite depuis un capteur 1080p est plus
            // propre que du 480p natif. L'ecran, lui, garde le flux entier.
            var COTE_DECODAGE = 800;

            function dimensionnerCanvas() {
                var largeur = video.videoWidth;
                var hauteur = video.videoHeight;

                if (!largeur || !hauteur) {
                    return;
                }

                var facteur = Math.min(1, COTE_DECODAGE / Math.max(largeur, hauteur));

                largeur = Math.round(largeur * facteur);
                hauteur = Math.round(hauteur * facteur);

                // Reaffecter width vide le canvas : on ne touche aux dimensions
                // que si elles ont change, pas a chaque image.
                if (canvas.width !== largeur || canvas.height !== hauteur) {
                    canvas.width = largeur;
                    canvas.height = hauteur;
                }
            }

            function lire() {
                if (video.readyState === video.HAVE_ENOUGH_DATA) {
                    if (detecteur) {
                        lireNatif();
                    } else {
                        lireJs();
                    }
                }

                boucle = requestAnimationFrame(lire);
            }

            /* Le decodeur natif rend une promesse : on n'en lance pas une
               nouvelle tant que la precedente est en vol, sinon la file
               grossirait plus vite qu'elle ne se vide et le scan prendrait du
               retard sur ce que montre l'ecran. */
            function lireNatif() {
                if (enCours) {
                    return;
                }

                enCours = true;

                detecteur.detect(video)
                    .then(function (codes) {
                        enCours = false;

                        // La camera a pu etre coupee pendant la detection : sans
                        // ce garde-fou, fermer le viseur au mauvais moment
                        // enverrait encore une commande.
                        if (flux && codes && codes.length) {
                            retenir(codes[0].rawValue);
                        }
                    })
                    .catch(function () {
                        // Le moteur natif a rendu la main : on bascule sur jsQR
                        // pour de bon plutot que de reessayer a chaque image.
                        enCours = false;
                        detecteur = null;
                    });
            }

            function lireJs() {
                dimensionnerCanvas();
                contexte.drawImage(video, 0, 0, canvas.width, canvas.height);

                var image = contexte.getImageData(0, 0, canvas.width, canvas.height);
                var trouve = window.jsQR(image.data, image.width, image.height, {
                    inversionAttempts: 'dontInvert',
                });

                if (trouve && trouve.data) {
                    retenir(trouve.data);
                }
            }

            // Une etiquette reste dans le champ pendant plusieurs images : sans
            // ce garde-fou, une seule commande partirait vingt fois au serveur.
            function retenir(code) {
                var maintenant = Date.now();

                if (code === dernierCode && maintenant - dernierMoment <= DELAI_MEME_CODE) {
                    return;
                }

                dernierCode = code;
                dernierMoment = maintenant;
                envoyer(code);
            }

            // Le numero seul ne prouve rien a qui tient vingt fiches : le client
            // et sa ville disent tout de suite si on a scanne la bonne palette.
            function resume(ligne, texte) {
                if (!ligne) {
                    return texte;
                }

                var lieu = ligne.ville && ligne.ville !== '—' ? ', ' + ligne.ville : '';

                return texte + ' — ' + ligne.client + lieu;
            }

            function envoyer(code) {
                signaler();

                fetch(urlJson, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': jeton,
                    },
                    body: JSON.stringify({ code: code }),
                })
                    .then(function (reponse) {
                        return reponse.json().then(function (donnees) {
                            return { statut: reponse.status, donnees: donnees };
                        });
                    })
                    .then(function (resultat) {
                        if (!resultat.donnees.ok) {
                            afficher(resultat.donnees.message, 'warning');
                            return;
                        }

                        afficher(
                            resume(resultat.donnees.ligne, resultat.donnees.message),
                            resultat.donnees.nouveau ? 'success' : 'secondary'
                        );

                        if (resultat.donnees.nouveau) {
                            ajouterLigne(resultat.donnees.ligne);
                        }
                    })
                    .catch(function () {
                        afficher(textes.reseau, 'danger');
                    });
            }

            // La ligne est batie ici et pas rendue par le serveur : recharger la
            // page a chaque etiquette couperait le flux video, ce qui rend le
            // scan en rafale impossible.
            function ajouterLigne(ligne) {
                var vide = document.getElementById('scans-vide');
                if (vide) {
                    vide.remove();
                }

                if (!corps || corps.querySelector('[data-commande="' + ligne.id + '"]')) {
                    return;
                }

                var tr = document.createElement('tr');
                tr.setAttribute('data-commande', ligne.id);
                tr.className = 'table-success';

                tr.appendChild(cellule('th', String(ligne.id)));
                tr.appendChild(cellule('td', ligne.client));
                tr.appendChild(cellule('td', ligne.ville));

                var modele = document.createElement('td');
                modele.appendChild(document.createTextNode(ligne.modele));
                var couleur = document.createElement('div');
                couleur.className = 'text-muted small';
                couleur.textContent = ligne.couleur;
                modele.appendChild(couleur);
                tr.appendChild(modele);

                var etat = document.createElement('td');
                var pastille = document.createElement('span');
                pastille.className = 'cmd-tag ' + ligne.classe;
                pastille.textContent = ligne.etat;
                etat.appendChild(pastille);
                tr.appendChild(etat);

                tr.appendChild(formulaireRetrait(ligne.id));

                corps.insertBefore(tr, corps.firstChild);

                majCompteur();

                // Sans ca, la ligne inserée reste un <tr> nu au milieu de cartes :
                // sur mobile, responsive-tables.js pose les data-label au
                // chargement, et c'est justement le mobile qui scanne.
                if (window.initResponsiveTables) {
                    window.initResponsiveTables();
                }

                // Le compteur du bouton « Appliquer » est rendu par le serveur :
                // il ne suivra qu'au prochain chargement. On le dit plutot que de
                // laisser croire a un nombre juste.
                marquerCompteurPerime();
            }

            function cellule(balise, texte) {
                var cellule = document.createElement(balise);
                cellule.textContent = texte;
                return cellule;
            }

            function formulaireRetrait(id) {
                var cellule = document.createElement('td');
                cellule.className = 'text-nowrap';

                var form = document.createElement('form');
                form.method = 'post';
                form.action = urlRetirer.replace('__ID__', id);
                form.style.display = 'inline';

                [['_token', jeton], ['_method', 'DELETE']].forEach(function (paire) {
                    var champ = document.createElement('input');
                    champ.type = 'hidden';
                    champ.name = paire[0];
                    champ.value = paire[1];
                    form.appendChild(champ);
                });

                var bouton = document.createElement('button');
                bouton.type = 'submit';
                bouton.className = 'btn btn-outline-danger btn-sm';
                bouton.title = textes.retirer;
                bouton.innerHTML = '<i class="bi bi-x-lg"></i>';
                form.appendChild(bouton);

                cellule.appendChild(form);
                return cellule;
            }

            var compteurPerime = false;

            function marquerCompteurPerime() {
                if (compteurPerime) {
                    return;
                }
                compteurPerime = true;

                var bloc = document.querySelector('form[action="{{ route('scans.appliquer') }}"]');
                if (!bloc) {
                    // Rien a appliquer au chargement : la liste etait vide, le
                    // bloc n'existe pas encore. Un rechargement le fera naitre.
                    return;
                }

                var bouton = bloc.querySelector('button[type="submit"]');
                if (bouton) {
                    bouton.textContent = @js(__('Appliquer — recharger pour le compte exact'));
                }
            }

            // Cherche des maintenant : la reponse arrive bien avant que
            // quelqu'un ait clique, et la boucle regarde `detecteur` a chaque
            // image de toute facon.
            preparerDetecteur();

            boutonDemarrer.addEventListener('click', demarrer);
            boutonArreter.addEventListener('click', arreter);
            boutonFermer.addEventListener('click', arreter);

            // Sur un poste fixe a webcam, Echap est le reflexe pour sortir d'un
            // plein ecran ; le telephone, lui, a la croix.
            document.addEventListener('keydown', function (e) {
                if (e.key === 'Escape' && viseurOuvert()) {
                    arreter();
                }
            });

            // Quitter la page sans relacher la camera laisse le voyant allume
            // sur le telephone.
            window.addEventListener('pagehide', arreter);
        })();
    </script>
@endpush