{{-- Fullscreen Camera Scanner (per-item & bulk PO) --}}
<div id="scanOverlay" style="display:none;position:fixed;inset:0;z-index:9999;background:#000;flex-direction:column;">

    <video id="scanVideo" autoplay playsinline muted style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;"></video>
    <canvas id="scanCanvas" style="display:none;"></canvas>
    {{-- Freeze frame ditampilkan saat AI menganalisis --}}
    <img id="scanFreezeFrame" src="" style="display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;">

    {{-- Top bar --}}
    <div style="position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:linear-gradient(to bottom,rgba(0,0,0,.65),transparent);">
        <div>
            <span id="scanOverlayTitle" style="color:#fff;font-size:14px;font-weight:600;"></span>
        </div>
        <button onclick="closeScanOverlay()" style="background:rgba(255,255,255,.15);border:none;border-radius:50%;width:40px;height:40px;color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;"><i class="bx bx-x"></i></button>
    </div>

    {{-- Upload fallback --}}
    <div style="position:absolute;top:14px;left:50%;transform:translateX(-50%);">
        <label for="scanFileInput" style="background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:20px;padding:5px 14px;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:6px;white-space:nowrap;">
            <i class="bx bx-image-alt"></i> Upload Foto
        </label>
        <input type="file" id="scanFileInput" accept="image/*" style="display:none;">
    </div>

    {{-- Kiri tengah: capture --}}
    <div style="position:absolute;left:20px;top:50%;transform:translateY(-50%);">
        <button onclick="doCapture()" style="width:76px;height:76px;border-radius:50%;border:4px solid #fff;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .1s;-webkit-tap-highlight-color:transparent;" onpointerdown="this.style.transform='scale(.9)'" onpointerup="this.style.transform=''" onpointerleave="this.style.transform=''">
            <div style="width:56px;height:56px;border-radius:50%;background:#fff;"></div>
        </button>
    </div>

    {{-- Kanan tengah: capture --}}
    <div style="position:absolute;right:20px;top:50%;transform:translateY(-50%);">
        <button onclick="doCapture()" style="width:76px;height:76px;border-radius:50%;border:4px solid #fff;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .1s;-webkit-tap-highlight-color:transparent;" onpointerdown="this.style.transform='scale(.9)'" onpointerup="this.style.transform=''" onpointerleave="this.style.transform=''">
            <div style="width:56px;height:56px;border-radius:50%;background:#fff;"></div>
        </button>
    </div>

    {{-- Loading overlay --}}
    <div id="scanLoading" style="display:none;position:absolute;inset:0;background:rgba(0,0,0,.75);flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#fff;">
        <div class="spinner-border text-light" style="width:3rem;height:3rem;"></div>
        <p style="margin:0;font-size:14px;">AI sedang menganalisis...</p>
    </div>

    {{-- Result panel — full overlay agar tombol tidak tertutup --}}
    <div id="scanResultPanel" style="display:none;position:absolute;inset:0;background:#fff;overflow-y:auto;padding:20px 20px 32px;">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;">
            <span style="font-size:15px;font-weight:600;">Hasil Scan AI</span>
            <button onclick="hideScanResultPanel()" style="background:#f1f3f5;border:none;border-radius:50%;width:36px;height:36px;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;">&#x2715;</button>
        </div>
        <div id="scanResultContent"></div>
    </div>
</div>

<script>
let cameraStream    = null;
let scanResultData  = null;   // per-item mode
let scanMode        = 'item'; // 'item' | 'bulk'
let bulkAccumulated = [];     // {barang_id, no_lot, no_serial, tanggal_kedaluwarsa, confidence, sumber}
let bulkPoItems     = [];     // [{id, nama, merek, kode_ref}]

// ── Buka overlay ─────────────────────────────────────────────────────────────
function openScanOverlay() {
    scanMode = 'item';
    _resetOverlay();
    document.getElementById('scanOverlayTitle').textContent = 'Scan Label Barang (AI)';
    document.getElementById('scanOverlay').style.display = 'flex';
    startCamera();
}

