import { app } from "/scripts/app.js";
import { Toolbar } from './toolbar.js';
function applyMask(layerImage, maskImage) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true });
    canvas.width = layerImage.width;
    canvas.height = layerImage.height;
    ctx.drawImage(maskImage, 0, 0, layerImage.width, layerImage.height);
    const maskData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(layerImage, 0, 0);
    const layerData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    for (let i = 0; i < maskData.data.length; i += 4) {
        const luminance = maskData.data[i];
        layerData.data[i + 3] = luminance;
    }
    ctx.putImageData(layerData, 0, 0);
    return canvas;
}
const BLEND_MODES = ["normal", "multiply", "screen", "overlay", "soft-light", "hard-light", "difference", "color-dodge", "color-burn"];
const RESIZE_MODES = ["stretch", "fit", "cover", "crop"];
const MAX_LAYERS = 11;
const rotateCursorSVG = `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none"><path d="M12 3A9 9 0 1 1 3 12" stroke="black" stroke-width="3.5" stroke-linecap="round"/><path d="M12 3A9 9 0 1 1 3 12" stroke="white" stroke-width="1.5" stroke-linecap="round"/></svg>`;
const rotateCursorDataUri = `data:image/svg+xml;base64,${btoa(rotateCursorSVG)}`;
const rotateCursorStyle = `url(${rotateCursorDataUri}) 12 12, auto`;
const eyeIconPath = new Path2D("M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zM12 9c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z");
const eyeSlashPath = new Path2D("M2 4.27l2.28 2.28L3.27 7.5C1.94 8.85 1 10.34 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l2.12 2.12L19.73 19 2 4.27zM12 17c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14l1.57 1.57c-.01.19-.02.38-.02.57 0 1.66 1.34 3 3 3 .19 0 .38-.01.57-.02l1.57 1.57C13.5 16.82 12.77 17 12 17zm7.88-8.13C21.06 10.15 22 11.08 23 12c-1.73 4.39-6 7.5-11 7.5-.94 0-1.84-.13-2.69-.36l2.03 2.03c.85.22 1.74.33 2.66.33 5 0 9.27-3.11 11-7.5-.73-1.83-2.1-3.38-3.73-4.54l-1.39 1.39zM12 9c.99 0 1.89.28 2.67.77l-1.1-1.1C13.04 8.28 12.53 8 12 8c-2.76 0-5 2.24-5 5 0 .53.08 1.04.23 1.53l-1.1-1.1c-.49-.78-.73-1.68-.73-2.63 0-2.76 2.24-5 5-5z");
const lockIconPath = new Path2D("M17 8v-1a5 5 0 00-10 0v1H5v12h14V8h-2zm-5 7a2 2 0 110-4 2 2 0 010 4zM9 7V6a3 3 0 116 0v1H9z");
const unlockIconPath = new Path2D("M9 7V6a3 3 0 116 0v1h2V6a5 5 0 00-10 0v1H5v12h14V8H9zm3 9a2 2 0 110-4 2 2 0 010 4z");
const arrowUpPath = new Path2D("M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z");
const arrowDownPath = new Path2D("M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z");
const moveIconPath = new Path2D("M12 2 L12 22 M2 12 L22 12 M12 2 L8 6 M12 2 L16 6 M12 22 L8 18 M12 22 L16 18 M2 12 L6 8 M2 12 L6 16 M22 12 L18 8 M22 12 L18 16");
const trashIconPath = new Path2D("M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z");
const replaceIconPath = new Path2D("M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z");
app.registerExtension({
    name: "LayerSystem.DynamicLayers",
    
    beforeRegisterNodeDef(nodeType, nodeData) {
        if (nodeData.name !== "LayerSystem") {
            return;
        }
        const resizeHeight = function() {
            if (!this.size) return;
            const anchorWidget = this.widgets.find(w => w.name === "_preview_anchor");
            if (anchorWidget && this.basePreviewImage) {
                const aspectRatio = this.basePreviewImage.naturalHeight / this.basePreviewImage.naturalWidth;
                const toolbarWidth = this.toolbar ? this.toolbar.width : 0;
                const contentWidth = this.size[0] - 20 - toolbarWidth;
                const requiredHeight = contentWidth * aspectRatio;
                
                anchorWidget.computeSize = () => [this.size[0], requiredHeight];
            }
            const newSize = this.computeSize();
            this.size[1] = newSize[1]; 
            this.onResize?.(this.size);
            this.graph.setDirtyCanvas(true, true);
            if (anchorWidget?.computeSize) {
                delete anchorWidget.computeSize;
            }
        };
        const onExecuted = nodeType.prototype.onExecuted;
        nodeType.prototype.onExecuted = function(message) {
            onExecuted?.apply(this, arguments);
            if (message?.layer_previews && message.layer_previews[0]) {
                const previewData = message.layer_previews[0];
                this.preview_data = previewData;
                const imagePromises = Object.entries(previewData).map(([name, previewInfo]) => {
                const url = previewInfo.url; 
                    return new Promise((resolve, reject) => {
                        const img = new Image();
                        img.crossOrigin = "anonymous";
                 if (url) {
                    img.src = url + `?t=${Date.now()}`;
                    img.onload = () => resolve({ name, img });
                    img.onerror = (err) => reject(err);
                } else {
                    reject(new Error(`[Layer System] Missing preview URL for ${name}`));
                }
            });
        });
                Promise.all(imagePromises)
                    .then(loadedImages => {
                        this.loaded_preview_images = loadedImages.reduce((acc, {name, img}) => {
                            acc[name] = img;
                            return acc;
                        }, {});
                        this.basePreviewImage = this.loaded_preview_images.base_image;
                        resizeHeight.call(this);
                        this.redrawPreviewCanvas();
                        this.refreshUI();
                    })
                    .catch(e => console.error("[Layer System] At least one preview image could not be loaded.", e));
            }
        };
        
        const onDrawBackground = nodeType.prototype.onDrawBackground;
        nodeType.prototype.onDrawBackground = function(ctx) {
        onDrawBackground?.apply(this, arguments);
		if (this.toolbar && this.toolbar.activeTool === 'brush') {
            this.toolbar.brushManager.positionToolbar();
        }
		if (this.toolbar && this.toolbar.activeTool === 'mask_painter') {
            this.toolbar.maskPainterManager.positionToolbar();
        }
        if (this.toolbar) {
        if (this.toolbar.maskManager?.contextualToolbar?.style.display !== 'none') {
            this.toolbar.maskManager.positionToolbar();
        }
        if (this.toolbar.contextualToolbar?.style.display !== 'none') {
            this.toolbar.updateContextualToolbarPosition();
        }
		if (this.toolbar.magicWandManager?.contextualToolbar?.style.display !== 'none') {
            this.toolbar.magicWandManager.positionToolbar();
        }
		if (this.toolbar.selectionSubMenu?.style.display !== 'none') {
            this.toolbar.positionSelectionSubMenu();
        }
    }
};
        const onNodeCreated = nodeType.prototype.onNodeCreated;
        nodeType.prototype.onNodeCreated = function () {
            onNodeCreated?.apply(this, arguments);
            this.base_image_properties = null;
            this.layer_properties = this.layer_properties || {};
			
	    const onRemoved_original = this.onRemoved;
        this.onRemoved = () => {
        onRemoved_original?.apply(this, arguments);
        if (this.toolbar?.contextualToolbar) {
            this.toolbar.contextualToolbar.remove();
        }
        if (this.toolbar?.maskManager?.contextualToolbar) {
            this.toolbar.maskManager.contextualToolbar.remove();
        }
		if (this.toolbar.selectionSubMenu) {
            this.toolbar.selectionSubMenu.remove();
        }
        if (this.toolbar.magicWandManager?.settingsToolbar) {
            this.toolbar.magicWandManager.settingsToolbar.remove();
        }
		if (this.toolbar?.brushManager?.toolbar) {
            this.toolbar.brushManager.toolbar.remove();
        }
		if (this.toolbar?.maskPainterManager?.toolbar) {
            this.toolbar.maskPainterManager.toolbar.remove();
        }
    };
			
const topSpacer = { 
    name: "global_top_spacer", 
    type: "CUSTOM_SPACER", 
    draw: () => {}, 
    computeSize: () => [0, 10] 
};
this.widgets.push(topSpacer);
            this.addWidget(
              "button",
              "Add Image",
               null,
               () => { this.handleInternalImageLoad(); }
            );
            
            this.basePreviewImage = null;
            this.preview_data = {};
            this.loaded_preview_images = {};
            this.redraw_req = null;
            this.previewCanvasScale = 1.0;
            this.movingLayer = null;
            this.isDragging = false;
            this.dragStart = { x: 0, y: 0 };
            this.initialOffsets = { x: 0, y: 0 };
            this.accordionMode = true;
            this.interactionMode = "none";
            this.movingLayerBounds = null;
            this.initialScale = 1.0;
            this.initialBounds = null; 
            this.layerAspectRatio = 1.0;
            this.initialRotation = 0.0;
            this.textActionMode = "none";
            this.activeTextObject = null;
            this.initialTextPos = { x: 0, y: 0 };
            this.isTextDragging = false;
            this.dragOffset = { x: 0, y: 0 };
            this.needsFirstSync = true;
            this._resizing = false;
            this.rotationOffsetAngle = 0.0;
            
            this.toolbar = new Toolbar(this);
            this.size[0] = 800;
            
            setTimeout(() => {
                const anchorWidget = this.widgets.find(w => w.name === "_preview_anchor");
                if (anchorWidget && anchorWidget.inputEl) {
                    const canvas = document.createElement("canvas");
                    const container = anchorWidget.inputEl.parentElement;
                    container.style.padding = "0px";
                    container.style.margin = "0px";
                    anchorWidget.inputEl.style.display = "none";
                    container.appendChild(canvas);
                    this.previewCanvas = canvas;
                    this.previewCtx = canvas.getContext("2d");
					
					const overlayCanvas = document.createElement("canvas");
                    overlayCanvas.id = "ls-overlay-canvas";
                    overlayCanvas.style.position = "absolute";
                    overlayCanvas.style.top = "0";
                    overlayCanvas.style.left = "0";
                    overlayCanvas.style.pointerEvents = "none";
                    container.appendChild(overlayCanvas);
                    this.overlayCanvas = overlayCanvas;
					
                    const anchorIndex = this.widgets.indexOf(anchorWidget);
                    if (anchorIndex > 0) {
                       this.widgets.splice(anchorIndex, 1);
                       this.widgets.unshift(anchorWidget);
                    }
                    this.redrawPreviewCanvas();
this.previewCanvas.addEventListener('mousedown', (e) => {
    const mouseX = e.offsetX;
    const mouseY = e.offsetY;

    if (this.toolbar.isClickOnToolbar(mouseX, mouseY)) {
        this.toolbar.handleClick(e, mouseX, mouseY);
        return;
    }

    if (this.textActionMode === 'moving' && this.activeTextObject) {
        const targetText = this.findTextElementAtPos(mouseX, mouseY);
        if (targetText && targetText.id === this.activeTextObject.id) {
            this.dragOffset = {
                x: targetText.x - mouseX,
                y: targetText.y - mouseY
            };
            this.isTextDragging = true;
        }
        e.preventDefault();
        e.stopPropagation();
        return;
    }

    if (this.toolbar.activeTool === 'magic_wand' && this.toolbar.magicWandManager) {
        this.toolbar.magicWandManager.handleCanvasClick(e);
        return;
    }
    if (this.toolbar.activeTool) {
        this.toolbar.handleCanvasClick(e);
        return;
    }

    if (!this.movingLayer) return;
    const props = this.layer_properties[this.movingLayer];
    if (!props) return;
    const handle = this.getHandleAtPos(e);
    if (handle && handle !== 'rotate') {
        this.interactionMode = "scaling_" + handle;
        this.dragStart = { x: e.clientX, y: e.clientY };
        this.initialScale = props.scale;
        this.initialOffsets = { x: props.offset_x, y: props.offset_y };
        this.initialBounds = { ...this.movingLayerBounds };
        this.layerAspectRatio = this.initialBounds.w / this.initialBounds.h;
    } else if (handle === 'rotate') {
        this.interactionMode = "rotating";
        const centerX = this.movingLayerBounds.x + this.movingLayerBounds.w / 2;
        const centerY = this.movingLayerBounds.y + this.movingLayerBounds.h / 2;
        this.dragStartAngle = Math.atan2(mouseY - centerY, mouseX - centerX);
        this.initialRotation = props.rotation || 0;
    } else {
        this.interactionMode = "moving";
        this.isDragging = true;
        this.dragStart = { x: e.clientX, y: e.clientY };
        this.initialOffsets = { x: props.offset_x, y: props.offset_y };
    }
    e.preventDefault();
    e.stopPropagation();
});
                    this.previewCanvas.addEventListener('mousemove', this.onCanvasMouseMove.bind(this));
                    this.previewCanvas.addEventListener('mouseup', this.onCanvasMouseUp.bind(this));
                    this.previewCanvas.addEventListener('mouseleave', this.onCanvasMouseLeave.bind(this));
                }
                this.initializeHeaderCanvases();
                
                const p_widget = this.widgets.find(w => w.name === "_properties_json");
                if(p_widget) {
                    p_widget.hidden = true;
                    p_widget.computeSize = () => [0, -4];
                }
 if (this.loadedConfig) {
    this.loadStateFromConfig(this.loadedConfig);
} else {
    this.refreshUI();
}
            }, 0);
        };
        
nodeType.prototype.onResize = function(size) {
    if (this._resizing) return;
    this._resizing = true;
    if (!this.widgets || !this.size || !this.basePreviewImage || this.basePreviewImage.naturalWidth <= 0) {
        this._resizing = false;
        return;
    }
    
    const anchorWidget = this.widgets.find(w => w.name === "_preview_anchor");
    if (anchorWidget) {
        const aspectRatio = this.basePreviewImage.naturalHeight / this.basePreviewImage.naturalWidth;
        const toolbarWidth = this.toolbar ? this.toolbar.width : 0;
        const contentWidth = size[0] - 20 - toolbarWidth;
        const requiredHeight = contentWidth * aspectRatio;
        anchorWidget.computeSize = () => [size[0], requiredHeight];
    }
    
    const newComputedSize = this.computeSize();
    this.size[1] = newComputedSize[1];
    if (anchorWidget?.computeSize) {
        delete anchorWidget.computeSize;
    }

    if (this.previewCanvas) {
        if (this.redraw_req) cancelAnimationFrame(this.redraw_req);
        this.redraw_req = requestAnimationFrame(() => {
            this.redrawPreviewCanvas();
            this.redraw_req = null;
        });
    }

    if (this.base_image_properties) {
        const baseHeaderAnchor = this.widgets.find(w => w.name === 'header_anchor_1');
        if (baseHeaderAnchor && baseHeaderAnchor.canvas) {
            this.drawHeaderCanvas(baseHeaderAnchor.canvas, 'base_image');
        }
    }

    const activeLayerKeys = Object.keys(this.layer_properties);
    for (const layerName of activeLayerKeys) {
        const layerIndex = parseInt(layerName.split('_')[1]);
        const headerAnchor = this.widgets.find(w => w.name === `header_anchor_${layerIndex + 1}`);
        if (headerAnchor && headerAnchor.canvas) {
            this.drawHeaderCanvas(headerAnchor.canvas, layerName);
        }
    }
    this._resizing = false;
};

nodeType.prototype.onConfigure = function(info) {
    const onConfigureOriginal = nodeType.prototype.__proto__.onConfigure;
    onConfigureOriginal?.apply(this, arguments);
    this.loadedConfig = info;
};

nodeType.prototype.loadStateFromConfig = function(info) {
    if (this.stateLoaded) return;
    if (info.widgets_values) {
        const jsonWidgetIndex = this.widgets.findIndex(w => w.name === "_properties_json");
        if (jsonWidgetIndex > -1 && info.widgets_values[jsonWidgetIndex]) {
            try {
                const props = JSON.parse(info.widgets_values[jsonWidgetIndex]);
                this.base_image_properties = props.base || null;
                this.layer_properties = props.layers || {};

                if (this.toolbar) {
                    this.toolbar.textElements = props.texts || [];
                } else {
                    this.loadedTextData = props.texts || [];
                }
                this.stateLoaded = true;

                setTimeout(() => {
                    this.refreshPreviewsOnly();
                }, 100);
                   this.refreshUI();
                
            } catch (e) {
                console.error("[Layer System] Error loading JSON state", e);
                this.refreshUI();
            }
        }
    } else {
        this.refreshUI();
    }
};
     
nodeType.prototype.refreshPreviewsOnly = async function() {
    const properties_widget = this.widgets.find(w => w.name === "_properties_json");
    if (!properties_widget) return;

    try {
        const response = await fetch("/layersystem/refresh_previews", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ properties_json: properties_widget.value }),
        });

        if (!response.ok) {
            throw new Error(`Server error: ${response.status}`);
        }

        const ui_data = await response.json();
        
        if (ui_data.layer_previews) {
            this.onExecuted({ layer_previews: ui_data.layer_previews });
        }
    } catch (e) {
        console.error("[Layer System] Failed to refresh previews:", e);
    }
};
	 
        const onConnectionsChange = nodeType.prototype.onConnectionsChange;
        nodeType.prototype.onConnectionsChange = function (side, slot, is_connected, link_info, io_slot) {
            onConnectionsChange?.apply(this, arguments);
            if (side === 1) { setTimeout(() => this.refreshUI(), 0); }
        };
        
        nodeType.prototype.redrawPreviewCanvas = function() {
            if (!this.previewCanvas || !this.size || !this.basePreviewImage || !this.basePreviewImage.naturalWidth) {
                if(this.previewCtx) this.previewCtx.clearRect(0, 0, this.previewCanvas.width, this.previewCanvas.height);
                return;
            }
            
            const canvas = this.previewCanvas;
            const ctx = this.previewCtx;
            const baseImg = this.basePreviewImage;
            const availableWidth = this.size[0] - 20; 
            const toolbarWidth = this.toolbar.width;
            const imageAreaWidth = availableWidth - toolbarWidth;
            const aspectRatio = baseImg.naturalHeight / baseImg.naturalWidth;
            const requiredHeight = imageAreaWidth * aspectRatio;
            if (canvas.width !== availableWidth) {
                canvas.width = availableWidth;
            }
            const finalHeight = Math.round(requiredHeight);
            if (canvas.height !== finalHeight) {
                canvas.height = finalHeight;
            }
            
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            const destX = toolbarWidth;
            const destY = 0;
            const destWidth = imageAreaWidth;
            const destHeight = finalHeight;
            ctx.drawImage(baseImg, destX, destY, destWidth, destHeight);
            this.previewCanvasScale = destWidth / baseImg.naturalWidth;
            
            const sortedLayerNames = Object.keys(this.layer_properties).sort((a, b) => parseInt(a.split("_")[1]) - parseInt(b.split("_")[1]));
            
            for (const layerName of sortedLayerNames) {
				
                const props = this.layer_properties[layerName];
                const layerImage = this.loaded_preview_images[layerName];
                const maskName = layerName.replace("layer_", "mask_");
                const maskImage = this.loaded_preview_images[maskName];
                if (!props || !props.enabled || !layerImage || !layerImage.naturalWidth || !layerImage.naturalHeight) {
                    continue;
                }
                ctx.save();
                let imageToDraw = layerImage;
                if (props.brightness !== 0.0 || props.contrast !== 0.0 || props.saturation !== 1.0 || props.color_r !== 1.0 || props.color_g !== 1.0 || props.color_b !== 1.0) {
                    try {
                        const tempCanvas = document.createElement('canvas');
                        tempCanvas.width = layerImage.naturalWidth; tempCanvas.height = layerImage.naturalHeight;
                        const tempCtx = tempCanvas.getContext('2d', { willReadFrequently: true });
                        tempCtx.drawImage(layerImage, 0, 0);
                        const imageData = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height);
                        const data = imageData.data;
                        const brightness = props.brightness, contrastFactor = 1.0 + props.contrast, saturation = props.saturation, color_r = props.color_r, color_g = props.color_g, color_b = props.color_b;
                        for (let i = 0; i < data.length; i += 4) {
                            let r = data[i] / 255.0, g = data[i + 1] / 255.0, b = data[i + 2] / 255.0;
                            if (brightness !== 0.0) { r += brightness; g += brightness; b += brightness; }
                            if (props.contrast !== 0.0) { r = (r - 0.5) * contrastFactor + 0.5; g = (g - 0.5) * contrastFactor + 0.5; b = (b - 0.5) * contrastFactor + 0.5; }
                            if (color_r !== 1.0 || color_g !== 1.0 || color_b !== 1.0) { r *= color_r; g *= color_g; b *= color_b; }
                            if (saturation !== 1.0) { const gray = r * 0.299 + g * 0.587 + b * 0.114; r = gray * (1.0 - saturation) + r * saturation; g = gray * (1.0 - saturation) + g * saturation; b = gray * (1.0 - saturation) + b * saturation; }
                            data[i] = Math.max(0, Math.min(255, r * 255)); data[i + 1] = Math.max(0, Math.min(255, g * 255)); data[i + 2] = Math.max(0, Math.min(255, b * 255));
                        }
                        tempCtx.putImageData(imageData, 0, 0);
                        imageToDraw = tempCanvas;
                    } catch (e) {
                        console.error(`[LayerSystem] ERREUR lors du traitement du calque ${layerName}:`, e);
                        imageToDraw = layerImage;
                    }
                }
                let finalImageToDraw = imageToDraw;
                if (maskImage && maskImage.naturalWidth > 0) {
                    let maskToApply = maskImage;
                    if (props.invert_mask) {
                        const invertedMaskCanvas = document.createElement('canvas');
                        invertedMaskCanvas.width = maskImage.naturalWidth;
                        invertedMaskCanvas.height = maskImage.naturalHeight;
                        const invertedCtx = invertedMaskCanvas.getContext('2d');
                        invertedCtx.filter = 'invert(1)';
                        invertedCtx.drawImage(maskImage, 0, 0);
                        maskToApply = invertedMaskCanvas;
                    }
                    finalImageToDraw = applyMask(imageToDraw, maskToApply);
                }
                let final_sx = 0, final_sy = 0, final_sw = finalImageToDraw.width, final_sh = finalImageToDraw.height;
                let final_dx = destX, final_dy = destY, final_dw = destWidth, final_dh = destHeight;
                
                if (props.resize_mode === 'crop') {
                    final_dw = final_sw * props.scale * this.previewCanvasScale;
                    final_dh = final_sh * props.scale * this.previewCanvasScale;
                    final_dx = destX + (props.offset_x * this.previewCanvasScale) - final_dw/2 + destWidth/2;
                    final_dy = destY + (props.offset_y * this.previewCanvasScale) - final_dh/2 + destHeight/2;
                } else {
                    const layerRatio = final_sw / final_sh;
                    const destContainerRatio = destWidth / destHeight;
                    switch(props.resize_mode) {
                        case 'fit':
                            if (layerRatio > destContainerRatio) { final_dh = final_dw / layerRatio; final_dy += (destHeight - final_dh) / 2; }
                            else { final_dw = final_dh * layerRatio; final_dx += (destWidth - final_dw) / 2; }
                            break;
                        case 'cover':
                            if (layerRatio > destContainerRatio) { 
                                final_sw = final_sh * destContainerRatio; 
                                final_sx = (finalImageToDraw.width - final_sw) / 2; 
                            } else { 
                                final_sh = final_sw / destContainerRatio; 
                                final_sy = (finalImageToDraw.height - final_sh) / 2; 
                            }
                            break;
                        case 'stretch': default: break;
                    }
                }
                
                ctx.globalAlpha = props.opacity;
                ctx.globalCompositeOperation = props.blend_mode === 'normal' ? 'source-over' : props.blend_mode;
                if (props.resize_mode === 'crop') {
                    const centerX = final_dx + final_dw / 2;
                    const centerY = final_dy + final_dh / 2;

                    ctx.save();
                    ctx.translate(centerX, centerY);
                    const angleInRadians = (props.rotation || 0) * Math.PI / 180;
                    ctx.rotate(angleInRadians);
                    ctx.drawImage(finalImageToDraw, final_sx, final_sy, final_sw, final_sh, -final_dw / 2, -final_dh / 2, final_dw, final_dh);
                    if (this.movingLayer === layerName) {
                        ctx.strokeStyle = "red"; 
                        ctx.lineWidth = 2; 
                        ctx.strokeRect(-final_dw / 2, -final_dh / 2, final_dw, final_dh);
                        
                        this.movingLayerBounds = { x: final_dx, y: final_dy, w: final_dw, h: final_dh, center_x: centerX, center_y: centerY };
                        
                        const handleSize = 8;
                        ctx.fillStyle = "white";
                        ctx.strokeStyle = "black";
                        ctx.lineWidth = 1;
                        const corners = [
                            {x: -final_dw/2, y: -final_dh/2}, {x: final_dw/2, y: -final_dh/2},
                            {x: -final_dw/2, y: final_dh/2}, {x: final_dw/2, y: final_dh/2}
                        ];
                        for(const corner of corners) {
                            ctx.fillRect(corner.x - handleSize/2, corner.y - handleSize/2, handleSize, handleSize);
                            ctx.strokeRect(corner.x - handleSize/2, corner.y - handleSize/2, handleSize, handleSize);
                        }
                        
                        const rotHandleOffset = 20;
                        const rotHandleY = -final_dh/2 - rotHandleOffset;
                        
                        ctx.beginPath();
                        ctx.moveTo(0, -final_dh/2);
                        ctx.lineTo(0, rotHandleY);
                        ctx.strokeStyle = "red";
                        ctx.lineWidth = 2;
                        ctx.stroke();
                        ctx.beginPath();
                        ctx.arc(0, rotHandleY, handleSize / 2, 0, 2 * Math.PI);
                        ctx.fillStyle = "white";
                        ctx.fill();
                        ctx.strokeStyle = "black";
                        ctx.lineWidth = 1;
                        ctx.stroke();
                    }
                    
                    ctx.restore(); 
                } else {
                    ctx.drawImage(finalImageToDraw, final_sx, final_sy, final_sw, final_sh, final_dx, final_dy, final_dw, final_dh);
                }
                
                ctx.restore();
            }
            
         if (this.toolbar && this.toolbar.selectedTextObject) {
            const el = this.toolbar.selectedTextObject;
            const metrics = this.getTextPreviewMetrics(el);
            if (metrics) {
                ctx.save();
                ctx.strokeStyle = '#FFD700';
                ctx.lineWidth = 2;
                ctx.setLineDash([6, 3]);
                
                const padding = 5;
                ctx.strokeRect(
                    metrics.x - padding,
                    metrics.y - padding,
                    metrics.width + (padding * 2),
                    metrics.height + (padding * 2)
                );
                
                ctx.restore();
            }
        }
            
            this.toolbar.drawTextElements(ctx);
            this.toolbar.draw(ctx);
        };
        
