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

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

{% block content %}
<link href="https://fonts.googleapis.com/css2?family=Clash+Display:wght@600;700&family=Syne:wght@400;700;800&display=swap" rel="stylesheet">

<div class="bf-root">

  <!-- Toile de fond festive -->
  <canvas class="bf-confetti-canvas" id="confettiCanvas"></canvas>

  <!-- Orbes de lumière -->
  <div class="bf-orb bf-orb-1"></div>
  <div class="bf-orb bf-orb-2"></div>
  <div class="bf-orb bf-orb-3"></div>

  <!-- Grille de fond -->
  <div class="bf-grid-bg"></div>

  <!-- Header -->
  <header class="bf-header">
    <div class="bf-logo-badge">
      <span class="bf-logo-dot"></span>
      BILLETFEST — SCANNER
      <span class="bf-logo-dot"></span>
    </div>

    <div class="bf-welcome-block">
      <p class="bf-greeting-label">Bienvenue,</p>
      <h1 class="bf-name">{{ user_full_name }}</h1>
      <div class="bf-status-line">
        <span class="bf-status-dot"></span>
        <span class="bf-status-text">Système actif · Contrôle en temps réel</span>
      </div>
    </div>
  </header>

  <!-- Carte compteur -->
  <main class="bf-main">
    <div class="bf-card">
      <div class="bf-card-shine"></div>

      <div class="bf-card-header">
        <span class="bf-card-tag">📊 Aujourd'hui</span>
        <span class="bf-card-live">
          <span class="bf-pulse-ring"></span>
          LIVE
        </span>
      </div>

      <p class="bf-card-label">Tickets validés</p>

      <div class="bf-counter-wrap">
        <div class="bf-counter" id="animCounter">{{ scans_jour }}</div>
        <div class="bf-counter-shadow">{{ scans_jour }}</div>
      </div>

      <p class="bf-since">depuis 00:00 · minuit</p>

      <div class="bf-progress-track">
        <div class="bf-progress-bar" style="width: min(100%, {{ scans_jour|default:0 }}%)">
          <span class="bf-progress-glow"></span>
        </div>
      </div>
      <div class="bf-progress-label">Objectif journalier</div>

      <!-- Décorations internes de la carte -->
      <div class="bf-card-deco bf-card-deco-1">🎟</div>
      <div class="bf-card-deco bf-card-deco-2">✦</div>
    </div>

    <!-- CTA principal -->
    <a href="{% url 'scanner:active' %}" class="bf-cta">
      <div class="bf-cta-bg"></div>
      <div class="bf-cta-shimmer"></div>
      <span class="bf-cta-icon">📷</span>
      <span class="bf-cta-text">Ouvrir le Scanner</span>
      <span class="bf-cta-arrow">→</span>
    </a>

    <!-- Badges info -->
    <div class="bf-badges">
      <div class="bf-badge">🔒 Accès sécurisé</div>
      <div class="bf-badge">⚡ Scan instantané</div>
      <div class="bf-badge">🎉 Mode festival</div>
    </div>
  </main>

  <!-- Footer -->
  <footer class="bf-footer">
    BilletFest © 2025 &nbsp;·&nbsp; Contrôle d'accès sécurisé
  </footer>
</div>

<style>
/* ============================================
   RESET & ROOT
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.bf-root {
  --c-bg:        #0b0614;
  --c-surface:   #13092a;
  --c-purple:    #8b2fff;
  --c-pink:      #ff2d78;
  --c-yellow:    #ffda00;
  --c-cyan:      #00e5ff;
  --c-green:     #00f5a0;
  --c-text:      #f0e8ff;
  --c-muted:     rgba(240,232,255,.45);
  --c-border:    rgba(139,47,255,.3);

  font-family: 'Syne', sans-serif;
  min-height: 100vh;
  background: var(--c-bg);
  color: var(--c-text);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ============================================
   ARRIÈRE-PLAN
   ============================================ */
.bf-confetti-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .55;
}

