import * as THREE from 'three';
import { MindARThree } from 'mindar-image-three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

document.addEventListener('DOMContentLoaded', () => {
  const startBtn = document.getElementById('start-btn');
  const info = document.getElementById('info');

  startBtn.addEventListener('click', async () => {
    startBtn.style.display = 'none';
    info.textContent = 'Starting camera...';

    const mindarThree = new MindARThree({
      container: document.getElementById('container'),
      imageTargetSrc: './targets.mind',          // ← fixed filename
    });
    
    const { renderer, scene, camera } = mindarThree;
    const anchor = mindarThree.addAnchor(0);

    // Load 3D model
    const loader = new GLTFLoader();
    loader.load('./assets/chemistry_set.glb', (gltf) => {   // ← fixed filename
      const model = gltf.scene;
      model.scale.set(0.1, 0.1, 0.1);
      model.position.set(0, 0, 0);
      anchor.group.add(model);
    }, undefined, (error) => {
      console.error('Model failed to load:', error);
    });

    // Lighting
    const ambientLight = new THREE.AmbientLight(0xffffff, 1.0);
    scene.add(ambientLight);
    const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
    dirLight.position.set(0, 1, 1);
    scene.add(dirLight);

    // Events
    anchor.onTargetFound = () => {
      info.textContent = '✅ Target found!';
    };
    anchor.onTargetLost = () => {
      info.textContent = '👀 Point camera at your target image...';
    };

    // Start AR
    try {
      await mindarThree.start();
      info.textContent = '👀 Point camera at your target image...';

      renderer.setAnimationLoop(() => {
        renderer.render(scene, camera);    // ← removed cube.rotation
      });
    } catch (err) {
      console.error('AR failed to start:', err);
      info.textContent = '❌ Failed to start. Check camera permissions.';
    }
  });
});