nodeType.prototype.getTextPreviewMetrics = function(textEl) {
    if (!this.basePreviewImage || !this.previewCanvas || !this.toolbar) { return null; }
    const baseImageWidth = this.basePreviewImage.naturalWidth;
    const previewAreaWidth = this.previewCanvas.width - this.toolbar.width;
    if (baseImageWidth <= 0) return null;
    const inverseRatio = previewAreaWidth / baseImageWidth;
    const previewCenterX = previewAreaWidth / 2;
    const previewCenterY = this.previewCanvas.height / 2;
    const preview_size = textEl.size * inverseRatio;
    const preview_offset_x = textEl.offset_x * inverseRatio;
    const preview_offset_y = textEl.offset_y * inverseRatio;
    const preview_x = this.toolbar.width + previewCenterX + preview_offset_x;
    const preview_y = previewCenterY + preview_offset_y;
    const ctx = this.previewCtx;
    ctx.save();
    ctx.font = `${preview_size}px ${textEl.fontFamily || 'Arial'}`;
    const metrics = ctx.measureText(textEl.text);
    ctx.restore();
    const textHeight = (metrics.fontBoundingBoxAscent || 0) + (metrics.fontBoundingBoxDescent || 0);
    const finalHeight = textHeight > 0 ? textHeight : preview_size;
    return {
        x: preview_x,
        y: preview_y,
        size: preview_size,
        width: metrics.width,
        height: finalHeight -10
    };
};
nodeType.prototype.findTextElementAtPos = function(mouseX, mouseY) {
    if (!this.toolbar || !this.toolbar.textElements.length || !this.previewCanvas || !this.basePreviewImage) {
        return null;
    }
    const ctx = this.previewCtx;
    const baseImageWidth = this.basePreviewImage.naturalWidth;
    const previewAreaWidth = this.previewCanvas.width - this.toolbar.width;
    
    if (baseImageWidth <= 0) return null;
    const inverseRatio = previewAreaWidth / baseImageWidth;
    const previewCenterX = previewAreaWidth / 2;
    const previewCenterY = this.previewCanvas.height / 2;
    ctx.save();
    
    for (let i = this.toolbar.textElements.length - 1; i >= 0; i--) {
        const textEl = this.toolbar.textElements[i];
        const preview_offset_x = textEl.offset_x * inverseRatio;
        const preview_offset_y = textEl.offset_y * inverseRatio;
        const preview_size = textEl.size * inverseRatio;
        const preview_x = this.toolbar.width + previewCenterX + preview_offset_x;
        const preview_y = previewCenterY + preview_offset_y;
        
        ctx.font = `${preview_size}px ${textEl.fontFamily || 'Arial'}`;
        const metrics = ctx.measureText(textEl.text);
        const textWidth = metrics.width;
        const textHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent || preview_size;
        if (mouseX >= preview_x && mouseX <= preview_x + textWidth &&
            mouseY >= preview_y && mouseY <= preview_y + textHeight) 
        {
            ctx.restore();
            return textEl;
        }
    }
    ctx.restore();
    return null;
};
nodeType.prototype.editTextElement = function(textElement) {
    if (this.toolbar.activeTextarea) this.toolbar.activeTextarea.remove();
    const metrics = this.getTextPreviewMetrics(textElement);
    if (!metrics) {
        console.error("[Layer System] Unable to find text position for editing.");
        return;
    }
    const canvasRect = this.previewCanvas.getBoundingClientRect();
    const finalLeft = canvasRect.left + metrics.x;
    const finalTop = canvasRect.top + metrics.y;
    const finalFontSize = metrics.size;
    const textInput = document.createElement("div");
    this.toolbar.activeTextarea = textInput;
    textInput.contentEditable = true;
    textInput.innerText = textElement.text;
    Object.assign(textInput.style, {
        position: 'fixed',
        left: `${finalLeft}px`,
        top: `${finalTop}px`,
        fontFamily: textElement.fontFamily,
        fontSize: `${finalFontSize}px`,
        color: 'white',
        background: 'rgba(20,20,20,0.9)',
        border: '1px solid #FFD700',
        padding: '5px',
        zIndex: '9999',
        minWidth: `${metrics.width}px`,
        whiteSpace: 'pre-wrap'
    });
    document.body.appendChild(textInput);
    textInput.focus();
    document.execCommand('selectAll', false, null);
    textInput.addEventListener('keydown', (evt) => evt.stopPropagation());
    const onFinish = () => {
        const newText = textInput.innerText;
        
        if (newText === "") {
            const index = this.toolbar.textElements.findIndex(el => el.id === textElement.id);
            if (index > -1) this.toolbar.textElements.splice(index, 1);
        } else {
            textElement.text = newText;
        }
        this.updatePropertiesJSON();
        this.redrawPreviewCanvas();
        
        if (textInput.parentElement) textInput.parentElement.removeChild(textInput);
        this.toolbar.activeTextarea = null;
        this.toolbar.hideContextualToolbar();
    };
    textInput.addEventListener('blur', onFinish);
    textInput.addEventListener('keydown', (evt) => {
        evt.stopPropagation();
        if (evt.key === 'Enter' && !evt.shiftKey) {
            evt.preventDefault();
            onFinish();
        }
        if (evt.key === 'Escape') {
            textInput.innerText = textElement.text;
            onFinish();
        }
    });
};
nodeType.prototype.showTextContextMenu = function(clientX, clientY, textElement) {
    const existingMenu = document.getElementById("text-context-menu");
    if (existingMenu) existingMenu.remove();
    
    this.activeTextObject = textElement;
    const menu = document.createElement("div");
    menu.id = "text-context-menu";
    Object.assign(menu.style, {
        position: 'fixed', left: `${clientX}px`, top: `${clientY}px`, backgroundColor: '#333',
        border: '1px solid #555', borderRadius: '4px', padding: '5px', zIndex: '10000',
        display: 'flex', flexDirection: 'column',
    });
    const actionNames = ['Modifier le texte', 'Déplacer', 'Redimensionner', 'Pivoter', 'Supprimer'];
    
    actionNames.forEach(actionName => {
        const button = document.createElement("button");
        button.innerText = actionName;
        Object.assign(button.style, {
            backgroundColor: '#444', color: 'white', border: '1px solid #666',
            padding: '8px 12px', margin: '2px', textAlign: 'left', cursor: 'pointer'
        });
        button.onmouseover = () => button.style.backgroundColor = '#555';
        button.onmouseout = () => button.style.backgroundColor = '#444';
        
        button.onclick = (e) => {
            menu.remove();
            const currentTextElement = this.toolbar.textElements.find(el => el.id === textElement.id);
            if (!currentTextElement) {
                console.log("L'élément texte a été supprimé, action annulée.");
                return;
            }
            switch (actionName) {
                case 'Modifier le texte':
                    this.editTextElement(currentTextElement);
                    break;
                case 'Déplacer':
                    this.textActionMode = 'moving';
                    this.activeTextObject = currentTextElement;
                    this.redrawPreviewCanvas();
                    break;
                case 'Supprimer':
                    const index = this.toolbar.textElements.findIndex(el => el.id === currentTextElement.id);
                    if (index > -1) {
                        this.toolbar.textElements.splice(index, 1);
                        this.updatePropertiesJSON();
                        this.redrawPreviewCanvas();
                    }
                    break;
            }
        };
        menu.appendChild(button);
    });
    document.body.appendChild(menu);
    const closeMenuHandler = (e) => {
        if (!menu.contains(e.target)) {
            menu.remove();
            document.removeEventListener('mousedown', closeMenuHandler, true);
        }
    };
    
    setTimeout(() => document.addEventListener('mousedown', closeMenuHandler, true), 0);
};
nodeType.prototype.onCanvasMouseDown = function(e) {
	

    const mouseX = e.offsetX;
    const mouseY = e.offsetY;
    if (this.toolbar.isClickOnToolbar(mouseX, mouseY)) {
        this.toolbar.handleClick(e, mouseX, mouseY);
        return;
    }
	

    if (this.toolbar.activeTool) {
        this.toolbar.handleCanvasClick(e);
        return;
    }
    if (!this.movingLayer) {
        return;
    }
    const props = this.layer_properties[this.movingLayer];
    if (!props) return;
    const handle = this.getHandleAtPos(e);
    if (handle && handle !== 'rotate') {
        this.interactionMode = "scaling_" + handle;
        this.dragStart = { x: e.clientX, y: e.clientY };
        this.initialScale = props.scale;
        this.initialOffsets = { x: props.offset_x, y: props.offset_y };
        this.initialBounds = { ...this.movingLayerBounds };
        this.layerAspectRatio = this.initialBounds.w / this.initialBounds.h;
} else if (handle === 'rotate') {
    this.interactionMode = "rotating";
    const props = this.layer_properties[this.movingLayer];
    const mouseX = e.offsetX;
    const mouseY = e.offsetY;
    const centerX = this.movingLayerBounds.x + this.movingLayerBounds.w / 2;
    const centerY = this.movingLayerBounds.y + this.movingLayerBounds.h / 2;
    this.dragStartAngle = Math.atan2(mouseY - centerY, mouseX - centerX);
    this.initialRotation = props.rotation || 0;
} else {
        this.interactionMode = "moving";
        this.isDragging = true;
        this.dragStart = { x: e.clientX, y: e.clientY };
        this.initialOffsets = { x: props.offset_x, y: props.offset_y };
    }
    
    e.preventDefault();
    e.stopPropagation();
};
nodeType.prototype.getHandleAtPos = function(e) {
    if (!this.movingLayer || !this.movingLayerBounds || !this.previewCanvas) return null;
    
    const mouseX = e.offsetX;
    const mouseY = e.offsetY;
    const handleSize = 12;
    const bounds = this.movingLayerBounds;
    
    const props = this.layer_properties[this.movingLayer];
    const angleInRadians = (props.rotation || 0) * Math.PI / 180;
    const centerX = bounds.x + bounds.w / 2;
    const centerY = bounds.y + bounds.h / 2;
    const cos = Math.cos(-angleInRadians);
    const sin = Math.sin(-angleInRadians);
    const dx = mouseX - centerX;
    const dy = mouseY - centerY;
    const rotatedMouseX = dx * cos - dy * sin + centerX;
    const rotatedMouseY = dx * sin + dy * cos + centerY;
    
    const rotHandleSize = 16;
    const rotHandleX_unrotated = bounds.x + bounds.w / 2;
    const rotHandleY_unrotated = bounds.y - 20;
    
    if (rotatedMouseX >= rotHandleX_unrotated - rotHandleSize / 2 && rotatedMouseX <= rotHandleX_unrotated + rotHandleSize / 2 &&
        rotatedMouseY >= rotHandleY_unrotated - rotHandleSize / 2 && rotatedMouseY <= rotHandleY_unrotated + rotHandleSize / 2) {
        return "rotate";
    }
    const corners = {
        tl: { x: bounds.x, y: bounds.y },
        tr: { x: bounds.x + bounds.w, y: bounds.y },
        bl: { x: bounds.x, y: bounds.y + bounds.h },
        br: { x: bounds.x + bounds.w, y: bounds.y + bounds.h }
    };
    for (const key in corners) {
        const corner = corners[key];
        const handleX = corner.x;
        const handleY = corner.y;
        if (rotatedMouseX >= handleX - handleSize/2 && rotatedMouseX <= handleX + handleSize/2 &&
            rotatedMouseY >= handleY - handleSize/2 && rotatedMouseY <= handleY + handleSize/2) {
            return key;
        }
    }
    return null;
};
        
        nodeType.prototype.onCanvasMouseMove = function(e) {
        if (this.textActionMode === 'moving' && this.activeTextObject) {
 if (this.isTextDragging && this.activeTextObject) {
        this.activeTextObject.x = e.offsetX + this.dragOffset.x;
        this.activeTextObject.y = e.offsetY + this.dragOffset.y;
        this.redrawPreviewCanvas();
        return;
    }
        }
            if (this.interactionMode.startsWith("scaling_")) {
                if (this.interactionMode === "scaling_tl" || this.interactionMode === "scaling_br") {
                    this.previewCanvas.style.cursor = "nwse-resize";
                } else {
                    this.previewCanvas.style.cursor = "nesw-resize";
                }
            } else if (this.interactionMode === "moving") {
                this.previewCanvas.style.cursor = "move";
            } else if (this.interactionMode === "rotating") {
                this.previewCanvas.style.cursor = rotateCursorStyle;
            } else {
                if (this.movingLayer) {
                    const rect = this.previewCanvas.getBoundingClientRect();
                    const mouseX = e.clientX - rect.left;
                    const mouseY = e.clientY - rect.top;
                    const handle = this.getHandleAtPos(e, mouseX, mouseY);
                    if (handle === "tl" || handle === "br") { this.previewCanvas.style.cursor = "nwse-resize"; }
                    else if (handle === "tr" || handle === "bl") { this.previewCanvas.style.cursor = "nesw-resize"; }
                    else if (handle === "rotate") { this.previewCanvas.style.cursor = rotateCursorStyle; }
                    else { this.previewCanvas.style.cursor = "move"; }
                } else {
                     this.previewCanvas.style.cursor = "default";
                }
            }
        
            if (this.interactionMode === "none") return;
            
            const props = this.layer_properties[this.movingLayer];
            if (!props) return;
            const dx = e.clientX - this.dragStart.x;
            const dy = e.clientY - this.dragStart.y;
            if (this.interactionMode === "moving") {
                if (!this.isDragging) return;
                const baseImg = this.basePreviewImage;
                if (!baseImg) return;
                const scaleFactor = (baseImg.naturalWidth / this.movingLayerBounds.w) * props.scale;
                props.offset_x = Math.round(this.initialOffsets.x + (dx * scaleFactor));
                props.offset_y = Math.round(this.initialOffsets.y + (dy * scaleFactor));
            } else if (this.interactionMode.startsWith("scaling_")) {
                const angleInRadians = (props.rotation || 0) * Math.PI / 180;
                const cos = Math.cos(-angleInRadians);
                const sin = Math.sin(-angleInRadians);
                const local_dx = dx * cos - dy * sin;
                let newWidth;
                
                if (this.interactionMode === 'scaling_br' || this.interactionMode === 'scaling_tr') {
                    newWidth = this.initialBounds.w + local_dx;
                } else if (this.interactionMode === 'scaling_bl' || this.interactionMode === 'scaling_tl') {
                    newWidth = this.initialBounds.w - local_dx;
                }
                
                if (newWidth < 10) { newWidth = 10; }
                
                const newScale = this.initialScale * (newWidth / this.initialBounds.w);
                props.scale = newScale;
 } else if (this.interactionMode === "rotating") {
    const mouseX = e.offsetX;
    const mouseY = e.offsetY;
    const centerX = this.movingLayerBounds.x + this.movingLayerBounds.w / 2;
    const centerY = this.movingLayerBounds.y + this.movingLayerBounds.h / 2;
    const currentMouseAngle = Math.atan2(mouseY - centerY, mouseX - centerX);
    const angleDifference = currentMouseAngle - this.dragStartAngle;
    const props = this.layer_properties[this.movingLayer];
    props.rotation = this.initialRotation + (angleDifference * 180 / Math.PI);
    const rotationWidget = this.widgets.find(w => w.name === `rotation_${this.movingLayer}`);
    if(rotationWidget) rotationWidget.value = props.rotation;
    
    this.redrawPreviewCanvas();
}
            const scaleWidget = this.widgets.find(w => w.name === `scale_${this.movingLayer}`);
            if(scaleWidget) scaleWidget.value = props.scale;
            const offsetXWidget = this.widgets.find(w => w.name === `offset_x_${this.movingLayer}`);
            if(offsetXWidget) offsetXWidget.value = props.offset_x;
            const offsetYWidget = this.widgets.find(w => w.name === `offset_y_${this.movingLayer}`);
            if(offsetYWidget) offsetYWidget.value = props.offset_y;
            const rotationWidget = this.widgets.find(w => w.name === `rotation_${this.movingLayer}`);
            if(rotationWidget) rotationWidget.value = props.rotation;
            
            this.graph.setDirtyCanvas(true, true);
            this.redrawPreviewCanvas();
        };
      nodeType.prototype.onCanvasMouseUp = function(e) {
      if (this.isTextDragging) {
        this.updatePropertiesJSON();
        this.textActionMode = 'none';
        this.activeTextObject = null;
        this.isTextDragging = false;
        this.redrawPreviewCanvas();
    }
            if (this.interactionMode !== "none") {
                this.isDragging = false;
                this.interactionMode = "none";
                this.updatePropertiesJSON();
            }
        };
        nodeType.prototype.onCanvasMouseLeave = function(e) {
            if (this.previewCanvas) {
                this.previewCanvas.style.cursor = "default";
            }
            if (this.interactionMode !== "none") {
                this.isDragging = false;
                this.interactionMode = "none";
                this.updatePropertiesJSON();
            }
        };
        