function openScanBulk(poItems) {
    scanMode    = 'bulk';
    bulkPoItems = poItems || [];
    _resetOverlay();
    document.getElementById('scanOverlayTitle').textContent = 'Scan Semua Barang PO';
    document.getElementById('scanOverlay').style.display = 'flex';
    startCamera();
}

function hideScanResultPanel() {
    document.getElementById('scanResultPanel').style.display = 'none';
    window._capturedBlob = null; // foto ulang — tidak dilampirkan
    restoreCamera();
}

function _resetOverlay() {
    scanResultData = null;
    window._capturedBlob = null;
    document.getElementById('scanResultPanel').style.display = 'none';
    document.getElementById('scanLoading').style.display     = 'none';
    document.getElementById('scanResultContent').innerHTML   = '';
    document.getElementById('scanFileInput').value           = '';
    restoreCamera();
}

function closeScanOverlay() {
    stopCamera();
    document.getElementById('scanOverlay').style.display = 'none';
}

function startCamera() {
    navigator.mediaDevices.getUserMedia({
        video: { facingMode: { ideal: 'environment' }, width: { ideal: 1920 }, height: { ideal: 1080 } }
    }).then(function(stream) {
        cameraStream = stream;
        document.getElementById('scanVideo').srcObject = stream;
    }).catch(function(err) {
        alert('Tidak dapat mengakses kamera: ' + err.message);
        closeScanOverlay();
    });
}

function stopCamera() {
    if (cameraStream) { cameraStream.getTracks().forEach(t => t.stop()); cameraStream = null; }
}

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

    // Freeze frame: sembunyikan video, tampilkan gambar hasil capture
    const freezeDataUrl = canvas.toDataURL('image/jpeg', 0.92);
    const freezeEl = document.getElementById('scanFreezeFrame');
    freezeEl.src = freezeDataUrl;
    freezeEl.style.display = 'block';
    video.style.display = 'none';

    const b64 = resizeToBase64(canvas);
    // Simpan blob sementara — hanya dilampirkan jika hasil diterapkan
    canvas.toBlob(function(blob) { window._capturedBlob = blob; }, 'image/jpeg', 0.85);
    if (scanMode === 'bulk') kirimBulk(b64);
    else kirimKeAI(b64);
}

function restoreCamera() {
    document.getElementById('scanFreezeFrame').style.display = 'none';
    document.getElementById('scanVideo').style.display = 'block';
}

function resizeToBase64(srcCanvas) {
    const MAX = 1920;
    const ratio = Math.min(MAX / srcCanvas.width, MAX / srcCanvas.height, 1);
    const out = document.createElement('canvas');
    out.width  = Math.round(srcCanvas.width  * ratio);
    out.height = Math.round(srcCanvas.height * ratio);
    out.getContext('2d').drawImage(srcCanvas, 0, 0, out.width, out.height);
    return out.toDataURL('image/jpeg', 0.92);
}

document.getElementById('scanFileInput').addEventListener('change', function() {
    const file = this.files[0]; if (!file) return;
    const img = new Image();
    img.onload = function() {
        const c = document.createElement('canvas');
        c.width = img.width; c.height = img.height;
        c.getContext('2d').drawImage(img, 0, 0);
        const b64 = resizeToBase64(c);
        URL.revokeObjectURL(img.src);
        if (scanMode === 'bulk') kirimBulk(b64);
        else kirimKeAI(b64);
    };
    img.src = URL.createObjectURL(file);
});

