import { app } from '../../../scripts/app.js';
import { PowerSplineWidget } from './spline_utils.js';
import { HandDrawLayerWidget } from './layer_type_draw.js';
import { BoxLayerWidget } from './layer_type_box.js';
import { updateDrivenConfigValue, updateEasingConfigValue } from './persistence.js';

// Helper to create interactive number input with arrows and drag support
// For driven config (syncs to both driven and _drivenConfig)
function createNumberInput(widget, configObj, field, min, max, step, precision = 0) {
    const container = document.createElement('div');
    container.style.cssText = `
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        padding: 2px 2px !important;
        background-color: #1a1a1a !important;
        color: #aaa !important;
    `;

    // Left arrow
    const leftArrow = document.createElement('div');
    leftArrow.textContent = '◀';
    leftArrow.style.cssText = `
        cursor: pointer !important;
        user-select: none !important;
        padding: 0 1px !important;
        color: #aaa !important;
        font-size: 10px !important;
    `;
    leftArrow.onmouseover = () => leftArrow.style.color = '#fff';
    leftArrow.onmouseout = () => leftArrow.style.color = '#aaa';
    leftArrow.onclick = (e) => {
        e.stopPropagation();
        const newValue = Math.max(min, configObj[field] - step);
        updateDrivenConfigValue(widget, field, newValue);
        numberDisplay.textContent = newValue.toFixed(precision);
    };

    // Number display (draggable and clickable)
    const numberDisplay = document.createElement('div');
    numberDisplay.textContent = configObj[field].toFixed(precision);
    numberDisplay.style.cssText = `
        min-width: 24px !important;
        text-align: center !important;
        cursor: ew-resize !important;
        user-select: none !important;
        outline: none !important;
        color: #ddd !important;
        font-size: 11px !important;
    `;

    let isDragging = false;
    let hasDragged = false;
    let startX = 0;
    let startValue = 0;

    const onMouseMove = (e) => {
        if (isDragging) {
            e.stopPropagation();
            e.preventDefault();
            const deltaX = e.clientX - startX;
            // Only mark as dragged if movement exceeds threshold
            if (Math.abs(deltaX) > 3) {
                hasDragged = true;
            }
            const delta = Math.round(deltaX / 5) * step;
            const newValue = Math.max(min, Math.min(max, startValue + delta));
            updateDrivenConfigValue(widget, field, newValue);
            numberDisplay.textContent = newValue.toFixed(precision);
        }
    };

    const onMouseUp = () => {
        if (isDragging) {
            isDragging = false;
            numberDisplay.style.cursor = 'ew-resize';
            document.removeEventListener('mousemove', onMouseMove);
            document.removeEventListener('mouseup', onMouseUp);
        }
    };

    numberDisplay.onmousedown = (e) => {
        e.stopPropagation();
        e.preventDefault();
        if (e.button === 0) {
            isDragging = true;
            hasDragged = false;
            startX = e.clientX;
            startValue = configObj[field];
            numberDisplay.style.cursor = 'ew-resize';
            document.addEventListener('mousemove', onMouseMove);
            document.addEventListener('mouseup', onMouseUp);
        }
    };

    numberDisplay.onclick = (e) => {
        e.stopPropagation();
        // Only show prompt if user didn't drag
        if (!hasDragged) {
            const fieldLabel = field === 'd_scale' ? 'D Scale' : field.charAt(0).toUpperCase() + field.slice(1);
            app.canvas.prompt(fieldLabel, configObj[field], (v) => {
                const newValue = Math.max(min, Math.min(max, Number(v)));
                updateDrivenConfigValue(widget, field, newValue);
                numberDisplay.textContent = newValue.toFixed(precision);
            });
        }
        hasDragged = false;
    };

    // Right arrow
    const rightArrow = document.createElement('div');
    rightArrow.textContent = '▶';
    rightArrow.style.cssText = `
        cursor: pointer !important;
        user-select: none !important;
        padding: 0 1px !important;
        color: #aaa !important;
        font-size: 10px !important;
    `;
    rightArrow.onmouseover = () => rightArrow.style.color = '#fff';
    rightArrow.onmouseout = () => rightArrow.style.color = '#aaa';
    rightArrow.onclick = (e) => {
        e.stopPropagation();
        const newValue = Math.min(max, configObj[field] + step);
        updateDrivenConfigValue(widget, field, newValue);
        numberDisplay.textContent = newValue.toFixed(precision);
    };

    container.appendChild(leftArrow);
    container.appendChild(numberDisplay);
    container.appendChild(rightArrow);

    return container;
}

