{% extends "base.html" %}
{% load static %}
{% block title %}{% if auction.use_check_in_mode %}Quick check in users{% else %}Scan club members{% endif %} for {{ auction }}{% endblock %}
{% block content %}
  {% include "auction_ribbon.html" %}
  <div class="mt-3">
    <h4>{% if auction.use_check_in_mode %}Quick check in users{% else %}Scan club members into this auction{% endif %}</h4>
    {% comment %} Barcode/label printing is handled natively over Bluetooth in the mobile app, so hide the web print-barcodes link there. {% endcomment %}
    <p class="text-muted">Scan membership cards to check users in, with the camera below or a USB barcode scanner.{% if auction.club and not request.is_mobile_app %} <a href="{% url 'club_barcode_labels' slug=auction.club.slug %}">You can print barcodes to scan here.</a>{% endif %}</p>
    <button id="scan-toggle" type="button" class="btn btn-primary">
      <i class="bi bi-camera-video"></i> Activate camera to scan membership cards
    </button>
    <div id="scanner-wrapper" class="mt-3 d-none">
      <div class="rounded border overflow-hidden w-100" style="aspect-ratio: 3 / 1;">
        <video id="scanner-video" playsinline muted style="width: 100%; height: 100%; object-fit: cover;"></video>
      </div>
    </div>
    <div id="scan-status" class="alert alert-secondary mt-3 mb-2">Camera is off.</div>
  </div>
{% endblock %}
{% block extra_js %}
{% comment %} Included directly (not only via the ribbon) because club permission_add_edit users can use this page without seeing the ribbon's admin block. {% endcomment %}
{% include "auctions/barcode_scanner.html" %}
<script src="{% static 'js/camera_scanner.js' %}"></script>
<script>
  (() => {
    const toggleButton = document.getElementById("scan-toggle");
    const wrapper = document.getElementById("scanner-wrapper");
    const video = document.getElementById("scanner-video");
    const statusBox = document.getElementById("scan-status");

    function setStatus(message, level = "secondary") {
      statusBox.className = `alert alert-${level} mt-3 mb-2`;
      statusBox.textContent = message;
    }

    const scanner = window.createCameraScanner({
      video: video,
      // Shared pipeline: posts to the barcode API and reports results via toasts
      onCode: (value) => window.auctionBarcodeScanner.handleCode(value),
      onStatus: setStatus,
    });

    async function startScanner() {
      wrapper.classList.remove("d-none");
      toggleButton.innerHTML = '<i class="bi bi-camera-video-off"></i> Stop camera';
      try {
        await scanner.start();
      } catch (error) {
        wrapper.classList.add("d-none");
        toggleButton.innerHTML = '<i class="bi bi-camera-video"></i> Activate camera to scan membership cards';
      }
    }

    async function stopScanner() {
      await scanner.stop();
      wrapper.classList.add("d-none");
      toggleButton.innerHTML = '<i class="bi bi-camera-video"></i> Activate camera to scan membership cards';
    }

    toggleButton.addEventListener("click", async () => {
      if (scanner.isScanning()) {
        await stopScanner();
      } else {
        await startScanner();
      }
    });
  })();
</script>
{% endblock %}