import { app } from "../../scripts/app.js";
import { api } from "../../scripts/api.js";
import { ComfyWidgets } from "../../scripts/widgets.js";
import { createScope } from './ui/core.js';
import { createSuggestionView } from './ui/autocomplete-suggestions.js';
import { watchRendererTextareas } from './ui/text-widget-adapter.js';
import { createAutocompleteLauncher } from './views/autocomplete-settings.js';
import { searchTags, tagQuery } from './autocomplete/tags.js';
import { parseTagFile, tagCache } from './autocomplete/tag-storage.js';
import { readTagResponse } from './autocomplete/tag-download.js';

// KikoEmbeddingAutocomplete - Provides autocomplete for embeddings and LoRAs in text widgets
class KikoEmbeddingAutocomplete {
    constructor() {
        this.scope = createScope();
        this.widgetCleanups = new Set();
        this.nodeHooks = new WeakMap();
        this.pendingFrames = new Set();
        this.embeddings = [];
        this.loras = [];
        this.customWords = [];
        this.settings = {
            enabled: true,
            showEmbeddings: true,
            showLoras: true,
            showCustomWords: true,
            embeddingTrigger: "embedding:",
            loraTrigger: "<lora:",
            quickTrigger: "em",
            minChars: 2,
            maxSuggestions: 20,
            sortByDirectory: true,
            customWordsUrl: "https://gist.githubusercontent.com/pythongosssss/1d3efa6050356a08cea975183088159a/raw/a18fb2f94f9156cf4476b0c24a09544d6c0baec6/danbooru-tags.txt",
            autoInsertComma: true,
            replaceUnderscores: true,
            insertOnTab: true,
            insertOnEnter: true
        };

        // Load settings from localStorage
        this.loadSettings();

        // Track active widgets with proper cleanup
        this.widgetCleanupMap = new WeakMap();
        this.activeWidgets = new WeakSet();

        // Track pending fetch requests for cleanup
        this.pendingFetches = new Set();

        // Debounce resource fetching
        this.fetchResourcesDebounced = this.debounce(() => this.fetchResources(), 500);
        this.fetchResourcesDebounced();

        // Load custom words if URL is set
        if ((this.settings.tagSource || this.settings.customWordsUrl) && this.settings.showCustomWords) {
            this.restoreCustomWords();
        }

        // Single suggestion container for all widgets
        this.suggestionContainer = null;
        this.currentWidget = null;

        // Cleanup on page unload
        this.scope.listen(window, 'beforeunload', () => this.cleanup());
        this.scope.listen(window, 'resize', () => this.hideSuggestions());
        this.scope.listen(window, 'scroll', () => this.hideSuggestions());
        watchRendererTextareas(this.scope, app.graph, this);
    }

    debounce(func, wait) {
        let timeout;
        const debounced = (...args) => {
            clearTimeout(timeout);
            timeout = setTimeout(() => { if (!this.scope.signal.aborted) func(...args); }, wait);
        };
        debounced.cancel = () => clearTimeout(timeout);
        return debounced;
    }

    nextFrame(callback) {
        if (this.scope.signal.aborted) return;
        const frame = requestAnimationFrame(() => {
            this.pendingFrames.delete(frame);
            if (!this.scope.signal.aborted) callback();
        });
        this.pendingFrames.add(frame);
    }

    cleanup() {
        this.fetchResourcesDebounced.cancel();
        for (const frame of this.pendingFrames) cancelAnimationFrame(frame);
        this.pendingFrames.clear();
        this.settingsDialog?.close('removed');
        for (const cleanup of [...this.widgetCleanups]) cleanup();
        for (const controller of this.pendingFetches) controller.abort();
        this.pendingFetches.clear();
        this.scope.dispose();
        this.suggestionContainer = null;
        this.suggestionView = null;
    }