// Helper to create interactive number input for easing config (syncs to easingConfig)
function createEasingNumberInput(widget, configObj, field, min, max, step, precision = 0) {
    const container = document.createElement('div');
    container.style.cssText = `
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        padding: 2px 2px !important;
        background-color: #1a1a1a !important;
        color: #aaa !important;
    `;

    // Left arrow
    const leftArrow = document.createElement('div');
    leftArrow.textContent = '◀';
    leftArrow.style.cssText = `
        cursor: pointer !important;
        user-select: none !important;
        padding: 0 1px !important;
        color: #aaa !important;
        font-size: 10px !important;
    `;
    leftArrow.onmouseover = () => leftArrow.style.color = '#fff';
    leftArrow.onmouseout = () => leftArrow.style.color = '#aaa';
    leftArrow.onclick = (e) => {
        e.stopPropagation();
        const newValue = Math.max(min, configObj[field] - step);
        updateEasingConfigValue(widget, field, newValue);
        numberDisplay.textContent = newValue.toFixed(precision);
    };

    // Number display (draggable and clickable)
    const numberDisplay = document.createElement('div');
    numberDisplay.textContent = configObj[field].toFixed(precision);
    numberDisplay.style.cssText = `
        min-width: 24px !important;
        text-align: center !important;
        cursor: ew-resize !important;
        user-select: none !important;
        outline: none !important;
        color: #ddd !important;
        font-size: 11px !important;
    `;

    let isDragging = false;
    let hasDragged = false;
    let startX = 0;
    let startValue = 0;

    const onMouseMove = (e) => {
        if (isDragging) {
            e.stopPropagation();
            e.preventDefault();
            const deltaX = e.clientX - startX;
            // Only mark as dragged if movement exceeds threshold
            if (Math.abs(deltaX) > 3) {
                hasDragged = true;
            }
            const delta = Math.round(deltaX / 5) * step;
            const newValue = Math.max(min, Math.min(max, startValue + delta));
            updateEasingConfigValue(widget, field, newValue);
            numberDisplay.textContent = newValue.toFixed(precision);
        }
    };

    const onMouseUp = () => {
        if (isDragging) {
            isDragging = false;
            numberDisplay.style.cursor = 'ew-resize';
            document.removeEventListener('mousemove', onMouseMove);
            document.removeEventListener('mouseup', onMouseUp);
        }
    };

    numberDisplay.onmousedown = (e) => {
        e.stopPropagation();
        e.preventDefault();
        if (e.button === 0) {
            isDragging = true;
            hasDragged = false;
            startX = e.clientX;
            startValue = configObj[field];
            numberDisplay.style.cursor = 'ew-resize';
            document.addEventListener('mousemove', onMouseMove);
            document.addEventListener('mouseup', onMouseUp);
        }
    };

    numberDisplay.onclick = (e) => {
        e.stopPropagation();
        // Only show prompt if user didn't drag
        if (!hasDragged) {
            const fieldLabel = field.charAt(0).toUpperCase() + field.slice(1);
            app.canvas.prompt(fieldLabel, configObj[field], (v) => {
                const newValue = Math.max(min, Math.min(max, Number(v)));
                updateEasingConfigValue(widget, field, newValue);
                numberDisplay.textContent = newValue.toFixed(precision);
            });
        }
        hasDragged = false;
    };

    // Right arrow
    const rightArrow = document.createElement('div');
    rightArrow.textContent = '▶';
    rightArrow.style.cssText = `
        cursor: pointer !important;
        user-select: none !important;
        padding: 0 1px !important;
        color: #aaa !important;
        font-size: 10px !important;
    `;
    rightArrow.onmouseover = () => rightArrow.style.color = '#fff';
    rightArrow.onmouseout = () => rightArrow.style.color = '#aaa';
    rightArrow.onclick = (e) => {
        e.stopPropagation();
        const newValue = Math.min(max, configObj[field] + step);
        updateEasingConfigValue(widget, field, newValue);
        numberDisplay.textContent = newValue.toFixed(precision);
    };

    container.appendChild(leftArrow);
    container.appendChild(numberDisplay);
    container.appendChild(rightArrow);

    return container;
}

// Helper to create text input field
function createTextInput(widget, configObj, field, placeholder = '') {
    const input = document.createElement('input');
    input.type = 'text';
    input.value = configObj[field] || '';
    input.placeholder = placeholder;
    input.style.cssText = `
        width: 100% !important;
        padding: 2px 3px !important;
        background-color: #1a1a1a !important;
        border: 1px solid #333 !important;
        color: #ddd !important;
        font-family: Arial, sans-serif !important;
        font-size: 11px !important;
        outline: none !important;
    `;
    input.onfocus = () => {
        input.style.borderColor = '#555';
        input.style.backgroundColor = '#222';
    };
    input.onblur = () => {
        input.style.borderColor = '#333';
        input.style.backgroundColor = '#1a1a1a';
    };
    input.oninput = (e) => {
        e.stopPropagation();
        // Use the centralized update function to ensure data is saved correctly
        updateDrivenConfigValue(widget, field, input.value);
    };
    input.onclick = (e) => e.stopPropagation();
    input.onmousedown = (e) => e.stopPropagation();

    return input;
}

