<?php
/*** This text should be at the top of all code files ***
 * qr-scanner.php – used for QR scanning with a connected camera
 * Made by: Morten Pilekær
 * Rev. 0.4.0 Owner: Morten Pilekær
 * Location: /qr-app-lite/qr-scanner.php
 ***/
declare(strict_types=1);

require_once __DIR__ . '/app-config.php';

$isPublicDemo = isQrPublicDemo();
$pageTitle = 'QR App Lite – Scanner';
$activePage = 'scanner';
$appVersion = QR_APP_VERSION;
require __DIR__ . '/app-header.php';
?>
  <main class="container app-container py-4">
    <div class="row justify-content-center">
      <div class="col-12 col-xl-10">
        <div class="app-page-header d-flex flex-column flex-md-row justify-content-between gap-3 align-items-md-end mb-4">
          <div>
            <h1 class="display-6 mb-1">QR-scanner</h1>
            <p class="text-secondary mb-0"><?= $isPublicDemo ? 'Scan QR-koder uden at gemme resultatet.' : 'Scan QR-koder lokalt via USB-webcam eller indbygget kamera.' ?></p>
          </div>
          <div class="d-flex flex-wrap gap-2 align-self-start align-self-md-end">
            <a class="btn btn-outline-primary btn-sm" href="index.php">Gå til generator</a>
            <span class="badge text-bg-primary align-self-center"><?= appE(QR_APP_VERSION) ?></span>
          </div>
        </div>

        <div id="scannerAlert" class="alert alert-info" role="alert">
          Vælg kamera og tryk <strong>Start scanner</strong>. Kameraadgang virker normalt på <code>localhost</code>.
        </div>

        <div class="row g-4">
          <div class="col-12 col-lg-5">
            <section class="card shadow-sm h-100">
              <div class="card-header bg-body-tertiary">
                <h2 class="h5 mb-0">Kamera</h2>
              </div>
              <div class="card-body">
                <div class="mb-3">
                  <label for="cameraSelect" class="form-label fw-semibold">Vælg kamera</label>
                  <select id="cameraSelect" class="form-select">
                    <option value="">Søger efter kameraer...</option>
                  </select>
                  <div class="form-text">USB-webcam vises her, når browseren har adgang til kamera.</div>
                </div>

                <div class="d-flex flex-wrap gap-2">
                  <button id="startBtn" type="button" class="btn btn-primary">Start scanner</button>
                  <button id="stopBtn" type="button" class="btn btn-outline-secondary" disabled>Stop scanner</button>
                  <button id="refreshBtn" type="button" class="btn btn-outline-secondary">Genindlæs kameraer</button>
                </div>

                <hr>

                <div class="small text-secondary">
                  <div><strong>Status:</strong> <span id="scannerStatus">Ikke startet</span></div>
                  <div><strong>API:</strong> <span id="apiStatus">Kontrollerer...</span></div>
                  <?php if (!$isPublicDemo): ?>
                    <div><strong>Historik:</strong> <span id="historyCount">0</span> / <?= (int)QR_SCAN_HISTORY_MAX_ITEMS ?> lokale poster</div>
                  <?php endif; ?>
                </div>
              </div>
            </section>
          </div>

          <div class="col-12 col-lg-7">
            <section class="card shadow-sm h-100">
              <div class="card-header bg-body-tertiary d-flex justify-content-between align-items-center gap-2">
                <h2 class="h5 mb-0">Live preview</h2>
                <span id="scanBadge" class="badge text-bg-secondary">Standby</span>
              </div>
              <div class="card-body">
                <div class="scanner-video-wrap border rounded bg-dark">
                  <video id="scannerVideo" class="scanner-video" autoplay muted playsinline></video>
                  <div class="scanner-frame" aria-hidden="true"></div>
                </div>
                <canvas id="scannerCanvas" class="d-none"></canvas>
              </div>
            </section>
          </div>
        </div>

        <section class="card shadow-sm mt-4">
          <div class="card-header bg-body-tertiary">
            <h2 class="h5 mb-0">Scannet resultat</h2>
          </div>
          <div class="card-body">
            <label for="scanResult" class="form-label fw-semibold">Indhold</label>
            <textarea id="scanResult" class="form-control font-monospace" rows="5" readonly placeholder="Når en QR-kode er scannet, vises indholdet her."></textarea>

            <div class="d-flex flex-wrap gap-2 mt-3">
              <button id="copyBtn" type="button" class="btn btn-success" disabled>Kopiér resultat</button>
              <a id="openUrlBtn" class="btn btn-outline-primary disabled" href="#" target="_blank" rel="noopener" aria-disabled="true">Åbn som URL</a>
              <button id="clearBtn" type="button" class="btn btn-outline-secondary" disabled>Ryd resultat</button>
            </div>

            <div class="form-text mt-2">
              <?php if ($isPublicDemo): ?>
                Resultatet gemmes ikke. Brug <strong>Kopiér resultat</strong>, før du forlader siden. <strong>Åbn som URL</strong> aktiveres kun for gyldige webadresser.
              <?php else: ?>
                Knappen <strong>Åbn som URL</strong> aktiveres kun, når resultatet er en gyldig webadresse.
              <?php endif; ?>
            </div>
          </div>
        </section>

        <?php if (!$isPublicDemo): ?>
          <section class="card shadow-sm mt-4">
            <div class="card-header bg-body-tertiary d-flex flex-column flex-md-row justify-content-between gap-2 align-items-md-center">
              <h2 class="h5 mb-0">Lokal scanner-historik</h2>
              <button id="clearHistoryBtn" type="button" class="btn btn-sm btn-outline-danger" disabled>Ryd historik</button>
            </div>
            <div class="card-body">
              <p class="small text-secondary mb-3">
                Historikken gemmes kun i browserens lokale lager på denne PC. Den sendes ikke til serveren.
              </p>
              <div id="historyEmpty" class="alert alert-secondary mb-0">Ingen scannede QR-koder i lokal historik.</div>
              <div id="scanHistory" class="list-group scan-history-list" aria-live="polite"></div>
            </div>
          </section>
        <?php endif; ?>
      </div>
    </div>
  </main>

  <?php include __DIR__ . '/footer.php'; ?>
  <script>
    window.QR_APP_CONFIG = {
      scanHistoryMaxItems: <?= (int)QR_SCAN_HISTORY_MAX_ITEMS ?>,
      publicDemo: <?= $isPublicDemo ? 'true' : 'false' ?>
    };
  </script>
  <script src="js/bootstrap.bundle.min.js"></script>
  <script src="js/jsQR.js"></script>
  <script src="js/qr-scanner-app.js"></script>
</body>
</html>
