// Social Share Buttons Component
const SocialShareButtons = ({ score, gameStats, highScore }) => {
  const handleShare = (platform) => {
    let shareUrl;
    
    // Format time alive
    const totalSeconds = Math.round(gameStats.timeAlive);
    let timeText;
    if (totalSeconds < 60) {
      timeText = `${totalSeconds}s`;
    } else if (totalSeconds < 3600) {
      const minutes = Math.floor(totalSeconds / 60);
      const seconds = totalSeconds % 60;
      timeText = `${minutes}m ${seconds}s`;
    } else {
      const hours = Math.floor(totalSeconds / 3600);
      const minutes = Math.floor((totalSeconds % 3600) / 60);
      const seconds = totalSeconds % 60;
      timeText = `${hours}h ${minutes}m ${seconds}s`;
    }
    
    const detailedMessage = `Game Over! Final Score: ${score} | High Score: ${highScore} | Coins Collected: ${gameStats.coinsCollected} | Power-ups Used: ${gameStats.powerUpsUsed} | Time Alive: ${timeText} | Play Swoop now!`;
    const encodedMessage = encodeURIComponent(detailedMessage);
    
    switch (platform) {
      case 'facebook':
        shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent('https://playswoop.com')}`;
        break;
      case 'linkedin':
        shareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent('https://playswoop.com')}`;
        break;
      case 'twitter':
        shareUrl = `https://twitter.com/intent/tweet?text=${encodedMessage}`;
        break;
      case 'whatsapp':
        shareUrl = `https://wa.me/?text=${encodedMessage}`;
        break;
      default:
        return;
    }
    
    window.open(shareUrl, '_blank');
  };

  return (
    <div className="flex flex-col sm:flex-row gap-3 justify-center">
      <button
        onClick={() => handleShare('facebook')}
        className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium text-sm shadow-md transform hover:scale-105 transition-transform flex items-center gap-2"
      >
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
        </svg>
        Facebook
      </button>
      <button
        onClick={() => handleShare('linkedin')}
        className="px-4 py-2 bg-blue-700 hover:bg-blue-800 text-white rounded-lg font-medium text-sm shadow-md transform hover:scale-105 transition-transform flex items-center gap-2"
      >
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
        </svg>
        LinkedIn
      </button>
      <button
        onClick={() => handleShare('twitter')}
        className="px-4 py-2 bg-black hover:bg-gray-800 text-white rounded-lg font-medium text-sm shadow-md transform hover:scale-105 transition-transform flex items-center gap-2"
      >
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
        </svg>
        X (Twitter)
      </button>
      <button
        onClick={() => handleShare('whatsapp')}
        className="px-4 py-2 bg-green-500 hover:bg-green-600 text-white rounded-lg font-medium text-sm shadow-md transform hover:scale-105 transition-transform flex items-center gap-2"
      >
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.465 3.488z"/>
        </svg>
        WhatsApp
      </button>
    </div>
  );
};

