lab.js

// Modern Chemistry Lab 3D Engine with GLB Support
class ModernChemistryLab {
    constructor() {
        // Core Three.js components
        this.scene = null;
        this.camera = null;
        this.renderer = null;
        this.controls = null;
        
        // Lab state
        this.objects = new Map();
        this.selectedObject = null;
        this.currentExperiment = null;
        this.experimentState = {
            step: 0,
            totalSteps: 0,
            progress: 0,
            isRunning: false,
            results: {}
        };
        
        // Environment
        this.environment = {
            temperature: 25,
            ph: 7.0,
            time: 0,
            lighting: {
                intensity: 1.0,
                color: 0xffffff
            }
        };
        
        // Equipment models mapping
        this.equipmentModels = {
            'beaker': 'beaker.glb',
            'erlenmeyer': 'erlenmeyer_flasks.glb',
            'test-tube': 'test_tube.glb',
            'stand': 'holder.glb'
        };
        
        // Chemical properties
        this.chemicals = {
            'hcl': { name: 'Hydrochloric Acid', color: 0xFF4500, ph: 1.0, concentration: '1M' },
            'naoh': { name: 'Sodium Hydroxide', color: 0xFFFF00, ph: 14.0, concentration: '1M' },
            'h2so4': { name: 'Sulfuric Acid', color: 0xFF0000, ph: 0.3, concentration: '1M' },
            'nacl': { name: 'Sodium Chloride', color: 0xFFFFFF, ph: 7.0, concentration: '1M' },
            'ag2no3': { name: 'Silver Nitrate', color: 0x8B008B, ph: 5.5, concentration: '0.1M' },
            'phenolphthalein': { name: 'Phenolphthalein', color: 0xFFC0CB, isIndicator: true },
            'baking-soda': { name: 'Sodium Bicarbonate', color: 0xF5F5DC, ph: 8.3 }
        };
        
        // GLB loader
        this.loader = new THREE.GLTFLoader();
        this.textureLoader = new THREE.TextureLoader();
        
        // Interactive elements
        this.raycaster = new THREE.Raycaster();
        this.mouse = new THREE.Vector2();
        this.intersectedObject = null;
        // Interaction modes & drag state
        this.actionMode = null; // e.g. 'pour'
        this.pourSource = null;
        this.dragState = {
            isDragging: false,
            object: null,
            offset: new THREE.Vector3(),
            prevPosIndex: null
        };
        
        // Animation system
        this.animations = new Map();
        this.animationMixers = new Map();
        
        // Effects
        this.effects = {
            particles: new Map(),
            lights: new Map(),
            sounds: new Map()
        };
        
        // Initialize lab
        this.init();
    }

    async init() {
        await this.setupScene();
        await this.setupLabEnvironment();
        this.setupInteractions();
        this.setupUIUpdates();
        this.startAnimationLoop();
    }

    async setupScene() {
        // Create scene with gradient background
        this.scene = new THREE.Scene();
        this.scene.fog = new THREE.Fog(0xf0f8ff, 10, 50);
        
        // Setup camera
        const canvas = document.getElementById('labCanvas');
        this.camera = new THREE.PerspectiveCamera(
            60,
            canvas.clientWidth / canvas.clientHeight,
            0.1,
            1000
        );
        this.camera.position.set(8, 5, 8);
        this.camera.lookAt(0, 2, 0);
        
        // Setup renderer with modern features
        this.renderer = new THREE.WebGLRenderer({
            canvas: canvas,
            antialias: true,
            alpha: true,
            powerPreference: 'high-performance'
        });
        this.renderer.setSize(canvas.clientWidth, canvas.clientHeight);
        this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
        this.renderer.shadowMap.enabled = true;
        this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
        this.renderer.outputEncoding = THREE.sRGBEncoding;
        this.renderer.toneMapping = THREE.ACESFilmicToneMapping;
        this.renderer.toneMappingExposure = 1.0;
        
        // Setup orbit controls
        this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
        this.controls.enableDamping = true;
        this.controls.dampingFactor = 0.05;
        this.controls.screenSpacePanning = false;
        this.controls.minDistance = 3;
        this.controls.maxDistance = 20;
        this.controls.maxPolarAngle = Math.PI / 2;
        
        // Setup lighting
        await this.setupLighting();
        
        // Handle window resize
        window.addEventListener('resize', () => this.onWindowResize());
    }

    async setupLighting() {
        // Ambient light
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
        this.scene.add(ambientLight);
        
        // Main directional light (sun)
        const sunLight = new THREE.DirectionalLight(0xffffff, 0.8);
        sunLight.position.set(10, 15, 10);
        sunLight.castShadow = true;
        sunLight.shadow.mapSize.width = 2048;
        sunLight.shadow.mapSize.height = 2048;
        sunLight.shadow.camera.near = 0.5;
        sunLight.shadow.camera.far = 50;
        sunLight.shadow.camera.left = -20;
        sunLight.shadow.camera.right = 20;
        sunLight.shadow.camera.top = 20;
        sunLight.shadow.camera.bottom = -20;
        this.scene.add(sunLight);
        
        // Fill light
        const fillLight = new THREE.DirectionalLight(0xffffff, 0.3);
        fillLight.position.set(-10, 5, -10);
        this.scene.add(fillLight);
        
        // Rim light
        const rimLight = new THREE.DirectionalLight(0xffffff, 0.2);
        rimLight.position.set(0, 10, -10);
        this.scene.add(rimLight);
        
        // Add subtle volumetric lighting
        const volumeLight = new THREE.PointLight(0x4cc9f0, 0.1, 20);
        volumeLight.position.set(0, 3, 0);
        this.scene.add(volumeLight);
    }

    async setupLabEnvironment() {
        // Create lab table
        const tableGeometry = new THREE.BoxGeometry(10, 0.2, 6);
        const tableMaterial = new THREE.MeshStandardMaterial({
            color: 0x8B4513,
            roughness: 0.8,
            metalness: 0.2
        });
        const table = new THREE.Mesh(tableGeometry, tableMaterial);
        table.position.set(0, 0, 0);
        table.receiveShadow = true;
        this.scene.add(table);
        this.objects.set('table', table);
        
        // Create lab backdrop
        const backdropGeometry = new THREE.PlaneGeometry(12, 5);
        const backdropMaterial = new THREE.MeshStandardMaterial({
            color: 0x1e293b,
            roughness: 0.7,
            metalness: 0.1
        });
        
        
        // Create shelving unit
        const shelfGeometry = new THREE.BoxGeometry(8, 0.1, 1);
        const shelfMaterial = new THREE.MeshStandardMaterial({
            color: 0x475569,
            roughness: 0.6
        });
        
        for (let i = 0; i < 3; i++) {
            const shelf = new THREE.Mesh(shelfGeometry, shelfMaterial);
            shelf.position.set(0, 1 + i * 0.5, 2.5);
            shelf.castShadow = true;
            shelf.receiveShadow = true;
            this.scene.add(shelf);
        }
        
        // Create equipment grid positions
        this.equipmentPositions = [
            { x: -4, z: -2, available: true },
            { x: -2, z: -2, available: true },
            { x: 0, z: -2, available: true },
            { x: 2, z: -2, available: true },
            { x: 4, z: -2, available: true },
            { x: -4, z: 0, available: true },
            { x: -2, z: 0, available: true },
            { x: 0, z: 0, available: true },
            { x: 2, z: 0, available: true },
            { x: 4, z: 0, available: true }
        ];
        
        // Automatic startup equipment removed (no auto-add on load)
    }