// ── MODE PER-ITEM ─────────────────────────────────────────────────────────────
function kirimKeAI(base64) {
    document.getElementById('scanResultPanel').style.display = 'none';
    document.getElementById('scanLoading').style.display = 'flex';

    const csrf = document.querySelector('meta[name="csrf-token"]').content;
    fetch(BASE_URL + '/gudang/penerimaan-barang/scan-label', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf },
        body: JSON.stringify({ image: base64, nama_barang: window.scanNamaBarang || '', merek_barang: window.scanMerekBarang || '', ukuran: window.scanUkuran || '' }),
    })
    .then(r => r.json().then(d => ({ ok: r.ok, data: d })))
    .then(function(res) {
        document.getElementById('scanLoading').style.display = 'none';
        restoreCamera();
        let html = '';
        if (!res.ok) {
            html = alertHtml('danger', res.data.error || 'AI scan gagal.') + btnFotoUlang();
        } else if (res.data.minta_ulang) {
            html = alertHtml('warning', res.data.alasan_ulang || 'Foto kurang jelas.') + btnFotoUlang();
        } else if (res.data.cocok === false) {
            html = alertHtml('danger', res.data.alasan_tolak || 'Produk tidak sesuai.') + btnFotoUlang();
        } else {
            scanResultData = res.data.items || [];
            html = hasilPerItemHtml(scanResultData);
        }
        document.getElementById('scanResultContent').innerHTML = html;
        document.getElementById('scanResultPanel').style.display = 'block';
    })
    .catch(function() {
        document.getElementById('scanLoading').style.display = 'none';
        document.getElementById('scanResultContent').innerHTML = alertHtml('danger', 'Koneksi gagal.') + btnFotoUlang();
        document.getElementById('scanResultPanel').style.display = 'block';
    });
}

function hasilPerItemHtml(items) {
    const rows = items.map(item => {
        const badge = item.sumber === 'barcode'
            ? '<span class="badge bg-primary ms-1" style="font-size:.65rem">Barcode</span>'
            : '<span class="badge bg-secondary ms-1" style="font-size:.65rem">Teks</span>';
        return `<tr>
            <td class="fs-12">${item.no_lot || '—'}${badge}</td>
            <td class="fs-12">${item.no_serial || '—'}</td>
            <td class="fs-12">${item.tanggal_kedaluwarsa || '—'}</td>
            <td class="fs-12">${item.confidence || '—'}</td>
        </tr>`;
    }).join('');
    return `<p class="fw-semibold mb-2 fs-13"><i class="bx bx-check-circle text-success me-1"></i>Hasil AI Scan</p>
        <div class="table-responsive mb-3">
            <table class="table table-sm table-bordered">
                <thead class="table-light"><tr><th class="fs-12">No. LOT</th><th class="fs-12">No. Serial</th><th class="fs-12">Kedaluwarsa</th><th class="fs-12">Confidence</th></tr></thead>
                <tbody>${rows}</tbody>
            </table>
        </div>
        <div class="d-flex gap-2">
            ${btnFotoUlang(true)}
            <button class="btn btn-primary flex-fill" onclick="gunakanHasil()"><i class="bx bx-check me-1"></i> Gunakan Hasil</button>
        </div>`;
}

function saveCapturedFoto() {
    if (window._capturedBlob && typeof uploadGlobalFoto === 'function') {
        uploadGlobalFoto(window._capturedBlob, null);
    }
    window._capturedBlob = null;
}

function gunakanHasil() {
    if (typeof onScanResult === 'function' && scanResultData && scanResultData.length > 0) {
        saveCapturedFoto();
        onScanResult(scanResultData);
        closeScanOverlay();
    }
}