// Function to display a custom HTML context menu with interactive inputs
export function showCustomDrivenToggleMenu(event, widget, position) {
    console.log("showCustomDrivenToggleMenu called.");
    // Stop native context menu if invoked from a right-click
    try { event?.preventDefault?.(); event?.stopPropagation?.(); } catch {}
    // Remove any existing custom menu to prevent duplicates
    const existingMenu = document.getElementById('custom-driven-toggle-menu');
    if (existingMenu) {
        existingMenu.remove();
    }

    // Work with the config object - either from driven (if on) or _drivenConfig (if off)
    // This ensures we preserve settings even when the toggle is off
    let configObj;
    if (widget.value.driven && typeof widget.value.driven === 'object') {
        // Driven is on - use the active config
        configObj = widget.value.driven;
    } else {
        // Driven is off - use the preserved config
        if (!widget.value._drivenConfig || typeof widget.value._drivenConfig !== 'object') {
            widget.value._drivenConfig = { driver: "", rotate: 0, d_scale: 1.0 };
        }
        configObj = widget.value._drivenConfig;
    }

    // Ensure all fields exist
    if (!configObj.driver) configObj.driver = "";
    if (typeof configObj.rotate !== 'number') configObj.rotate = 0;
    if (typeof configObj.d_scale !== 'number') configObj.d_scale = 1.0;

    const menu = document.createElement('div');
    menu.id = 'custom-driven-toggle-menu';
    menu.className = 'litegraph litecontextmenu litemenubar-panel';
    menu.style.cssText = `
        position: absolute !important;
        left: ${position.x}px !important;
        top: ${position.y + 40}px !important;
        background-color: #1a1a1a !important;
        border: 1px solid #000 !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.8) !important;
        z-index: 10000 !important;
        padding: 4px !important;
        border-radius: 0px !important;
        min-width: 50 !important;
        display: block !important;
        font-family: Arial, sans-serif !important;
        font-size: 11px !important;
    `;

    // Create grid container
    const container = document.createElement('div');
    container.style.cssText = `
        display: grid !important;
        grid-template-columns: 1fr 0.5fr 0.5fr !important;
        grid-template-rows: auto auto !important;
        gap: 2px !important;
        width: 100% !important;
    `;

    // Helper to create header label
    const createHeader = (text) => {
        const header = document.createElement('div');
        header.textContent = text;
        header.style.cssText = `
            padding: 2px 4px !important;
            text-align: center !important;
            font-size: 11px !important;
            color: #888 !important;
            background-color: #1a1a1a !important;
            font-weight: normal !important;
        `;
        return header;
    };

    // Row 1: Headers
    container.appendChild(createHeader('Driver:'));
    container.appendChild(createHeader('Rotate:'));
    container.appendChild(createHeader('D_Scale:'));

    // Row 2: Interactive inputs
    const driverOptions = ["None", ...widget.parent.layerManager.getSplineWidgets()
        .map(w => w.value.name)
        .filter(name => name !== widget.value.name)];
    container.appendChild(createDropdown(driverOptions, configObj.driver || "None", widget, 'driver', updateDrivenConfigValue));
    container.appendChild(createNumberInput(widget, configObj, 'rotate', -360, 360, 1, 0));
    container.appendChild(createNumberInput(widget, configObj, 'd_scale', 0.0, 1.0, 0.01, 2));

    menu.appendChild(container);
    document.body.appendChild(menu);
    console.log("Menu appended to body, position:", position);

    // Prevent menu close and native context menu when interacting with menu
    menu.onclick = (e) => e.stopPropagation();
    menu.onmousedown = (e) => e.stopPropagation();
    menu.oncontextmenu = (e) => { e.preventDefault(); e.stopPropagation(); };

    // Hide menu when clicking outside
    const hideMenu = (e) => {
        if (menu && !menu.contains(e.target)) {
            console.log("Hiding menu");
            menu.remove();
            document.removeEventListener('click', hideMenu);
            document.removeEventListener('contextmenu', hideMenu);
            document.removeEventListener('mousedown', hideMenu);
        }
    };

    // While menu is open, suppress browser context menu globally (capture)
    const preventBrowserMenu = (e) => { e.preventDefault(); };

    // Add listeners after a short delay to prevent immediate closure
    setTimeout(() => {
        document.addEventListener('click', hideMenu, true);
        document.addEventListener('contextmenu', hideMenu, true);
        document.addEventListener('mousedown', hideMenu, true);
        document.addEventListener('contextmenu', preventBrowserMenu, true);
    }, 100);

    // Ensure cleanup of global preventer when menu is removed
    const observer = new MutationObserver(() => {
        if (!document.getElementById('custom-driven-toggle-menu')) {
            document.removeEventListener('contextmenu', preventBrowserMenu, true);
            observer.disconnect();
        }
    });
    observer.observe(document.body, { childList: true, subtree: false });
}

// Helper to create a dropdown select element
function createDropdown(options, selectedValue, widget, field, updateCallback) {
    const select = document.createElement('select');
    select.style.cssText = `
        width: 100% !important;
        padding: 2px 3px !important;
        background-color: #1a1a1a !important;
        border: 1px solid #333 !important;
        color: #ddd !important;
        font-family: Arial, sans-serif !important;
        font-size: 11px !important;
        outline: none !important;
        cursor: pointer !important;
    `;
    select.onfocus = () => {
        select.style.borderColor = '#555';
        select.style.backgroundColor = '#222';
    };
    select.onblur = () => {
        select.style.borderColor = '#333';
        select.style.backgroundColor = '#1a1a1a';
    };
    select.onclick = (e) => e.stopPropagation();
    select.onmousedown = (e) => e.stopPropagation();
    select.onchange = (e) => {
        e.stopPropagation();
        if (updateCallback) {
            updateCallback(widget, field, select.value);
        }
    };

    options.forEach(opt => {
        const option = document.createElement('option');
        option.value = opt;
        option.textContent = opt;
        if (opt === selectedValue) {
            option.selected = true;
        }
        select.appendChild(option);
    });

    return select;
}