function App() {
  const canvasRef = React.useRef(null);
  const [gameState, setGameState] = React.useState('start'); // start, ready, playing, paused, gameover
  const [score, setScore] = React.useState(0);
  const [highScore, setHighScore] = React.useState(0);
  const [canvasSize, setCanvasSize] = React.useState({ width: 600, height: 400 });
  const [copyFeedback, setCopyFeedback] = React.useState(false);
  const [soundEnabled, setSoundEnabled] = React.useState(true);
  const [playerName, setPlayerName] = React.useState('');
  const [showNameInput, setShowNameInput] = React.useState(false);
  const [showLeaderboard, setShowLeaderboard] = React.useState(false);
  const [highScores, setHighScores] = React.useState(() => {
    try {
      const saved = localStorage.getItem('swoopHighScores');
      return saved ? JSON.parse(saved) : [];
    } catch (e) {
      return [];
    }
  });
  
  // Game constants
  const gravity = 4;
  const lift = -100;
  const baseSpeed = 120;
  const baseObstacleGap = 200;
  const baseObstacleWidth = 50;
  const baseObstacleFrequency = 2000;
  const coinFrequency = 3000;
  const powerUpFrequency = 8000;
  const coinSize = 10;

  const character = React.useRef({ x: 100, y: 250, vy: 0 });
  const obstacles = React.useRef([]);
  const coins = React.useRef([]);
  const powerUps = React.useRef([]);
  const particles = React.useRef([]);
  const effects = React.useRef([]);
  const activePowerUps = React.useRef({ magnet: 0, doublePoints: 0, slowMo: 0 });
  const backgroundLayers = React.useRef([]);
  const screenShake = React.useRef({ x: 0, y: 0, intensity: 0 });
  const gameStats = React.useRef({ coinsCollected: 0, powerUpsUsed: 0, timeAlive: 0 });
  const isPressing = React.useRef(false);
  const hasStarted = React.useRef(false);
  const scoreRef = React.useRef(0);
  const lastTime = React.useRef(performance.now());
  const lastObstacleTime = React.useRef(0);
  const lastCoinTime = React.useRef(0);
  const lastPowerUpTime = React.useRef(0);

  // Initialize background layers
  React.useEffect(() => {
    backgroundLayers.current = [];
  }, []);

  // Handle canvas resizing
  React.useEffect(() => {
    const updateCanvasSize = () => {
      const viewportWidth = window.innerWidth;
      const viewportHeight = window.innerHeight;
      
      let width, height;
      
      if (viewportWidth >= 1024) {
        width = Math.min(800, viewportWidth * 0.8);
        height = Math.min(600, viewportHeight * 0.7);
      } else if (viewportWidth >= 768) {
        width = viewportWidth * 0.9;
        height = viewportHeight * 0.6;
      } else {
        width = viewportWidth * 0.95;
        height = viewportHeight * 0.5;
      }
      
      const aspectRatio = 4 / 3;
      if (width / height > aspectRatio) {
        width = height * aspectRatio;
      } else {
        height = width / aspectRatio;
      }
      
      setCanvasSize({ width: Math.round(width), height: Math.round(height) });
    };

    updateCanvasSize();
    window.addEventListener('resize', updateCanvasSize);
    return () => window.removeEventListener('resize', updateCanvasSize);
  }, []);

  // Audio context and sounds
  const audioContext = React.useRef(null);
  
  React.useEffect(() => {
    if (soundEnabled && !audioContext.current) {
      try {
        audioContext.current = new (window.AudioContext || window.webkitAudioContext)();
      } catch (e) {
        console.log('Audio not supported');
      }
    }
  }, [soundEnabled]);

  const playSound = (frequency, duration, type = 'sine') => {
    if (!soundEnabled || !audioContext.current) return;
    
    const oscillator = audioContext.current.createOscillator();
    const gainNode = audioContext.current.createGain();
    
    oscillator.connect(gainNode);
    gainNode.connect(audioContext.current.destination);
    
    oscillator.frequency.value = frequency;
    oscillator.type = type;
    
    gainNode.gain.setValueAtTime(0.1, audioContext.current.currentTime);
    gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.current.currentTime + duration);
    
    oscillator.start(audioContext.current.currentTime);
    oscillator.stop(audioContext.current.currentTime + duration);
  };

  const saveHighScore = (newScore) => {
    if (newScore > highScore) {
      setHighScore(newScore);
      return true;
    }
    return false;
  };

  const addScreenShake = (intensity) => {
    screenShake.current.intensity = intensity;
    screenShake.current.x = (Math.random() - 0.5) * intensity;
    screenShake.current.y = (Math.random() - 0.5) * intensity;
  };

  const createParticles = (x, y, count, color, type = 'explosion') => {
    for (let i = 0; i < count; i++) {
      particles.current.push({
        x: x,
        y: y,
        vx: (Math.random() - 0.5) * 200,
        vy: (Math.random() - 0.5) * 200,
        color: color,
        life: 1,
        size: Math.random() * 4 + 2,
        type: type
      });
    }
  };

  const createTrailParticle = (x, y) => {
    particles.current.push({
      x: x + Math.random() * 10,
      y: y + Math.random() * 10,
      vx: -50 + Math.random() * 20,
      vy: (Math.random() - 0.5) * 30,
      color: '#4169E1',
      life: 0.5,
      size: Math.random() * 3 + 1,
      type: 'trail'
    });
  };

  // Event handlers
  React.useEffect(() => {
    const handleKeyDown = (e) => {
      if (e.code === 'Space') {
        e.preventDefault();
        if (gameState === 'paused') {
          setGameState('playing');
          lastTime.current = performance.now();
        } else {
          isPressing.current = true;
          playSound(300, 0.1);
          if (gameState === 'ready' && !hasStarted.current) {
            hasStarted.current = true;
            setGameState('playing');
            lastTime.current = performance.now();
            lastObstacleTime.current = performance.now();
            lastCoinTime.current = performance.now();
            lastPowerUpTime.current = performance.now();
          }
        }
      } else if (e.code === 'Escape') {
        e.preventDefault();
        if (gameState === 'playing') {
          setGameState('paused');
        } else if (gameState === 'paused') {
          setGameState('playing');
          lastTime.current = performance.now();
        }
      } else if (e.code === 'KeyR') {
        if (document.activeElement && document.activeElement.tagName === 'INPUT') {
          return;
        }
        e.preventDefault();
        if (gameState === 'gameover') {
          if (!showNameInput) {
            startGame();
          }
        }
      }
    };

    const handleKeyUp = (e) => {
      if (e.code === 'Space') {
        e.preventDefault();
        isPressing.current = false;
      }
    };

    const handleTouchStart = (e) => {
      e.preventDefault();
      
      if (e.touches.length === 2 && gameState === 'playing') {
        setGameState('paused');
        return;
      }
      
      if (e.touches.length === 1 && gameState === 'paused') {
        setGameState('playing');
        lastTime.current = performance.now();
        return;
      }
      
      if (e.touches.length === 1) {
        isPressing.current = true;
        playSound(300, 0.1);
        if (gameState === 'ready' && !hasStarted.current) {
          hasStarted.current = true;
          setGameState('playing');
          lastTime.current = performance.now();
          lastObstacleTime.current = performance.now();
          lastCoinTime.current = performance.now();
          lastPowerUpTime.current = performance.now();
        }
      }
    };

    const handleTouchEnd = (e) => {
      e.preventDefault();
      if (e.touches.length === 0) {
        isPressing.current = false;
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    window.addEventListener('keyup', handleKeyUp);
    const canvas = canvasRef.current;
    if (canvas) {
      canvas.addEventListener('touchstart', handleTouchStart, { passive: false });
      canvas.addEventListener('touchend', handleTouchEnd, { passive: false });
    }
    
    return () => {
      window.removeEventListener('keydown', handleKeyDown);
      window.removeEventListener('keyup', handleKeyUp);
      if (canvasRef.current) {
        canvasRef.current.removeEventListener('touchstart', handleTouchStart);
        canvasRef.current.removeEventListener('touchend', handleTouchEnd);
      }
    };
  }, [gameState, soundEnabled, showNameInput]);

  // Game loop
  React.useEffect(() => {
    if (gameState !== 'ready' && gameState !== 'playing') return;

    let animationFrameId;

    const doesItemOverlap = (itemX, itemY, itemWidth, itemHeight, height) => {
      const margin = 30;
      const safeLeft = itemX - margin;
      const safeRight = itemX + itemWidth + margin;
      const safeTop = itemY - margin;
      const safeBottom = itemY + itemHeight + margin;

      for (const obs of obstacles.current) {
        const obsLeft = obs.x;
        const obsRight = obs.x + baseObstacleWidth;

        if (safeRight < obsLeft || safeLeft > obsRight) continue;

        if (safeBottom > 0 && safeTop < obs.topHeight) return true;
        
        const bottomObstacleTop = obs.topHeight + obs.gap;
        if (safeBottom > bottomObstacleTop && safeTop < height) return true;
      }
      return false;
    };

    const findValidPosition = (width, height, itemWidth = coinSize * 2, itemHeight = coinSize * 2) => {
      const maxAttempts = 50;
      let attempts = 0;
      
      while (attempts < maxAttempts) {
        const itemY = Math.random() * (height - 150) + 75;
        
        if (!doesItemOverlap(width, itemY, itemWidth, itemHeight, height)) {
          return itemY;
        }
        attempts++;
      }
      
      return null;
    };

    const gameLoop = () => {
      const currentTime = performance.now();
      const baseDelta = (currentTime - lastTime.current) / 1000;
      const delta = activePowerUps.current.slowMo > 0 ? baseDelta * 0.5 : baseDelta;
      lastTime.current = currentTime;

      const canvas = canvasRef.current;
      if (!canvas) return;
      const ctx = canvas.getContext('2d');
      const width = canvasSize.width;
      const height = canvasSize.height;

      // Apply screen shake
      ctx.save();
      ctx.translate(screenShake.current.x, screenShake.current.y);
      
      // Reduce screen shake over time
      screenShake.current.intensity *= 0.9;
      if (screenShake.current.intensity > 0.5) {
        screenShake.current.x = (Math.random() - 0.5) * screenShake.current.intensity;
        screenShake.current.y = (Math.random() - 0.5) * screenShake.current.intensity;
      } else {
        screenShake.current.x = 0;
        screenShake.current.y = 0;
      }

      // Draw animated background
      const backgroundGradient = ctx.createLinearGradient(0, 0, 0, height);
      backgroundGradient.addColorStop(0, '#87CEEB');
      backgroundGradient.addColorStop(0.7, '#E0F6FF');
      backgroundGradient.addColorStop(1, '#98FB98');
      ctx.fillStyle = backgroundGradient;
      ctx.fillRect(0, 0, width, height);

      // Add moving clouds
      const cloudOffset = (currentTime / 2000) % (width + 100);
      ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
      // Cloud 1
      ctx.beginPath();
      ctx.arc(cloudOffset - 50, height * 0.2, 20, 0, 2 * Math.PI);
      ctx.arc(cloudOffset - 30, height * 0.2, 25, 0, 2 * Math.PI);
      ctx.arc(cloudOffset - 10, height * 0.2, 20, 0, 2 * Math.PI);
      ctx.fill();
      // Cloud 2
      ctx.beginPath();
      ctx.arc(cloudOffset - 200, height * 0.35, 15, 0, 2 * Math.PI);
      ctx.arc(cloudOffset - 185, height * 0.35, 20, 0, 2 * Math.PI);
      ctx.arc(cloudOffset - 170, height * 0.35, 15, 0, 2 * Math.PI);
      ctx.fill();

      // Update power-up timers
      Object.keys(activePowerUps.current).forEach(key => {
        if (activePowerUps.current[key] > 0) {
          activePowerUps.current[key] -= baseDelta;
        }
      });

      if (gameState === 'playing' && hasStarted.current) {
        gameStats.current.timeAlive += baseDelta;

        // Update score smoothly
        const scoreMultiplier = activePowerUps.current.doublePoints > 0 ? 2 : 1;
        scoreRef.current += delta * 50 * scoreMultiplier;

        // Difficulty progression
        const difficultyLevel = Math.floor(scoreRef.current / 500);
        const currentSpeed = baseSpeed + difficultyLevel * 20;
        const currentGap = baseObstacleGap;
        const currentFrequency = baseObstacleFrequency;

        // Apply gravity and lift
        if (isPressing.current) {
          character.current.vy += lift * delta * 0.2;
        } else {
          const dropMultiplier = character.current.vy < 0 ? 2.5 : 1;
          character.current.vy += gravity * delta * dropMultiplier;
        }
        character.current.y += character.current.vy;

        // Create trail particles
        if (Math.random() < 0.3) {
          createTrailParticle(character.current.x, character.current.y + 10);
        }

        // Boundaries
        if (character.current.y > height - 30 || character.current.y < 0) {
          createParticles(character.current.x + 10, character.current.y + 10, 20, '#FF4444');
          addScreenShake(15);
          playSound(150, 0.5, 'sawtooth');
          endGame();
          return;
        }

        // Generate obstacles
        if (currentTime - lastObstacleTime.current > currentFrequency) {
          const randomGap = 80 + Math.random() * 120;
          const topHeight = Math.random() * (height - randomGap - 100) + 50;
          obstacles.current.push({ x: width, topHeight, gap: randomGap });
          lastObstacleTime.current = currentTime;
        }

        // Generate coins
        if (currentTime - lastCoinTime.current > coinFrequency) {
          const validCoinY = findValidPosition(width, height);
          if (validCoinY !== null) {
            coins.current.push({ x: width, y: validCoinY });
          }
          lastCoinTime.current = currentTime;
        }

        // Generate power-ups
        if (currentTime - lastPowerUpTime.current > powerUpFrequency) {
          const validPowerUpY = findValidPosition(width, height, 30, 30);
          if (validPowerUpY !== null) {
            const powerUpTypes = ['magnet', 'doublePoints', 'slowMo'];
            const powerUpType = powerUpTypes[Math.floor(Math.random() * powerUpTypes.length)];
            powerUps.current.push({ x: width, y: validPowerUpY, type: powerUpType });
          }
          lastPowerUpTime.current = currentTime;
        }

        // Move and check obstacles
        let collision = false;
        obstacles.current = obstacles.current.filter((obs) => {
          obs.x -= currentSpeed * delta;

          // Enhanced obstacle rendering with gradient
          const gradient = ctx.createLinearGradient(obs.x, 0, obs.x + baseObstacleWidth, 0);
          gradient.addColorStop(0, '#228B22');
          gradient.addColorStop(1, '#006400');
          ctx.fillStyle = gradient;
          ctx.fillRect(obs.x, 0, baseObstacleWidth, obs.topHeight);
          ctx.fillRect(obs.x, obs.topHeight + obs.gap, baseObstacleWidth, height - (obs.topHeight + obs.gap));

          const charRight = character.current.x + 20;
          const charBottom = character.current.y + 20;
          const collidesTop = charRight > obs.x && character.current.x < obs.x + baseObstacleWidth && charBottom > 0 && character.current.y < obs.topHeight;
          const collidesBottom = charRight > obs.x && character.current.x < obs.x + baseObstacleWidth && charBottom > obs.topHeight + obs.gap && character.current.y < height;
          
          if (collidesTop || collidesBottom) {
            collision = true;
          }

          return obs.x + baseObstacleWidth > 0;
        });

        if (collision) {
          createParticles(character.current.x + 10, character.current.y + 10, 20, '#FF4444');
          addScreenShake(15);
          playSound(150, 0.5, 'sawtooth');
          endGame();
          return;
        }

        // Move and check coins
        coins.current = coins.current.filter((coin) => {
          coin.x -= currentSpeed * delta;

          // Enhanced magnet effect
          if (activePowerUps.current.magnet > 0) {
            const magnetRange = 150;
            const dx = character.current.x + 10 - (coin.x + coinSize);
            const dy = character.current.y + 10 - (coin.y + coinSize);
            const distance = Math.sqrt(dx * dx + dy * dy);
            
            if (distance < magnetRange) {
              const pullStrength = 1500;
              coin.x += (dx / distance) * pullStrength * delta;
              coin.y += (dy / distance) * pullStrength * delta;
            }
          }

          // Enhanced coin rendering
          const centerX = coin.x + coinSize;
          const centerY = coin.y + coinSize;
          const gradient = ctx.createRadialGradient(centerX - coinSize / 2, centerY - coinSize / 2, 0, centerX, centerY, coinSize);
          gradient.addColorStop(0, '#FFD700');
          gradient.addColorStop(0.7, '#FFA500');
          gradient.addColorStop(1, '#DAA520');
          ctx.fillStyle = gradient;
          ctx.beginPath();
          ctx.arc(centerX, centerY, coinSize, 0, 2 * Math.PI);
          ctx.fill();

          // Pulsing effect
          const pulse = 1 + Math.sin(currentTime / 200) * 0.1;
          ctx.strokeStyle = '#FFD700';
          ctx.lineWidth = 2;
          ctx.beginPath();
          ctx.arc(centerX, centerY, coinSize * pulse, 0, 2 * Math.PI);
          ctx.stroke();

          const angle = Math.sin((currentTime / 1000) * Math.PI) * (Math.PI / 2);
          ctx.save();
          ctx.translate(centerX, centerY);
          ctx.rotate(angle);
          ctx.fillStyle = 'black';
          ctx.font = 'bold 12px Arial';
          ctx.textAlign = 'center';
          ctx.textBaseline = 'middle';
          ctx.fillText('$', 0, 0);
          ctx.restore();

          // Check collision with character
          const charRight = character.current.x + 20;
          const charBottom = character.current.y + 20;
          if (
            charRight > coin.x &&
            character.current.x < coin.x + coinSize * 2 &&
            charBottom > coin.y &&
            character.current.y < coin.y + coinSize * 2
          ) {
            const coinValue = activePowerUps.current.doublePoints > 0 ? 200 : 100;
            scoreRef.current += coinValue;
            gameStats.current.coinsCollected++;
            effects.current.push({ x: coin.x, y: coin.y, text: `+${coinValue}`, age: 0 });
            createParticles(coin.x + coinSize, coin.y + coinSize, 8, '#FFD700', 'sparkle');
            playSound(800, 0.1);
            
            return false;
          }

          return coin.x + coinSize * 2 > 0;
        });

        // Move and check power-ups
        powerUps.current = powerUps.current.filter((powerUp) => {
          powerUp.x -= currentSpeed * delta;

          // Enhanced power-up rendering
          const centerX = powerUp.x + 15;
          const centerY = powerUp.y + 15;
          
          let color, symbol;
          switch (powerUp.type) {
            case 'magnet': color = '#FF69B4'; symbol = '🧲'; break;
            case 'doublePoints': color = '#32CD32'; symbol = '2×'; break;
            case 'slowMo': color = '#9370DB'; symbol = '⏰'; break;
          }

          // Floating animation
          const float = Math.sin(currentTime / 500 + powerUp.x / 100) * 3;
          const adjustedY = powerUp.y + float;

          // Glowing effect
          ctx.shadowColor = color;
          ctx.shadowBlur = 10;
          ctx.fillStyle = color;
          ctx.fillRect(powerUp.x, adjustedY, 30, 30);
          ctx.shadowBlur = 0;
          
          ctx.fillStyle = 'white';
          ctx.font = 'bold 16px Arial';
          ctx.textAlign = 'center';
          ctx.textBaseline = 'middle';
          ctx.fillText(symbol, centerX, adjustedY + 15);

          // Check collision with character
          const charRight = character.current.x + 20;
          const charBottom = character.current.y + 20;
          if (
            charRight > powerUp.x &&
            character.current.x < powerUp.x + 30 &&
            charBottom > adjustedY &&
            character.current.y < adjustedY + 30
          ) {
            activePowerUps.current[powerUp.type] = 5;
            gameStats.current.powerUpsUsed++;
            effects.current.push({ x: powerUp.x, y: adjustedY, text: powerUp.type.toUpperCase(), age: 0 });
            createParticles(powerUp.x + 15, adjustedY + 15, 10, color);
            addScreenShake(5);
            playSound(1000, 0.2);
            return false;
          }

          return powerUp.x + 30 > 0;
        });

        // Update and draw effects
        effects.current = effects.current.filter((effect) => {
          effect.age += baseDelta;
          if (effect.age > 1.5) return false;

          ctx.fillStyle = `rgba(255, 215, 0, ${1 - effect.age / 1.5})`;
          ctx.font = 'bold 16px Arial';
          ctx.strokeStyle = 'black';
          ctx.lineWidth = 1;
          ctx.strokeText(effect.text, effect.x, effect.y - effect.age * 30);
          ctx.fillText(effect.text, effect.x, effect.y - effect.age * 30);

          return true;
        });
      } else {
        character.current.vy = 0;
      }

      // Update and draw particles
      particles.current = particles.current.filter((particle) => {
        particle.life -= baseDelta * 2;
        if (particle.life <= 0) return false;

        particle.x += particle.vx * baseDelta;
        particle.y += particle.vy * baseDelta;
        particle.vy += 100 * baseDelta;

        ctx.globalAlpha = particle.life;
        
        if (particle.type === 'sparkle') {
          const twinkle = Math.sin(currentTime / 100) * 0.5 + 0.5;
          ctx.globalAlpha *= twinkle;
        }
        
        ctx.fillStyle = particle.color;
        ctx.beginPath();
        ctx.arc(particle.x, particle.y, particle.size, 0, 2 * Math.PI);
        ctx.fill();
        ctx.globalAlpha = 1;

        return true;
      });

      // Draw character as a spaceship with enhanced visuals
      const charX = character.current.x;
      const charY = character.current.y;
      
      // Spaceship body
      const shipGradient = ctx.createLinearGradient(charX, charY, charX + 20, charY + 20);
      shipGradient.addColorStop(0, '#C0C0C0');
      shipGradient.addColorStop(0.5, '#4169E1');
      shipGradient.addColorStop(1, '#1E90FF');
      ctx.fillStyle = shipGradient;
      
      // Main body
      ctx.beginPath();
      ctx.ellipse(charX + 10, charY + 10, 12, 8, 0, 0, 2 * Math.PI);
      ctx.fill();
      
      // Cockpit
      ctx.fillStyle = '#FFD700';
      ctx.beginPath();
      ctx.ellipse(charX + 15, charY + 10, 4, 3, 0, 0, 2 * Math.PI);
      ctx.fill();
      
      // Wings
      ctx.fillStyle = '#4169E1';
      ctx.beginPath();
      ctx.moveTo(charX + 5, charY + 5);
      ctx.lineTo(charX - 2, charY + 2);
      ctx.lineTo(charX - 2, charY + 18);
      ctx.lineTo(charX + 5, charY + 15);
      ctx.closePath();
      ctx.fill();
      
      // Engine glow
      if (isPressing.current) {
        const glowGradient = ctx.createRadialGradient(charX - 5, charY + 10, 0, charX - 5, charY + 10, 15);
        glowGradient.addColorStop(0, '#FF4500');
        glowGradient.addColorStop(0.5, '#FF6347');
        glowGradient.addColorStop(1, 'transparent');
        ctx.fillStyle = glowGradient;
        ctx.beginPath();
        ctx.ellipse(charX - 8, charY + 10, 8, 4, 0, 0, 2 * Math.PI);
        ctx.fill();
      }

      // Draw ground with texture
      const groundGradient = ctx.createLinearGradient(0, height - 20, 0, height);
      groundGradient.addColorStop(0, '#8B4513');
      groundGradient.addColorStop(1, '#654321');
      ctx.fillStyle = groundGradient;
      ctx.fillRect(0, height - 20, width, 20);

      ctx.restore();

      // Draw UI
      ctx.fillStyle = 'black';
      ctx.font = 'bold 20px Arial';
      ctx.strokeStyle = 'white';
      ctx.lineWidth = 2;
      ctx.strokeText(`Score: ${Math.round(scoreRef.current)}`, 10, 30);
      ctx.fillText(`Score: ${Math.round(scoreRef.current)}`, 10, 30);
      ctx.strokeText(`High Score: ${highScore}`, 10, 55);
      ctx.fillText(`High Score: ${highScore}`, 10, 55);

      // Draw active power-ups with enhanced UI
      let powerUpY = 80;
      Object.entries(activePowerUps.current).forEach(([key, time]) => {
        if (time > 0) {
          const barWidth = 100;
          const barHeight = 6;
          const progress = time / 5;
          
          ctx.fillStyle = 'rgba(0,0,0,0.5)';
          ctx.fillRect(10, powerUpY - 15, barWidth, barHeight);
          
          ctx.fillStyle = time < 1 ? '#FF4444' : '#44FF44';
          ctx.fillRect(10, powerUpY - 15, barWidth * progress, barHeight);
          
          ctx.fillStyle = time < 1 ? '#FF4444' : '#44FF44';
          ctx.font = '12px Arial';
          ctx.fillText(`${key.toUpperCase()}: ${time.toFixed(1)}s`, 10, powerUpY);
          powerUpY += 25;
        }
      });

      animationFrameId = requestAnimationFrame(gameLoop);
    };

    animationFrameId = requestAnimationFrame(gameLoop);

    return () => {
      cancelAnimationFrame(animationFrameId);
    };
  }, [gameState, highScore]);

  const startGame = () => {
    setGameState('ready');
    setScore(0);
    scoreRef.current = 0;
    character.current = { x: 100, y: canvasSize.height / 2, vy: 0 };
    obstacles.current = [];
    coins.current = [];
    powerUps.current = [];
    particles.current = [];
    effects.current = [];
    activePowerUps.current = { magnet: 0, doublePoints: 0, slowMo: 0 };
    gameStats.current = { coinsCollected: 0, powerUpsUsed: 0, timeAlive: 0 };
    isPressing.current = false;
    hasStarted.current = false;
    lastTime.current = performance.now();
    lastObstacleTime.current = performance.now();
    lastCoinTime.current = performance.now();
    lastPowerUpTime.current = performance.now();
  };

  const endGame = () => {
    const finalScore = Math.round(scoreRef.current);
    setScore(finalScore);
    const isNewHighScore = saveHighScore(finalScore);
    setGameState('gameover');
    setShowNameInput(true);
    
    if (isNewHighScore) {
      effects.current.push({ x: 300, y: 200, text: 'NEW HIGH SCORE!', age: 0 });
      playSound(1200, 0.5);
    }
  };

  const saveScoreWithName = () => {
    if (playerName.trim()) {
      const newScore = {
        name: playerName.trim(),
        score: score,
        coinsCollected: gameStats.current.coinsCollected,
        powerUpsUsed: gameStats.current.powerUpsUsed,
        timeAlive: gameStats.current.timeAlive,
        date: new Date().toLocaleDateString()
      };
      
      const updatedScores = [...highScores, newScore].sort((a, b) => b.score - a.score);
      setHighScores(updatedScores);
      try {
        localStorage.setItem('swoopHighScores', JSON.stringify(updatedScores));
      } catch (e) {
        console.log('Failed to save high scores to localStorage');
      }
      setShowNameInput(false);
      setPlayerName('');
    }
  };

  const toggleLeaderboard = () => {
    setShowLeaderboard(!showLeaderboard);
  };

  const copyScoreToClipboard = async () => {
    const totalSeconds = Math.round(gameStats.current.timeAlive);
    let timeText;
    if (totalSeconds < 60) {
      timeText = `${totalSeconds}s`;
    } else if (totalSeconds < 3600) {
      const minutes = Math.floor(totalSeconds / 60);
      const seconds = totalSeconds % 60;
      timeText = `${minutes}m ${seconds}s`;
    } else {
      const hours = Math.floor(totalSeconds / 3600);
      const minutes = Math.floor((totalSeconds % 3600) / 60);
      const seconds = totalSeconds % 60;
      timeText = `${hours}h ${minutes}m ${seconds}s`;
    }
    
    const message = `Game Over! Final Score: ${score} | High Score: ${highScore} | Coins Collected: ${gameStats.current.coinsCollected} | Power-ups Used: ${gameStats.current.powerUpsUsed} | Time Alive: ${timeText} | Play Swoop now!`;
    
    try {
      await navigator.clipboard.writeText(message);
      setCopyFeedback(true);
      setTimeout(() => setCopyFeedback(false), 2000);
    } catch (err) {
      const textArea = document.createElement('textarea');
      textArea.value = message;
      document.body.appendChild(textArea);
      textArea.select();
      document.execCommand('copy');
      document.body.removeChild(textArea);
      setCopyFeedback(true);
      setTimeout(() => setCopyFeedback(false), 2000);
    }
  };

  return (
    <div className="flex flex-col items-center justify-start min-h-screen bg-gradient-to-b from-blue-400 to-blue-600 p-4 overflow-auto">
      <h1 className="text-4xl font-bold mb-4 text-white shadow-lg">🚀 Play Swoop 🚀</h1>
      
      <div className="relative">
        <canvas 
          ref={canvasRef} 
          width={canvasSize.width} 
          height={canvasSize.height} 
          className="border-4 border-white rounded-lg bg-white shadow-2xl max-w-full" 
          style={{ touchAction: 'none' }}
        />
        
        {gameState === 'gameover' && (
          <div className="absolute inset-0 flex items-center justify-center">
            <button 
              onClick={startGame} 
              className="px-8 py-4 bg-green-500 hover:bg-green-600 text-white rounded-lg font-bold text-xl shadow-lg transform hover:scale-105 transition-transform"
            >
              🎮 Play Again
            </button>
          </div>
        )}
        {gameState === 'paused' && (
          <div className="absolute inset-0 flex items-center justify-center">
            <button 
              onClick={() => {
                setGameState('playing');
                lastTime.current = performance.now();
              }} 
              className="px-8 py-4 bg-blue-500 hover:bg-blue-600 text-white rounded-lg font-bold text-xl shadow-lg transform hover:scale-105 transition-transform"
            >
              ▶️ Resume Game
            </button>
          </div>
        )}
      </div>
      
      {gameState === 'start' && (
        <div className="mt-6 text-center max-w-4xl">
          <button 
            onClick={startGame} 
            className="px-8 py-4 bg-green-500 hover:bg-green-600 text-white rounded-lg font-bold text-xl mb-6 shadow-lg transform hover:scale-105 transition-transform"
          >
            🎮 Start Game
          </button>

          <div className="mb-4">
            <button 
              onClick={() => setSoundEnabled(!soundEnabled)}
              className={`px-4 py-2 rounded-lg font-bold ${soundEnabled ? 'bg-green-500 text-white' : 'bg-gray-500 text-white'}`}
            >
              {soundEnabled ? '🔊 Sound On' : '🔇 Sound Off'}
            </button>
          </div>
          
          <div className="text-sm text-white max-w-md mb-4 bg-black bg-opacity-30 p-4 rounded-lg">
            <h3 className="font-bold mb-2">💫 Power-ups:</h3>
            <div className="grid grid-cols-1 gap-2 text-xs">
              <div>🧲 Magnet - Attracts nearby coins</div>
              <div>2× Double Points - 2x score for coins</div>
              <div>⏰ Slow Mo - Slows down time</div>
            </div>
          </div>
        </div>
      )}
      
      {gameState === 'ready' && (
        <p className="mt-4 text-center text-xl font-bold text-white bg-black bg-opacity-50 px-4 py-2 rounded-lg">
          🚀 Press Spacebar or Touch Screen to begin flying!
        </p>
      )}
      
      {gameState === 'paused' && (
        <p className="mt-4 text-center text-xl font-bold text-white bg-black bg-opacity-50 px-4 py-2 rounded-lg">
          ⏸️ Game Paused - Press Spacebar to Resume
        </p>
      )}
      
      {gameState === 'gameover' && (
        <div className="mt-6 text-center bg-white p-6 rounded-lg shadow-2xl">
          {showNameInput && (
            <div className="mb-6 p-4 bg-blue-50 rounded-lg border-2 border-blue-200">
              <h3 className="text-lg font-bold text-blue-800 mb-3">🏆 Save Your Score!</h3>
              <div className="flex flex-col gap-3">
                <input
                  type="text"
                  placeholder="Enter your name"
                  value={playerName}
                  onChange={(e) => setPlayerName(e.target.value)}
                  className="px-3 py-2 border-2 border-blue-300 rounded-lg text-center font-medium"
                  maxLength="20"
                />
                <div className="flex gap-2 justify-center">
                  <button
                    onClick={saveScoreWithName}
                    className="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg font-medium"
                  >
                    💾 Save Score
                  </button>
                  <button
                    onClick={() => setShowNameInput(false)}
                    className="px-4 py-2 bg-gray-500 hover:bg-gray-600 text-white rounded-lg font-medium"
                  >
                    Skip
                  </button>
                </div>
              </div>
            </div>
          )}

          {showLeaderboard && (
            <div className="mb-6 p-4 bg-yellow-50 rounded-lg border-2 border-yellow-200 max-h-80 overflow-y-auto">
              <h3 className="text-lg font-bold text-yellow-800 mb-3">🏆 High Scores</h3>
              {highScores.length === 0 ? (
                <p className="text-gray-600">No scores saved yet!</p>
              ) : (
                <div className="space-y-2">
                  {highScores.map((entry, index) => (
                    <div key={index} className="bg-white p-2 rounded border flex justify-between items-center text-sm">
                      <div className="flex items-center gap-2">
                        <span className="font-bold text-blue-600">#{index + 1}</span>
                        <span className="font-medium">{entry.name}</span>
                      </div>
                      <div className="text-right">
                        <div className="font-bold text-green-600">{entry.score} pts</div>
                        <div className="text-xs text-gray-500">{entry.date}</div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          )}

          <div className="mb-6">
            <button
              onClick={toggleLeaderboard}
              className="px-6 py-3 bg-yellow-500 hover:bg-yellow-600 text-white rounded-lg font-bold text-lg shadow-lg transform hover:scale-105 transition-transform"
            >
              🏆 {showLeaderboard ? 'Hide' : 'View'} High Scores
            </button>
          </div>

          <div className="mb-6 p-4 bg-gray-100 rounded-lg">
            <h3 className="text-lg font-bold text-gray-800 mb-3">📤 Share Your Score</h3>
            <SocialShareButtons score={score} gameStats={gameStats.current} highScore={highScore} />
          </div>
          
          <p className="text-3xl font-bold text-red-600 mb-3">💥 Game Over!</p>
          <p className="text-xl mb-2">Final Score: <span className="font-bold text-blue-600">{score}</span></p>
          
          <div className="mb-4">
            <button
              onClick={copyScoreToClipboard}
              className="px-4 py-2 bg-purple-500 hover:bg-purple-600 text-white rounded-lg font-medium text-sm shadow-md transform hover:scale-105 transition-transform relative"
            >
              📋 Copy Score
            </button>
            {copyFeedback && (
              <div className="mt-2 text-green-600 font-medium text-sm">
                ✅ Copied!
              </div>
            )}
          </div>
          
          <p className="text-xl mb-2">High Score: <span className="font-bold text-green-600">{highScore}</span></p>
          <div className="text-sm text-gray-600 mb-4">
            <p>Coins Collected: {gameStats.current.coinsCollected}</p>
            <p>Power-ups Used: {gameStats.current.powerUpsUsed}</p>
            <p>Time Alive: {(() => {
              const totalSeconds = Math.round(gameStats.current.timeAlive);
              if (totalSeconds < 60) {
                return `${totalSeconds}s`;
              } else if (totalSeconds < 3600) {
                const minutes = Math.floor(totalSeconds / 60);
                const seconds = totalSeconds % 60;
                return `${minutes}m ${seconds}s`;
              } else {
                const hours = Math.floor(totalSeconds / 3600);
                const minutes = Math.floor((totalSeconds % 3600) / 60);
                const seconds = totalSeconds % 60;
                return `${hours}h ${minutes}m ${seconds}s`;
              }
            })()}</p>
          </div>
          <button 
            onClick={startGame} 
            className="px-8 py-4 bg-blue-500 hover:bg-blue-600 text-white rounded-lg font-bold text-xl shadow-lg transform hover:scale-105 transition-transform"
          >
            🔄 Play Again
          </button>
          <p className="text-sm text-gray-500 mt-2">{showNameInput ? 'Save your score or skip to enable R key restart' : 'Press R to restart'}</p>
        </div>
      )}
      
      <p className="mt-4 text-center text-white max-w-md bg-black bg-opacity-30 p-3 rounded-lg">
        Hold <strong>Spacebar</strong> or <strong>Touch Screen</strong> to fly up. Release to descend. Press <strong>Esc or two-finger touch</strong> to pause. Avoid green obstacles, collect gold coins and power-ups! 🎯
      </p>
    </div>
  );
}