@extends('layouts.app')

@section('title', 'Scanner une étiquette')

@section('styles')
<style>
    .scanner-grid {
        display: grid;
        grid-template-columns: 1fr 420px;
        gap: 20px;
        align-items: start;
    }
    @media (max-width: 1024px) { .scanner-grid { grid-template-columns: 1fr; } }

    .section-title {
        font-family: 'Cormorant Garamond', serif;
        font-size: 18px; font-weight: 600;
        color: #2D4A5F; margin-bottom: 16px;
    }

    /* Zone caméra */
    .camera-zone {
        background: #1e3347;
        border-radius: 16px;
        overflow: hidden;
        position: relative;
        aspect-ratio: 4/3;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer;
    }

    #video {
        width: 100%; height: 100%;
        object-fit: cover; display: none;
    }

    .camera-placeholder {
        text-align: center; color: rgba(200,180,122,0.7);
        padding: 40px;
    }
    .camera-placeholder svg { width: 64px; height: 64px; margin-bottom: 16px; opacity: 0.6; }
    .camera-placeholder p { font-size: 14px; margin-top: 8px; }

    /* Coins scanner */
    .scan-corners { position: absolute; inset: 0; pointer-events: none; }
    .scan-corners::before, .scan-corners::after,
    .scan-corners span::before, .scan-corners span::after {
        content: ''; position: absolute;
        width: 24px; height: 24px;
        border-color: #C8B47A; border-style: solid; opacity: 0;
        transition: opacity 0.3s;
    }
    .camera-zone.active .scan-corners::before,
    .camera-zone.active .scan-corners::after,
    .camera-zone.active .scan-corners span::before,
    .camera-zone.active .scan-corners span::after { opacity: 1; }
    .scan-corners::before { top: 16px; left: 16px; border-width: 2px 0 0 2px; }
    .scan-corners::after { top: 16px; right: 16px; border-width: 2px 2px 0 0; }
    .scan-corners span::before { bottom: 16px; left: 16px; border-width: 0 0 2px 2px; }
    .scan-corners span::after { bottom: 16px; right: 16px; border-width: 0 2px 2px 0; }

    /* Ligne de scan animée */
    .scan-line {
        position: absolute; left: 16px; right: 16px; height: 2px;
        background: linear-gradient(90deg, transparent, #C8B47A, transparent);
        top: 20%; display: none;
        animation: scanMove 2s ease-in-out infinite;
    }
    .camera-zone.active .scan-line { display: block; }
    @keyframes scanMove {
        0% { top: 20%; } 50% { top: 75%; } 100% { top: 20%; }
    }

    /* Boutons caméra */
    .camera-controls {
        display: flex; gap: 10px; margin-top: 12px;
    }

    .btn-camera {
        flex: 1; padding: 12px;
        border-radius: 10px; border: none;
        font-family: 'Jost', sans-serif; font-size: 13px;
        font-weight: 500; letter-spacing: 0.06em;
        cursor: pointer; transition: all 0.2s;
        display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    .btn-camera svg { width: 18px; height: 18px; }
    .btn-start { background: #2D4A5F; color: #C8B47A; }
    .btn-start:hover { background: #3a5f78; }
    .btn-capture { background: #C8B47A; color: #2D4A5F; display: none; }
    .btn-capture:hover { background: #d9c99a; }
    .btn-manual { background: #f4f6f8; color: #2D4A5F; border: 1px solid #dde3e8; }
    .btn-manual:hover { background: #e8ecf0; }

    /* Résultat scan */
    .scan-result {
        background: #E1F5EE; border: 1px solid #9FE1CB;
        border-radius: 12px; padding: 16px;
        margin-top: 12px; display: none;
    }
    .scan-result.show { display: block; }
    .scan-result-title {
        font-size: 11px; letter-spacing: 0.12em;
        color: #085041; text-transform: uppercase; margin-bottom: 8px;
    }
    .scan-result-name { font-size: 15px; font-weight: 500; color: #1e2d3a; }
    .scan-result-detail { font-size: 12px; color: #6b7c8d; margin-top: 4px; }

    /* Formulaire */
    .form-card {
        background: white; border-radius: 12px;
        border: 1px solid #dde3e8; padding: 24px;
    }

    .form-group { margin-bottom: 16px; }
    .form-label {
        display: block; font-size: 11px;
        letter-spacing: 0.12em; text-transform: uppercase;
        color: #6b7c8d; margin-bottom: 6px; font-weight: 500;
    }
    .form-input {
        width: 100%; padding: 11px 14px;
        border: 1px solid #dde3e8; border-radius: 8px;
        font-size: 13px; font-family: 'Jost', sans-serif;
        color: #1e2d3a; background: #fafbfc; outline: none;
        transition: border-color 0.2s;
    }
    .form-input:focus { border-color: #3a5f78; background: white; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

    /* Tags type produit */
    .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
    .tag {
        padding: 5px 12px; border-radius: 20px;
        border: 1px solid #dde3e8; font-size: 12px;
        color: #6b7c8d; cursor: pointer; background: white;
        transition: all 0.15s; font-family: 'Jost', sans-serif;
    }
    .tag.selected { background: #2D4A5F; color: #C8B47A; border-color: #2D4A5F; }

    .btn-submit {
        width: 100%; margin-top: 20px;
        background: #2D4A5F; color: #C8B47A;
        border: none; border-radius: 10px; padding: 14px;
        font-size: 13px; font-family: 'Jost', sans-serif;
        font-weight: 500; letter-spacing: 0.1em;
        text-transform: uppercase; cursor: pointer;
        transition: background 0.2s;
    }
    .btn-submit:hover { background: #3a5f78; }

    .divider {
        display: flex; align-items: center; gap: 10px;
        color: #b0bcc8; font-size: 11px; margin: 16px 0;
    }
    .divider::before, .divider::after {
        content: ''; flex: 1; height: 1px; background: #eef0f2;
    }

    /* ── CODE-BARRES ────────────────────────────── */
    .btn-barcode { background: #1e3347; color: #C8B47A; border: 1px solid rgba(200,180,122,0.4); }
    .btn-barcode:hover { background: #2D4A5F; border-color: #C8B47A; }

    .barcode-modal {
        display: none; position: fixed; inset: 0;
        background: rgba(0,0,0,0.88); z-index: 1000;
        flex-direction: column; align-items: center; justify-content: center; padding: 20px;
    }
    .barcode-modal.show { display: flex; }
    .barcode-modal-card {
        background: #1e3347; border-radius: 16px; overflow: hidden;
        width: 100%; max-width: 480px; padding: 24px;
    }
    .barcode-modal-title {
        color: #C8B47A; font-family: 'Cormorant Garamond', serif;
        font-size: 19px; font-style: italic;
        margin-bottom: 16px; text-align: center; letter-spacing: 0.03em;
    }
    #barcode-reader { width: 100%; border-radius: 10px; overflow: hidden; }
    #barcode-reader video { border-radius: 10px; }
    .barcode-status {
        text-align: center; color: rgba(200,180,122,0.65);
        font-size: 12px; margin-top: 12px; letter-spacing: 0.04em;
    }
    .btn-close-barcode {
        display: block; width: 100%; margin-top: 14px; padding: 11px;
        background: transparent; color: rgba(255,255,255,0.45);
        border: 1px solid rgba(255,255,255,0.15); border-radius: 8px;
        font-family: 'Jost', sans-serif; font-size: 12px;
        letter-spacing: 0.08em; cursor: pointer; transition: all 0.2s;
    }
    .btn-close-barcode:hover { color: white; border-color: rgba(255,255,255,0.35); }

    .barcode-result {
        background: #EEF4FF; border: 1px solid #A8C4F0;
        border-radius: 12px; padding: 16px; margin-top: 12px; display: none;
    }
    .barcode-result.show { display: block; }
    .barcode-result-title {
        font-size: 11px; letter-spacing: 0.12em;
        color: #2D4A5F; text-transform: uppercase; margin-bottom: 8px;
    }
    .barcode-result-name { font-size: 15px; font-weight: 500; color: #1e2d3a; }
    .barcode-result-detail { font-size: 12px; color: #6b7c8d; margin-top: 4px; }
</style>
@endsection

@section('content')

<div class="scanner-grid">

    <!-- Colonne gauche : caméra -->
    <div>
        <h2 class="section-title">Scanner une étiquette</h2>

        <div class="camera-zone" id="cameraZone" onclick="startCamera()">
            <video id="video" autoplay playsinline></video>
            <canvas id="canvas" style="display:none;"></canvas>

            <div class="camera-placeholder" id="cameraPlaceholder">
                <svg fill="none" viewBox="0 0 24 24" stroke="#C8B47A" stroke-width="1">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/>
                </svg>
                <p style="color:#C8B47A; font-size:15px; font-weight:500;">Appuyer pour activer la caméra</p>
                <p>Pointez vers l'étiquette du produit</p>
            </div>

            <div class="scan-corners"><span></span></div>
            <div class="scan-line"></div>
        </div>

        <div class="camera-controls">
            <button class="btn-camera btn-start" id="btnStart" onclick="startCamera()">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 10.5l4.72-4.72a.75.75 0 011.28.53v11.38a.75.75 0 01-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25h-9A2.25 2.25 0 002.25 7.5v9a2.25 2.25 0 002.25 2.25z"/>
                </svg>
                Activer la caméra
            </button>
            <button class="btn-camera btn-capture" id="btnCapture" onclick="capturePhoto()">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z"/>
                    <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM18.75 10.5h.008v.008h-.008V10.5z"/>
                </svg>
                Photographier
            </button>
            <button class="btn-camera btn-barcode" id="btnBarcode" onclick="startBarcodeScanner()">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z"/>
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 6.75h.75v.75h-.75v-.75zM6.75 16.5h.75v.75h-.75v-.75zM16.5 6.75h.75v.75h-.75v-.75zM13.5 13.5h.75v.75h-.75v-.75zM13.5 19.5h.75v.75h-.75v-.75zM19.5 13.5h.75v.75h-.75v-.75zM19.5 19.5h.75v.75h-.75v-.75zM16.5 16.5h.75v.75h-.75v-.75z"/>
                </svg>
                Code-barres
            </button>
        </div>

        <!-- Résultat scan OCR -->
        <div class="scan-result" id="scanResult">
            <div class="scan-result-title">✓ Étiquette reconnue</div>
            <div class="scan-result-name" id="resultName">—</div>
            <div class="scan-result-detail" id="resultDetail">—</div>
        </div>

        <!-- Résultat code-barres Open Food Facts -->
        <div class="barcode-result" id="barcodeResult">
            <div class="barcode-result-title">📦 Produit trouvé — Open Food Facts</div>
            <div class="barcode-result-name" id="barcodeResultName">—</div>
            <div class="barcode-result-detail" id="barcodeResultDetail">—</div>
        </div>

        <!-- Modal scanner code-barres -->
        <div class="barcode-modal" id="barcodeModal">
            <div class="barcode-modal-card">
                <div class="barcode-modal-title">Scanner le code-barres</div>
                <div id="barcode-reader"></div>
                <div class="barcode-status" id="barcodeStatus">Initialisation…</div>
                <button class="btn-close-barcode" onclick="stopBarcodeScanner()">ANNULER</button>
            </div>
        </div>

        <div class="divider">ou saisie manuelle directe</div>

        <!-- Upload photo -->
        <div style="background:#f4f6f8; border:2px dashed #dde3e8; border-radius:12px; padding:20px; text-align:center;">
            <input type="file" id="photoUpload" accept="image/*" capture="environment" style="display:none;" onchange="handlePhotoUpload(event)">
            <svg fill="none" viewBox="0 0 24 24" stroke="#6b7c8d" stroke-width="1.5" style="width:32px;height:32px;margin:0 auto 8px;display:block;">
                <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>
            <p style="font-size:13px;color:#6b7c8d;margin-bottom:10px;">Importer une photo d'étiquette</p>
            <button onclick="document.getElementById('photoUpload').click()" style="background:#2D4A5F;color:#C8B47A;border:none;border-radius:8px;padding:8px 20px;font-size:12px;cursor:pointer;font-family:'Jost',sans-serif;">
                Choisir une photo
            </button>
        </div>
    </div>

    <!-- Colonne droite : formulaire -->
    <div class="form-card">
        <h2 class="section-title" style="margin-bottom:20px;">Informations du produit</h2>

        <form method="POST" action="{{ route('scanner.store') }}" enctype="multipart/form-data" id="produitForm">
            @csrf

            <input type="hidden" name="photo_etiquette" id="photoData">

            <div class="form-group">
                <label class="form-label">Nom du produit *</label>
                <input class="form-input" type="text" name="nom" id="fieldNom"
                    placeholder="Ex : Saumon fumé Label Rouge" required>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label class="form-label">N° de lot</label>
                    <input class="form-input" type="text" name="numero_lot" id="fieldLot"
                        placeholder="Ex : FR-22-45-A">
                </div>
                <div class="form-group">
                    <label class="form-label">DLC / DDM</label>
                    <input class="form-input" type="date" name="dlc" id="fieldDlc">
                </div>
            </div>

            <div class="form-group">
                <label class="form-label">Fournisseur</label>
                <input class="form-input" type="text" name="fournisseur" id="fieldFournisseur"
                    placeholder="Ex : Maison Nordique">
            </div>

            <div class="form-group">
                <label class="form-label">Événement associé</label>
                <select class="form-input" name="evenement_id">
                    <option value="">— Sans événement —</option>
                    @foreach($evenements as $evenement)
                        <option value="{{ $evenement->id }}" {{ request('evenement_id') == $evenement->id ? 'selected' : '' }}>
                            {{ $evenement->nom }} — {{ $evenement->date->format('d/m/Y') }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="form-group">
                <label class="form-label">Type de produit</label>
                <div class="tags" id="typeTags">
                    <span class="tag" onclick="selectTag(this, 'poisson')">🐟 Poisson</span>
                    <span class="tag" onclick="selectTag(this, 'viande')">🥩 Viande</span>
                    <span class="tag" onclick="selectTag(this, 'laitier')">🥛 Laitier</span>
                    <span class="tag" onclick="selectTag(this, 'vegetal')">🌿 Végétal</span>
                    <span class="tag" onclick="selectTag(this, 'patisserie')">🧁 Pâtisserie</span>
                    <span class="tag" onclick="selectTag(this, 'boisson')">🍾 Boisson</span>
                    <span class="tag" onclick="selectTag(this, 'autre')">📦 Autre</span>
                </div>
                <input type="hidden" name="type" id="fieldType">
            </div>

            <div class="form-group">
                <label class="form-label">Notes</label>
                <textarea class="form-input" name="notes" rows="2"
                    placeholder="Allergènes, particularités…" style="resize:vertical;"></textarea>
            </div>

            <button type="submit" class="btn-submit">
                Archiver le produit
            </button>
        </form>
    </div>

</div>

@endsection

@section('scripts')
<script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
<script>
let stream = null;

async function startCamera() {
    const zone = document.getElementById('cameraZone');
    const video = document.getElementById('video');
    const placeholder = document.getElementById('cameraPlaceholder');
    const btnStart = document.getElementById('btnStart');
    const btnCapture = document.getElementById('btnCapture');

    try {
        stream = await navigator.mediaDevices.getUserMedia({
            video: { facingMode: 'environment', width: { ideal: 1920 }, height: { ideal: 1080 } }
        });
        video.srcObject = stream;
        video.style.display = 'block';
        placeholder.style.display = 'none';
        zone.classList.add('active');
        zone.onclick = null;
        btnStart.style.display = 'none';
        btnCapture.style.display = 'flex';
    } catch (err) {
        alert('Impossible d\'accéder à la caméra. Vérifiez les permissions du navigateur.');
    }
}

function capturePhoto() {
    const video = document.getElementById('video');
    const canvas = document.getElementById('canvas');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    canvas.getContext('2d').drawImage(video, 0, 0);

    const imageData = canvas.toDataURL('image/jpeg', 0.8);
    document.getElementById('photoData').value = imageData;

    analyzeImage(imageData);
}

function handlePhotoUpload(event) {
    const file = event.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = (e) => {
        document.getElementById('photoData').value = e.target.result;
        analyzeImage(e.target.result);
    };
    reader.readAsDataURL(file);
}

function analyzeImage(imageData) {
    const result = document.getElementById('scanResult');
    const resultName = document.getElementById('resultName');
    const resultDetail = document.getElementById('resultDetail');

    resultName.textContent = 'Analyse en cours…';
    resultDetail.textContent = 'Lecture de l\'étiquette';
    result.classList.add('show');

    fetch('{{ route("scanner.scan") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({ image: imageData })
    })
    .then(r => r.json())
    .then(data => {
        if (data.success || data.texte_brut) { if(data.texte_brut && !data.success) { document.getElementById('fieldNom').value = data.texte_brut.split('\n')[0]; }
            if (data.nom) document.getElementById('fieldNom').value = data.nom;
            if (data.lot) document.getElementById('fieldLot').value = data.lot;
            if (data.dlc) document.getElementById('fieldDlc').value = data.dlc;
            if (data.fournisseur) document.getElementById('fieldFournisseur').value = data.fournisseur;
            resultName.textContent = data.nom || 'Produit détecté';
            resultDetail.textContent = 'Formulaire pré-rempli — vérifiez et complétez si besoin';
        } else {
            resultName.textContent = data.texte_brut ? 'Lu: ' + data.texte_brut.substring(0,50) : 'Non reconnu';
            resultDetail.textContent = 'Saisissez les informations manuellement';
        }
    })
    .catch(() => {
        resultName.textContent = 'Erreur de lecture';
        resultDetail.textContent = 'Saisissez les informations manuellement';
    });
}

function selectTag(el, value) {
    document.querySelectorAll('.tag').forEach(t => t.classList.remove('selected'));
    el.classList.add('selected');
    document.getElementById('fieldType').value = value;
}

// ── CODE-BARRES + OPEN FOOD FACTS ─────────────────────────
let html5QrCode = null;

function startBarcodeScanner() {
    document.getElementById('barcodeModal').classList.add('show');
    document.getElementById('barcodeStatus').textContent = 'Initialisation de la caméra…';

    html5QrCode = new Html5Qrcode('barcode-reader');

    html5QrCode.start(
        { facingMode: 'environment' },
        {
            fps: 10,
            qrbox: { width: 280, height: 100 },
            formatsToSupport: [
                Html5QrcodeSupportedFormats.EAN_13,
                Html5QrcodeSupportedFormats.EAN_8,
                Html5QrcodeSupportedFormats.UPC_A,
                Html5QrcodeSupportedFormats.UPC_E,
            ]
        },
        (decodedText) => onBarcodeDetected(decodedText),
        () => {}
    ).then(() => {
        document.getElementById('barcodeStatus').textContent = 'Pointez vers le code-barres EAN du produit';
    }).catch(() => {
        document.getElementById('barcodeStatus').textContent = 'Impossible d\'accéder à la caméra';
    });
}

function stopBarcodeScanner() {
    if (html5QrCode) {
        html5QrCode.stop().catch(() => {});
        html5QrCode = null;
    }
    document.getElementById('barcodeModal').classList.remove('show');
}

function onBarcodeDetected(barcode) {
    stopBarcodeScanner();

    const result      = document.getElementById('barcodeResult');
    const resultName  = document.getElementById('barcodeResultName');
    const resultDetail = document.getElementById('barcodeResultDetail');

    resultName.textContent  = 'Recherche en cours…';
    resultDetail.textContent = 'Code : ' + barcode;
    result.classList.add('show');

    fetch('https://world.openfoodfacts.org/api/v0/product/' + barcode + '.json')
        .then(r => r.json())
        .then(data => {
            if (data.status === 1 && data.product) {
                const p         = data.product;
                const nom       = p.product_name_fr || p.product_name || p.generic_name_fr || p.generic_name || '';
                const marque    = p.brands || '';
                const categorie = (p.categories_tags && p.categories_tags[0])
                                  ? p.categories_tags[0].replace(/^[a-z]{2}:/, '') : '';

                if (nom) {
                    document.getElementById('fieldNom').value = marque ? nom + ' — ' + marque : nom;
                    if (marque) document.getElementById('fieldFournisseur').value = marque;
                    resultName.textContent   = nom;
                    resultDetail.textContent = [marque, categorie].filter(Boolean).join(' · ') || 'Open Food Facts';
                } else {
                    // Produit sans nom → fallback OCR
                    result.classList.remove('show');
                    fallbackToOCR();
                }
            } else {
                // Produit inconnu → fallback OCR
                resultName.textContent   = 'Produit non trouvé dans Open Food Facts';
                resultDetail.textContent = 'Basculement sur le scan photo OCR…';
                setTimeout(() => { result.classList.remove('show'); fallbackToOCR(); }, 1800);
            }
        })
        .catch(() => {
            resultName.textContent   = 'Erreur réseau';
            resultDetail.textContent = 'Basculement sur le scan photo OCR…';
            setTimeout(() => { result.classList.remove('show'); fallbackToOCR(); }, 1800);
        });
}

function fallbackToOCR() {
    document.getElementById('photoUpload').click();
}
</script>
@endsection