.bf-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.bf-orb-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(139,47,255,.35) 0%, transparent 70%);
  top: -120px; right: -100px;
  animation: orbDrift1 14s ease-in-out infinite alternate;
}
.bf-orb-2 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(255,45,120,.28) 0%, transparent 70%);
  bottom: -80px; left: -80px;
  animation: orbDrift2 18s ease-in-out infinite alternate;
}
.bf-orb-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(0,229,255,.2) 0%, transparent 70%);
  top: 45%; left: 50%;
  transform: translate(-50%,-50%);
  animation: orbDrift3 10s ease-in-out infinite alternate;
}

@keyframes orbDrift1 {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(-40px, 40px) scale(1.12); }
}
@keyframes orbDrift2 {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(30px,-50px) scale(1.08); }
}
@keyframes orbDrift3 {
  from { transform: translate(-50%,-50%) scale(.9); opacity:.6; }
  to   { transform: translate(-50%,-50%) scale(1.1); opacity:1; }
}

.bf-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(139,47,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,47,255,.07) 1px, transparent 1px);
  background-size: 44px 44px;
  z-index: 0;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, black 0%, transparent 100%);
}

/* ============================================
   HEADER
   ============================================ */
.bf-header {
  position: relative; z-index: 10;
  text-align: center;
  padding: 52px 24px 16px;
  width: 100%;
}

.bf-logo-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px;
  background: rgba(139,47,255,.15);
  border: 1px solid rgba(139,47,255,.4);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  color: rgba(240,232,255,.7);
  margin-bottom: 32px;
  backdrop-filter: blur(12px);
}
.bf-logo-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-purple);
  box-shadow: 0 0 8px var(--c-purple);
  animation: blink 2.4s ease-in-out infinite;
}
.bf-logo-dot:last-child { animation-delay: 1.2s; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

.bf-welcome-block { margin-bottom: 8px; }

.bf-greeting-label {
  font-size: 14px;
  letter-spacing: .12em;
  color: var(--c-muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.bf-name {
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(2.8rem, 9vw, 5rem);
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(120deg, #ff2d78 0%, #ffda00 35%, #8b2fff 65%, #00e5ff 100%);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: nameGradient 6s ease infinite;
  filter: drop-shadow(0 0 30px rgba(255,45,120,.4));
}
@keyframes nameGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.bf-status-line {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--c-muted);
}
.bf-status-dot {
  width: 8px; height: 8px;
  background: var(--c-green);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--c-green);
  animation: statusPulse 2s ease-in-out infinite;
}
@keyframes statusPulse {
  0%,100% { box-shadow: 0 0 6px var(--c-green); }
  50%      { box-shadow: 0 0 18px var(--c-green), 0 0 30px rgba(0,245,160,.3); }
}

/* ============================================
   MAIN / CARTE
   ============================================ */
.bf-main {
  position: relative; z-index: 10;
  width: 100%; max-width: 480px;
  padding: 20px 24px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  flex: 1;
}

.bf-card {
  position: relative;
  width: 100%;
  background: linear-gradient(135deg, rgba(139,47,255,.18) 0%, rgba(255,45,120,.08) 50%, rgba(0,229,255,.1) 100%);
  border: 1px solid rgba(139,47,255,.35);
  border-radius: 28px;
  padding: 36px 32px 32px;
  overflow: hidden;
  backdrop-filter: blur(20px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 30px 80px rgba(0,0,0,.5),
    0 0 60px rgba(139,47,255,.12);
  transition: transform .3s ease, box-shadow .3s ease;
}
.bf-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.09) inset,
    0 40px 100px rgba(0,0,0,.55),
    0 0 80px rgba(139,47,255,.22);
}

/* Reflet de la carte */
.bf-card-shine {
  position: absolute;
  top: 0; left: -60%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  animation: cardShine 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cardShine {
  0%   { left: -60%; }
  60%,100% { left: 120%; }
}

.bf-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.bf-card-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  color: rgba(240,232,255,.6);
  background: rgba(139,47,255,.2);
  border: 1px solid rgba(139,47,255,.3);
  padding: 4px 12px;
  border-radius: 999px;
}
.bf-card-live {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;
  color: var(--c-green);
}
.bf-pulse-ring {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--c-green);
  border-radius: 50%;
  position: relative;
}
.bf-pulse-ring::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--c-green);
  animation: ringPulse 1.4s ease-out infinite;
  opacity: 0;
}
@keyframes ringPulse {
  0%   { transform: scale(.6); opacity:.8; }
  100% { transform: scale(2.2); opacity:0; }
}