    async addEquipment(type) {
        const position = this.getAvailablePosition();
        try {
            // Try to load GLB model
            if (this.equipmentModels[type]) {
                await this.loadGLBModel(type, position);
            } else {
                this.createBasicEquipment(type, position);
            }
            
           
            
        } catch (error) {
            console.error(`Failed to load equipment ${type}:`, error);
            this.createBasicEquipment(type, position);
        }
    }

    async loadGLBModel(type, position) {
        return new Promise((resolve, reject) => {
            this.loader.load(
                `models/${this.equipmentModels[type]}`,
                (gltf) => {
                    const model = gltf.scene;
                    
                    // Configure model
                    model.position.set(position.x, 0.2, position.z);
                    
                    // Scale based on equipment type
                    let scale = 1;
                    switch(type) {
                        case 'beaker':
                            // larger beaker for better visibility
                            scale = 0.4;
                            break;
                        case 'erlenmeyer':
                            scale = 0.3;
                            break;
                        case 'test-tube':
                            scale = 0.28;
                            break;
                        case 'stand':
                            // enlarge holder/stand so it's larger than other equipment
                            scale = 0.55;
                            break;
                    }
                    model.scale.set(scale, scale, scale);
                    
                    // Configure materials and shadows
                    model.traverse((child) => {
                        if (child.isMesh) {
                            child.castShadow = true;
                            child.receiveShadow = true;
                            if (child.material) child.material.envMapIntensity = 0.5;

                            // Force full equipment models to a glass-like appearance for typical glass items
                            if (['test-tube', 'beaker', 'erlenmeyer'].includes(type)) {
                                const mats = Array.isArray(child.material) ? child.material : [child.material];
                                mats.forEach((m) => {
                                    m.color = new THREE.Color(0xffffff);
                                    m.transparent = true;
                                    m.opacity = 0.7;
                                    m.roughness = 0.05;
                                    m.metalness = 0.05;
                                    if ('transmission' in m) m.transmission = 0.9;
                                });
                            }

                            // Fallback: if material is explicitly named 'glass', tune its properties
                            else if (child.material && child.material.name && child.material.name.toLowerCase().includes('glass')) {
                                const mats = Array.isArray(child.material) ? child.material : [child.material];
                                mats.forEach((m) => {
                                    m.color = new THREE.Color(0xffffff);
                                    m.transparent = true;
                                    m.opacity = 0.75;
                                    m.roughness = 0.05;
                                    m.metalness = 0.05;
                                    if ('transmission' in m) m.transmission = 0.9;
                                });
                            }
                        }
                    });
                    
                    // Add user data for interaction
                    model.userData = {
                        type: 'equipment',
                        equipmentType: type,
                        name: this.getEquipmentName(type),
                        selectable: true,
                        position: position,
                        originalScale: scale,
                        liquid: null
                    };
                    
                    // Store reference
                    const id = `${type}_${Date.now()}`;
                    this.objects.set(id, model);
                    this.scene.add(model);
                    
                    // Add animation mixer if model has animations
                    if (gltf.animations && gltf.animations.length > 0) {
                        const mixer = new THREE.AnimationMixer(model);
                        this.animationMixers.set(id, mixer);
                    }
                    
                    // Animate appearance
                    this.animateEquipmentAppearance(model);
                    
                    resolve(model);
                },
                undefined,
                reject
            );
        });
    }

    createBasicEquipment(type, position) {
        let geometry, material, color;
        
        switch(type) {
            case 'beaker':
                // wider and taller beaker
                geometry = new THREE.CylinderGeometry(0.45, 0.4, 0.75, 32);
                color = 0xFFFFFF;
                break;
            case 'erlenmeyer':
                geometry = new THREE.ConeGeometry(0.28, 0.55, 32);
                color = 0xFFFFFF;
                break;
            case 'test-tube':
                geometry = new THREE.CylinderGeometry(0.1, 0.09, 0.35, 32);
                color = 0xFFFFFF;
                break;
            case 'stand':
                // larger holder/stand (bigger than other equipment)
                geometry = new THREE.BoxGeometry(0.4, 1.2, 0.4);
                color = 0x808080;
                break;
            default:
                geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
                color = 0x888888;
        }
        
        material = new THREE.MeshPhysicalMaterial({
            color: color,
            transparent: true,
            opacity: 0.9,
            roughness: 0.2,
            metalness: 0.1,
            transmission: 0.5,
            side: THREE.DoubleSide
        });

        // If this is a common glass equipment, apply a glass-like tuning
        if (['beaker','erlenmeyer','test-tube'].includes(type)) {
            material.color = new THREE.Color(0xffffff);
            material.transparent = true;
            material.opacity = 0.75;
            material.transmission = 0.9;
            material.roughness = 0.05;

        }
        
        const mesh = new THREE.Mesh(geometry, material);
        // Raise taller equipment slightly so they sit properly on the table surface
        const yOffset = (type === 'beaker') ? 0.25 : (type === 'stand') ? 0.6 : 0.2;
        mesh.position.set(position.x, yOffset, position.z);
        mesh.castShadow = true;
        mesh.receiveShadow = true;
        
        mesh.userData = {
            type: 'equipment',
            equipmentType: type,
            name: this.getEquipmentName(type),
            selectable: true,
            position: position,
            liquid: null
        };
        
        const id = `${type}_${Date.now()}`;
        this.objects.set(id, mesh);
        this.scene.add(mesh);
        
        this.animateEquipmentAppearance(mesh);
    }

    animateEquipmentAppearance(object) {
        const startScale = 0.1;
        const targetScale = object.scale.x;
        const duration = 600;
        const startTime = Date.now();

        // Determine final Y based on equipment type so taller items sit correctly
        const finalY = (object.userData && object.userData.equipmentType === 'beaker') ? 0.25
            : (object.userData && object.userData.equipmentType === 'stand') ? 0.6
            : 0.2;

        object.scale.set(startScale, startScale, startScale);
        object.position.y = -1;

        const animate = () => {
            const elapsed = Date.now() - startTime;
            const progress = Math.min(elapsed / duration, 1);

            // Elastic easing
            const easeProgress = 1 - Math.pow(1 - progress, 3);
            const scale = startScale + (targetScale - startScale) * easeProgress;

            object.scale.set(scale, scale, scale);
            object.position.y = -1 + (finalY + 1) * easeProgress;

            // Add bounce
            if (progress < 0.8) {
                const bounce = Math.sin(progress * Math.PI * 2) * 0.1;
                object.position.y += bounce;
            }

            if (progress < 1) {
                requestAnimationFrame(animate);
            } else {
                object.position.y = finalY;
            }
        };

        animate();
    }