nodeType.prototype.initializeHeaderCanvases = function() {
    for (let i = 1; i <= MAX_LAYERS; i++) {
        const anchor = this.widgets.find(w => w.name === `header_anchor_${i}`);
        if (!anchor || !anchor.inputEl || anchor.canvas) continue;
        const canvas = document.createElement("canvas");
        anchor.canvas = canvas;
        const container = anchor.inputEl.parentElement;
        anchor.inputEl.style.display = "none";
        container.appendChild(canvas);
        container.style.padding = "0px";
        container.style.margin = "0px";
        
        canvas.addEventListener("mousedown", (e) => {
        if (this.toolbar?.activeTool === 'mask_painter' && this.toolbar?.maskPainterManager) {
            this.toolbar.maskPainterManager.switchLayer();
        }
            const layerName = e.currentTarget.dataset.layerName;
            if (!layerName) {
                return;
            }
    if (layerName === 'base_image') {
        const bounds = this.base_image_properties?.replace_icon_bounds;
        if (bounds && e.offsetX >= bounds.x && e.offsetX <= bounds.x + bounds.size &&
            e.offsetY >= bounds.y && e.offsetY <= bounds.y + bounds.size) {
            this.handleBaseImageReplace();
        }
        return;
    }
            const props = this.layer_properties[layerName];
            if (!props) return;
            
            const layer_index = parseInt(layerName.split("_")[1]);
            const x = e.offsetX;
            const y = e.offsetY;
            if (props.trash_icon_bounds) {
                const bounds = props.trash_icon_bounds;
                if (x >= bounds.x && x <= bounds.x + bounds.size && y >= bounds.y && y <= bounds.y + bounds.size) {
                    if (confirm(`Are you sure you want to delete Layer ${layer_index}?`)) {
                        this.deleteLayer(layerName);
                    }
                    return;
                }
            }
                    
                    const widgetWidth = this.size[0] - 20;
                    const topPadding = 4;
                    const padding = 8;
                    const moveIconSize = 36;
                    const arrowSize = 24;
                    const lockSize = 36;
                    const thumbSize = 48;
                    const eyeSize = 36;
                    const allocatedHeight = 64;
                    const eyeX = widgetWidth - eyeSize - padding;
                    const thumbX = eyeX - thumbSize - padding;
                    const lockX = thumbX - lockSize - padding;
                    const arrowBlockX = lockX - arrowSize - padding;
                    const moveIconX = arrowBlockX - moveIconSize - (padding * 2);
                    const eyeY = topPadding + (thumbSize - eyeSize) / 2;
                    const lockY = topPadding + (thumbSize - lockSize) / 2;
                    const arrowUpY = topPadding + (thumbSize / 2 - arrowSize) + 4;
                    const arrowDownY = topPadding + (thumbSize / 2) - 4;
                    const moveIconY = topPadding + (thumbSize - moveIconSize) / 2;
                    const isInEye = x >= eyeX && x <= eyeX + eyeSize && y >= eyeY && y <= eyeY + eyeSize;
                    const isInLock = x >= lockX && x <= lockX + lockSize && y >= lockY && y <= lockY + lockSize;
                    const isInUpArrow = x >= arrowBlockX && x <= arrowBlockX + arrowSize && y >= arrowUpY && y <= arrowUpY + arrowSize;
                    const isInDownArrow = x >= arrowBlockX && x <= arrowBlockX + arrowSize && y >= arrowDownY && y <= arrowDownY + arrowSize;
                    const isInMoveIcon = x >= moveIconX && x <= moveIconX + moveIconSize && y >= moveIconY && y <= moveIconY + moveIconSize;
                    if (isInLock) {
                        this.accordionMode = !this.accordionMode;
                        this.refreshUI();
                    } else if (isInEye) {
                        props.enabled = !props.enabled;
                        this.redrawPreviewCanvas();
                        this.drawHeaderCanvas(canvas, layerName);
                    } else if (isInUpArrow) {
                        if (layer_index > 1) { this.moveLayer(layer_index, "up"); }
                    } else if (isInDownArrow) {
                        const total_layers = Object.keys(this.layer_properties).length;
                        if (layer_index < total_layers) { this.moveLayer(layer_index, "down"); }
                    } else if (isInMoveIcon && props.resize_mode === 'crop' && !(this.toolbar && (this.toolbar.activeTool || this.toolbar.selectionSubMenu?.style.display === 'flex'))) {
                        if (this.movingLayer === layerName) {
                            this.movingLayer = null;
                        } else {
                            this.movingLayer = layerName;
                        }
                        this.refreshUI();
                    } else {
                        const isExpanding = props.layer_collapsed;
                        if (isExpanding) {
                            if (this.accordionMode) {
                                for (const otherLayerName in this.layer_properties) {
                                    if (otherLayerName !== layerName) {
                                        this.layer_properties[otherLayerName].layer_collapsed = true;
                                    }
                                }
                            }
                            props.layer_collapsed = false;
                        } else {
                            let expanded_count = 0;
                            for (const key in this.layer_properties) {
                                if (!this.layer_properties[key].layer_collapsed) {
                                    expanded_count++;
                                }
                            }
                            if (expanded_count > 1) {
                                props.layer_collapsed = true;
                            }
                        }
 
                        if (this.toolbar.activeTool === 'brush') {
                            this.toolbar.brushManager.show();
                        }
 
                        this.refreshUI();
                    }
                    this.updatePropertiesJSON();
                });
            }
        };
