import { app } from "../../scripts/app.js";

// --- Dropdown UI Component ---
let activeDropdown = null;

class Dropdown {
    constructor(inputEl, options, onSelect, manualOffset, hostElement) {
        this.inputEl = inputEl;
        this.options = options;
        this.onSelect = onSelect;
        this.manualOffset = manualOffset;
        this.hostElement = hostElement;
        
        this.dropdown = document.createElement('ul');
        this.dropdown.className = 'dadashuai-dropdown';
        this.dropdown.setAttribute('role', 'listbox');
        
        // [Opt] 设置基础 Z-Index
        this.dropdown.style.zIndex = 10001;
        
        this.selectedIndex = -1;
        this.focusedDropdown = this.dropdown;
        this.openedAt = Date.now();

        this.buildDropdown();
        this.updatePosition();
        
        // Bind events
        this.handleKeyDown = this.onKeyDown.bind(this);
        this.handleWheel = this.onWheel.bind(this);
        this.handleClick = this.onClick.bind(this);
        
        document.addEventListener('keydown', this.handleKeyDown);
        this.dropdown.addEventListener('wheel', this.handleWheel);
        document.addEventListener('click', this.handleClick);
        
        activeDropdown = this;
    }

    buildDropdown() {
        this.buildNested(this.options, this.dropdown);
        this.hostElement.appendChild(this.dropdown);
    }

    buildNested(dict, parent, path = '') {
        let index = 0;
        // 计算当前菜单层级，用于关闭更深层的菜单
        const currentDepth = (path.split('/').filter(Boolean).length || 0) + 1;

        for (const [key, val] of Object.entries(dict)) {
            // [Fix] 这里的 idx 必须用 const 锁定当前循环的值
            const idx = index; 

            const extra = typeof val === 'string' ? val : '';
            let fullPath = path ? `${path}/${key}` : key;
            if (extra) fullPath += `###${extra}`;

            const li = document.createElement('li');
            
            if (val && typeof val === "object") {
                li.className = 'folder';
                li.textContent = key;
                
                const subUl = document.createElement('ul');
                subUl.className = 'dadashuai-nested-dropdown';
                subUl.dataset.depth = currentDepth + 1;
                
                // [Opt] 动态增加 Z-Index，确保子菜单永远覆盖父菜单
                subUl.style.zIndex = 10001 + currentDepth + 1;
                
                li.addEventListener('mouseenter', () => {
                    this.hideNested(subUl.dataset.depth, subUl);
                    this.positionNested(li, subUl);
                });
                li.addEventListener('mouseover', () => this.setFocus(idx, parent));
                
                // Prevent closing when clicking nested scrollbar
                subUl.addEventListener('mousedown', e => e.stopPropagation());
                subUl.addEventListener('click', e => e.stopPropagation());

                this.hostElement.appendChild(subUl);
                this.buildNested(val, subUl, fullPath);
            } else {
                li.className = 'item';
                li.setAttribute('role', 'option');
                li.textContent = key;
                
                // 鼠标滑过普通项时，关闭同级的子菜单
                li.addEventListener('mouseenter', () => {
                    this.hideNested(currentDepth + 1, null);
                });

                li.addEventListener('mouseover', () => this.setFocus(idx, parent));
                li.addEventListener('mousedown', (e) => {
                    e.preventDefault();
                    this.onSelect(key, fullPath);
                });
            }
            parent.appendChild(li);
            index++;
        }
    }