    getAvailablePosition() {
        for (const pos of this.equipmentPositions) {
            if (pos.available) {
                pos.available = false;
                return pos;
            }
        }
        return null;
    }

    getEquipmentName(type) {
        const names = {
            'beaker': 'Beaker',
            'erlenmeyer': 'Erlenmeyer Flask',
            'test-tube': 'Test Tube',
            'stand': 'Test Tube Stand'
        };
        return names[type] || type;
    }

    async addChemical(type) {
        const chemical = this.chemicals[type];
        const position = this.getAvailablePosition();

        // Create chemical bottle
        const bottleGroup = new THREE.Group();
        
        // Bottle
        const bottleGeometry = new THREE.CylinderGeometry(0.1, 0.08, 0.3, 32);
        const bottleMaterial = new THREE.MeshPhysicalMaterial({
            color: 0x87CEEB,
            transparent: true,
            opacity: 0.8,
            roughness: 0.1,
            metalness: 0.1
        });
        const bottle = new THREE.Mesh(bottleGeometry, bottleMaterial);
        
        // Chemical liquid
        const liquidGeometry = new THREE.CylinderGeometry(0.09, 0.07, 0.25, 32);
        const liquidMaterial = new THREE.MeshPhysicalMaterial({
            color: chemical.color,
            transparent: true,
            opacity: 0.7,
            roughness: 0.2,
            metalness: 0.1,
            transmission: 0.6
        });
        const liquid = new THREE.Mesh(liquidGeometry, liquidMaterial);
        liquid.position.y = 0.025;
        
        bottleGroup.add(bottle);
        bottleGroup.add(liquid);
        bottleGroup.position.set(position.x, 0.4, position.z);
        
        bottleGroup.userData = {
            type: 'chemical',
            chemicalType: type,
            name: chemical.name,
            properties: chemical,
            selectable: true,
            liquid: liquid,
            position: position,
            volume: 100 // mL
        };
        
        const id = `chemical_${type}_${Date.now()}`;
        this.objects.set(id, bottleGroup);
        this.scene.add(bottleGroup);
        
        // Animate appearance
        this.animateChemicalAppearance(bottleGroup);
        return bottleGroup;
    }

    animateChemicalAppearance(chemical) {
        const startY = chemical.position.y + 1;
        const duration = 800;
        const startTime = Date.now();
        
        chemical.position.y = startY;
        chemical.rotation.y = Math.PI * 2;
        
        const animate = () => {
            const elapsed = Date.now() - startTime;
            const progress = Math.min(elapsed / duration, 1);
            
            // Bounce animation
            const bounceProgress = progress < 0.7 
                ? progress * (2 - progress) 
                : 1 - Math.pow(-2 * progress + 2, 2) / 2;
            
            chemical.position.y = startY + (0.4 - startY) * bounceProgress;
            chemical.rotation.y = Math.PI * 2 * (1 - progress);
            
            if (progress < 1) {
                requestAnimationFrame(animate);
            }
        };
        
        animate();
    }

    setupInteractions() {
        const canvas = this.renderer.domElement;
        
        // Mouse events
        canvas.addEventListener('click', (event) => this.onCanvasClick(event));
        canvas.addEventListener('mousedown', (event) => this.onCanvasMouseDown(event));
        canvas.addEventListener('mouseup', (event) => this.onCanvasMouseUp(event));
        canvas.addEventListener('mousemove', (event) => this.onMouseMove(event));
        canvas.addEventListener('contextmenu', (event) => {
            event.preventDefault();
            this.onRightClick(event);
        });
        
        // Touch events for mobile
        canvas.addEventListener('touchstart', (event) => this.onTouchStart(event));
        canvas.addEventListener('touchmove', (event) => this.onTouchMove(event));
        
        // Keyboard shortcuts
        document.addEventListener('keydown', (event) => this.onKeyDown(event));
    }

    async onCanvasClick(event) {
        event.preventDefault();
        
        const rect = this.renderer.domElement.getBoundingClientRect();
        this.mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
        this.mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
        
        this.raycaster.setFromCamera(this.mouse, this.camera);
        const intersects = this.raycaster.intersectObjects(Array.from(this.objects.values()), true);
        
        if (intersects.length > 0) {
            const picked = intersects[0].object;
            const object = (picked.parent && picked.parent.userData) ? picked.parent : picked;

            // Pouring workflow
            if (this.actionMode === 'pour') {
                // First click selects source chemical
                if (!this.pourSource) {
                    if (object.userData && object.userData.type === 'chemical') {
                        this.pourSource = object;
                        
                    } 
                    return;
                } else {
                    // Second click selects target
                    if (object.userData && (object.userData.type === 'equipment' || object.userData.type === 'chemical')) {
                        await this.pourChemical(this.pourSource, object);
                        this.setActionMode(null);
                        this.pourSource = null;
                    }
                    return;
                }
            }

            // Normal selection
            this.selectObject(object);
        } else {
            this.deselectObject();
        }
    }

    onMouseMove(event) {
        // If dragging, update dragging position
        if (this.dragState.isDragging) {
            this.updateDragPosition(event);
            return;
        }

        const rect = this.renderer.domElement.getBoundingClientRect();
        this.mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
        this.mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
        
        this.raycaster.setFromCamera(this.mouse, this.camera);
        const intersects = this.raycaster.intersectObjects(Array.from(this.objects.values()), true);
        
        // Reset previous hover effect
        if (this.intersectedObject) {
            this.removeHoverEffect(this.intersectedObject);
        }
        
        // Apply hover effect to new object
        if (intersects.length > 0) {
            const object = intersects[0].object;
            this.intersectedObject = object.parent.userData ? object.parent : object;
            this.applyHoverEffect(this.intersectedObject);
            
            // Update cursor
            this.renderer.domElement.style.cursor = 'pointer';
        } else {
            this.intersectedObject = null;
            this.renderer.domElement.style.cursor = 'grab';
        }
    }

    selectObject(object) {
        // Deselect previous object
        if (this.selectedObject) {
            this.removeSelectionEffect(this.selectedObject);
        }
        
        // Select new object
        this.selectedObject = object;
        this.applySelectionEffect(object);
        
        // Show object info
        const info = object.userData;
        if (info) {
            this.updateObjectInfoPanel(info);
        }
    }

