ar-engine.js

// ArtScape AR Engine
// Handles AR rendering, location tracking, and art placement

// Use same-origin API so it works on Render without hardcoding localhost.
const API_URL = `${window.location.origin}/api`;

class AREngine {
    constructor() {
        this.scene = null;
        this.camera = null;
        this.renderer = null;
        this.videoElement = null;
        this.currentLocation = null;
        this.deviceOrientation = { alpha: 0, beta: 0, gamma: 0 };
        this.artInstallations = [];
        this.loadedArt = new Map();
        this.initialized = false;
    }

    async init() {
        try {
            // Get camera access
            await this.setupCamera();
            
            // Setup Three.js scene
            this.setupScene();
            
            // Setup device orientation
            this.setupOrientation();
            
            // Start location tracking
            this.startLocationTracking();
            
            // Load nearby art
            await this.loadNearbyArt();
            
            // Start render loop
            this.animate();
            
            this.initialized = true;
            document.getElementById('loadingSpinner').classList.add('hidden');
            
        } catch (error) {
            console.error('AR Engine initialization failed:', error);
            alert('Failed to initialize AR. Please check camera and location permissions.');
        }
    }

    async setupCamera() {
        this.videoElement = document.getElementById('camera');
        
        try {
            const stream = await navigator.mediaDevices.getUserMedia({
                video: { 
                    facingMode: 'environment',
                    width: { ideal: 1920 },
                    height: { ideal: 1080 }
                }
            });
            
            this.videoElement.srcObject = stream;
            await this.videoElement.play();
            
        } catch (error) {
            throw new Error('Camera access denied: ' + error.message);
        }
    }

    setupScene() {
        const canvas = document.getElementById('ar-canvas');
        
        // Scene
        this.scene = new THREE.Scene();
        
        // Camera
        this.camera = new THREE.PerspectiveCamera(
            75,
            window.innerWidth / window.innerHeight,
            0.1,
            1000
        );
        this.camera.position.set(0, 1.6, 0); // Average human eye height
        
        // Renderer
        this.renderer = new THREE.WebGLRenderer({
            canvas: canvas,
            alpha: true,
            antialias: true
        });
        this.renderer.setSize(window.innerWidth, window.innerHeight);
        this.renderer.setPixelRatio(window.devicePixelRatio);
        
        // Lighting
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
        this.scene.add(ambientLight);
        
        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
        directionalLight.position.set(5, 10, 5);
        this.scene.add(directionalLight);
        
        // Handle window resize
        window.addEventListener('resize', () => {
            this.camera.aspect = window.innerWidth / window.innerHeight;
            this.camera.updateProjectionMatrix();
            this.renderer.setSize(window.innerWidth, window.innerHeight);
        });
    }

    setupOrientation() {
        // Request permission for iOS devices
        if (typeof DeviceOrientationEvent !== 'undefined' && 
            typeof DeviceOrientationEvent.requestPermission === 'function') {
            DeviceOrientationEvent.requestPermission()
                .then(permissionState => {
                    if (permissionState === 'granted') {
                        this.addOrientationListener();
                    }
                })
                .catch(console.error);
        } else {
            this.addOrientationListener();
        }
    }

    addOrientationListener() {
        window.addEventListener('deviceorientation', (event) => {
            this.deviceOrientation.alpha = event.alpha || 0; // Z-axis (compass)
            this.deviceOrientation.beta = event.beta || 0;   // X-axis
            this.deviceOrientation.gamma = event.gamma || 0; // Y-axis
            
            this.updateCameraOrientation();
        });
    }

    updateCameraOrientation() {
        const { alpha, beta, gamma } = this.deviceOrientation;
        
        // Convert device orientation to camera rotation
        const alphaRad = THREE.MathUtils.degToRad(alpha);
        const betaRad = THREE.MathUtils.degToRad(beta);
        const gammaRad = THREE.MathUtils.degToRad(gamma);
        
        this.camera.rotation.set(betaRad, alphaRad, -gammaRad, 'YXZ');
    }

