<%- include('partials-header.ejs', { title: 'Điểm danh khách tham dự', user: user, checkinOnly: true, showCheckinLogout: true, hideNavbar: true }) %>

<%
  const tab = typeof activeTab !== 'undefined' ? activeTab : 'scan';
  const isScanTab = tab !== 'code';
%>

<section class="mobile-checkin mobile-checkin--app">
  <div class="panel checkin-panel">
    <%- include('partials-error-modal.ejs') %>

    <ul class="nav nav-pills checkin-tabs mb-4" id="checkinTabs" role="tablist">
      <li class="nav-item" role="presentation">
        <button
          class="nav-link <%= isScanTab ? 'active' : '' %>"
          id="scan-tab"
          data-bs-toggle="pill"
          data-bs-target="#scanPane"
          type="button"
          role="tab"
          aria-controls="scanPane"
          aria-selected="<%= isScanTab ? 'true' : 'false' %>"
        >
          Quét QR
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button
          class="nav-link <%= !isScanTab ? 'active' : '' %>"
          id="code-tab"
          data-bs-toggle="pill"
          data-bs-target="#codePane"
          type="button"
          role="tab"
          aria-controls="codePane"
          aria-selected="<%= !isScanTab ? 'true' : 'false' %>"
        >
          Nhập mã
        </button>
      </li>
    </ul>

    <div class="tab-content">
      <div class="tab-pane fade checkin-scan-pane <%= isScanTab ? 'show active' : '' %>" id="scanPane" role="tabpanel" aria-labelledby="scan-tab" tabindex="0">
        <div class="qr-box" id="reader"></div>
        <div class="d-grid gap-2 mt-3">
          <button class="btn btn-brand btn-lg" id="startScanner" type="button">Bật camera quét QR</button>
          <button class="btn btn-outline-secondary" id="switchCamera" type="button" disabled>Chuyển camera trước/sau</button>
        </div>
      </div>

      <div class="tab-pane fade checkin-code-pane <%= !isScanTab ? 'show active' : '' %>" id="codePane" role="tabpanel" aria-labelledby="code-tab" tabindex="0">
        <form action="/checkin/code" method="post" class="vstack gap-3">
          <div>
            <label class="form-label" for="registrationCode">Mã khách</label>
            <input class="form-control form-control-lg text-uppercase text-center fw-bold" id="registrationCode" name="registrationCode" placeholder="VD: A1B2C3D4E5" required>
          </div>
          <div>
            <label class="form-label" for="note">Ghi chú</label>
            <input class="form-control" id="note" name="note" value="Bằng mã khách.">
          </div>
          <button class="btn btn-brand btn-lg" type="submit">Điểm danh bằng mã</button>
        </form>
      </div>
    </div>
  </div>

  <form action="/checkin/logout" method="post" class="checkin-logout-form d-grid">
    <button class="btn btn-outline-danger" type="submit">Đăng xuất</button>
  </form>
</section>

<% if (result) { %>
  <div class="modal fade" id="checkinSuccessModal" tabindex="-1" aria-labelledby="checkinSuccessModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h2 class="modal-title fs-5" id="checkinSuccessModalTitle">Điểm danh thành công</h2>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Đóng"></button>
        </div>
        <div class="modal-body text-center">
          <p class="mb-2">Chào mừng</p>
          <h3 class="h3 text-success mb-2"><%= result.fullName %></h3>
          <p class="mb-1">đã đến với chương trình.</p>
          <p class="fw-bold mb-0"><%= result.registrationCode %></p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-brand" data-bs-dismiss="modal">Đóng</button>
        </div>
      </div>
    </div>
  </div>
<% } %>

<script src="https://unpkg.com/html5-qrcode"></script>
<script>
  let scanner = null;
  let scanned = false;
  let isRunning = false;
  let cameras = [];
  let cameraIndex = 0;

  const startButton = document.getElementById('startScanner');
  const switchButton = document.getElementById('switchCamera');

  function isMobileViewport() {
    return window.matchMedia('(max-width: 768px), (pointer: coarse)').matches;
  }

  function getPreferredCameraIndex(cameraList) {
    if (!cameraList.length) {
      return 0;
    }

    const rearCameraIndex = cameraList.findIndex((camera) =>
      /back|rear|environment|sau|traseira|arriere/i.test(camera.label || '')
    );

    if (rearCameraIndex >= 0) {
      return rearCameraIndex;
    }

    return isMobileViewport() && cameraList.length > 1 ? cameraList.length - 1 : 0;
  }

  async function loadCameras() {
    try {
      cameras = await Html5Qrcode.getCameras();
      cameraIndex = getPreferredCameraIndex(cameras);
      switchButton.disabled = cameras.length < 2;
    } catch (error) {
      cameras = [];
      cameraIndex = 0;
      switchButton.disabled = true;
    }
  }

  async function stopScanner() {
    if (!scanner || !isRunning) {
      return;
    }

    await scanner.stop();
    isRunning = false;
    startButton.textContent = 'Bật camera quét QR';
  }

  async function startScanner() {
    if (isRunning) {
      return;
    }

    if (!scanner) {
      scanner = new Html5Qrcode('reader');
    }

    scanned = false;
    const cameraConfig = cameras.length
      ? { deviceId: { exact: cameras[cameraIndex].id } }
      : { facingMode: { ideal: 'environment' } };

    await scanner.start(
      cameraConfig,
      { fps: 10, qrbox: { width: 240, height: 240 } },
      async (decodedText) => {
        if (scanned) return;
        scanned = true;
        await stopScanner();
        if (decodedText.includes('/checkin/scan?token=')) {
          window.location.href = decodedText;
          return;
        }
        const token = encodeURIComponent(decodedText);
        window.location.href = `/checkin/scan?token=${token}`;
      }
    );
    isRunning = true;
    startButton.textContent = 'Đang quét QR';
  }

  startButton.addEventListener('click', async () => {
    try {
      await loadCameras();
      await startScanner();
    } catch (error) {
      alert('Không thể bật camera. Vui lòng kiểm tra quyền camera trên thiết bị.');
    }
  });

  switchButton.addEventListener('click', async () => {
    if (cameras.length < 2) {
      return;
    }

    try {
      await stopScanner();
      cameraIndex = (cameraIndex + 1) % cameras.length;
      await startScanner();
    } catch (error) {
      alert('Không thể chuyển camera.');
    }
  });

  document.getElementById('scan-tab').addEventListener('hidden.bs.tab', () => {
    stopScanner().catch(() => {});
  });

  <% if (result) { %>
    document.addEventListener('DOMContentLoaded', () => {
      document.getElementById('registrationCode').value = '';
      const modal = new bootstrap.Modal(document.getElementById('checkinSuccessModal'));
      modal.show();
    });
  <% } %>
</script>

<%- include('partials-footer.ejs') %>
