{% extends "base.html" %}
{% from "_macros.html" import app_pill %}

{% block title %}Barcode-Scanner · Werkstatt{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500">Werkstatt / Barcode-Scanner</p>{% endblock %}
{% block heading %}Barcode / QR-Scanner{% endblock %}

{% block content %}
<style>
  .scanner-wrap { display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
  @media (max-width: 768px) { .scanner-wrap { grid-template-columns: 1fr; } }
  .scanner-video {
    width: 100%; max-width: 480px; aspect-ratio: 4/3;
    background: #1a1a1a; border-radius: 10px; overflow: hidden;
    border: 2px solid var(--brand-orange);
    position: relative;
  }
  .scanner-video video, .scanner-video canvas { width:100%; height:100%; object-fit:cover; }
  .scan-frame {
    position:absolute; inset: 20% 15% 20% 15%;
    border: 3px solid rgba(242, 88, 27, 0.85);
    border-radius: 8px;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.40);
    pointer-events: none;
  }
  .scan-status {
    background: rgba(255,255,255,0.05); padding: 12px 16px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.10); min-height: 60px;
    font-family: ui-monospace, monospace; font-size: 12px;
    color: var(--card-text);
  }
  .last-scan { padding: 14px 16px; border-radius: 8px; border: 2px solid var(--brand-orange); background: rgba(242,88,27,0.10); margin-top: 14px; }
  .last-scan h3 { font-size: 14px; font-weight: 700; margin-bottom: 6px; color: var(--card-text); }
  .last-scan .code { font-family: ui-monospace, monospace; font-size: 16px; font-weight: 600; color: var(--brand-orange); margin-bottom: 8px; }
  .match-item { background: rgba(255,255,255,0.05); padding: 10px 14px; border-radius: 6px; margin-bottom: 8px; border-left: 3px solid var(--brand-orange); }
  .match-item-ident { font-family: ui-monospace, monospace; font-weight: 600; color: var(--card-text-muted); font-size: 11px; }
  .match-item-desc { font-size: 13px; color: var(--card-text); margin: 3px 0; }
  body.theme-light .scan-status { background:#fafafa; border-color:#e5e5e5; color:#1a1a1a; }
  body.theme-light .last-scan { background:#fff7f3; }
  body.theme-light .last-scan h3 { color:#1a1a1a; }
  body.theme-light .match-item { background:#fff; }
  body.theme-light .match-item-ident { color:#525252; }
  body.theme-light .match-item-desc { color:#1a1a1a; }
  .match-item-meta { font-size: 11px; color: #737373; }
  .scanner-actions button { min-height: 44px; margin: 4px; }
</style>

<div class="card" style="margin-bottom: 14px;">
  <div class="card-header">
    <div>
      <h2>Werkzeug per Barcode/QR scannen</h2>
      <p class="sub">Code-128, EAN, QR — funktioniert mit Werkzeug-Aufdrucken oder gedruckten Labels</p>
    </div>
  </div>
  <div class="p-5">
    <div class="scanner-wrap">
      <div>
        <div class="scanner-video" id="scanner-video">
          <video id="scan-video" autoplay muted playsinline></video>
          <div class="scan-frame"></div>
        </div>
        <div class="scanner-actions" style="margin-top: 10px;">
          <button onclick="startScan()" id="btn-start" class="btn btn-primary btn-sm">📷 Kamera starten</button>
          <button onclick="stopScan()" id="btn-stop" class="btn btn-secondary btn-sm" disabled>⏹ Stop</button>
          <button onclick="switchCamera()" id="btn-switch" class="btn btn-secondary btn-sm" disabled>🔄 Rückkamera</button>
        </div>
        <div class="scan-status" id="scan-status">Bereit. Klick „Kamera starten".</div>
      </div>
      <div>
        <h3 style="font-size:13px; font-weight:600; margin-bottom:8px;">Letzter Scan</h3>
        <div id="last-scan-box">
          <p style="color:var(--card-text-muted); font-style:italic;">Noch nichts gescannt.</p>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- ZXing-JS via lokales Asset (falls vorhanden), Fallback CDN. Mind. 2 MB Lib. -->
<script src="https://unpkg.com/@zxing/library@0.21.3/umd/index.min.js"></script>
<script>
let codeReader = null;
let currentDeviceId = null;
let allDevices = [];
let lastCode = '';
let lastCodeTs = 0;

async function startScan() {
  if (!window.ZXing) { setStatus('ZXing-Bibliothek nicht geladen — Internet prüfen.'); return; }
  setStatus('Kamera wird gestartet …');
  try {
    codeReader = new ZXing.BrowserMultiFormatReader();
    const devices = await codeReader.listVideoInputDevices();
    if (devices.length === 0) { setStatus('Keine Kamera gefunden.'); return; }
    allDevices = devices;
    // Bevorzuge Rückkamera ("back" / "environment" / "rear")
    const back = devices.find(d => /back|rear|environment/i.test(d.label));
    currentDeviceId = (back || devices[0]).deviceId;
    document.getElementById('btn-switch').disabled = devices.length < 2;
    await codeReader.decodeFromVideoDevice(currentDeviceId, 'scan-video', (result, err) => {
      if (result) onCodeDetected(result.getText(), result.getBarcodeFormat());
    });
    document.getElementById('btn-start').disabled = true;
    document.getElementById('btn-stop').disabled = false;
    setStatus('Scan aktiv — Code vor die Kamera halten …');
  } catch (e) {
    setStatus('Fehler: ' + (e.message || e));
  }
}

function stopScan() {
  if (codeReader) {
    codeReader.reset();
    codeReader = null;
  }
  document.getElementById('btn-start').disabled = false;
  document.getElementById('btn-stop').disabled = true;
  setStatus('Scan gestoppt.');
}

async function switchCamera() {
  if (!codeReader || allDevices.length < 2) return;
  const idx = allDevices.findIndex(d => d.deviceId === currentDeviceId);
  const next = allDevices[(idx + 1) % allDevices.length];
  currentDeviceId = next.deviceId;
  codeReader.reset();
  await codeReader.decodeFromVideoDevice(currentDeviceId, 'scan-video', (result, err) => {
    if (result) onCodeDetected(result.getText(), result.getBarcodeFormat());
  });
  setStatus('Kamera gewechselt: ' + (next.label || 'unbekannt'));
}

async function onCodeDetected(code, format) {
  // Debounce: gleicher Code innerhalb 2s ignorieren
  const now = Date.now();
  if (code === lastCode && now - lastCodeTs < 2000) return;
  lastCode = code;
  lastCodeTs = now;
  // Vibration auf Mobile
  if (navigator.vibrate) navigator.vibrate(60);
  setStatus('✓ Code erkannt: ' + code + ' (' + format + ')');
  // Lookup in Items-DB
  try {
    const r = await fetch('/api/shopfloor/items/search?q=' + encodeURIComponent(code) + '&limit=5');
    const items = await r.json();
    renderLastScan(code, format, items);
  } catch (e) {
    renderLastScan(code, format, []);
  }
}

function renderLastScan(code, format, items) {
  const box = document.getElementById('last-scan-box');
  let html = '<div class="last-scan">'
           + '<h3>Code erkannt</h3>'
           + '<div class="code">' + escHtml(code) + '</div>'
           + '<div style="font-size:11px; color:#737373; margin-bottom:10px;">Format: ' + escHtml(format) + '</div>';
  if (!items || items.length === 0) {
    html += '<p style="color:#a16207; font-size:12px;">Kein Werkzeug mit diesem Ident gefunden.</p>'
         +  '<a href="/items/new?ident=' + encodeURIComponent(code) + '" class="btn btn-primary btn-sm">+ Neues Werkzeug anlegen</a>';
  } else {
    items.forEach(i => {
      html += '<div class="match-item">'
            + '<div class="match-item-ident">' + escHtml(i.ident || '') + '</div>'
            + '<div class="match-item-desc">' + escHtml(i.description || '—') + '</div>'
            + '<div class="match-item-meta">Bestand: <strong>' + (i.quantity_total || 0) + '</strong> Stk.'
            + (i.quantity_min ? ' · Min: ' + i.quantity_min : '')
            + '</div>'
            + '<div style="margin-top:6px;">'
            + '<a href="/items/' + i.id + '" class="btn btn-secondary btn-sm">Details</a> '
            + '<a href="/items/' + i.id + '/rent" class="btn btn-primary btn-sm">Ausleihen</a>'
            + '</div>'
            + '</div>';
    });
  }
  html += '</div>';
  box.innerHTML = html;
}

function setStatus(t) { document.getElementById('scan-status').textContent = t; }
function escHtml(s) {
  return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
}
</script>
{% endblock %}