import { app } from "../../scripts/app.js";
import { api } from "../../scripts/api.js";
import { MultiButtonWidget } from "./multi_button_widget.js";

// 获取input目录的文件列表
async function getInputFileList() {
    try {
        const response = await fetch('/object_info');
        const data = await response.json();
        // 从 LoadImage 节点类型获取可用文件列表
        const loadImageInfo = data.LoadImage;
        if (loadImageInfo && loadImageInfo.input && loadImageInfo.input.required && loadImageInfo.input.required.image) {
            return loadImageInfo.input.required.image[0]; // 返回文件列表数组
        }
        return [];
    } catch (error) {
        console.error("获取文件列表失败:", error);
        return [];
    }
}

// 删除图片文件（直接删除，无确认弹窗）
async function deleteImageFile(filename) {
    try {
        const response = await api.fetchApi('/lg/delete_image', {
            method: 'DELETE',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ filename: filename })
        });
        
        if (response.status === 200) {
            const result = await response.json();
            if (result.success) {
                console.log(`文件 ${filename} 删除成功`);
                return true;
            }
        } else {
            const error = await response.json();
            console.error(`删除失败: ${error.error || '未知错误'}`);
            return false;
        }
    } catch (error) {
        console.error(`删除文件失败: ${error}`);
        return false;
    }
}

// 加载最新图片 - 参考PB.js的实现方式
async function loadLatestImage(node, folder_type) {
    try {
        // 获取指定目录中的最新图片
        const res = await api.fetchApi(`/lg/get/latest_image?type=${folder_type}`, { cache: "no-store" });
        
        if (res.status === 200) {
            const item = await res.json();
            
            if (item && item.filename) {
                // 找到图像小部件
                const imageWidget = node.widgets.find(w => w.name === 'image');
                if (!imageWidget) return false;
                
                // 直接使用原始文件，不需要复制到input
                const displayValue = `${item.filename} [${folder_type}]`;
                imageWidget.value = displayValue;
                
                // 通过回调更新预览图像
                if (typeof imageWidget.callback === "function") {
                    imageWidget.callback(displayValue);
                }
                
                // 更新画布
                app.graph.setDirtyCanvas(true);
                return true;
            }
        }
    } catch (error) {
        console.error(`加载图像失败: ${error}`);
    }
    return false;
}

// 扩展ContextMenu以支持图片缩略图和删除功能
function extendContextMenuForThumbnails() {
    const originalContextMenu = LiteGraph.ContextMenu;
    
    LiteGraph.ContextMenu = function(values, options) {
        const ctx = originalContextMenu.call(this, values, options);
        
        // 检查是否是LG_LoadImage节点的image widget的下拉菜单
        if (options?.className === 'dark' && values?.length > 0) {
            // 等待DOM更新后处理
            requestAnimationFrame(() => {
                const currentNode = LGraphCanvas.active_canvas?.current_node;
                
                // 检查是否是LG_LoadImage节点的image widget
                if (currentNode?.comfyClass === "LG_LoadImage") {
                    const imageWidget = currentNode.widgets?.find(w => w.name === 'image');
                    
                    if (imageWidget && imageWidget.options?.values?.length === values.length) {
                        // 限制菜单宽度 - 调整为更宽
                        ctx.root.style.maxWidth = '400px';
                        ctx.root.style.minWidth = '350px';
                        
                        // 为每个菜单项添加缩略图和删除按钮
                        const menuItems = ctx.root.querySelectorAll('.litemenu-entry');
                        
                        menuItems.forEach((item, index) => {
                            if (index < values.length) {
                                const filename = values[index];
                                addThumbnailAndDeleteToMenuItem(item, filename, currentNode, ctx);
                            }
                        });
                    }
                }
            });
        }
        
        return ctx;
    };
    
    // 保持原型链
    LiteGraph.ContextMenu.prototype = originalContextMenu.prototype;
}

