{% extends "base.html" %}
{% load static %}
{% comment %}
  FLAG (mobile): This is a barcode/label printing view. It generates a browser/PDF label sheet,
  which doesn't work inside the native app WebView. The mobile app prints barcodes/labels natively
  over Bluetooth, so links into this page are hidden when request.is_mobile_app (see club_sidebar_nav
  and quick_check_in_users). This page is left intact for the web.
{% endcomment %}
{% block title %}Print Barcodes — {{ club.name }}{% endblock %}

{% block extra_css %}
<link rel="stylesheet" type="text/css" href="{% static 'css/vendor/select2.min.css' %}">
{% endblock %}

{% block content %}
{% include "club_ribbon.html" %}

<h4 class="mt-3">Print Barcodes</h4>
<p class="text-muted small mb-2">
  You can scan user's membership barcodes to add them to club auctions, assign bidder numbers, or sell T-shirts and other swag (instantly added to that user's invoice).
</p>
<p class="text-muted small mb-2">
  Create barcodes here, print them out, then scan them using <strong>quick check in users</strong> in any of your club auctions. Scan the barcode first, then scan the user to assign it to.
</p>

<div class="alert alert-info py-2 small mb-3">
  <i class="bi bi-info-circle"></i> Changes on this page will not be saved, so make sure the labels have all printed correctly before you leave.
</div>

<div class="mb-3">
  <button type="button" id="scanner-test-toggle" class="btn btn-outline-secondary btn-sm">
    <i class="bi bi-upc-scan"></i> Test scanner
  </button>
</div>

<div id="scanner-test-panel" class="border rounded p-3 mb-3 d-none">
  <p class="small mb-2">
    Scan the test barcode below with your USB scanner while this panel is open. We'll check that it's
    configured with an <code>F9</code> prefix and a carriage-return (Enter) suffix.
    <br>
    <span class="text-warning">While this test is open, keystrokes are captured for diagnostics &mdash; click <strong>Hide scanner test</strong> to type normally again.</span>
  </p>
  <div class="bg-white border rounded p-2 d-inline-block mb-2">
    <img src="{% url 'club_barcode' slug=club.slug value=1234567890 %}" alt="Test barcode" style="height:60px;width:auto;display:block;">
    <div class="text-center text-dark small mt-1" style="font-family:monospace;">1234567890</div>
  </div>
  <div id="scanner-test-status" class="alert alert-secondary mt-1 mb-0">Scan the test barcode above to begin&hellip;</div>
</div>

<form method="get" action="{% url 'club_barcode_labels_pdf' club.slug %}" id="barcode-form" target="_blank">
  <div id="rows-container"></div>
  <div class="d-flex gap-2 mt-2">
    <button type="button" id="add-row" class="btn btn-info btn-sm">+ Add row</button>
    <button type="submit" class="btn btn-success btn-sm">
      <i class="bi bi-file-pdf"></i> Download PDF
    </button>
  </div>
</form>

<p class="text-muted small mt-3" id="label-settings-link">
  Label size: <strong>{{ preset_name }}</strong>.
  <a href="{% url 'printing' %}?next={{ request.path }}">Change label settings</a>
</p>

<template id="row-template">
  <div class="barcode-row d-flex flex-wrap gap-2 align-items-end mb-2">
    <div>
      <label class="form-label small mb-1">Label type</label>
      <select name="label_type" class="form-select form-select-sm label-type-select" style="width:160px">
        <option value="">— select —</option>
        <option value="bidder_paddle">Bidder paddle</option>
        <option value="charge">Item for sale</option>
        <option value="discount">Discount</option>
        <option value="member_card">User</option>
      </select>
    </div>
    <div class="field-bidder-number d-none">
      <label class="form-label small mb-1">Bidder number</label>
      <input type="text" name="bidder_number" class="form-control form-control-sm" style="width:110px" placeholder="456">
    </div>
    <div class="field-amount d-none">
      <label class="form-label small mb-1">Amount ($)</label>
      <input type="number" name="amount" class="form-control form-control-sm" min="1" step="1" style="width:100px" placeholder="12">
    </div>
    <div class="field-label-text d-none">
      <label class="form-label small mb-1">Label text</label>
      <input type="text" name="label_text" class="form-control form-control-sm" maxlength="30" placeholder="e.g. Shirt">
    </div>
    <div class="field-member d-none">
      <label class="form-label small mb-1">Member</label>
      <select name="member_id" class="member-select" style="width:220px">
        <option value=""></option>
      </select>
    </div>
    <div class="align-self-end">
      <button type="button" class="btn btn-outline-danger btn-sm remove-row">×</button>
    </div>
  </div>
</template>
{% endblock %}

{% block extra_js %}
<script src="{% static 'js/vendor/select2.min.js' %}"></script>
<script>
const AUTOCOMPLETE_URL = "{% url 'club-member-autocomplete' %}";
const CLUB_SLUG = "{{ club.slug }}";

