{% extends "base.html" %}
{% load static %}

{% block title %}Scanner Actif | BilletFest{% endblock %}

{% block extrahead %}
<!-- Librairie html5-qrcode chargée depuis les fichiers statiques locaux -->
<script src="{% static 'js/html5-qrcode.min.js' %}"></script>

<style>
  /* Mode sombre pour économie batterie + lisibilité caméra */
  body {
    background-color: #0b0f15 !important;
    color: #e5e7eb;
  }
  .scanner-container {
    max-width: 720px;
    margin: 0 auto;
    padding: 1rem;
  }
  #reader {
    width: 100%;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 30px -10px rgba(0,0,0,0.8);
    border: 2px solid #2d3748;
    background: #000;
  }
  /* Force le ratio 4:3 ou carré selon la largeur */
  #reader video {
    object-fit: cover;
  }
  #reader__scan_region {
    background: #1a202c;
  }
  /* Personnalisation des contrôles html5-qrcode */
  #reader__dashboard_section_csr button,
  #reader__dashboard_section_swaplink {
    background: #2d3748 !important;
    color: white !important;
    border-radius: 12px !important;
    padding: 8px 16px !important;
    border: none !important;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
  }
  #reader__dashboard_section_csr button:hover,
  #reader__dashboard_section_swaplink:hover {
    background: #4b5563 !important;
  }
  #reader__dashboard_section_csr span {
    color: #cbd5e1 !important;
  }
  select {
    background: #1e293b;
    color: white;
    border-radius: 8px;
    padding: 6px 12px;
    border: 1px solid #4b5563;
  }

  /* Zone de feedback dynamique */
  .feedback-panel {
    margin-top: 24px;
    border-radius: 24px;
    padding: 24px;
    background: #1e293b;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), 0 8px 20px rgba(0,0,0,0.4);
    transition: all 0.2s ease;
    border-left: 8px solid transparent;
  }
  .feedback-success {
    border-left-color: #10b981;
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
  }
  .feedback-warning {
    border-left-color: #f59e0b;
  }
  .feedback-error {
    border-left-color: #ef4444;
  }
  .client-name {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  .ticket-info {
    color: #94a3b8;
  }
  .reset-btn {
    background: #334155;
    color: white;
    border: none;
    border-radius: 40px;
    padding: 14px 28px;
    font-weight: 700;
    font-size: 1.25rem;
    width: 100%;
    transition: background 0.2s;
    margin-top: 20px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
    cursor: pointer;
  }
  .reset-btn:hover {
    background: #475569;
  }
  .hidden-feedback {
    display: none !important;
  }
  .status-badge {
    font-size: 2.2rem;
    font-weight: 800;
    text-transform: uppercase;
  }
  .bg-success {
    color: #34d399;
  }
  .bg-warning {
    color: #fbbf24;
  }
  .bg-error {
    color: #f87171;
  }
  /* Amélioration responsive */
  @media (max-width: 640px) {
    .scanner-container {
      padding: 0.5rem;
    }
    .client-name {
      font-size: 1.8rem;
    }
  }
  /* Message d'erreur de chargement */
  .error-message-box {
    background: #7f1d1d;
    color: #fecaca;
    padding: 1.5rem;
    border-radius: 20px;
    text-align: center;
    border: 2px solid #ef4444;
  }
  /* Bouton retour accueil stylisé */
  .back-link {
    display: inline-block;
    background: #2d3748;
    color: white;
    border-radius: 30px;
    padding: 10px 20px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
  }
  .back-link:hover {
    background: #4b5563;
  }
</style>
{% endblock %}

{% block content %}
<div class="scanner-container">
  <!-- Titre discret -->
  <h1 class="text-2xl font-light text-gray-400 mb-2 flex items-center gap-2">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
    </svg>
    Scanner de QR Code
  </h1>

  <!-- Lecteur QR (sera remplacé par un message d'erreur si la librairie est absente) -->
  <div id="reader"></div>

  <!-- Zone de message d'erreur critique (librairie non chargée) -->
  <div id="libraryError" class="error-message-box hidden-feedback">
    <div class="text-3xl mb-2">📡</div>
    <h2 class="text-xl font-bold">Impossible de charger le scanner</h2>
    <p class="mt-2 text-sm">La librairie de scan n'a pas pu être chargée. Vérifiez votre connexion internet ou désactivez les bloqueurs de scripts.</p>
    <p class="mt-4">
      <a href="{% url 'scanner:welcome' %}" class="back-link">← Retour à l'accueil</a>
    </p>
  </div>

  <!-- Panneau de résultat (caché par défaut) -->
  <div id="feedbackPanel" class="feedback-panel hidden-feedback">
    <div class="flex flex-col items-center text-center">
      <div id="statusIcon" class="text-5xl mb-3">🎟️</div>
      <div id="statusMessage" class="status-badge mb-1"></div>
      <div id="clientNameDisplay" class="client-name text-white"></div>
      <div id="ticketDetails" class="ticket-info text-lg mt-1"></div>
      <div id="eventName" class="text-gray-400 text-sm mt-2"></div>
    </div>
    <button id="resetScannerBtn" class="reset-btn">
      ↻ Scanner un autre ticket
    </button>
  </div>

  <!-- Indication discrète pour quitter -->
  <div class="mt-6 text-center">
    <a href="{% url 'scanner:welcome' %}" class="text-gray-400 hover:text-gray-200 text-sm back-link" style="background: transparent; box-shadow: none; padding: 8px 16px;">
      ← Retour à l'accueil
    </a>
  </div>
</div>

<script>
  (function() {
    // ----- CONFIGURATION -----
    const csrfToken = '{{ csrf_token }}';
    const scannerContainerId = "reader";
    let html5QrCode = null;
    let isProcessing = false;      // Évite les requêtes simultanées
    let scannerInitialized = false;
    let isStarting = false;        // Pour éviter les appels start concurrents

    // Éléments DOM
    const readerDiv = document.getElementById('reader');
    const libraryErrorDiv = document.getElementById('libraryError');
    const feedbackPanel = document.getElementById('feedbackPanel');
    const statusMessageEl = document.getElementById('statusMessage');
    const clientNameDisplay = document.getElementById('clientNameDisplay');
    const ticketDetails = document.getElementById('ticketDetails');
    const eventName = document.getElementById('eventName');
    const resetBtn = document.getElementById('resetScannerBtn');
    const statusIcon = document.getElementById('statusIcon');

    // ----- VÉRIFICATION DE LA LIBRAIRIE -----
    function isLibraryAvailable() {
      return typeof Html5Qrcode !== 'undefined';
    }

    function displayLibraryError() {
      if (readerDiv) readerDiv.style.display = 'none';
      if (libraryErrorDiv) libraryErrorDiv.classList.remove('hidden-feedback');
    }

    // ----- FONCTIONS UTILITAIRES -----
    function hideFeedback() {
      feedbackPanel.classList.add('hidden-feedback');
    }

    function showFeedback() {
      feedbackPanel.classList.remove('hidden-feedback');
    }

    function resetFeedbackClasses() {
      feedbackPanel.classList.remove('feedback-success', 'feedback-warning', 'feedback-error');
    }

    // Vibrer si supporté
    function vibrateIfPossible(pattern) {
      if (window.navigator && window.navigator.vibrate) {
        window.navigator.vibrate(pattern);
      }
    }

    // Réinitialiser l'interface après un scan pour en refaire un autre
    function resetForNewScan() {
      hideFeedback();
      resetFeedbackClasses();
      statusMessageEl.textContent = '';
      clientNameDisplay.textContent = '';
      ticketDetails.textContent = '';
      eventName.textContent = '';
      isProcessing = false;
      // Relancer la caméra si elle était arrêtée et initialisée
      if (html5QrCode && html5QrCode.isScanning === false && scannerInitialized) {
        html5QrCode.resume();
      }
    }

    // Arrêter le scan temporairement (évite les scans multiples)
    function pauseScanner() {
      if (html5QrCode && html5QrCode.isScanning) {
        html5QrCode.pause();
      }
    }

    // Fonction appelée quand un QR code est détecté
    async function onScanSuccess(decodedText, decodedResult) {
      if (isProcessing) return;
      
      let verifyUrl = decodedText.trim();
      if (!verifyUrl.startsWith('/') && !verifyUrl.startsWith('http')) {
        verifyUrl = '/' + verifyUrl;
      }

      isProcessing = true;
      pauseScanner();
      vibrateIfPossible(50);

      resetFeedbackClasses();
      statusMessageEl.textContent = 'Vérification...';
      clientNameDisplay.textContent = '';
      ticketDetails.textContent = '';
      eventName.textContent = '';
      statusIcon.textContent = '⏳';
      feedbackPanel.classList.add('feedback-warning'); // temporaire
      showFeedback();

      try {
        const response = await fetch(verifyUrl, {
          method: 'POST',
          headers: {
            'X-CSRFToken': csrfToken,
            'Content-Type': 'application/json',
            'Accept': 'application/json'
          },
        });

        const data = await response.json();
        resetFeedbackClasses();
        
        if (data.status === 'success') {
          vibrateIfPossible([100, 50, 100]);
          statusMessageEl.textContent = '✅ ACCÈS AUTORISÉ';
          statusMessageEl.className = 'status-badge bg-success';
          clientNameDisplay.textContent = data.client || '';
          ticketDetails.textContent = `${data.type || ''}`;
          eventName.textContent = data.event || '';
          statusIcon.textContent = '🎉';
          feedbackPanel.classList.add('feedback-success');
        } 
        else if (data.status === 'warning') {
          vibrateIfPossible([200, 100, 200]);
          statusMessageEl.textContent = '⚠️ DÉJÀ UTILISÉ';
          statusMessageEl.className = 'status-badge bg-warning';
          clientNameDisplay.textContent = data.client || '';
          ticketDetails.textContent = data.message || 'Ce ticket a déjà été scanné';
          eventName.textContent = '';
          statusIcon.textContent = '⚠️';
          feedbackPanel.classList.add('feedback-warning');
        } 
        else {
          vibrateIfPossible([400]);
          statusMessageEl.textContent = '❌ INVALIDE / ANNULÉ';
          statusMessageEl.className = 'status-badge bg-error';
          clientNameDisplay.textContent = data.client || '';
          ticketDetails.textContent = data.message || 'Ticket non reconnu';
          eventName.textContent = '';
          statusIcon.textContent = '🚫';
          feedbackPanel.classList.add('feedback-error');
        }

        if (data.message && data.status !== 'warning' && data.status !== 'error') {
          ticketDetails.textContent += ` - ${data.message}`;
        }
        
      } catch (error) {
        console.error('Erreur API:', error);
        vibrateIfPossible([500, 200, 500]);
        resetFeedbackClasses();
        statusMessageEl.textContent = '❌ ERREUR SYSTÈME';
        statusMessageEl.className = 'status-badge bg-error';
        clientNameDisplay.textContent = '';
        ticketDetails.textContent = 'Impossible de contacter le serveur.';
        eventName.textContent = '';
        statusIcon.textContent = '📡';
        feedbackPanel.classList.add('feedback-error');
      } finally {
        // isProcessing reste true jusqu'au reset
      }
    }

    function onScanError(errorMessage) {
      // On ignore les erreurs courantes de scan (pas de QR détecté) pour ne pas polluer la console
      if (!errorMessage.includes("No MultiFormat Readers were able to detect the code")) {
        console.warn('html5-qrcode error:', errorMessage);
      }
    }

    // Initialiser le scanner avec fallback sur caméra utilisateur si environment échoue
    async function initScanner() {
      if (!isLibraryAvailable()) {
        console.error('Html5Qrcode non disponible.');
        displayLibraryError();
        return;
      }

      // Éviter les multiples tentatives d'initialisation simultanées
      if (isStarting) {
        console.log("Démarrage déjà en cours, ignoré.");
        return;
      }
      
      // Si le scanner est déjà actif, on ne fait rien
      if (html5QrCode && html5QrCode.isScanning) {
        console.log("Scanner déjà en cours d'exécution.");
        scannerInitialized = true;
        libraryErrorDiv.classList.add('hidden-feedback');
        readerDiv.style.display = 'block';
        return;
      }

      isStarting = true;

      try {
        // Nettoyer toute instance précédente si elle existe mais n'est pas en train de scanner
        if (html5QrCode) {
          try {
            if (html5QrCode.isScanning) {
              await html5QrCode.stop();
            }
          } catch (e) {
            // Ignorer les erreurs de stop
          }
          html5QrCode = null;
        }

        html5QrCode = new Html5Qrcode(scannerContainerId);
      } catch (e) {
        console.error('Erreur création Html5Qrcode:', e);
        displayLibraryError();
        isStarting = false;
        return;
      }
      
      const config = {
        fps: 10,
        qrbox: { width: 250, height: 250 },
        aspectRatio: 1.0,
        rememberLastUsedCamera: true,
        showTorchButtonIfSupported: true,
      };

      // Tentative caméra arrière (environment), puis caméra frontale (user)
      html5QrCode.start(
        { facingMode: "environment" },
        config,
        onScanSuccess,
        onScanError
      ).then(() => {
        scannerInitialized = true;
        libraryErrorDiv.classList.add('hidden-feedback');
        readerDiv.style.display = 'block';
        isStarting = false;
      }).catch(async (err) => {
        console.warn("Caméra arrière non trouvée ou erreur, essai webcam standard...", err);
        try {
          // Vérifier si l'instance existe toujours et n'est pas déjà en train de scanner
          if (html5QrCode && !html5QrCode.isScanning) {
            await html5QrCode.start(
              { facingMode: "user" },
              config,
              onScanSuccess,
              onScanError
            );
            scannerInitialized = true;
            libraryErrorDiv.classList.add('hidden-feedback');
            readerDiv.style.display = 'block';
          }
        } catch (secondErr) {
          console.error("Échec du démarrage avec caméra utilisateur :", secondErr);
          // Afficher un message d'erreur convivial
          alert("Aucune caméra accessible. Vérifiez les permissions ou connectez une webcam.");
          // On pourrait aussi afficher libraryErrorDiv avec un message adapté
          displayLibraryError();
          // Modifier le message d'erreur pour être plus précis
          const errorMsg = libraryErrorDiv.querySelector('p');
          if (errorMsg) {
            errorMsg.textContent = "Aucune caméra détectée ou autorisation refusée. Vérifiez les paramètres de votre navigateur.";
          }
        } finally {
          isStarting = false;
        }
      });
    }

    // ----- RESET MANUEL -----
    resetBtn.addEventListener('click', function() {
      resetForNewScan();
    });

    // Démarrer au chargement de la page avec vérification explicite
    window.addEventListener('load', function() {
      // Vérification immédiate de la disponibilité de la librairie
      if (!isLibraryAvailable()) {
        console.error('Html5Qrcode est indéfini au moment du chargement.');
        displayLibraryError();
        return;
      }
      
      // Petit délai pour s'assurer que le DOM est prêt
      setTimeout(() => {
        initScanner();
      }, 100);
    });

    // Nettoyer le scanner si la page est quittée (pour libérer la caméra)
    window.addEventListener('beforeunload', function() {
      if (html5QrCode && html5QrCode.isScanning) {
        html5QrCode.stop().catch(e => console.warn);
      }
    });

    // Gestion du changement de visibilité
    document.addEventListener('visibilitychange', function() {
      if (document.hidden && html5QrCode && html5QrCode.isScanning) {
        html5QrCode.pause();
      } else if (!document.hidden && html5QrCode && html5QrCode.isScanning === false && !isProcessing && scannerInitialized) {
        html5QrCode.resume();
      }
    });
  })();
</script>
{% endblock %}