import { app } from "../../../scripts/app.js";
import { ComfyWidgets } from "../../../scripts/widgets.js";
import { SettingsPopup } from "./AIDocSharedClasses.js";

const THEME = {
    colors: {
        bg: "#18181B",
        bgHover: "#27272A",
        bgActive: "#3F3F46",
        accent: "#8B5CF6",
        accentLight: "#A78BFA",
        text: "#F4F4F5",
        textDim: "#A1A1AA",
        border: "#27272A",
        surface: {
            base: "#18181B",
            hover: "#27272A",
            active: "#3F3F46"
        }
    },
    sizes: {
        margin: 12,
        textHeight: 42,
        borderRadius: 8,
        fontSize: {
            small: 12,
            normal: 14,
            title: 16,
            large: 18
        },
        spacing: {
            xs: 4,
            sm: 8,
            md: 12,
            lg: 16
        }
    },
    typography: {
        fonts: {
            primary: "'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif"
        },
        weights: {
            normal: 400,
            medium: 500,
            semibold: 600,
            bold: 700
        }
    },
    promptTools: {
        quickActions: [
            { icon: "📜", action: "history", title: "History" },
            { icon: "🗑️", action: "clear", title: "Clear" }
        ]
    },
    controls: {
        button: {
            size: 20,
            padding: 4,
            margin: 4,
            borderRadius: 4,
            colors: {
                bg: "#2D2D3F",
                bgHover: "#313244",
                bgDisabled: "#1E1E2E",
                text: "#CDD6F4",
                textDisabled: "#45475A",
                border: "#45475A"
            }
        }
    },
    effects: {
        glow: "0 0 10px rgba(139, 92, 246, 0.1)",
        hover: "0 2px 4px rgba(0, 0, 0, 0.1)",
        pressed: "0 1px 2px rgba(0, 0, 0, 0.05)"
    }
};

const fontStyles = document.createElement('style');
fontStyles.textContent = `
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
    .multitext-node {
        font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    }
`;
document.head.appendChild(fontStyles);

const Utils = {
    drawRoundedRect(ctx, x, y, w, h, r) {
        if (!ctx) return;
        ctx.beginPath();
        ctx.moveTo(x + r, y);
        ctx.lineTo(x + w - r, y);
        ctx.quadraticCurveTo(x + w, y, x + w, y + r);
        ctx.lineTo(x + w, y + h - r);
        ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
        ctx.lineTo(x + r, y + h);
        ctx.quadraticCurveTo(x, y + h, x, y + h - r);
        ctx.lineTo(x, y + r);
        ctx.quadraticCurveTo(x, y, x + r, y);
        ctx.fill();
    },
    truncateText(ctx, text, maxWidth) {
        const words = text.split(' ');
        let truncatedText = '';
        let currentWidth = 0;
        for (const word of words) {
            const wordWidth = ctx.measureText(word).width;
            if (currentWidth + wordWidth > maxWidth) {
                truncatedText += '...';
                break;
            }
            truncatedText += word + ' ';
            currentWidth += wordWidth + ctx.measureText(' ').width;
        }
        return truncatedText.trim();
    },
    textWidthCache: new Map(),
    
    measureTextCached(ctx, text) {
        if (!this.textWidthCache.has(text)) {
            this.textWidthCache.set(text, ctx.measureText(text).width);
        }
        return this.textWidthCache.get(text);
    },

    truncateTextEfficient(ctx, text, maxWidth) {
        if (!text) return '';
        const cached = this.measureTextCached(ctx, text);
        if (cached <= maxWidth) return text;

        const ellipsis = '...';
        const ellipsisWidth = this.measureTextCached(ctx, ellipsis);
        let low = 0;
        let high = text.length;
        let best = 0;

        while (low <= high) {
            const mid = (low + high) >>> 1;
            const slice = text.slice(0, mid);
            const width = this.measureTextCached(ctx, slice) + ellipsisWidth;
            
            if (width <= maxWidth) {
                best = mid;
                low = mid + 1;
            } else {
                high = mid - 1;
            }
        }

        return text.slice(0, best) + ellipsis;
    }
};

const UXUtils = {
    createRipple(ctx, x, y, progress) {
        const maxRadius = THEME.interactions.ripple.size;
        const radius = maxRadius * progress;
        const alpha = 1 - progress;
        
        ctx.save();
        ctx.globalAlpha = alpha;
        ctx.fillStyle = THEME.interactions.ripple.color;
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, Math.PI * 2);
        ctx.fill();
        ctx.restore();
    },

    drawHoverEffect(ctx, x, y, width, height, progress) {
        ctx.save();
        ctx.globalAlpha = 0.15;
        ctx.fillStyle = THEME.colors.bgHover;
        Utils.drawRoundedRect(ctx, x, y, width, height, 4);
        ctx.restore();
    },

    drawTooltip(ctx, text, x, y) {
        if (!text) return;
        
        const padding = 8;
        const fontSize = 12;
        
        ctx.save();
        
        ctx.font = `${fontSize}px ${THEME.typography.fonts.primary}`;
        ctx.textBaseline = "middle";
        ctx.textAlign = "left";
        
        const metrics = ctx.measureText(text);
        const tooltipWidth = metrics.width + (padding * 2);
        const tooltipHeight = fontSize + (padding * 2);

        let tooltipX = x;
        let tooltipY = y - tooltipHeight - 8;

        if (tooltipX + tooltipWidth > ctx.canvas.width - 8) {
            tooltipX = ctx.canvas.width - tooltipWidth - 8;
        }

        if (tooltipX < 8) {
            tooltipX = 8;
        }

        if (tooltipY < 8) {
            tooltipY = y + 24;
        }

        ctx.fillStyle = THEME.colors.bgActive;
        ctx.shadowColor = "rgba(0,0,0,0.2)";
        ctx.shadowBlur = 8;
        ctx.shadowOffsetY = 2;
        Utils.drawRoundedRect(ctx, tooltipX, tooltipY, tooltipWidth, tooltipHeight, 4);
        
        ctx.shadowColor = "transparent";
        ctx.fillStyle = THEME.colors.text;
        ctx.fillText(text, tooltipX + padding, tooltipY + (tooltipHeight / 2));
        
        ctx.restore();
    }
};

const STYLES = {
    row: {
        height: 32,
        padding: 8,
        margin: 1,
        colors: {
            bg: {
                empty: "rgba(40, 44, 52, 0.4)",
                filled: "rgba(40, 44, 52, 0.6)"
            },
            text: {
                empty: "rgba(255, 255, 255, 0.5)",
                filled: "rgba(255, 255, 255, 0.9)"
            }
        }
    },
    weight: {
        width: 160,
        line: {
            width: 40,
            height: 2,
            colors: {
                bg: "rgba(255, 255, 255, 0.1)",
                fill: "#89b4fa"
            }
        }
    },
    button: {
        size: 20,
        margin: 4,
        colors: {
            active: "#2D2D3F",
            disabled: "#1E1E2E",
            text: "#CDD6F4",
            textDisabled: "#45475A"
        }
    }
};

