import { app } from "../../../../scripts/app.js";
import { resolveComboValue, resolveFormatConfig } from "./format_step.js";

function button_action(widget) {
    if (
        widget.options?.reset == undefined &&
        widget.options?.disable == undefined
    ) {
        return "None";
    }
    if (
        widget.options.reset != undefined &&
        widget.value != widget.options.reset
    ) {
        return "Reset";
    }
    if (
        widget.options.disable != undefined &&
        widget.value != widget.options.disable
    ) {
        return "Disable";
    }
    if (widget.options.reset != undefined) {
        return "No Reset";
    }
    return "No Disable";
}

function fitText(ctx, text, maxLength) {
    if (maxLength <= 0) {
        return ["", 0];
    }
    let fullLength = ctx.measureText(text).width;
    if (fullLength < maxLength) {
        return [text, fullLength];
    }
    let cutoff = ((maxLength / fullLength) * text.length) | 0;
    let shortened = text.slice(0, Math.max(0, cutoff - 2)) + "…";
    return [shortened, ctx.measureText(shortened).width];
}

export function roundToPrecision(num, precision) {
    let strnum = Number(num).toFixed(precision);
    let deci = strnum.indexOf(".");
    if (deci > 0) {
        let i = strnum.length - 1;
        while (i > deci && strnum[i] == "0") {
            i--;
        }
        if (i == deci) {
            i--;
        }
        return strnum.slice(0, i + 1);
    }
    return strnum;
}

function inner_value_change(widget, value, node, pos) {
    // Ensure value is always treated as a number
    widget.value = Number(value);
    if (widget.options?.property && widget.options.property in node.properties) {
        node.setProperty(widget.options.property, widget.value);
    }
    if (widget.callback) {
        widget.callback(widget.value, app.canvas, node, pos);
    }
}

