import React, { useState, useRef, useEffect } from 'react';
import { Canvas } from '@react-three/fiber';
import { OrbitControls, Stars } from '@react-three/drei';
import * as THREE from 'three';
import Navbar from '../components/Navbar';
import PlanetInfo from '../components/PlanetInfo';
import StarField from '../components/StarField';
import Sun from '../components/Sun';
import Planet from '../components/Planet';

export default function SolarSystem() {
  const [selectedPlanet, setSelectedPlanet] = useState(null);
  const [speed, setSpeed] = useState(1);
  const [cameraDistance, setCameraDistance] = useState(100);
  const [viewMode, setViewMode] = useState('solar-system');
  const [planetData, setPlanetData] = useState(null);

  // Planet data configuration
  const planets = [
    { 
      name: "Mercury", 
      size: 2, 
      distance: 30, 
      speed: 0.04, 
      color: "#A5A5A5",
      texture: null,
      onClick: () => handlePlanetClick("mercury")
    },
    { 
      name: "Venus", 
      size: 3.5, 
      distance: 45, 
      speed: 0.03, 
      color: "#E3BB76",
      texture: null,
      onClick: () => handlePlanetClick("venus")
    },
    { 
      name: "Earth", 
      size: 3.6, 
      distance: 60, 
      speed: 0.02, 
      color: "#22A6B3",
      texture: null,
      onClick: () => handlePlanetClick("earth")
    },
    { 
      name: "Mars", 
      size: 2.8, 
      distance: 75, 
      speed: 0.018, 
      color: "#FF6B6B",
      texture: null,
      onClick: () => handlePlanetClick("mars")
    },
    { 
      name: "Jupiter", 
      size: 10, 
      distance: 100, 
      speed: 0.012, 
      color: "#DDA15E",
      texture: null,
      onClick: () => handlePlanetClick("jupiter")
    },
    { 
      name: "Saturn", 
      size: 8.5, 
      distance: 130, 
      speed: 0.01, 
      color: "#BC8F5F",
      texture: null,
      hasRings: true,
      onClick: () => handlePlanetClick("saturn")
    },
    { 
      name: "Uranus", 
      size: 6, 
      distance: 160, 
      speed: 0.008, 
      color: "#7ED6DF",
      texture: null,
      onClick: () => handlePlanetClick("uranus")
    },
    { 
      name: "Neptune", 
      size: 5.8, 
      distance: 190, 
      speed: 0.006, 
      color: "#219EBD",
      texture: null,
      onClick: () => handlePlanetClick("neptune")
    }
  ];

  const handlePlanetClick = (planetName) => {
    setSelectedPlanet(planetName);
    // Update camera position for better view
    setCameraDistance(40);
  };

  const handleClosePlanetInfo = () => {
    setSelectedPlanet(null);
    setCameraDistance(100);
  };

  return (
    <div className="min-h-screen bg-black text-white font-sans overflow-hidden">
      {/* Navbar */}
      <Navbar 
        setView={setViewMode} 
        speed={speed} 
        setSpeed={setSpeed} 
      />

      {/* 3D Canvas */}
      <div className="h-screen w-full relative">
        <Canvas camera={{ position: [0, 80, 100], fov: 60 }}>
          {/* Lights */}
          <ambientLight intensity={0.2} />
          <pointLight position={[100, 100, 50]} intensity={1} color="#FFFFFF" />
          
          {/* Controls */}
          <OrbitControls 
            enablePan={false}
            minDistance={20}
            maxDistance={500}
            rotateSpeed={0.5}
            zoomSpeed={0.8}
            dampingFactor={0.1}
          />
          
          {/* Starfield */}
          <StarField count={2000} />
          
          {/* Sun */}
          <Sun 
            onClick={() => handlePlanetClick('sun')} 
          />
          
          {/* Planets */}
          {planets.map((planet) => (
            <Planet 
              key={planet.name}
              name={planet.name}
              size={planet.size}
              distance={planet.distance}
              speed={planet.speed * speed}
              color={planet.color}
              texture={planet.texture}
              onClick={planet.onClick}
              hasRings={planet.hasRings}
            />
          ))}
          
          {/* Orbit lines for clarity */}
          <group>
            {planets.map((planet, i) => (
              <mesh key={`orbit-${i}`} rotation={[-Math.PI / 2, 0, 0]}>
                <ringGeometry args={[planet.distance - 0.2, planet.distance + 0.2, 64]} />
                <meshBasicMaterial color="#FFFFFF" transparent opacity={0.05} />
              </mesh>
            ))}
          </group>
        </Canvas>
        
        {/* Planet Info Modal */}
        {selectedPlanet && (
          <PlanetInfo 
            planet={selectedPlanet} 
            onClose={handleClosePlanetInfo} 
          />
        )}

        {/* Info Panel */}
        <div className="absolute bottom-6 left-6 right-6 md:left-10 md:right-auto md:w-80 bg-black/60 backdrop-blur-md rounded-xl border border-white/10 p-6 z-10">
          <h2 className="text-xl font-bold mb-3 bg-gradient-to-r from-cyan-400 to-purple-500 bg-clip-text text-transparent">
            Interactive Solar System
          </h2>
          <p className="text-gray-300 mb-4 text-sm">
            Click on any planet to learn more about it. Use your mouse to rotate, zoom, and explore the solar system.
          </p>
          <div className="space-y-2 text-xs text-gray-400">
            <div className="flex items-center gap-2">
              <div className="w-3 h-3 rounded-full bg-yellow-400 shadow-[0_0_8px_rgba(253,224,71,0.8)]"></div>
              <span>Click the Sun or planets to explore</span>
            </div>
            <div className="flex items-center gap-2">
              <div className="w-3 h-3 rounded-full bg-blue-500"></div>
              <span>Earth is our home planet</span>
            </div>
            <div className="flex items-center gap-2">
              <div className="w-3 h-3 rounded-full bg-red-500"></div>
              <span>Mars - the Red Planet</span>
            </div>
          </div>
        </div>
        
        {/* Footer Attribution */}
        <div className="absolute bottom-4 right-4 z-10">
          <a 
            href="https://huggingface.co/spaces/akhaliq/anycoder" 
            target="_blank" 
            rel="noopener noreferrer"
            className="text-xs text-gray-500 hover:text-gray-300 transition-colors"
          >
            Built with anycoder
          </a>
        </div>
      </div>
    </div>
  );
}