const Renderer = {
    drawPromptRow(ctx, x, y, text, rowWidth, rowHeight, radius) {
        ctx.save();
        ctx.fillStyle = THEME.colors.surface.base;
        ctx.shadowColor = "rgba(0,0,0,0.06)";
        ctx.shadowBlur = 2;
        ctx.shadowOffsetY = 1;
        Utils.drawRoundedRect(ctx, x, y, rowWidth, rowHeight, radius);
        ctx.restore();

        ctx.strokeStyle = THEME.colors.border;
        ctx.lineWidth = 1;
        ctx.beginPath();
        this.roundedRect(ctx, x, y, rowWidth, rowHeight, radius);
        ctx.stroke();

        ctx.fillStyle = THEME.colors.text;
        ctx.font = `400 13px ${THEME.typography.fonts.primary}`;
        const truncatedText = Utils.truncateTextEfficient(ctx, text, rowWidth - 100);
        // in Renderer.drawPromptRow or similar:
        const toggleWidth = 30;  // or whatever the checkbox+margin is
        ctx.fillText(truncatedText, x + toggleWidth + 10, y + rowHeight/2 + 4);
        
    },

    drawControlButtons(ctx, x, y, buttonSize, isAddEnabled, isRemoveEnabled) {
        const radius = 4;
        const iconSize = 10;

        ctx.save();
        ctx.fillStyle = THEME.colors.surface.base;
        ctx.strokeStyle = THEME.colors.border;
        ctx.lineWidth = 1;
        Utils.drawRoundedRect(ctx, x, y, buttonSize * 2 + 1, buttonSize, radius);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(x + buttonSize, y);
        ctx.lineTo(x + buttonSize, y + buttonSize);
        ctx.stroke();

        ctx.strokeStyle = isRemoveEnabled ? THEME.colors.accent : THEME.colors.textDim;
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(x + (buttonSize - iconSize)/2, y + buttonSize/2);
        ctx.lineTo(x + (buttonSize + iconSize)/2, y + buttonSize/2);
        ctx.stroke();

        ctx.strokeStyle = isAddEnabled ? THEME.colors.accent : THEME.colors.textDim;
        ctx.beginPath();
        const centerX = x + buttonSize * 1.5;
        ctx.moveTo(centerX - iconSize/2, y + buttonSize/2);
        ctx.lineTo(centerX + iconSize/2, y + buttonSize/2);
        ctx.moveTo(centerX, y + buttonSize/2 - iconSize/2);
        ctx.lineTo(centerX, y + buttonSize/2 + iconSize/2);
        ctx.stroke();
        
        ctx.restore();
    },

    roundedRect(ctx, x, y, width, height, radius) {
        ctx.beginPath();
        ctx.moveTo(x + radius, y);
        ctx.lineTo(x + width - radius, y);
        ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
        ctx.lineTo(x + width, y + height - radius);
        ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
        ctx.lineTo(x + radius, y + height);
        ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
        ctx.lineTo(x, y + radius);
        ctx.quadraticCurveTo(x, y, x + radius, y);
        ctx.closePath();
    }
};