// 为菜单项添加缩略图和删除按钮
function addThumbnailAndDeleteToMenuItem(menuItem, filename, node, contextMenu) {
    // 避免重复添加
    if (menuItem.querySelector('.thumbnail-container')) {
        return;
    }
    
    // 保存原始文本内容
    const originalText = menuItem.textContent;
    
    // 清空菜单项内容
    menuItem.innerHTML = '';
    
    // 设置菜单项样式为flex布局
    menuItem.style.cssText += `
        display: flex;
        align-items: center;
        padding: 6px 12px;
        min-height: 48px;
        position: relative;
    `;
    
    // 创建缩略图容器
    const thumbnailContainer = document.createElement('div');
    thumbnailContainer.className = 'thumbnail-container';
    thumbnailContainer.style.cssText = `
        width: 40px;
        height: 40px;
        margin-right: 10px;
        border-radius: 4px;
        overflow: hidden;
        background: #222;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border: 1px solid #444;
    `;
    
    // 创建缩略图
    const thumbnail = document.createElement('img');
    thumbnail.style.cssText = `
        max-width: 100%;
        max-height: 100%;
        object-fit: cover;
    `;
    
    // 设置图片源
    thumbnail.src = `/view?filename=${encodeURIComponent(filename)}&type=input&subfolder=`;
    thumbnail.alt = filename;
    
    // 处理图片加载失败
    thumbnail.onerror = function() {
        thumbnailContainer.innerHTML = `
            <span style="
                color: #888; 
                font-size: 10px; 
                text-align: center;
                line-height: 1.2;
            ">无<br>预览</span>
        `;
    };
    
    thumbnailContainer.appendChild(thumbnail);
    
    // 创建文件名标签
    const textLabel = document.createElement('span');
    
    // 截断长文件名 - 保留前10位和后10位文件名及扩展名
    let displayName = originalText;
    if (displayName.length > 35) {
        // 保留文件扩展名
        const lastDotIndex = displayName.lastIndexOf('.');
        if (lastDotIndex > 0) {
            const name = displayName.substring(0, lastDotIndex);
            const extension = displayName.substring(lastDotIndex);
            if (name.length > 20) {
                // 保留前10位 + ... + 后10位 + 扩展名
                const firstPart = name.substring(0, 10);
                const lastPart = name.substring(name.length - 10);
                displayName = firstPart + '...' + lastPart + extension;
            }
        } else {
            // 没有扩展名的情况，保留前10位和后10位
            if (displayName.length > 20) {
                const firstPart = displayName.substring(0, 10);
                const lastPart = displayName.substring(displayName.length - 10);
                displayName = firstPart + '...' + lastPart;
            }
        }
    }
    
    textLabel.textContent = displayName;
    textLabel.title = originalText; // 悬停时显示完整文件名
    textLabel.style.cssText = `
        color: inherit;
        font-size: inherit;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;
        cursor: pointer;
        max-width: 280px;
        min-width: 0;
    `;
    
    // 创建删除按钮 - 扩大点击范围
    const deleteButton = document.createElement('button');
    deleteButton.innerHTML = '✕';
    deleteButton.title = `删除 ${filename}`;
    deleteButton.style.cssText = `
        width: 28px;
        height: 28px;
        border: none;
        background: transparent;
        color: #888;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        font-weight: bold;
        margin-left: 8px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0.7;
        transition: all 0.15s;
        padding: 0;
    `;
    
    // 删除按钮悬停效果 - 更明显的反馈
    deleteButton.addEventListener('mouseenter', () => {
        deleteButton.style.opacity = '1';
        deleteButton.style.color = '#fff';
        deleteButton.style.background = 'rgba(255, 255, 255, 0.15)';
        deleteButton.style.transform = 'scale(1.05)';
    });
    
    deleteButton.addEventListener('mouseleave', () => {
        deleteButton.style.opacity = '0.7';
        deleteButton.style.color = '#888';
        deleteButton.style.background = 'transparent';
        deleteButton.style.transform = 'scale(1)';
    });
    
    // 删除按钮点击事件 - 快速删除，无动画延迟
    deleteButton.addEventListener('click', async (e) => {
        e.stopPropagation(); // 阻止触发菜单项选择
        e.preventDefault();
        
        // 立即显示删除中状态
        deleteButton.innerHTML = '⋯';
        deleteButton.style.pointerEvents = 'none';
        deleteButton.style.opacity = '0.5';
        
        // 直接执行删除操作，无确认弹窗
        const deleted = await deleteImageFile(filename);
        
        if (deleted) {
            // 立即移除菜单项，无动画延迟
            if (menuItem.parentNode) {
                menuItem.parentNode.removeChild(menuItem);
            }
            
            // 更新节点的文件列表
            const imageWidget = node.widgets.find(w => w.name === 'image');
            if (imageWidget) {
                // 重新获取文件列表
                const fileList = await getInputFileList();
                imageWidget.options.values = fileList;
                
                // 如果删除的是当前选中的文件，选择第一个可用文件
                if (imageWidget.value === filename) {
                    imageWidget.value = fileList.length > 0 ? fileList[0] : '';
                    
                    // 触发回调更新预览
                    if (typeof imageWidget.callback === "function") {
                        imageWidget.callback(imageWidget.value);
                    }
                }
                
                // 更新画布
                app.graph.setDirtyCanvas(true);
            }
            
            // 检查是否还有剩余菜单项，如果没有则关闭菜单
            const remainingItems = contextMenu.root.querySelectorAll('.litemenu-entry');
            if (remainingItems.length === 0) {
                contextMenu.close();
            }
        } else {
            // 删除失败，恢复按钮状态
            deleteButton.innerHTML = '✕';
            deleteButton.style.pointerEvents = 'auto';
            deleteButton.style.opacity = '0.7';
        }
    });
    
    // 创建可点击区域（除了删除按钮）
    const clickableArea = document.createElement('div');
    clickableArea.style.cssText = `
        display: flex;
        align-items: center;
        flex: 1;
        cursor: pointer;
    `;
    
    clickableArea.appendChild(thumbnailContainer);
    clickableArea.appendChild(textLabel);
    
    // 为可点击区域添加选择事件
    clickableArea.addEventListener('click', () => {
        // 模拟原始菜单项点击
        const imageWidget = node.widgets.find(w => w.name === 'image');
        if (imageWidget) {
            imageWidget.value = filename;
            
            // 触发回调
            if (typeof imageWidget.callback === "function") {
                imageWidget.callback(filename);
            }
            
            // 更新画布
            app.graph.setDirtyCanvas(true);
        }
        
        // 关闭菜单
        contextMenu.close();
    });
    
    // 组装菜单项
    menuItem.appendChild(clickableArea);
    menuItem.appendChild(deleteButton);
    
    // 移除原有的点击事件，因为我们现在有自定义的点击处理
    menuItem.onclick = null;
}

