{% extends 'base.html' %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2"><i class="bi bi-eye text-primary me-2"></i>{{ _('GCode Preview') }}: {{ file.original_filename }}</h1>
    <div>
        <a href="{{ url_for('printer.prepare') }}#file-{{ file.id }}" class="btn btn-warning btn-sm rounded shadow-sm fw-bold"><i class="bi bi-printer"></i> {{ _('Go to Print') }}</a>
        <a href="{{ url_for('main.download_gcode', file_id=file.id) }}" class="btn btn-primary btn-sm rounded shadow-sm ms-2"><i class="bi bi-download"></i> {{ _('Download GCode') }}</a>
        <a href="{{ url_for('main.files') }}" class="btn btn-outline-secondary btn-sm rounded ms-2 shadow-sm"><i class="bi bi-arrow-left"></i> {{ _('Back') }}</a>
    </div>
</div>

<div id="loading-overlay" class="text-center py-5 my-5">
    <div class="spinner-border text-primary shadow-sm" role="status" style="width: 3rem; height: 3rem;"></div>
    <h4 class="mt-4 text-secondary">{{ _('Loading and Parsing GCode Data...') }}</h4>
</div>

<div class="row d-none" id="preview-container" style="height: 75vh;">
    <!-- 3D Canvas Area -->
    <div class="col-md-11 position-relative h-100 p-0 border rounded border-secondary shadow-sm" style="background: #111;">
        <div id="canvas-container" class="w-100 h-100 d-block overflow-hidden"></div>
        
        <!-- Legend Overlay -->
        <div class="position-absolute top-0 start-0 m-3 p-2 rounded shadow bg-dark bg-opacity-75 border border-secondary" style="color: #eee; font-size: 0.85rem; pointer-events: auto; z-index: 10;">
            <div class="mb-1 legend-item user-select-none" data-type="WALL-OUTER" style="cursor: pointer; transition: opacity 0.2s;"><span class="d-inline-block rounded-circle me-2 border border-dark" style="width: 12px; height: 12px; background: #eb8b38;"></span>{{ _('Outer Wall') }}</div>
            <div class="mb-1 legend-item user-select-none" data-type="WALL-INNER" style="cursor: pointer; transition: opacity 0.2s;"><span class="d-inline-block rounded-circle me-2 border border-dark" style="width: 12px; height: 12px; background: #4080cf;"></span>{{ _('Inner Wall') }}</div>
            <div class="mb-1 legend-item user-select-none" data-type="FILL" style="cursor: pointer; transition: opacity 0.2s;"><span class="d-inline-block rounded-circle me-2 border border-dark" style="width: 12px; height: 12px; background: #ccc04b;"></span>{{ _('Infill') }}</div>
            <div class="mb-1 legend-item user-select-none" data-type="SKIN" style="cursor: pointer; transition: opacity 0.2s;"><span class="d-inline-block rounded-circle me-2 border border-dark" style="width: 12px; height: 12px; background: #9e60b3;"></span>{{ _('Skin/TopBottom') }}</div>
            <div class="mb-1 legend-item user-select-none" data-type="SUPPORT" style="cursor: pointer; transition: opacity 0.2s;"><span class="d-inline-block rounded-circle me-2 border border-dark" style="width: 12px; height: 12px; background: #57b357;"></span>{{ _('Support') }}</div>
            <div class="mb-1 legend-item user-select-none" data-type="SKIRT" style="cursor: pointer; transition: opacity 0.2s;"><span class="d-inline-block rounded-circle me-2 border border-dark" style="width: 12px; height: 12px; background: #00ffff;"></span>{{ _('Skirt') }}</div>
            <div class="mb-1 legend-item user-select-none" data-type="SUPPORT-INTERFACE" style="cursor: pointer; transition: opacity 0.2s;"><span class="d-inline-block rounded-circle me-2 border border-dark" style="width: 12px; height: 12px; background: #2b6b2b;"></span>{{ _('Support Interface') }}</div>
            <div class="mb-1 legend-item user-select-none" data-type="TRAVEL" style="cursor: pointer; transition: opacity 0.2s; opacity: 0.4;"><span class="d-inline-block rounded-circle me-2 border border-dark" style="width: 12px; height: 12px; background: #405060;"></span>{{ _('Travel (Move)') }}</div>
        </div>
        
        <!-- Bottom Slider (Intra-Layer Progress) -->
        <div class="position-absolute bottom-0 start-0 w-100 p-3" style="background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.8) 100%); z-index: 10;">
            <div class="d-flex align-items-center gap-3">
                <span class="text-white fw-medium text-nowrap user-select-none"><i class="bi bi-play-circle me-1"></i>{{ _('Layer Progress:') }}</span>
                <input type="range" class="form-range flex-grow-1" id="progress-slider" min="0" max="100" value="100" step="0.1">
            </div>
        </div>
    </div>
    
    <!-- Right Sidebar (Layer Slider) -->
    <div class="col-md-1 h-100 d-flex flex-column align-items-center justify-content-center bg-white border rounded shadow-sm position-relative">
        <label class="form-label mb-3 fw-bold text-center text-primary mt-3">{{ _('Layer') }}<br>
            <span id="layer-display" class="badge bg-primary fs-6 mt-1 shadow-sm px-3 rounded-pill">0</span>
        </label>
        <div class="flex-grow-1 w-100 d-flex justify-content-center pb-4 py-2">
            <input type="range" class="form-range h-100" id="layer-slider" min="0" max="0" value="0" style="writing-mode: bt-lr; -webkit-appearance: slider-vertical; cursor: ns-resize;">
        </div>
    </div>
</div>

<script src="{{ url_for('static', filename='js/three.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/OrbitControls.js') }}"></script>

<script>
document.addEventListener('DOMContentLoaded', async function() {
    const COLORS = {
        'WALL-OUTER': new THREE.Color(0xeb8b38),
        'WALL-INNER': new THREE.Color(0x4080cf),
        'FILL':     new THREE.Color(0xccc04b),
        'SKIN':       new THREE.Color(0x9e60b3),
        'SUPPORT':    new THREE.Color(0x57b357),
        'SKIRT':      new THREE.Color(0x00ffff),
        'SUPPORT-INTERFACE': new THREE.Color(0x2b6b2b),
        'TRAVEL':     new THREE.Color(0x405060),
        'DEFAULT':    new THREE.Color(0xaaaaaa)
    };

    // Additional aliases mapped to basic COLORS
    const COLOR_ALIASES = {
        'External perimeter': COLORS['WALL-OUTER'],
        'Overhang perimeter': COLORS['WALL-OUTER'],
        'Perimeter': COLORS['WALL-INNER'],
        'Internal infill': COLORS['FILL'],
        'Solid infill': COLORS['FILL'],
        'Top solid infill': COLORS['FILL'],
        'Bridge infill': COLORS['FILL'],
        'Support material': COLORS['SUPPORT'],
        'Skirt/Brim': COLORS['SKIRT'],
        'Support material interface': COLORS['SUPPORT-INTERFACE']
    };
    
    // Merge aliases into COLORS
    Object.assign(COLORS, COLOR_ALIASES);
    
    // Inject printer machine dimensions via Jinja
    const bedWidth = {{ machine_width | default(220) }};
    const bedDepth = {{ machine_depth | default(220) }};
    const bedHeight = {{ machine_height | default(250) }};
    const offsetX = {{ offset_x | default(0.0) }};
    const offsetY = {{ offset_y | default(0.0) }};
    
    // Type indices for shader visibility filtering
    const TYPE_INDEX = {
        'TRAVEL': 0, 'WALL-OUTER': 1, 'WALL-INNER': 2,
        'FILL': 3, 'SKIN': 4, 'SUPPORT': 5, 'DEFAULT': 6,
        'SKIRT': 7, 'SUPPORT-INTERFACE': 8
    };

    // Aliases for TYPE_INDEX
    const TYPE_INDEX_ALIASES = {
        'External perimeter': 1,
        'Overhang perimeter': 1,
        'Perimeter': 2,
        'Internal infill': 3,
        'Solid infill': 3,
        'Top solid infill': 3,
        'Bridge infill': 3,
        'Support material': 5,
        'Skirt/Brim': 7,
        'Support material interface': 8
    };

    // Merge aliases into TYPE_INDEX
    Object.assign(TYPE_INDEX, TYPE_INDEX_ALIASES);

    let layers = [];
    let scene, camera, renderer, controls;
    let group = new THREE.Group();
    
    const layerSlider = document.getElementById('layer-slider');
    const layerDisplay = document.getElementById('layer-display');
    const progressSlider = document.getElementById('progress-slider');
    
    // Shader material for high-speed dynamic feature visibility
    const gcodeMat = new THREE.ShaderMaterial({
        uniforms: {
            uShowOuter:   { value: 1.0 },
            uShowInner:   { value: 1.0 },
            uShowInfill:  { value: 1.0 },
            uShowSkin:    { value: 1.0 },
            uShowSupport: { value: 1.0 },
            uShowSkirt:   { value: 1.0 },
            uShowSupportInterface: { value: 1.0 },
            uShowTravel:  { value: 0.0 },
            uShowDefault: { value: 1.0 }
        },
        vertexShader: `
            attribute float pType;
            varying vec3 vColor;
            varying float vType;
            void main() {
                vColor = color;
                vType = pType;
                gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
            }
        `,
        fragmentShader: `
            varying vec3 vColor;
            varying float vType;
            uniform float uShowOuter;
            uniform float uShowInner;
            uniform float uShowInfill;
            uniform float uShowSkin;
            uniform float uShowSupport;
            uniform float uShowSkirt;
            uniform float uShowSupportInterface;
            uniform float uShowTravel;
            uniform float uShowDefault;
            void main() {
                float show = 1.0;
                int t = int(vType + 0.5);
                if (t == 0) show = uShowTravel;
                else if (t == 1) show = uShowOuter;
                else if (t == 2) show = uShowInner;
                else if (t == 3) show = uShowInfill;
                else if (t == 4) show = uShowSkin;
                else if (t == 5) show = uShowSupport;
                else if (t == 7) show = uShowSkirt;
                else if (t == 8) show = uShowSupportInterface;
                else show = uShowDefault;
                
                if (show < 0.5) discard;
                gl_FragColor = vec4(vColor, 1.0);
            }
        `,
        vertexColors: true,
        side: THREE.DoubleSide,
        linewidth: 1
    });

    // Binding the Legend Buttons
    const uniformMap = {
        'WALL-OUTER': 'uShowOuter',
        'WALL-INNER': 'uShowInner',
        'FILL':     'uShowInfill',
        'SKIN':       'uShowSkin',
        'SUPPORT':    'uShowSupport',
        'SKIRT':      'uShowSkirt',
        'SUPPORT-INTERFACE': 'uShowSupportInterface',
        'TRAVEL':     'uShowTravel'
    };

    const uniformMapAliases = {
        'External perimeter': 'uShowOuter',
        'Overhang perimeter': 'uShowOuter',
        'Perimeter': 'uShowInner',
        'Internal infill': 'uShowInfill',
        'Solid infill': 'uShowInfill',
        'Top solid infill': 'uShowInfill',
        'Bridge infill': 'uShowInfill',
        'Support material': 'uShowSupport',
        'Skirt/Brim': 'uShowSkirt',
        'Support material interface': 'uShowSupportInterface'
    };

    Object.assign(uniformMap, uniformMapAliases);
    
    document.querySelectorAll('.legend-item').forEach(el => {
        el.addEventListener('click', function() {
            const t = this.dataset.type;
            const uniformName = uniformMap[t];
            if (uniformName) {
                const currentVal = gcodeMat.uniforms[uniformName].value;
                const newVal = currentVal > 0.5 ? 0.0 : 1.0;
                gcodeMat.uniforms[uniformName].value = newVal;
                this.style.opacity = newVal > 0.5 ? "1.0" : "0.4";
            }
        });
    });

    function init3D() {
        const container = document.getElementById('canvas-container');
        scene = new THREE.Scene();
        scene.background = new THREE.Color(0x1a1a1a);
        
        scene.add(group);
        
        camera = new THREE.PerspectiveCamera(45, container.clientWidth / container.clientHeight, 1, 5000);
        camera.up.set(0, 0, 1);
        
        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(container.clientWidth, container.clientHeight);
        renderer.setPixelRatio(window.devicePixelRatio);
        container.appendChild(renderer.domElement);
        
        controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.enableDamping = false;
        controls.mouseButtons.MIDDLE = THREE.MOUSE.PAN;
        
        window.addEventListener('resize', onWindowResize);
    }
    
    function onWindowResize() {
        const container = document.getElementById('canvas-container');
        camera.aspect = container.clientWidth / container.clientHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(container.clientWidth, container.clientHeight);
    }
    
    function animate() {
        requestAnimationFrame(animate);
        controls.update();
        renderer.render(scene, camera);
    }
    
    async function loadGCode() {
        try {
            const url = '{{ url_for("main.download_gcode", file_id=file.id) }}';
            const response = await fetch(url);
            if (!response.ok) throw new Error("GCode Request Failed");
            
            const gcodeText = await response.text();
            
            document.getElementById('loading-overlay').classList.add('d-none');
            document.getElementById('preview-container').classList.remove('d-none');
            
            init3D();
            parseGCode(gcodeText);
            
            // Add grid matching printer size
            setupMachineEnvironment();
            
            animate();
            
            // Init controls
            layerSlider.max = Math.max(0, layers.length - 1);
            layerSlider.value = Math.max(0, layers.length - 1);
            updateUI();
            
            layerSlider.addEventListener('input', updateUI);
            progressSlider.addEventListener('input', updateUI);
            
        } catch(e) {
            console.error("Error Loading GCode", e);
            document.getElementById('loading-overlay').innerHTML = `
                <div class="text-danger my-5 py-5">
                    <i class="bi bi-exclamation-triangle display-1"></i>
                    <h3 class="mt-3">{{ _('Failed to load GCode preview.') }}</h3>
                    <p class="text-muted">${e.toString()}</p>
                </div>`;
        }
    }
    
    function parseGCode(text) {
        const lines = text.split('\n');
        
        let current = { x: 0, y: 0, z: 0, e: 0 };
        let currentTypeStr = 'DEFAULT';
        
        let currentExtrudePoints = [];
        let currentExtrudeColors = [];
        let currentExtrudeTypes = [];
        
        let currentTravelPoints = [];
        let currentTravelColors = [];
        let currentTravelTypes = [];
        
        function flushLayer() {
            if (currentExtrudePoints.length === 0 && currentTravelPoints.length === 0) return;
            
            let layerGroup = new THREE.Group();
            
            if (currentExtrudePoints.length > 0) {
                const geo = new THREE.BufferGeometry();
                geo.setAttribute('position', new THREE.Float32BufferAttribute(currentExtrudePoints, 3));
                geo.setAttribute('color', new THREE.Float32BufferAttribute(currentExtrudeColors, 3));
                geo.setAttribute('pType', new THREE.Float32BufferAttribute(currentExtrudeTypes, 1));
                const mesh = new THREE.Mesh(geo, gcodeMat);
                mesh.userData.isExtrude = true;
                layerGroup.add(mesh);
                currentExtrudePoints = []; currentExtrudeColors = []; currentExtrudeTypes = [];
            }
            
            if (currentTravelPoints.length > 0) {
                const geo = new THREE.BufferGeometry();
                geo.setAttribute('position', new THREE.Float32BufferAttribute(currentTravelPoints, 3));
                geo.setAttribute('color', new THREE.Float32BufferAttribute(currentTravelColors, 3));
                geo.setAttribute('pType', new THREE.Float32BufferAttribute(currentTravelTypes, 1));
                const lineSeg = new THREE.LineSegments(geo, gcodeMat);
                lineSeg.userData.isTravel = true;
                layerGroup.add(lineSeg);
                currentTravelPoints = []; currentTravelColors = []; currentTravelTypes = [];
            }
            
            layers.push(layerGroup);
            group.add(layerGroup);
        }
        
        for (let i = 0; i < lines.length; i++) {
            let chunk = lines[i].trim();
            if (!chunk) continue;
            let upperChunk = chunk.toUpperCase();
            
            if (upperChunk.startsWith(';LAYER:')) {
                flushLayer();
            } else if (upperChunk.startsWith(';TYPE:')) {
                currentTypeStr = chunk.substring(6).trim();
            } else if (upperChunk.startsWith(';') && chunk.includes(' perimeter')) {
                // Heuristics for Prusa/Slic3r specific comments like `; External perimeter`
                currentTypeStr = chunk.substring(1).trim();
            } else if (upperChunk.startsWith(';') && chunk.includes(' infill')) {
                // Heuristics for Prusa/Slic3r specific comments like `; Internal infill`
                currentTypeStr = chunk.substring(1).trim();
            } else if (upperChunk.startsWith(';') && chunk.includes(' material')) {
                // Support material
                currentTypeStr = chunk.substring(1).trim();
            } else if (upperChunk.startsWith(';') && chunk.includes('Skirt/Brim')) {
                // Skirt/Brim
                currentTypeStr = 'Skirt/Brim';
            } else if (upperChunk.startsWith('G0') || upperChunk.startsWith('G1')) {
                let next = { x: current.x, y: current.y, z: current.z, e: current.e };
                let parts = upperChunk.split(/\s+/);
                let hasMove = false;
                
                for (let p of parts) {
                    if (p.startsWith('X')) { let v = parseFloat(p.substring(1)); if(!isNaN(v)) { next.x = v; hasMove = true; } }
                    if (p.startsWith('Y')) { let v = parseFloat(p.substring(1)); if(!isNaN(v)) { next.y = v; hasMove = true; } }
                    if (p.startsWith('Z')) { let v = parseFloat(p.substring(1)); if(!isNaN(v)) { next.z = v; hasMove = true; } }
                    if (p.startsWith('E')) { let v = parseFloat(p.substring(1)); if(!isNaN(v)) { next.e = v; } }
                }
                
                if (hasMove && !isNaN(next.x) && !isNaN(next.y) && !isNaN(next.z)) {
                    let isExtrude = (next.e > current.e);
                    // Cura uses G0 for travel generally
                    if (upperChunk.startsWith('G0') && !upperChunk.includes('E')) isExtrude = false;
                    
                    let activeType = isExtrude ? currentTypeStr : 'TRAVEL';
                    // Special case for default aliases like "; External perimeter" which we stored in currentTypeStr
                    let resolvedType = activeType;
                    if (isExtrude && Object.keys(COLOR_ALIASES).includes(activeType)) {
                        resolvedType = activeType;
                    }
                    
                    let col = COLORS[resolvedType] || COLORS['DEFAULT'];
                    let tIdx = TYPE_INDEX[resolvedType] !== undefined ? TYPE_INDEX[resolvedType] : TYPE_INDEX['DEFAULT'];
                    
                    if (isExtrude) {
                        let dx = next.x - current.x;
                        let dy = next.y - current.y;
                        let dist = Math.sqrt(dx*dx + dy*dy);
                        if (dist > 0.0001) {
                            let hw = 0.4 / 2.0; // 0.4mm wire width
                            let hh = 0.2 / 2.0; // 0.2mm layer height roughly
                            
                            let nx = -(dy / dist) * hw;
                            let ny = (dx / dist) * hw;
                            
                            let p1x = current.x + nx, p1y = current.y + ny; // current-left
                            let p2x = current.x - nx, p2y = current.y - ny; // current-right
                            let p3x = next.x + nx, p3y = next.y + ny;       // next-left
                            let p4x = next.x - nx, p4y = next.y - ny;       // next-right
                            
                            // Top face
                            currentExtrudePoints.push(
                                p1x, p1y, current.z + hh,
                                p3x, p3y, next.z + hh,
                                p2x, p2y, current.z + hh,
                                p3x, p3y, next.z + hh,
                                p4x, p4y, next.z + hh,
                                p2x, p2y, current.z + hh
                            );
                            for(let k=0; k<6; k++) { currentExtrudeColors.push(col.r, col.g, col.b); currentExtrudeTypes.push(tIdx); }
                            
                            // Bottom face
                            currentExtrudePoints.push(
                                p1x, p1y, current.z - hh,
                                p2x, p2y, current.z - hh,
                                p3x, p3y, next.z - hh,
                                p2x, p2y, current.z - hh,
                                p4x, p4y, next.z - hh,
                                p3x, p3y, next.z - hh
                            );
                            for(let k=0; k<6; k++) { currentExtrudeColors.push(col.r*0.4, col.g*0.4, col.b*0.4); currentExtrudeTypes.push(tIdx); }
                            
                            // Left face
                            currentExtrudePoints.push(
                                p1x, p1y, current.z - hh,
                                p3x, p3y, next.z - hh,
                                p1x, p1y, current.z + hh,
                                p3x, p3y, next.z - hh,
                                p3x, p3y, next.z + hh,
                                p1x, p1y, current.z + hh
                            );
                            // Fake lighting based on normal side
                            for(let k=0; k<6; k++) { currentExtrudeColors.push(col.r*0.6, col.g*0.6, col.b*0.6); currentExtrudeTypes.push(tIdx); }
                            
                            // Right face
                            currentExtrudePoints.push(
                                p2x, p2y, current.z - hh,
                                p2x, p2y, current.z + hh,
                                p4x, p4y, next.z - hh,
                                p2x, p2y, current.z + hh,
                                p4x, p4y, next.z + hh,
                                p4x, p4y, next.z - hh
                            );
                            for(let k=0; k<6; k++) { currentExtrudeColors.push(col.r*0.8, col.g*0.8, col.b*0.8); currentExtrudeTypes.push(tIdx); }
                        }
                    } else {
                        currentTravelPoints.push(current.x, current.y, current.z);
                        currentTravelPoints.push(next.x, next.y, next.z);
                        currentTravelColors.push(col.r, col.g, col.b, col.r, col.g, col.b);
                        currentTravelTypes.push(tIdx, tIdx);
                    }
                    
                    current.x = next.x; current.y = next.y; current.z = next.z; current.e = next.e;
                }
            } else if (chunk.startsWith('G92')) {
                let parts = chunk.split(/\s+/);
                for (let p of parts) {
                    if (p.startsWith('E')) { let v = parseFloat(p.substring(1)); if(!isNaN(v)) current.e = v; }
                    if (p.startsWith('X')) { let v = parseFloat(p.substring(1)); if(!isNaN(v)) current.x = v; }
                    if (p.startsWith('Y')) { let v = parseFloat(p.substring(1)); if(!isNaN(v)) current.y = v; }
                    if (p.startsWith('Z')) { let v = parseFloat(p.substring(1)); if(!isNaN(v)) current.z = v; }
                }
            }
        }
        flushLayer();
    }
    
    function setupMachineEnvironment() {
        if (layers.length === 0) return;
        
        let bbox = new THREE.Box3();
        for (let layerGrp of layers) {
            layerGrp.children.forEach(child => {
                child.geometry.computeBoundingBox();
                bbox.union(child.geometry.boundingBox);
            });
        }
        
        // The GCode coordinates for the actual print bed are from (0,0) to (W,H).
        // The GCode trajectory is ALREADY offset by plater.html during slicing.
        // We just need to place the grid exactly in the center of the bed: (W/2, H/2).
        let gridOffsetX = (bedWidth / 2);
        let gridOffsetY = (bedDepth / 2);
        
        // Add Grid
        const gridDivisions = Math.ceil(Math.max(bedWidth, bedDepth) / 10);
        const gridHelper = new THREE.GridHelper(Math.max(bedWidth, bedDepth), gridDivisions, 0x444444, 0x242424);
        gridHelper.rotation.x = Math.PI / 2;
        gridHelper.position.set(gridOffsetX, gridOffsetY, 0);
        scene.add(gridHelper);

        // Add Printer Volume Outline
        const boxGeo = new THREE.BoxGeometry(bedWidth, bedDepth, bedHeight);
        const edges = new THREE.EdgesGeometry(boxGeo);
        const boxOutline = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({ color: 0x444444 }));
        boxOutline.position.set(gridOffsetX, gridOffsetY, bedHeight/2);
        scene.add(boxOutline);
        
        // Align Camera to target the center of the bed grid
        controls.target.set(gridOffsetX, gridOffsetY, 0);
        camera.position.set(gridOffsetX, gridOffsetY - (bedDepth * 1.5), bedHeight * 0.8);
    }
    
    function updateUI() {
        if (layers.length === 0) return;
        let activeIdx = parseInt(layerSlider.value);
        let intraProg = parseFloat(progressSlider.value);
        
        layerDisplay.innerText = activeIdx + " / " + (layers.length - 1);
        
        for (let i = 0; i < layers.length; i++) {
            let layerGrp = layers[i];
            if (i < activeIdx) {
                layerGrp.visible = true;
                layerGrp.children.forEach(child => child.geometry.setDrawRange(0, Infinity));
            } else if (i === activeIdx) {
                layerGrp.visible = true;
                layerGrp.children.forEach(child => {
                    let totalVertices = child.geometry.attributes.position.count;
                    let elementsPerUnit = child.userData.isTravel ? 2 : 24; 
                    let totalUnits = totalVertices / elementsPerUnit;
                    let drawCount = Math.floor(totalUnits * (intraProg / 100)) * elementsPerUnit;
                    child.geometry.setDrawRange(0, drawCount);
                });
            } else {
                layerGrp.visible = false;
            }
        }
    }
    
    loadGCode();
});
</script>
{% endblock %}