    updatePosition() {
        const rect = this.inputEl.getBoundingClientRect();
        const parse = (v, dim) => isNaN(v) && String(v).includes('%') ? dim * (parseInt(v)/100) : v;
        
        const offX = parse(this.manualOffset[0], rect.height);
        const offY = parse(this.manualOffset[1], rect.width);
        
        const winW = window.innerWidth;
        const winH = window.innerHeight;
        const margin = 10;

        // JS 中的 maxWidth 主要是为了初始计算，CSS 中的 max-width 才是强制生效的关键
        this.dropdown.style.maxWidth = `${Math.min(450, winW - 20)}px`;
        
        // Initial placement
        let top = rect.bottom - offX;
        let left = rect.right - offY;
        this.dropdown.style.top = `${top}px`;
        this.dropdown.style.left = `${left}px`;

        // Constraint to viewport
        const dropRect = this.dropdown.getBoundingClientRect();
        const newLeft = Math.max(margin, Math.min(dropRect.left, winW - dropRect.width - margin));
        const newTop = Math.max(margin, Math.min(dropRect.top, winH - dropRect.height - margin));
        
        this.dropdown.style.left = `${newLeft}px`;
        this.dropdown.style.top = `${newTop}px`;
    }

    positionNested(parentLi, subUl) {
        subUl.style.display = 'block';
        const pRect = parentLi.getBoundingClientRect();
        const sRect = subUl.getBoundingClientRect();
        const margin = 10;

        let left = pRect.right;
        if (left + sRect.width > window.innerWidth - margin) {
            left = pRect.left - sRect.width;
        }
        left = Math.max(margin, left);

        let top = pRect.top;
        if (top + sRect.height > window.innerHeight - margin) {
            top = Math.max(margin, window.innerHeight - sRect.height - margin);
        }

        subUl.style.top = `${top}px`;
        subUl.style.left = `${left}px`;
    }

    hideNested(depth, except) {
        document.querySelectorAll('.dadashuai-nested-dropdown').forEach(el => {
            if (Number(el.dataset.depth || 0) >= depth && el !== except) {
                el.style.display = 'none';
            }
        });
    }

    setFocus(index, parent) {
        if (parent) this.focusedDropdown = parent;
        this.selectedIndex = index;
        this.renderSelection();
    }

    renderSelection() {
        const items = Array.from(this.focusedDropdown.children);
        items.forEach((li, i) => li.classList.toggle('selected', i === this.selectedIndex));
    }

    destroy() {
        document.removeEventListener('keydown', this.handleKeyDown);
        this.dropdown.removeEventListener('wheel', this.handleWheel);
        document.removeEventListener('click', this.handleClick);
        document.querySelectorAll('.dadashuai-dropdown, .dadashuai-nested-dropdown').forEach(el => el.remove());
        activeDropdown = null;
    }

    onKeyDown(e) {
        if (!activeDropdown) return;
        const items = Array.from(this.focusedDropdown.children);
        const selected = items[this.selectedIndex];

        switch(e.key) {
            case 'ArrowUp':
                e.preventDefault();
                this.selectedIndex = Math.max(0, this.selectedIndex - 1);
                this.renderSelection();
                break;
            case 'ArrowDown':
                e.preventDefault();
                this.selectedIndex = Math.min(items.length - 1, this.selectedIndex + 1);
                this.renderSelection();
                break;
            case 'ArrowLeft':
                if (this.focusedDropdown !== this.dropdown) {
                    // Logic to go back up level could go here, simplified to just preventing default
                }
                break;
            case 'Enter':
            case 'Tab':
                if (this.selectedIndex >= 0 && selected?.classList.contains('item')) {
                    e.preventDefault();
                    // Note: Keyboard selection requires tracking fullPath which isn't stored in DOM in simplified version
                    // For now, click is primary. 
                    selected.dispatchEvent(new MouseEvent('mousedown'));
                }
                break;
            case 'Escape':
                this.destroy();
                break;
        }
    }

    onWheel(e) {
        const currentTop = parseInt(this.dropdown.style.top);
        const delta = e.deltaY < 0 ? 10 : -10;
        const invert = localStorage.getItem("Comfy.Settings.Comfy.InvertMenuScrolling");
        this.dropdown.style.top = `${currentTop + (invert ? -delta : delta)}px`;
    }

    onClick(e) {
        if (Date.now() - this.openedAt < 200) return;
        if (!e.target.closest('.dadashuai-dropdown, .dadashuai-nested-dropdown') && e.target !== this.inputEl) {
            this.destroy();
        }
    }
}