app.registerExtension({
    name: "Comfy.LG.LoadImageButtons",
    
    init() {
        // 扩展ContextMenu以支持缩略图和删除功能
        extendContextMenuForThumbnails();
    },
    
    async beforeRegisterNodeDef(nodeType, nodeData, app) {
        if (nodeData.name !== "LG_LoadImage") return;
        
        const onNodeCreated = nodeType.prototype.onNodeCreated;
        
        nodeType.prototype.onNodeCreated = function() {
            const result = onNodeCreated ? onNodeCreated.apply(this, arguments) : undefined;
            
            // 使用多按钮组件创建刷新按钮
            const refreshWidget = this.addCustomWidget(MultiButtonWidget(app, "Refresh From", {
                labelWidth: 80,
                buttonSpacing: 4
            }, [
                {
                    text: "Temp",
                    callback: () => {
                        loadLatestImage(this, "temp").then(success => {
                            if (success) {
                                app.graph.setDirtyCanvas(true);
                            }
                        });
                    }
                },
                {
                    text: "Output",
                    callback: () => {
                        loadLatestImage(this, "output").then(success => {
                            if (success) {
                                app.graph.setDirtyCanvas(true);
                            }
                        });
                    }
                }
            ]));
            refreshWidget.serialize = false;
            
            return result;
        };
    }
});

app.registerExtension({
    name: "Comfy.LG.LoadImage_V2",
    
    init() {
        // 扩展ContextMenu以支持缩略图和删除功能
        extendContextMenuForThumbnails();
    },
    
    async beforeRegisterNodeDef(nodeType, nodeData, app) {
        if (nodeData.name !== "LG_LoadImage_V2") return;
        
        // 保持节点的原始行为，不添加额外的前端功能
        // auto_refresh的逻辑现在完全在后端处理
    }
});