nodeType.prototype.drawHeaderCanvas = function(canvas, layerName) {
    if (!canvas) return;

    const ctx = canvas.getContext("2d");
    const widgetWidth = this.size[0] - 20;
    const allocatedHeight = 64;
    const ratio = window.devicePixelRatio || 1;
    canvas.style.width = widgetWidth + "px";
    canvas.style.height = allocatedHeight + "px";
    canvas.width = widgetWidth * ratio;
    canvas.height = allocatedHeight * ratio;
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.scale(ratio, ratio);
    ctx.clearRect(0, 0, widgetWidth, allocatedHeight);
    ctx.strokeStyle = "#555555";
    ctx.lineWidth = 2;
    ctx.strokeRect(1, 1, widgetWidth - 2, allocatedHeight - 10);
    const isBaseLayer = layerName === 'base_image';
    let layerImage = null;
    if (this.loaded_preview_images) {
         const imageKey = isBaseLayer ? 'base_image' : layerName;
        layerImage = this.loaded_preview_images[imageKey];
    }

    const topPadding = 4;
    const padding = 8;
    const moveIconSize = 36;
    const arrowSize = 24;
    const lockSize = 36;
    const thumbSize = 48;
    const eyeSize = 36;
    
    const eyeX = widgetWidth - eyeSize - padding;
    const thumbX = eyeX - thumbSize - padding;
    const lockX = thumbX - lockSize - padding;
    const arrowBlockX = lockX - arrowSize - padding;
    const moveIconX = arrowBlockX - moveIconSize - (padding * 2);
    const textY = topPadding + thumbSize / 2;
    const thumbY = topPadding;
    
    if (isBaseLayer) {
        canvas.dataset.layerName = 'base_image';
        ctx.fillStyle = '#FFFFFF'; 
        ctx.textAlign = "left";
        ctx.textBaseline = "middle";
        ctx.font = "14px Arial";
        ctx.fillText(`▶ Base Image`, 5, textY);
    const replaceIconSize = 36;
    const replaceIconX = thumbX - replaceIconSize - padding;
    const replaceIconY = topPadding + (thumbSize - replaceIconSize) / 2;
    if (this.base_image_properties) {
        this.base_image_properties.replace_icon_bounds = { x: replaceIconX, y: replaceIconY, size: replaceIconSize };
    }
    ctx.save();
    ctx.translate(replaceIconX, replaceIconY);
    ctx.scale(replaceIconSize / 24, replaceIconSize / 24);
    ctx.strokeStyle = "#CCCCCC";
    ctx.lineWidth = 2;
    ctx.stroke(replaceIconPath);
    ctx.restore();
        ctx.fillStyle = "#353535";
        ctx.fillRect(thumbX, thumbY, thumbSize, thumbSize);
        if (layerImage && layerImage.naturalWidth > 0) {
            const imgRatio = layerImage.naturalWidth / layerImage.naturalHeight;
            let destWidth, destHeight, destX, destY;
            if (imgRatio > 1) { destWidth = thumbSize; destHeight = thumbSize / imgRatio; }
            else { destHeight = thumbSize; destWidth = thumbSize * imgRatio; }
            destX = thumbX + (thumbSize - destWidth) / 2;
            destY = thumbY + (thumbSize - destHeight) / 2;
            ctx.drawImage(layerImage, 0, 0, layerImage.naturalWidth, layerImage.naturalHeight, destX, destY, destWidth, destHeight);
        }
                
        return; 
    }

    const props = this.layer_properties[layerName];
    if (!props) return;
canvas.dataset.layerName = layerName;
    const layer_index = parseInt(layerName.split("_")[1]);
    const total_layers = Object.keys(this.layer_properties).length;
    
    ctx.fillStyle = !props.layer_collapsed ? "#4CAF50" : LiteGraph.WIDGET_TEXT_COLOR;
    ctx.textAlign = "left";
    ctx.textBaseline = "middle";
    ctx.font = "14px Arial";
    const triangle = props.layer_collapsed ? "▶" : "▼";
    const textMaxWidth = moveIconX - (padding * 3) - 24;
    ctx.fillText(`${triangle} Layer ${layer_index}`, 5, textY, textMaxWidth);
    const trashSize = 36;
    const trashX = moveIconX - trashSize - padding;
    const trashY = topPadding + (thumbSize - trashSize) / 2;
    props.trash_icon_bounds = { x: trashX, y: trashY, size: trashSize };
    ctx.save();
    ctx.translate(trashX, trashY);
    ctx.scale(trashSize / 24, trashSize / 24);
    ctx.strokeStyle = "#F44336";
    ctx.lineWidth = 2;
    ctx.stroke(trashIconPath);
    ctx.restore();
    
    const moveIconY = topPadding + (thumbSize - moveIconSize) / 2;
    const isMoving = this.movingLayer === layerName;
	const isMoveDisabled = props.resize_mode !== 'crop' || 
          (this.toolbar && (this.toolbar.activeTool || this.toolbar.selectionSubMenu?.style.display === 'flex'));
    ctx.save();
    ctx.translate(moveIconX, moveIconY);
    ctx.scale(moveIconSize / 24, moveIconSize / 24);
	
	ctx.strokeStyle = isMoving ? "#F44" : (isMoveDisabled ? "#555" : LiteGraph.WIDGET_TEXT_COLOR);
    ctx.lineWidth = 2;
    ctx.stroke(moveIconPath);
    ctx.restore();

    const isFirst = layer_index <= 1;
    const isLast = layer_index >= total_layers;
    const arrowUpY = topPadding + (thumbSize / 2 - arrowSize) + 4;
    const arrowDownY = topPadding + (thumbSize / 2) - 4;
    ctx.save();
    ctx.translate(arrowBlockX, arrowUpY);
    ctx.strokeStyle = isFirst ? "#555" : LiteGraph.WIDGET_TEXT_COLOR;
    ctx.lineWidth = 3;
    ctx.stroke(arrowUpPath);
    ctx.restore();
    ctx.save();
    ctx.translate(arrowBlockX, arrowDownY);
    ctx.strokeStyle = isLast ? "#555" : LiteGraph.WIDGET_TEXT_COLOR;
    ctx.lineWidth = 3;
    ctx.stroke(arrowDownPath);
    ctx.restore();

    const lockY = topPadding + (thumbSize - lockSize) / 2;
    ctx.save();
    ctx.translate(lockX, lockY);
    ctx.scale(lockSize / 24, lockSize / 24);
    ctx.strokeStyle = this.accordionMode ? "#F44" : "#6C6";
    ctx.lineWidth = 2;
    ctx.stroke(this.accordionMode ? lockIconPath : unlockIconPath);
    ctx.restore();

    ctx.fillStyle = "#353535";
    ctx.fillRect(thumbX, thumbY, thumbSize, thumbSize);
    if (layerImage && layerImage.naturalWidth > 0) {
        const imgRatio = layerImage.naturalWidth / layerImage.naturalHeight;
        let destWidth, destHeight, destX, destY;
        if (imgRatio > 1) { destWidth = thumbSize; destHeight = thumbSize / imgRatio; } 
        else { destHeight = thumbSize; destWidth = thumbSize * imgRatio; }
        destX = thumbX + (thumbSize - destWidth) / 2;
        destY = thumbY + (thumbSize - destHeight) / 2;
        ctx.drawImage(layerImage, 0, 0, layerImage.naturalWidth, layerImage.naturalHeight, destX, destY, destWidth, destHeight);
    }
    
    const eyeY = topPadding + (thumbSize - eyeSize) / 2;
    ctx.save();
    ctx.translate(eyeX, eyeY);
    ctx.scale(eyeSize / 24, eyeSize / 24);
    ctx.strokeStyle = props.enabled ? "#4CAF50" : "#F44";
    ctx.lineWidth = 1.5;
    ctx.stroke(eyeIconPath);
    if (!props.enabled) { ctx.stroke(eyeSlashPath); }
    ctx.restore();
    };
    