// --- Data & Logic Helpers ---

const IGNORE_WIDGETS = new Set(['control_after_generate', 'empty_latent_aspect', 'empty_latent_width', 'empty_latent_height', 'batch_size']);

function getNodeOptions(node) {
    if (!node.widgets) return null;
    const opts = {};
    
    for (const w of node.widgets) {
        if (!w.type || IGNORE_WIDGETS.has(w.name)) continue;
        
        const val = w.value;
        
        // Handle Seeds
        if (w.name === 'seed' || (w.name === 'value' && node.constructor.title?.toLowerCase() === 'seed')) {
            opts[w.name] = { [val ?? 'seed']: null };
            continue;
        }
        
        // Handle Toggles
        if (w.type === 'toggle') {
            opts[w.name] = { 'True': null, 'False': null };
            continue;
        }
        
        // Handle Text/Number inputs
        if (['customtext', 'text', 'string', 'number'].includes(w.type) || w.type.startsWith('dadashuai')) {
            const safeVal = (val !== undefined && val !== null && String(val).trim() !== '') ? val : 'value';
            opts[w.name] = { [safeVal]: null };
            continue;
        }
        
        // Handle Lists (Combo)
        if (w.options?.values) {
            let values = w.options.values;
            if (typeof values === 'function') values = values();
            const valDict = {};
            for (const v of values) valDict[v] = null;
            if (Object.keys(valDict).length > 0) opts[w.name] = valDict;
        }
    }
    return Object.keys(opts).length ? opts : null;
}

// [Fix] 增加参数 ignoreId 用于排除自身节点
function getGraphOptions(ignoreId) {
    const dict = {};
    for (const node of app.graph._nodes) {
        // [Fix] 排除当前节点自身
        if (node.id === ignoreId) continue;
        
        // [Fix] 排除没有输出端口的节点 (例如 Note 节点或纯输入节点)
        if (!node.outputs || node.outputs.length === 0) continue;

        const opts = getNodeOptions(node);
        if (opts) {
            const title = node.title || node.constructor?.title || node.type;
            dict[`[${node.id}] - ${title}`] = opts;
        }
    }
    return dict;
}

function insertValue(widget, fullpath, selectedVal) {
    // Parse path: "Node/Widget/Value"
    const [rawPath] = fullpath.split('###');
    const parts = rawPath.split('/');
    const nodeKey = parts[0] || '';
    const widgetName = parts[1] || '';
    let value = parts[2] ?? selectedVal;

    // Format value
    if (typeof value === 'boolean') value = value ? 'True' : 'False';
    const strVal = String(value);
    const finalVal = (strVal === 'True' || strVal === 'False' || (!isNaN(Number(strVal)) && strVal.trim() !== '')) 
        ? strVal 
        : `'${strVal.replace(/^['"]|['"]$/g, '')}'`; // Simple quote clean

    // Extract ID
    const nodeIdMatch = nodeKey.match(/\[(\d+)\]/);
    const nodeId = nodeIdMatch ? nodeIdMatch[1] : nodeKey;

    // Construct Line
    const line = `[${nodeId}:${widgetName}]=${finalVal}`;
    
    // Update Input
    const current = widget.inputEl.value || '';
    
    // Auto-increment index <N:name>
    const matches = current.match(/^<(\d+):/gm);
    let nextIdx = 1;
    if (matches) {
        const indices = matches.map(s => parseInt(s.substring(1)));
        nextIdx = Math.max(...indices) + 1;
    }

    // [Change] 自动生成标签: X1, X2... 或 Y1, Y2...
    const axisChar = widget.name === 'y_attr' ? 'Y' : 'X';
    const block = `<${nextIdx}:${axisChar}${nextIdx}>\n${line}`;
    
    widget.inputEl.value = current.trim() ? `${current.replace(/\s+$/,'')}\n${block}` : block;
    
    // Trigger update
    const ev = new Event('input', { bubbles: true });
    widget.inputEl.dispatchEvent(ev);
}

