// 3D Viewer Page - Three.js demo for rendering 3D data
const ThreeDViewerPage = () => {
  const { Box, Typography, Container, Paper } = MaterialUI;
  const canvasRef = React.useRef(null);
  const animationRef = React.useRef(null);

  React.useEffect(() => {
    if (!canvasRef.current || typeof THREE === 'undefined') return;

    const canvas = canvasRef.current;

    // Scene setup
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0x1a1a2e);

    // Camera
    const camera = new THREE.PerspectiveCamera(
      75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000
    );
    camera.position.set(3, 3, 3);
    camera.lookAt(0, 0, 0);

    // Renderer
    const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
    renderer.setSize(canvas.clientWidth, canvas.clientHeight);
    renderer.setPixelRatio(window.devicePixelRatio);

    // Lighting
    const ambientLight = new THREE.AmbientLight(0x404040, 2);
    scene.add(ambientLight);

    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight.position.set(5, 5, 5);
    scene.add(directionalLight);

    const pointLight = new THREE.PointLight(0x4fc3f7, 1, 100);
    pointLight.position.set(-3, 3, -3);
    scene.add(pointLight);

    // Torus knot
    const torusKnotGeometry = new THREE.TorusKnotGeometry(1, 0.3, 100, 16);
    const torusKnotMaterial = new THREE.MeshStandardMaterial({
      color: 0x4fc3f7,
      metalness: 0.3,
      roughness: 0.4
    });
    const torusKnot = new THREE.Mesh(torusKnotGeometry, torusKnotMaterial);
    scene.add(torusKnot);

    // Grid helper
    const gridHelper = new THREE.GridHelper(10, 10, 0x444444, 0x333333);
    gridHelper.position.y = -2;
    scene.add(gridHelper);

    // Animation loop
    const animate = () => {
      animationRef.current = requestAnimationFrame(animate);
      torusKnot.rotation.x += 0.01;
      torusKnot.rotation.y += 0.005;
      renderer.render(scene, camera);
    };
    animate();

    // Handle resize
    const handleResize = () => {
      const width = canvas.clientWidth;
      const height = canvas.clientHeight;
      renderer.setSize(width, height, false);
      camera.aspect = width / height;
      camera.updateProjectionMatrix();
    };
    window.addEventListener('resize', handleResize);

    // Cleanup
    return () => {
      window.removeEventListener('resize', handleResize);
      cancelAnimationFrame(animationRef.current);
      renderer.dispose();
      torusKnotGeometry.dispose();
      torusKnotMaterial.dispose();
    };
  }, []);

  return (
    <Container maxWidth="lg">
      <Box sx={{ py: 4 }}>
        <Typography variant="h4" component="h1" gutterBottom sx={{ fontWeight: 500 }}>
          3D Viewer
        </Typography>
        <Typography variant="body1" color="text.secondary" sx={{ mb: 3 }}>
          Experimenting with rendering 3D data such as point clouds and meshes using Three.js.
        </Typography>
        <Paper
          elevation={3}
          sx={{
            overflow: 'hidden',
            borderRadius: 2,
            backgroundColor: '#1a1a2e'
          }}
        >
          <canvas
            ref={canvasRef}
            style={{
              width: '100%',
              height: '500px',
              display: 'block'
            }}
          />
        </Paper>
      </Box>
    </Container>
  );
};

// Export to global scope for browser-based JSX compilation
window.ThreeDViewerPage = ThreeDViewerPage;