import { useEffect, useRef } from 'react'
import {
  Engine,
  Scene,
  ArcRotateCamera,
  Vector3,
  HemisphericLight,
  MeshBuilder,
  StandardMaterial,
  Color3
} from 'babylonjs'

interface BabylonViewerProps {
  width?: number
  height?: number
}

export default function BabylonViewer({ width = 800, height = 600 }: BabylonViewerProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const engineRef = useRef<Engine | null>(null)
  const sceneRef = useRef<Scene | null>(null)

  useEffect(() => {
    if (!canvasRef.current) return

    const canvas = canvasRef.current
    const engine = new Engine(canvas, true)
    engineRef.current = engine

    const scene = new Scene(engine)
    sceneRef.current = scene

    const camera = new ArcRotateCamera('camera1', -Math.PI / 2, Math.PI / 2.5, 10, Vector3.Zero(), scene)
    camera.attachControl(canvas, true)
    scene.activeCamera = camera

    const light = new HemisphericLight('light', new Vector3(0, 1, 0), scene)
    light.intensity = 0.7

    const sphere = MeshBuilder.CreateSphere('sphere', { diameter: 2 }, scene)
    sphere.position.y = 1

    const ground = MeshBuilder.CreateGround('ground', { width: 6, height: 6 }, scene)

    const sphereMaterial = new StandardMaterial('sphereMaterial', scene)
    sphereMaterial.diffuseColor = new Color3(1, 0, 1)
    sphere.material = sphereMaterial

    const groundMaterial = new StandardMaterial('groundMaterial', scene)
    groundMaterial.diffuseColor = new Color3(0.5, 0.5, 0.5)
    ground.material = groundMaterial

    engine.runRenderLoop(() => {
      scene.render()
    })

    const handleResize = () => {
      engine.resize()
    }

    window.addEventListener('resize', handleResize)

    return () => {
      window.removeEventListener('resize', handleResize)
      engine.dispose()
    }
  }, [])

  return (
    <canvas
      ref={canvasRef}
      width={width}
      height={height}
      style={{ width: '100%', height: '100%', display: 'block' }}
    />
  )
}