// Simple interpolation dropdown menu shown near click position
export function showInterpolationMenu(event, widget, position) {
    try { event?.preventDefault?.(); event?.stopPropagation?.(); } catch {}

    // Remove any existing menu
    const existing = document.getElementById('custom-interp-menu');
    if (existing) existing.remove();

    const menu = document.createElement('div');
    menu.id = 'custom-interp-menu';
    menu.className = 'litegraph litecontextmenu litemenubar-panel';
    menu.style.cssText = `
        position: absolute !important;
        left: ${position.x}px !important;
        top: ${position.y + 10}px !important;
        background-color: #1a1a1a !important;
        border: 1px solid #000 !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.8) !important;
        z-index: 10000 !important;
        padding: 4px !important;
        border-radius: 0px !important;
        min-width: 120px !important;
        display: block !important;
        font-family: Arial, sans-serif !important;
        font-size: 11px !important;
        transform: translateX(-40%) !important;
    `;

    // Check if this is a box layer
    const isBoxLayer = widget.value && widget.value.type === 'box_layer';
    const options = isBoxLayer ? ['linear', 'basis'] : ['linear', 'cardinal', 'basis', 'points'];
    const current = isBoxLayer ? (widget.value.box_interpolation || 'linear') : (widget.value.interpolation || 'linear');

    const list = document.createElement('div');
    list.style.cssText = `
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        padding: 2px !important;
    `;

    options.forEach(opt => {
        const item = document.createElement('div');
        item.textContent = opt;
        item.style.cssText = `
            padding: 4px 6px !important;
            cursor: pointer !important;
            color: ${opt === current ? '#fff' : '#ddd'} !important;
            background-color: ${opt === current ? '#333' : 'transparent'} !important;
        `;
        item.onmouseover = () => { item.style.backgroundColor = '#2a2a2a'; item.style.color = '#fff'; };
        item.onmouseout = () => { item.style.backgroundColor = (opt === current ? '#333' : 'transparent'); item.style.color = (opt === current ? '#fff' : '#ddd'); };
        item.onclick = (e) => {
            e.stopPropagation();
            const w = widget;
            // Check if this is a box layer to update the correct value field
            if (w.value && w.value.type === 'box_layer') {
                w.value.box_interpolation = opt;
            } else {
                w.value.interpolation = opt;
            }
            const node = w.parent;
            if (node?.layerManager?.getActiveWidget() === w && node.editor?.layerRenderer) {
                node.editor.layerRenderer.render();
            }
            node?.setDirtyCanvas?.(true, true);
            menu.remove();
        };
        list.appendChild(item);
    });
    menu.appendChild(list);
    document.body.appendChild(menu);

    // Prevent native context interactions inside
    menu.onclick = (e) => e.stopPropagation();
    menu.onmousedown = (e) => e.stopPropagation();
    menu.oncontextmenu = (e) => { e.preventDefault(); e.stopPropagation(); };

    const hide = (e) => {
        if (menu && !menu.contains(e.target)) {
            menu.remove();
            document.removeEventListener('click', hide, true);
            document.removeEventListener('contextmenu', hide, true);
            document.removeEventListener('mousedown', hide, true);
        }
    };
    setTimeout(() => {
        document.addEventListener('click', hide, true);
        document.addEventListener('contextmenu', hide, true);
        document.addEventListener('mousedown', hide, true);
    }, 50);
}

// Ref image selection dropdown menu
export function showRefSelectionMenu(event, widget, position, onSelect) {
    try { event?.preventDefault?.(); event?.stopPropagation?.(); } catch {}

    const existing = document.getElementById('ref-select-menu');
    if (existing) existing.remove();

    const menu = document.createElement('div');
    menu.id = 'ref-select-menu';
    menu.className = 'litegraph litecontextmenu litemenubar-panel';
    menu.style.cssText = `
        position: absolute !important;
        left: ${position.x}px !important;
        top: ${position.y + 10}px !important;
        background-color: #1a1a1a !important;
        border: 1px solid #000 !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.8) !important;
        z-index: 10000 !important;
        padding: 4px !important;
        border-radius: 0px !important;
        min-width: 140px !important;
        display: block !important;
        font-family: Arial, sans-serif !important;
        font-size: 11px !important;
        transform: translateX(-40%) !important;
    `;

    const options = widget?._getRefOptions?.() || ['no_ref', 'ref_1', 'ref_2', 'ref_3', 'ref_4', 'ref_5'];
    const current = widget?.value?.ref_selection || 'no_ref';

    const list = document.createElement('div');
    list.style.cssText = `
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        padding: 2px !important;
    `;

    options.forEach(opt => {
        const item = document.createElement('div');
        item.textContent = opt;
        item.style.cssText = `
            padding: 4px 6px !important;
            cursor: pointer !important;
            color: ${opt === current ? '#fff' : '#ddd'} !important;
            background-color: ${opt === current ? '#333' : 'transparent'} !important;
        `;
        item.onmouseover = () => { item.style.backgroundColor = '#2a2a2a'; item.style.color = '#fff'; };
        item.onmouseout = () => { item.style.backgroundColor = (opt === current ? '#333' : 'transparent'); item.style.color = (opt === current ? '#fff' : '#ddd'); };
        item.onclick = async (e) => {
            e.stopPropagation();
            if (typeof onSelect === 'function') {
                onSelect(opt);
            } else if (widget) {
                widget.value.ref_selection = opt;

                // Reload image dimensions from file when switching to a ref selection
                // This ensures we get the latest image data if the file was updated
                if (opt !== 'no_ref' && widget.value.ref_attachment?.entries) {
                    const parts = opt.split('_');
                    const idx = parts.length > 1 ? parseInt(parts[1], 10) : 1;
                    const arrayIndex = Number.isFinite(idx) ? Math.max(0, idx - 1) : 0;
                    const attachment = widget.value.ref_attachment.entries[arrayIndex];

                    if (attachment && attachment.path) {
                        // Reload dimensions from the actual image file
                        try {
                            const img = new Image();
                            const cacheBust = Date.now() + Math.random().toString(36).substring(2, 9);
                            img.src = `${attachment.path}?v=${cacheBust}`;
                            await new Promise((resolve, reject) => {
                                img.onload = () => {
                                    // Update attachment with fresh dimensions
                                    attachment.width = img.width;
                                    attachment.height = img.height;
                                    resolve();
                                };
                                img.onerror = (err) => reject(err);
                                // Timeout after 2 seconds
                                setTimeout(() => resolve(), 2000);
                            });
                        } catch (e) {
                            console.warn('Failed to reload image dimensions:', e);
                        }
                    }
                }

                widget.parent?.setDirtyCanvas?.(true, true);
                // Clear ref image cache to force reload with new selection
                widget.parent?.editor?.layerRenderer?.clearRefImageCache?.();
                // Force render to update the displayed reference image
                widget.parent?.editor?.layerRenderer?.render?.();
            }
            menu.remove();
        };
        list.appendChild(item);
    });

    menu.appendChild(list);
    document.body.appendChild(menu);

    const cleanup = (ev) => {
        const target = ev?.target;
        if (target && menu.contains(target)) return;
        menu.remove();
        document.removeEventListener('mousedown', cleanup, true);
        document.removeEventListener('contextmenu', cleanup, true);
        document.removeEventListener('keydown', onEsc, true);
    };
    const onEsc = (ev) => {
        if (ev.key === 'Escape') {
            menu.remove();
            document.removeEventListener('mousedown', cleanup, true);
            document.removeEventListener('contextmenu', cleanup, true);
            document.removeEventListener('keydown', onEsc, true);
        }
    };
    setTimeout(() => {
        document.addEventListener('mousedown', cleanup, true);
        document.addEventListener('contextmenu', cleanup, true);
        document.addEventListener('keydown', onEsc, true);
    }, 0);
}