function injectStyles() {
    if (document.getElementById('dadashuai-style')) return;
    const style = document.createElement('style');
    style.id = 'dadashuai-style';
    style.textContent = `
        .dadashuai-dropdown, .dadashuai-nested-dropdown {
            position: fixed; background: #1c1c1c; color: #e8e8e8;
            border: 1px solid #363636; border-radius: 6px; padding: 0; /* [Fix] 移除容器内边距，消除顶部底部空隙 */
            list-style: none; max-height: 320px; min-width: 200px;
            max-width: 450px; /* [Fix] 限制最大宽度，强制长内容换行 */
            overflow-y: auto; z-index: 9999; font-size: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.5);
        }
        /* [Fix] 将样式规则同时应用到 .dadashuai-nested-dropdown li */
        .dadashuai-dropdown li, .dadashuai-nested-dropdown li { 
            padding: 5px 12px; 
            cursor: pointer; 
            position: relative;
            /* [Fix] 强制换行策略：优先在单词间换行，必要时打断单词 */
            white-space: normal;
            word-wrap: break-word;
            overflow-wrap: break-word; 
            line-height: 1.4;
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }
        /* [Fix] 移除最后一个子元素的底边框 */
        .dadashuai-dropdown li:last-child, .dadashuai-nested-dropdown li:last-child {
            border-bottom: none;
        }
        .dadashuai-dropdown li.selected, .dadashuai-nested-dropdown li.selected { background: #4a90e2; color: #fff; }
        .dadashuai-dropdown li.folder, .dadashuai-nested-dropdown li.folder { font-weight: 600; }
        .dadashuai-dropdown li.folder::after, .dadashuai-nested-dropdown li.folder::after { content: '›'; float: right; opacity: 0.6; }
        /* [Fix] 嵌套菜单必须是 fixed 定位以配合 getBoundingClientRect 计算 */
        .dadashuai-nested-dropdown { display: none; position: fixed; }
    `;
    document.head.appendChild(style);
}

function attachDropdown(node) {
    if (!node.widgets) return;
    injectStyles();
    
    const targets = node.widgets.filter(w => ['x_attr', 'y_attr'].includes(w.name));
    
    for (const w of targets) {
        const handler = (e) => {
            // Only show if widget has input element and data exists
            if (!w.inputEl) return;
            
            // [Fix] 传递当前节点的 ID，以便在获取选项时排除自身
            const data = getGraphOptions(node.id);
            if (!data || Object.keys(data).length === 0) return;

            if (activeDropdown) activeDropdown.destroy();
            
            // [Change] 如果是右键菜单事件，阻止浏览器默认菜单
            if (e.type === 'contextmenu') {
                e.preventDefault();
            }
            
            // Create new dropdown
            new Dropdown(w.inputEl, data, (val, path) => insertValue(w, path, val), [10, '100%'], document.body);
        };

        // Retry attachment if DOM not ready
        const tryAttach = () => {
            if (!w.inputEl) return false;
            // [Change] 监听右键 (contextmenu) 而不是单击 (click) 或 聚焦 (focus)
            w.inputEl.addEventListener('contextmenu', handler);
            return true;
        };

        if (!tryAttach()) {
            const timer = setInterval(() => {
                if (tryAttach()) clearInterval(timer);
            }, 100);
        }
    }
}

app.registerExtension({
    name: "comfy.xyd.dropdown",
    beforeRegisterNodeDef(nodeType, nodeData) {
        if (nodeData.name === "XY_Image" && nodeData.widgets) {
            nodeData.widgets.forEach(w => {
                if (['x_attr', 'y_attr'].includes(w.name)) {
                    w.type = 'customtext';
                    w.options = { ...w.options, multiline: true };
                }
            });
        }
    },
    nodeCreated(node) {
        if (node.constructor.type === "XY_Image" || node.title === "XY_Image") {
            attachDropdown(node);
        }
    }
});