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

{% block title %}Vote confirmé | {{ site_config.nom_plateforme }}{% endblock %}

{% block content %}
<div class="fixed inset-0 bg-black flex items-center justify-center p-4 overflow-hidden">
  
  {# Toile de fond étoilée discrète #}
  <div class="absolute inset-0 opacity-20 pointer-events-none"
       style="background: radial-gradient(circle at 30% 40%, rgba(212,175,55,0.15) 0%, transparent 50%),
              radial-gradient(circle at 70% 60%, rgba(255,215,0,0.1) 0%, transparent 50%);">
  </div>
  
  {# Contenu principal #}
  <div class="relative z-10 w-full max-w-md mx-auto text-center">
    
    {# Sceau animé #}
    <div class="relative mx-auto w-28 h-28 md:w-32 md:h-32 mb-8">
      <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 2.5s infinite ease-in-out; box-shadow: 0 0 40px rgba(212,175,55,0.6);">
      </div>
      <div class="absolute inset-1 rounded-full bg-black flex items-center justify-center">
        <svg class="w-16 h-16 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
      </div>
      {# Anneau extérieur #}
      <div class="absolute -inset-1 rounded-full border border-yellow-600/30 animate-spin-slow"></div>
    </div>
    
    {# Titre principal #}
    <h1 class="font-['Cinzel'] text-5xl md:text-6xl text-transparent bg-clip-text bg-gradient-to-b from-yellow-200 to-yellow-500 mb-3 tracking-wide"
        style="font-family: 'Cinzel', serif; text-shadow: 0 0 20px rgba(212,175,55,0.4);">
      Votre Voix<br>est Scellée
    </h1>
    
    {# Message de gratitude #}
    <p class="text-gray-300 text-lg md:text-xl mb-2 font-['Montserrat']">
      Merci d'avoir contribué au prestige de notre communauté.
    </p>
    <p class="text-yellow-400/80 text-base mb-10 font-light">
      Votre participation est un pilier de l'excellence universitaire.
    </p>
    
    {# Actions #}
    <div class="space-y-4">
      {# Bouton principal : continuer les votes #}
      <a href="{% url 'awards_vitrine:event_detail' event_id %}" 
         class="block w-full py-4 px-6 rounded-full text-black font-bold text-lg uppercase tracking-wider 
                bg-gradient-to-r from-yellow-400 to-yellow-600 hover:from-yellow-300 hover:to-yellow-500 
                transform transition-all duration-300 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-yellow-500/50
                shadow-[0_0_30px_rgba(212,175,55,0.5)] animate-pulse-soft"
         style="animation: pulse-soft 2s infinite;">
        CONTINUER LES VOTES
      </a>
      
      {# Bouton secondaire : partager #}
      <button id="share-button" 
              class="w-full py-3 px-6 rounded-full border border-yellow-600/50 text-yellow-400 font-medium
                     bg-transparent hover:bg-yellow-900/20 transition-all duration-300
                     focus:outline-none focus:ring-2 focus:ring-yellow-500/30">
        <span class="flex items-center justify-center gap-2">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"></path>
          </svg>
          Inviter mes camarades
        </span>
      </button>
      
      {# Message de fallback pour partage (caché par défaut) #}
      <div id="share-fallback-message" class="hidden text-sm text-yellow-400/70 mt-2">
        Lien copié ! Partagez-le avec vos amis.
      </div>
    </div>
    
    {# Petite signature #}
    <div class="mt-12 text-gray-500 text-xs">
      {{ site_config.nom_plateforme }} • Vote anonyme sécurisé
    </div>
  </div>
</div>

<style>
  /* Polices */
  @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Montserrat:wght@300;400;500&display=swap');
  
  /* Animations */
  @keyframes breathe {
    0%, 100% { transform: scale(1); box-shadow: 0 0 30px rgba(212,175,55,0.5); }
    50% { transform: scale(1.02); box-shadow: 0 0 50px rgba(212,175,55,0.9); }
  }
  
  @keyframes pulse-soft {
    0%, 100% { box-shadow: 0 0 20px rgba(212,175,55,0.4); }
    50% { box-shadow: 0 0 40px rgba(212,175,55,0.8); }
  }
  
  @keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  
  .animate-spin-slow {
    animation: spin-slow 12s linear infinite;
  }
  
  /* Pas de scroll */
  html, body {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }
</style>

{# Canvas Confetti depuis CDN (léger, pas de fichier local) #}
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1"></script>

<script>
  (function() {
    'use strict';
    
    // --- Configuration des confettis dorés et argentés ---
    function launchConfetti() {
      // Confettis dorés
      confetti({
        particleCount: 120,
        spread: 100,
        origin: { y: 0.6 },
        colors: ['#FFD700', '#DAA520', '#B8860B', '#F0E68C', '#FFF8DC'],
        startVelocity: 25,
        decay: 0.9,
        ticks: 200
      });
      
      // Confettis argentés
      confetti({
        particleCount: 80,
        spread: 80,
        origin: { y: 0.6, x: 0.3 },
        colors: ['#C0C0C0', '#E0E0E0', '#A9A9A9', '#D3D3D3', '#F5F5F5'],
        startVelocity: 30,
        decay: 0.9,
        ticks: 200
      });
      
      confetti({
        particleCount: 80,
        spread: 80,
        origin: { y: 0.6, x: 0.7 },
        colors: ['#C0C0C0', '#E0E0E0', '#A9A9A9', '#D3D3D3', '#F5F5F5'],
        startVelocity: 30,
        decay: 0.9,
        ticks: 200
      });
      
      // Quelques confettis supplémentaires après un court délai
      setTimeout(() => {
        confetti({
          particleCount: 60,
          spread: 120,
          origin: { y: 0.5 },
          colors: ['#FFD700', '#B8860B', '#DAA520'],
          startVelocity: 20
        });
      }, 200);
      
      setTimeout(() => {
        confetti({
          particleCount: 40,
          spread: 150,
          origin: { y: 0.5, x: 0.5 },
          colors: ['#C0C0C0', '#E0E0E0', '#F5F5F5'],
          startVelocity: 25
        });
      }, 400);
    }
    
    // Lancer les confettis au chargement
    window.addEventListener('load', launchConfetti);
    // Si déjà chargé, lancer immédiatement
    if (document.readyState === 'complete') {
      launchConfetti();
    }
    
    // --- Gestion du partage (Web Share API + fallback) ---
    const shareButton = document.getElementById('share-button');
    const fallbackMsg = document.getElementById('share-fallback-message');
    
    // Récupérer l'URL de l'événement (construite avec event_id depuis Django)
    const eventUrl = "{{ request.build_absolute_uri|slice:':-1' }}{% url 'awards_vitrine:event_detail' event_id %}";
    const shareTitle = "{{ site_config.nom_plateforme }}";
    const shareText = "Je viens de voter pour les Awards ! Fais entendre ta voix toi aussi.";
    
    async function handleShare() {
      // Vérifier si l'API Web Share est supportée
      if (navigator.share) {
        try {
          await navigator.share({
            title: shareTitle,
            text: shareText,
            url: eventUrl,
          });
          console.log('Partage réussi');
        } catch (err) {
          // L'utilisateur a annulé ou erreur => ne rien faire
          if (err.name !== 'AbortError') {
            console.error('Erreur de partage:', err);
          }
        }
      } else {
        // Fallback : copier le lien dans le presse-papier
        try {
          await navigator.clipboard.writeText(eventUrl);
          fallbackMsg.classList.remove('hidden');
          setTimeout(() => {
            fallbackMsg.classList.add('hidden');
          }, 3000);
        } catch (clipErr) {
          // Fallback ultime : prompt
          prompt('Copiez ce lien pour inviter vos camarades :', eventUrl);
        }
      }
    }
    
    shareButton.addEventListener('click', handleShare);
    
    // Empêcher le double-tap zoom sur le bouton (optionnel)
    shareButton.addEventListener('touchstart', (e) => {
      // Juste pour éviter le zoom double-tap si désiré
    }, { passive: true });
    
  })();
</script>
{% endblock %}