// Helper to create static number display (non-interactive for UI-only)
function createStaticNumberDisplay(value, min, max, precision = 1) {
    const container = document.createElement('div');
    container.style.cssText = `
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 2px 3px !important;
        background-color: #1a1a1a !important;
        border: 1px solid #333 !important;
        color: #ddd !important;
        font-family: Arial, sans-serif !important;
        font-size: 11px !important;
        text-align: center !important;
    `;
    container.textContent = value.toFixed(precision);
    return container;
}

// Function to display a custom HTML context menu for easing configuration
export function showCustomEasingMenu(event, widget, position) {
    console.log("showCustomEasingMenu called.");
    // Remove any existing custom menu to prevent duplicates
    const existingMenu = document.getElementById('custom-easing-menu');
    if (existingMenu) {
        existingMenu.remove();
    }

    // Initialization is now handled by the widget's value setter.
    // We can rely on widget.value.easingConfig existing.
    const configObj = widget.value.easingConfig;

    // Ensure fields exist as a fallback.
    if (!configObj.path) configObj.path = "each";
    if (typeof configObj.strength !== 'number') configObj.strength = 1.0;

    const menu = document.createElement('div');
    menu.id = 'custom-easing-menu';
    menu.className = 'litegraph litecontextmenu litemenubar-panel';
    menu.style.cssText = `
        position: absolute !important;
        left: ${position.x}px !important;
        top: ${position.y + 40}px !important;
        background-color: #1a1a1a !important;
        border: 1px solid #000 !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.8) !important;
        z-index: 10000 !important;
        padding: 4px !important;
        border-radius: 0px !important;
        min-width: 50 !important;
        display: block !important;
        font-family: Arial, sans-serif !important;
        font-size: 11px !important;
    `;

    // Create grid container (3 columns: Path | Strength | Accel)
    const container = document.createElement('div');
    container.style.cssText = `
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        grid-template-rows: auto auto !important;
        gap: 2px !important;
        width: 100% !important;
    `;

    // Helper to create header label
    const createHeader = (text) => {
        const header = document.createElement('div');
        header.textContent = text;
        header.style.cssText = `
            padding: 2px 4px !important;
            text-align: center !important;
            font-size: 11px !important;
            color: #888 !important;
            background-color: #1a1a1a !important;
            font-weight: normal !important;
        `;
        return header;
    };

    // Row 1: Headers
    container.appendChild(createHeader('Path:'));
    container.appendChild(createHeader('Strength:'));
    container.appendChild(createHeader('Accel:'));

    // Row 2: Controls
    container.appendChild(createDropdown(['each', 'full', 'alternate'], configObj.path, widget, 'path', updateEasingConfigValue));
    container.appendChild(createEasingNumberInput(widget, configObj, 'strength', 0.0, 2.0, 0.1, 1));
    container.appendChild(createEasingNumberInput(widget, configObj, 'acceleration', -1.0, 1.0, 0.01, 2));

    menu.appendChild(container);
    document.body.appendChild(menu);
    console.log("Easing menu appended to body, position:", position);

    // Prevent menu close when interacting with inputs
    menu.onclick = (e) => e.stopPropagation();
    menu.onmousedown = (e) => e.stopPropagation();

    // Hide menu when clicking outside
    const hideMenu = (e) => {
        if (menu && !menu.contains(e.target)) {
            console.log("Hiding easing menu");
            menu.remove();
            document.removeEventListener('click', hideMenu);
            document.removeEventListener('contextmenu', hideMenu);
            document.removeEventListener('mousedown', hideMenu);
        }
    };

    // Add listeners after a short delay to prevent immediate closure
    setTimeout(() => {
        document.addEventListener('click', hideMenu);
        document.addEventListener('contextmenu', hideMenu);
        document.addEventListener('mousedown', hideMenu);
    }, 100);
}