    loadSettings() {
        try {
            const stored = localStorage.getItem("kikotools.embedding_autocomplete.settings");
            if (stored) {
                Object.assign(this.settings, JSON.parse(stored));
            }
        } catch (error) {
            console.error("[KikoTools] Error loading autocomplete settings:", error);
        }
    }

    saveSettings() {
        try {
            localStorage.setItem("kikotools.embedding_autocomplete.settings", JSON.stringify(this.settings));
            return true;
        } catch (error) {
            console.error("[KikoTools] Error saving autocomplete settings:", error);
            return false;
        }
    }

    async fetchWithAbort(url, options = {}) {
        const controller = new AbortController();
        this.pendingFetches.add(controller);

        try {
            const response = await fetch(url, {
                ...options,
                signal: AbortSignal.any([controller.signal, this.scope.signal, ...(options.signal ? [options.signal] : [])])
            });
            this.pendingFetches.delete(controller);
            return response;
        } catch (error) {
            this.pendingFetches.delete(controller);
            if (error.name === 'AbortError') {
                return null;
            }
            throw error;
        }
    }

    async fetchResources() {
        try {
            // Fetch embeddings
            if (this.settings.showEmbeddings) {
                await this.fetchEmbeddings();
            }

            // Fetch LoRAs
            if (this.settings.showLoras) {
                await this.fetchLoras();
            }

        } catch (error) {
            console.error("[KikoTools] Error fetching resources:", error);
        }
    }

    async fetchEmbeddings() {
        // Try custom endpoint first
        try {
            const response = await this.fetchWithAbort("/kikotools/autocomplete/embeddings");
            if (response && response.ok) {
                const embeddingsData = await response.json();
                this.embeddings = embeddingsData.map(item => {
                    const fullPath = item.path || item.file_name || item.model_name;
                    const nameOnly = item.name || fullPath.split('/').pop();

                    return {
                        name: nameOnly,
                        fullPath: fullPath,
                        type: "embedding",
                        display: `embedding:${fullPath}`,
                        value: `embedding:${fullPath}`
                    };
                });
                return;
            }
        } catch (e) {
            // Custom endpoint failed, try fallback
        }

        // Fallback to ComfyUI API
        try {
            const embeddingsResponse = await api.getEmbeddings();

            let allEmbeddings = [];

            // Handle paginated response
            if (embeddingsResponse && embeddingsResponse.items && Array.isArray(embeddingsResponse.items)) {
                allEmbeddings = [...embeddingsResponse.items];
                const totalPages = embeddingsResponse.total_pages || 1;

                // Fetch remaining pages
                for (let page = 2; page <= totalPages && page <= 10; page++) { // Limit to 10 pages
                    try {
                        const pageData = await api.getEmbeddings(page);
                        if (pageData && pageData.items) {
                            allEmbeddings.push(...pageData.items);
                        }
                    } catch (err) {
                        break;
                    }
                }

                this.embeddings = allEmbeddings.map(item => {
                    let fullPath = "";

                    if (typeof item === 'string') {
                        fullPath = item;
                    } else if (item && typeof item === 'object') {
                        fullPath = item.file_name || item.model_name || item.name || item.filename;
                    }

                    const cleanPath = String(fullPath || "").replace(/\.(pt|safetensors|ckpt|bin)$/i, '');
                    const nameOnly = cleanPath.split('/').pop() || cleanPath;

                    if (cleanPath && cleanPath !== "undefined") {
                        return {
                            name: nameOnly,
                            fullPath: cleanPath,
                            type: "embedding",
                            display: `embedding:${cleanPath}`,
                            value: `embedding:${cleanPath}`
                        };
                    }
                    return null;
                }).filter(item => item !== null);
            }
            // Handle object format (old API)
            else if (embeddingsResponse && typeof embeddingsResponse === 'object' && !Array.isArray(embeddingsResponse)) {
                const keys = Object.keys(embeddingsResponse);

                if (!keys.includes('items') && !keys.includes('total')) {
                    this.embeddings = keys.map(fullPath => {
                        const cleanPath = fullPath.replace(/\.(pt|safetensors|ckpt|bin)$/i, '');
                        const nameOnly = cleanPath.split('/').pop() || cleanPath;
                        return {
                            name: nameOnly,
                            fullPath: cleanPath,
                            type: "embedding",
                            display: `embedding:${cleanPath}`,
                            value: `embedding:${cleanPath}`
                        };
                    });
                }
            }
        } catch (e) {
            this.embeddings = [];
        }
    }

