import { useState, useEffect, useRef } from 'react';
import { Timer, Trophy, Flag, Play, RotateCcw, ChevronUp, Volume2, VolumeX, Users } from 'lucide-react';

export default function JeuEscaladeVitesse() {
  // États du jeu
  const [gameState, setGameState] = useState('menu'); // 'menu', 'countdown', 'playing', 'finished'
  const [position, setPosition] = useState(0); // Position du grimpeur (0-100)
  const [time, setTime] = useState(0); // Temps en millisecondes
  const [bestTime, setBestTime] = useState(null); // Meilleur temps
  const [lastMove, setLastMove] = useState(null); // 'left' ou 'right'
  const [clickCount, setClickCount] = useState(0); // Nombre de clics
  const [countdown, setCountdown] = useState(3); // Compte à rebours avant le départ
  const [soundEnabled, setSoundEnabled] = useState(true); // Son activé ou désactivé
  const [gameMode, setGameMode] = useState('solo'); // 'solo' ou 'duel'
  const [opponentPosition, setOpponentPosition] = useState(0); // Position de l'adversaire en mode duel
  const [worldRecord, setWorldRecord] = useState(5.48); // Record du monde actuel (en secondes)
  
  // Références pour les animations et le timer
  const timerRef = useRef(null);
  const countdownRef = useRef(null);
  const opponentTimerRef = useRef(null);
  const startTimeRef = useRef(null);
  const audioRef = useRef(null);
  
  // Hauteur totale à grimper (15 mètres standard)
  const totalHeight = 100;
  
  // Positions officielles des prises sur la voie de vitesse (simplifiées)
  const officialHolds = {
    left: [5, 12, 20, 28, 36, 44, 52, 60, 68, 76, 84, 92],
    right: [8, 16, 24, 32, 40, 48, 56, 64, 72, 80, 88, 96]
  };
  
  // Récupération du meilleur temps depuis le stockage local
  useEffect(() => {
    const savedBestTime = localStorage.getItem('bestTimeEscaladeOfficielle');
    if (savedBestTime) {
      setBestTime(parseInt(savedBestTime));
    }
    
    // Créer les éléments audio
    audioRef.current = {
      beep: new Audio('data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLHPM+N2TQwUHHFvF/fLEeRsABjOq8Pzow5lQGwAJQc3//tzCp3coBAFV0PH7yLOqiUsQAVrO6/bYxrKqnWcfB1HBzOLc3uDcxJdSKhUyf6qzvsG8qoJKKCUdKFp6kKOyurquj2tKKCUmL0VTZHGAjJeepKeomIVwWUg2IhYQEBUcKDZJXnacprKzsK6nlIBpTjYcCgQDChUkPVh2l6y6xMTAvK+YgGBEJg0EBQ0YKkVjiqS3yNDOyMGwnHZULxQGCRMiOFRxjZuqvMjW2dTLtJt2US8VCQ8dMk1phJOhsr/P3OLg1sKkhF88GQsSIThRbH+PlqW1ydzo7OjbxKeEXDgcDRUkO1VugIuSnbHH2+fx8OXNroRbOB0PGCc9V2x+iZCcssbZ6fHy6NC0i188HhAaKT9XbH2FjZqtxdnm8PLm0LWNYEAhEhwrQFhsfYWNmq3F2efw8ebQtY1gQCESHCtAWGx9hY2arcXZ5/Dw5tC1jWBAIRIcK0BYbH2FjZqtxdnn8PDm0LWNYEAhEhwrQFhsfYWNmq3F2efw8ObQtY1gQCESHCtAWGx9hY2arcXZ5/Dw5tC1jWBAIRIcK0BYbH2FjZqtxdnn8PDm0LWNYEAhEhwrQFhsfYWNmq3F2efw8ObQtY1gQCESHCtAWGx9hY2arcXZ5/Dw5tC1jWBAIRIcK0BYbH2FjZqtxdnn8PDm0LWNYEAhEhwrQFhsfYWNmq3F2efw8ObQtY1gQCESHCtAWGx9hY2arcXZ5/Dw5tC1jWBAIRIcK0BYbH2FjZqtxdnn8PDm0LWNYEAhEhwrQFhsfYWNmq3F2efw8ObQtY1gQCESHCtAWGx9hY2arcXZ5/Dw5tC1jWBAIRIcK0BYbH2FjZqtxdnn8PDm0LWNYEAhEhwrQFhsfYWNmq3F2efw8ObQtY1gQCESHCtAWGx9hY2arcXZ5/Dw5tC1jWBAIRIcK0BYbH2FjZqtxdnn8PDm0LWNYEAhEhwrQFhsfYWNmq3F2efw8ObQtY1gQCESHCtAWGx9hY2arcXZ5/Dw5tC1jWBAIRIcK0BYbH2FjZqtxdnn8PDm0LWNYEAhEhwrQFhsfYWNmq3F2efw8ObQtY1gQCESHCtAWGx9hY2arcXZ5/Dw5tC1jWBAIRIcK0BYbH2FjZqtxdnn8PDm0LWNYEAhEhwrQFhsfYWNmq3F2efw8ObQtY1gQCESHCtAWGx9hY2arcXZ5/Dw5tC1jWBAIRIcK0BYbH2FjZqtxdnn8PDm0LWNYEAhEhwrQFhsfYWNmq3F2efw8ObQtY1gQCESHCtAWGx9hY2arcXZ5/Dw5tC1jWBAIRIcK0BYbH2FjZqtxdnn8PDm0LWNYEAhEhwrQFhsfYWNmq3F2efw8ObQtY1gQCESHCtAWGx9hY2arcXZ5/Dw5tC1jWBAIRIcK0BYbH2FjZqtxdnn8PDm0LWNYA=='),
      start: new Audio('data:audio/wav;base64,UklGRvwHAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQwHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA')}
  }, []);
  
  // Fonction pour jouer un son (simulé)
  const playSound = (type) => {
    if (!soundEnabled || !audioRef.current) return;
    const audio = audioRef.current[type];
    if (audio) {
      audio.currentTime = 0;
      audio.play();
    }
  };
  
  // Démarrer le compte à rebours
  const startCountdown = () => {
    setGameState('countdown');
    setCountdown(3);
    
    countdownRef.current = setInterval(() => {
      setCountdown((prev) => {
        if (prev <= 1) {
          clearInterval(countdownRef.current);
          startGame();
          return 0;
        }
        playSound('beep');
        return prev - 1;
      });
    }, 1000);
  };
  
  // Démarrer le jeu
  const startGame = () => {
    setGameState('playing');
    setPosition(0);
    setTime(0);
    setLastMove(null);
    setClickCount(0);
    setOpponentPosition(0);
    startTimeRef.current = Date.now();
    
    // Démarrer le timer
    timerRef.current = setInterval(() => {
      setTime(Date.now() - startTimeRef.current);
    }, 10);
    
    // En mode duel, démarrer le timer de l'adversaire
    if (gameMode === 'duel') {
      const opponentSpeed = worldRecord * 1000 / totalHeight; // Vitesse basée sur le record du monde
      opponentTimerRef.current = setInterval(() => {
        setOpponentPosition((prev) => {
          const newPos = prev + (100 / (opponentSpeed * 100));
          if (newPos >= totalHeight) {
            clearInterval(opponentTimerRef.current);
            if (position < totalHeight) {
              // L'adversaire a gagné
              playSound('lose');
            }
            return totalHeight;
          }
          return newPos;
        });
      }, 10);
    }
    
    playSound('start');
  };
  
  // Terminer le jeu
  const endGame = () => {
    clearInterval(timerRef.current);
    clearInterval(opponentTimerRef.current);
    setGameState('finished');
    
    // Déterminer si le joueur a gagné (en mode duel)
    const playerWon = gameMode === 'solo' || (position >= totalHeight && opponentPosition < totalHeight);
    
    if (playerWon) {
      playSound('win');
    }
    
    // Mettre à jour le meilleur temps si nécessaire
    if (bestTime === null || time < bestTime) {
      setBestTime(time);
      localStorage.setItem('bestTimeEscaladeOfficielle', time.toString());
    }
  };
  
  // Réinitialiser le jeu
  const resetGame = () => {
    clearInterval(countdownRef.current);
    clearInterval(timerRef.current);
    clearInterval(opponentTimerRef.current);
    setGameState('menu');
    setPosition(0);
    setTime(0);
    setLastMove(null);
    setClickCount(0);
    setOpponentPosition(0);
  };
  
  // Gérer les clics sur les prises
  const handleGrip = (side) => {
    if (gameState !== 'playing') return;
    
    // Vérifier que le joueur alterne bien entre gauche et droite
    if (lastMove === side) return;
    
    // Mettre à jour la position du grimpeur
    const newPosition = position + 5;
    setPosition(newPosition);
    setLastMove(side);
    setClickCount(clickCount + 1);
    
    playSound('grip');
    
    // Vérifier si le grimpeur a atteint le sommet
    if (newPosition >= totalHeight) {
      endGame();
    }
  };
  
  // Basculer le son
  const toggleSound = () => {
    setSoundEnabled(!soundEnabled);
  };
  
  // Changer le mode de jeu
  const setMode = (mode) => {
    setGameMode(mode);
  };
  
  // Formater le temps pour l'affichage (secondes.millisecondes)
  const formatTime = (timeMs) => {
    const seconds = Math.floor(timeMs / 1000);
    const ms = Math.floor((timeMs % 1000) / 10);
    return `${seconds}.${ms.toString().padStart(2, '0')}`;
  };
  
  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-b from-sky-300 to-blue-500 p-4 text-slate-800 font-sans">
      {/* Titre du jeu */}
      <h1 className="text-4xl font-bold mb-6 text-white drop-shadow-md">Escalade de Vitesse Officielle</h1>
      
      {/* Bouton de son */}
      <button 
        onClick={toggleSound}
        className="absolute top-4 right-4 p-2 bg-white/50 hover:bg-white/70 rounded-full transition-colors"
      >
        {soundEnabled ? <Volume2 size={20} /> : <VolumeX size={20} />}
      </button>
      
      {gameState === 'menu' && (
        <div className="bg-white/90 rounded-xl p-8 max-w-md shadow-xl">
          <h2 className="text-2xl font-bold mb-4 text-center">Prêt à grimper?</h2>
          <div className="mb-6 text-center">
            <Trophy className="inline-block text-amber-500 mb-2" size={32} />
            {bestTime && (
              <p className="font-bold">Meilleur temps: {formatTime(bestTime)}s</p>
            )}
            <p className="text-sm mt-2">Record du monde: {worldRecord}s</p>
          </div>
          
          {/* Sélection du mode de jeu */}
          <div className="flex gap-2 mb-6">
            <button 
              onClick={() => setMode('solo')}
              className={`flex-1 py-2 rounded-lg font-bold transition-colors ${
                gameMode === 'solo' 
                  ? 'bg-blue-500 text-white' 
                  : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
              }`}
            >
              Solo
            </button>
            <button 
              onClick={() => setMode('duel')}
              className={`flex-1 py-2 rounded-lg font-bold transition-colors ${
                gameMode === 'duel' 
                  ? 'bg-blue-500 text-white' 
                  : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
              }`}
            >
              <Users size={16} className="inline mr-1" /> Duel
            </button>
          </div>
          
          <div className="space-y-4 mb-6">
            <p className="text-center">
              {gameMode === 'solo' 
                ? "Cliquez alternativement sur les prises gauche et droite pour grimper le plus vite possible jusqu'au sommet!" 
                : "Affrontez le record du monde! Pouvez-vous battre le champion?"}
            </p>
          </div>
          <button 
            onClick={startCountdown}
            className="w-full py-3 bg-emerald-500 hover:bg-emerald-600 text-white font-bold rounded-lg flex items-center justify-center transition-colors"
          >
            <Play size={20} className="mr-2" /> Commencer l'ascension
          </button>
        </div>
      )}
      
      {gameState === 'countdown' && (
        <div className="flex flex-col items-center justify-center">
          <div className="text-9xl font-bold text-white drop-shadow-lg">
            {countdown}
          </div>
          <p className="text-xl text-white mt-4">Préparez-vous...</p>
        </div>
      )}
      
      {gameState === 'playing' && (
        <div className="w-full max-w-md">
          {/* Chronomètre */}
          <div className="bg-white/80 rounded-lg p-3 mb-4 flex justify-between items-center">
            <div className="flex items-center">
              <Timer className="mr-2 text-slate-700" size={20} />
              <span className="text-2xl font-mono font-bold">{formatTime(time)}s</span>
            </div>
            <div className="flex items-center">
              <ChevronUp className="mr-1 text-slate-700" size={20} />
              <span className="font-bold">{position}%</span>
            </div>
          </div>
          
          {/* Mur d'escalade */}
          <div className="relative bg-stone-300 rounded-lg h-[70vh] shadow-inner overflow-hidden border-4 border-stone-400">
            {/* Ligne centrale */}
            <div className="absolute left-1/2 top-0 bottom-0 w-0.5 bg-black/20 transform -translate-x-1/2"></div>
            
            {/* Drapeau d'arrivée */}
            <div className="absolute top-2 left-1/2 transform -translate-x-1/2 z-10">
              <Flag className="text-red-500" size={32} />
            </div>
            
            {/* Grimpeur */}
            <div 
              className="absolute left-[40%] transform -translate-x-1/2 transition-all duration-200 ease-out z-20"
              style={{ bottom: `${position}%` }}
            >
              <div className="w-8 h-12 bg-blue-600 rounded-t-full relative">
                <div className="absolute top-2 left-1/2 transform -translate-x-1/2 w-4 h-4 bg-yellow-200 rounded-full"></div>
                <div className="absolute -left-4 top-6 w-3 h-2 bg-blue-600 rounded-full"></div>
                <div className="absolute -right-4 top-6 w-3 h-2 bg-blue-600 rounded-full"></div>
              </div>
            </div>
            
            {/* Adversaire (en mode duel) */}
            {gameMode === 'duel' && (
              <div 
                className="absolute right-[40%] transform translate-x-1/2 transition-all duration-200 ease-out z-20"
                style={{ bottom: `${opponentPosition}%` }}
              >
                <div className="w-8 h-12 bg-red-600 rounded-t-full relative">
                  <div className="absolute top-2 left-1/2 transform -translate-x-1/2 w-4 h-4 bg-yellow-200 rounded-full"></div>
                  <div className="absolute -left-4 top-6 w-3 h-2 bg-red-600 rounded-full"></div>
                  <div className="absolute -right-4 top-6 w-3 h-2 bg-red-600 rounded-full"></div>
                </div>
              </div>
            )}
            
            {/* Prises d'escalade officielles */}
            {officialHolds.left.map((position, index) => (
              <div 
                key={`left-${index}`}
                className="absolute left-[30%] w-5 h-3 rounded-sm bg-amber-500 transform -translate-x-1/2"
                style={{ bottom: `${position}%` }}
              ></div>
            ))}
            {officialHolds.right.map((position, index) => (
              <div 
                key={`right-${index}`}
                className="absolute left-[50%] w-5 h-3 rounded-sm bg-red-500 transform -translate-x-1/2"
                style={{ bottom: `${position}%` }}
              ></div>
            ))}
            
            {/* Prises d'escalade pour l'adversaire (en mode duel) */}
            {gameMode === 'duel' && officialHolds.left.map((position, index) => (
              <div 
                key={`opponent-left-${index}`}
                className="absolute right-[30%] w-5 h-3 rounded-sm bg-amber-500 transform translate-x-1/2"
                style={{ bottom: `${position}%` }}
              ></div>
            ))}
            {gameMode === 'duel' && officialHolds.right.map((position, index) => (
              <div 
                key={`opponent-right-${index}`}
                className="absolute right-[50%] w-5 h-3 rounded-sm bg-red-500 transform translate-x-1/2"
                style={{ bottom: `${position}%` }}
              ></div>
            ))}
          </div>
          
          {/* Boutons de contrôle */}
          <div className="flex justify-between mt-4 gap-4">
            <button
              onClick={() => handleGrip('left')}
              className={`flex-1 py-6 rounded-lg font-bold text-white transition-all ${
                lastMove === 'left' ? 'bg-amber-400 opacity-50' : 'bg-amber-500 hover:bg-amber-600 active:scale-95'
              }`}
              disabled={lastMove === 'left'}
            >
              Prise Gauche
            </button>
            <button
              onClick={() => handleGrip('right')}
              className={`flex-1 py-6 rounded-lg font-bold text-white transition-all ${
                lastMove === 'right' ? 'bg-red-400 opacity-50' : 'bg-red-500 hover:bg-red-600 active:scale-95'
              }`}
              disabled={lastMove === 'right'}
            >
              Prise Droite
            </button>
          </div>
        </div>
      )}
      
      {gameState === 'finished' && (
        <div className="bg-white/90 rounded-xl p-8 max-w-md shadow-xl">
          <h2 className="text-2xl font-bold mb-4 text-center">
            {gameMode === 'solo' || (position >= totalHeight && opponentPosition < totalHeight)
              ? "Sommet atteint!"
              : "Défaite!"}
          </h2>
          
          <div className="space-y-4 mb-6">
            <div className="flex justify-center mb-4">
              {gameMode === 'solo' || (position >= totalHeight && opponentPosition < totalHeight) 
                ? <Trophy className="text-amber-500" size={48} />
                : <div className="text-red-500 text-4xl">😢</div>}
            </div>
            
            <div className="text-center space-y-2">
              <p className="text-xl font-bold">Votre temps: {formatTime(time)}s</p>
              {bestTime === time && (
                <p className="text-emerald-600 font-bold">Nouveau record personnel!</p>
              )}
              {gameMode === 'duel' && (
                <p className={position >= totalHeight && opponentPosition < totalHeight 
                  ? "text-emerald-600 font-bold" 
                  : "text-red-600"}>
                  {position >= totalHeight && opponentPosition < totalHeight 
                    ? "Vous avez battu le champion!" 
                    : `Le champion a gagné en ${worldRecord}s`}
                </p>
              )}
              <p>Nombre de mouvements: {clickCount}</p>
            </div>
          </div>
          
          <div className="flex gap-4">
            <button 
              onClick={resetGame}
              className="flex-1 py-3 bg-slate-500 hover:bg-slate-600 text-white font-bold rounded-lg flex items-center justify-center"
            >
              <RotateCcw size={20} className="mr-2" /> Menu
            </button>
            <button 
              onClick={startCountdown}
              className="flex-1 py-3 bg-emerald-500 hover:bg-emerald-600 text-white font-bold rounded-lg flex items-center justify-center"
            >
              <Play size={20} className="mr-2" /> Rejouer
            </button>
          </div>
        </div>
      )}
    </div>
  );
}