export function getSlotInPosition(canvasX, canvasY) {
    const slot = LGraphNode.prototype.getSlotInPosition?.call(this, canvasX, canvasY);
    if (!slot) {
        // Check if click is on a spline widget
        for (const widget of this.widgets || []) {
            if (!widget.last_y) continue;

            // Check if click Y is within this widget's bounds
            const widgetTop = this.pos[1] + widget.last_y;
            const widgetBottom = widgetTop + LiteGraph.NODE_WIDGET_HEIGHT;

            if (canvasY >= widgetTop && canvasY <= widgetBottom) {
                // Found the widget at this position
                const isSplineLike =
                    (widget instanceof PowerSplineWidget) ||
                    (widget instanceof HandDrawLayerWidget) ||
                    (widget instanceof BoxLayerWidget) ||
                    widget.name?.startsWith("spline_") ||
                    widget.name?.startsWith("box_");
                if (isSplineLike) {
                    // Use the actual hitAreas.drivenToggle.bounds from the widget
                    if (widget.hitAreas && widget.hitAreas.drivenToggle) {
                        const drivenToggleBounds = widget.hitAreas.drivenToggle.bounds;
                        // drivenToggleBounds is [posX, toggleBgWidth] relative to the widget's draw area
                        // We need to convert these to canvas coordinates

                        const toggleAbsXStart = this.pos[0] + drivenToggleBounds[0];
                        // Reduce the width of the hit area to be more precise - use the actual toggle width
                        // The toggle width is approximately height * 0.72 (toggle radius * 2)
                        const toggleWidth = LiteGraph.NODE_WIDGET_HEIGHT * 0.72;
                        const toggleAbsXEnd = toggleAbsXStart + toggleWidth;
                        const toggleAbsYStart = widgetTop; // The widget's top is the start Y
                        const toggleAbsYEnd = widgetBottom; // The widget's bottom is the end Y

                        if (canvasX >= toggleAbsXStart && canvasX <= toggleAbsXEnd &&
                            canvasY >= toggleAbsYStart && canvasY <= toggleAbsYEnd) {
                            return { widget: widget, output: { type: "DRIVEN_TOGGLE" } };
                        }
                    }

                    // Check for easing area (same pattern as driven toggle)
                    if (widget.hitAreas && widget.hitAreas.easingVal) {
                        const easingBounds = widget.hitAreas.easingVal.bounds;
                        // easingBounds is [posX, width] relative to the widget's draw area

                        const easingAbsXStart = this.pos[0] + easingBounds[0];
                        const easingAbsXEnd = easingAbsXStart + easingBounds[1];
                        const easingAbsYStart = widgetTop;
                        const easingAbsYEnd = widgetBottom;

                        if (canvasX >= easingAbsXStart && canvasX <= easingAbsXEnd &&
                            canvasY >= easingAbsYStart && canvasY <= easingAbsYEnd) {
                            return { widget: widget, output: { type: "EASING_AREA" } };
                        }
                    }
                }
                // If click is outside the toggle button, then select the spline widget
                return { widget: widget, output: { type: "SPLINE WIDGET" } };
            }
        }
    }
    return slot;
}

