import { Canvas } from '@react-three/fiber';
import { OrbitControls, Stars, Sky, Environment } from '@react-three/drei';
import Ocean from './components/Ocean';
import Ship from './components/Ship';
import FluidField from './components/FluidField';
import ControlPanel from './components/ControlPanel';

export default function App() {
  return (
    <div className="w-full h-screen relative overflow-hidden bg-[#0a1628]">
      {/* 3D Canvas */}
      <Canvas
        camera={{ position: [40, 20, 60], fov: 55, near: 0.1, far: 2000 }}
        shadows
        gl={{ antialias: true, alpha: false }}
        style={{ position: 'absolute', inset: 0 }}
      >
        {/* Lighting */}
        <ambientLight intensity={0.3} color="#b0d8ff" />
        <directionalLight
          position={[60, 80, 40]}
          intensity={1.8}
          color="#fff8ee"
          castShadow
          shadow-mapSize={[2048, 2048]}
        />
        <pointLight position={[0, 15, 0]} intensity={0.5} color="#5ec4f0" />

        {/* Sky & Stars */}
        <Sky
          sunPosition={[100, 40, 20]}
          turbidity={10}
          rayleigh={2}
          mieCoefficient={0.005}
          mieDirectionalG={0.8}
        />
        <Stars radius={400} depth={60} count={2000} factor={4} />

        {/* Fog for depth */}
        <fog attach="fog" args={['#0a1628', 100, 500]} />

        {/* Scene objects */}
        <Ocean />
        <Ship />
        <FluidField />

        {/* Navigation grid lines (seabed visual aid) */}
        <gridHelper args={[200, 40, '#0d2137', '#0d2137']} position={[0, -12, 0]} />

        {/* Controls */}
        <OrbitControls
          target={[0, 0, 0]}
          maxPolarAngle={Math.PI / 2.1}
          minDistance={15}
          maxDistance={300}
          enablePan={true}
          enableDamping
          dampingFactor={0.05}
        />
      </Canvas>

      {/* UI overlay */}
      <ControlPanel />

      {/* Bottom legend */}
      <div className="absolute bottom-4 right-4 text-[10px] text-blue-600 font-mono text-right leading-relaxed select-none">
        <p>Ecuaciones: Navier-Stokes (Gerstner + N-S pressure)</p>
        <p>IA: Mistral-7B via Hugging Face Inference API</p>
        <p>Resistencia: ITTC-57 + Michell (Froude)</p>
        <p className="mt-1 text-blue-800">🖱 Click + Arrastre = Orbitar · Scroll = Zoom</p>
      </div>
    </div>
  );
}