function initSelect2(row) {
  $(row).find('.member-select').select2({
    ajax: {
      url: AUTOCOMPLETE_URL,
      dataType: 'json',
      delay: 200,
      data: function(params) {
        return {
          q: params.term || '',
          forward: JSON.stringify({club_slug: CLUB_SLUG, require_membership_number: true})
        };
      },
      processResults: function(data) { return {results: data.results}; }
    },
    placeholder: '— search member —',
    allowClear: true,
    width: '220px'
  });
}

function updateFields(row) {
  const lt = $(row).find('.label-type-select').val();
  $(row).find('.field-bidder-number').toggleClass('d-none', lt !== 'bidder_paddle');
  $(row).find('.field-amount').toggleClass('d-none', lt !== 'charge' && lt !== 'discount');
  $(row).find('.field-label-text').toggleClass('d-none', lt !== 'charge' && lt !== 'discount');
  $(row).find('.field-member').toggleClass('d-none', lt !== 'member_card');
}

function bindRow(row) {
  initSelect2(row);
  $(row).find('.label-type-select').on('change', function() { updateFields(row); });
  $(row).find('.remove-row').on('click', function() {
    if (document.querySelectorAll('.barcode-row').length > 1) {
      $(row).find('.member-select').select2('destroy');
      row.remove();
    }
  });
}

function addRow() {
  const tmpl = document.getElementById('row-template');
  const clone = tmpl.content.cloneNode(true);
  const row = clone.querySelector('.barcode-row');
  document.getElementById('rows-container').appendChild(row);
  bindRow(row);
}

addRow();
document.getElementById('add-row').addEventListener('click', addRow);

const labelSettingsLink = document.getElementById('label-settings-link');
document.getElementById('rows-container').addEventListener('change', function() {
  labelSettingsLink.classList.add('d-none');
});
document.getElementById('rows-container').addEventListener('input', function() {
  labelSettingsLink.classList.add('d-none');
});

// --- Scanner troubleshooting -------------------------------------------------
// A USB HID scanner should be configured to send an F9 prefix keystroke before
// each barcode and a carriage return (Enter) after it (see barcode_scanner.js).
// This diagnostic listens for a scan of the known test barcode and reports which
// of those two pieces of configuration is missing.
(function () {
  const TEST_VALUE = "1234567890";
  const toggleBtn = document.getElementById('scanner-test-toggle');
  const panel = document.getElementById('scanner-test-panel');
  const statusEl = document.getElementById('scanner-test-status');
  if (!toggleBtn || !panel || !statusEl) return;

  const BURST_GAP = 300; // ms; scanner keystrokes are near-instant, humans are slower
  let active = false;
  let buffer = "";
  let sawPrefix = false;
  let lastKeyTime = 0;
  let evalTimer = null;

  function resetBurst() { buffer = ""; sawPrefix = false; }

  function setStatus(msg, cls) {
    statusEl.textContent = msg;
    statusEl.className = 'alert mt-1 mb-0 ' + cls;
  }

  function finish(sawSuffix) {
    if (evalTimer) { clearTimeout(evalTimer); evalTimer = null; }
    const digits = buffer.replace(/\D/g, '');
    if (digits.indexOf(TEST_VALUE) === -1) {
      // Not the test barcode (a partial capture or stray typing) — wait for a clean scan.
      resetBurst();
      return;
    }
    if (!sawPrefix) {
      setStatus('No F9 prefix set up. Configure your scanner to send an F9 keystroke before each barcode.', 'alert-danger');
    } else if (!sawSuffix) {
      setStatus('No CR suffix set up. Configure your scanner to send a carriage return (Enter) after each barcode.', 'alert-warning');
    } else {
      setStatus('Scanner working correctly!', 'alert-success');
    }
    resetBurst();
  }

  function armTimer() {
    if (evalTimer) clearTimeout(evalTimer);
    // If no Enter arrives to close the burst, evaluate anyway (this is the missing-CR case).
    evalTimer = setTimeout(function () { finish(false); }, BURST_GAP + 120);
  }

  document.addEventListener('keydown', function (e) {
    if (!active) return;
    const now = Date.now();
    if (now - lastKeyTime > BURST_GAP) { resetBurst(); }
    lastKeyTime = now;
    if (e.key === 'F9') {
      e.preventDefault();
      sawPrefix = true;
      armTimer();
      return;
    }
    if (e.key === 'Enter') {
      if (buffer) {
        e.preventDefault();
        finish(true);
      }
      return;
    }
    if (e.key.length === 1 && !e.ctrlKey && !e.altKey && !e.metaKey) {
      e.preventDefault();
      buffer += e.key;
      armTimer();
    }
  }, true);

  toggleBtn.addEventListener('click', function () {
    active = !active;
    panel.classList.toggle('d-none', !active);
    toggleBtn.innerHTML = active
      ? '<i class="bi bi-x-lg"></i> Hide scanner test'
      : '<i class="bi bi-upc-scan"></i> Test scanner';
    if (active) {
      resetBurst();
      setStatus('Scan the test barcode above to begin…', 'alert-secondary');
    }
  });
})();
</script>
{% endblock %}