    deselectObject() {
        if (this.selectedObject) {
            this.removeSelectionEffect(this.selectedObject);
            this.selectedObject = null;
        }
    }

    applySelectionEffect(object) {
        object.traverse((child) => {
            if (child.isMesh && child.material) {
                child.material.emissive = new THREE.Color(0x444444);
                child.material.needsUpdate = true;
            }
        });
    }

    removeSelectionEffect(object) {
        object.traverse((child) => {
            if (child.isMesh && child.material && child.material.emissive) {
                child.material.emissive = new THREE.Color(0x000000);
                child.material.needsUpdate = true;
            }
        });
    }

    applyHoverEffect(object) {
        object.traverse((child) => {
            if (child.isMesh && child.material) {
                child.material.emissive = new THREE.Color(0x222222);
                child.material.needsUpdate = true;
            }
        });
    }

    removeHoverEffect(object) {
        object.traverse((child) => {
            if (child.isMesh && child.material && child.material.emissive) {
                child.material.emissive = new THREE.Color(0x000000);
                child.material.needsUpdate = true;
            }
        });
    }

    // Interaction helpers: action modes, pouring, dragging

    setActionMode(mode) {
        this.actionMode = mode;
        this.pourSource = null;
    }

    async pourChemical(source, target) {
        if (!source || !target) return;

        // Free source grid slot if any
        if (source.userData.position) {
            for (const pos of this.equipmentPositions) {
                if (pos.x === source.userData.position.x && pos.z === source.userData.position.z) {
                    pos.available = true;
                }
            }
        }

        const sourceProps = source.userData.properties || {};
        const sourceVol = source.userData.volume || 100;
        const sourceColor = (source.userData.liquid && source.userData.liquid.material) ? source.userData.liquid.material.color.clone() : new THREE.Color(sourceProps.color || 0xffffff);

        // Ensure target has a liquid mesh
        if (!target.userData.liquid) {
            // Create empty liquid so animatePouring can update color later
            this.createLiquidInEquipment(target, sourceColor, 0);
        }

        // Animate pouring (this will remove the source object)
        await this.animatePouring(source, target);

        // After pouring, update target properties (mix color & pH)
        const targetVol = target.userData.volume || 0;
        const targetProps = target.userData.properties || {};
        const mixed = this.computeMixedProperties({color: sourceColor, ph: sourceProps.ph}, sourceVol, {color: target.userData.liquid.material.color.clone(), ph: targetProps.ph}, targetVol);

        // Update volume & properties
        const newVolume = targetVol + sourceVol;
        target.userData.volume = newVolume;
        target.userData.properties = target.userData.properties || {};
        target.userData.properties.ph = mixed.ph;
        // محاولة تغيير اللون أو إعادة رسم السائل بالكامل إذا لم يتغير
        let liquidMesh = target.userData.liquid;
        let changed = false;
        if (liquidMesh && liquidMesh.material) {
            if (Array.isArray(liquidMesh.material)) {
                liquidMesh.material.forEach(mat => {
                    if (mat.color) mat.color.copy(mixed.color);
                    mat.needsUpdate = true;
                });
                changed = true;
            } else if (liquidMesh.material.color) {
                liquidMesh.material.color.copy(mixed.color);
                liquidMesh.material.needsUpdate = true;
                changed = true;
            }
        }
        // إذا لم يتغير اللون أو لم يظهر، احذف السائل وأعد إضافته
        if (!changed || !liquidMesh.visible) {
            if (liquidMesh && liquidMesh.parent) {
                liquidMesh.parent.remove(liquidMesh);
            }
            this.createLiquidInEquipment(target, mixed.color, newVolume);
        }
        // إجبار السائل على الظهور دائماً وضبط خصائص المادة
        if (target.userData.liquid) {
            target.userData.liquid.visible = true;
            if (target.userData.liquid.parent !== target) {
                target.add(target.userData.liquid);
            }
            // تأكيد خصائص المادة
            if (target.userData.liquid.material) {
                if (Array.isArray(target.userData.liquid.material)) {
                    target.userData.liquid.material.forEach(mat => {
                        mat.transparent = true;
                        mat.opacity = 0.85;
                        mat.color = new THREE.Color(mixed.color);
                        mat.needsUpdate = true;
                    });
                } else {
                    target.userData.liquid.material.transparent = true;
                    target.userData.liquid.material.opacity = 0.85;
                    target.userData.liquid.material.color = new THREE.Color(mixed.color);
                    target.userData.liquid.material.needsUpdate = true;
                }
            }
        }

        // Record what chemical type was added to the target (for reactions)
        const srcType = source.userData.chemicalType || source.userData.chemical || null;
        if (srcType) {
            target.userData.contents = target.userData.contents || [];
            // avoid duplicates for repeated pours of same chemical
            target.userData.contents.push(srcType);
        }

        // Remove source from objects map if present
        this.removeObjectByRef(source);

        // Debug: log container state after pour (console only)
        try {
            console.debug('[Lab] poured', srcType, 'into', target.userData.name || '(container)', 'contents=', target.userData.contents, 'volume=', target.userData.volume, 'ph=', (target.userData.properties && target.userData.properties.ph));
        } catch (e) { /* ignore */ }

        // Check for any emergent reactions now that contents have changed
        this.checkAndTriggerReaction(target);

        // Debug: after reaction check
        try {
            console.debug('[Lab] post-reaction container state:', {
                name: target.userData.name,
                contents: target.userData.contents,
                volume: target.userData.volume,
                properties: target.userData.properties,
                hasLiquid: !!target.userData.liquid
            });
        } catch (e) { /* ignore */ }
    }

    createLiquidInEquipment(target, color, initialVolume = 0) {
        // Determine size based on equipment type
        let radius = 0.45;
        let height = 0.6;

        const type = target.userData && target.userData.equipmentType ? target.userData.equipmentType : (target.userData && target.userData.type === 'chemical' ? 'chemical' : null);
        if (type === 'test-tube') {
            radius = 0.14;
            height = 0.75;
        }
        else if (type === 'beaker') {
            radius = 0.7;     // أعرض
            height = 1.1;     // أعلى
        }
        else if (type === 'erlenmeyer') {
            radius = 0.55;
            height = 0.9;
        }

        const geometry = new THREE.CylinderGeometry(radius, radius * 0.9, height, 24);
        const material = new THREE.MeshPhysicalMaterial({
            color: new THREE.Color(color || 0xffffff),
            transparent: true,
            opacity: 0.98,       // شبه معتم
            transmission: 0.05, // شفافية أقل
            roughness: 0.1,
            metalness: 0.05,
             // تقليل الشفافية
            side: THREE.DoubleSide
        });

        const liquid = new THREE.Mesh(geometry, material);
        // Place liquid slightly above the bottom of the container
        liquid.position.set(0, height / 2 - 0.1, 0);
        liquid.rotation.x = 0;
        // Attach liquid to target
        target.add(liquid);
        target.userData.liquid = liquid;
        target.userData.volume = initialVolume;
        // Track chemical types poured into this container for reaction detection
        target.userData.contents = target.userData.contents || [];
        // تأكيد ظهور السائل دائماً
        liquid.visible = true;
    }