    async fetchLoras() {
        // Try custom endpoint first
        try {
            const response = await this.fetchWithAbort("/kikotools/autocomplete/loras");
            if (response && response.ok) {
                const lorasData = await response.json();
                this.loras = lorasData.map(item => {
                    const path = item.path || item.name;
                    const nameOnly = item.name || path.split('/').pop();

                    return {
                        name: nameOnly,
                        fullPath: path,
                        type: "lora",
                        display: `<lora:${path}:1.0>`,
                        value: `<lora:${path}:1.0>`
                    };
                });
                return;
            }
        } catch (e) {
            // Custom endpoint failed, try fallback
        }

        // Fallback to object info API
        try {
            const response = await this.fetchWithAbort("/object_info");
            if (response && response.ok) {
                const objectInfo = await response.json();
                if (objectInfo.LoraLoader?.input?.required?.lora_name?.[0]) {
                    const loraNames = objectInfo.LoraLoader.input.required.lora_name[0];
                    this.loras = loraNames.map(name => {
                        const cleanName = name.replace(/\.(pt|safetensors|ckpt|bin)$/i, '');
                        return {
                            name: cleanName,
                            fullPath: cleanName,
                            type: "lora",
                            display: `<lora:${cleanName}:1.0>`,
                            value: `<lora:${cleanName}:1.0>`
                        };
                    });
                }
            }
        } catch (e) {
            this.loras = [];
        }
    }

    async restoreCustomWords() {
        const revision = this.tagRevision = (this.tagRevision || 0) + 1;
        try {
            const cached = await tagCache();
            const source = this.settings.tagSource || this.settings.customWordsUrl;
            if (cached?.source === source) {
                const tags = await parseTagFile(cached.text, this.scope.signal);
                if (!this.scope.signal.aborted && revision === this.tagRevision) this.customWords = tags;
            } else if (!this.scope.signal.aborted && revision === this.tagRevision) {
                if (this.settings.tagSource?.startsWith('file:')) this.customWordsError = 'Saved tag file is missing. Import it again.';
                else await this.loadCustomWords(this.settings.customWordsUrl);
            }
        } catch (error) {
            if (error.name !== 'AbortError' && !this.scope.signal.aborted && revision === this.tagRevision) {
                if (this.settings.tagSource?.startsWith('file:')) this.customWordsError = 'Could not restore the saved tag file. Import it again.';
                else await this.loadCustomWords(this.settings.customWordsUrl);
            }
        }
    }

    async fetchTagList(url, signal = this.scope.signal) {
        const parsed = new URL(url, location.href);
        if (!['http:', 'https:'].includes(parsed.protocol)) throw new Error('Use an HTTP or HTTPS tag-list URL.');
        const response = await this.fetchWithAbort(parsed.href, { signal });
        if (!response?.ok) throw new Error(`Tag download failed (${response?.status || 'cancelled'}).`);
        const text = await readTagResponse(response, { signal });
        const tags = await parseTagFile(text, signal);
        return { text, tags, source: parsed.href };
    }

    async loadCustomWords(url) {
        if (!url || this.scope.signal.aborted) return 0;
        const revision = this.tagRevision = (this.tagRevision || 0) + 1;
        try {
            const list = await this.fetchTagList(url);
            if (revision !== this.tagRevision || this.scope.signal.aborted) return 0;
            this.customWords = list.tags;
            this.customWordsError = '';
            return this.customWords.length;
        } catch (error) {
            if (error.name !== 'AbortError') this.customWordsError = error.message;
            return 0;
        }
    }

