components/GaussianSplatViewer.jsx

import { useRef, useMemo, useState, useEffect } from 'react';
import { Canvas, useFrame } from '@react-three/fiber';
import { OrbitControls, Stars, useTexture } from '@react-three/drei';
import * as THREE from 'three';

function GaussianPoints({ worldData, isLoading }) {
  const pointsRef = useRef();
  const [hovered, setHovered] = useState(false);

  const { positions, colors, sizes } = useMemo(() => {
    if (isLoading || !worldData) {
      return { positions: new Float32Array(0), colors: new Float32Array(0), sizes: new Float32Array(0) };
    }

    const count = worldData.pointCount || 50000;
    const positions = new Float32Array(count * 3);
    const colors = new Float32Array(count * 3);
    const sizes = new Float32Array(count);

    const colorPalette = worldData.colorPalette || [[0.4, 0.6, 0.9], [0.2, 0.8, 0.4], [0.9, 0.3, 0.5]];

    for (let i = 0; i < count; i++) {
      const i3 = i * 3;
      
      // Spherical distribution for 360 capture feel
      const theta = Math.random() * Math.PI * 2;
      const phi = Math.acos(2 * Math.random() - 1);
      const r = 2 + Math.random() * 3;
      
      positions[i3] = r * Math.sin(phi) * Math.cos(theta);
      positions[i3 + 1] = r * Math.sin(phi) * Math.sin(theta);
      positions[i3 + 2] = r * Math.cos(phi);

      const color = colorPalette[Math.floor(Math.random() * colorPalette.length)];
      colors[i3] = color[0] + (Math.random() - 0.5) * 0.2;
      colors[i3 + 1] = color[1] + (Math.random() - 0.5) * 0.2;
      colors[i3 + 2] = color[2] + (Math.random() - 0.5) * 0.2;

      sizes[i] = Math.random() * 0.05 + 0.01;
    }

    return { positions, colors, sizes };
  }, [worldData, isLoading]);

  useFrame((state) => {
    if (pointsRef.current) {
      pointsRef.current.rotation.y += 0.001;
      pointsRef.current.rotation.x = Math.sin(state.clock.elapsedTime * 0.1) * 0.1;
    }
  });

  if (isLoading) return null;

  return (
    <points 
      ref={pointsRef}
      onPointerOver={() => setHovered(true)}
      onPointerOut={() => setHovered(false)}
    >
      <bufferGeometry>
        <bufferAttribute
          attach="attributes-position"
          count={positions.length / 3}
          array={positions}
          itemSize={3}
        />
        <bufferAttribute
          attach="attributes-color"
          count={colors.length / 3}
          array={colors}
          itemSize={3}
        />
        <bufferAttribute
          attach="attributes-size"
          count={sizes.length}
          array={sizes}
          itemSize={1}
        />
      </bufferGeometry>
      <pointsMaterial
        size={0.05}
        vertexColors
        transparent
        opacity={0.8}
        sizeAttenuation
        blending={THREE.AdditiveBlending}
        depthWrite={false}
      />
    </points>
  );
}

function Scene({ worldData, isLoading }) {
  return (
    <>
      <ambientLight intensity={0.5} />
      <pointLight position={[10, 10, 10]} intensity={1} />
      <Stars radius={100} depth={50} count={5000} factor={4} saturation={0} fade speed={1} />
      <GaussianPoints worldData={worldData} isLoading={isLoading} />
      <OrbitControls 
        enablePan={true}
        enableZoom={true}
        enableRotate={true}
        zoomSpeed={0.5}
        rotateSpeed={0.5}
        minDistance={2}
        maxDistance={20}
      />
    </>
  );
}

export default function GaussianSplatViewer({ worldData, isLoading }) {
  if (isLoading) {
    return (
      <div className="w-full h-full flex items-center justify-center bg-slate-950">
        <div className="text-center">
          <div className="w-16 h-16 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
          <p className="text-slate-400 animate-pulse">Loading Gaussian Splats...</p>
          <p className="text-slate-600 text-sm mt-2">Processing 360° capture data</p>
        </div>
      </div>
    );
  }

  return (
    <div className="w-full h-full relative">
      <Canvas
        camera={{ position: [0, 0, 8], fov: 60 }}
        dpr={[1, 2]}
        gl={{ antialias: true, alpha: true }}
        style={{ background: 'radial-gradient(circle at center, #1e293b 0%, #020617 100%)' }}
      >
        <Scene worldData={worldData} isLoading={isLoading} />
      </Canvas>
      
      <div className="absolute bottom-4 left-4 glass-panel rounded-lg p-3 text-xs text-slate-400">
        <p className="font-semibold text-slate-200 mb-1">Controls</p>
        <p>Left Click: Rotate</p>
        <p>Right Click: Pan</p>
        <p>Scroll: Zoom</p>
      </div>
    </div>
  );
}