    computeMixedProperties(sourceProps, sourceVol, targetProps, targetVol) {
        const result = {
            color: new THREE.Color(0xffffff),
            ph: null
        };

        const total = sourceVol + targetVol;
        // Color blending
        const sColor = new THREE.Color(sourceProps.color || 0xffffff);
        const tColor = new THREE.Color(targetProps.color || 0xffffff);
        result.color.copy(tColor).lerp(sColor, sourceVol / Math.max(total, 1));

        // pH blending (volume-weighted average if both available)
        const sPH = (sourceProps && typeof sourceProps.ph === 'number') ? sourceProps.ph : null;
        const tPH = (targetProps && typeof targetProps.ph === 'number') ? targetProps.ph : null;
        if (sPH !== null && tPH !== null) {
            result.ph = (sPH * sourceVol + tPH * targetVol) / Math.max(total, 1);
        } else {
            result.ph = sPH !== null ? sPH : tPH;
        }

        return result;
    }

    removeObjectByRef(obj) {
        for (const [id, o] of this.objects.entries()) {
            if (o === obj) {
                this.objects.delete(id);
                return;
            }
        }
    }

    // Check for known reactions and trigger visual effects
    checkAndTriggerReaction(target) {
        try {
            if (!target) return;
            // Build a set of involved chemical types
            const types = new Set();
            if (target.userData && Array.isArray(target.userData.contents)) {
                target.userData.contents.forEach(t => types.add(t));
            }
            if (target.userData && target.userData.type === 'chemical' && target.userData.chemicalType) {
                types.add(target.userData.chemicalType);
            }

            const pos = target.position ? target.position : new THREE.Vector3((target.userData && target.userData.position) ? target.userData.position.x : 0, 0.4, (target.userData && target.userData.position) ? target.userData.position.z : 0);

            // Bubbles: HCl + Baking Soda
            if (types.has('hcl') && types.has('baking-soda')) {
                const bubbleCount = 30;
                for (let i = 0; i < bubbleCount; i++) {
                    setTimeout(() => this.createBubbleParticle(pos), i * 50);
                }
                this.updateTemperature(2);
                try { console.debug('[Lab] reaction: HCl + baking-soda -> CO2 bubbles at', pos); } catch(e){}
            }

            // Precipitation: NaCl + AgNO3 -> AgCl (white)
            if (types.has('nacl') && types.has('ag2no3')) {
                const particleCount = 20;
                for (let i = 0; i < particleCount; i++) {
                    setTimeout(() => this.createPrecipitateParticle(pos), i * 100);
                }
                try { console.debug('[Lab] reaction: NaCl + AgNO3 -> AgCl precipitate at', pos); } catch(e){}
            }

            // Indicator handling: Phenolphthalein turns pink in basic solutions
            if (types.has('phenolphthalein')) {
                // Determine pH from container properties or infer from contents
                let ph = null;
                if (target.userData && target.userData.properties && typeof target.userData.properties.ph === 'number') {
                    ph = target.userData.properties.ph;
                } else {
                    if (types.has('naoh')) ph = 13;
                    else if (types.has('hcl')) ph = 1;
                    else ph = 7;
                }

                // Ensure liquid exists to visualize the indicator
                if (!target.userData.liquid) {
                    this.createLiquidInEquipment(target, new THREE.Color(0xF0F0F0), target.userData.volume || 0);
                }

                // Phenolphthalein is pink in basic solutions (roughly pH >= 8)
                try {
                    console.debug('[Lab] indicator check: types=', Array.from(types), 'computed ph=', ph);
                } catch (e) { /* ignore */ }

                // Ensure there is a liquid mesh to color
                if (!target.userData.liquid) {
                    this.createLiquidInEquipment(target, new THREE.Color(0xF0F0F0), target.userData.volume || 0);
                }

                if (ph >= 8) {
                    // Immediate color set for stronger, instant feedback
                    try {
                        target.userData.liquid.material.color.set(0xFF69B4);
                        target.userData.liquid.material.opacity = Math.max(target.userData.liquid.material.opacity || 0.5, 0.6);
                        target.userData.liquid.material.needsUpdate = true;
                    } catch (e) { /* ignore */ }
                    // Also run the animated transition for polish
                    this.animateColorChange(target, false);
                } else {
                    // acid/neutral -> colorless (fade to near-transparent)
                    try {
                        target.userData.liquid.material.color.set(0xF0F0F0);
                        target.userData.liquid.material.opacity = 0.35;
                        target.userData.liquid.material.needsUpdate = true;
                    } catch (e) { /* ignore */ }
                    this.animateColorChange(target, true);
                }

                // Update container pH and global HUD
                target.userData.properties = target.userData.properties || {};
                target.userData.properties.ph = ph;
                this.updatePH(ph);
            }
        } catch (e) {
            console.warn('checkAndTriggerReaction failed', e);
        }
    }

    // Drag (pick-up) helpers: startDrag, updateDragPosition, stopDrag, findClosestGridPosition
    onCanvasMouseDown(event) {
        event.preventDefault();
        const rect = this.renderer.domElement.getBoundingClientRect();
        this.mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
        this.mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
        this.raycaster.setFromCamera(this.mouse, this.camera);
        const intersects = this.raycaster.intersectObjects(Array.from(this.objects.values()), true);
        if (intersects.length > 0) {
            const picked = intersects[0].object;
            const object = (picked.parent && picked.parent.userData) ? picked.parent : picked;
            if (object.userData && object.userData.selectable && object.userData.type !== 'table' && !this.actionMode) {
                // Start drag
                this.dragState.isDragging = true;
                this.dragState.object = object;
                // store prev position index
                this.dragState.prevPosIndex = this.equipmentPositions.findIndex(p => object.userData.position && p.x === object.userData.position.x && p.z === object.userData.position.z);
                // free previous slot while dragging
                if (object.userData.position) {
                    for (const pos of this.equipmentPositions) {
                        if (pos.x === object.userData.position.x && pos.z === object.userData.position.z) pos.available = true;
                    }
                }
                // compute offset
                const point = intersects[0].point;
                this.dragState.offset.copy(point).sub(object.position);
                this.renderer.domElement.style.cursor = 'grabbing';
            }
        }
    }