    async saveTagSettings(next, pending) {
        const previous = { ...this.settings };
        Object.assign(this.settings, next);
        if (!this.saveSettings()) {
            this.settings = previous;
            throw new Error('Could not save settings. Check browser storage and try again.');
        }
        if (pending) {
            try { await tagCache({ text: pending.text, source: pending.source }); }
            catch (error) {
                this.settings = previous;
                this.saveSettings();
                throw new Error(`Could not save tag list: ${error.message}`);
            }
            this.tagRevision = (this.tagRevision || 0) + 1;
            this.customWords = pending.tags;
            this.customWordsError = '';
        }
        if (this.settings.showEmbeddings || this.settings.showLoras) this.fetchResourcesDebounced();
        if (!pending && this.settings.showCustomWords && (!previous.showCustomWords || previous.customWordsUrl !== this.settings.customWordsUrl)) this.restoreCustomWords();
    }

    createSuggestionContainer() {
        if (this.suggestionContainer) return;
        this.suggestionView = createSuggestionView(this.scope, app.ui.settings);
        this.suggestionContainer = this.suggestionView.element;
    }

    hideSuggestions() {
        this.currentWidget?.inputEl.removeAttribute('aria-activedescendant');
        this.suggestionView?.hide();
        this.currentWidget = null;
    }