function drawAnnotated(ctx, node, widget_width, y, H) {
    const litegraph_base = LiteGraph;
    const show_text =
        app.canvas.ds.scale >= (app.canvas.low_quality_zoom_threshold ?? 0.5);
    const margin = 15;
    ctx.strokeStyle = litegraph_base.WIDGET_OUTLINE_COLOR;
    ctx.fillStyle = litegraph_base.WIDGET_BGCOLOR;
    ctx.beginPath();
    if (show_text) {
        ctx.roundRect(margin, y, widget_width - margin * 2, H, [H * 0.5]);
    } else {
        ctx.rect(margin, y, widget_width - margin * 2, H);
    }
    ctx.fill();
    if (show_text) {
        if (!this.disabled) {
            ctx.stroke();
        }
        const button = button_action(this);
        if (button != "None") {
            ctx.save();
            if (button.startsWith("No ")) {
                ctx.fillStyle = litegraph_base.WIDGET_OUTLINE_COLOR;
                ctx.strokeStyle = litegraph_base.WIDGET_OUTLINE_COLOR;
            } else {
                ctx.fillStyle = litegraph_base.WIDGET_TEXT_COLOR;
                ctx.strokeStyle = litegraph_base.WIDGET_TEXT_COLOR;
            }
            ctx.beginPath();
            if (button.endsWith("Reset")) {
                ctx.arc(
                    widget_width - margin - 26,
                    y + H / 2,
                    4,
                    (Math.PI * 3) / 2,
                    Math.PI
                );
                ctx.stroke();
                ctx.beginPath();
                ctx.moveTo(widget_width - margin - 26, y + H / 2 - 1.5);
                ctx.lineTo(widget_width - margin - 26, y + H / 2 - 6.5);
                ctx.lineTo(widget_width - margin - 30, y + H / 2 - 3.5);
                ctx.fill();
            } else {
                ctx.arc(
                    widget_width - margin - 26,
                    y + H / 2,
                    4,
                    (Math.PI * 2) / 3,
                    (Math.PI * 8) / 3
                );
                ctx.moveTo(
                    widget_width - margin - 26 - 8 ** 0.5,
                    y + H / 2 + 8 ** 0.5
                );
                ctx.lineTo(
                    widget_width - margin - 26 + 8 ** 0.5,
                    y + H / 2 - 8 ** 0.5
                );
                ctx.stroke();
            }
            ctx.restore();
        }
        ctx.fillStyle = litegraph_base.WIDGET_TEXT_COLOR;
        if (!this.disabled) {
            ctx.beginPath();
            ctx.moveTo(margin + 16, y + 5);
            ctx.lineTo(margin + 6, y + H * 0.5);
            ctx.lineTo(margin + 16, y + H - 5);
            ctx.fill();
            ctx.beginPath();
            ctx.moveTo(widget_width - margin - 16, y + 5);
            ctx.lineTo(widget_width - margin - 6, y + H * 0.5);
            ctx.lineTo(widget_width - margin - 16, y + H - 5);
            ctx.fill();
        }
        let freeWidth = widget_width - (40 + margin * 2 + 20);
        let [valueText, valueWidth] = fitText(
            ctx,
            this.displayValue?.() ?? this.value ?? "",
            freeWidth
        );
        freeWidth -= valueWidth;

        const value_offset = margin * 2 + 20;
        ctx.textAlign = "left";
        ctx.fillStyle = litegraph_base.WIDGET_SECONDARY_TEXT_COLOR;
        if (freeWidth > 20) {
            let [name, nameWidth] = fitText(
                ctx,
                this.label || this.name,
                freeWidth
            );
            freeWidth -= nameWidth;
            ctx.fillText(name, margin * 2 + 5, y + H * 0.7);
        }

        let value_offset_right = value_offset;
        ctx.textAlign = "right";
        if (this.options.unit) {
            ctx.fillStyle = litegraph_base.WIDGET_OUTLINE_COLOR;
            let [unitText, unitWidth] = fitText(
                ctx,
                this.options.unit,
                freeWidth
            );
            if (unitText == this.options.unit) {
                ctx.fillText(
                    this.options.unit,
                    widget_width - value_offset_right,
                    y + H * 0.7
                );
                value_offset_right += unitWidth;
                freeWidth -= unitWidth;
            }
        }
        ctx.fillStyle = litegraph_base.WIDGET_TEXT_COLOR;
        ctx.fillText(valueText, widget_width - value_offset_right, y + H * 0.7);
        ctx.fillStyle = litegraph_base.WIDGET_SECONDARY_TEXT_COLOR;

        let annotation = "";
        if (this.annotation) {
            annotation = this.annotation(this.value, freeWidth);
        } else if (this.options.annotation && this.value in this.options.annotation) {
            annotation = this.options.annotation[this.value];
        }
        if (annotation) {
            ctx.fillStyle = litegraph_base.WIDGET_OUTLINE_COLOR;
            let [annoDisplay] = fitText(ctx, annotation, freeWidth);
            ctx.fillText(
                annoDisplay,
                widget_width - 5 - valueWidth - value_offset_right,
                y + H * 0.7
            );
        }
    }
}