// Function to display custom HTML context menu for layer actions
export function showCustomLayerMenu(event, widget, node, position) {
    console.log("showCustomLayerMenu called.");
    // Stop native context menu if invoked from a right-click
    try { event?.preventDefault?.(); event?.stopPropagation?.(); } catch {}
    // Remove any existing custom menu to prevent duplicates
    const existingMenu = document.getElementById('custom-layer-menu');
    if (existingMenu) {
        existingMenu.remove();
    }

    const menu = document.createElement('div');
    menu.id = 'custom-layer-menu';
    menu.className = 'litegraph litecontextmenu litemenubar-panel';
    menu.style.cssText = `
        position: absolute !important;
        left: ${position.x}px !important;
        top: ${position.y}px !important;
        background-color: #1a1a1a !important;
        border: 1px solid #000 !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.8) !important;
        z-index: 10000 !important;
        padding: 4px !important;
        border-radius: 0px !important;
        min-width: 120px !important;
        display: block !important;
        font-family: Arial, sans-serif !important;
        font-size: 11px !important;
    `;

    const splineWidgets = node.widgets.filter(w =>
        (w instanceof PowerSplineWidget) ||
        (w instanceof HandDrawLayerWidget) ||
        (w instanceof BoxLayerWidget) ||
        w.name?.startsWith("spline_") ||
        w.name?.startsWith("box_")
    );
    const splineIndex = splineWidgets.indexOf(widget);
    const isBoxLayerWidget = (widget instanceof BoxLayerWidget) || widget.name?.startsWith("box_");
    const canMoveUp = splineIndex > 0;
    const canMoveDown = splineIndex < splineWidgets.length - 1;

    // Helper to create menu item
    const createMenuItem = (icon, text, onClick, disabled = false) => {
        const item = document.createElement('div');
        item.style.cssText = `
            padding: 4px 8px !important;
            cursor: ${disabled ? 'default' : 'pointer'} !important;
            color: ${disabled ? '#555' : '#ddd'} !important;
            background-color: #1a1a1a !important;
            user-select: none !important;
            display: flex !important;
            align-items: center !important;
            gap: 6px !important;
        `;

        if (!disabled) {
            item.onmouseover = () => {
                item.style.backgroundColor = '#2a2a2a';
            };
            item.onmouseout = () => {
                item.style.backgroundColor = '#1a1a1a';
            };
            item.onclick = (e) => {
                e.stopPropagation();
                onClick();
                menu.remove();
                document.removeEventListener('click', hideMenu);
                document.removeEventListener('contextmenu', hideMenu);
                document.removeEventListener('mousedown', hideMenu);
            };
        }

        const iconSpan = document.createElement('span');
        iconSpan.textContent = icon;
        iconSpan.style.cssText = `
            font-size: 12px !important;
            width: 16px !important;
            text-align: center !important;
        `;

        const textSpan = document.createElement('span');
        textSpan.textContent = text;

        item.appendChild(iconSpan);
        item.appendChild(textSpan);

        return item;
    };

    // Helper to create separator
    const createSeparator = () => {
        const separator = document.createElement('div');
        separator.style.cssText = `
            height: 1px !important;
            background-color: #333 !important;
            margin: 2px 0 !important;
        `;
        return separator;
    };

    // Add menu items
    menu.appendChild(createMenuItem('✏️', 'Rename', () => {
        const canvas = app.canvas;
        // Ensure value container exists to avoid null access after refresh
        if (!widget.value) widget.value = {};
        const currentName = widget.value?.name || "Spline";
        canvas.prompt("Spline Name", currentName, (v) => {
            const newName = v || "Spline";
            const otherSplineWidgets = node.widgets.filter(w => w !== widget && w.name?.startsWith("spline_"));
            const existingNames = otherSplineWidgets.map(w => w?.value?.name).filter(n => !!n);
            const oldName = widget.value.name; // Store old name before changing
            widget.value.name = node.generateUniqueName(newName, existingNames);

            // Update driver references in other layers that were using this layer as a driver
            if (oldName && oldName !== widget.value.name) {
                node.widgets.forEach(w => {
                    if (w !== widget && w.name?.startsWith("spline_") && w.value) {
                        // Check both active driven config and preserved config
                        let needsUpdate = false;

                        // Check active driven config
                        if (w.value.driven && w.value.driven.driver === oldName) {
                            w.value.driven.driver = widget.value.name;
                            needsUpdate = true;
                        }

                        // Check preserved driven config (when toggle is off)
                        if (w.value._drivenConfig && w.value._drivenConfig.driver === oldName) {
                            w.value._drivenConfig.driver = widget.value.name;
                            needsUpdate = true;
                        }

                        // Log the update for debugging
                        if (needsUpdate) {
                            console.log(`Updated driver reference in layer "${w.value.name}" from "${oldName}" to "${widget.value.name}"`);
                        }
                    }
                });
            }

            node.setDirtyCanvas(true, true);
        });
    }));

    menu.appendChild(createSeparator());

    // Safely read/initialize toggle state
    const isOn = !!(widget.value && widget.value.on);
    menu.appendChild(createMenuItem(
        isOn ? '⚫' : '🟢',
        isOn ? 'Toggle Off' : 'Toggle On',
        () => {
            if (!widget.value) widget.value = {};
            if (typeof widget.value.on !== 'boolean') widget.value.on = false;
            widget.value.on = !widget.value.on;
            node.setDirtyCanvas(true, true);
        }
    ));

    menu.appendChild(createMenuItem('⬆️', 'Move Up', () => {
        const index = node.widgets.indexOf(widget);
        const otherIndex = node.widgets.indexOf(splineWidgets[splineIndex - 1]);
        const temp = node.widgets[otherIndex];
        node.widgets[otherIndex] = widget;
        node.widgets[index] = temp;
        node.setDirtyCanvas(true, true);
    }, !canMoveUp));

    menu.appendChild(createMenuItem('⬇️', 'Move Down', () => {
        const index = node.widgets.indexOf(widget);
        const otherIndex = node.widgets.indexOf(splineWidgets[splineIndex + 1]);
        const temp = node.widgets[otherIndex];
        node.widgets[otherIndex] = widget;
        node.widgets[index] = temp;
        node.setDirtyCanvas(true, true);
    }, !canMoveDown));

    if (isBoxLayerWidget) {
        const hasPoints = Array.isArray(widget.value?.box_keys) && widget.value.box_keys.length > 0;
        menu.appendChild(createMenuItem('[]', 'Clear All Points', () => {
            widget.onClearAllClick?.(event ?? null, null, node);
            node?.setDirtyCanvas?.(true, true);
        }, !hasPoints));
    }

    menu.appendChild(createMenuItem('🗑️', 'Remove', () => {
        node.layerManager.removeSpline(widget);
    }));


    document.body.appendChild(menu);
    console.log("Layer menu appended to body, position:", position);

    // Prevent menu close and native context menu when interacting with menu
    menu.onclick = (e) => e.stopPropagation();
    menu.onmousedown = (e) => e.stopPropagation();
    menu.oncontextmenu = (e) => { e.preventDefault(); e.stopPropagation(); };

    // Hide menu when clicking outside (but ignore clicks inside LiteGraph prompt/dialogs)
    const hideMenu = (e) => {
        const target = e && e.target;
        const withinDialog = target && (target.closest?.('.litegraph .dialog') || target.closest?.('.litegraph.liteprompt') || target.closest?.('.litedialog'));
        if (withinDialog) {
            return; // keep menu open while interacting with prompt
        }
        if (menu && !menu.contains(target)) {
            console.log("Hiding layer menu");
            menu.remove();
            document.removeEventListener('click', hideMenu, true);
            document.removeEventListener('contextmenu', hideMenu, true);
            document.removeEventListener('mousedown', hideMenu, true);
        }
    };

    // While menu is open, suppress browser context menu globally (capture)
    const preventBrowserMenu = (e) => { e.preventDefault(); };

    // Add listeners after a short delay to prevent immediate closure
    setTimeout(() => {
        // Use capture so we can filter early and not propagate into generic closers
        document.addEventListener('click', hideMenu, true);
        document.addEventListener('contextmenu', hideMenu, true);
        document.addEventListener('mousedown', hideMenu, true);
        document.addEventListener('contextmenu', preventBrowserMenu, true);
    }, 100);

    // Ensure cleanup of global preventer when menu is removed
    const observer = new MutationObserver(() => {
        if (!document.getElementById('custom-layer-menu')) {
            document.removeEventListener('contextmenu', preventBrowserMenu, true);
            observer.disconnect();
        }
    });
    observer.observe(document.body, { childList: true, subtree: false });
}