    attachToWidget(widget, node) {
        if (this.scope.signal.aborted || !widget.inputEl || widget.inputEl.readOnly || widget.inputEl.disabled || this.activeWidgets.has(widget)) {
            return;
        }

        if (node.graph === null || (node.graph?._nodes && !node.graph._nodes.includes(node))) return;
        this.activeWidgets.add(widget);
        const textarea = widget.inputEl;
        const widgetScope = createScope();
        let blurFrame;
        widgetScope.cleanup(() => cancelAnimationFrame(blurFrame));
        const attributes = new Map(['aria-controls', 'aria-autocomplete', 'aria-haspopup', 'aria-activedescendant'].map(name => [name, textarea.getAttribute(name)]));

        // Create suggestion container if it doesn't exist
        if (!this.suggestionContainer) {
            this.createSuggestionContainer();
        }

        textarea.setAttribute('aria-controls', this.suggestionContainer.id);
        textarea.setAttribute('aria-autocomplete', 'list');
        textarea.setAttribute('aria-haspopup', 'listbox');

        // Store widget-specific state
        const widgetState = {
            currentSuggestions: [],
            selectedIndex: -1,
            currentPrefix: "",
            prefixStart: -1
        };

        // Event handler functions
        const handlers = {
            hideSuggestions: () => {
                if (this.currentWidget === widget) this.hideSuggestions();
                widgetState.selectedIndex = -1;
                widgetState.currentSuggestions = [];
            },

            showSuggestions: (suggestions) => {
                if (!suggestions.length) { handlers.hideSuggestions(); return; }
                if (this.currentWidget !== widget) this.hideSuggestions();
                this.currentWidget = widget;
                if (widgetState.selectedIndex >= suggestions.length) widgetState.selectedIndex = -1;
                this.suggestionView.render(suggestions, index => {
                    widgetState.selectedIndex = index;
                    handlers.updateSelection();
                }, handlers.insertSuggestion);
                handlers.updateSelection();
                this.suggestionView.position(textarea.getBoundingClientRect());
            },

            updateSelection: () => {
                const id = this.suggestionView.select(widgetState.selectedIndex);
                if (id) textarea.setAttribute('aria-activedescendant', id);
                else textarea.removeAttribute('aria-activedescendant');
            },

            insertSuggestion: (suggestion) => {
                const text = textarea.value;
                const cursor = textarea.selectionStart;
                const textBefore = text.substring(0, cursor);

                let insertText = "";
                let replaceLength = cursor - widgetState.prefixStart;

                // Apply replace underscores setting for custom words
                if (suggestion.type === "custom" && this.settings.replaceUnderscores) {
                    suggestion = {
                        ...suggestion,
                        name: suggestion.name.replace(/_/g, ' '),
                        value: suggestion.value.replace(/_/g, ' '),
                        display: suggestion.display.replace(/_/g, ' ')
                    };
                }

                // Check context and determine what to insert
                const embTrigger = this.settings.embeddingTrigger || "embedding:";
                const embRegex = new RegExp(embTrigger.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + "([a-zA-Z0-9_\\/-]*)$");

                if (textBefore.match(embRegex) || (embTrigger === "embedding:" && textBefore.match(/embeddings:([a-zA-Z0-9_\/-]*)$/))) {
                    insertText = suggestion.fullPath || suggestion.name;
                } else if (suggestion.type === "lora") {
                    const loraTrigger = this.settings.loraTrigger || "<lora:";
                    const escapedTrigger = loraTrigger.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
                    const loraRegex = new RegExp(escapedTrigger + "([a-zA-Z0-9_\\s\\/-]*)$");

                    if (textBefore.match(loraRegex)) {
                        insertText = (suggestion.fullPath || suggestion.name) + ":1.0>";
                    } else {
                        insertText = suggestion.value || suggestion.display;
                    }
                } else if (widgetState.currentPrefix && textBefore.match(/\b(em|emb|embe|embed|embeddi|embeddin|embedding)$/i)) {
                    const match = textBefore.match(/\b(em|emb|embe|embed|embeddi|embeddin|embedding)$/i);
                    insertText = suggestion.value || suggestion.display;
                    widgetState.prefixStart = cursor - match[1].length;
                    replaceLength = match[1].length;
                } else {
                    insertText = suggestion.value || suggestion.display;
                    replaceLength = cursor - widgetState.prefixStart;
                }

                const before = text.substring(0, widgetState.prefixStart);
                const after = text.substring(widgetState.prefixStart + replaceLength);

                // Add comma if enabled
                let finalInsertText = insertText;
                if (this.settings.autoInsertComma && (suggestion.type === "custom" || suggestion.type === "embedding" || suggestion.type === "lora")) {
                    const trimmedAfter = after.trim();
                    if (!/^(?:[,.;)\]]|:\s*[+-]?(?:\d+(?:\.\d*)?|\.\d+)\s*[)\]])/.test(trimmedAfter)) {
                        finalInsertText += ', ';
                    }
                }

                textarea.focus({ preventScroll: true });
                textarea.value = before + finalInsertText + after;
                textarea.selectionStart = textarea.selectionEnd = widgetState.prefixStart + finalInsertText.length;

                handlers.hideSuggestions();

                // Trigger change event
                const event = new Event("input", { bubbles: true });
                textarea.dispatchEvent(event);
            },

            findPrefix: () => {
                const text = textarea.value;
                const cursor = textarea.selectionStart;
                const textBefore = text.substring(0, cursor);

                // Check for embedding trigger
                const embTrigger = this.settings.embeddingTrigger || "embedding:";
                const embRegex = new RegExp(embTrigger.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + "([a-zA-Z0-9_\\/-]*)$");
                const embeddingMatch = textBefore.match(embRegex);
                if (embeddingMatch) {
                    widgetState.currentPrefix = embeddingMatch[1].toLowerCase();
                    widgetState.prefixStart = cursor - embeddingMatch[1].length;
                    return "embedding";
                }

                // Check for plural embeddings
                if (embTrigger === "embedding:") {
                    const pluralMatch = textBefore.match(/embeddings:([a-zA-Z0-9_\/-]*)$/);
                    if (pluralMatch) {
                        widgetState.currentPrefix = pluralMatch[1].toLowerCase();
                        widgetState.prefixStart = cursor - pluralMatch[1].length;
                        return "embedding";
                    }
                }

                // Check for LoRA trigger
                const loraTrigger = this.settings.loraTrigger || "<lora:";
                const escapedTrigger = loraTrigger.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
                const loraRegex = new RegExp(escapedTrigger + "([a-zA-Z0-9_\\s\\/-]*)$");
                const loraMatch = textBefore.match(loraRegex);
                if (loraMatch) {
                    widgetState.currentPrefix = loraMatch[1].toLowerCase();
                    widgetState.prefixStart = cursor - loraMatch[1].length;
                    return "lora";
                }

                const query = tagQuery(textBefore);
                if (query && [...query.prefix].length >= this.settings.minChars) {
                    widgetState.currentPrefix = query.prefix.toLowerCase();
                    widgetState.prefixStart = query.start;
                    const word = query.prefix;

                    const quickTrigger = this.settings.quickTrigger;
                    if (quickTrigger && word.toLowerCase().startsWith(quickTrigger.toLowerCase())) {
                        return "embedding-word";
                    }

                    return "general";
                }

                return false;
            },

            getSuggestions: (prefix, type) => {
                const suggestions = [];

                if (type === "embedding" && this.settings.showEmbeddings) {
                    suggestions.push(...this.embeddings.filter(e =>
                        prefix === "" || e.name.toLowerCase().includes(prefix) || (e.fullPath && e.fullPath.toLowerCase().includes(prefix))
                    ));
                } else if (type === "embedding-word" && this.settings.showEmbeddings) {
                    suggestions.push(...this.embeddings);
                } else if (type === "lora" && this.settings.showLoras) {
                    suggestions.push(...this.loras.filter(l =>
                        prefix === "" || l.name.toLowerCase().includes(prefix)
                    ));
                } else if (type === "general") {
                    if (this.settings.showEmbeddings) {
                        suggestions.push(...this.embeddings.filter(e =>
                            e.name.toLowerCase().includes(prefix) || (e.fullPath && e.fullPath.toLowerCase().includes(prefix))
                        ));
                    }

                    if (this.settings.showLoras) {
                        suggestions.push(...this.loras.filter(l =>
                            l.name.toLowerCase().includes(prefix)
                        ));
                    }

                    if (this.settings.showCustomWords) {
                        suggestions.push(...searchTags(this.customWords, prefix, this.settings.maxSuggestions));
                    }
                }

                // Sort suggestions
                suggestions.sort((a, b) => {
                    if (a.type === 'custom' && b.type === 'custom') return 0;
                    const aName = a.name.toLowerCase();
                    const bName = b.name.toLowerCase();
                    const aPath = (a.fullPath || a.name).toLowerCase();
                    const bPath = (b.fullPath || b.name).toLowerCase();

                    if (aName === prefix) return -1;
                    if (bName === prefix) return 1;
                    if (aPath === prefix) return -1;
                    if (bPath === prefix) return 1;
                    if (aName.startsWith(prefix) && !bName.startsWith(prefix)) return -1;
                    if (!aName.startsWith(prefix) && bName.startsWith(prefix)) return 1;
                    if (aPath.startsWith(prefix) && !bPath.startsWith(prefix)) return -1;
                    if (!aPath.startsWith(prefix) && bPath.startsWith(prefix)) return 1;

                    if (this.settings.sortByDirectory) {
                        const aDir = aPath.includes('/') ? aPath.split('/')[0] : '';
                        const bDir = bPath.includes('/') ? bPath.split('/')[0] : '';

                        if (aDir !== bDir) {
                            return aDir.localeCompare(bDir);
                        }
                    }

                    return aName.localeCompare(bName);
                });

                return suggestions.slice(0, this.settings.maxSuggestions);
            },

            onInput: (e) => {
                if (!this.settings.enabled || textarea.readOnly || textarea.disabled || e.isComposing) {
                    handlers.hideSuggestions();
                    return;
                }

                const triggerType = handlers.findPrefix();
                widgetState.selectedIndex = -1;
                if (triggerType) {
                    widgetState.currentSuggestions = handlers.getSuggestions(widgetState.currentPrefix, triggerType);
                    if (!widgetState.currentSuggestions.length && triggerType === 'general') {
                        const query = tagQuery(textarea.value.substring(0, textarea.selectionStart), true);
                        if (query && query.start !== widgetState.prefixStart && [...query.prefix].length >= this.settings.minChars) {
                            widgetState.currentPrefix = query.prefix.toLowerCase();
                            widgetState.prefixStart = query.start;
                            widgetState.currentSuggestions = handlers.getSuggestions(widgetState.currentPrefix, triggerType);
                        }
                    }

                    if (widgetState.currentSuggestions.length > 0) {
                        handlers.showSuggestions(widgetState.currentSuggestions);
                    } else {
                        handlers.hideSuggestions();
                    }
                } else {
                    handlers.hideSuggestions();
                }
            },

            onKeydown: (e) => {
                if (e.isComposing || e.keyCode === 229 || !this.suggestionContainer || this.suggestionContainer.hidden || this.currentWidget !== widget) {
                    return;
                }

                if (e.key === "ArrowDown") {
                    e.preventDefault();
                    e.stopPropagation();
                    widgetState.selectedIndex = Math.min(widgetState.selectedIndex + 1, widgetState.currentSuggestions.length - 1);
                    handlers.updateSelection();
                } else if (e.key === "ArrowUp") {
                    e.preventDefault();
                    e.stopPropagation();
                    widgetState.selectedIndex = Math.max(widgetState.selectedIndex - 1, 0);
                    handlers.updateSelection();
                } else if ((e.key === "Enter" && this.settings.insertOnEnter) ||
                           (e.key === "Tab" && this.settings.insertOnTab)) {
                    if (widgetState.selectedIndex >= 0 && widgetState.selectedIndex < widgetState.currentSuggestions.length) {
                        e.preventDefault();
                        e.stopPropagation();
                        handlers.insertSuggestion(widgetState.currentSuggestions[widgetState.selectedIndex]);
                    }
                } else if (e.key === "Escape") {
                    e.preventDefault();
                    e.stopPropagation();
                    handlers.hideSuggestions();
                }
            },

            onBlur: () => {
                cancelAnimationFrame(blurFrame);
                blurFrame = requestAnimationFrame(() => {
                    blurFrame = null;
                    if (!widgetScope.signal.aborted && document.activeElement !== textarea && this.currentWidget === widget) handlers.hideSuggestions();
                });
            },

            onScroll: () => {
                // Hide suggestions when scrolling
                if (this.currentWidget === widget) {
                    handlers.hideSuggestions();
                }
            }
        };

        for (const [event, handler] of [['input', handlers.onInput], ['keydown', handlers.onKeydown], ['blur', handlers.onBlur], ['scroll', handlers.onScroll]]) widgetScope.listen(textarea, event, handler);
        const cleanup = () => {
            if (widgetScope.signal.aborted) return;
            handlers.hideSuggestions();
            widgetScope.dispose();
            for (const [name, value] of attributes) {
                if (value === null) textarea.removeAttribute(name);
                else textarea.setAttribute(name, value);
            }
            this.activeWidgets.delete(widget);
            this.widgetCleanupMap.delete(widget);
            this.widgetCleanups.delete(cleanup);
        };
        for (const [owner, name] of [[widget, 'onRemoved'], [widget, 'onRemove']]) {
            const original = owner[name];
            const wrapped = function (...args) { cleanup(); return original?.apply(this, args); };
            owner[name] = wrapped;
            widgetScope.cleanup(() => { if (owner[name] === wrapped) owner[name] = original; });
        }
        let nodeHook = this.nodeHooks.get(node);
        if (!nodeHook) {
            const original = node.onRemoved;
            const cleanups = new Set();
            const wrapped = function (...args) {
                for (const cleanup of [...cleanups]) cleanup();
                return original?.apply(this, args);
            };
            nodeHook = { original, wrapped, cleanups };
            this.nodeHooks.set(node, nodeHook);
            node.onRemoved = wrapped;
        }
        nodeHook.cleanups.add(cleanup);
        widgetScope.cleanup(() => {
            nodeHook.cleanups.delete(cleanup);
            if (!nodeHook.cleanups.size) {
                if (node.onRemoved === nodeHook.wrapped) node.onRemoved = nodeHook.original;
                this.nodeHooks.delete(node);
            }
        });
        this.widgetCleanupMap.set(widget, cleanup);
        this.widgetCleanups.add(cleanup);
    }

    detachFromWidget(widget) {
        const cleanup = this.widgetCleanupMap.get(widget);
        if (cleanup) {
            cleanup();
        }
    }
}

