import { Controller } from "@hotwire/stimulus"

export default class extends Controller {
  static targets = [ "input", "preview", "modal" ]

  connect() {
    this.html5QrCode = null
  }

  // Öffnet das Modal und startet den Kamera-Stream
  startCamera(event) {
    event.preventDefault()
    
    // Modal anzeigen
    this.modalTarget.classList.remove("hidden")

    // Neue Instanz auf dem Preview-Div mit der ID des Elements erzeugen
    this.html5QrCode = new Html5Qrcode(this.previewTarget.id)

    // FPS-Rate und Scan-Rahmen (250x250px) festlegen
    const config = { fps: 10, qrbox: { width: 250, height: 250 } }

    this.html5QrCode.start(
      { facingMode: "environment" }, // Erzwingt die rückseitige Hauptkamera bei Handys
      config,
      (decodedText, decodedResult) => {
        // SUCCESS: Code erkannt!
        this.inputTarget.value = decodedText // Trägt die ID (z.B. 10024) ins Textfeld ein
        this.stopCamera()                     // Stoppt die Kamera und schließt das Fenster
      },
      (errorMessage) => {
        // Kontinuierlicher Scan-Loop (Fehler ignorieren, wenn kein QR-Code im Bild ist)
      }
    ).catch((err) => {
      console.error("Kamera-Zugriff verweigert oder blockiert:", err)
    })
  }

  // Schließt das Modal und beendet den Stream sauber
  stopCamera() {
    if (this.html5QrCode && this.html5QrCode.isScanning) {
      this.html5QrCode.stop().then(() => {
        this.modalTarget.classList.add("hidden")
      }).catch((err) => console.error("Fehler beim Beenden des Streams:", err))
    } else {
      this.modalTarget.classList.add("hidden")
    }
  }
}