{% extends 'base.html' %}

{% block content %}
<style>
    /* 防止整个大页面滚动 */
    body {
        overflow: hidden;
    }
</style>
<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-grid-3x3 me-2 text-primary"></i>{{ _('Plater / Build Plate') }}</h1>
</div>

<div class="row" style="height: calc(100vh - 140px);">
    
    
    <!-- 3D Area -->
    <div class="col-md-9 h-100 position-relative">
        <div id="plater-container" class="w-100 h-100 rounded shadow-sm border border-secondary" style="overflow: hidden; background: #f8f9fa; position: relative;"></div>
        
        <!-- Parameterized Scale Input Box -->
        <div id="scale-panel" class="position-absolute top-50 start-0 translate-middle-y ms-5 ps-4 d-none" style="z-index: 10; pointer-events: none;">
            <div class="bg-white rounded shadow-sm p-3 opacity-90 border border-secondary" style="width: 170px; pointer-events: auto;">
                <h6 class="fs-6 mb-2 text-primary"><i class="bi bi-arrows-angle-expand me-1"></i>{{ _('Scale') }}</h6>
                <div class="input-group input-group-sm mb-1">
                    <span class="input-group-text bg-danger text-white border-danger fw-bold opacity-75" style="width: 32px;">X</span>
                    <input type="number" class="form-control" id="scale-x" value="1.0" step="0.1" onchange="applyScaleInput('x')">
                </div>
                <div class="input-group input-group-sm mb-1">
                    <span class="input-group-text bg-success text-white border-success fw-bold opacity-75" style="width: 32px;">Y</span>
                    <input type="number" class="form-control" id="scale-y" value="1.0" step="0.1" onchange="applyScaleInput('y')">
                </div>
                <div class="input-group input-group-sm mb-2">
                    <span class="input-group-text bg-primary text-white border-primary fw-bold opacity-75" style="width: 32px;">Z</span>
                    <input type="number" class="form-control" id="scale-z" value="1.0" step="0.1" onchange="applyScaleInput('z')">
                </div>
                <div class="form-check form-switch small mb-0 mt-1">
                    <input class="form-check-input" type="checkbox" id="scale-uniform" checked>
                    <label class="form-check-label user-select-none" for="scale-uniform">{{ _('Uniform Scale') }}</label>
                </div>
            </div>
        </div>
        
        <div class="position-absolute top-50 start-0 translate-middle-y ms-3 p-2 bg-white rounded shadow-sm d-flex flex-column gap-2 opacity-75" style="z-index: 10;">
            <button class="btn btn-primary btn-sm rounded" id="btn-translate" title="{{ _('Translate (W)') }}" onclick="setTransformMode('translate')"><i class="bi bi-arrows-move"></i></button>
            <button class="btn btn-outline-secondary btn-sm rounded" id="btn-rotate" title="{{ _('Rotate (E)') }}" onclick="setTransformMode('rotate')"><i class="bi bi-arrow-clockwise"></i></button>
            <button class="btn btn-outline-secondary btn-sm rounded" id="btn-scale" title="{{ _('Scale (R)') }}" onclick="setTransformMode('scale')"><i class="bi bi-arrows-angle-expand"></i></button>
            <hr class="m-0 border-secondary">
            <button class="btn btn-outline-info btn-sm rounded" id="btn-layflat" title="{{ _('Lay Flat') }}" onclick="setTransformMode('layflat')"><i class="bi bi-symmetry-horizontal"></i></button>
            <button class="btn btn-outline-danger btn-sm rounded mt-2" id="btn-remove" title="{{ _('Remove Selected (Del)') }}" onclick="removeActiveModel()"><i class="bi bi-trash3"></i></button>
        </div>
    </div>

    <!-- Sidebar -->
    <div class="col-md-3 h-100 d-flex flex-column pb-3">
        <!-- Accordion wrapper for options -->
        <div class="accordion flex-grow-1" id="platerSidebarAccordion" style="overflow-y: auto; overflow-x: hidden; padding-right: 5px;">
            <div class="card shadow-sm mb-3">
                <div class="card-header bg-light fw-bold text-secondary d-flex justify-content-between align-items-center" style="cursor: pointer; z-index: 10;" data-bs-toggle="collapse" data-bs-target="#collapseModels" aria-expanded="true">
                    <span><i class="bi bi-layers-fill me-2"></i>{{ _('Available Models') }}</span>
                    <i class="bi bi-chevron-bar-contract"></i>
                </div>
                <div id="collapseModels" class="collapse show" data-bs-parent="#platerSidebarAccordion">
                <div class="list-group list-group-flush" id="model-list" style="min-height: 160px; max-height: max(250px, 35vh); overflow-y: auto;">
                    {% for model in models %}
                    <button id="add-model-btn-{{ model.id }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" data-matrix="{{ model.transform_matrix or '' }}" onclick="addModelToPlate(this, {{ model.id }}, '{{ model.url }}', '{{ model.name }}', '{{ model.status }}')">
                        <span class="text-truncate">{{ model.name }}</span>
                        <i class="bi bi-plus-circle text-success"></i>
                    </button>
                    {% else %}
                    <div class="p-3 text-center text-muted">{{ _("No STL models uploaded yet. Go upload some first.") }}</div>
                    {% endfor %}
                </div>
            </div>
        </div>
        
        <div class="card shadow-sm mb-3 flex-shrink-0">
            <div class="card-header bg-light fw-bold text-secondary d-flex justify-content-between align-items-center collapsed" style="cursor: pointer;" data-bs-toggle="collapse" data-bs-target="#collapseSettings" aria-expanded="false">
                <span><i class="bi bi-sliders me-2"></i>{{ _('Other Settings') }}</span>
                <i class="bi bi-chevron-bar-contract"></i>
            </div>
            <div id="collapseSettings" class="collapse" data-bs-parent="#platerSidebarAccordion">
                <div class="card-body py-2">
                    <div class="mb-2">
                        <label for="infill-density" class="form-label text-secondary small mb-1">{{ _('Infill Density') }} (%)</label>
                        <input type="number" class="form-control form-control-sm" id="infill-density" value="{{ default_infill }}" min="0" max="100">
                    </div>
                    <div class="mb-2">
                        <label for="support-type" class="form-label text-secondary small mb-1">{{ _('Support') }}</label>
                        <select class="form-select form-select-sm" id="support-type">
                            <option value="false" {% if default_support == 'false' %}selected{% endif %}>{{ _('None') }}</option>
                            <option value="buildplate" {% if default_support == 'buildplate' %}selected{% endif %}>{{ _('Touching Buildplate') }}</option>
                            <option value="true" {% if default_support == 'true' %}selected{% endif %}>{{ _('Everywhere') }}</option>
                        </select>
                    </div>
                    <div class="mb-2">
                        <label for="support-pattern" class="form-label text-secondary small mb-1">{{ _('Support Type') }}</label>
                        <select class="form-select form-select-sm" id="support-pattern" data-selected="{{ default_support_pattern }}" {% if default_support == 'false' %}disabled{% endif %}></select>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="card shadow-sm flex-shrink-0 mb-3">
            <div class="card-header bg-light fw-bold text-secondary d-flex justify-content-between align-items-center collapsed" style="cursor: pointer;" data-bs-toggle="collapse" data-bs-target="#collapseMaterial" aria-expanded="false">
                <span><i class="bi bi-box me-2"></i>{{ _('Material Profile') }}</span>
                <i class="bi bi-chevron-bar-contract"></i>
            </div>
            <div id="collapseMaterial" class="collapse" data-bs-parent="#platerSidebarAccordion">
                <div class="card-body">
                    <div class="mb-3">
                        <select class="form-select bg-light" id="material" data-selected="{{ last_material }}"></select>
                    </div>
                </div>
            </div>
        </div>

        <div class="card shadow-sm flex-shrink-0 mb-3">
            <div class="card-header bg-light fw-bold text-secondary d-flex justify-content-between align-items-center collapsed" style="cursor: pointer;" data-bs-toggle="collapse" data-bs-target="#collapseQuality" aria-expanded="false">
                <span><i class="bi bi-gear-wide-connected me-2"></i>{{ _('Quality Profile') }}</span>
                <i class="bi bi-chevron-bar-contract"></i>
            </div>
            <div id="collapseQuality" class="collapse" data-bs-parent="#platerSidebarAccordion">
                <div class="card-body">
                    <div class="mb-3">
                        <select class="form-select bg-light" id="quality" data-selected="{{ last_quality }}"></select>
                    </div>
                </div>
            </div>
        </div>
        </div> <!-- End of accordion wrapper -->

        <div class="mt-auto pt-3 border-top d-flex flex-column gap-2 mb-1">
            <button class="btn btn-outline-danger w-100" onclick="customConfirm('{{ _('Are you sure you want to clear the board?') }}', clearPlate)"><i class="bi bi-trash me-2"></i>{{ _('Clear Board') }}</button>
            <button class="btn btn-primary w-100 py-2 fs-5 shadow-sm" onclick="mergeAndSlice()" id="btn-merge"><i class="bi bi-gear-fill me-2" id="merge-icon"></i><span id="merge-text">{{ _('Merge & Slice') }}</span></button>
        </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 src="{{ url_for('static', filename='js/TransformControls.js') }}"></script>
