import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import { useState } from "react";

const eras = [
  {
    name: "Precámbrico",
    periodo: "4,600 – 541 millones de años",
    geologia: "Formación de océanos y atmósfera",
    biologia: "Primeras bacterias y oxigenación",
    color: "#888888",
    radius: 4,
  },
  {
    name: "Paleozoico",
    periodo: "541 – 252 millones de años",
    geologia: "Supercontinente Pangea",
    biologia: "Explosión cámbrica, primeras plantas y animales terrestres",
    color: "#FF7F50",
    radius: 5,
  },
  {
    name: "Mesozoico",
    periodo: "252 – 66 millones de años",
    geologia: "Fragmentación de Pangea",
    biologia: "Dinosaurios, primeras aves y mamíferos",
    color: "#FFD700",
    radius: 6,
  },
  {
    name: "Cenozoico",
    periodo: "66 millones de años – actualidad",
    geologia: "Formación de cordilleras modernas",
    biologia: "Dominio de mamíferos, aparición del Homo sapiens",
    color: "#87CEEB",
    radius: 7,
  },
];

function Saturn({ setInfo }) {
  return (
    <group>
      {/* Cuerpo de Saturno */}
      <mesh>
        <sphereGeometry args={[2, 64, 64]} />
        <meshStandardMaterial color="#d2b48c" />
      </mesh>

      {/* Anillos */}
      {eras.map((era, i) => (
        <mesh
          key={i}
          rotation={[Math.PI / 2, 0, 0]}
          onClick={() => setInfo(era)}
        >
          <ringGeometry args={[era.radius, era.radius + 0.2, 64]} />
          <meshBasicMaterial
            color={era.color}
            side={2}
            transparent
            opacity={0.7}
          />
        </mesh>
      ))}
    </group>
  );
}

export default function App() {
  const [info, setInfo] = useState(null);

  return (
    <div className="flex h-screen">
      {/* Canvas 3D */}
      <Canvas camera={{ position: [10, 5, 10], fov: 50 }}>
        <ambientLight intensity={0.5} />
        <directionalLight position={[5, 5, 5]} intensity={1} />
        <Saturn setInfo={setInfo} />
        <OrbitControls />
      </Canvas>

      {/* Panel de información */}
      <div className="w-1/3 p-4 bg-black text-white overflow-y-auto">
        {info ? (
          <div>
            <h1 className="text-2xl font-bold mb-2">{info.name}</h1>
            <p><strong>Periodo:</strong> {info.periodo}</p>
            <p><strong>Geología:</strong> {info.geologia}</p>
            <p><strong>Biología:</strong> {info.biologia}</p>
          </div>
        ) : (
          <p className="text-gray-400">Haz clic en un anillo para explorar una era</p>
        )}
      </div>
    </div>
  );
}