cosmo/frontend/src/components/Scene.tsx

/**
 * Main 3D Scene component
 */
import { Canvas } from '@react-three/fiber';
import { OrbitControls, Stars as BackgroundStars, Html } from '@react-three/drei';
import { useMemo, useState, useEffect } from 'react';
import { CelestialBody } from './CelestialBody';
import { Probe } from './Probe';
import { CameraController } from './CameraController';
import { Trajectory } from './Trajectory';
import { OrbitRenderer } from './OrbitRenderer';
import { Stars } from './Stars';
import { Constellations } from './Constellations';
import { Galaxies } from './Galaxies';
import { Nebulae } from './Nebulae';
import { FocusInfo } from './FocusInfo';
import { AsteroidBelts } from './AsteroidBelts';
import { scalePosition } from '../utils/scaleDistance';
import { calculateRenderPosition } from '../utils/renderPosition';
import type { CelestialBody as CelestialBodyType, Position } from '../types';

interface SceneProps {
  bodies: CelestialBodyType[];
  selectedBody: CelestialBodyType | null;
  trajectoryPositions?: Position[];
  showOrbits?: boolean;
  onBodySelect?: (body: CelestialBodyType | null) => void;
  resetTrigger?: number;
}

export function Scene({ bodies, selectedBody, trajectoryPositions = [], showOrbits = true, onBodySelect, resetTrigger = 0 }: SceneProps) {
  // State to control info panel visibility (independent of selection)
  const [showInfoPanel, setShowInfoPanel] = useState(true);

  // Reset info panel visibility when selected body changes
  useEffect(() => {
    if (selectedBody) {
      setShowInfoPanel(true);
    }
  }, [selectedBody]);

  // Separate natural celestial bodies (planets/dwarf planets/satellites/stars) from probes
  const celestialBodies = bodies.filter((b) => b.type !== 'probe');
  const probes = bodies.filter((b) => b.type === 'probe');

  // Always show all probes (changed from previous behavior)
  const visibleProbes = probes;

  // Calculate target position for OrbitControls
  const controlsTarget = useMemo(() => {
    if (selectedBody) {
      const pos = selectedBody.positions[0];
      const scaledPos = scalePosition(pos.x, pos.y, pos.z);
      return [scaledPos.x, scaledPos.z, scaledPos.y] as [number, number, number];
    }
    return [0, 0, 0] as [number, number, number];
  }, [selectedBody]);

  // Calculate position for FocusInfo (needs to match rendered position of body)
  const focusInfoPosition = useMemo(() => {
    if (!selectedBody) return [0, 0, 0] as [number, number, number];
    
    // We need to use the EXACT same logic as CelestialBody/Probe components
    // to ensure the label sticks to the object
    const renderPos = calculateRenderPosition(selectedBody, bodies);
    
    // Convert to Three.js coordinates (x, z, y)
    return [renderPos.x, renderPos.z, renderPos.y] as [number, number, number];
  }, [selectedBody, bodies]);

  return (
    <div className="w-full h-full bg-black">
      <Canvas
        camera={{
          position: [25, 20, 25], // Closer view to make solar system appear larger
          fov: 60, // Slightly narrower FOV for less distortion
          far: 20000, // Increased far plane for distant stars and constellations
        }}
        gl={{
          alpha: false,
          antialias: true,
          preserveDrawingBuffer: true, // Required for screenshots
        }}
        onCreated={({ gl, camera }) => {
          gl.sortObjects = true; // Enable object sorting by renderOrder
          camera.lookAt(0, 0, 0); // Look at the Sun (center)
        }}
      >
        {/* Camera controller for smooth transitions */}
        <CameraController 
          focusTarget={selectedBody} 
          allBodies={bodies} 
          resetTrigger={resetTrigger}
        />

        {/* Increase ambient light to see textures better */}
        <ambientLight intensity={0.5} />

        {/* Additional directional light to illuminate planets */}
        <directionalLight position={[10, 10, 5]} intensity={0.3} />

        {/* Stars background (procedural) */}
        <BackgroundStars
          radius={300}
          depth={60}
          count={5000}
          factor={7}
          saturation={0}
          fade={true}
        />

        {/* Nearby stars (real data) */}
        <Stars />

        {/* Major constellations */}
        <Constellations />

        {/* Nebulae */}
        <Nebulae />

        {/* Distant galaxies */}
        <Galaxies />

        {/* Asteroid Belts & Kuiper Belt */}
        <AsteroidBelts />

        {/* Render all celestial bodies: planets, dwarf planets, satellites, and stars */}
        {celestialBodies.map((body) => (
          <CelestialBody
            key={body.id}
            body={body}
            allBodies={bodies}
            isSelected={selectedBody?.id === body.id}
          />
        ))}

        {/* Unified orbit renderer for all celestial bodies (planets and dwarf planets) */}
        <OrbitRenderer visible={showOrbits} />

        {/* Render visible probes with 3D models */}
        {visibleProbes.map((body) => (
          <Probe
            key={body.id}
            body={body}
            allBodies={bodies}
            isSelected={selectedBody?.id === body.id}
          />
        ))}

        {/* Render trajectory for selected probe */}
        {selectedBody?.type === 'probe' && trajectoryPositions.length > 1 && (
          <Trajectory
            positions={trajectoryPositions}
            color="#00ffff"
            lineWidth={3}
          />
        )}

        {/* Camera controls */}
        <OrbitControls
          enablePan={true}
          enableZoom={true}
          enableRotate={true}
          minDistance={2}
          maxDistance={500}
          target={controlsTarget}
          enabled={true} // Always enabled
        />

        {/* Dynamic Focus Info Label */}
        {selectedBody && showInfoPanel && (
          <Html position={focusInfoPosition} center zIndexRange={[100, 0]}>
            <FocusInfo body={selectedBody} onClose={() => setShowInfoPanel(false)} />
          </Html>
        )}
      </Canvas>
    </div>
  );
}