<script src="{{ url_for('static', filename='js/STLLoader.js') }}"></script>

<script>
// Toggle icons on collapse
document.addEventListener('DOMContentLoaded', function() {
    {% if quota_exceeded %}
    window.customConfirm("{{ _('GCode Storage Quota Exceeded. Please delete some files first.') }}",()=>{window.location.href = "{{ url_for('main.files') }}"});
    return;
    {% endif %}
    
    const cards = document.querySelectorAll('.collapse');
    cards.forEach(card => {
        card.addEventListener('show.bs.collapse', function () {
            const icon = this.previousElementSibling.querySelector('i.bi-chevron-bar-expand');
            if(icon) {
                icon.classList.remove('bi-chevron-bar-expand');
                icon.classList.add('bi-chevron-bar-contract');
            }
        });
        card.addEventListener('hide.bs.collapse', function () {
            const icon = this.previousElementSibling.querySelector('i.bi-chevron-bar-contract');
            if(icon) {
                icon.classList.remove('bi-chevron-bar-contract');
                icon.classList.add('bi-chevron-bar-expand');
            }
        });
    });
});

let scene, camera, renderer, orbit, transformControl, transformProxy, gridHelper, bedBoxOutline;
let boundPlanes = {};
let bedWidth = {{ w }};
let bedDepth = {{ h }};
let bedHeight = {{ hd }};
let offsetX = {{ offset_x|default(0) }};
let offsetY = {{ offset_y|default(0) }};
let loadedModels = [];
let activeModel = null;
let selectedModels = [];
let selectionBoxDiv = document.createElement('div');
selectionBoxDiv.id = 'selection-box';
selectionBoxDiv.style.cssText = 'position: absolute; border: 1px dashed #007bff; background: rgba(0, 123, 255, 0.1); pointer-events: none; display: none; z-index: 100;';
document.getElementById('plater-container').appendChild(selectionBoxDiv);
let dragStartPoint = null;
let isDraggingBox = false;
const initialAddId = new URLSearchParams(window.location.search).get('add');