nodeType.prototype.handleBaseImageReplace = function() {
    const fileInput = document.createElement('input');
    fileInput.type = 'file';
    fileInput.accept = 'image/jpeg,image/png,image/webp';
    fileInput.style.display = 'none';
    fileInput.onchange = async (e) => {
        if (!e.target.files.length) { 
            document.body.removeChild(fileInput); 
            return; 
        }
        const originalFile = e.target.files[0];
        try {
            const staticFilename = "layersystem_base.png";
            const newFile = new File([originalFile], staticFilename, { type: originalFile.type });
            const formData = new FormData();
            formData.append('image', newFile);
            formData.append('overwrite', 'true');
            formData.append('type', 'input');
            
            const response = await fetch('/upload/image', { method: 'POST', body: formData });
            const data = await response.json();
            
            this.base_image_properties = { filename: data.name, details: data };
            this.updatePropertiesJSON();
            app.queuePrompt();
        } catch (error) {
            console.error("[Layer System] Error replacing base image:", error);
        } finally {
            document.body.removeChild(fileInput);
        }
    };
    document.body.appendChild(fileInput);
    fileInput.click();
};
        
        nodeType.prototype.updateLayerVisibility = function(layerName) {
            const props = this.layer_properties[layerName];
            if (!props) return;
            const isLayerCollapsed = props.layer_collapsed;
            const isColorCollapsed = props.color_section_collapsed;
            const showTransformForCrop = props.resize_mode === 'crop';
            const allWidgets = this.widgets.filter(w => 
                (w.name && typeof w.name === 'string' && w.name.endsWith(`_${layerName}`)) || 
                (w.value && typeof w.value === 'string' && w.value.endsWith(`_${layerName}`))
            );
            
            for(const w of allWidgets) {
                if (w.name.startsWith(`header_anchor_`)) continue;
                let isHidden = isLayerCollapsed;
                if (w.name.startsWith("spacer_for_")) {
                    isHidden = false;
                } else if (w.name === `toggle_color_${layerName}`) {
                } else if (["brightness", "contrast", "saturation", "color_r", "color_g", "color_b"].some(p => w.name.startsWith(p))) {
                    isHidden = isLayerCollapsed || isColorCollapsed;
                } else if (["scale", "offset_x", "offset_y", "rotation"].some(p => w.name.startsWith(p))) {
                    isHidden = isLayerCollapsed || !showTransformForCrop;
                }
                
                w.hidden = isHidden;
                if (!w.originalComputeSize) w.originalComputeSize = w.computeSize;
                w.computeSize = isHidden ? () => [0, -4] : w.originalComputeSize;
            }
            
            resizeHeight.call(this);
        };
        
