import React, { useState, useEffect, useRef } from 'react';
import { ChevronUp, ChevronDown, ChevronLeft, ChevronRight, Map, Settings, Info } from 'lucide-react';

export default function VolvoSimulator() {
  // Game state
  const [speed, setSpeed] = useState(0);
  const [rpm, setRpm] = useState(0);
  const [gear, setGear] = useState(1);
  const [position, setPosition] = useState({ x: 50, y: 50 });
  const [direction, setDirection] = useState(0); // 0-359 degrees
  const [engineStarted, setEngineStarted] = useState(false);
  const [showMap, setShowMap] = useState(false);
  const [showSettings, setShowSettings] = useState(false);
  const [showInfo, setShowInfo] = useState(true);
  const [fuel, setFuel] = useState(100);
  const [distance, setDistance] = useState(0);
  const [currentLocation, setCurrentLocation] = useState("Praha");
  
  // Game world data
  const locations = [
    { name: "Praha", x: 50, y: 50, description: "Hlavní město České republiky" },
    { name: "Brno", x: 70, y: 70, description: "Druhé největší město v ČR" },
    { name: "Ostrava", x: 85, y: 40, description: "Průmyslové město na severovýchodě" },
    { name: "Plzeň", x: 30, y: 55, description: "Domov slavného piva" },
    { name: "Olomouc", x: 75, y: 55, description: "Historické město s univerzitou" },
    { name: "České Budějovice", x: 45, y: 80, description: "Město na jihu Čech" },
    { name: "Karlovy Vary", x: 20, y: 30, description: "Lázeňské město" },
    { name: "Liberec", x: 40, y: 20, description: "Město pod Ještědem" },
  ];
  
  // Car specifications
  const carSpecs = {
    model: "Volvo S60 5D",
    year: 2004,
    engine: "2.4L 5-válec",
    power: "170 koní",
    transmission: "5-stupňová manuální",
    topSpeed: 220,
    acceleration: "8.5s (0-100 km/h)",
    weight: "1550 kg",
  };

  // Key state tracking
  const [keysPressed, setKeysPressed] = useState({
    up: false,
    down: false,
    left: false,
    right: false,
  });
  
  const gameLoopRef = useRef(null);
  const canvasRef = useRef(null);
  
  // Handle key presses
  useEffect(() => {
    const handleKeyDown = (e) => {
      if (e.key === 'ArrowUp' || e.key === 'w') {
        setKeysPressed(prev => ({ ...prev, up: true }));
      } else if (e.key === 'ArrowDown' || e.key === 's') {
        setKeysPressed(prev => ({ ...prev, down: true }));
      } else if (e.key === 'ArrowLeft' || e.key === 'a') {
        setKeysPressed(prev => ({ ...prev, left: true }));
      } else if (e.key === 'ArrowRight' || e.key === 'd') {
        setKeysPressed(prev => ({ ...prev, right: true }));
      } else if (e.key === 'm') {
        setShowMap(prev => !prev);
      } else if (e.key === 'e') {
        setEngineStarted(prev => !prev);
      } else if (e.key === 'Escape') {
        setShowSettings(prev => !prev);
      } else if (e.key === 'i') {
        setShowInfo(prev => !prev);
      }
    };
    
    const handleKeyUp = (e) => {
      if (e.key === 'ArrowUp' || e.key === 'w') {
        setKeysPressed(prev => ({ ...prev, up: false }));
      } else if (e.key === 'ArrowDown' || e.key === 's') {
        setKeysPressed(prev => ({ ...prev, down: false }));
      } else if (e.key === 'ArrowLeft' || e.key === 'a') {
        setKeysPressed(prev => ({ ...prev, left: false }));
      } else if (e.key === 'ArrowRight' || e.key === 'd') {
        setKeysPressed(prev => ({ ...prev, right: false }));
      }
    };
    
    window.addEventListener('keydown', handleKeyDown);
    window.addEventListener('keyup', handleKeyUp);
    
    return () => {
      window.removeEventListener('keydown', handleKeyDown);
      window.removeEventListener('keyup', handleKeyUp);
    };
  }, []);
  
  // Game loop
  useEffect(() => {
    if (!engineStarted) {
      setSpeed(0);
      setRpm(0);
      return;
    }
    
    const gameLoop = () => {
      // Update RPM based on acceleration/deceleration
      let newRpm = rpm;
      if (keysPressed.up && speed < carSpecs.topSpeed) {
        newRpm = Math.min(7000, rpm + 100);
      } else if (keysPressed.down) {
        newRpm = Math.max(800, rpm - 200);
      } else {
        // Idle RPM when no keys are pressed
        newRpm = rpm > 800 ? rpm - 50 : 800;
      }
      setRpm(newRpm);
      
      // Update speed based on RPM
      let newSpeed = speed;
      if (newRpm > 1500 && keysPressed.up) {
        newSpeed = Math.min(carSpecs.topSpeed, speed + 0.5);
      } else if (keysPressed.down) {
        newSpeed = Math.max(0, speed - 1);
      } else {
        // Gradual deceleration
        newSpeed = Math.max(0, speed - 0.2);
      }
      setSpeed(newSpeed);
      
      // Update gear based on speed
      let newGear = gear;
      if (newSpeed < 20) newGear = 1;
      else if (newSpeed < 40) newGear = 2;
      else if (newSpeed < 70) newGear = 3;
      else if (newSpeed < 100) newGear = 4;
      else newGear = 5;
      setGear(newGear);
      
      // Update direction based on steering
      let newDirection = direction;
      if (keysPressed.left && speed > 0) {
        newDirection = (direction - 2 + 360) % 360;
      } else if (keysPressed.right && speed > 0) {
        newDirection = (direction + 2) % 360;
      }
      setDirection(newDirection);
      
      // Update position based on speed and direction
      if (speed > 0) {
        const radians = (newDirection * Math.PI) / 180;
        const deltaX = Math.sin(radians) * (speed / 50);
        const deltaY = -Math.cos(radians) * (speed / 50);
        
        setPosition(prev => ({
          x: Math.max(0, Math.min(100, prev.x + deltaX)),
          y: Math.max(0, Math.min(100, prev.y + deltaY))
        }));
        
        // Update distance traveled
        setDistance(prev => prev + (speed / 3600));
        
        // Update fuel
        setFuel(prev => Math.max(0, prev - (speed / 10000)));
      }
      
      // Check if near any locations
      const nearestLocation = locations.find(loc => {
        const distance = Math.sqrt(
          Math.pow(loc.x - position.x, 2) + Math.pow(loc.y - position.y, 2)
        );
        return distance < 5;
      });
      
      if (nearestLocation && nearestLocation.name !== currentLocation) {
        setCurrentLocation(nearestLocation.name);
      }
      
      // Draw the scene
      drawScene();
    };
    
    gameLoopRef.current = setInterval(gameLoop, 50);
    
    return () => {
      clearInterval(gameLoopRef.current);
    };
  }, [engineStarted, keysPressed, speed, rpm, direction, position, gear, fuel, distance, currentLocation]);
  
  // Draw the scene
  const drawScene = () => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    
    const ctx = canvas.getContext('2d');
    const width = canvas.width;
    const height = canvas.height;
    
    // Clear canvas
    ctx.clearRect(0, 0, width, height);
    
    // Draw sky
    const gradient = ctx.createLinearGradient(0, 0, 0, height / 2);
    gradient.addColorStop(0, '#1a3a63');
    gradient.addColorStop(1, '#87CEEB');
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, width, height / 2);
    
    // Draw ground
    const groundGradient = ctx.createLinearGradient(0, height / 2, 0, height);
    groundGradient.addColorStop(0, '#2c5e4c');
    groundGradient.addColorStop(1, '#8b5a2b');
    ctx.fillStyle = groundGradient;
    ctx.fillRect(0, height / 2, width, height / 2);
    
    // Draw road
    ctx.fillStyle = '#555555';
    ctx.fillRect(0, height / 2, width, height / 4);
    
    // Draw road markings
    ctx.strokeStyle = '#FFFFFF';
    ctx.setLineDash([20, 20]);
    ctx.beginPath();
    ctx.moveTo(0, height / 2 + height / 8);
    ctx.lineTo(width, height / 2 + height / 8);
    ctx.stroke();
    
    // Draw dashboard
    ctx.fillStyle = '#333333';
    ctx.fillRect(0, height * 0.75, width, height * 0.25);
    
    // Draw speedometer
    ctx.fillStyle = '#FFFFFF';
    ctx.font = '16px Inter, sans-serif';
    ctx.fillText(`${Math.round(speed)} km/h`, width * 0.1, height * 0.85);
    
    // Draw RPM gauge
    ctx.fillText(`${Math.round(rpm)} RPM`, width * 0.3, height * 0.85);
    
    // Draw gear indicator
    ctx.fillText(`Převod: ${gear}`, width * 0.5, height * 0.85);
    
    // Draw fuel gauge
    ctx.fillText(`Palivo: ${Math.round(fuel)}%`, width * 0.7, height * 0.85);
    
    // Draw steering wheel
    ctx.strokeStyle = '#AAAAAA';
    ctx.lineWidth = 3;
    ctx.setLineDash([]);
    ctx.beginPath();
    ctx.arc(width / 2, height * 0.9, 30, 0, Math.PI * 2);
    ctx.stroke();
    
    // Draw steering wheel spokes based on direction
    const steeringAngle = ((direction % 360) / 360) * Math.PI * 2;
    ctx.beginPath();
    ctx.moveTo(width / 2, height * 0.9);
    ctx.lineTo(
      width / 2 + Math.cos(steeringAngle) * 25,
      height * 0.9 + Math.sin(steeringAngle) * 25
    );
    ctx.stroke();
    
    ctx.beginPath();
    ctx.moveTo(width / 2, height * 0.9);
    ctx.lineTo(
      width / 2 + Math.cos(steeringAngle + Math.PI) * 25,
      height * 0.9 + Math.sin(steeringAngle + Math.PI) * 25
    );
    ctx.stroke();
  };
  
  // Initialize canvas
  useEffect(() => {
    const canvas = canvasRef.current;
    if (canvas) {
      canvas.width = canvas.clientWidth;
      canvas.height = canvas.clientHeight;
      drawScene();
    }
    
    const handleResize = () => {
      if (canvas) {
        canvas.width = canvas.clientWidth;
        canvas.height = canvas.clientHeight;
        drawScene();
      }
    };
    
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  
  return (
    <div className="flex flex-col h-screen w-full bg-gray-900 text-white overflow-hidden">
      {/* Game canvas */}
      <div className="relative flex-grow">
        <canvas 
          ref={canvasRef} 
          className="w-full h-full"
        />
        
        {/* HUD elements */}
        <div className="absolute top-4 left-4 bg-black/50 p-3 rounded-lg">
          <div className="text-xl font-bold">Volvo S60 5D (2004)</div>
          <div>{currentLocation}</div>
          <div>{distance.toFixed(1)} km</div>
        </div>
        
        {/* Controls overlay */}
        <div className="absolute bottom-4 right-4 flex gap-2">
          <button 
            onClick={() => setShowMap(prev => !prev)}
            className="bg-gray-800/80 p-2 rounded-full hover:bg-gray-700/80 transition-colors"
          >
            <Map size={24} />
          </button>
          <button 
            onClick={() => setShowSettings(prev => !prev)}
            className="bg-gray-800/80 p-2 rounded-full hover:bg-gray-700/80 transition-colors"
          >
            <Settings size={24} />
          </button>
          <button 
            onClick={() => setShowInfo(prev => !prev)}
            className="bg-gray-800/80 p-2 rounded-full hover:bg-gray-700/80 transition-colors"
          >
            <Info size={24} />
          </button>
        </div>
        
        {/* Engine start button */}
        <button
          onClick={() => setEngineStarted(prev => !prev)}
          className={`absolute bottom-4 left-4 px-4 py-2 rounded-lg font-bold transition-colors ${
            engineStarted ? 'bg-red-600 hover:bg-red-700' : 'bg-green-600 hover:bg-green-700'
          }`}
        >
          {engineStarted ? 'Vypnout motor' : 'Nastartovat motor'}
        </button>
        
        {/* Mobile controls */}
        <div className="absolute bottom-20 right-4 grid grid-cols-3 gap-2 md:hidden">
          <div></div>
          <button
            onTouchStart={() => setKeysPressed(prev => ({ ...prev, up: true }))}
            onTouchEnd={() => setKeysPressed(prev => ({ ...prev, up: false }))}
            className="bg-gray-800/80 p-3 rounded-lg active:bg-gray-700/80"
          >
            <ChevronUp size={24} />
          </button>
          <div></div>
          <button
            onTouchStart={() => setKeysPressed(prev => ({ ...prev, left: true }))}
            onTouchEnd={() => setKeysPressed(prev => ({ ...prev, left: false }))}
            className="bg-gray-800/80 p-3 rounded-lg active:bg-gray-700/80"
          >
            <ChevronLeft size={24} />
          </button>
          <button
            onTouchStart={() => setKeysPressed(prev => ({ ...prev, down: true }))}
            onTouchEnd={() => setKeysPressed(prev => ({ ...prev, down: false }))}
            className="bg-gray-800/80 p-3 rounded-lg active:bg-gray-700/80"
          >
            <ChevronDown size={24} />
          </button>
          <button
            onTouchStart={() => setKeysPressed(prev => ({ ...prev, right: true }))}
            onTouchEnd={() => setKeysPressed(prev => ({ ...prev, right: false }))}
            className="bg-gray-800/80 p-3 rounded-lg active:bg-gray-700/80"
          >
            <ChevronRight size={24} />
          </button>
        </div>
      </div>
      
      {/* Map overlay */}
      {showMap && (
        <div className="absolute inset-0 bg-black/80 flex items-center justify-center p-8">
          <div className="bg-gray-800 rounded-xl p-6 w-full max-w-2xl">
            <div className="flex justify-between items-center mb-4">
              <h2 className="text-2xl font-bold">Mapa České republiky</h2>
              <button 
                onClick={() => setShowMap(false)}
                className="text-gray-400 hover:text-white"
              >
                Zavřít
              </button>
            </div>
            <div className="relative w-full h-96 bg-gray-700 rounded-lg">
              {/* Draw map locations */}
              {locations.map((loc, index) => (
                <div 
                  key={index}
                  className={`absolute w-3 h-3 rounded-full ${
                    loc.name === currentLocation ? 'bg-blue-500' : 'bg-white'
                  }`}
                  style={{ 
                    left: `${loc.x}%`, 
                    top: `${loc.y}%`,
                    transform: 'translate(-50%, -50%)'
                  }}
                  title={loc.name}
                />
              ))}
              
              {/* Draw player position */}
              <div 
                className="absolute w-4 h-4 bg-red-500 rounded-full"
                style={{ 
                  left: `${position.x}%`, 
                  top: `${position.y}%`,
                  transform: `translate(-50%, -50%) rotate(${direction}deg)`
                }}
              >
                <div className="absolute w-2 h-2 bg-white rounded-full left-1/2 top-0 transform -translate-x-1/2 -translate-y-1/2"></div>
              </div>
              
              {/* Location labels */}
              {locations.map((loc, index) => (
                <div 
                  key={`label-${index}`}
                  className="absolute text-xs font-bold text-white bg-black/50 px-1 rounded"
                  style={{ 
                    left: `${loc.x}%`, 
                    top: `${loc.y - 3}%`,
                    transform: 'translate(-50%, -100%)'
                  }}
                >
                  {loc.name}
                </div>
              ))}
            </div>
            <div className="mt-4 text-sm">
              <p>Aktuální poloha: {currentLocation}</p>
              <p>Souřadnice: X: {position.x.toFixed(1)}, Y: {position.y.toFixed(1)}</p>
              <p>Směr: {direction}°</p>
            </div>
          </div>
        </div>
      )}
      
      {/* Settings overlay */}
      {showSettings && (
        <div className="absolute inset-0 bg-black/80 flex items-center justify-center p-8">
          <div className="bg-gray-800 rounded-xl p-6 w-full max-w-md">
            <div className="flex justify-between items-center mb-4">
              <h2 className="text-2xl font-bold">Nastavení</h2>
              <button 
                onClick={() => setShowSettings(false)}
                className="text-gray-400 hover:text-white"
              >
                Zavřít
              </button>
            </div>
            <div className="space-y-4">
              <div>
                <h3 className="text-lg font-semibold mb-2">Ovládání</h3>
                <ul className="space-y-1 text-gray-300">
                  <li>W / ↑ - Zrychlit</li>
                  <li>S / ↓ - Zpomalit / Brzdit</li>
                  <li>A / ← - Zatočit doleva</li>
                  <li>D / → - Zatočit doprava</li>
                  <li>E - Nastartovat/Vypnout motor</li>
                  <li>M - Zobrazit mapu</li>
                  <li>I - Informace o vozidle</li>
                  <li>ESC - Nastavení</li>
                </ul>
              </div>
              <div>
                <h3 className="text-lg font-semibold mb-2">Grafika</h3>
                <div className="flex items-center justify-between">
                  <span>Kvalita grafiky</span>
                  <select className="bg-gray-700 rounded px-2 py-1">
                    <option>Nízká</option>
                    <option selected>Střední</option>
                    <option>Vysoká</option>
                  </select>
                </div>
              </div>
              <div>
                <h3 className="text-lg font-semibold mb-2">Zvuk</h3>
                <div className="flex items-center justify-between">
                  <span>Hlasitost</span>
                  <input type="range" min="0" max="100" defaultValue="80" className="w-32" />
                </div>
              </div>
              <button 
                onClick={() => {
                  setPosition({ x: 50, y: 50 });
                  setDirection(0);
                  setSpeed(0);
                  setRpm(0);
                  setFuel(100);
                  setDistance(0);
                  setCurrentLocation("Praha");
                  setEngineStarted(false);
                  setShowSettings(false);
                }}
                className="w-full bg-red-600 hover:bg-red-700 py-2 rounded-lg font-bold mt-4"
              >
                Restartovat hru
              </button>
            </div>
          </div>
        </div>
      )}
      
      {/* Vehicle info overlay */}
      {showInfo && (
        <div className="absolute inset-0 bg-black/80 flex items-center justify-center p-8">
          <div className="bg-gray-800 rounded-xl p-6 w-full max-w-md">
            <div className="flex justify-between items-center mb-4">
              <h2 className="text-2xl font-bold">Volvo S60 5D (2004)</h2>
              <button 
                onClick={() => setShowInfo(false)}
                className="text-gray-400 hover:text-white"
              >
                Zavřít
              </button>
            </div>
            <div className="relative w-full h-48 bg-gray-700 rounded-lg mb-4 overflow-hidden">
              <img 
                src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Volvo_S60_--_01-26-2012.jpg/1200px-Volvo_S60_--_01-26-2012.jpg" 
                alt="Volvo S60" 
                className="w-full h-full object-cover"
              />
            </div>
            <div className="grid grid-cols-2 gap-4">
              {Object.entries(carSpecs).map(([key, value]) => (
                <div key={key}>
                  <div className="text-gray-400 text-sm">{key}</div>
                  <div className="font-semibold">{value}</div>
                </div>
              ))}
            </div>
            <div className="mt-6">
              <h3 className="text-lg font-semibold mb-2">Statistiky jízdy</h3>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <div className="text-gray-400 text-sm">Ujetá vzdálenost</div>
                  <div className="font-semibold">{distance.toFixed(1)} km</div>
                </div>
                <div>
                  <div className="text-gray-400 text-sm">Aktuální rychlost</div>
                  <div className="font-semibold">{Math.round(speed)} km/h</div>
                </div>
                <div>
                  <div className="text-gray-400 text-sm">Aktuální otáčky</div>
                  <div className="font-semibold">{Math.round(rpm)} RPM</div>
                </div>
                <div>
                  <div className="text-gray-400 text-sm">Palivo</div>
                  <div className="font-semibold">{Math.round(fuel)}%</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
      
      {/* Welcome screen */}
      {!engineStarted && distance === 0 && (
        <div className="absolute inset-0 bg-black/90 flex items-center justify-center p-8">
          <div className="bg-gray-800 rounded-xl p-8 w-full max-w-lg text-center">
            <h1 className="text-3xl font-bold mb-4">Volvo S60 Simulator</h1>
            <h2 className="text-xl text-gray-300 mb-6">Česká republika</h2>
            
            <div className="relative w-full h-48 bg-gray-700 rounded-lg mb-6 overflow-hidden">
              <img 
                src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Volvo_S60_--_01-26-2012.jpg/1200px-Volvo_S60_--_01-26-2012.jpg" 
                alt="Volvo S60" 
                className="w-full h-full object-cover"
              />
            </div>
            
            <p className="mb-6 text-gray-300">
              Vítejte v simulátoru Volvo S60! Prozkoumejte krásy České republiky v tomto klasickém švédském voze z roku 2004.
            </p>
            
            <button
              onClick={() => setEngineStarted(true)}
              className="bg-blue-600 hover:bg-blue-700 px-6 py-3 rounded-lg font-bold text-lg transition-colors"
            >
              Začít jízdu
            </button>
            
            <div className="mt-6 text-sm text-gray-400">
              Použijte klávesy W, A, S, D nebo šipky pro ovládání vozidla.
              Stiskněte M pro zobrazení mapy, I pro informace o vozidle a ESC pro nastavení.
            </div>
          </div>
        </div>
      )}
    </div>
  );
}