initPlater();
animate();

function initPlater() {
    const container = document.getElementById('plater-container');
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xe9ecef);
    
    camera = new THREE.PerspectiveCamera(45, container.clientWidth / container.clientHeight, 1, 3000);
    camera.position.set(0, -bedDepth * 1.2, bedHeight);
    
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(container.clientWidth, container.clientHeight);
    container.appendChild(renderer.domElement);
    
    // Lights
    scene.add(new THREE.AmbientLight(0x888888));
    const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
    dirLight.position.set(100, 100, 200);
    scene.add(dirLight);

    // Bed Grid
    const gridSizeX = bedWidth;
    const gridSizeY = bedDepth;
    const maxGridSize = Math.max(gridSizeX, gridSizeY);
    // Divisions needed to make each square exactly 10mm wide
    const gridDivisions = Math.ceil(maxGridSize / 10);
    gridHelper = new THREE.GridHelper(gridDivisions * 10, gridDivisions, 0xbbbbbb, 0xdddddd);
    gridHelper.rotation.x = Math.PI / 2;
    scene.add(gridHelper);

    // Bed Origin Axes (Bottom-Left Corner)
    const axesHelper = new THREE.AxesHelper(maxGridSize / 4);
    axesHelper.position.set(-bedWidth / 2, -bedDepth / 2, 0.2);
    scene.add(axesHelper);

    {% if configs.get('build_plate_model_path') %}
    const bpLoader = new THREE.STLLoader();
    bpLoader.load("{{ url_for('main.build_plate_model') }}", function (geometry) {
        const material = new THREE.MeshPhongMaterial({ color: 0x999999, specular: 0x111111, shininess: 200 });
        const mesh = new THREE.Mesh(geometry, material);
        <!-- mesh.rotation.set(-Math.PI / 2, 0, 0); -->
        mesh.rotation.set(0, 0, 0);
        mesh.position.set(0, 0, -0.1); // Slightly below the grid
        scene.add(mesh);
    });
    {% endif %}

    // Show Bed Box outline
    const boxGeo = new THREE.BoxGeometry(bedWidth, bedDepth, bedHeight);
    const edges = new THREE.EdgesGeometry(boxGeo);
    bedBoxOutline = new THREE.LineSegments(edges, new THREE.LineBasicMaterial( { color: 0xcccccc } ));
    bedBoxOutline.position.z = bedHeight / 2;
    scene.add(bedBoxOutline);
    
    // Warning planes
    const planeMat = new THREE.MeshBasicMaterial({ color: 0xff0000, transparent: true, opacity: 0.4, side: THREE.DoubleSide, depthWrite: false });
    boundPlanes = {
        minX: new THREE.Mesh(new THREE.PlaneGeometry(bedDepth, bedHeight), planeMat),
        maxX: new THREE.Mesh(new THREE.PlaneGeometry(bedDepth, bedHeight), planeMat),
        minY: new THREE.Mesh(new THREE.PlaneGeometry(bedWidth, bedHeight), planeMat),
        maxY: new THREE.Mesh(new THREE.PlaneGeometry(bedWidth, bedHeight), planeMat),
        minZ: new THREE.Mesh(new THREE.PlaneGeometry(bedWidth, bedDepth), planeMat),
        maxZ: new THREE.Mesh(new THREE.PlaneGeometry(bedWidth, bedDepth), planeMat)
    };
    
    boundPlanes.minX.rotation.y = Math.PI / 2;
    boundPlanes.minX.rotation.z = Math.PI / 2;
    boundPlanes.minX.position.set(-bedWidth/2, 0, bedHeight/2);
    
    boundPlanes.maxX.rotation.y = Math.PI / 2;
    boundPlanes.maxX.rotation.z = Math.PI / 2;
    boundPlanes.maxX.position.set(bedWidth/2, 0, bedHeight/2);
    
    boundPlanes.minY.rotation.x = Math.PI / 2;
    boundPlanes.minY.position.set(0, -bedDepth/2, bedHeight/2);
    
    boundPlanes.maxY.rotation.x = Math.PI / 2;
    boundPlanes.maxY.position.set(0, bedDepth/2, bedHeight/2);
    
    boundPlanes.minZ.position.set(0, 0, 0); // bottom
    
    boundPlanes.maxZ.position.set(0, 0, bedHeight); // top
    
    for (let key in boundPlanes) {
        boundPlanes[key].visible = false;
        scene.add(boundPlanes[key]);
    }
    
    // Controls
    orbit = new THREE.OrbitControls(camera, renderer.domElement);
    orbit.enableDamping = false;
    orbit.mouseButtons.MIDDLE = THREE.MOUSE.PAN;
    orbit.target.set(0, 0, 0);
    
    transformProxy = new THREE.Object3D();
    scene.add(transformProxy);

    transformControl = new THREE.TransformControls(camera, renderer.domElement);
    transformControl.setSpace('world');
    transformControl.addEventListener('change', function () {
        if (transformControl.getMode() === 'scale' && !document.getElementById('scale-panel').classList.contains('d-none')) {
            updateScalePanel();
        }
    });
    transformControl.addEventListener('dragging-changed', function (event) {
        orbit.enabled = !event.value;
        if (!event.value && selectedModels.length > 0) {
            let center = new THREE.Vector3();
            selectedModels.forEach(m => {
                scene.attach(m);
                m.geometry.computeBoundingBox();
                let box = m.geometry.boundingBox.clone();
                box.applyMatrix4(m.matrixWorld);
                center.add(box.getCenter(new THREE.Vector3()));
            });
            center.divideScalar(selectedModels.length);
            
            transformProxy.position.copy(center);
            transformProxy.rotation.set(0, 0, 0);
            transformProxy.scale.set(1, 1, 1);
            
            selectedModels.forEach(m => {
                transformProxy.attach(m);
            });
        }
    });
    scene.add(transformControl);

    window.addEventListener('resize', onWindowResize);
    window.addEventListener('keydown', onKeyDown);
    renderer.domElement.addEventListener('pointerdown', onPointerDown);
}