function mouseAnnotated(event, [x, y], node) {
    const now =
        typeof performance !== "undefined" && typeof performance.now === "function"
            ? performance.now()
            : Date.now();
    const duplicateWindowMs = 20;
    const isDownEvent = event.type === "pointerdown" || event.type === "mousedown";
    const isUpEvent = event.type === "pointerup" || event.type === "mouseup";
    if (isDownEvent) {
        if (
            typeof this._comfy1hew_last_down_at === "number" &&
            now - this._comfy1hew_last_down_at < duplicateWindowMs
        ) {
            return true;
        }
        this._comfy1hew_last_down_at = now;
    }
    if (isUpEvent) {
        if (
            typeof this._comfy1hew_last_up_at === "number" &&
            now - this._comfy1hew_last_up_at < duplicateWindowMs
        ) {
            return true;
        }
        this._comfy1hew_last_up_at = now;
    }

    const widget_width = this.width || node.size[0];
    const old_value = this.value;
    const margin = 15;
    let isButton = 0;
    if (x > margin + 6 && x < margin + 16) {
        isButton = -1;
    } else if (x > widget_width - margin - 16 && x < widget_width - margin - 6) {
        isButton = 1;
    } else if (x > widget_width - margin - 34 && x < widget_width - margin - 18) {
        isButton = 2;
    }

    let isAnnotation = false;
    if (this.annotation && !isButton && x > widget_width * 0.5) {
        isAnnotation = true;
    }

    const getStepConfig = () => {
        // Priority 0: Explicit custom config object (most reliable)
        if (this._comfy1hew_step_config) {
            return { 
                step: Number(this._comfy1hew_step_config.step) || 1, 
                mod: Number(this._comfy1hew_step_config.mod) || 0 
            };
        }

        // Priority 1: Custom step resolver (injected by controller)
        if (typeof this._comfy1hew_getStep === "function") {
            const res = this._comfy1hew_getStep();
            if (res && typeof res.step === "number") {
                return { step: res.step, mod: Number(res.mod) || 0 };
            }
        }

        let step = 1;
        let mod = 0;

        // 2. Check widget.step (Standard LiteGraph property)
        // Allow string "4" to be parsed as number 4
        if (this.step !== undefined) {
            const s = Number(this.step);
            if (!isNaN(s) && s > 0) {
                step = s;
            }
        }
        
        // 3. Fallback to options.step
        else if (this.options?.step !== undefined) {
             const s = Number(this.options.step);
             if (!isNaN(s) && s > 0) {
                 step = s;
             }
        }

        // Check for mod in options
        if (this.options?.mod !== undefined) {
            mod = this.options.mod;
        }
        
        // Priority 4: Dynamic lookup from sibling "format" widget (Robust fallback)
        // This covers cases where custom properties are lost or not initialized,
        // matching the logic used in load_video.js's callback.
        if (step === 1) {
            const n = node || this._comfy1hew_owner_node;
            if (n && n.widgets) {
                const formatWidget = n.widgets.find(w => w.name === "format");
                if (formatWidget) {
                    const val = formatWidget.value;
                    const fmtName = resolveComboValue(formatWidget, val);
                    const fmtConfig = resolveFormatConfig(fmtName);
                    if (fmtConfig && fmtConfig.step > 1) {
                        step = fmtConfig.step;
                        mod = fmtConfig.mod;
                    }
                }
            }
        }

        return { step: Number(step), mod: Number(mod) };
    };

    var allow_scroll = true;
    const isDragging =
        typeof event.buttons === "number" ? event.buttons !== 0 : true;
    if (allow_scroll && event.type == "pointermove" && !isButton && isDragging) {
        if (event.deltaX && Math.abs(event.deltaX) > 0.5) {
            const { step, mod } = getStepConfig();
            
            // Apply sensitivity scaling for dragging
            // If step is large (>1), we might want 1:1, but for step=1, 1:1 is too fast.
            // Let's use a standard 0.1 scale for finer control, similar to standard UI sliders.
            const dragScale = 0.1; 
            
            let nextVal = Number(this.value) + event.deltaX * step * dragScale;
            
            // Apply step/mod alignment if step > 1 or mod > 0
            if (step > 1 || mod > 0) {
                if (nextVal <= 0) {
                    nextVal = 0;
                } else {
                    nextVal = Math.round((nextVal - mod) / step) * step + mod;
                    if (nextVal <= 0) {
                        nextVal = 0;
                    }
                }
            }
            
            this.value = nextVal;
        }
        if (this.options.min != null && this.value < this.options.min) {
            this.value = this.options.min;
        }
        if (this.options.max != null && this.value > this.options.max) {
            this.value = this.options.max;
        }
        
        // Final alignment check
        const { step, mod } = getStepConfig();
        if (step > 1 || mod > 0) {
            let alignedVal = Number(this.value);
            if (alignedVal > 0) {
                if (alignedVal < mod) {
                    alignedVal = 0;
                } else {
                    alignedVal = Math.floor((alignedVal - mod) / step) * step + mod;
                    if (alignedVal <= 0) {
                        alignedVal = 0;
                    }
                }
            } else if (alignedVal < 0) {
                alignedVal = 0;
            }
            if (this.options.min != null && alignedVal < this.options.min) {
                alignedVal = this.options.min;
            }
            if (this.options.max != null && alignedVal > this.options.max) {
                alignedVal = this.options.max;
            }
            this.value = alignedVal;
        }
    }
    
    if (event.type == "pointerdown" || event.type == "mousedown") {
        this._mouse_down_on_button = isButton == 2;
        if (isButton == 1 || isButton == -1) {
            this._comfy1hew_arrow_incremented = false;
            
            const { step, mod } = getStepConfig();

            const val = Number(this.value);
            let nextVal = val;
            const s = Number(step) || 1;
            const m = Number(mod) || 0;

            if (isButton == 1) {
                if (s > 1 || m > 0) {
                    // Move to the next legal value in the sequence: step*k + mod
                    if (val < m) {
                        nextVal = m;
                    } else {
                        const k = Math.floor((val - m) / s) + 1;
                        nextVal = s * k + m;
                    }
                } else {
                    nextVal = val + s;
                }
            } else {
                if (s > 1 || m > 0) {
                    // Move to the previous legal value in the sequence.
                    if (val <= m) {
                        nextVal = 0;
                    } else {
                        const k = Math.ceil((val - m) / s) - 1;
                        nextVal = s * k + m;
                    }
                } else {
                    nextVal = val - s;
                }
            }

            // Apply limits
            if (this.options.min != null && nextVal < this.options.min) {
                nextVal = this.options.min;
            }
            if (this.options.max != null && nextVal > this.options.max) {
                nextVal = this.options.max;
            }
            
            // Alignment check after increment/decrement
            if (step > 1 || mod > 0) {
                 if (nextVal > 0) {
                    if (nextVal < mod) {
                        nextVal = 0;
                    } else {
                        nextVal = Math.floor((nextVal - mod) / step) * step + mod;
                        if (nextVal <= 0) {
                            nextVal = 0;
                        }
                    }
                }
            }

            this.value = nextVal;
            this._comfy1hew_arrow_incremented = true;
        } else if (isAnnotation) {
            const anno = this.annotation(this.value, 100);
            if (anno && anno.endsWith("\u21FD")) {
                const numStr = anno.slice(0, -1);
                const val = parseFloat(numStr);
                if (!isNaN(val)) {
                    this.value = val;
                }
            }
        }
    } else if (event.type == "pointerup" || event.type == "mouseup") {
        let buttonClicked = false;

        if (isButton == 2 && (this._mouse_down_on_button || event.click_time < 300)) {
            const buttonType = button_action(this);
            if (buttonType == "Reset") {
                this.value = this.options.reset;
                buttonClicked = true;
            } else if (buttonType == "Disable") {
                this.value = this.options.disable;
                buttonClicked = true;
            }
        }

        if (
            !buttonClicked &&
            event.click_time < 200 &&
            !isButton &&
            !isAnnotation &&
            !this._mouse_down_on_button
        ) {
            const d_callback = (v) => {
                this.value = this.parseValue?.(v) ?? Number(v);
                inner_value_change(this, this.value, node, [x, y]);
            };
            app.canvas.prompt("Value", this.value, d_callback, event);
        }
    }

    this._mouse_down_on_button = false;
    this._comfy1hew_arrow_incremented = false;

    if (old_value != this.value) {
        setTimeout(
            function () {
                inner_value_change(this, this.value, node, [x, y]);
            }.bind(this),
            20
        );
    }
    return true;
}

export function installWidgetSourceOverlay(
    node,
    widget,
    getSourceValue,
    behavior = "reset"
) {
    if (!node || !widget || widget._comfy1hewSourceOverlayInstalled === "1") {
        return;
    }
    widget._comfy1hewSourceOverlayInstalled = "1";
    widget._comfy1hew_owner_node = node;

    widget.draw = drawAnnotated;
    widget.mouse = mouseAnnotated;

    if (behavior === "disable") {
        widget.options.disable = 0;
        delete widget.options.reset;
    } else {
        if (widget.options.reset === undefined) {
            widget.options.reset = widget.options.default ?? widget.value ?? 0;
        }
        delete widget.options.disable;
    }

    widget.annotation = (value, width) => {
        const sourceValue = getSourceValue();
        if (sourceValue !== null && sourceValue !== undefined) {
            return roundToPrecision(sourceValue, 2) + "\u21FD";
        }
        return "";
    };
}