nodeType.prototype.refreshUI = function() {
    this.updateLayerWidgets();
    const activeLayerKeys = Object.keys(this.layer_properties);
    const activeLayers = new Set(activeLayerKeys);
    
    const baseAnchor = this.widgets.find(w => w.name === `header_anchor_1`);
    if (baseAnchor) {
        if (this.base_image_properties) {
            baseAnchor.hidden = false;
            baseAnchor.computeSize = (width) => [width, 64];
            if (baseAnchor.canvas) {
                this.drawHeaderCanvas(baseAnchor.canvas, 'base_image');
            }
        } else {
            baseAnchor.hidden = true;
            baseAnchor.computeSize = () => [0, -4];
        }
    }

    for (let i = 2; i <= MAX_LAYERS; i++) {
        const layerName = `layer_${i - 1}`;
        const anchor = this.widgets.find(w => w.name === `header_anchor_${i}`);
        if (!anchor) continue;
        if (activeLayers.has(layerName)) {
            anchor.hidden = false;
            anchor.computeSize = (width) => [width, 64];
            if (anchor.canvas) {
                this.drawHeaderCanvas(anchor.canvas, layerName);
            }
            this.updateLayerVisibility(layerName);
        } else {
            anchor.hidden = true;
            anchor.computeSize = () => [0, -4];
        }
    }

    if (!this.base_image_properties && activeLayerKeys.length === 1) {
        const layerName = activeLayerKeys[0];
        if (this.layer_properties[layerName]) {
            this.layer_properties[layerName].layer_collapsed = false;
            this.updateLayerVisibility(layerName);
        }
    }

    if (this.toolbar) {
        if (this.toolbar.activeTool === 'mask') {
            this.toolbar.maskManager.show();
        } else {
            this.toolbar.maskManager.hide();
        }
    }
    
    this.updatePropertiesJSON();
    resizeHeight.call(this);
};
        
