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

{% block title %}Confirmation du vote | {{ event.titre }}{% endblock %}

{% block content %}
<div class="fixed inset-0 bg-black overflow-hidden flex items-center justify-center p-4"
     style="touch-action: none; -webkit-overflow-scrolling: none; overscroll-behavior: none;">
  
  {# Spotlight radial gradient #}
  <div class="absolute inset-0 pointer-events-none" 
       style="background: radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.25) 0%, rgba(0,0,0,0) 70%);">
  </div>
  
  {# Carte centrale #}
  <div class="relative z-10 w-full max-w-md mx-auto text-center">
    
    {# Photo du candidat #}
    <div class="relative mx-auto w-48 h-48 md:w-56 md:h-56 mb-6">
      <div class="absolute inset-0 rounded-full bg-gradient-to-br from-yellow-400 via-amber-500 to-yellow-600 animate-pulse"
           style="animation: breathe 3s infinite ease-in-out; padding: 3px;">
        <div class="w-full h-full rounded-full overflow-hidden border-4 border-black">
          <img src="{{ candidate.photo.url }}" 
               alt="{{ candidate.nom_complet }}"
               class="w-full h-full object-cover"
               onerror="this.src='{% static 'img/placeholder-candidat.jpg' %}'">
        </div>
      </div>
    </div>

    {# Titre et sous-titre #}
    <h1 class="font-['Cinzel'] text-4xl md:text-5xl text-transparent bg-clip-text bg-gradient-to-b from-yellow-200 to-yellow-500 mb-2 tracking-wide"
        style="font-family: 'Cinzel', serif;">
      Confirmez votre choix
    </h1>
    
    <p class="text-gray-300 text-lg md:text-xl mb-8 font-light">
      Votre voix pour <span class="text-yellow-400 font-semibold">{{ category.nom }}</span><br>
      sera gravée de manière <span class="italic">irrévocable</span>.
    </p>

    {# Nom du candidat en rappel #}
    <div class="mb-10">
      <span class="text-white text-2xl md:text-3xl font-medium border-b border-yellow-600/50 pb-1">
        {{ candidate.nom_complet }}
      </span>
    </div>

    {# Formulaire de soumission (initiallement caché ou déclenché par le slider) #}
    <form id="vote-form" method="post" action="{% url 'awards_vitrine:vote_submit' %}" class="hidden">
      {% csrf_token %}
      <input type="hidden" name="candidat_id" value="{{ candidate.id }}">
      <input type="hidden" name="fingerprint" id="fingerprint-input">
    </form>

    {# Slider de validation #}
    <div class="relative w-full max-w-sm mx-auto">
      <div id="slider-container" 
           class="relative h-16 bg-gray-900/80 rounded-full border border-yellow-700/50 overflow-hidden backdrop-blur-sm"
           style="box-shadow: 0 0 20px rgba(212,175,55,0.2);">
        
        {# Texte de fond "glisser pour confirmer" #}
        <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
          <span class="text-yellow-400/60 text-sm md:text-base font-medium tracking-wider" id="slide-text">
            Glisser pour confirmer →
          </span>
        </div>
        
        {# Piste de progression #}
        <div id="progress-bar" 
             class="absolute inset-y-0 left-0 bg-gradient-to-r from-yellow-600 to-yellow-400 opacity-20 rounded-full transition-all duration-75"
             style="width: 0%;">
        </div>
        
        {# Poignée (thumb) #}
        <div id="slider-thumb" 
             class="absolute top-1 left-1 w-14 h-14 bg-gradient-to-br from-yellow-300 to-yellow-600 rounded-full shadow-xl flex items-center justify-center cursor-grab active:cursor-grabbing transition-transform duration-75 border-2 border-yellow-200"
             style="transform: translateX(0); touch-action: pan-y;"
             role="slider"
             aria-valuemin="0"
             aria-valuemax="100"
             aria-valuenow="0">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-black" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M9 5l7 7-7 7" />
          </svg>
        </div>
      </div>
      
      {# Message d'erreur (si échec fingerprint) #}
      <p id="error-message" class="text-red-400 text-sm mt-2 hidden"></p>
    </div>
    
    {# Lien de retour discret #}
    <div class="mt-8">
      <a href="{% url 'awards_vitrine:event_detail' event.id %}" 
         class="text-gray-500 text-sm hover:text-gray-300 transition">
        ← Retour à l'événement
      </a>
    </div>
  </div>
  
  {# Overlay de transition (fondu au noir pendant soumission) #}
  <div id="transition-overlay" 
       class="fixed inset-0 bg-black opacity-0 pointer-events-none transition-opacity duration-500 z-50">
  </div>
</div>

<style>
  /* Animation respiration pour la bordure photo */
  @keyframes breathe {
    0%, 100% { box-shadow: 0 0 15px rgba(212, 175, 55, 0.5), 0 0 30px rgba(212, 175, 55, 0.3); }
    50% { box-shadow: 0 0 25px rgba(212, 175, 55, 0.9), 0 0 50px rgba(212, 175, 55, 0.6); }
  }
  
  /* Police Cinzel importée si pas déjà dans base */
  @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&display=swap');
  
  /* Assure qu'aucun scroll n'est possible */
  html, body {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }
</style>

<script>
  (function() {
    'use strict';
    
    // --- Éléments DOM ---
    const container = document.getElementById('slider-container');
    const thumb = document.getElementById('slider-thumb');
    const progressBar = document.getElementById('progress-bar');
    const slideText = document.getElementById('slide-text');
    const form = document.getElementById('vote-form');
    const fingerprintInput = document.getElementById('fingerprint-input');
    const errorMsg = document.getElementById('error-message');
    const overlay = document.getElementById('transition-overlay');
    
    // Variables de contrôle du slider
    let isDragging = false;
    let startX = 0;
    let currentTranslate = 0;
    let maxTranslate = 0;
    let containerRect = null;
    let thumbWidth = thumb.offsetWidth;
    let containerWidth = container.offsetWidth;
    let isCompleted = false;
    let fingerprintPromise = null;
    
    // --- Initialisation FingerprintJS ---
    // La lib est supposée chargée dans base.html (window.FingerprintJS)
    if (typeof FingerprintJS !== 'undefined') {
      fingerprintPromise = FingerprintJS.load()
        .then(fp => fp.get())
        .then(result => {
          fingerprintInput.value = result.visitorId;
          console.debug('Fingerprint capturé:', result.visitorId);
          return result.visitorId;
        })
        .catch(err => {
          console.error('Erreur FingerprintJS:', err);
          errorMsg.textContent = 'Impossible de sécuriser votre vote. Veuillez réessayer.';
          errorMsg.classList.remove('hidden');
          fingerprintInput.value = 'error_' + Date.now(); // fallback
        });
    } else {
      console.warn('FingerprintJS non disponible, utilisation fallback.');
      fingerprintInput.value = 'fallback_' + Date.now() + '_' + Math.random().toString(36);
    }
    
    // --- Recalculer les dimensions lors du resize/orientation change ---
    function updateDimensions() {
      containerRect = container.getBoundingClientRect();
      thumbWidth = thumb.offsetWidth;
      containerWidth = container.offsetWidth;
      maxTranslate = containerWidth - thumbWidth - 4; // padding 2px de chaque côté
      // Réinitialiser la position si pas en cours de drag
      if (!isDragging && !isCompleted) {
        setTranslate(0);
      }
    }
    
    // --- Définir la translation et mettre à jour l'UI ---
    function setTranslate(x) {
      // Limites
      x = Math.max(0, Math.min(x, maxTranslate));
      currentTranslate = x;
      
      // Appliquer le transform
      thumb.style.transform = `translateX(${x}px)`;
      
      // Mettre à jour la barre de progression
      const percent = (x / maxTranslate) * 100;
      progressBar.style.width = `${percent}%`;
      
      // Changer l'opacité du texte
      if (percent > 30) {
        slideText.style.opacity = '0.3';
      } else {
        slideText.style.opacity = '1';
      }
      
      // Vérifier si on a atteint la fin
      if (x >= maxTranslate - 2) { // tolérance
        if (!isCompleted) {
          isCompleted = true;
          completeVote();
        }
      } else {
        isCompleted = false;
      }
    }
    
    // --- Gestion des événements de drag ---
    function onDragStart(e) {
      if (isCompleted) return;
      
      // Empêcher le scroll et la sélection
      e.preventDefault();
      
      // Récupérer la position initiale (clientX)
      const clientX = e.type.startsWith('touch') ? e.touches[0].clientX : e.clientX;
      
      isDragging = true;
      startX = clientX - currentTranslate;
      container.classList.add('cursor-grabbing');
      thumb.classList.add('cursor-grabbing');
      
      // Mettre à jour les dimensions au cas où
      updateDimensions();
      
      // Attacher les écouteurs globaux
      window.addEventListener('mousemove', onDragMove);
      window.addEventListener('touchmove', onDragMove, { passive: false });
      window.addEventListener('mouseup', onDragEnd);
      window.addEventListener('touchend', onDragEnd);
    }
    
    function onDragMove(e) {
      if (!isDragging || isCompleted) return;
      
      e.preventDefault(); // Empêche le scroll
      
      const clientX = e.type.startsWith('touch') ? e.touches[0].clientX : e.clientX;
      const newX = clientX - startX;
      
      setTranslate(newX);
    }
    
    function onDragEnd(e) {
      if (!isDragging) return;
      
      isDragging = false;
      container.classList.remove('cursor-grabbing');
      thumb.classList.remove('cursor-grabbing');
      
      // Retirer les écouteurs globaux
      window.removeEventListener('mousemove', onDragMove);
      window.removeEventListener('touchmove', onDragMove);
      window.removeEventListener('mouseup', onDragEnd);
      window.removeEventListener('touchend', onDragEnd);
      
      // Si pas complété, retour à 0 avec animation douce
      if (!isCompleted) {
        // Animation de retour
        thumb.style.transition = 'transform 0.3s ease-out';
        progressBar.style.transition = 'width 0.3s ease-out';
        setTranslate(0);
        setTimeout(() => {
          thumb.style.transition = '';
          progressBar.style.transition = '';
        }, 300);
      }
    }
    
    // --- Finalisation du vote ---
    async function completeVote() {
      // Bloquer toute nouvelle interaction
      isCompleted = true;
      isDragging = false;
      
      // Animation visuelle de succès
      thumb.style.transition = 'transform 0.1s';
      progressBar.style.transition = 'width 0.1s';
      setTranslate(maxTranslate);
      
      // Changer l'icône du thumb en check
      const svg = thumb.querySelector('svg');
      if (svg) {
        svg.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />';
      }
      
      // Vérifier que le fingerprint est prêt
      if (fingerprintPromise) {
        try {
          await fingerprintPromise;
        } catch (e) {
          // déjà géré
        }
      }
      
      // Si toujours pas de valeur, mettre un fallback
      if (!fingerprintInput.value) {
        fingerprintInput.value = 'timeout_' + Date.now();
      }
      
      // Afficher l'overlay de transition
      overlay.style.opacity = '1';
      overlay.style.pointerEvents = 'auto';
      
      // Petit délai pour que l'animation de fin soit visible
      setTimeout(() => {
        // Soumettre le formulaire
        form.submit();
        
        // Si la soumission prend du temps, on reste sur l'overlay
        // En cas d'erreur réseau, on pourrait réactiver, mais on suppose que ça fonctionne.
      }, 400);
    }
    
    // --- Réinitialisation après échec éventuel (non utilisé ici mais pour robustesse) ---
    function resetSlider() {
      isCompleted = false;
      setTranslate(0);
      const svg = thumb.querySelector('svg');
      if (svg) {
        svg.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M9 5l7 7-7 7" />';
      }
      overlay.style.opacity = '0';
      overlay.style.pointerEvents = 'none';
    }
    
    // --- Attacher les écouteurs au thumb ---
    thumb.addEventListener('mousedown', onDragStart);
    thumb.addEventListener('touchstart', onDragStart, { passive: false });
    
    // Empêcher le drag natif des images
    thumb.addEventListener('dragstart', (e) => e.preventDefault());
    
    // Mise à jour des dimensions au chargement et au resize
    window.addEventListener('resize', () => {
      updateDimensions();
      if (!isDragging && !isCompleted) {
        setTranslate(0);
      }
    });
    
    // Initialisation
    updateDimensions();
    
    // S'assurer que le formulaire n'est pas soumis accidentellement
    form.addEventListener('submit', (e) => {
      // Si on n'a pas encore le fingerprint, on pourrait attendre mais le bouton n'est pas accessible
      // Double vérification
      if (!fingerprintInput.value) {
        e.preventDefault();
        fingerprintInput.value = 'emergency_' + Date.now();
        form.submit();
      }
    });
    
    // Gérer le cas où l'utilisateur tente de quitter la page pendant le drag
    window.addEventListener('beforeunload', (e) => {
      if (isDragging || isCompleted) {
        // Message standard (la plupart des navigateurs l'ignorent mais bon)
        e.preventDefault();
        e.returnValue = '';
      }
    });
    
    // Sécurité supplémentaire : désactiver le clic droit sur le slider
    container.addEventListener('contextmenu', (e) => e.preventDefault());
    
  })();
</script>
{% endblock %}