// ── MODE BULK PO ──────────────────────────────────────────────────────────────
function kirimBulk(base64) {
    document.getElementById('scanResultPanel').style.display = 'none';
    document.getElementById('scanLoading').style.display = 'flex';

    const csrf = document.querySelector('meta[name="csrf-token"]').content;
    fetch(BASE_URL + '/gudang/penerimaan-barang/scan-label-bulk', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf },
        body: JSON.stringify({ image: base64, po_items: bulkPoItems }),
    })
    .then(r => r.json().then(d => ({ ok: r.ok, data: d })))
    .then(function(res) {
        document.getElementById('scanLoading').style.display = 'none';
        restoreCamera();
        if (!res.ok) {
            document.getElementById('scanResultContent').innerHTML = alertHtml('danger', res.data.error || 'AI scan gagal.') + btnFotoUlang();
            document.getElementById('scanResultPanel').style.display = 'block';
            return;
        }
        if (res.data.minta_ulang) {
            document.getElementById('scanResultContent').innerHTML = alertHtml('warning', res.data.alasan_ulang || 'Foto kurang jelas.') + btnFotoUlang();
            document.getElementById('scanResultPanel').style.display = 'block';
            return;
        }

        const items = res.data.items || [];
        document.getElementById('scanResultContent').innerHTML = renderBulkFotoResult(items);
        document.getElementById('scanResultPanel').style.display = 'block';
    })
    .catch(function() {
        document.getElementById('scanLoading').style.display = 'none';
        document.getElementById('scanResultContent').innerHTML = alertHtml('danger', 'Koneksi gagal.') + btnFotoUlang();
        document.getElementById('scanResultPanel').style.display = 'block';
    });
}

function renderBulkFotoResult(items) {
    if (items.length === 0) {
        return alertHtml('warning', 'AI tidak menemukan item apapun dalam foto ini.') + btnFotoUlang();
    }

    const rows = items.map(item => {
        const po = bulkPoItems.find(p => p.id == item.barang_id);
        return `<tr>
            <td style="font-size:14px;">${po ? po.nama : '<span class="text-muted">Tidak dikenal</span>'}</td>
            <td style="font-size:14px;">${item.no_lot || '—'}</td>
            <td style="font-size:14px;">${item.no_serial || '—'}</td>
            <td style="font-size:14px;">${item.tanggal_kedaluwarsa || '—'}</td>
        </tr>`;
    }).join('');

    // Simpan ke variable sementara agar selesaiBulk bisa akses
    window._bulkScanItems = items;

    return `<p class="fw-semibold mb-3" style="font-size:15px;"><i class="bx bx-check-circle text-success me-1"></i>${items.length} item terdeteksi</p>
    <button class="btn btn-primary w-100 mb-3" onclick="selesaiBulk()"><i class="bx bx-check me-1"></i> Terapkan Hasil Scan</button>
    <div class="table-responsive mb-3">
        <table class="table table-sm table-bordered">
            <thead class="table-light"><tr><th style="font-size:14px;">Barang</th><th style="font-size:14px;">LOT</th><th style="font-size:14px;">Serial</th><th style="font-size:14px;">ED</th></tr></thead>
            <tbody>${rows}</tbody>
        </table>
    </div>
    ${btnFotoUlang()}`;
}

function hapusBulkItem(idx) {
    bulkAccumulated.splice(idx, 1);
    if (bulkAccumulated.length === 0) {
        document.getElementById('scanResultPanel').style.display = 'none';
    } else {
        showResultPanel();
    }
}

function selesaiBulk() {
    const items = window._bulkScanItems || [];
    if (typeof onScanBulkResult === 'function' && items.length > 0) {
        saveCapturedFoto();
        onScanBulkResult(items, bulkPoItems);
        closeScanOverlay();
    }
}

// ── Helpers ───────────────────────────────────────────────────────────────────
function alertHtml(type, msg) {
    return `<div class="alert alert-${type} py-2 fs-13"><i class="bx bx-${type==='danger'?'x-circle':'camera'} me-1"></i>${msg}</div>`;
}
function btnFotoUlang(flex) {
    return `<button class="${flex?'btn btn-outline-secondary flex-fill':'btn btn-outline-secondary w-100'}" onclick="hideScanResultPanel()"><i class="bx bx-camera me-1"></i> Foto Ulang</button>`;
}
</script>