    onCanvasMouseUp(event) {
        if (!this.dragState.isDragging) return;
        // Snap to closest grid position
        const obj = this.dragState.object;
        const closestIndex = this.findClosestGridPosition(obj.position.x, obj.position.z);
        if (closestIndex !== null) {
            const pos = this.equipmentPositions[closestIndex];
            pos.available = false;
            obj.position.set(pos.x, (obj.userData && obj.userData.equipmentType === 'stand') ? 0.6 : (obj.userData && obj.userData.equipmentType === 'beaker' ? 0.25 : 0.2), pos.z);
            obj.userData.position = { x: pos.x, z: pos.z };
        } else {
            // no available slot: revert to previous if any, else keep current 
            if (this.dragState.prevPosIndex !== null && this.equipmentPositions[this.dragState.prevPosIndex]) {
                const prev = this.equipmentPositions[this.dragState.prevPosIndex];
                prev.available = false;
                obj.position.set(prev.x, (obj.userData && obj.userData.equipmentType === 'stand') ? 0.6 : (obj.userData && obj.userData.equipmentType === 'beaker' ? 0.25 : 0.2), prev.z);
                obj.userData.position = { x: prev.x, z: prev.z };
            }
        }

        this.dragState.isDragging = false;
        this.dragState.object = null;
        this.dragState.offset.set(0,0,0);
        this.dragState.prevPosIndex = null;
        this.renderer.domElement.style.cursor = 'grab';
    }

    updateDragPosition(event) {
        if (!this.dragState.isDragging || !this.dragState.object) return;
        const rect = this.renderer.domElement.getBoundingClientRect();
        const x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
        const y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
        this.raycaster.setFromCamera(new THREE.Vector2(x,y), this.camera);
        // plane y=0
        const plane = new THREE.Plane(new THREE.Vector3(0,1,0), 0);
        const intersectPoint = new THREE.Vector3();
        this.raycaster.ray.intersectPlane(plane, intersectPoint);
        if (intersectPoint) {
            const newPos = intersectPoint.clone().sub(this.dragState.offset);
            // clamp within table bounds roughly
            newPos.x = Math.max(-4.5, Math.min(4.5, newPos.x));
            newPos.z = Math.max(-2.5, Math.min(2.5, newPos.z));
            // y based on equipment type
            const yOffset = (this.dragState.object.userData && this.dragState.object.userData.equipmentType === 'beaker') ? 0.25
                : (this.dragState.object.userData && this.dragState.object.userData.equipmentType === 'stand') ? 0.6
                : 0.2;
            this.dragState.object.position.set(newPos.x, yOffset, newPos.z);
        }
    }

    findClosestGridPosition(x, z) {
        let bestIdx = null;
        let bestDist = Infinity;
        for (let i = 0; i < this.equipmentPositions.length; i++) {
            const p = this.equipmentPositions[i];
            if (!p.available) continue;
            const dx = p.x - x;
            const dz = p.z - z;
            const dist = Math.sqrt(dx*dx + dz*dz);
            if (dist < bestDist) {
                bestDist = dist;
                bestIdx = i;
            }
        }
        return bestIdx;
    }


    // Automated demo for easy testing: adds equipment/chemicals then pours/mixes
    async runDemo() {
        // Reset lab for a clear demo
        this.resetLab();
        await this.wait(500);

        // Add equipment
        await this.addEquipment('beaker');
        await this.wait(500);
        await this.addEquipment('test-tube');
        await this.wait(500);

        // Add chemicals
        await this.addChemical('hcl');
        await this.wait(400);
        await this.addChemical('naoh');
        await this.wait(500);

        // Find references
        const beakers = Array.from(this.objects.values()).filter(o => o.userData && o.userData.equipmentType === 'beaker');
        const beaker = beakers[beakers.length - 1];
        const acids = Array.from(this.objects.values()).filter(o => o.userData && o.userData.type === 'chemical' && o.userData.chemicalType === 'hcl');
        const bases = Array.from(this.objects.values()).filter(o => o.userData && o.userData.type === 'chemical' && o.userData.chemicalType === 'naoh');

        // Pour acid into beaker
        if (acids.length > 0 && beaker) {
            this.setActionMode('pour');
            await this.pourChemical(acids[acids.length - 1], beaker);
            await this.wait(600);
        }

        // Pour base into beaker
        if (bases.length > 0 && beaker) {
            this.setActionMode('pour');
            await this.pourChemical(bases[bases.length - 1], beaker);
            await this.wait(600);
        }

        // Update UI and environment
        if (beaker && beaker.userData && beaker.userData.properties && typeof beaker.userData.properties.ph === 'number') {
            this.updatePH(beaker.userData.properties.ph);
        }
    }

    async performColorChangeExperiment() {
        this.experimentState = {
            step: 0,
            totalSteps: 3,
            progress: 0,
            isRunning: true,
            results: {}
        };
        
        // Step 1: Add beaker
        this.updateExperimentProgress(1);
        await this.addEquipment('beaker');
        await this.wait(1000);
        
        // Step 2: Add indicator
        this.updateExperimentProgress(2);
        const indicator = await this.addChemical('phenolphthalein');
        await this.wait(1000);
        
        // Step 3: Add acid/base and observe color change
        this.updateExperimentProgress(3);
        const useAcid = Math.random() > 0.5;
        const chemical = await this.addChemical(useAcid ? 'hcl' : 'naoh');
        
        // Animate mixing
        await this.animatePouring(chemical, indicator);
        
        // Show color change
        await this.animateColorChange(indicator, useAcid);
        
        // Update environment
        this.updatePH(useAcid ? 2 : 12);
        
        this.completeExperiment();
    }

    async performBubbleExperiment() {
        this.experimentState = {
            step: 0,
            totalSteps: 4,
            progress: 0,
            isRunning: true,
            results: {}
        };
        
        // Step 1: Add Erlenmeyer flask
        this.updateExperimentProgress(1);
        await this.addEquipment('erlenmeyer');
        await this.wait(1000);
        
        // Step 2: Add baking soda
        this.updateExperimentProgress(2);
        const bakingSoda = await this.addChemical('baking-soda');
        await this.wait(1000);
        
        // Step 3: Add acid
        this.updateExperimentProgress(3);
        const acid = await this.addChemical('hcl');
        await this.wait(1000);
        
        // Step 4: Observe bubbles
        this.updateExperimentProgress(4);
        await this.animateBubbleReaction(bakingSoda, acid);
        
        this.updateTemperature(5);
        this.completeExperiment();
    }

    async animateBubbleReaction(chemical1, chemical2) {
        // Animate pouring
        await this.animatePouring(chemical1, chemical2);
        
        // Create bubble particles
        const bubbleCount = 30;
        const position = chemical2.position;
        
        for (let i = 0; i < bubbleCount; i++) {
            setTimeout(() => {
                this.createBubbleParticle(position);
            }, i * 50);
        }
        
        await this.wait(bubbleCount * 50 + 500);
    }