.bf-card-label {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 4px;
}

.bf-counter-wrap {
  position: relative;
  text-align: center;
  margin: 8px 0 6px;
}
.bf-counter {
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(6rem, 20vw, 8rem);
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(180deg, #ffffff 0%, rgba(139,47,255,.9) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 4px 24px rgba(139,47,255,.6));
  animation: counterPop .9s cubic-bezier(.34,1.3,.64,1) both;
}
@keyframes counterPop {
  0%   { transform: scale(.6); opacity:0; filter: blur(12px) drop-shadow(0 0 0 transparent); }
  60%  { transform: scale(1.08); filter: blur(0) drop-shadow(0 4px 40px rgba(139,47,255,.9)); }
  100% { transform: scale(1); opacity:1; filter: blur(0) drop-shadow(0 4px 24px rgba(139,47,255,.6)); }
}
.bf-counter-shadow {
  position: absolute;
  top: 14px; left: 0; right: 0;
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(6rem, 20vw, 8rem);
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(139,47,255,.2);
  filter: blur(2px);
  z-index: -1;
}

.bf-since {
  text-align: center;
  font-size: 12px;
  color: var(--c-muted);
  margin-bottom: 20px;
}

.bf-progress-track {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,.1);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 6px;
}
.bf-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--c-purple), var(--c-pink), var(--c-yellow));
  border-radius: 999px;
  position: relative;
  transition: width 1.4s cubic-bezier(.22,1,.36,1);
  background-size: 200% 100%;
  animation: progressShimmer 2s linear infinite;
}
@keyframes progressShimmer {
  0%   { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}
.bf-progress-glow {
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 12px 4px rgba(255,255,255,.6);
}
.bf-progress-label {
  text-align: right;
  font-size: 10px;
  letter-spacing: .1em;
  color: rgba(240,232,255,.25);
}

/* Décos internes */
.bf-card-deco {
  position: absolute;
  pointer-events: none;
  opacity: .18;
  font-size: 80px;
  line-height: 1;
  animation: decoFloat 9s ease-in-out infinite;
}
.bf-card-deco-1 { bottom: -12px; right: 10px; animation-delay: 0s; }
.bf-card-deco-2 {
  top: 12px; left: 14px;
  font-size: 40px;
  opacity: .22;
  color: var(--c-yellow);
  -webkit-text-fill-color: var(--c-yellow);
  animation-delay: 3s;
}
@keyframes decoFloat {
  0%,100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-12px) rotate(4deg); }
}

/* ============================================
   CTA
   ============================================ */
.bf-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  padding: 22px 36px;
  border-radius: 20px;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}
.bf-cta:hover { transform: translateY(-3px) scale(1.02); }
.bf-cta:active { transform: scale(.97); }