export function getSlotMenuOptions(slot, event) {
    // Prevent native context menu when we will show custom ones
    try { event?.preventDefault?.(); event?.stopPropagation?.(); } catch {}
    // Check if the slot is specifically for the DRIVEN_TOGGLE
    if (slot?.output?.type === "DRIVEN_TOGGLE") {
        // Get position from canvas - LiteGraph stores the last pointer position
        const canvas = app.canvas;

        // Try multiple ways to get the screen position
        let x = 100;
        let y = 100;

        // Option 1: Try to get from last_mouse_position (canvas screen coords)
        if (canvas.last_mouse_position) {
            x = canvas.last_mouse_position[0];
            y = canvas.last_mouse_position[1];
        }
        // Option 2: Try canvas_mouse (might be available)
        else if (canvas.canvas_mouse) {
            x = canvas.canvas_mouse[0];
            y = canvas.canvas_mouse[1];
        }
        // Option 3: Convert graph coordinates to screen coordinates
        else if (canvas.graph_mouse && canvas.ds) {
            const graphX = canvas.graph_mouse[0];
            const graphY = canvas.graph_mouse[1];
            // Convert from graph space to canvas space
            x = graphX * canvas.ds.scale + canvas.ds.offset[0];
            y = graphY * canvas.ds.scale + canvas.ds.offset[1];
            // Convert from canvas space to screen space
            const canvasRect = canvas.canvas.getBoundingClientRect();
            x += canvasRect.left;
            y += canvasRect.top;
        }

        console.log("Menu position calculated:", {x, y});

        // Use a slight delay to ensure the menu shows after the event completes
        setTimeout(() => {
            showCustomDrivenToggleMenu(event, slot.widget, { x, y });
        }, 10);

        // Return false to prevent LiteGraph from showing its default menu
        return false;
    }

    // Check if the slot is specifically for the EASING_AREA
    if (slot?.output?.type === "EASING_AREA") {
        // Get position from canvas - same logic as driven toggle
        const canvas = app.canvas;

        // Try multiple ways to get the screen position
        let x = 100;
        let y = 100;

        // Option 1: Try to get from last_mouse_position (canvas screen coords)
        if (canvas.last_mouse_position) {
            x = canvas.last_mouse_position[0];
            y = canvas.last_mouse_position[1];
        }
        // Option 2: Try canvas_mouse (might be available)
        else if (canvas.canvas_mouse) {
            x = canvas.canvas_mouse[0];
            y = canvas.canvas_mouse[1];
        }
        // Option 3: Convert graph coordinates to screen coordinates
        else if (canvas.graph_mouse && canvas.ds) {
            const graphX = canvas.graph_mouse[0];
            const graphY = canvas.graph_mouse[1];
            // Convert from graph space to canvas space
            x = graphX * canvas.ds.scale + canvas.ds.offset[0];
            y = graphY * canvas.ds.scale + canvas.ds.offset[1];
            // Convert from canvas space to screen space
            const canvasRect = canvas.canvas.getBoundingClientRect();
            x += canvasRect.left;
            y += canvasRect.top;
        }

        console.log("Easing menu position calculated:", {x, y});

        // Use a slight delay to ensure the menu shows after the event completes
        setTimeout(() => {
            showCustomEasingMenu(event, slot.widget, { x, y });
        }, 10);

        // Return false to prevent LiteGraph from showing its default menu
        return false;
    }

    // Check if the slot is for a spline widget (layer right-click)
    const widget = slot?.widget;
    const isLayerWidget = widget &&
        ((widget instanceof PowerSplineWidget) ||
            (widget instanceof HandDrawLayerWidget) ||
            (widget instanceof BoxLayerWidget) ||
            widget.name?.startsWith("spline_") ||
            widget.name?.startsWith("box_"));

    if (isLayerWidget) {
        const canvas = app.canvas;

        // Try multiple ways to get the screen position
        let x = 100;
        let y = 100;

        // Option 1: Try to get from last_mouse_position (canvas screen coords)
        if (canvas.last_mouse_position) {
            x = canvas.last_mouse_position[0];
            y = canvas.last_mouse_position[1];
        }
        // Option 2: Try canvas_mouse (might be available)
        else if (canvas.canvas_mouse) {
            x = canvas.canvas_mouse[0];
            y = canvas.canvas_mouse[1];
        }
        // Option 3: Convert graph coordinates to screen coordinates
        else if (canvas.graph_mouse && canvas.ds) {
            const graphX = canvas.graph_mouse[0];
            const graphY = canvas.graph_mouse[1];
            // Convert from graph space to canvas space
            x = graphX * canvas.ds.scale + canvas.ds.offset[0];
            y = graphY * canvas.ds.scale + canvas.ds.offset[1];
            // Convert from canvas space to screen space
            const canvasRect = canvas.canvas.getBoundingClientRect();
            x += canvasRect.left;
            y += canvasRect.top;
        }

        console.log("Layer menu position calculated:", {x, y});

        // Use a slight delay to ensure the menu shows after the event completes
        setTimeout(() => {
            showCustomLayerMenu(event, widget, this, { x, y });
        }, 10);

        // Return false to prevent LiteGraph from showing its default menu
        return false;
    }

    return LGraphNode.prototype.getSlotMenuOptions?.call(this, slot);
}