const MultiTextNode = {
    onNodeCreated() {
        if (this.htmlElement) {
            this.htmlElement.classList.add('multitext-node');
        }
        
        this.setupWidgets();
        
        const savedPromptCount = localStorage.getItem('multitext_prompt_count');
        this.activePrompts = savedPromptCount ? parseInt(savedPromptCount) : 5;  // Set default to 5 prompts

        this.maxPrompts = 20;

        // **NEW: Load Single/Multi mode from storage**
        const savedMode = localStorage.getItem('multitext_single_prompt');
        this.isSinglePromptMode = savedMode === "true";  // Convert from string to boolean

        this.applyPromptMode(); // Apply correct mode on startup 
        this.updateNodeSize();
        
        this.hoverStates = new Map();
        this.ripples = [];
        
        this.tooltipState = {
            visible: false,
            text: '',
            x: 0,
            y: 0
        };

        this.currentHoverIndex = -1;

        this.visualWidgets = Array(20).fill(null).map((_, i) => ({
            index: i,
            isHovered: false
        }));
        
        this.loadFonts();
    },
    setupWidgets() {
        for (let i = 1; i <= 20; i++) {
            const textWidget = ComfyWidgets["STRING"](this, `text${i}`, ["STRING", { 
                multiline: true,
                visible: false
            }], app);
             // NEW: label{i} widget
            const labelWidget = ComfyWidgets["STRING"](
                this,
                `label${i}`,
                ["STRING", { multiline: false, visible: false }],
                app
            );

              // NEW: enabled{i} widget
            const enabledWidget = ComfyWidgets["BOOLEAN"](
                this,
                `enabled${i}`, // name it uniquely
                ["BOOLEAN", { default: true, visible: false }],
                app
            );
            

            if (textWidget?.widget) {
                textWidget.widget.computeSize = () => [0, -4];
                textWidget.widget.hidden = true;
            }
            if (labelWidget?.widget) {
                labelWidget.widget.computeSize = () => [0, -4];
                labelWidget.widget.hidden = true;
            }
            if (enabledWidget?.widget) {
                enabledWidget.widget.computeSize = () => [0, -4];
                enabledWidget.widget.hidden = true; // so it doesn't appear by default
              }
        }

        const separator = ComfyWidgets["STRING"](this, "separator", ["STRING", { 
            default: " ",
            visible: false,
            hidden: true,
        }], app);
        const active = ComfyWidgets["BOOLEAN"](this, "active", ["BOOLEAN", { 
            default: true,
            visible: false,
            hidden: true, 
        }], app);

        if (separator?.widget) {
            separator.widget.hidden = true;
            separator.widget.computeSize = () => [0, -4];            
            this.separator = separator;
        }
        if (active?.widget) {
            active.widget.hidden = true;
            active.widget.computeSize = () => [0, -4];
            
        }

        this.serialize_widgets = true;
        this.quickActions = THEME.promptTools.quickActions;
    },

    setupVisualWidgets() {
        this.visualWidgets = [];
        for (let i = 1; i <= 20; i++) {
            this.visualWidgets.push({
                index: i,
                isHovered: false
            });
        }
    },
    applyPromptMode() {
        if (this.isSinglePromptMode) {
            // **Disable all rows except the first**
            for (let i = 1; i < this.activePrompts; i++) {
                const enabledWidget = this.widgets.find(w => w.name === `enabled${i+1}`);
                if (enabledWidget) enabledWidget.value = false;
            }
        }
        this.setDirtyCanvas(true);
    },    

    onMouseDown(event, pos, ctx) {
        if (event.button === 0) {
            const controls = this.isInsideControlButtons(pos[0], pos[1]);
            
            if (controls.add) {
                this.addPrompt();
                return true;
            } else if (controls.remove) {
                this.removePrompt();
                return true;
            } else if (controls.toggle) { // Handle toggle switch click
                this.isSinglePromptMode = !this.isSinglePromptMode;
                localStorage.setItem('multitext_single_prompt', this.isSinglePromptMode); // **Save state**
                this.applyPromptMode(); // Apply the new mode
                this.setDirtyCanvas(true);
                return true;
            } else if (controls.settings) {
                this.openSettingsPopup(pos);
                return true;
            }else if (controls.separator) {
                const separatorMenu = document.createElement('div');
                separatorMenu.style.cssText = `
                    position: fixed;
                    z-index: 10000;
                    background: ${THEME.colors.bg};
                    border: 1px solid ${THEME.colors.border};
                    border-radius: 8px;
                    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
                    padding: 8px;
                    min-width: 180px;
                    font-family: ${THEME.typography.fonts.primary};
                `;

                const title = document.createElement('div');
                title.textContent = 'Select Separator';
                title.style.cssText = `
                    padding: 8px 12px;
                    color: ${THEME.colors.textDim};
                    font-size: 13px;
                    font-weight: 500;
                    border-bottom: 1px solid ${THEME.colors.border};
                    margin-bottom: 4px;
                `;
                separatorMenu.appendChild(title);

                const menuItems = [
                    { label: 'Space', value: ' ', icon: '⎵' },
                    { label: 'Comma', value: ',', icon: ',' }, 
                    { label: 'Comma + Space', value: ', ', icon: ', ' },
                    { label: 'New Line', value: '\\n', icon: '↵' },
                    { label: 'Custom...', value: 'custom', icon: '✏️' }
                ];

                menuItems.forEach(item => {
                    const menuItem = document.createElement('div');
                    menuItem.style.cssText = `
                        padding: 8px 12px;
                        margin: 2px 0;
                        cursor: pointer;
                        border-radius: 6px;
                        display: flex;
                        align-items: center;
                        gap: 8px;
                        color: ${THEME.colors.text};
                        font-size: 13px;
                        transition: all 0.1s ease;

                        &:hover {
                            background: ${THEME.colors.bgHover};
                        }

                        &:active {
                            background: ${THEME.colors.bgActive};
                            transform: translateY(1px);
                        }
                    `;

                    const icon = document.createElement('span');
                    icon.textContent = item.icon;
                    icon.style.cssText = `
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        width: 24px;
                        height: 24px;
                        background: ${THEME.colors.bgActive};
                        border-radius: 4px;
                        font-size: 14px;
                        color: ${THEME.colors.accent};
                    `;

                    const label = document.createElement('span');
                    label.textContent = item.label;
                    label.style.flex = '1';

                    menuItem.appendChild(icon);
                    menuItem.appendChild(label);

                    if (this.separator?.widget?.value === item.value) {
                        menuItem.style.background = THEME.colors.bgActive;
                        icon.style.background = THEME.colors.accent;
                        icon.style.color = THEME.colors.text;
                    }

                    menuItem.onclick = () => {
                        if (item.value === 'custom') {
                            const customInput = document.createElement('input');
                            customInput.type = 'text';
                            customInput.style.cssText = `
                                width: calc(100% - 24px);
                                margin: 8px 12px;
                                padding: 6px 8px;
                                border: 1px solid ${THEME.colors.border};
                                border-radius: 4px;
                                background: ${THEME.colors.bgInput};
                                color: ${THEME.colors.text};
                                font-size: 13px;
                                font-family: ${THEME.typography.fonts.primary};
                            `;
                            customInput.placeholder = 'Enter custom separator...';
                            customInput.maxLength = 10;

                            while (separatorMenu.firstChild) {
                                separatorMenu.firstChild.remove();
                            }

                            const title = document.createElement('div');
                            title.textContent = 'Custom Separator';
                            title.style.cssText = `
                                padding: 8px 12px;
                                color: ${THEME.colors.textDim};
                                font-size: 13px;
                                font-weight: 500;
                                border-bottom: 1px solid ${THEME.colors.border};
                                margin-bottom: 4px;
                            `;
                            separatorMenu.appendChild(title);
                            separatorMenu.appendChild(customInput);

                            const confirmButton = document.createElement('div');
                            confirmButton.textContent = 'OK';
                            confirmButton.style.cssText = `
                                margin: 8px 12px;
                                padding: 6px 12px;
                                text-align: center;
                                background: ${THEME.colors.accent};
                                color: ${THEME.colors.text};
                                border-radius: 4px;
                                cursor: pointer;
                                font-weight: 500;
                                
                                &:hover {
                                    background: ${THEME.colors.accentHover};
                                }
                            `;
                            separatorMenu.appendChild(confirmButton);

                            customInput.focus();

                            const applyCustomSeparator = () => {
                                const customValue = customInput.value;
                                if (customValue && this.separator?.widget) {
                                    this.separator.widget.value = customValue;
                                    if (this.separator.widget.callback) {
                                        this.separator.widget.callback(customValue);
                                    }
                                    this.setDirtyCanvas(true);
                                    if (app.graph) {
                                        app.graph.change();
                                        app.graph.setDirtyCanvas(true);
                                    }
                                }
                                separatorMenu.remove();
                            };

                            confirmButton.onclick = applyCustomSeparator;
                            customInput.onkeydown = (e) => {
                                if (e.key === 'Enter') {
                                    applyCustomSeparator();
                                } else if (e.key === 'Escape') {
                                    separatorMenu.remove();
                                }
                            };
                        } else {
                            if (this.separator?.widget) {
                                this.separator.widget.value = item.value === '\\n' ? '\n' : item.value;
                                if (this.separator.widget.callback) {
                                    this.separator.widget.callback(this.separator.widget.value);
                                }
                                this.setDirtyCanvas(true);
                                if (app.graph) {
                                    app.graph.change();
                                    app.graph.setDirtyCanvas(true);
                                }
                            }
                            separatorMenu.remove();
                        }
                    };
                    separatorMenu.appendChild(menuItem);
                });

                const rect = ctx.canvas.getBoundingClientRect();
                separatorMenu.style.left = `${rect.left + pos[0]}px`;
                separatorMenu.style.top = `${rect.top + pos[1]}px`;
                
                const closeMenu = (e) => {
                    if (!separatorMenu.contains(e.target)) {
                        separatorMenu.remove();
                        document.removeEventListener('mousedown', closeMenu);
                    }
                };
                document.addEventListener('mousedown', closeMenu);

                document.body.appendChild(separatorMenu);

                const menuRect = separatorMenu.getBoundingClientRect();
                if (menuRect.right > window.innerWidth) {
                    separatorMenu.style.left = `${window.innerWidth - menuRect.width - 10}px`;
                }
                if (menuRect.bottom > window.innerHeight) {
                    separatorMenu.style.top = `${window.innerHeight - menuRect.height - 10}px`;
                }

                return true;
            }
            
                  // check if user clicked a row
                  const index = this.getHoveredWidgetIndex(pos);
                  if (index !== -1 && index < this.activePrompts) {
                    if (this.isInsideToggle(pos, index)) {
                        this.togglePromptRow(index);
                        return true;
                    }            
                    this.showEditDialog(index + 1);
                }
            }
            return false;              
          },

          isInsideToggle(pos, rowIndex) {
            const margin = STYLES.row.padding;
            const rowHeight = STYLES.row.height;
            const rowMargin = STYLES.row.margin;
        
            const y = margin + rowIndex * (rowHeight + rowMargin);
            const toggleWidth = 30; // Width of the toggle switch
            const toggleHeight = 14; // Height of the toggle switch
            const togglePadding = 6; // Padding for the clickable region
        
            const x1 = margin + togglePadding; // Left position of the toggle
            const y1 = y + rowHeight / 2 - toggleHeight / 2; // Centered vertically
        
            // Ensure that both the track and the handle of the toggle are clickable
            return (
                pos[0] >= x1 && // Inside the left side
                pos[0] <= x1 + toggleWidth && // Inside the right side
                pos[1] >= y1 && // Inside the top
                pos[1] <= y1 + toggleHeight // Inside the bottom
            );
        }
        ,

        togglePromptRow(index) {
            const enabledWidget = this.widgets.find(w => w.name === `enabled${index+1}`);
        
            if (this.isSinglePromptMode) {
                // **Disable all other rows, enable only the clicked row**
                for (let i = 0; i < this.activePrompts; i++) {
                    const widget = this.widgets.find(w => w.name === `enabled${i+1}`);
                    if (widget) widget.value = (i === index); // Enable only the clicked one
                }
            } else {
                // **Multi mode: Allow toggling freely**
                if (enabledWidget) {
                    enabledWidget.value = !enabledWidget.value;
                }
            }
        
            this.setDirtyCanvas(true);
        },        

    showEditDialog(index) {
        try {
            const textWidget = this.widgets.find(w => w.name === `text${index}`);
            const labelWidget  = this.widgets.find(w => w.name === `label${index}`);
            if (!textWidget || !labelWidget) return;

            const dialog = document.createElement('div');
            dialog.style.cssText = `
            position: fixed;
            z-index: 10000;
            background: ${THEME.colors.bg};
            padding: ${THEME.sizes.spacing.lg}px;
            border-radius: ${THEME.sizes.borderRadius * 2}px;
            border: 1px solid ${THEME.colors.border};
            box-shadow: 0 8px 32px rgba(0,0,0,0.4);
            color: ${THEME.colors.text};
            font-family: ${THEME.typography.fonts.primary};
            width: 320px;
            transition: all 0.2s;
            /* ADDED: a max-height  */
            max-height: 80vh;       /* 80% of viewport height */s
        `;

            const content = document.createDocumentFragment();
            
            const header = document.createElement('div');
            header.style.cssText = `
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin: -${THEME.sizes.spacing.lg}px -${THEME.sizes.spacing.lg}px ${THEME.sizes.spacing.md}px;
                padding: ${THEME.sizes.spacing.md}px;
                background: ${THEME.colors.bgActive};
                border-bottom: 1px solid ${THEME.colors.border};
                cursor: move;
                user-select: none;
                border-radius: ${THEME.sizes.borderRadius * 2}px ${THEME.sizes.borderRadius * 2}px 0 0;
            `;

            let isDragging = false;
            let currentX;
            let currentY;
            let initialX;
            let initialY;
            let xOffset = 0;
            let yOffset = 0;

            header.addEventListener('mousedown', dragStart);
            document.addEventListener('mousemove', drag);
            document.addEventListener('mouseup', dragEnd);

            function dragStart(e) {
                if (e.target === header || e.target === title) {
                    isDragging = true;
                    dialog.style.transition = 'none';
                    header.style.cursor = 'grabbing';

                    const rect = dialog.getBoundingClientRect();
                    xOffset = e.clientX - rect.left;
                    yOffset = e.clientY - rect.top;
                }
            }

            function drag(e) {
                if (isDragging) {
                    e.preventDefault();
                    
                    const x = e.clientX - xOffset;
                    const y = e.clientY - yOffset;
                    
                    dialog.style.left = `${x}px`;
                    dialog.style.top = `${y}px`;
                    dialog.style.transform = 'none';
                }
            }

            function dragEnd(e) {
                isDragging = false;
                header.style.cursor = 'move';
            }
            

            // Title (Left-aligned)
            const title = document.createElement('div');
            title.textContent = `Prompt ${index}`;
            title.style.cssText = `
                font-size: ${THEME.sizes.fontSize.title}px;
                font-weight: ${THEME.typography.weights.semibold};
                color: ${THEME.colors.text};
                flex-grow: 1; /* Allows it to take up available space */
            `;

            // Right-side button container (Save + Close)
            const buttonContainer = document.createElement('div');
            buttonContainer.style.cssText = `
                display: flex;
                align-items: center;
                gap: 8px;
                margin-left: auto; /* Pushes it to the right */
            `;

            // Save Button
            const saveButton = document.createElement('button');
            saveButton.textContent = 'Save';
            saveButton.style.cssText = `
                max-width: 100px;
                padding: 8px 16px;
                background: ${THEME.colors.accent};
                border: none;
                border-radius: 8px;
                color: white;
                font-size: 14px;
                font-weight: 600;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: background 0.2s;

                &:hover {
                    background: ${THEME.colors.accentLight};
                }
            `;

            saveButton.onclick = () => {
                labelWidget.value = labelInput.value;
                textWidget.value = textarea.value;
                this.saveToHistory(textarea.value);
                dialog.remove();
                this.setDirtyCanvas(true);
            };

            // Close Button (X)
            const closeBtn = document.createElement('button');
            closeBtn.innerHTML = '×';
            closeBtn.style.cssText = `
                background: none;
                border: none;
                color: ${THEME.colors.textDim};
                font-size: 24px;
                cursor: pointer;
                padding: 0;
                width: 32px;
                height: 32px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 8px;
                transition: color 0.2s;

                &:hover {
                    color: ${THEME.colors.text};
                }
            `;

            closeBtn.onclick = () => dialog.remove();

            // Append Save + Close inside buttonContainer
            buttonContainer.appendChild(saveButton);
            buttonContainer.appendChild(closeBtn);

            // Append elements to header
            header.appendChild(title);
            header.appendChild(buttonContainer);

            // Append header to the content
            content.appendChild(header);

            // **NEW: Scrollable Content Wrapper**
            const contentWrapper = document.createElement('div');
            contentWrapper.style.cssText = `
                flex-grow: 1;
                overflow-y: auto;
                padding: 0px;
                margin: -${THEME.sizes.spacing.sm}px;
                scrollbar-width: thin;
                scrollbar-color: ${THEME.colors.border} transparent;
                max-height: calc(80vh - 60px); /* Adjust based on header height */
            `;
            content.appendChild(contentWrapper);      
            
            const labelGroup = document.createElement('div');
            labelGroup.style.cssText = `
              display: flex;
              flex-direction: column;
              margin-bottom: 8px;
            `;
        
            const labelLabel = document.createElement('label');
            labelLabel.textContent = 'Prompt Name:';
            labelLabel.style.cssText = `
              color: ${THEME.colors.textDim};
              font-size: ${THEME.sizes.fontSize.normal}px;
              margin-bottom: 4px;
            `;
        
            const labelInput = document.createElement('input');
            labelInput.type = 'text';
            labelInput.value = labelWidget.value || '';  // existing label or empty
            labelInput.style.cssText = `
              width: 100%;
              background: ${THEME.colors.surface.base};
              border: 1px solid ${THEME.colors.border};
              border-radius: 4px;
              padding: 6px;
              color: ${THEME.colors.text};
              font-family: ${THEME.typography.fonts.primary};
            `;
        
            labelGroup.appendChild(labelLabel);
            labelGroup.appendChild(labelInput);
            contentWrapper.appendChild(labelGroup);

            const textarea = document.createElement('textarea');
            textarea.value = textWidget.value || '';
            textarea.style.cssText = `
                width: 100%;
                height: 120px;
                background: ${THEME.colors.surface.base};
                border: 1px solid ${THEME.colors.border};
                border-radius: ${THEME.sizes.borderRadius}px;
                padding: ${THEME.sizes.spacing.md}px;
                color: ${THEME.colors.text};
                font-size: ${THEME.sizes.fontSize.normal}px;
                font-family: ${THEME.typography.fonts.primary};
                line-height: 1.5;
                resize: vertical;
                margin-bottom: ${THEME.sizes.spacing.md}px;
            `;
            contentWrapper.appendChild(textarea);

            const ToolGroup = document.createElement('div');
            ToolGroup.style.cssText = `
                display: flex;
                align-items: center;
                gap: 8px;
                margin-top: 0px;
            `;

            contentWrapper.appendChild(ToolGroup);

            const toolbar = document.createElement('div');
            toolbar.style.cssText = `
                display: flex;
                gap: 4px;
                margin-bottom: 12px;
                position: relative;
            `;

            const historyDropdown = document.createElement('div');
            historyDropdown.className = 'history-dropdown';
            historyDropdown.style.cssText = `
                display: none;
                position: absolute;
                top: 32px;
                left: 0;
                width: 100%;
                max-height: 200px;
                overflow-y: auto;
                background: ${THEME.colors.surface.base};
                border: 1px solid ${THEME.colors.border};
                border-radius: 4px;
                margin-top: 4px;
                z-index: 1000;
                box-shadow: ${THEME.effects.hover};
            `;

            THEME.promptTools.quickActions.forEach(action => {
                const btn = document.createElement('button');
                btn.innerHTML = action.icon;
                btn.title = action.title;
                btn.style.cssText = `
                    width: 28px;
                    height: 28px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: ${THEME.colors.surface.base};
                    border: 1px solid ${THEME.colors.border};
                    border-radius: 4px;
                    color: ${THEME.colors.text};
                    cursor: pointer;
                    transition: all 0.2s;
                    padding: 0;
                    font-size: 14px;

                    &:hover {
                        background: ${THEME.colors.surface.hover};
                        border-color: ${THEME.colors.accent};
                    }

                    &:active {
                        transform: translateY(1px);
                    }
                `;

                btn.onclick = () => {
                    if (action.action === 'history') {
                        historyDropdown.style.display = 
                            historyDropdown.style.display === 'none' ? 'block' : 'none';
                    } else {
                        this.handleQuickAction(action.action, textarea);
                    }
                };

                ToolGroup.appendChild(btn);
            });

            const history = this.loadPromptHistory();
            if (history.length > 0) {
                history.forEach(item => {
                    const historyItem = document.createElement('div');
                    historyItem.style.cssText = `
                        padding: 8px 12px;
                        cursor: pointer;
                        border-bottom: 1px solid ${THEME.colors.border};
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        gap: 8px;
                        &:hover {
                            background: ${THEME.colors.surface.hover};
                        }
                        &:last-child {
                            border-bottom: none;
                        }
                    `;

                    const textContent = document.createElement('div');
                    textContent.style.cssText = `
                        flex: 1;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    `;
                    textContent.textContent = item.text;

                    const deleteBtn = document.createElement('button');
                    deleteBtn.innerHTML = '🗑️';
                    deleteBtn.title = 'Delete from history';
                    deleteBtn.style.cssText = `
                        background: none;
                        border: none;
                        color: ${THEME.colors.textDim};
                        font-size: 12px;
                        padding: 4px;
                        cursor: pointer;
                        opacity: 0.6;
                        transition: all 0.2s;
                        display: none;

                        &:hover {
                            opacity: 1;
                            color: ${THEME.colors.error || '#ff4444'};
                        }
                    `;

                    historyItem.onmouseenter = () => {
                        deleteBtn.style.display = 'block';
                    };
                    historyItem.onmouseleave = () => {
                        deleteBtn.style.display = 'none';
                    };

                    deleteBtn.onclick = (e) => {
                        e.stopPropagation();
                        const history = this.loadPromptHistory();
                        const updatedHistory = history.filter(h => h.text !== item.text);
                        localStorage.setItem('multitext_history', JSON.stringify(updatedHistory));
                        historyItem.remove();

                        if (updatedHistory.length === 0) {
                            const emptyMessage = document.createElement('div');
                            emptyMessage.style.cssText = `
                                padding: 8px 12px;
                                color: ${THEME.colors.textDim};
                                text-align: center;
                            `;
                            emptyMessage.textContent = 'History is empty';
                            historyDropdown.appendChild(emptyMessage);
                        }
                    };

                    textContent.onclick = () => {
                        this._lastValues.push(textarea.value);
                        textarea.value = item.text;
                        textarea.dispatchEvent(new Event('input'));
                        historyDropdown.style.display = 'none';
                    };

                    historyItem.appendChild(textContent);
                    historyItem.appendChild(deleteBtn);
                    historyDropdown.appendChild(historyItem);
                });
            } else {
                const emptyMessage = document.createElement('div');
                emptyMessage.style.cssText = `
                    padding: 8px 12px;
                    color: ${THEME.colors.textDim};
                    text-align: center;
                `;
                emptyMessage.textContent = 'History is empty';
                historyDropdown.appendChild(emptyMessage);
            }

            ToolGroup.appendChild(historyDropdown);
            contentWrapper.appendChild(toolbar);

            
            dialog.appendChild(content);
            document.body.appendChild(dialog);
            // 1) Get the graph container’s bounding box
            const container = document.querySelector('.graph-canvas-container');
            const containerRect = container.getBoundingClientRect();

            // 2) Position the dialog (desiredLeft, desiredTop = where you'd like it to go)
            const dialogRect = dialog.getBoundingClientRect();
            let desiredLeft = (window.innerWidth - dialogRect.width) / 2;
            let desiredTop  = (window.innerHeight - dialogRect.height) / 2;

            // 3) Clamp so the dialog stays fully within containerRect
            //    (left/right, top/bottom)
            const clampedLeft = Math.max(
            containerRect.left,
            Math.min(containerRect.right - dialogRect.width, desiredLeft)
            );

            const clampedTop = Math.max(
            containerRect.top,
            Math.min(containerRect.bottom - dialogRect.height, desiredTop)
            );

            // 4) Apply the clamped coords
            dialog.style.left = clampedLeft + 'px';
            dialog.style.top  = clampedTop + 'px';
            dialog.style.transform = 'none';

            textarea.focus();

        } catch (error) {
            console.error('Dialog oluşturma hatası:', error);
        }
    },

    onDrawForeground(ctx) {
        if (!ctx || this.flags.collapsed) return;

        const margin = STYLES.row.padding;
        const rowHeight = STYLES.row.height;
        const rowMargin = STYLES.row.margin;
        const rowWidth = this.size[0] - (margin * 2);
        let y = margin;

        for (let i = 0; i < this.activePrompts; i++) {
            const labelWidget  = this.widgets.find(w => w.name === `label${i+1}`);
            const textWidget = this.widgets.find(w => w.name === `text${i + 1}`);
            const enabledWidget = this.widgets.find(w => w.name === `enabled${i+1}`);
            
            if (labelWidget && textWidget) {
                if (i === this.currentHoverIndex) {
                    UXUtils.drawHoverEffect(
                        ctx,
                        margin,
                        y,
                        this.size[0] - (margin * 2),
                        rowHeight,
                        1
                    );
                }

                Renderer.drawPromptRow(
                    ctx, 
                    margin, 
                    y, 
                    labelWidget.value || textWidget.value || `Prompt ${i + 1}`,
                    rowWidth,
                    rowHeight,
                    4
                );

                // Draw a small toggle box on the left side:
                this.drawToggle(
                    ctx,
                    margin + 4,      // x offset
                    y + rowHeight/2, // center y
                    enabledWidget.value // true/false
                );
                y += rowHeight + rowMargin;
            }
        }

        this.drawControlButtons(ctx);

        if (this.tooltipState.visible) {
            UXUtils.drawTooltip(
                ctx,
                this.tooltipState.text,
                this.tooltipState.x,
                this.tooltipState.y
            );
        }
    },

    drawToggle(ctx, x, centerY, isEnabled) {
        const width = 30;  // Width of the switch
        const height = 14;  // Height of the switch
        const radius = height / 2;  // Rounded corners
        const toggleX = x;  // X-position for the toggle
        const toggleY = centerY - height / 2;  // Center the toggle vertically
        
        // Background color (track)
        ctx.save();
        ctx.fillStyle = isEnabled ? THEME.colors.accent : THEME.colors.border;
        ctx.beginPath();
        ctx.roundRect(toggleX, toggleY, width, height, radius);
        ctx.fill();
    
        // Handle (circle inside the toggle)
        const handleRadius = radius - 2;
        const handleX = isEnabled ? toggleX + width - handleRadius * 2 - 2 : toggleX + 2; // Shift handle based on state
        const handleY = toggleY + 2; // Handle Y position
    
        ctx.fillStyle = THEME.colors.text;
        ctx.beginPath();
        ctx.arc(handleX + handleRadius, handleY + handleRadius, handleRadius, 0, Math.PI * 2);
        ctx.fill();
    
        ctx.restore();
    },    

    drawPromptRow(ctx, x, y, index, text) {
        const rowWidth = this.size[0] - (STYLES.row.padding * 2);
        const centerY = y + (STYLES.row.height/2) + 4;
        
        const maxTextWidth = rowWidth
        
        const displayText = text || `Prompt ${index + 1}`;
        Renderer.drawPromptRow(ctx, x, y, displayText, rowWidth);
    },

    updateCache() {
        const canvas = document.createElement('canvas');
        canvas.width = this.size[0];
        canvas.height = this.size[1];
        const ctx = canvas.getContext('2d');
        
        if (!ctx) return;
        
        this.drawNodeContents(ctx);
        this.cachedCanvas = canvas;
        this.lastUpdate = Date.now();
    },

    drawFromCache(ctx) {
        if (!ctx || this.flags.collapsed) return;
        
        if (this.cachedCanvas) {
            ctx.drawImage(this.cachedCanvas, 0, 0);
        }
    },

    requestDraw() {
        if (this._drawRequested) return;
        this._drawRequested = true;
        requestAnimationFrame(() => {
            this._drawRequested = false;
            this.setDirtyCanvas(true);
        });
    },

    getHoveredWidgetIndex(pos) {
        const margin = STYLES.row.padding;
        const rowHeight = STYLES.row.height;
        const rowMargin = STYLES.row.margin;
        
        const relativeY = pos[1] - margin;
        const rowIndex = Math.floor(relativeY / (rowHeight + rowMargin));
        
        if (rowIndex >= 0 && 
            rowIndex < this.activePrompts && 
            pos[0] >= margin && 
            pos[0] <= this.size[0] - margin && 
            relativeY >= 0 && 
            relativeY <= this.activePrompts * (rowHeight + rowMargin)) {
            return rowIndex;
        }
        
        return -1;
    },

    updateAnimations() {
        this.hoverStates.forEach(state => {
            if (state.isHovered && state.progress < 1) {
                state.progress = Math.min(1, state.progress + 0.1);
            } else if (!state.isHovered && state.progress > 0) {
                state.progress = Math.max(0, state.progress - 0.1);
            }
        });

        if (this.hoverStates.some(state => state.progress > 0 && state.progress < 1) ||
            this.ripples.length > 0) {
            this.requestDraw();
        }
    },

    loadPromptHistory() {
        return JSON.parse(localStorage.getItem('multitext_history') || '[]');
    },

    saveToHistory(text) {
        if (!text?.trim()) return;
        
        try {
            const history = this.loadPromptHistory();
            const newItem = { text, timestamp: Date.now() };
            
            const existingIndex = history.findIndex(item => item.text === text);
            if (existingIndex !== -1) {
                history[existingIndex] = newItem;
            } else {
                history.unshift(newItem);
            }
            
            localStorage.setItem('multitext_history', JSON.stringify(history.slice(0, 20)));
        } catch (error) {
            console.error('Error saving history:', error);
        }
    },

    handleQuickAction(action, textarea) {
        switch (action) {
            case 'clear':
                if (textarea.value) {
                    textarea.value = '';
                    textarea.dispatchEvent(new Event('input'));
                }
                break;
        }
    },

    addPrompt() {
        if (this.activePrompts < this.maxPrompts) {
            this.activePrompts++;
    
            // **Find the new enabledX widget and disable it by default**
            const newEnabledWidget = this.widgets.find(w => w.name === `enabled${this.activePrompts}`);
            if (newEnabledWidget) {
                newEnabledWidget.value = false;
            }
    
            localStorage.setItem('multitext_prompt_count', this.activePrompts.toString());
            this.updateNodeSize();
            this.setDirtyCanvas(true);
        }
    },    

    removePrompt() {
        if (this.activePrompts > 1) {
            const index = this.activePrompts;
            const textWidget = this.widgets.find(w => w.name === `text${index}`);
            
            if (textWidget) textWidget.value = "";
            
            this.activePrompts--;
            localStorage.setItem('multitext_prompt_count', this.activePrompts.toString());
            this.updateNodeSize();
            this.setDirtyCanvas(true);
        }
    },

    // Open the settings popup when the gear icon is clicked
    openSettingsPopup(pos) {
        const popup = new SettingsPopup(this.node);
        popup.open(pos[0], pos[1]);

        // Add controls for active prompt count and separator
        const content = popup.getContentContainer();
        popup.clearContent();  // Clear any existing content

        // Active Prompts
        const activeCountLabel = document.createElement("div");
        activeCountLabel.textContent = "Active Prompts";
        activeCountLabel.style.color = "#fff";
        activeCountLabel.style.fontSize = "12px";
        content.appendChild(activeCountLabel);

        // Buttons for adjusting active prompts
        const buttonRow = document.createElement("div");
        buttonRow.style.display = "flex";
        buttonRow.style.justifyContent = "center";
        content.appendChild(buttonRow);

        const minusBtn = document.createElement("button");
        minusBtn.textContent = "-";
        buttonRow.appendChild(minusBtn);
        
        const plusBtn = document.createElement("button");
        plusBtn.textContent = "+";
        buttonRow.appendChild(plusBtn);

        // Steps input
        const separatorLabel = document.createElement("div");
        separatorLabel.textContent = "Separator";
        separatorLabel.style.color = "#fff";
        separatorLabel.style.fontSize = "12px";
        content.appendChild(separatorLabel);

        const separatorInput = document.createElement("input");
        separatorInput.type = "text";
        separatorInput.value = this.separator || ",";
        content.appendChild(separatorInput);

        // Adjust active count
        minusBtn.addEventListener("click", () => {
            if (this.activePrompts > 1) {
                this.activePrompts--;
                this.updateNodeSize();
                this.setDirtyCanvas(true);
            }
        });

        plusBtn.addEventListener("click", () => {
            if (this.activePrompts < this.maxPrompts) {
                this.activePrompts++;
                this.updateNodeSize();
                this.setDirtyCanvas(true);
            }
        });

        // Separator input change
        separatorInput.addEventListener("change", () => {
            this.separator = separatorInput.value;
            this.setDirtyCanvas(true);
        });
    },

    isInsideControlButtons(x, y) {
        const margin = STYLES.row.padding;
        const buttonSize = THEME.controls.button.size;
        const buttonMargin = THEME.controls.button.margin;
        
        const controlsY = margin + (this.activePrompts * (STYLES.row.height + STYLES.row.margin)) + buttonMargin;
        const addX = this.size[0] - margin - buttonSize;
        const removeX = addX - buttonSize - buttonMargin;
        const separatorX = margin;
        const toggleX = margin + buttonSize + buttonMargin + 10; // Toggle position
        const toggleWidth = 40;
        const toggleHeight = 20;

        return {
            add: x >= addX && x <= addX + buttonSize && 
                 y >= controlsY && y <= controlsY + buttonSize,
            remove: x >= removeX && x <= removeX + buttonSize && 
                   y >= controlsY && y <= controlsY + buttonSize,
            separator: x >= separatorX && x <= separatorX + buttonSize && 
                      y >= controlsY && y <= controlsY + buttonSize,
            toggle: x >= toggleX && x <= toggleX + toggleWidth && 
                    y >= controlsY && y <= controlsY + toggleHeight 
        };
    },

    drawControlButtons(ctx) {
        const margin = STYLES.row.padding;
        const buttonSize = THEME.controls.button.size;
        const buttonMargin = THEME.controls.button.margin;
        const toggleX = margin + buttonSize + buttonMargin + 20; // Position right of separator

        const y = margin + (this.activePrompts * (STYLES.row.height + STYLES.row.margin)) + buttonMargin;
        const addX = this.size[0] - margin - buttonSize;
        const removeX = addX - buttonSize - buttonMargin;

        const separatorX = margin;
        ctx.fillStyle = THEME.controls.button.colors.bg;
        Utils.drawRoundedRect(ctx, separatorX, y, buttonSize, buttonSize, THEME.controls.button.borderRadius);
        
        ctx.fillStyle = THEME.controls.button.colors.text;
        ctx.font = '16px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('⋮', separatorX + buttonSize/2, y + buttonSize/2);

         // **Toggle Switch for Single/Multi-Prompt Mode**
        this.drawToggleSwitch(ctx, toggleX, y, buttonSize, this.isSinglePromptMode);

        ctx.fillStyle = this.activePrompts > 1 ? THEME.controls.button.colors.bg : THEME.controls.button.colors.bgDisabled;
        Utils.drawRoundedRect(ctx, removeX, y, buttonSize, buttonSize, THEME.controls.button.borderRadius);
        
        ctx.strokeStyle = this.activePrompts > 1 ? THEME.controls.button.colors.text : THEME.controls.button.colors.textDisabled;
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(removeX + 6, y + buttonSize/2);
        ctx.lineTo(removeX + buttonSize - 6, y + buttonSize/2);
        ctx.stroke();

        ctx.fillStyle = this.activePrompts < this.maxPrompts ? THEME.controls.button.colors.bg : THEME.controls.button.colors.bgDisabled;
        Utils.drawRoundedRect(ctx, addX, y, buttonSize, buttonSize, THEME.controls.button.borderRadius);
        
        ctx.strokeStyle = this.activePrompts < this.maxPrompts ? THEME.controls.button.colors.text : THEME.controls.button.colors.textDisabled;
        ctx.beginPath();
        ctx.moveTo(addX + 6, y + buttonSize/2);
        ctx.lineTo(addX + buttonSize - 6, y + buttonSize/2);
        ctx.moveTo(addX + buttonSize/2, y + 6);
        ctx.lineTo(addX + buttonSize/2, y + buttonSize - 6);
        ctx.stroke();
    },

    drawToggleSwitch(ctx, x, y, size, isSingleMode) {
        const width = 40; // Toggle width
        const height = 20; // Toggle height
        const radius = height / 2;
        const offset = 15; // Shift to the right by 10px
        const toggleX = x + offset; // Shifted toggle position
        const toggleY = y + (size - height) / 2;
    
        // Labels
        ctx.fillStyle = THEME.colors.textDim;
        ctx.font = `12px ${THEME.typography.fonts.primary}`;
        ctx.textAlign = "right";
        ctx.fillText("Multi", toggleX - 5, toggleY + height / 1.5); // Left Label
    
        ctx.textAlign = "left";
        ctx.fillText("Single", toggleX + width + 4, toggleY + height / 1.5); // Right Label
    
        // Background (track)
        ctx.fillStyle = isSingleMode ? THEME.colors.accent : THEME.colors.border;
        ctx.beginPath();
        ctx.roundRect(toggleX, toggleY, width, height, radius);
        ctx.fill();
    
        // Handle (circle)
        const handleRadius = radius - 3;
        const handleX = isSingleMode ? toggleX + width - handleRadius * 2 - 4 : toggleX + 4;
        const handleY = toggleY + 4;
    
        ctx.fillStyle = THEME.colors.text;
        ctx.beginPath();
        ctx.arc(handleX + handleRadius, handleY + handleRadius, handleRadius, 0, Math.PI * 2);
        ctx.fill();
    },    

    updateNodeSize() {
        const margin = STYLES.row.padding;
        const rowHeight = STYLES.row.height;
        const rowMargin = STYLES.row.margin;
        const buttonSize = THEME.controls.button.size;
        const buttonMargin = THEME.controls.button.margin;

        const totalHeight = margin + 
                           (this.activePrompts * (rowHeight + rowMargin)) + 
                           buttonMargin + 
                           buttonSize + 
                           margin;

        this.size[0] = Math.max(280, this.size[0]);
        this.size[1] = totalHeight;
        this.setDirtyCanvas(true);
    },

    onResize(size) {
        const margin = STYLES.row.padding;
        const rowHeight = STYLES.row.height;
        const rowMargin = STYLES.row.margin;
        const buttonSize = THEME.controls.button.size;
        const buttonMargin = THEME.controls.button.margin;

        const minHeight = margin + 
                         (this.activePrompts * (rowHeight + rowMargin)) + 
                         buttonMargin + 
                         buttonSize + 
                         margin;

        size[0] = Math.max(280, size[0]);
        size[1] = minHeight;

        return size;
    },

    onSerialize(o) {
        if (!o.widgets_values) {
            o.widgets_values = [];
        }
        o.active_prompts = this.activePrompts;
    },

    onConfigure(o) {
        if (o.active_prompts !== undefined) {
            this.activePrompts = o.active_prompts;
            localStorage.setItem('multitext_prompt_count', this.activePrompts.toString());
        }
        this.updateNodeSize();
    },

    onMouseMove(event, pos) {
        const index = this.getHoveredWidgetIndex(pos);
        if(app.ui.settings.getSettingValue("SKB.ShowTooltips", false)){
        if (this.currentHoverIndex === index) {
            if (this.tooltipState.visible) {
                this.tooltipState.x = pos[0];
                this.tooltipState.y = pos[1];
                this.setDirtyCanvas(true);
            }
            return;
        }
        
        this.currentHoverIndex = index;

        this.visualWidgets.forEach((widget, i) => {
            widget.isHovered = i === index;
        });

        if (index !== -1) {
            const textWidget = this.widgets.find(w => w.name === `text${index + 1}`);
            if (textWidget?.value) {
                this.tooltipState = {
                    visible: true,
                    text: textWidget.value,
                    x: pos[0],
                    y: pos[1]
                };
            } else {
                this.tooltipState.visible = false;
            }
        } else {
            this.tooltipState.visible = false;
        }

        this.setDirtyCanvas(true);
        } else {
            this.tooltipState.visible = false;
            this.setDirtyCanvas(true);
        }

        
    },

    combine_text(separator=" ", active=true, kwargs) {
        if (!active) {
            return [""];
        }
    
        const texts = [];
    
        for (let i = 1; i <= 20; i++) {
            // Check if the prompt is enabled
            const isEnabled = kwargs[`enabled${i}`];
            if (isEnabled === false) {
                // skip if disabled
                continue;
            }
    
            const weight = 1.0;
    
            const text = (kwargs[`text${i}`] || "").trim();
            if (text) {
                if (weight === 1.0) {
                    texts.push(text);
                } else {
                    texts.push(text);
                }
            }
        }
    
        return [texts.join(separator)];
    },
    

    loadPresets() {
        try {
            const savedPresets = localStorage.getItem(this.PRESETS_KEY);
            this.presets = savedPresets ? JSON.parse(savedPresets) : {};
        } catch (error) {
            console.error('Presetler yüklenemedi:', error);
            this.presets = {};
        }
    },

    deletePreset(name) {
        delete this.presets[name];
        try {
            localStorage.setItem(this.PRESETS_KEY, JSON.stringify(this.presets));
        } catch (error) {
            console.error('Preset silinemedi:', error);
        }
    },

    showPresetMenu(pos, ctx) {
        const menu = document.createElement('div');
        menu.style.cssText = `
            position: fixed;
            z-index: 10000;
            background: ${THEME.colors.bg};
            border: 1px solid ${THEME.colors.border};
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.2);
            padding: 8px;
            min-width: 200px;
            max-height: 400px;
            overflow-y: auto;
            font-family: ${THEME.typography.fonts.primary};
        `;

        Object.entries(THEME.promptPresets).forEach(([category, { icon, presets }]) => {
            if (presets && presets.length > 0) {
                const categoryTitle = document.createElement('div');
                categoryTitle.style.cssText = `
                    padding: 8px 12px;
                    color: ${THEME.colors.textDim};
                    font-size: 13px;
                    font-weight: 500;
                    display: flex;
                    align-items: center;
                    gap: 8px;
                `;
                categoryTitle.innerHTML = `${icon} ${category.charAt(0).toUpperCase() + category.slice(1)}`;
                menu.appendChild(categoryTitle);

                presets.forEach(preset => {
                    const item = document.createElement('div');
                    item.style.cssText = `
                        display: flex;
                        align-items: center;
                        padding: 6px 12px;
                        cursor: pointer;
                        border-radius: 4px;
                        transition: background 0.1s;
                        color: ${THEME.colors.text};
                        font-size: 13px;
                        position: relative;
                    `;

                    item.addEventListener('mouseenter', () => {
                        item.style.background = THEME.colors.bgHover;
                    });
                    item.addEventListener('mouseleave', () => {
                        item.style.background = 'transparent';
                    });

                    const label = document.createElement('span');
                    label.textContent = preset.label;
                    label.style.flex = '1';
                    item.appendChild(label);

                    const deleteBtn = document.createElement('span');
                    deleteBtn.innerHTML = '✕';
                    deleteBtn.style.cssText = `
                        display: inline-block;
                        margin-left: 8px;
                        color: #ff4444;
                        font-size: 14px;
                        cursor: pointer;
                        padding: 2px 6px;
                    `;

                    deleteBtn.onclick = (e) => {
                        e.stopPropagation();
                        if (confirm(`Are you sure you want to delete the preset "${preset.label}"?`)) {
                            THEME.promptPresets[category].presets = THEME.promptPresets[category].presets.filter(p => 
                                p.value !== preset.value || p.label !== preset.label
                            );
                            try {
                                localStorage.setItem('multitext_category_presets', JSON.stringify(THEME.promptPresets));
                                item.remove();
                            } catch (error) {
                                console.error('Preset silme hatası:', error);
                            }
                        }
                    };

                    item.onclick = () => {
                        const textWidget = this.widgets.find(w => w.name === 'text1');
                        if (textWidget) {
                            textWidget.value = preset.value;
                            if (textWidget.callback) textWidget.callback(preset.value);
                        }
                        menu.remove();
                    };

                    item.appendChild(deleteBtn);
                    menu.appendChild(item);
                });
            }
        });

        const rect = ctx.canvas.getBoundingClientRect();
        const [nodeX, nodeY] = this.pos;
        const width = this.size[0];
        
        menu.style.left = `${rect.left + nodeX + width - 30}px`;
        menu.style.top = `${rect.top + nodeY + 30}px`;

        document.body.appendChild(menu);

        const menuRect = menu.getBoundingClientRect();
        if (menuRect.right > window.innerWidth) {
            menu.style.left = `${window.innerWidth - menuRect.width - 10}px`;
        }
        if (menuRect.bottom > window.innerHeight) {
            menu.style.top = `${window.innerHeight - menuRect.height - 10}px`;
        }

        const closeMenu = (e) => {
            if (!menu.contains(e.target)) {
                menu.remove();
                document.removeEventListener('mousedown', closeMenu);
            }
        };
        document.addEventListener('mousedown', closeMenu);
    },

    isInsidePresetButton(x, y) {
        const [nodeX, nodeY] = this.pos;
        const width = this.size[0];
        const height = this.size[1];
        
        const buttonX = nodeX + width - 30;
        const buttonY = nodeY + 5;
        
        const buttonWidth = 24;
        const buttonHeight = 24;
        
        const isInside = x >= buttonX && x <= buttonX + buttonWidth && 
                        y >= buttonY && y <= buttonY + buttonHeight;
        
        console.log("Preset buton kontrolü:", {
            mouseX: x,
            mouseY: y,
            buttonX,
            buttonY,
            isInside
        });
        
        return isInside;
    },

    showSavePresetDialog(text) {
        const dialog = document.createElement('div');
        dialog.style.cssText = `
            position: fixed;
            z-index: 10000;
            background: ${THEME.colors.bg};
            border: 1px solid ${THEME.colors.border};
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.2);
            padding: 16px;
            min-width: 300px;
            font-family: ${THEME.typography.fonts.primary};
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        `;

        const title = document.createElement('div');
        title.textContent = 'Preset Kaydet';
        title.style.cssText = `
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 16px;
            padding-bottom: 8px;
            border-bottom: 1px solid ${THEME.colors.border};
            color: ${THEME.colors.text};
        `;
        dialog.appendChild(title);

        const nameInput = document.createElement('input');
        nameInput.type = 'text';
        nameInput.placeholder = 'Preset adı';
        nameInput.style.cssText = `
            width: 100%;
            padding: 8px;
            margin-bottom: 12px;
            border: 1px solid ${THEME.colors.border};
            border-radius: 4px;
            background: ${THEME.colors.surface.base};
            color: ${THEME.colors.text};
            font-size: 14px;
        `;
        dialog.appendChild(nameInput);

        const categorySelect = document.createElement('select');
        categorySelect.style.cssText = `
            width: 100%;
            padding: 8px;
            margin-bottom: 16px;
            border: 1px solid ${THEME.colors.border};
            border-radius: 4px;
            background: ${THEME.colors.surface.base};
            color: ${THEME.colors.text};
            font-size: 14px;
        `;

        const categories = [
            { value: 'quality', label: '✨ Quality' },
            { value: 'style', label: '🎨 Style' },
            { value: 'lighting', label: '💡 Lighting' },
            { value: 'camera', label: '📷 Camera' },
            { value: 'mood', label: '🎭 Mood' },
            { value: 'environment', label: '🌍 Environment' }
        ];

        categories.forEach(category => {
            const option = document.createElement('option');
            option.value = category.value;
            option.textContent = category.label;
            categorySelect.appendChild(option);
        });

        dialog.appendChild(categorySelect);

        const buttons = document.createElement('div');
        buttons.style.cssText = `
            display: flex;
                gap: 8px;
            justify-content: flex-end;
        `;

        const cancelBtn = document.createElement('button');
        cancelBtn.textContent = 'İptal';
        cancelBtn.style.cssText = `
            padding: 8px 16px;
            border: 1px solid ${THEME.colors.border};
            border-radius: 4px;
            background: ${THEME.colors.surface.base};
            color: ${THEME.colors.text};
            cursor: pointer;
                &:hover {
                background: ${THEME.colors.surface.hover};
            }
        `;
        cancelBtn.onclick = () => dialog.remove();

        const saveBtn = document.createElement('button');
        saveBtn.textContent = 'Kaydet';
        saveBtn.style.cssText = `
            padding: 8px 16px;
            border: none;
                border-radius: 4px;
            background: ${THEME.colors.accent};
            color: white;
            cursor: pointer;
                &:hover {
                background: ${THEME.colors.accentLight};
            }
        `;
        
        saveBtn.onclick = () => {
            const name = nameInput.value.trim();
            const category = categorySelect.value;
            
            if (name) {
                if (!THEME.promptPresets[category].presets) {
                    THEME.promptPresets[category].presets = [];
                }
                
                THEME.promptPresets[category].presets = THEME.promptPresets[category].presets.filter(preset => 
                    preset.value !== text && preset.label !== name
                );
                
                THEME.promptPresets[category].presets.push({
                    value: text,
                    label: name
                });

                try {
                    localStorage.setItem('multitext_category_presets', JSON.stringify(THEME.promptPresets));
                    console.log(`Preset "${name}" başarıyla ${category} kategorisine kaydedildi`);
                } catch (error) {
                    console.error('Preset kaydetme hatası:', error);
                }

                dialog.remove();
                this.setDirtyCanvas(true);
            }
        };

        buttons.appendChild(cancelBtn);
        buttons.appendChild(saveBtn);
        dialog.appendChild(buttons);

        nameInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                saveBtn.click();
            }
        });

        document.body.appendChild(dialog);
        nameInput.focus();
    },

    createPresetItem(preset, category, menu) {
        const item = document.createElement('div');
        item.style.cssText = `
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 6px 12px;
            cursor: pointer;
            color: ${THEME.colors.text};
            font-size: 13px;
        `;

        const label = document.createElement('span');
        label.textContent = preset.label;
        label.style.flex = '1';
        item.appendChild(label);

        const deleteBtn = document.createElement('div');
        deleteBtn.textContent = '✕';
        deleteBtn.style.cssText = `
            display: inline-block;
            color: red;
            font-size: 16px;
            cursor: pointer;
            padding: 0 8px;
            margin-left: 8px;
        `;

        deleteBtn.onclick = (e) => {
            e.stopPropagation();
            if (confirm(`Are you sure you want to delete the preset "${preset.label}"?`)) {
                const categoryPresets = THEME.promptPresets[category].presets;
                const index = categoryPresets.findIndex(p => p.label === preset.label);
                if (index > -1) {
                    categoryPresets.splice(index, 1);
                    localStorage.setItem('multitext_category_presets', JSON.stringify(THEME.promptPresets));
                    item.remove();
                }
            }
        };

        item.onclick = () => {
            const textWidget = this.widgets.find(w => w.name === 'text1');
            if (textWidget) {
                textWidget.value = preset.value;
                textWidget.callback?.(preset.value);
            }
            menu.remove();
        };

        item.appendChild(deleteBtn);
        return item;
    },

    loadFonts() {
        if (document.getElementById('multitext-fonts')) return;

        const head = document.head;
        const fontElements = `
            <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap">
            <style id="multitext-fonts">
                .multitext-node * {
                    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 
                               Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
                }
            </style>
        `;
        head.insertAdjacentHTML('beforeend', fontElements);
    },

    drawNodeContents(ctx) {
        const margin = THEME.sizes.margin;
        let y = margin;

        for (let i = 0; i < this.activePrompts; i++) {
            const textWidget = this.widgets.find(w => w.name === `text${i + 1}`);
            
            if (textWidget) {
                if (i === this.currentHoverIndex) {
                    ctx.fillStyle = THEME.colors.bgHover;
                } else {
                    ctx.fillStyle = THEME.colors.bg;
                }
                
                Utils.drawRoundedRect(
                    ctx, 
                    margin, 
                    y, 
                    this.size[0] - margin * 2, 
                    STYLES.row.height,
                    THEME.sizes.borderRadius
                );

                ctx.fillStyle = THEME.colors.text;
                ctx.font = `13px ${THEME.typography.fonts.primary}`;
                ctx.textBaseline = 'middle';
                const text = textWidget.value || `Prompt ${i + 1}`;
                const truncatedText = Utils.truncateTextEfficient(
                    ctx, 
                    text, 
                    this.size[0] - margin * 4
                );
                ctx.fillText(truncatedText, margin + 12, y + STYLES.row.height/2);


                y += STYLES.row.height + STYLES.row.margin;
            }
        }

        this.drawControlButtons(ctx);
    },

    createHistoryItem(item, textarea, historyDropdown) {
        const container = document.createElement('div');
        container.style.cssText = `
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 4px 8px;
            border-radius: 4px;
            cursor: pointer;
            &:hover {
                background: ${THEME.colors.bgHover};
            }
        `;

        const text = document.createElement('div');
        text.textContent = item.text.substring(0, 40) + (item.text.length > 40 ? '...' : '');
        text.style.flex = 1;

        const date = document.createElement('div');
        date.textContent = formatDate(item.timestamp);
        date.style.cssText = `
            font-size: 11px;
            color: ${THEME.colors.textDim};
        `;

        const deleteBtn = document.createElement('button');
        deleteBtn.textContent = '🗑️';
        deleteBtn.title = 'Delete from history';
        deleteBtn.style.cssText = `
            background: none;
            border: none;
            color: ${THEME.colors.textDim};
            font-size: 12px;
            padding: 4px;
            cursor: pointer;
            opacity: 0.6;
            transition: all 0.2s;
            display: none;

            &:hover {
                opacity: 1;
                color: ${THEME.colors.error || '#ff4444'};
            }
        `;

        container.onmouseenter = () => {
            deleteBtn.style.display = 'block';
        };
        container.onmouseleave = () => {
            deleteBtn.style.display = 'none';
        };

        deleteBtn.onclick = (e) => {
            e.stopPropagation();
            const history = JSON.parse(localStorage.getItem('multitext_history') || '[]');
            const updatedHistory = history.filter(h => h.text !== item.text);
            localStorage.setItem('multitext_history', JSON.stringify(updatedHistory));
            container.remove();

            if (updatedHistory.length === 0) {
                historyDropdown.innerHTML = `
                    <div style="padding: 8px 12px; color: ${THEME.colors.textDim}; text-align: center;">
                        History is empty
                    </div>
                `;
            }
        };

        text.onclick = () => {
            textarea.value = item.text;
            textarea.dispatchEvent(new Event('input'));
            historyDropdown.style.display = 'none';
        };

        container.appendChild(text);
        container.appendChild(date);
        container.appendChild(deleteBtn);

        return container;
    }
};


const formatDate = (timestamp) => {
    const date = new Date(timestamp);
    const now = new Date();
    const diff = now - date;

    if (diff < 60000) return 'Just now';
    if (diff < 3600000) return `${Math.floor(diff/60000)} min ago`;
    if (diff < 86400000) return `${Math.floor(diff/3600000)} hr ago`;
    return date.toLocaleDateString('en-US');
};

app.registerExtension({
    name: "AIDoc.MultiText",
    async beforeRegisterNodeDef(nodeType, nodeData, app) {
        if (nodeData.name !== "MultiText") return;
        
        Object.assign(nodeType.prototype, MultiTextNode);
        
        nodeType.prototype.loadFonts();
    }
});

app.ui.settings.addSetting({
    id: "AIDoc.ShowTooltips",
    name: "Show Multi-Text tooltips on hover?",
    type: "boolean",
    defaultValue: false,
});