let blockCount = 0; 

function createScene(engine, canvas, length, width, height, margin) {
    const scene = new BABYLON.Scene(engine);

    
    const camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
    camera.attachControl(canvas, true);

    
    const light = new BABYLON.HemisphericLight("light1", BABYLON.Vector3.Up(), scene);
    light.intensity = 0.7;

    
    const blockSize = 1;
    

    
    scene.meshes.forEach(mesh => {
        if (mesh.name === 'block' || mesh.name === 'borderBlock') {
            mesh.dispose();
        }
    });

    blockCount = 0;
    

    
    for (let x = 0; x < length; x++) {
        for (let y = 0; y < width; y++) {
            for (let z = 0; z < height; z++) {
                if (x === 0 || x === length - 1 || y === 0 || y === width - 1 || z === 0 || z === height - 1) {
                    createBlock(scene, x * (blockSize + margin), y * (blockSize + margin), z * (blockSize + margin), blockSize);
                    blockCount++; 
                }
            }
        }
    }

    
    const countText = new BABYLON.GUI.TextBlock();
    countText.text = "Blocks: " + blockCount; 
    countText.color = "white";
    countText.fontSize = 24;
    countText.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
    countText.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;

    const advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI", true, scene);
    advancedTexture.addControl(countText); 

    return scene;
}

function createBlock(scene, x, y, z, size) {
    const block = BABYLON.MeshBuilder.CreateBox("block", {
        size: size
    }, scene);
    block.position = new BABYLON.Vector3(x, y, z);

    
    const blockMaterial = new BABYLON.StandardMaterial("blockMaterial", scene);
    blockMaterial.diffuseColor = new BABYLON.Color3(0.7, 0.7, 0.7); 
    block.material = blockMaterial;

    
    const borderMaterial = new BABYLON.StandardMaterial("borderMaterial", scene);
    borderMaterial.emissiveColor = new BABYLON.Color3(0, 0, 0);
    

    
    const borderBlock = BABYLON.MeshBuilder.CreateBox("borderBlock", {
        size: size + 0.1
    }, scene);
    borderBlock.position = new BABYLON.Vector3(x, y, z);
    borderBlock.material = borderMaterial;
}

window.addEventListener('DOMContentLoaded', () => {
    const canvas = document.getElementById("renderCanvas");
    const engine = new BABYLON.Engine(canvas, true);

    let length = parseInt(document.getElementById("length").value);
    let width = parseInt(document.getElementById("width").value);
    let height = parseInt(document.getElementById("height").value);
    let margin = parseFloat(document.getElementById("margin").value);

    const scene = createScene(engine, canvas, length, width, height, margin);

    
    document.getElementById("updateScene").addEventListener("click", () => {
        length = parseInt(document.getElementById("length").value);
        width = parseInt(document.getElementById("width").value);
        height = parseInt(document.getElementById("height").value);
        margin = parseFloat(document.getElementById("margin").value);
        createScene(engine, canvas, length, width, height, margin); 
    });

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

    
    window.addEventListener("resize", () => {
        engine.resize();
    });
});