nodeType.prototype.moveLayer = function(layer_index, direction) {
    let layers_array = Object.entries(this.layer_properties).map(([name, props]) => {
        const maskName = name.replace('layer_', 'mask_');
        return {
            name,
            props,
            preview_img: this.loaded_preview_images ? this.loaded_preview_images[name] : null,
            preview_data: this.preview_data ? this.preview_data[name] : null,
            mask_img: this.loaded_preview_images ? this.loaded_preview_images[maskName] : null,
            mask_data: this.preview_data ? this.preview_data[maskName] : null
        };
    });

    const fromIndex = layers_array.findIndex(l => l.name === `layer_${layer_index}`);
    if (fromIndex === -1) return;

    const toIndex = direction === "up" ? fromIndex - 1 : fromIndex + 1;
    const element = layers_array.splice(fromIndex, 1)[0];
    layers_array.splice(toIndex, 0, element);
    this.layer_properties = {};
    const old_loaded_preview_images = this.loaded_preview_images || {};
    const old_preview_data = this.preview_data || {};
    this.loaded_preview_images = { base_image: old_loaded_preview_images['base_image'] };
    this.preview_data = { base_image: old_preview_data['base_image'] };
    layers_array.forEach((layer, index) => {
        const newLayerName = `layer_${index + 1}`;
        const newMaskName = `mask_${index + 1}`;
        this.layer_properties[newLayerName] = layer.props;
        if (layer.preview_img) this.loaded_preview_images[newLayerName] = layer.preview_img;
        if (layer.preview_data) this.preview_data[newLayerName] = layer.preview_data;
        if (layer.mask_img) this.loaded_preview_images[newMaskName] = layer.mask_img;
        if (layer.mask_data) this.preview_data[newMaskName] = layer.mask_data;
        if (this.movingLayer === layer.name) {
            this.movingLayer = newLayerName;
        }
    });
    this.updatePropertiesJSON();
    this.refreshUI();
    this.redrawPreviewCanvas();
};
nodeType.prototype.addLayerWidgets = function(layer_name) {
    if (!this.layer_properties[layer_name]) {
        this.layer_properties[layer_name] = {
            blend_mode: "normal", opacity: 1.0, enabled: true, resize_mode: "crop", scale: 1.0, offset_x: 0, offset_y: 0,
            rotation: 0.0,
            brightness: 0.0, contrast: 0.0, color_r: 1.0, color_g: 1.0, color_b: 1.0, saturation: 1.0, 
            invert_mask: false, color_section_collapsed: true, layer_collapsed: true,
            internal_mask_filename: null,
            internal_mask_details: null,
        };
    }
    const props = this.layer_properties[layer_name];
    const allWidgets = [];
    const topSpacer = { name: `top_spacer_for_${layer_name}`, type: "CUSTOM_SPACER", draw: () => {}, computeSize: () => [0, 10] };
    this.widgets.push(topSpacer);
    allWidgets.push(topSpacer);
    const redrawCallback = (prop, v) => { 
        props[prop] = v; 
        this.updatePropertiesJSON(); 
        this.redrawPreviewCanvas(); 
        this.graph.setDirtyCanvas(true, true);
    };
    
    allWidgets.push(this.addWidget("combo", `blend_mode_${layer_name}`, props.blend_mode, (v) => { props.blend_mode = v; this.updatePropertiesJSON(); this.redrawPreviewCanvas(); }, {values: BLEND_MODES}));
    allWidgets.push(this.addWidget("number", `opacity_${layer_name}`, props.opacity, (v) => { props.opacity = v; this.updatePropertiesJSON(); this.redrawPreviewCanvas(); }, {min: 0.0, max: 1.0, step: 0.1, precision: 2}));
    const colorToggle = this.addWidget("toggle", `toggle_color_${layer_name}`, !props.color_section_collapsed, (v) => {
        props.color_section_collapsed = !v; this.refreshUI(); this.updatePropertiesJSON();
    }, { on: "▼ Color Adjust", off: "▶ Color Adjust" });
    allWidgets.push(colorToggle);
    
    allWidgets.push(this.addWidget("number", `brightness_${layer_name}`, props.brightness, (v) => redrawCallback('brightness', v), {min: -1.0, max: 1.0, step: 0.1, precision: 2 }));
    allWidgets.push(this.addWidget("number", `contrast_${layer_name}`, props.contrast, (v) => redrawCallback('contrast', v), {min: -1.0, max: 1.0, step: 0.1, precision: 2 }));
    allWidgets.push(this.addWidget("number", `saturation_${layer_name}`, props.saturation, (v) => redrawCallback('saturation', v), {min: 0.0, max: 2.0, step: 0.1, precision: 2 }));
    allWidgets.push(this.addWidget("number", `color_r_${layer_name}`, props.color_r, (v) => redrawCallback('color_r', v), {min: 0.0, max: 2.0, step: 0.1, precision: 2 }));
    allWidgets.push(this.addWidget("number", `color_g_${layer_name}`, props.color_g, (v) => redrawCallback('color_g', v), {min: 0.0, max: 2.0, step: 0.1, precision: 2 }));
    allWidgets.push(this.addWidget("number", `color_b_${layer_name}`, props.color_b, (v) => redrawCallback('color_b', v), {min: 0.0, max: 2.0, step: 0.1, precision: 2 }));
    allWidgets.push(this.addWidget("toggle", `invert_mask_${layer_name}`, !!props.invert_mask, (v) => { 
        props.invert_mask = v; this.updatePropertiesJSON(); this.redrawPreviewCanvas();
    }));
    const resizeModeWidget = this.addWidget("combo", `resize_mode_${layer_name}`, props.resize_mode, (v) => {
        props.resize_mode = v; if (v !== 'crop' && this.movingLayer === layer_name) { this.movingLayer = null; }
        this.refreshUI();        
        this.updatePropertiesJSON(); this.redrawPreviewCanvas();
    }, { values: RESIZE_MODES });
    allWidgets.push(resizeModeWidget);
    allWidgets.push(this.addWidget("number", `scale_${layer_name}`, props.scale, (v) => redrawCallback('scale', v), {min: 0.01, max: 10.0, step: 0.1, precision: 2 }));
    allWidgets.push(this.addWidget("number", `offset_x_${layer_name}`, props.offset_x, (v) => redrawCallback('offset_x', v), {min: -8192, max: 8192, step: 1 }));
    allWidgets.push(this.addWidget("number", `offset_y_${layer_name}`, props.offset_y, (v) => redrawCallback('offset_y', v), {min: -8192, max: 8192, step: 1 }));
    allWidgets.push(this.addWidget("number", `rotation_${layer_name}`, props.rotation, (v) => redrawCallback('rotation', v), {min: -360.0, max: 360.0, step: 1, precision: 1 }));
    const bottomSpacer = { name: `bottom_spacer_for_${layer_name}`, type: "CUSTOM_SPACER", draw: () => {}, computeSize: () => [0, 10] };
    this.widgets.push(bottomSpacer);
    allWidgets.push(bottomSpacer);
    for (const w of allWidgets) { 
        if (!w.originalComputeSize) w.originalComputeSize = w.computeSize;
    }
};
        
nodeType.prototype.updateLayerWidgets = function() {
    this.widgets = this.widgets.filter(w => 
        w.name.includes("_anchor") || 
        w.name === "_properties_json" ||
        w.name === "Add Image" ||
        w.name === "global_top_spacer"
    );
    
    const activeLayerKeys = Object.keys(this.layer_properties);
    activeLayerKeys.sort((a, b) => parseInt(a.split("_")[1]) - parseInt(b.split("_")[1]));
    
    for (const layerName of activeLayerKeys) {
        this.addLayerWidgets(layerName);
    }
};

nodeType.prototype.getActiveLayer = function() {
    if (!this.layer_properties) return null;
    const openLayerName = Object.keys(this.layer_properties).find(name => this.layer_properties[name]?.layer_collapsed === false);
    if (openLayerName) {
        const layerIndex = parseInt(openLayerName.split("_")[1]);
        const displayIndex = this.layer_order ? this.layer_order.indexOf(openLayerName) + 1 : layerIndex;
        return { name: openLayerName, index: layerIndex, displayIndex: displayIndex };
    }
    return null;
};