// Initialize and register
let autocompleteInstance = null;
let originalStringWidget = null;

app.registerExtension({
    name: "kikotools.embeddingAutocomplete",

    async setup() {
        // Clean up any existing instance
        if (autocompleteInstance) {
            autocompleteInstance.cleanup();
        }

        // Create new autocomplete instance
        autocompleteInstance = new KikoEmbeddingAutocomplete();
        const instance = autocompleteInstance;

        // Store reference for debugging (but not in global window to avoid conflicts)
        if (!window.kikotools) {
            window.kikotools = {};
        }
        window.kikotools.autocomplete = autocompleteInstance;

        // Add settings button
        app.ui.settings.addSetting({
            id: "kikotools.embeddingAutocomplete",
            name: "🫶 Embedding Autocomplete Configuration",
            tooltip: "Configure autocomplete settings",
            category: ["kikotools", "🫶 Embedding Autocomplete Configuration"],
            defaultValue: null,
            type: () => createAutocompleteLauncher(autocompleteInstance, app.ui.settings, app.canvas.canvas)
        });

        // Override STRING widget creation
        if (!originalStringWidget) {
            originalStringWidget = ComfyWidgets.STRING;
        }

        const wrappedStringWidget = function(node, inputName, inputData, app) {
            const widget = originalStringWidget.apply(this, arguments);

            // Only attach to multiline text widgets (prompts)
            const entry = widget.widget || widget;
            if (inputData[1]?.multiline && entry.inputEl) {
                // Use requestAnimationFrame to ensure DOM is ready
                instance.nextFrame(() => instance.attachToWidget(entry, node));
            }

            return widget;
        };

        ComfyWidgets.STRING = wrappedStringWidget;
        instance.scope.cleanup(() => { if (ComfyWidgets.STRING === wrappedStringWidget) ComfyWidgets.STRING = originalStringWidget; });

        // Attach to existing multiline widgets
        const attachToExistingWidgets = () => {
            if (instance.scope.signal.aborted) return;

            app.graph._nodes.forEach(node => {
                if (node.widgets) {
                    node.widgets.forEach(widget => {
                        if (widget.inputEl && widget.inputEl.tagName === "TEXTAREA" && !instance.activeWidgets.has(widget)) {
                            instance.attachToWidget(widget, node);
                        }
                    });
                }
            });
        };

        // Wait for graph to be ready
        instance.nextFrame(() => instance.nextFrame(attachToExistingWidgets));

        // Re-attach when new nodes are added
        const originalAddNode = app.graph.add;
        const wrappedAddNode = function(...args) {
            const result = originalAddNode.apply(this, args);
            instance.nextFrame(attachToExistingWidgets);
            return result;
        };
        app.graph.add = wrappedAddNode;
        instance.scope.cleanup(() => { if (app.graph.add === wrappedAddNode) app.graph.add = originalAddNode; });
    },

    async beforeUnload() {
        // Clean up before page unload
        if (autocompleteInstance) {
            autocompleteInstance.cleanup();
        }
    }
});