function onWindowResize() {
    const container = document.getElementById('plater-container');
    camera.aspect = container.clientWidth / container.clientHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(container.clientWidth, container.clientHeight);
}

let layFlatMode = false;

function setTransformMode(mode) {
    if (mode !== 'layflat') {
        transformControl.setMode(mode);
        transformControl.setSpace(mode === 'scale' ? 'local' : 'world');
        layFlatMode = false;
        
        document.getElementById('btn-translate').className = mode === 'translate' ? 'btn btn-primary btn-sm rounded' : 'btn btn-outline-secondary btn-sm rounded';
        document.getElementById('btn-rotate').className = mode === 'rotate' ? 'btn btn-primary btn-sm rounded' : 'btn btn-outline-secondary btn-sm rounded';
        document.getElementById('btn-scale').className = mode === 'scale' ? 'btn btn-primary btn-sm rounded' : 'btn btn-outline-secondary btn-sm rounded';
        document.getElementById('btn-layflat').className = 'btn btn-outline-info btn-sm rounded';
        
        if (mode === 'scale' && selectedModels && selectedModels.length > 0) {
            document.getElementById('scale-panel').classList.remove('d-none');
            updateScalePanel();
        } else {
            document.getElementById('scale-panel').classList.add('d-none');
        }
    } else {
        layFlatMode = true;
        document.getElementById('btn-translate').className = 'btn btn-outline-secondary btn-sm rounded';
        document.getElementById('btn-rotate').className = 'btn btn-outline-secondary btn-sm rounded';
        document.getElementById('btn-scale').className = 'btn btn-outline-secondary btn-sm rounded';
        document.getElementById('btn-layflat').className = 'btn btn-info btn-sm rounded text-white';
        transformControl.detach();
        document.getElementById('scale-panel').classList.add('d-none');
    }
}

function updateScalePanel() {
    if (selectedModels.length === 0) return;
    
    // Check if scales match
    let firstScale = selectedModels[0].getWorldScale(new THREE.Vector3());
    let allXMatch = true, allYMatch = true, allZMatch = true;
    
    for (let i = 1; i < selectedModels.length; i++) {
        let v = selectedModels[i].getWorldScale(new THREE.Vector3());
        if (Math.abs(v.x - firstScale.x) > 0.001) allXMatch = false;
        if (Math.abs(v.y - firstScale.y) > 0.001) allYMatch = false;
        if (Math.abs(v.z - firstScale.z) > 0.001) allZMatch = false;
    }
    
    document.getElementById('scale-x').value = allXMatch ? firstScale.x.toFixed(3) : '';
    document.getElementById('scale-y').value = allYMatch ? firstScale.y.toFixed(3) : '';
    document.getElementById('scale-z').value = allZMatch ? firstScale.z.toFixed(3) : '';
}

function applyScaleInput(axis) {
    if (selectedModels.length === 0) return;
    let valStr = document.getElementById('scale-' + axis).value;
    if (valStr === '') return;
    let val = parseFloat(valStr);
    if (isNaN(val) || val <= 0.001) val = 1.0;
    
    const isUniform = document.getElementById('scale-uniform').checked;
    
    selectedModels.forEach(m => {
        scene.attach(m);
        if (isUniform) {
            const prev = m.scale[axis];
            const ratio = val / prev;
            m.scale.x *= ratio;
            m.scale.y *= ratio;
            m.scale.z *= ratio;
        } else {
            m.scale[axis] = val;
        }
        m.updateMatrixWorld(true);
    });
    
    transformProxy.scale.set(1, 1, 1);
    selectedModels.forEach(m => {
        transformProxy.attach(m);
    });
    
    updateScalePanel();
}