nodeType.prototype.handleDisconnectedInputs = function() {
    const connected_layer_names = new Set(this.inputs.filter(i => i.name.startsWith("layer_") && i.link !== null).map(i => i.name));
    const inputs_to_remove = [];
    const props_to_remove = [];
    for (const key in this.layer_properties) {
        if (!connected_layer_names.has(key)) {
            props_to_remove.push(key);
            const layer_input = this.inputs.find(i => i.name === key);
            if(layer_input) inputs_to_remove.push(layer_input);
            const mask_input = this.inputs.find(i => i.name === key.replace("layer_", "mask_"));
            if(mask_input) inputs_to_remove.push(mask_input);
        }
    }
    props_to_remove.forEach(key => delete this.layer_properties[key]);
    inputs_to_remove.sort((a,b) => this.inputs.indexOf(b) - this.inputs.indexOf(a)).forEach(i => this.removeInput(this.inputs.indexOf(i)));
    
    const final_props = {};
    const final_images = {};
    const final_data = {};
    for (const key in this.loaded_preview_images) {
        if (!key.startsWith("layer_") && !key.startsWith("mask_")) {
            final_images[key] = this.loaded_preview_images[key];
        }
    }
    if (this.preview_data) {
        for (const key in this.preview_data) {
            if (!key.startsWith("layer_") && !key.startsWith("mask_")) {
                final_data[key] = this.preview_data[key];
            }
        }
    }
    
    const remaining_layers = this.inputs.filter(i => i.name.startsWith("layer_"));
    remaining_layers.sort((a, b) => this.inputs.indexOf(a) - this.inputs.indexOf(b));
    remaining_layers.forEach((input, i) => {
        const old_name = input.name;
        const new_name = `layer_${i + 1}`;
        const old_mask_name = old_name.replace("layer_", "mask_");
        const new_mask_name = new_name.replace("layer_", "mask_");
        if (this.layer_properties[old_name]) {
            final_props[new_name] = this.layer_properties[old_name];
        }
        
        if (this.loaded_preview_images[old_name]) {
            final_images[new_name] = this.loaded_preview_images[old_name];
        }
        if (this.loaded_preview_images[old_mask_name]) {
            final_images[new_mask_name] = this.loaded_preview_images[old_mask_name];
        }
        if (this.preview_data && this.preview_data[old_name]) {
            final_data[new_name] = this.preview_data[old_name];
        }
        if (this.preview_data && this.preview_data[old_mask_name]) {
            final_data[new_mask_name] = this.preview_data[old_mask_name];
        }
        input.name = new_name;
        const mask_input = this.inputs.find(m => m.name === old_mask_name);
        if (mask_input) {
            mask_input.name = new_mask_name;
        }
    });
    this.layer_properties = final_props;
    this.loaded_preview_images = final_images;
    this.preview_data = final_data;
    
    const finalLayerNames = Object.keys(this.layer_properties);
    if (finalLayerNames.length > 0) {
        const isAnyLayerExpanded = finalLayerNames.some(name =>
            !this.layer_properties[name].layer_collapsed
        );
        if (!isAnyLayerExpanded) {
            this.layer_properties[finalLayerNames[0]].layer_collapsed = false;
        }
    }
};
        
        nodeType.prototype.ensureWildcardInputs = function () {
            const layerInputs = this.inputs.filter(i => i.name.startsWith("layer_"));
            if(layerInputs.length >= MAX_LAYERS) return;
            const lastLayerInput = layerInputs.sort((a,b) => parseInt(a.name.split("_")[1]) - parseInt(b.name.split("_")[1])).pop();
            if (!lastLayerInput || lastLayerInput.link !== null) {
                const newIndex = lastLayerInput ? parseInt(lastLayerInput.name.split("_")[1]) + 1 : 1;
                if (newIndex > MAX_LAYERS) return;
                this.addInput(`layer_${newIndex}`, "IMAGE");
                this.addInput(`mask_${newIndex}`, "MASK");
            }
        };
 
nodeType.prototype.handleInternalImageLoad = function() {
    if (Object.keys(this.layer_properties).length >= MAX_LAYERS) {
        alert(`Maximum number of layers (${MAX_LAYERS}) reached.`);
        return;
    }
    const fileInput = document.createElement('input');
    fileInput.type = 'file';
    fileInput.accept = 'image/jpeg,image/png,image/webp';
    fileInput.style.display = 'none';

    fileInput.onchange = async (e) => {
        if (!e.target.files.length) { 
            document.body.removeChild(fileInput); 
            return; 
        }
        const originalFile = e.target.files[0];

        try {
            const isBaseImage = !this.base_image_properties;
            const timestamp = Date.now();
            const staticFilename = isBaseImage ? "layersystem_base.png" : `layersystem_${timestamp}.png`;

            const localUrl = URL.createObjectURL(originalFile);
            const newImage = new Image();
            newImage.src = localUrl;
            await new Promise(resolve => newImage.onload = resolve);

            const newFile = new File([originalFile], staticFilename, { type: originalFile.type });
            const formData = new FormData();
            formData.append('image', newFile);
            formData.append('overwrite', 'true');
            formData.append('type', 'input');
            const response = await fetch('/upload/image', { method: 'POST', body: formData });
            const data = await response.json();

            if (isBaseImage) {
                this.base_image_properties = { filename: data.name, details: data };
                this.loaded_preview_images['base_image'] = newImage;
                this.basePreviewImage = newImage;
            } else {
                const existingIndices = new Set(Object.keys(this.layer_properties).map(k => parseInt(k.split('_')[1])));
                let newIndex = 1;
                while (existingIndices.has(newIndex)) { newIndex++; }
                const layerName = `layer_${newIndex}`;

                if (this.accordionMode) {
                    for (const key in this.layer_properties) {
                        this.layer_properties[key].layer_collapsed = true;
                    }
                }
                this.layer_properties[layerName] = {
                    source_filename: data.name,
                    source_details: data,
                    blend_mode: "normal", opacity: 1.0, enabled: true, resize_mode: "crop", scale: 1.0, offset_x: 0, offset_y: 0,
                    rotation: 0.0, brightness: 0.0, contrast: 0.0, color_r: 1.0, color_g: 1.0, color_b: 1.0, saturation: 1.0,
                    invert_mask: false, color_section_collapsed: true, layer_collapsed: false,
                };
                this.loaded_preview_images[layerName] = newImage;
            }
            
            this.updatePropertiesJSON();
            this.refreshUI();
            this.redrawPreviewCanvas();

        } catch (error) {
            console.error("Error uploading file:", error);
        } finally {
            document.body.removeChild(fileInput);
        }
    };
    document.body.appendChild(fileInput);
    fileInput.click();
};

nodeType.prototype.deleteLayer = function(layerNameToDelete) {
    if (this.movingLayer === layerNameToDelete) {
        this.movingLayer = null;
    }

    const layerToDeleteProps = this.layer_properties[layerNameToDelete];
    if (layerToDeleteProps && layerToDeleteProps.source_details) {
        const fileDetails = layerToDeleteProps.source_details;
        const deleteFileOnServer = async (details) => {
            try {
                if (!details || !details.name) return;
                await fetch("/layersystem/delete_file", {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({ filename: details.name, subfolder: details.subfolder }),
                });
            } catch (e) { console.error("Failed to delete file:", e); }
        };
        deleteFileOnServer(fileDetails);
        if (layerToDeleteProps.internal_mask_details) deleteFileOnServer(layerToDeleteProps.internal_mask_details);
        if (layerToDeleteProps.internal_preview_mask_details) deleteFileOnServer(layerToDeleteProps.internal_preview_mask_details);
    }
    
    const layersToKeep = [];
    const sortedKeys = Object.keys(this.layer_properties).sort((a, b) => parseInt(a.split('_')[1]) - parseInt(b.split('_')[1]));
    
    for (const name of sortedKeys) {
        if (name !== layerNameToDelete) {
            const maskName = name.replace('layer_', 'mask_');
            layersToKeep.push({
                props: JSON.parse(JSON.stringify(this.layer_properties[name])),
                preview_img: this.loaded_preview_images[name],
                preview_data: this.preview_data[name] ? JSON.parse(JSON.stringify(this.preview_data[name])) : undefined,
                mask_img: this.loaded_preview_images[maskName],
                mask_data: this.preview_data[maskName] ? JSON.parse(JSON.stringify(this.preview_data[maskName])) : undefined,
            });
        }
    }

    const new_layer_properties = {};
    const new_loaded_preview_images = { base_image: this.loaded_preview_images.base_image };
    const new_preview_data = { base_image: this.preview_data.base_image };

    layersToKeep.forEach((layer, index) => {
        const newLayerName = `layer_${index + 1}`;
        const newMaskName = `mask_${index + 1}`;
        new_layer_properties[newLayerName] = layer.props;
        if (layer.preview_img) new_loaded_preview_images[newLayerName] = layer.preview_img;
        if (layer.preview_data) new_preview_data[newLayerName] = layer.preview_data;
        if (layer.mask_img) new_loaded_preview_images[newMaskName] = layer.mask_img;
        if (layer.mask_data) new_preview_data[newMaskName] = layer.mask_data;
    });
    
    this.layer_properties = new_layer_properties;
    this.loaded_preview_images = new_loaded_preview_images;
    this.preview_data = new_preview_data;

    this.updatePropertiesJSON();
    this.refreshUI();
    this.redrawPreviewCanvas();
};
 
 nodeType.prototype.logFullState = function(label) {
    console.log(`\n\n--- DEBUG STATE: ${label} ---`);
    console.log("PROPRIÉTÉS DES CALQUES:", JSON.parse(JSON.stringify(this.layer_properties)));
    console.log("DONNÉES DE PREVIEW:", this.preview_data);
    console.log("--- FIN DEBUG STATE ---\n\n");
};
 
nodeType.prototype.updatePropertiesJSON = function() {
    const mainDataWidget = this.widgets.find(w => w.name === "_layer_system_data" || w.name === "_properties_json");
    if (mainDataWidget) {
        const full_properties = {
            base: this.base_image_properties,
            layers: this.layer_properties,
            texts: this.toolbar ? this.toolbar.getTexts() : [],
            preview_width: this.previewCanvas ? this.previewCanvas.width : 512,
            preview_height: this.previewCanvas ? this.previewCanvas.height : 512,
            toolbar_width: this.toolbar ? this.toolbar.width : 0
        };
        mainDataWidget.value = JSON.stringify(full_properties);
    }
    this.widgets.forEach(widget => {
        if (widget.name.includes("_anchor")) {
            widget.value = null;
        }
    });
   };
  },
});