    createBubbleParticle(position) {
        const bubbleGeometry = new THREE.SphereGeometry(0.03 + Math.random() * 0.02, 8, 8);
        const bubbleMaterial = new THREE.MeshLambertMaterial({
            color: 0xFFFFFF,
            transparent: true,
            opacity: 0.7
        });
        
        const bubble = new THREE.Mesh(bubbleGeometry, bubbleMaterial);
        bubble.position.copy(position);
        bubble.position.y += 0.3;
        
        this.scene.add(bubble);
        
        // Animate bubble rising
        this.animateBubbleRising(bubble);
    }

    animateBubbleRising(bubble) {
        const startY = bubble.position.y;
        const duration = 2000 + Math.random() * 1000;
        const startTime = Date.now();
        const moveX = (Math.random() - 0.5) * 0.3;
        const moveZ = (Math.random() - 0.5) * 0.3;
        
        const animate = () => {
            const elapsed = Date.now() - startTime;
            const progress = elapsed / duration;
            
            if (progress < 1) {
                bubble.position.y = startY + progress * 2;
                bubble.position.x += moveX * 0.01;
                bubble.position.z += moveZ * 0.01;
                
                // Scale and fade
                const scale = 1 + progress * 0.8;
                bubble.scale.set(scale, scale, scale);
                bubble.material.opacity = 0.7 * (1 - progress);
                
                requestAnimationFrame(animate);
            } else {
                this.scene.remove(bubble);
            }
        };
        
        animate();
    }

    async performPrecipitationExperiment() {
        this.experimentState = {
            step: 0,
            totalSteps: 4,
            progress: 0,
            isRunning: true,
            results: {}
        };
        
        // Step 1: Add test tube
        this.updateExperimentProgress(1);
        await this.addEquipment('test-tube');
        await this.wait(1000);
        
        // Step 2: Add NaCl
        this.updateExperimentProgress(2);
        const nacl = await this.addChemical('nacl');
        await this.wait(1000);
        
        // Step 3: Add AgNO3
        this.updateExperimentProgress(3);
        const agno3 = await this.addChemical('ag2no3');
        await this.wait(1000);
        
        // Step 4: Observe precipitation
        this.updateExperimentProgress(4);
        await this.animatePrecipitationReaction(nacl, agno3);
        
        this.completeExperiment();
    }

    async animatePrecipitationReaction(chemical1, chemical2) {
        // Animate mixing
        await this.animatePouring(chemical1, chemical2);
        
        // Create precipitate particles
        const particleCount = 80; // زيادة عدد الجزيئات
        const position = chemical2.position;
        
        // لون الترسب: أحمر غامق
        const precipitateColor = 0x0A2AFF; // أزرق قاتم قوي
        for (let i = 0; i < particleCount; i++) {
            setTimeout(() => {
                this.createPrecipitateParticle(position, precipitateColor);
            }, i * 100);
        }
        
        await this.wait(particleCount * 100 + 1000);
    }

    createPrecipitateParticle(position, color = 0x8B0000) {
        // تكبير حجم الجزيئات
        const particleGeometry = new THREE.SphereGeometry(0.08 + Math.random() * 0.04, 14, 14);
        const particleMaterial = new THREE.MeshLambertMaterial({
            color: color,
            transparent: true,
            opacity: 0.98
        });
        const particle = new THREE.Mesh(particleGeometry, particleMaterial);
        particle.position.copy(position);
        // رفع موضع الترسب ليظهر داخل الأداة بوضوح
       particle.position.y += 0.3;
        this.scene.add(particle);
        // Animate particle settling
        this.animatePrecipitateSettling(particle);
    }

    createPrecipitateLayer(target, color = 0x0A2AFF) {
    // حجم الأنبوب
    let radius = 0.7;   // أصغر من الأنبوب بقليل
    let height = 0.15;   // سماكة الترسّب

    const geometry = new THREE.CylinderGeometry(radius, radius, height, 32);
    const material = new THREE.MeshStandardMaterial({
        color: color,          // أزرق قاتم
        roughness: 0.4,
        metalness: 0.15,
        transparent: true,
        opacity: 0.98
    });

    const precipitate = new THREE.Mesh(geometry, material);

    // وضعه في قاع السائل
    precipitate.position.set(0, 0.1, 0);

    target.add(precipitate);
    target.userData.precipitate = precipitate;
}


    animatePrecipitateSettling(particle) {
        const startY = particle.position.y;
        const duration = 6000;
        const startTime = Date.now();
        
        const animate = () => {
            const elapsed = Date.now() - startTime;
            const progress = elapsed / duration;
            
            if (progress < 1) {
                particle.position.y = startY - progress * 0.15;
                requestAnimationFrame(animate);
            }
            if (progress >= 1) {
                particle.scale.set(1.2, 0.6, 1.2); // يبدو كراسب
            }

        };
        
        animate();
    }

    async animatePouring(source, target) {
        const startPos = source.position.clone();
        const targetPos = target.position.clone();
        targetPos.y += 0.4;
        
        const duration = 1000;
        const startTime = Date.now();
        
        const animate = () => {
            const elapsed = Date.now() - startTime;
            const progress = Math.min(elapsed / duration, 1);
            
            // Arc motion
            const arcHeight = 0.6;
            const currentPos = startPos.clone().lerp(targetPos, progress);
            currentPos.y += Math.sin(progress * Math.PI) * arcHeight;
            
            source.position.copy(currentPos);
            
            // Scale down
            const scale = 1 - progress * 0.7;
            source.scale.set(scale, scale, scale);
            
            if (progress < 1) {
                requestAnimationFrame(animate);
            } else {
                // Remove source chemical
                this.scene.remove(source);
                
                // Update target liquid
                if (target.userData.liquid) {
                    this.updateLiquidColor(target, target.userData.liquid.material.color);
                }
            }
        };
        
        animate();
        
        await this.wait(duration);
    }

    async animateColorChange(object, isAcid) {
        const liquid = object.userData.liquid;
        if (!liquid) return;
        
        const startColor = liquid.material.color.clone();
        const targetColor = isAcid ? new THREE.Color(0xF0F0F0) : new THREE.Color(0xFF69B4);
        
        const duration = 1500;
        const startTime = Date.now();
        
        const animate = () => {
            const elapsed = Date.now() - startTime;
            const progress = Math.min(elapsed / duration, 1);
            
            liquid.material.color.lerpColors(startColor, targetColor, progress);
            // اجعل السائل قاتم دائماً (شفافية عالية)
            liquid.material.opacity = isAcid ? 0.92 : 0.97;
            
            if (progress < 1) {
                requestAnimationFrame(animate);
            }
        };
        
        animate();
        
        await this.wait(duration);
    }

    updateLiquidColor(object, color) {
        const liquid = object.userData.liquid;
        if (liquid) {
            liquid.material.color.copy(color);
            liquid.material.needsUpdate = true;
        }
    }

    updateExperimentProgress(step) {
        this.experimentState.step = step;
        this.experimentState.progress = (step / this.experimentState.totalSteps) * 100;
        
        // Update UI
        this.updateProgressUI();
    }