.bf-cta-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, #ff2d78, #8b2fff, #00e5ff, #ffda00, #ff2d78);
  background-size: 300% 300%;
  animation: ctaGradient 4s ease infinite;
}
@keyframes ctaGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.bf-cta-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: ctaShimmer 2.5s linear infinite;
}
@keyframes ctaShimmer {
  0%   { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

.bf-cta::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 22px;
  background: linear-gradient(120deg, #ff2d78, #8b2fff, #00e5ff, #ffda00);
  background-size: 300% 300%;
  animation: ctaGradient 4s ease infinite;
  z-index: -1;
  filter: blur(14px);
  opacity: .7;
  transition: opacity .25s;
}
.bf-cta:hover::before { opacity: 1; }

.bf-cta-icon { font-size: 28px; position: relative; z-index: 1; }
.bf-cta-text {
  position: relative; z-index: 1;
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: 700;
  color: white;
  letter-spacing: .04em;
  text-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.bf-cta-arrow {
  position: relative; z-index: 1;
  font-size: 22px;
  color: rgba(255,255,255,.9);
  transition: transform .2s ease;
}
.bf-cta:hover .bf-cta-arrow { transform: translateX(5px); }

/* ============================================
   BADGES
   ============================================ */
.bf-badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.bf-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--c-muted);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  padding: 6px 14px;
  transition: background .2s, border-color .2s;
}
.bf-badge:hover {
  background: rgba(139,47,255,.15);
  border-color: rgba(139,47,255,.4);
}

/* ============================================
   FOOTER
   ============================================ */
.bf-footer {
  position: relative; z-index: 10;
  text-align: center;
  padding: 16px 24px 32px;
  font-size: 11px;
  letter-spacing: .1em;
  color: rgba(240,232,255,.2);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 400px) {
  .bf-card { padding: 28px 20px 26px; }
  .bf-cta  { padding: 18px 24px; }
}
</style>

<script>
/* ============================================
   CONFETTI CANVAS
   ============================================ */
(function() {
  const canvas = document.getElementById('confettiCanvas');
  const ctx = canvas.getContext('2d');

  const resize = () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; };
  resize();
  window.addEventListener('resize', resize);

  const COLORS = ['#ff2d78','#8b2fff','#ffda00','#00e5ff','#00f5a0','#ff6b35','#ffffff'];
  const SHAPES = ['circle','square','triangle','star'];

  const particles = Array.from({length: 55}, () => ({
    x: Math.random() * window.innerWidth,
    y: Math.random() * window.innerHeight,
    r: 2 + Math.random() * 5,
    color: COLORS[Math.floor(Math.random() * COLORS.length)],
    shape: SHAPES[Math.floor(Math.random() * SHAPES.length)],
    vx: (Math.random() - .5) * .6,
    vy: .2 + Math.random() * .5,
    angle: Math.random() * Math.PI * 2,
    spin: (Math.random() - .5) * .04,
    opacity: .3 + Math.random() * .5
  }));

  function drawStar(cx, cy, r) {
    const spikes = 5, outerR = r, innerR = r * .5;
    let rot = (Math.PI / 2) * 3;
    const step = Math.PI / spikes;
    ctx.beginPath();
    ctx.moveTo(cx, cy - outerR);
    for (let i = 0; i < spikes; i++) {
      ctx.lineTo(cx + Math.cos(rot) * outerR, cy + Math.sin(rot) * outerR);
      rot += step;
      ctx.lineTo(cx + Math.cos(rot) * innerR, cy + Math.sin(rot) * innerR);
      rot += step;
    }
    ctx.closePath();
  }

  function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    particles.forEach(p => {
      ctx.save();
      ctx.globalAlpha = p.opacity;
      ctx.fillStyle = p.color;
      ctx.translate(p.x, p.y);
      ctx.rotate(p.angle);

      if (p.shape === 'circle') {
        ctx.beginPath();
        ctx.arc(0, 0, p.r, 0, Math.PI * 2);
        ctx.fill();
      } else if (p.shape === 'square') {
        ctx.fillRect(-p.r, -p.r, p.r * 2, p.r * 2);
      } else if (p.shape === 'triangle') {
        ctx.beginPath();
        ctx.moveTo(0, -p.r * 1.2);
        ctx.lineTo(p.r, p.r);
        ctx.lineTo(-p.r, p.r);
        ctx.closePath();
        ctx.fill();
      } else {
        ctx.translate(-p.x, -p.y);
        drawStar(p.x, p.y, p.r * 1.3);
        ctx.fill();
      }
      ctx.restore();

      p.x += p.vx;
      p.y += p.vy;
      p.angle += p.spin;
      if (p.y > canvas.height + 10) { p.y = -10; p.x = Math.random() * canvas.width; }
      if (p.x < -10) p.x = canvas.width + 10;
      if (p.x > canvas.width + 10) p.x = -10;
    });
    requestAnimationFrame(animate);
  }
  animate();
})();
</script>

{% endblock %}