function onKeyDown(event) {
    switch (event.key.toLowerCase()) {
        case 'w': setTransformMode('translate'); break;
        case 'e': setTransformMode('rotate'); break;
        case 'r': setTransformMode('scale'); break;
        case 'backspace':
        case 'delete':
            removeActiveModel();
            break;
    }
}

function onPointerDown(event) {
    if(transformControl.dragging) return;
    const container = document.getElementById('plater-container');
    const rect = renderer.domElement.getBoundingClientRect();
    const pointer = new THREE.Vector2();
    pointer.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
    pointer.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
    
    if (event.ctrlKey || event.metaKey) {
        dragStartPoint = { x: event.clientX, y: event.clientY };
        isDraggingBox = false;
        orbit.enabled = false;
        document.addEventListener('pointermove', onPointerMoveBox);
        document.addEventListener('pointerup', onPointerUpBox);
    }

    
    const raycaster = new THREE.Raycaster();
    raycaster.setFromCamera(pointer, camera);
    const intersects = raycaster.intersectObjects(loadedModels, true);
    
    if (layFlatMode) {
        if (intersects.length > 0) {
            const hit = intersects[0];
            const obj = hit.object;
            const face = hit.face;
            if (face) {
                // Ensure model is in world space before applying transformations
                scene.attach(obj);
                
                // The target normal to align with (pointing downward to the bed, Z = -1)
                const targetNormal = new THREE.Vector3(0, 0, -1);
                
                // Get the face's normal in world space
                let localNormal = face.normal.clone();
                let currentWorldNormal = localNormal.transformDirection(obj.matrixWorld).normalize();

                // Compute quaternion to rotate current normal to point straight down
                let quaternion = new THREE.Quaternion();
                quaternion.setFromUnitVectors(currentWorldNormal, targetNormal);
                
                // Apply global rotation
                obj.quaternion.premultiply(quaternion);
                obj.updateMatrixWorld(true);
                
                // Snap to bed (Z=0)
                obj.geometry.computeBoundingBox();
                const box = obj.geometry.boundingBox.clone();
                box.applyMatrix4(obj.matrixWorld);
                const minZ = box.min.z;
                obj.position.z -= minZ;
                obj.updateMatrixWorld(true);
                
                // Exit lay flat mode and reset to translate
                setTransformMode('translate');
                selectModels([obj]);
            }
        }
        return;
    }
    
    if (intersects.length > 0) {
        if (event.ctrlKey || event.metaKey) {
            toggleModelSelection(intersects[0].object);
        } else {
            selectModels([intersects[0].object]);
        }
    } else {
        if (!event.ctrlKey && !event.metaKey) {
            selectModels([]);
        }
    }
}

function onPointerMoveBox(event) {
    if (!dragStartPoint) return;
    const dx = Math.abs(event.clientX - dragStartPoint.x);
    const dy = Math.abs(event.clientY - dragStartPoint.y);
    if (dx > 5 || dy > 5) {
        isDraggingBox = true;
        
        const container = document.getElementById('plater-container');
        const rect = container.getBoundingClientRect();
        
        const startX = dragStartPoint.x - rect.left;
        const startY = dragStartPoint.y - rect.top;
        const currentX = event.clientX - rect.left;
        const currentY = event.clientY - rect.top;
        
        selectionBoxDiv.style.display = 'block';
        selectionBoxDiv.style.left = Math.min(currentX, startX) + 'px';
        selectionBoxDiv.style.top = Math.min(currentY, startY) + 'px';
        selectionBoxDiv.style.width = Math.abs(currentX - startX) + 'px';
        selectionBoxDiv.style.height = Math.abs(currentY - startY) + 'px';
    }
}

function onPointerUpBox(event) {
    document.removeEventListener('pointermove', onPointerMoveBox);
    document.removeEventListener('pointerup', onPointerUpBox);
    orbit.enabled = true;
    
    if (isDraggingBox) {
        selectionBoxDiv.style.display = 'none';
        
        const rect = renderer.domElement.getBoundingClientRect();
        const minX = Math.min(dragStartPoint.x, event.clientX) - rect.left;
        const maxX = Math.max(dragStartPoint.x, event.clientX) - rect.left;
        const minY = Math.min(dragStartPoint.y, event.clientY) - rect.top;
        const maxY = Math.max(dragStartPoint.y, event.clientY) - rect.top;
        
        let newSelection = [...selectedModels];
        
        loadedModels.forEach(m => {
            m.geometry.computeBoundingBox();
            let box = m.geometry.boundingBox.clone();
            box.applyMatrix4(m.matrixWorld);
            
            // Project 8 corners
            const corners = [
                new THREE.Vector3(box.min.x, box.min.y, box.min.z),
                new THREE.Vector3(box.max.x, box.min.y, box.min.z),
                new THREE.Vector3(box.min.x, box.max.y, box.min.z),
                new THREE.Vector3(box.max.x, box.max.y, box.min.z),
                new THREE.Vector3(box.min.x, box.min.y, box.max.z),
                new THREE.Vector3(box.max.x, box.min.y, box.max.z),
                new THREE.Vector3(box.min.x, box.max.y, box.max.z),
                new THREE.Vector3(box.max.x, box.max.y, box.max.z)
            ];
            
            let inside = false;
            corners.forEach(v => {
                v.project(camera);
                let sx = (v.x *  .5 + .5) * rect.width;
                let sy = (v.y * -.5 + .5) * rect.height;
                if (sx >= minX && sx <= maxX && sy >= minY && sy <= maxY) {
                    inside = true;
                }
            });
            
            if (inside && !newSelection.includes(m)) {
                newSelection.push(m);
            }
        });
        selectModels(newSelection);
    } else if (dragStartPoint && !isDraggingBox) {
        // Just a ctrl+click that missed logic is handled by raycaster above, but we have to ensure no double toggle
    }
    dragStartPoint = null;
    isDraggingBox = false;
}


