import { Canvas } from '@react-three/fiber'
import { XR, createXRStore } from '@react-three/xr'
import { Box, Plane, Text } from '@react-three/drei'

// Cria a store de estado para o WebXR
const store = createXRStore()

export default function App() {
  return (
    <>
      {/* Botão de sobreposição para entrar em VR */}
      <div
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          pointerEvents: 'none', // Deixa o clique passar para o Canvas 3D
          zIndex: 10,
        }}
      >
        <button
          onClick={() => store.enterVR()}
          style={{
            pointerEvents: 'auto',
            padding: '16px 32px',
            fontSize: '1.2rem',
            backgroundColor: '#0ea5e9',
            color: 'white',
            border: 'none',
            borderRadius: '12px',
            cursor: 'pointer',
            boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
            fontWeight: 'bold',
          }}
        >
          Entrar em Realidade Virtual (Quest 3)
        </button>
      </div>

      {/* Canvas 3D que ocupa a tela toda */}
      <Canvas style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', backgroundColor: '#1e293b' }}>
        <XR store={store}>
          <ambientLight intensity={0.6} />
          <directionalLight position={[10, 10, 10]} intensity={1.5} castShadow />
          
          {/* Chão */}
          <Plane args={[20, 20]} rotation={[-Math.PI / 2, 0, 0]} receiveShadow>
            <meshStandardMaterial color="#475569" />
          </Plane>

          {/* Mesa (Representação) */}
          <Box position={[0, 0.5, -1]} args={[2, 1, 1]} castShadow receiveShadow>
            <meshStandardMaterial color="#8B4513" />
          </Box>

          {/* Cubo interativo em cima da mesa */}
          <Box position={[0, 1.15, -1]} args={[0.3, 0.3, 0.3]} castShadow receiveShadow>
            <meshStandardMaterial color="#f59e0b" />
          </Box>
          
          {/* Instruções Flutuantes no Mundo 3D */}
          <Text position={[0, 2, -2]} fontSize={0.2} color="white" anchorX="center" anchorY="middle">
            Laboratório de Alinhamento XR
          </Text>

        </XR>
      </Canvas>
    </>
  )
}