    completeExperiment() {
        this.experimentState.isRunning = false;
        this.experimentState.progress = 100;
        
        this.updateProgressUI();
    
        // Show results modal
        setTimeout(() => {
            this.showResultsModal();
        }, 1000);
    }

    updateProgressUI() {
        const progressElement = document.getElementById('experimentProgress');
        const progressText = document.getElementById('progressText');
        const currentStep = document.getElementById('currentStep');
        
        if (progressElement) {
            progressElement.style.width = `${this.experimentState.progress}%`;
        }
        
        if (progressText) {
            progressText.textContent = `${Math.round(this.experimentState.progress)}%`;
        }
        
        if (currentStep) {
            currentStep.textContent = `Step ${this.experimentState.step}/${this.experimentState.totalSteps}`;
        }
    }

    updateObjectInfoPanel(info) {
        // Implement object info panel updates
        console.log('Object info:', info);
    }

    updatePH(value) {
        this.environment.ph = Math.max(0, Math.min(14, value));
        
        const phElement = document.getElementById('phValue');
        if (phElement) {
            phElement.textContent = this.environment.ph.toFixed(1);
            
            // Color code based on pH
            let color = '#00FF00';
            if (this.environment.ph < 3) color = '#FF0000';
            else if (this.environment.ph < 6) color = '#FFA500';
            else if (this.environment.ph > 11) color = '#800080';
            else if (this.environment.ph > 8) color = '#0000FF';
            
            phElement.style.color = color;
        }
    }

    updateTemperature(change) {
        this.environment.temperature += change;
        this.environment.temperature = Math.max(-10, Math.min(200, this.environment.temperature));
        
        const tempElement = document.getElementById('temperature');
        if (tempElement) {
            tempElement.textContent = `${this.environment.temperature.toFixed(1)}°C`;
            
            // Color code based on temperature
            let color = '#00FF00';
            if (this.environment.temperature > 100) color = '#FF0000';
            else if (this.environment.temperature < 0) color = '#0000FF';
            
            tempElement.style.color = color;
        }
    }

    setupUIUpdates() {
        // Update lab time
        setInterval(() => {
            this.environment.time++;
            const minutes = Math.floor(this.environment.time / 60);
            const seconds = this.environment.time % 60;
            
            const timeElement = document.getElementById('labTime');
            if (timeElement) {
                timeElement.textContent = 
                    `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
            }
        }, 1000);
    }


    showResultsModal() {
        const modal = document.getElementById('resultsModal');
        if (modal) {
            modal.classList.add('active');
        }
    }

    resetLab() {
        // Remove all objects except the table
        for (const [id, object] of this.objects.entries()) {
            if (id !== 'table') {
                this.scene.remove(object);
                this.objects.delete(id);
            }
        }
        
        // Reset environment
        this.environment = {
            temperature: 25,
            ph: 7.0,
            time: 0,
            lighting: {
                intensity: 1.0,
                color: 0xffffff
            }
        };
        
        // Reset equipment positions
        this.equipmentPositions.forEach(pos => pos.available = true);
        
        // Reset experiment state
        this.experimentState = {
            step: 0,
            totalSteps: 0,
            progress: 0,
            isRunning: false,
            results: {}
        };
        
        // Update UI
        this.updatePH(7);
        this.updateTemperature(0);
        this.updateProgressUI();
        
    }

    // Remove very large meshes that can occlude the scene (e.g., leftover backdrop or oversized model parts)
    removeLargeOccluders() {
        try {
            const table = this.objects.get('table');
            const threshold = 10; // diagonal size threshold in scene units (raised to avoid removing shelves)
            const removed = [];

            this.scene.traverse((child) => {
                if (child.isMesh && child.geometry) {
                    // Compute bounding box (safe-guarded)
                    child.geometry.computeBoundingBox();
                    const box = child.geometry.boundingBox;
                    if (box) {
                        const size = new THREE.Vector3();
                        box.getSize(size);
                        const diag = size.length();

                        // If very large and not the table, remove it
                        if (diag > threshold && child !== table) {
                            removed.push(child);
                        }
                    }
                }
            });

            removed.forEach((m) => {
                if (m.parent) m.parent.remove(m);
                else this.scene.remove(m);
            });

        } catch (e) {
            console.warn('removeLargeOccluders failed', e);
        }
    }

    async wait(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }

    onWindowResize() {
        const canvas = this.renderer.domElement;
        this.camera.aspect = canvas.clientWidth / canvas.clientHeight;
        this.camera.updateProjectionMatrix();
        this.renderer.setSize(canvas.clientWidth, canvas.clientHeight);
    }

    startAnimationLoop() {
        const animate = () => {
            requestAnimationFrame(animate);
            
            // Update controls
            this.controls.update();
            
            // Update animation mixers
            const delta = 0.016; // Approximate 60fps
            for (const mixer of this.animationMixers.values()) {
                mixer.update(delta);
            }
            
            // Render scene
            this.renderer.render(this.scene, this.camera);
        };
        
        animate();
    }

    // Additional event handlers
    onRightClick(event) {
        event.preventDefault();
        // Cancel any action mode or drag
        if (this.actionMode) {
            this.setActionMode(null);
            this.pourSource = null;
            return;
        }
        if (this.dragState.isDragging) {
            // revert to previous position if available
            if (this.dragState.object && this.dragState.prevPosIndex !== null) {
                const prev = this.equipmentPositions[this.dragState.prevPosIndex];
                prev.available = false;
                this.dragState.object.position.set(prev.x, (this.dragState.object.userData && this.dragState.object.userData.equipmentType === 'stand') ? 0.6 : (this.dragState.object.userData && this.dragState.object.userData.equipmentType === 'beaker' ? 0.25 : 0.2), prev.z);
                this.dragState.object.userData.position = { x: prev.x, z: prev.z };
            }
            this.dragState.isDragging = false;
            this.dragState.object = null;
            this.renderer.domElement.style.cursor = 'grab';
            
        }
    }

    onTouchStart(event) {
        event.preventDefault();
        // Handle touch interaction
    }

    onTouchMove(event) {
        event.preventDefault();
        // Handle touch movement
    }

    onKeyDown(event) {
        // Keyboard shortcuts
        switch(event.key) {
            case 'r':
            case 'R':
                if (event.ctrlKey) {
                    this.resetLab();
                }
                break;
            case ' ':
                // Pause/resume experiment
                break;
            case 'Escape':
                this.deselectObject();
                break;
        }
    }
}

// Initialize lab when page loads
let modernLab = null;

window.addEventListener('DOMContentLoaded', async () => {
    modernLab = new ModernChemistryLab();
    
    // Expose lab to global scope for button clicks
    window.modernLab = modernLab;
    
    window.startExperiment = (type) => modernLab.startExperiment(type);
    window.resetLab = () => modernLab.resetLab();
    
});