function toggleModelSelection(model) {
    let newSel = [...selectedModels];
    if (newSel.includes(model)) {
        newSel = newSel.filter(m => m !== model);
    } else {
        newSel.push(model);
    }
    selectModels(newSel);
}

function selectModels(models) {
    selectedModels.forEach(m => {
        scene.attach(m);
        m.material.color.setHex(0xcccccc);
    });
    
    selectedModels = models;
    activeModel = selectedModels.length > 0 ? selectedModels[selectedModels.length - 1] : null;
    
    if (selectedModels.length > 0) {
        // compute joint center
        let center = new THREE.Vector3();
        let count = 0;
        selectedModels.forEach(m => {
            m.material.color.setHex(0x0d6efd);
            scene.attach(m); // ensure in world
            m.geometry.computeBoundingBox();
            let box = m.geometry.boundingBox.clone();
            box.applyMatrix4(m.matrixWorld);
            center.add(box.getCenter(new THREE.Vector3()));
            count++;
        });
        center.divideScalar(count);
        
        transformProxy.position.copy(center);
        transformProxy.rotation.set(0, 0, 0);
        transformProxy.scale.set(1, 1, 1);
        
        selectedModels.forEach(m => {
            transformProxy.attach(m);
        });
        
        transformControl.attach(transformProxy);
        if(transformControl.getMode() === 'scale') {
            document.getElementById('scale-panel').classList.remove('d-none');
            updateScalePanel();
        }
    } else {
        document.getElementById('scale-panel').classList.add('d-none');
        transformControl.detach();
    }
}

// Keep a backward compatible selectModel definition for single cases
function selectModel(model) {
    if (model) {
        selectModels([model]);
    } else {
        selectModels([]);
    }
}


function removeModel(model) {
    if (selectedModels.includes(model)) {
        selectedModels = selectedModels.filter(m => m !== model);
        if (selectedModels.length === 0) transformControl.detach();
    }
    scene.attach(model);
    scene.remove(model);
    loadedModels = loadedModels.filter(m => m !== model);
    activeModel = selectedModels.length > 0 ? selectedModels[0] : null;
}

function removeActiveModel() {
    if (selectedModels.length > 0) {
        [...selectedModels].forEach(m => removeModel(m));
        selectModels([]);
    }
}

function clearPlate() {
    transformControl.detach();
    loadedModels.forEach(m => {
        scene.attach(m);
        scene.remove(m);
    });
    loadedModels = [];
    selectedModels = [];
    activeModel = null;
}

function addModelToPlate(btnElement, fileId, url, name, status) {
    let matrixData = btnElement ? btnElement.getAttribute('data-matrix') : null;
    
    if (matrixData) {
        try {
            let data = JSON.parse(matrixData);
            if (data.settings) {
                if (data.settings.infill) document.getElementById('infill-density').value = data.settings.infill;
                if (data.settings.support) {
                    let supportSelect = document.getElementById('support-type');
                    supportSelect.value = data.settings.support;
                    supportSelect.dispatchEvent(new Event('change'));
                }
                
                if (data.settings.support_pattern) {
                    const sSelect = document.getElementById('support-pattern');
                    sSelect.setAttribute('data-selected', data.settings.support_pattern);
                    sSelect.value = data.settings.support_pattern;
                }
                if (data.settings.quality) {
                    const qSelect = document.getElementById('quality');
                    qSelect.setAttribute('data-selected', data.settings.quality);
                    qSelect.value = data.settings.quality;
                }
                if (data.settings.material) {
                    const mSelect = document.getElementById('material');
                    mSelect.setAttribute('data-selected', data.settings.material);
                    mSelect.value = data.settings.material;
                }
            }
        } catch (e) {}
    }
    
    if (matrixData && matrixData.includes('"is_composite"')) {
        try {
            let comp = JSON.parse(matrixData);
            if (comp.is_composite && comp.parts) {
                if (btnElement) {
                    const iconSpan = btnElement.querySelector('i');
                    const originalClass = iconSpan.className;
                    iconSpan.className = 'spinner-border spinner-border-sm text-primary';
                    btnElement.disabled = true;
                    
                    let totalParts = comp.parts.length;
                    let loadedCount = 0;
                    
                    comp.parts.forEach(part => {
                        loadSTL(part.file_id, part.url, part.name, 'uploaded', JSON.stringify(part.raw_matrix), () => {
                            loadedCount++;
                            if (loadedCount === totalParts) {
                                iconSpan.className = originalClass;
                                btnElement.disabled = false;
                            }
                        });
                    });
                } else {
                    comp.parts.forEach(part => {
                        loadSTL(part.file_id, part.url, part.name, 'uploaded', JSON.stringify(part.raw_matrix));
                    });
                }
                return;
            }
        } catch (e) {
            console.error(e);
        }
    }
    
    if (btnElement) {
        const iconSpan = btnElement.querySelector('i');
        const originalClass = iconSpan.className;
        iconSpan.className = 'spinner-border spinner-border-sm text-primary';
        btnElement.disabled = true;
        loadSTL(fileId, url, name, status, matrixData, () => {
            iconSpan.className = originalClass;
            btnElement.disabled = false;
        });
    } else {
        loadSTL(fileId, url, name, status, matrixData);
    }
}