    startLocationTracking() {
        if (!navigator.geolocation) {
            alert('Geolocation is not supported by your browser');
            return;
        }

        navigator.geolocation.watchPosition(
            (position) => {
                this.currentLocation = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude,
                    accuracy: position.coords.accuracy
                };
                
                this.updateLocationDisplay();
                this.updateNearbyArt();
            },
            (error) => {
                console.error('Location error:', error);
                document.getElementById('locationStatus').textContent = 
                    '📍 Location unavailable';
            },
            {
                enableHighAccuracy: true,
                maximumAge: 0,
                timeout: 5000
            }
        );
    }

    updateLocationDisplay() {
        const status = document.getElementById('locationStatus');
        if (this.currentLocation) {
            status.textContent = 
                `📍 ${this.currentLocation.lat.toFixed(6)}, ${this.currentLocation.lng.toFixed(6)}`;
        }
    }

    async loadNearbyArt() {
        try {
            const token = localStorage.getItem('token');
            const response = await fetch(`${API_URL}/art/nearby`, {
                headers: {
                    'Authorization': `Bearer ${token}`
                }
            });
            
            if (response.ok) {
                this.artInstallations = await response.json();
                this.updateNearbyArt();
            }
        } catch (error) {
            console.error('Failed to load art installations:', error);
        }
    }

    updateNearbyArt() {
        if (!this.currentLocation) return;
        
        const nearbyList = document.getElementById('nearbyArt');
        const nearby = this.artInstallations.filter(art => {
            const distance = this.calculateDistance(
                this.currentLocation.lat,
                this.currentLocation.lng,
                art.location.coordinates[1],
                art.location.coordinates[0]
            );
            art.distance = distance;
            return distance < 1000; // Within 1km
        });

        if (nearby.length === 0) {
            nearbyList.innerHTML = '<p>No art installations nearby</p>';
        } else {
            nearby.sort((a, b) => a.distance - b.distance);
            nearbyList.innerHTML = nearby.map(art => 
                `<div class="nearby-item">
                    <strong>${art.title}</strong> - ${art.distance.toFixed(0)}m away
                </div>`
            ).join('');
            
            // Place art in scene
            this.placeArtInScene(nearby);
        }
    }

    placeArtInScene(artworks) {
        if (!this.currentLocation) return;
        
        artworks.forEach(art => {
            if (!this.loadedArt.has(art._id) && art.distance < 100) {
                this.createArtObject(art);
            }
        });
    }

    createArtObject(art) {
        // Calculate relative position from user
        const bearing = this.calculateBearing(
            this.currentLocation.lat,
            this.currentLocation.lng,
            art.location.coordinates[1],
            art.location.coordinates[0]
        );
        
        const distance = art.distance;
        const bearingRad = THREE.MathUtils.degToRad(bearing);
        
        // Convert to Three.js coordinates
        const x = Math.sin(bearingRad) * distance;
        const z = -Math.cos(bearingRad) * distance;
        
        // Create art object based on type
        let artObject;
        
        if (art.artType === 'image') {
            // Create image plane
            const geometry = new THREE.PlaneGeometry(art.scale, art.scale);
            const texture = new THREE.TextureLoader().load(art.fileUrl);
            const material = new THREE.MeshBasicMaterial({ 
                map: texture,
                side: THREE.DoubleSide,
                transparent: true
            });
            artObject = new THREE.Mesh(geometry, material);
        } else {
            // For 3D models (placeholder - would use GLTFLoader in production)
            const geometry = new THREE.BoxGeometry(art.scale, art.scale, art.scale);
            const material = new THREE.MeshStandardMaterial({ 
                color: 0x6366f1,
                metalness: 0.5,
                roughness: 0.5
            });
            artObject = new THREE.Mesh(geometry, material);
        }
        
        artObject.position.set(x, art.scale / 2, z);
        artObject.userData = art;
        
        this.scene.add(artObject);
        this.loadedArt.set(art._id, artObject);
    }

    calculateDistance(lat1, lon1, lat2, lon2) {
        const R = 6371000; // Earth's radius in meters
        const φ1 = lat1 * Math.PI / 180;
        const φ2 = lat2 * Math.PI / 180;
        const Δφ = (lat2 - lat1) * Math.PI / 180;
        const Δλ = (lon2 - lon1) * Math.PI / 180;

        const a = Math.sin(Δφ / 2) * Math.sin(Δφ / 2) +
                  Math.cos(φ1) * Math.cos(φ2) *
                  Math.sin(Δλ / 2) * Math.sin(Δλ / 2);
        const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));

        return R * c;
    }

    calculateBearing(lat1, lon1, lat2, lon2) {
        const φ1 = lat1 * Math.PI / 180;
        const φ2 = lat2 * Math.PI / 180;
        const Δλ = (lon2 - lon1) * Math.PI / 180;

        const y = Math.sin(Δλ) * Math.cos(φ2);
        const x = Math.cos(φ1) * Math.sin(φ2) -
                  Math.sin(φ1) * Math.cos(φ2) * Math.cos(Δλ);
        const θ = Math.atan2(y, x);

        return (θ * 180 / Math.PI + 360) % 360;
    }

    animate() {
        requestAnimationFrame(() => this.animate());
        
        // Render scene
        this.renderer.render(this.scene, this.camera);
    }
}

// Initialize AR Engine when page loads
let arEngine;

window.addEventListener('load', async () => {
    arEngine = new AREngine();
    await arEngine.init();
});

// Helper functions
function closeArtInfo() {
    document.getElementById('artInfoPanel').classList.add('hidden');
}