import React, { useState, useEffect, useRef } from 'react';
import { Trophy, Clock, Target, Zap, Crown, Medal, Star, ChevronRight, CreditCard, Lock, CheckCircle, AlertCircle, Settings, Edit, Save, X, LogOut, Eye, EyeOff } from 'lucide-react';

const SkillWinSite = () => {
  const [gameState, setGameState] = useState('intro');
  const [score, setScore] = useState(0);
  const [bestScore, setBestScore] = useState(0);
  const [streak, setStreak] = useState(0);
  const [timeLeft, setTimeLeft] = useState(72);
  const [targets, setTargets] = useState([]);
  const [gameTime, setGameTime] = useState(30);
  const [isGameActive, setIsGameActive] = useState(false);
  const [isGameReady, setIsGameReady] = useState(false);
  const [showPayment, setShowPayment] = useState(false);
  const [paymentStep, setPaymentStep] = useState('form');
  const [pseudo, setPseudo] = useState('');
  const [hasSubmitted, setHasSubmitted] = useState(false);
  
  const [isAdmin, setIsAdmin] = useState(false);
  const [showAdminLogin, setShowAdminLogin] = useState(false);
  const [showAdminPanel, setShowAdminPanel] = useState(false);
  const [adminTab, setAdminTab] = useState('product');
  const [adminPassword, setAdminPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);
  const [loginError, setLoginError] = useState('');
  
  const gameAreaRef = useRef(null);
  
  const [cardNumber, setCardNumber] = useState('');
  const [expiryDate, setExpiryDate] = useState('');
  const [cvc, setCvc] = useState('');
  const [email, setEmail] = useState('');
  
  const [dailyProduct, setDailyProduct] = useState({
    name: "iPhone 16 Pro Max",
    image: "https://images.unsplash.com/photo-1695048064468-42ebe7df30f3?w=800",
    value: "1499€",
    description: "256 GB - Titane Naturel"
  });
  
  const [contestEndDate, setContestEndDate] = useState(null);
  
  const [editProduct, setEditProduct] = useState({...dailyProduct});
  const [editEndDate, setEditEndDate] = useState('');

  const [leaderboard, setLeaderboard] = useState([
    { pseudo: "AlexPro", score: 2847, avatar: "🎯" },
    { pseudo: "SkillMaster", score: 2691, avatar: "👑" },
    { pseudo: "SpeedyGon", score: 2534, avatar: "⚡" },
    { pseudo: "NinjaClick", score: 2401, avatar: "🥷" },
    { pseudo: "PrecisionX", score: 2298, avatar: "🎪" }
  ]);

  useEffect(() => {
    loadProductFromStorage();
    loadContestEndDate();
    checkForMidnightReset();
  }, []);

  const loadProductFromStorage = async () => {
    try {
      const result = await window.storage.get('daily-product');
      if (result && result.value) {
        const product = JSON.parse(result.value);
        setDailyProduct(product);
        setEditProduct(product);
      }
    } catch (error) {
      console.log('Produit par défaut utilisé');
    }
  };

  const loadContestEndDate = async () => {
    try {
      const result = await window.storage.get('contest-end-date');
      if (result && result.value) {
        const endDate = new Date(result.value);
        setContestEndDate(endDate);
        setEditEndDate(result.value);
      } else {
        const defaultEnd = new Date();
        defaultEnd.setHours(23, 59, 59, 999);
        setContestEndDate(defaultEnd);
        setEditEndDate(defaultEnd.toISOString().slice(0, 16));
      }
    } catch (error) {
      const defaultEnd = new Date();
      defaultEnd.setHours(23, 59, 59, 999);
      setContestEndDate(defaultEnd);
      setEditEndDate(defaultEnd.toISOString().slice(0, 16));
    }
  };

  const checkForMidnightReset = async () => {
    try {
      const lastReset = await window.storage.get('last-reset-date');
      const today = new Date().toDateString();
      
      if (!lastReset || lastReset.value !== today) {
        await window.storage.set('last-reset-date', today);
        await window.storage.delete('leaderboard-data');
        setLeaderboard([]);
      } else {
        const leaderboardData = await window.storage.get('leaderboard-data');
        if (leaderboardData && leaderboardData.value) {
          setLeaderboard(JSON.parse(leaderboardData.value));
        }
      }
    } catch (error) {
      console.log('Vérification du reset échouée');
    }
  };

  const saveProductToStorage = async (product) => {
    try {
      await window.storage.set('daily-product', JSON.stringify(product));
      return true;
    } catch (error) {
      console.error('Erreur de sauvegarde:', error);
      return false;
    }
  };

  const saveContestEndDate = async (dateString) => {
    try {
      await window.storage.set('contest-end-date', dateString);
      return true;
    } catch (error) {
      console.error('Erreur de sauvegarde date:', error);
      return false;
    }
  };

  const saveLeaderboard = async (data) => {
    try {
      await window.storage.set('leaderboard-data', JSON.stringify(data));
    } catch (error) {
      console.error('Erreur sauvegarde classement:', error);
    }
  };

  const handleAdminLogin = () => {
    if (adminPassword === 'admin123') {
      setIsAdmin(true);
      setShowAdminLogin(false);
      setShowAdminPanel(true);
      setAdminTab('product');
      setLoginError('');
      setAdminPassword('');
    } else {
      setLoginError('Mot de passe incorrect');
    }
  };

  const handleAdminLogout = () => {
    setIsAdmin(false);
    setShowAdminPanel(false);
    setAdminPassword('');
  };

  const handleSaveProduct = async () => {
    const productSuccess = await saveProductToStorage(editProduct);
    const dateSuccess = await saveContestEndDate(editEndDate);
    
    if (productSuccess && dateSuccess) {
      setDailyProduct(editProduct);
      setContestEndDate(new Date(editEndDate));
      setShowAdminPanel(false);
      alert('✅ Produit et date de fin mis à jour avec succès !');
    } else {
      alert('❌ Erreur lors de la sauvegarde');
    }
  };

  useEffect(() => {
    if (!contestEndDate) return;
    
    const timer = setInterval(() => {
      const now = new Date();
      const diff = contestEndDate - now;
      
      if (diff <= 0) {
        setTimeLeft(0);
        checkForMidnightReset();
      } else {
        setTimeLeft(diff / 1000 / 3600);
      }
    }, 1000);
    
    return () => clearInterval(timer);
  }, [contestEndDate]);

  useEffect(() => {
    if (isGameActive && gameTime > 0) {
      const timer = setInterval(() => {
        setGameTime(prev => {
          if (prev <= 0.1) {
            setIsGameActive(false);
            return 0;
          }
          return prev - 0.1;
        });
      }, 100);
      return () => clearInterval(timer);
    }
  }, [isGameActive, gameTime]);

  useEffect(() => {
    if (isGameActive && targets.length === 0) {
      const newTarget = {
        id: Date.now(),
        x: Math.random() * 80 + 10,
        y: Math.random() * 70 + 10,
        size: Math.random() * 30 + 40,
        speed: Math.random() * 2 + 1
      };
      setTargets([newTarget]);
    }
  }, [isGameActive, targets.length]);

  const startGame = () => {
    setGameState('playing');
    setScore(0);
    setStreak(0);
    setGameTime(30);
    setIsGameReady(true);
    setIsGameActive(false);
    setTargets([]);
    
    setTimeout(() => {
      if (gameAreaRef.current) {
        gameAreaRef.current.scrollIntoView({ 
          behavior: 'smooth', 
          block: 'center' 
        });
      }
    }, 100);
  };

  const launchGame = () => {
    setIsGameActive(true);
    setIsGameReady(false);
  };

  const hitTarget = (target, e) => {
    e.stopPropagation();
    const basePoints = Math.floor(100 / (target.size / 50));
    
    const newStreak = streak + 1;
    setStreak(newStreak);
    
    let bonusMultiplier = 1;
    if (newStreak >= 3 && newStreak < 5) bonusMultiplier = 1.2;
    else if (newStreak >= 5 && newStreak < 10) bonusMultiplier = 1.5;
    else if (newStreak >= 10) bonusMultiplier = 2;
    
    const finalPoints = Math.floor(basePoints * bonusMultiplier);
    setScore(prev => prev + finalPoints);
    
    const newTarget = {
      id: Date.now(),
      x: Math.random() * 80 + 10,
      y: Math.random() * 70 + 10,
      size: Math.random() * 30 + 40,
      speed: Math.random() * 2 + 1
    };
    setTargets([newTarget]);
  };

  const missTarget = () => {
    setScore(prev => Math.max(0, prev - 20));
    setStreak(0);
  };

  const endGame = () => {
    setIsGameActive(false);
    if (score > bestScore) {
      setBestScore(score);
    }
  };

  useEffect(() => {
    if (gameTime === 0 && isGameActive) {
      endGame();
    }
  }, [gameTime, isGameActive]);

  const submitScore = () => {
    if (score > bestScore) {
      setBestScore(score);
    }
    setShowPayment(true);
    setPaymentStep('form');
  };

  const getPotentialRank = (currentScore) => {
    const testScore = Math.max(currentScore, bestScore);
    let rank = 1;
    for (let player of leaderboard) {
      if (player.score >= testScore) rank++;
    }
    return rank;
  };

  const getRankMessage = (rank) => {
    if (rank === 1) return "🏆 Vous êtes à la 1ère place avec ce score !";
    if (rank === 2) return "🥈 Vous êtes à la 2ème place avec ce score !";
    if (rank === 3) return "🥉 Vous êtes à la 3ème place avec ce score !";
    if (rank <= 5) return `🌟 Vous êtes dans le Top 5 avec ce score (${rank}ème place) !`;
    if (rank <= 10) return `⭐ Vous êtes dans le Top 10 avec ce score (${rank}ème place)`;
    return `Vous êtes à la ${rank}ème place avec ce score`;
  };

  const formatCardNumber = (value) => {
    const v = value.replace(/\s+/g, '').replace(/[^0-9]/gi, '');
    const matches = v.match(/\d{4,16}/g);
    const match = (matches && matches[0]) || '';
    const parts = [];
    for (let i = 0, len = match.length; i < len; i += 4) {
      parts.push(match.substring(i, i + 4));
    }
    if (parts.length) {
      return parts.join(' ');
    } else {
      return value;
    }
  };

  const formatExpiryDate = (value) => {
    const v = value.replace(/\s+/g, '').replace(/[^0-9]/gi, '');
    if (v.length >= 2) {
      return v.substring(0, 2) + (v.length > 2 ? '/' + v.substring(2, 4) : '');
    }
    return v;
  };

  const processPayment = () => {
    if (!pseudo.trim() || !email.trim() || cardNumber.replace(/\s/g, '').length < 16 || !expiryDate || !cvc) {
      setPaymentStep('error');
      return;
    }

    setPaymentStep('processing');
    
    const scoreToSubmit = Math.max(score, bestScore);
    
    setTimeout(() => {
      setPaymentStep('success');
      
      setTimeout(() => {
        const existingPlayerIndex = leaderboard.findIndex(p => p.pseudo === pseudo);
        
        let newLeaderboard;
        if (existingPlayerIndex !== -1) {
          newLeaderboard = [...leaderboard];
          if (scoreToSubmit > newLeaderboard[existingPlayerIndex].score) {
            newLeaderboard[existingPlayerIndex].score = scoreToSubmit;
          }
        } else {
          const newEntry = {
            pseudo: pseudo,
            score: scoreToSubmit,
            avatar: "🌟"
          };
          newLeaderboard = [...leaderboard, newEntry];
        }
        
        newLeaderboard = newLeaderboard
          .sort((a, b) => b.score - a.score)
          .slice(0, 10);
        
        setLeaderboard(newLeaderboard);
        setBestScore(scoreToSubmit);
        setHasSubmitted(true);
        setShowPayment(false);
        setGameState('submitted');
        
        saveLeaderboard(newLeaderboard);
        
        setCardNumber('');
        setExpiryDate('');
        setCvc('');
      }, 1500);
    }, 2000);
  };

  const formatTime = (hours) => {
    const h = Math.floor(hours);
    const m = Math.floor((hours - h) * 60);
    const s = Math.floor(((hours - h) * 60 - m) * 60);
    return `${h}h ${m}m ${s}s`;
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900 text-white">
      <header className="bg-black/30 backdrop-blur-md border-b border-white/10 sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="bg-gradient-to-br from-yellow-400 to-orange-500 p-2 rounded-xl">
              <Trophy className="w-6 h-6 text-white" />
            </div>
            <h1 className="text-2xl font-bold bg-gradient-to-r from-yellow-400 to-orange-500 bg-clip-text text-transparent">
              SkillWin
            </h1>
          </div>
          
          <div className="flex items-center gap-4">
            <div className="flex items-center gap-2 bg-red-500/20 px-4 py-2 rounded-full border border-red-500/50">
              <Clock className="w-5 h-5 text-red-400" />
              <span className="font-mono font-bold text-red-400">{formatTime(timeLeft)}</span>
            </div>
            
            {!isAdmin ? (
              <button
                onClick={() => setShowAdminLogin(true)}
                className="bg-white/10 hover:bg-white/20 p-2 rounded-lg transition-all"
                title="Admin"
              >
                <Settings className="w-5 h-5" />
              </button>
            ) : (
              <div className="flex items-center gap-2">
                <button
                  onClick={() => setShowAdminPanel(true)}
                  className="bg-green-500/20 hover:bg-green-500/30 px-3 py-2 rounded-lg transition-all flex items-center gap-2 border border-green-500/50"
                >
                  <Edit className="w-4 h-4 text-green-400" />
                  <span className="text-sm text-green-400">Éditer</span>
                </button>
                <button
                  onClick={handleAdminLogout}
                  className="bg-red-500/20 hover:bg-red-500/30 p-2 rounded-lg transition-all"
                  title="Déconnexion"
                >
                  <LogOut className="w-5 h-5 text-red-400" />
                </button>
              </div>
            )}
          </div>
        </div>
      </header>

      <section className="container mx-auto px-4 py-8">
        <div className="text-center mb-8">
          <div className="inline-block bg-yellow-500/20 border border-yellow-500/50 rounded-full px-6 py-2 mb-4">
            <span className="text-yellow-400 font-semibold">🔥 Concours du Jour</span>
          </div>
          <h2 className="text-5xl font-bold mb-4 bg-gradient-to-r from-white to-blue-200 bg-clip-text text-transparent">
            Gagnez par votre talent !
          </h2>
          <p className="text-xl text-blue-200 max-w-2xl mx-auto">
            Entraînez-vous gratuitement, puis payez 2,50€ uniquement pour soumettre votre meilleur score. Le joueur n°1 remporte le lot !
          </p>
        </div>

        <div className="max-w-4xl mx-auto bg-white/10 backdrop-blur-lg rounded-3xl overflow-hidden border border-white/20 shadow-2xl mb-8">
          <div className="grid md:grid-cols-2 gap-6 p-8">
            <div className="relative group">
              <div className="absolute inset-0 bg-gradient-to-br from-yellow-500/20 to-orange-500/20 rounded-2xl blur-xl group-hover:blur-2xl transition-all" />
              <img 
                src={dailyProduct.image} 
                alt={dailyProduct.name}
                className="relative w-full h-80 object-cover rounded-2xl shadow-lg"
              />
              <div className="absolute top-4 right-4 bg-gradient-to-br from-yellow-400 to-orange-500 text-white px-4 py-2 rounded-full font-bold shadow-lg">
                <Crown className="w-5 h-5 inline mr-2" />
                Valeur: {dailyProduct.value}
              </div>
            </div>
            
            <div className="flex flex-col justify-center">
              <h3 className="text-3xl font-bold mb-2">{dailyProduct.name}</h3>
              <p className="text-blue-200 text-lg mb-6">{dailyProduct.description}</p>
              
              <div className="space-y-4 mb-6">
                <div className="flex items-start gap-3">
                  <div className="bg-green-500/20 p-2 rounded-lg">
                    <Zap className="w-5 h-5 text-green-400" />
                  </div>
                  <div>
                <label className="block text-sm font-semibold mb-2">
                  Date et heure de fin du concours
                </label>
                <input
                  type="datetime-local"
                  value={editEndDate}
                  onChange={(e) => setEditEndDate(e.target.value)}
                  className="w-full px-4 py-3 rounded-xl bg-white/10 border border-white/20 focus:border-green-400 focus:outline-none text-white"
                />
                <p className="text-xs text-blue-300 mt-2">
                  ⏰ Le classement sera automatiquement réinitialisé à cette date
                </p>
              </div>

              <div>
                    <p className="font-semibold">Cliquez sur les cibles</p>
                    <p className="text-sm text-blue-200">+100 points par cible (bonus pour petites cibles)</p>
                  </div>
                </div>
                
                <div className="flex items-start gap-3">
                  <div className="bg-red-500/20 p-2 rounded-lg">
                    <Target className="w-5 h-5 text-red-400" />
                  </div>
                  <div>
                    <p className="font-semibold">Attention aux clics ratés !</p>
                    <p className="text-sm text-blue-200">-20 points si vous cliquez à côté</p>
                  </div>
                </div>
                
                <div className="flex items-start gap-3">
                  <div className="bg-blue-500/20 p-2 rounded-lg">
                    <Star className="w-5 h-5 text-blue-400" />
                  </div>
                  <div>
                    <p className="font-semibold">Payez uniquement pour participer</p>
                    <p className="text-sm text-blue-200">2,50€ pour soumettre votre score</p>
                  </div>
                </div>
                
                <div className="flex items-start gap-3">
                  <div className="bg-purple-500/20 p-2 rounded-lg">
                    <Medal className="w-5 h-5 text-purple-400" />
                  </div>
                  <div>
                    <p className="font-semibold">Gagnez par le talent</p>
                    <p className="text-sm text-blue-200">Le meilleur score remporte le lot</p>
                  </div>
                </div>
              </div>

              {!hasSubmitted && (
                <button
                  onClick={startGame}
                  className="w-full bg-gradient-to-r from-yellow-400 to-orange-500 hover:from-yellow-500 hover:to-orange-600 text-white font-bold py-4 rounded-xl shadow-lg transform hover:scale-105 transition-all flex items-center justify-center gap-2"
                >
                  {gameState === 'intro' ? 'Commencer à jouer' : 'Rejouer'}
                  <ChevronRight className="w-5 h-5" />
                </button>
              )}

              {hasSubmitted && (
                <div className="space-y-3">
                  <div className="bg-green-500/20 border border-green-500/50 rounded-xl p-4 text-center">
                    <Star className="w-8 h-8 text-green-400 mx-auto mb-2" />
                    <p className="font-bold text-green-400">Score soumis avec succès !</p>
                    <p className="text-sm text-green-200">Bonne chance {pseudo} ! 🍀</p>
                  </div>
                  <button
                    onClick={startGame}
                    className="w-full bg-gradient-to-r from-yellow-400 to-orange-500 hover:from-yellow-500 hover:to-orange-600 text-white font-bold py-4 rounded-xl shadow-lg transform hover:scale-105 transition-all flex items-center justify-center gap-2"
                  >
                    Améliorer mon score
                    <ChevronRight className="w-5 h-5" />
                  </button>
                </div>
              )}
            </div>
          </div>
        </div>

        {gameState === 'playing' && (
          <div ref={gameAreaRef} className="max-w-4xl mx-auto mb-8 scroll-mt-8">
            <div className="bg-white/10 backdrop-blur-lg rounded-3xl p-6 border border-white/20">
              <div className="flex justify-between items-center mb-4">
                <div className="flex items-center gap-4">
                  <div className="text-2xl font-bold">Score: {score}</div>
                  {streak >= 3 && (
                    <div className="bg-orange-500/20 border border-orange-500/50 px-3 py-1 rounded-full">
                      <span className="text-orange-400 font-bold">🔥 Série: {streak}x</span>
                      {streak >= 10 && <span className="text-yellow-400 ml-2">x2 BONUS!</span>}
                      {streak >= 5 && streak < 10 && <span className="text-yellow-400 ml-2">x1.5!</span>}
                      {streak >= 3 && streak < 5 && <span className="text-yellow-400 ml-2">x1.2!</span>}
                    </div>
                  )}
                </div>
                <div className="text-2xl font-bold text-yellow-400">
                  Temps: {Math.ceil(gameTime)}s
                </div>
              </div>
              
              <div 
                className="relative w-full h-96 bg-gradient-to-br from-indigo-900 to-purple-900 rounded-2xl overflow-hidden border-4 border-white/30"
                style={{ cursor: 'crosshair' }}
                onClick={missTarget}
              >
                {isGameReady && !isGameActive && (
                  <div className="absolute inset-0 flex flex-col items-center justify-center bg-black/60 backdrop-blur-sm z-20">
                    <div className="text-center mb-8">
                      <h3 className="text-3xl font-bold mb-2">Prêt(e) ?</h3>
                      <p className="text-blue-200">Cliquez sur les cibles qui apparaissent</p>
                      <p className="text-red-300 text-sm mt-2">Attention : -20 points si vous ratez !</p>
                    </div>
                    <button
                      onClick={launchGame}
                      className="bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white font-bold px-12 py-5 rounded-2xl text-2xl shadow-2xl transform hover:scale-110 transition-all flex items-center gap-3"
                    >
                      <Zap className="w-8 h-8" />
                      C'est parti !
                    </button>
                  </div>
                )}

                {!isGameActive && gameTime === 0 && (
                  <div className="absolute inset-0 flex flex-col items-center justify-center bg-black/50 backdrop-blur-sm z-10">
                    <Trophy className="w-16 h-16 text-yellow-400 mb-4" />
                    <p className="text-3xl font-bold mb-2">Score final: {score}</p>
                    {score > bestScore && (
                      <p className="text-green-400 font-semibold mb-2">🎉 Nouveau record !</p>
                    )}
                    {score > 0 && (
                      <div className="bg-blue-500/20 border border-blue-500/50 rounded-xl px-6 py-3 mb-4">
                        <p className="text-blue-200 text-center font-semibold">
                          {getRankMessage(getPotentialRank(score))}
                        </p>
                      </div>
                    )}
                    <div className="flex gap-4">
                      <button
                        onClick={startGame}
                        className="bg-blue-500 hover:bg-blue-600 px-6 py-3 rounded-xl font-bold"
                      >
                        Rejouer
                      </button>
                      {score > 0 && (
                        <button
                          onClick={submitScore}
                          className="bg-gradient-to-r from-yellow-400 to-orange-500 hover:from-yellow-500 hover:to-orange-600 px-6 py-3 rounded-xl font-bold"
                        >
                          {hasSubmitted ? 'Soumettre ce nouveau score (2,50€)' : 'Soumettre ce score (2,50€)'}
                        </button>
                      )}
                    </div>
                  </div>
                )}
                
                {targets.map(target => (
                  <div
                    key={target.id}
                    onClick={(e) => hitTarget(target, e)}
                    className="absolute bg-gradient-to-br from-red-500 to-pink-500 rounded-full cursor-pointer hover:scale-110 transition-transform flex items-center justify-center shadow-lg"
                    style={{
                      left: `${target.x}%`,
                      top: `${target.y}%`,
                      width: `${target.size}px`,
                      height: `${target.size}px`,
                      animation: `pulse ${target.speed}s infinite`
                    }}
                  >
                    <Target className="w-1/2 h-1/2 text-white" />
                  </div>
                ))}
              </div>
              
              {bestScore > 0 && (
                <div className="mt-4 text-center">
                  <p className="text-lg">
                    Votre meilleur score: <span className="font-bold text-yellow-400">{bestScore}</span>
                  </p>
                </div>
              )}
            </div>
          </div>
        )}

        <div className="max-w-4xl mx-auto">
          <div className="bg-white/10 backdrop-blur-lg rounded-3xl p-6 border border-white/20">
            <h3 className="text-2xl font-bold mb-6 flex items-center gap-3">
              <Crown className="w-7 h-7 text-yellow-400" />
              Classement en Temps Réel
            </h3>
            
            <div className="space-y-3">
              {leaderboard.map((player, index) => (
                <div
                  key={index}
                  className={`flex items-center justify-between p-4 rounded-xl transition-all ${
                    index === 0 
                      ? 'bg-gradient-to-r from-yellow-500/30 to-orange-500/30 border-2 border-yellow-500/50' 
                      : 'bg-white/5 hover:bg-white/10'
                  } ${player.pseudo === pseudo ? 'ring-2 ring-green-400' : ''}`}
                >
                  <div className="flex items-center gap-4">
                    <div className={`text-2xl font-bold ${
                      index === 0 ? 'text-yellow-400' : 
                      index === 1 ? 'text-gray-300' :
                      index === 2 ? 'text-orange-400' : 'text-blue-200'
                    }`}>
                      #{index + 1}
                    </div>
                    <div className="text-3xl">{player.avatar}</div>
                    <div>
                      <p className="font-bold text-lg">{player.pseudo}</p>
                      {player.pseudo === pseudo && (
                        <p className="text-xs text-green-400">C'est vous !</p>
                      )}
                    </div>
                  </div>
                  <div className="text-right">
                    <p className="text-2xl font-bold text-yellow-400">{player.score}</p>
                    <p className="text-xs text-blue-200">points</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {showAdminLogin && !isAdmin && (
        <div className="fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center z-50 p-4">
          <div className="bg-gradient-to-br from-indigo-900 to-purple-900 rounded-3xl p-8 max-w-md w-full border border-white/20 shadow-2xl">
            <div className="flex items-center justify-between mb-6">
              <h3 className="text-2xl font-bold flex items-center gap-3">
                <Lock className="w-7 h-7 text-blue-400" />
                Connexion Admin
              </h3>
              <button
                onClick={() => {
                  setShowAdminLogin(false);
                  setLoginError('');
                  setAdminPassword('');
                }}
                className="text-gray-400 hover:text-white transition-all"
              >
                <X className="w-6 h-6" />
              </button>
            </div>

            <div className="bg-blue-500/10 border border-blue-500/30 rounded-xl p-3 mb-6 text-sm">
              <p className="text-blue-200">
                🔐 <strong>Mode démo</strong> - Mot de passe : <code className="bg-white/10 px-2 py-1 rounded">admin123</code>
              </p>
            </div>

            <div className="mb-6">
              <label className="block text-sm font-semibold mb-2">
                Mot de passe
              </label>
              <div className="relative">
                <input
                  type={showPassword ? "text" : "password"}
                  value={adminPassword}
                  onChange={(e) => {
                    setAdminPassword(e.target.value);
                    setLoginError('');
                  }}
                  onKeyPress={(e) => e.key === 'Enter' && handleAdminLogin()}
                  placeholder="Entrez le mot de passe"
                  className="w-full px-4 py-3 pr-12 rounded-xl bg-white/10 border border-white/20 focus:border-blue-400 focus:outline-none text-white placeholder-gray-400"
                />
                <button
                  onClick={() => setShowPassword(!showPassword)}
                  className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white"
                >
                  {showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
                </button>
              </div>
              {loginError && (
                <p className="text-red-400 text-sm mt-2 flex items-center gap-2">
                  <AlertCircle className="w-4 h-4" />
                  {loginError}
                </p>
              )}
            </div>

            <button
              onClick={handleAdminLogin}
              className="w-full bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 py-3 rounded-xl font-bold transition-all"
            >
              Se connecter
            </button>
          </div>
        </div>
      )}

      {showAdminPanel && isAdmin && (
        <div className="fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center z-50 p-4 overflow-y-auto">
          <div className="bg-gradient-to-br from-indigo-900 to-purple-900 rounded-3xl p-8 max-w-2xl w-full border border-white/20 shadow-2xl my-8">
            <div className="flex items-center justify-between mb-6">
              <h3 className="text-2xl font-bold flex items-center gap-3">
                <Edit className="w-7 h-7 text-green-400" />
                Éditer le produit du jour
              </h3>
              <button
                onClick={() => {
                  setShowAdminPanel(false);
                  setEditProduct(dailyProduct);
                }}
                className="text-gray-400 hover:text-white transition-all"
              >
                <X className="w-6 h-6" />
              </button>
            </div>

            <div className="space-y-6">
              <div>
                <label className="block text-sm font-semibold mb-2">
                  Nom du produit
                </label>
                <input
                  type="text"
                  value={editProduct.name}
                  onChange={(e) => setEditProduct({...editProduct, name: e.target.value})}
                  placeholder="Ex: iPhone 16 Pro Max"
                  className="w-full px-4 py-3 rounded-xl bg-white/10 border border-white/20 focus:border-green-400 focus:outline-none text-white placeholder-gray-400"
                />
              </div>

              <div>
                <label className="block text-sm font-semibold mb-2">
                  Description
                </label>
                <input
                  type="text"
                  value={editProduct.description}
                  onChange={(e) => setEditProduct({...editProduct, description: e.target.value})}
                  placeholder="Ex: 256 GB - Titane Naturel"
                  className="w-full px-4 py-3 rounded-xl bg-white/10 border border-white/20 focus:border-green-400 focus:outline-none text-white placeholder-gray-400"
                />
              </div>

              <div>
                <label className="block text-sm font-semibold mb-2">
                  Valeur
                </label>
                <input
                  type="text"
                  value={editProduct.value}
                  onChange={(e) => setEditProduct({...editProduct, value: e.target.value})}
                  placeholder="Ex: 1499€"
                  className="w-full px-4 py-3 rounded-xl bg-white/10 border border-white/20 focus:border-green-400 focus:outline-none text-white placeholder-gray-400"
                />
              </div>

              <div>
                <label className="block text-sm font-semibold mb-2">
                  URL de l'image
                </label>
                <input
                  type="text"
                  value={editProduct.image}
                  onChange={(e) => setEditProduct({...editProduct, image: e.target.value})}
                  placeholder="https://..."
                  className="w-full px-4 py-3 rounded-xl bg-white/10 border border-white/20 focus:border-green-400 focus:outline-none text-white placeholder-gray-400"
                />
                <p className="text-xs text-blue-300 mt-2">
                  💡 Utilisez Unsplash, Pexels ou uploadez votre image sur un hébergeur
                </p>
              </div>

              <div>
                <label className="block text-sm font-semibold mb-3">
                  Prévisualisation
                </label>
                <div className="bg-white/5 rounded-xl p-4 border border-white/10">
                  <div className="flex items-center gap-4">
                    <img 
                      src={editProduct.image} 
                      alt="Preview"
                      className="w-24 h-24 object-cover rounded-lg"
                      onError={(e) => {
                        e.target.src = 'https://via.placeholder.com/150?text=Image+invalide';
                      }}
                    />
                    <div>
                      <p className="font-bold text-lg">{editProduct.name || 'Nom du produit'}</p>
                      <p className="text-sm text-blue-200">{editProduct.description || 'Description'}</p>
                      <p className="text-yellow-400 font-semibold mt-1">{editProduct.value || 'Valeur'}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div className="flex gap-3 mt-8">
              <button
                onClick={() => {
                  setShowAdminPanel(false);
                  setEditProduct(dailyProduct);
                }}
                className="flex-1 bg-white/10 hover:bg-white/20 py-3 rounded-xl font-bold transition-all"
              >
                Annuler
              </button>
              <button
                onClick={handleSaveProduct}
                className="flex-1 bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 py-3 rounded-xl font-bold transition-all flex items-center justify-center gap-2"
              >
                <Save className="w-5 h-5" />
                Sauvegarder
              </button>
            </div>
          </div>
        </div>
      )}

      {showPayment && (
        <div className="fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center z-50 p-4 overflow-y-auto">
          <div className="bg-gradient-to-br from-indigo-900 to-purple-900 rounded-3xl p-8 max-w-md w-full border border-white/20 shadow-2xl my-8">
            
            {paymentStep === 'form' && (
              <>
                <div className="flex items-center justify-between mb-6">
                  <h3 className="text-2xl font-bold flex items-center gap-3">
                    <CreditCard className="w-7 h-7 text-blue-400" />
                    Paiement sécurisé
                  </h3>
                  <div className="flex items-center gap-2 text-sm text-green-400">
                    <Lock className="w-4 h-4" />
                    <span>Stripe</span>
                  </div>
                </div>

                <div className="bg-blue-500/10 border border-blue-500/30 rounded-xl p-3 mb-6 text-sm">
                  <p className="text-blue-200">
                    💡 <strong>Mode démo</strong> - Utilisez n'importe quelle carte de test (ex: 4242 4242 4242 4242)
                    {hasSubmitted && <span className="block mt-1">Vous pouvez soumettre plusieurs scores pour améliorer votre classement !</span>}
                  </p>
                </div>
                
                <div className="bg-white/10 rounded-xl p-4 mb-4">
                  <p className="text-sm text-blue-200 mb-2">Votre score à soumettre</p>
                  <p className="text-4xl font-bold text-yellow-400">{score > bestScore ? score : bestScore} points</p>
                </div>

                <div className="bg-gradient-to-r from-blue-500/20 to-purple-500/20 border border-blue-400/50 rounded-xl p-4 mb-6">
                  <p className="text-center font-bold text-blue-200">
                    {getRankMessage(getPotentialRank(Math.max(score, bestScore)))}
                  </p>
                </div>

                <div className="space-y-4 mb-6">
                  <div>
                    <label className="block text-sm font-semibold mb-2">
                      Pseudo (visible dans le classement)
                    </label>
                    <input
                      type="text"
                      value={pseudo}
                      onChange={(e) => setPseudo(e.target.value)}
                      placeholder="Votre pseudo"
                      className="w-full px-4 py-3 rounded-xl bg-white/10 border border-white/20 focus:border-blue-400 focus:outline-none text-white placeholder-gray-400"
                      maxLength={20}
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-semibold mb-2">
                      Email
                    </label>
                    <input
                      type="email"
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                      placeholder="votre@email.com"
                      className="w-full px-4 py-3 rounded-xl bg-white/10 border border-white/20 focus:border-blue-400 focus:outline-none text-white placeholder-gray-400"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-semibold mb-2">
                      Numéro de carte
                    </label>
                    <input
                      type="text"
                      value={cardNumber}
                      onChange={(e) => setCardNumber(formatCardNumber(e.target.value))}
                      placeholder="4242 4242 4242 4242"
                      maxLength={19}
                      className="w-full px-4 py-3 rounded-xl bg-white/10 border border-white/20 focus:border-blue-400 focus:outline-none text-white placeholder-gray-400 font-mono"
                    />
                  </div>

                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="block text-sm font-semibold mb-2">
                        Expiration
                      </label>
                      <input
                        type="text"
                        value={expiryDate}
                        onChange={(e) => setExpiryDate(formatExpiryDate(e.target.value))}
                        placeholder="MM/AA"
                        maxLength={5}
                        className="w-full px-4 py-3 rounded-xl bg-white/10 border border-white/20 focus:border-blue-400 focus:outline-none text-white placeholder-gray-400 font-mono"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-semibold mb-2">
                        CVC
                      </label>
                      <input
                        type="text"
                        value={cvc}
                        onChange={(e) => setCvc(e.target.value.replace(/\D/g, '').slice(0, 3))}
                        placeholder="123"
                        maxLength={3}
                        className="w-full px-4 py-3 rounded-xl bg-white/10 border border-white/20 focus:border-blue-400 focus:outline-none text-white placeholder-gray-400 font-mono"
                      />
                    </div>
                  </div>
                </div>

                <div className="bg-yellow-500/20 border border-yellow-500/50 rounded-xl p-4 mb-6">
                  <p className="text-center mb-2 text-sm text-blue-200">Montant à payer</p>
                  <p className="text-center text-4xl font-bold text-yellow-400">2,50€</p>
                </div>

                <div className="flex gap-3">
                  <button
                    onClick={() => setShowPayment(false)}
                    className="flex-1 bg-white/10 hover:bg-white/20 py-3 rounded-xl font-bold transition-all"
                  >
                    Annuler
                  </button>
                  <button
                    onClick={processPayment}
                    className="flex-1 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 py-3 rounded-xl font-bold transition-all flex items-center justify-center gap-2"
                  >
                    <Lock className="w-4 h-4" />
                    Payer 2,50€
                  </button>
                </div>

                <p className="text-center text-xs text-blue-300 mt-4">
                  Paiement sécurisé via Stripe • Vos données sont protégées
                </p>
              </>
            )}

            {paymentStep === 'processing' && (
              <div className="text-center py-12">
                <div className="w-20 h-20 border-4 border-blue-400 border-t-transparent rounded-full animate-spin mx-auto mb-6"></div>
                <h3 className="text-2xl font-bold mb-2">Traitement du paiement...</h3>
                <p className="text-blue-200">Veuillez patienter</p>
              </div>
            )}

            {paymentStep === 'success' && (
              <div className="text-center py-12">
                <div className="w-20 h-20 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-6">
                  <CheckCircle className="w-12 h-12 text-green-400" />
                </div>
                <h3 className="text-2xl font-bold mb-2 text-green-400">Paiement réussi !</h3>
                <p className="text-blue-200 mb-4">Votre score a été enregistré</p>
                <div className="bg-white/10 rounded-xl p-4">
                  <p className="text-sm text-blue-200 mb-1">Score soumis</p>
                  <p className="text-3xl font-bold text-yellow-400">{Math.max(score, bestScore)} points</p>
                </div>
              </div>
            )}

            {paymentStep === 'error' && (
              <div className="text-center py-12">
                <div className="w-20 h-20 bg-red-500/20 rounded-full flex items-center justify-center mx-auto mb-6">
                  <AlertCircle className="w-12 h-12 text-red-400" />
                </div>
                <h3 className="text-2xl font-bold mb-2 text-red-400">Erreur</h3>
                <p className="text-blue-200 mb-6">Veuillez vérifier vos informations</p>
                <button
                  onClick={() => setPaymentStep('form')}
                  className="bg-blue-500 hover:bg-blue-600 px-6 py-3 rounded-xl font-bold transition-all"
                >
                  Réessayer
                </button>
              </div>
            )}
          </div>
        </div>
      )}

      <style>{`
        @keyframes pulse {
          0%, 100% { transform: scale(1); }
          50% { transform: scale(1.1); }
        }
      `}</style>
    </div>
  );
};

export default SkillWinSite;