function loadSTL(fileId, url, name, status, matrixData, callback) {
    const loader = new THREE.STLLoader();
    loader.load(url, function (geometry) {
        geometry.computeBoundingBox();
        const center = geometry.boundingBox.getCenter(new THREE.Vector3());
        const minZ = geometry.boundingBox.min.z;
        geometry.translate(-center.x, -center.y, -minZ);

        const material = new THREE.MeshPhongMaterial({ color: 0xcccccc, specular: 0x111111, shininess: 200 });
        const mesh = new THREE.Mesh(geometry, material);
        mesh.userData = { 
            fileId: fileId, 
            name: name,
            status: status,
            geomTrans: new THREE.Matrix4().makeTranslation(-center.x, -center.y, -minZ)
        };
        
        if (matrixData && matrixData.trim() !== '' && matrixData !== 'None') {
            try {
                let mArray = JSON.parse(matrixData);
                // Skip if it actually is a composite (handled by addModelToPlate)
                if (mArray && mArray.is_composite === true) return;
                
                if (mArray && !Array.isArray(mArray) && mArray.matrix) {
                    mArray = mArray.matrix;
                }
                let savedMatrix = new THREE.Matrix4().fromArray(mArray);
                savedMatrix.decompose(mesh.position, mesh.quaternion, mesh.scale);
            } catch (e) {
                console.error('Failed to parse saved matrix:', e);
                mesh.position.x = (Math.random() - 0.5) * 50;
                mesh.position.y = (Math.random() - 0.5) * 50;
            }
        } else {
            mesh.position.x = (Math.random() - 0.5) * 50;
            mesh.position.y = (Math.random() - 0.5) * 50;
        }
        
        scene.add(mesh);
        loadedModels.push(mesh);
        selectModel(mesh);
        
        if (callback) callback();
    }, undefined, function (error) {
        console.error(error);
        if (callback) callback();
        window.customAlert("{{ _('Error loading STL model file.') }}");
    });
}

function checkBounds() {
    if (!bedBoxOutline) return false;
    let boundsViolation = {
        minX: false, maxX: false,
        minY: false, maxY: false,
        minZ: false, maxZ: false
    };
    
    let outOfBounds = false;
    
    for (let i = 0; i < loadedModels.length; i++) {
        let m = loadedModels[i];
        let box = new THREE.Box3().setFromObject(m);
        
        if (box.min.x < -bedWidth / 2 - 0.05) boundsViolation.minX = true;
        if (box.max.x > bedWidth / 2 + 0.05) boundsViolation.maxX = true;
        if (box.min.y < -bedDepth / 2 - 0.05) boundsViolation.minY = true;
        if (box.max.y > bedDepth / 2 + 0.05) boundsViolation.maxY = true;
        if (box.min.z < -0.05) boundsViolation.minZ = true;
        if (box.max.z > bedHeight + 0.05) boundsViolation.maxZ = true;
    }
    
    outOfBounds = boundsViolation.minX || boundsViolation.maxX || 
                  boundsViolation.minY || boundsViolation.maxY || 
                  boundsViolation.minZ || boundsViolation.maxZ;
                  
    for (let key in boundsViolation) {
        if (boundPlanes && boundPlanes[key]) {
            boundPlanes[key].visible = boundsViolation[key];
        }
    }
    
    if (outOfBounds) {
        bedBoxOutline.material.color.setHex(0xffaaaa);
    } else {
        bedBoxOutline.material.color.setHex(0xcccccc);
    }
    return outOfBounds;
}

function animate() {
    requestAnimationFrame(animate);
    checkBounds();
    orbit.update();
    renderer.render(scene, camera);
}

function mergeAndSlice() {
    selectModels([]); // Detach any active model to bake transformProxy world coordinates into its local matrix properties
    
    if (loadedModels.length === 0) {
        window.customAlert("{{ _('Please add at least one model to the build plate.') }}");
        return;
    }
    
    if (checkBounds()) {
        window.customAlert("{{ _('One or more models are outside the print area. Please adjust them before slicing.') }}");
        return;
    }
    
    let isEdit = false;
    let targetFileId = null;
    
    if (window.isCompositeEdit) {
        isEdit = true;
        targetFileId = initialAddId;
    } else if (loadedModels.length === 1 && String(loadedModels[0].userData.fileId) === String(initialAddId)) {
        isEdit = true;
        targetFileId = initialAddId;
    }
    
    if (isEdit) {
        // Just checking if we want to warn
        if (loadedModels.length === 1 && loadedModels[0].userData.status === 'sliced') {
            window.customConfirm("{{ _('This model has already been sliced. The existing GCode will be overwritten. Continue?') }}", doMergeAndSlice);
            return;
        } else if (window.isCompositeEdit) {
            window.customConfirm("{{ _('You are editing a composite model. The existing composite will be updated and re-sliced. Continue?') }}", doMergeAndSlice);
            return;
        }
    }
    
    doMergeAndSlice();

    function doMergeAndSlice() {
        const pieces = loadedModels.map(m => {
        m.updateMatrixWorld(true);
        const mat = m.matrixWorld.clone();
        if (m.userData.geomTrans) {
            mat.multiply(m.userData.geomTrans);
        }
        const translation = new THREE.Matrix4().makeTranslation(offsetX,offsetY, 0);
        mat.premultiply(translation);
        return {
            file_id: m.userData.fileId,
            matrix: mat.elements, // Array of 16 numbers used for slicing
            raw_matrix: m.matrixWorld.elements // Use world matrix explicitly just in case
        };
    });
    
    const quality = document.getElementById('quality').value;
    const material = document.getElementById('material').value;
    const infill = document.getElementById('infill-density').value;
    const support = document.getElementById('support-type').value;
    const supportPattern = document.getElementById('support-pattern').value;
    
    const btn = document.getElementById('btn-merge');
    const icon = document.getElementById('merge-icon');
    const text = document.getElementById('merge-text');
    
    btn.disabled = true;
    icon.className = 'spinner-border spinner-border-sm me-2';
    text.innerText = '{{ _("Slicing queued!") }}';
    
    // Ajax request
    fetch('{{ url_for("main.merge_and_slice") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ pieces: pieces, quality: quality, material: material, infill: infill, support: support, support_pattern: supportPattern, is_edit: isEdit, target_file_id: targetFileId })
    })
    .then(response => response.json())
    .then(data => {
        if(data.success) {
            window.location.href = "{{ url_for('main.files') }}";
        } else {
            let errorMsg = data.error;
            if (errorMsg === 'GCode Storage Quota Exceeded. Please delete some files first.') {
                errorMsg = "{{ _('GCode Storage Quota Exceeded. Please delete some files first.') }}";
            }
            window.customAlert("{{ _('Error:') }} " + errorMsg);
            btn.disabled = false;
            icon.className = 'bi bi-gear-fill me-2';
            text.innerText = '{{ _("Merge & Slice") }}';
        }
    })
    .catch(err => {
        window.customAlert("{{ _('Error:') }} " + String(err));
        btn.disabled = false;
        icon.className = 'bi bi-gear-fill me-2';
        text.innerText = '{{ _("Merge & Slice") }}';
    });
    }
}

document.addEventListener('DOMContentLoaded', () => {
    const supportType = document.getElementById('support-type');
    const supportPattern = document.getElementById('support-pattern');
    if (supportType && supportPattern) {
        supportType.addEventListener('change', function() {
            supportPattern.disabled = (this.value === 'false');
        });
    }

    const params = new URLSearchParams(window.location.search);
    const addId = params.get('add');
    if (addId) {
        const btn = document.getElementById('add-model-btn-' + addId);
        if (btn) {
            let matrixData = btn.getAttribute('data-matrix');
            if (matrixData) {
                try {
                    let d = JSON.parse(matrixData);
                    if (d && d.is_composite === true) {
                        window.isCompositeEdit = true;
                    }
                } catch(e) {}
            }
            btn.click();
        }
    }
});
</script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const engine = "{{ configs.get('slicer_engine', 'cura') }}";
        const qualitySelect = document.getElementById('quality');
        const patternSelect = document.getElementById('support-pattern');
        const materialSelect = document.getElementById('material');

        fetch(`/api/engine_options/${engine}`)
            .then(res => res.json())
            .then(data => {
                const selQ = qualitySelect.getAttribute('data-selected');
                qualitySelect.innerHTML = '';
                data.presets.forEach(p => {
                    const opt = document.createElement('option');
                    opt.value = p.id; opt.textContent = p.name;
                    qualitySelect.appendChild(opt);
                });
                if(selQ) qualitySelect.value = selQ;
                
                const selM = materialSelect.getAttribute('data-selected');
                materialSelect.innerHTML = '';
                const emptyOpt = document.createElement('option');
                emptyOpt.value = ''; emptyOpt.textContent = "{{ _('Auto / Default') }}";
                materialSelect.appendChild(emptyOpt);
                if(data.materials) {
                    data.materials.forEach(p => {
                        const opt = document.createElement('option');
                        opt.value = p.id; opt.textContent = p.name;
                        materialSelect.appendChild(opt);
                    });
                }
                if(selM) materialSelect.value = selM;
                
                const selP = patternSelect.getAttribute('data-selected');
                patternSelect.innerHTML = '';
                data.support_patterns.forEach(p => {
                    const opt = document.createElement('option');
                    opt.value = p.id; opt.textContent = p.name;
                    patternSelect.appendChild(opt);
                });
                if(selP) patternSelect.value = selP;
            });
    });
</script>
{% endblock %}