import { app } from "../../scripts/app.js";
import { api } from "../../scripts/api.js";
import { $el } from "../../scripts/ui.js";
import { debug, _name, _endpoint, api_get, api_post } from "./utils.js";

// ===============================================
// MovementManager - ノード・グループ移動拡張機能
// ===============================================
class MovementManager {
    constructor() {
        // 基本設定
        this.enableArrowMove = true;
        this.moveSteps = 100;
        this.moveStepsShift = 200;
        this.moveStepsCtrl = 10;

        // Shift+ドラッグ制限の状態
        this.shiftDragState = {
            active: false,
            startMouse: { x: 0, y: 0 },
            nodeStartPositions: new Map(),
            groupStartPositions: new Map(),
            direction: null, // 'horizontal', 'vertical', null
            threshold: 10
        };
        
        // イベントハンドラーをバインド
        this.boundHandlers = {
            keydown: this.handleKeyDown.bind(this),
            shiftKeyUp: this.handleShiftKeyUp.bind(this),
            pointerDown: this.handlePointerDown.bind(this),
            pointerMove: this.handlePointerMove.bind(this),
            pointerUp: this.handlePointerUp.bind(this)
        };
        
        this.isInitialized = false;
    }
    
    // ===============================================
    // 初期化とクリーンアップ
    // ===============================================
    initialize() {
        if (this.isInitialized) return;
        
        this.setupEventListeners();
        this.isInitialized = true;
    }
    
    cleanup() {
        if (!this.isInitialized) return;
        
        this.removeEventListeners();
        this.resetShiftDrag();
        this.isInitialized = false;
    }
    
    setupEventListeners() {
        // キーボードイベント
        document.addEventListener('keydown', this.boundHandlers.keydown, { capture: true, passive: false });
        document.addEventListener('keyup', this.boundHandlers.shiftKeyUp, { capture: true });
        
        // ポインターイベント（Shift+ドラッグ制限用）
        app.canvasEl.addEventListener('pointerdown', this.boundHandlers.pointerDown, { capture: true });
        app.canvasEl.addEventListener('pointermove', this.boundHandlers.pointerMove, { capture: true });
        app.canvasEl.addEventListener('pointerup', this.boundHandlers.pointerUp, { capture: true });
    }
    
    removeEventListeners() {
        document.removeEventListener('keydown', this.boundHandlers.keydown, { capture: true });
        document.removeEventListener('keyup', this.boundHandlers.shiftKeyUp, { capture: true });
        
        app.canvasEl.removeEventListener('pointerdown', this.boundHandlers.pointerDown, { capture: true });
        app.canvasEl.removeEventListener('pointermove', this.boundHandlers.pointerMove, { capture: true });
        app.canvasEl.removeEventListener('pointerup', this.boundHandlers.pointerUp, { capture: true });
    }
    
    // ===============================================
    // ユーティリティ関数
    // ===============================================
    canNodeMove() {
        const activeElement = document.activeElement;
        
        // 入力フィールドにフォーカスがある場合は無効
        const inputTags = ['INPUT', 'TEXTAREA'];
        if (inputTags.includes(activeElement?.tagName) || activeElement?.isContentEditable) {
            return false;
        }
        
        // 画像表示エリアでも、ノードまたはグループが選択されていれば移動を許可
        const imageClasses = ['comfy-image', 'image-preview'];
        const imageTags = ['CANVAS', 'IMG'];
        if (imageClasses.some(cls => activeElement?.classList?.contains(cls)) || 
            imageTags.includes(activeElement?.tagName)) {
            const { nodes, groups } = this.getSelectedElements();
            return nodes.length > 0 || groups.length > 0;
        }

        return true;
    }

    getSelectedNodes() {
        const selectedNodes = app.canvas.selected_nodes;
        return typeof selectedNodes === "object" ? Object.values(selectedNodes) : [];
    }
    
    getSelectedGroups() {
        // ComfyUIのグループ選択状態を取得
        const canvas = app.canvas;
        const selectedGroups = [];
        
        if (canvas.graph && canvas.graph._groups) {
            canvas.graph._groups.forEach(group => {
                if (group.selected || (canvas.selected_group === group)) {
                    selectedGroups.push(group);
                }
            });
        }
        
        return selectedGroups;
    }
    
    getSelectedElements() {
        return {
            nodes: this.getSelectedNodes(),
            groups: this.getSelectedGroups()
        };
    }
    
    // グループ内のノードを取得
    getNodesInGroup(group) {
        return group._nodes || group.nodes || [];
    }
    
    // グループ内の子グループを取得
    getChildGroups(group) {
        if (!group._children && !group.children) return [];
        
        const children = group._children || group.children;
        const childGroups = [];
        
        children.forEach(child => {
            if (child instanceof LGraphGroup || (child.constructor && child.constructor.name === 'LGraphGroup')) {
                childGroups.push(child);
            }
        });
        
        return childGroups;
    }
    
    // グループ内の全ノードを再帰的に取得（ネストグループも含む）
    getAllNodesInGroupRecursive(group, visited = new Set()) {
        if (visited.has(group)) return [];
        visited.add(group);
        
        // 直接的な子ノード
        let allNodes = [...this.getNodesInGroup(group)];
        
        // 子グループ内のノードも再帰的に取得
        const childGroups = this.getChildGroups(group);
        childGroups.forEach(childGroup => {
            if (!visited.has(childGroup)) {
                allNodes = allNodes.concat(this.getAllNodesInGroupRecursive(childGroup, visited));
            }
        });
        
        return allNodes;
    }
    
    // ネストしたグループを再帰的に取得
    getAllGroupsRecursive(group, visited = new Set()) {
        if (visited.has(group)) return [];
        visited.add(group);
        
        const allGroups = [group];
        
        // 子グループを直接取得
        const childGroups = this.getChildGroups(group);
        childGroups.forEach(childGroup => {
            if (!visited.has(childGroup)) {
                allGroups.push(...this.getAllGroupsRecursive(childGroup, visited));
            }
        });
        
        return allGroups;
    }
    
    moveElements(dx, dy) {
        const { nodes, groups } = this.getSelectedElements();
        
        if (nodes.length === 0 && groups.length === 0) return false;
        
        // 選択されたノード（直接選択）
        const selectedNodes = new Set(nodes);
        
        // 選択されたグループとその中のノードを処理
        const processedGroups = new Set();
        const groupNodes = new Set();
        
        groups.forEach(group => {
            const allGroups = this.getAllGroupsRecursive(group);
            allGroups.forEach(g => {
                if (!processedGroups.has(g)) {
                    // グループを移動
                    g.pos[0] += dx;
                    g.pos[1] += dy;
                    processedGroups.add(g);
                    
                    // グループ内のノードも移動対象に追加
                    const nodesInGroup = this.getAllNodesInGroupRecursive(g);
                    nodesInGroup.forEach(node => groupNodes.add(node));
                }
            });
        });
        
        // 直接選択されたノードを移動
        selectedNodes.forEach(node => {
            node.pos[0] += dx;
            node.pos[1] += dy;
        });
        
        // グループ内のノードを移動（直接選択されていないもののみ）
        groupNodes.forEach(node => {
            if (!selectedNodes.has(node)) {
                node.pos[0] += dx;
                node.pos[1] += dy;
            }
        });
        
        // 選択オーバーレイも同期
        this.updateSelectionOverlay(dx, dy);
        
        // キャンバス更新
        app.canvas.setDirty(true, true);
        return true;
    }
    
    // 従来のmoveNodesメソッドを維持（後方互換性のため）
    moveNodes(dx, dy) {
        return this.moveElements(dx, dy);
    }
    
    // ===============================================
    // キーボード移動機能
    // ===============================================
    handleKeyDown(e) {
        const arrowKeys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
        
        // 早期リターン条件をまとめて処理
        if (!arrowKeys.includes(e.key) || 
            !this.enableArrowMove || 
            !this.canNodeMove()) {
            return;
        }
        
        const { nodes, groups } = this.getSelectedElements();
        if (nodes.length === 0 && groups.length === 0) {
            return;
        }
        
        // イベント停止
        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();

        // 移動量の決定
        let step = this.moveSteps;
        if (e.shiftKey) step = this.moveStepsShift;
        else if (e.ctrlKey || e.metaKey) step = this.moveStepsCtrl;

        // 方向別の移動処理
        const movements = {
            'ArrowUp': [0, -step],
            'ArrowDown': [0, step],
            'ArrowLeft': [-step, 0],
            'ArrowRight': [step, 0]
        };
        
        const [dx, dy] = movements[e.key];
        this.moveElements(dx, dy);
    }
    
    handleShiftKeyUp(e) {
        if (e.key === 'Shift' && this.shiftDragState.active) {
            this.endShiftDrag();
        }
    }
    
    // ===============================================
    // Shift+ドラッグ制限機能
    // ===============================================
    handlePointerDown(e) {
        const { nodes, groups } = this.getSelectedElements();
        groups.forEach(group => group?.recomputeInsideNodes()); // 選択したグループの内部を再計算
        if (e.shiftKey && (nodes.length > 0 || groups.length > 0)) {
            this.startShiftDrag(e);
        }
    }
    
    handlePointerMove(e) {
        if (this.shiftDragState.active) {
            this.processShiftDrag(e);
        }
    }
    
    handlePointerUp(e) {
        if (this.shiftDragState.active) {
            this.endShiftDrag();
        }
    }
    
    startShiftDrag(e) {
        const state = this.shiftDragState;
        const { nodes, groups } = this.getSelectedElements();
        
        state.active = true;
        state.direction = null;
        state.startMouse = { x: e.clientX, y: e.clientY };
        
        // 選択されたノード（直接選択）の開始位置を記録
        state.nodeStartPositions.clear();
        const selectedNodes = new Set(nodes);
        nodes.forEach(node => {
            state.nodeStartPositions.set(node, { x: node.pos[0], y: node.pos[1] });
        });
        
        // グループの開始位置を記録
        state.groupStartPositions.clear();
        const processedGroups = new Set();
        const groupNodes = new Set();
        
        groups.forEach(group => {
            const allGroups = this.getAllGroupsRecursive(group);
            allGroups.forEach(g => {
                if (!processedGroups.has(g)) {
                    state.groupStartPositions.set(g, { x: g.pos[0], y: g.pos[1] });
                    processedGroups.add(g);
                    
                    // グループ内のノードの開始位置も記録
                    const nodesInGroup = this.getAllNodesInGroupRecursive(g);
                    nodesInGroup.forEach(node => {
                        if (!selectedNodes.has(node) && !state.nodeStartPositions.has(node)) {
                            state.nodeStartPositions.set(node, { x: node.pos[0], y: node.pos[1] });
                            groupNodes.add(node);
                        }
                    });
                }
            });
        });
    }
    
    processShiftDrag(e) {
        const state = this.shiftDragState;
        const deltaX = e.clientX - state.startMouse.x;
        const deltaY = e.clientY - state.startMouse.y;
        
        // 方向決定
        if (!state.direction) {
            const absX = Math.abs(deltaX);
            const absY = Math.abs(deltaY);
            
            if (absX > state.threshold || absY > state.threshold) {
                state.direction = absX > absY ? 'horizontal' : 'vertical';
            }
        }
        
        // 制約の適用
        if (state.direction) {
            this.applyMovementConstraint();
            // グループ移動時は、グループ内のノードも制約を適用する必要がある
            this.synchronizeGroupNodes();
        }
    }
    
    applyMovementConstraint() {
        const state = this.shiftDragState;
        let constraintApplied = false;
        
        // 全ノード（直接選択 + グループ内）の制約適用
        state.nodeStartPositions.forEach((startPos, node) => {
            if (state.direction === 'horizontal' && node.pos[1] !== startPos.y) {
                node.pos[1] = startPos.y;
                constraintApplied = true;
            } else if (state.direction === 'vertical' && node.pos[0] !== startPos.x) {
                node.pos[0] = startPos.x;
                constraintApplied = true;
            }
        });
        
        // グループの制約適用
        state.groupStartPositions.forEach((startPos, group) => {
            if (state.direction === 'horizontal' && group.pos[1] !== startPos.y) {
                group.pos[1] = startPos.y;
                constraintApplied = true;
            } else if (state.direction === 'vertical' && group.pos[0] !== startPos.x) {
                group.pos[0] = startPos.x;
                constraintApplied = true;
            }
        });
        
        if (constraintApplied) {
            app.canvas.setDirty(true, true);
        }
    }
    
    // グループ移動時にグループ内のノードを同期
    synchronizeGroupNodes() {
        const state = this.shiftDragState;
        const { groups } = this.getSelectedElements();
        let syncApplied = false;
        
        groups.forEach(group => {
            const allGroups = this.getAllGroupsRecursive(group);
            allGroups.forEach(g => {
                const groupStartPos = state.groupStartPositions.get(g);
                if (!groupStartPos) return;
                
                // グループの現在の移動量を計算
                const groupDeltaX = g.pos[0] - groupStartPos.x;
                const groupDeltaY = g.pos[1] - groupStartPos.y;
                
                // グループ内のノードを同期
                const nodesInGroup = this.getAllNodesInGroupRecursive(g);
                nodesInGroup.forEach(node => {
                    const nodeStartPos = state.nodeStartPositions.get(node);
                    if (!nodeStartPos) return;
                    
                    // グループの移動量に合わせてノードを移動
                    const expectedNodeX = nodeStartPos.x + groupDeltaX;
                    const expectedNodeY = nodeStartPos.y + groupDeltaY;
                    
                    if (node.pos[0] !== expectedNodeX || node.pos[1] !== expectedNodeY) {
                        node.pos[0] = expectedNodeX;
                        node.pos[1] = expectedNodeY;
                        syncApplied = true;
                    }
                });
            });
        });
        
        if (syncApplied) {
            app.canvas.setDirty(true, true);
        }
    }
    
    endShiftDrag() {
        this.resetShiftDrag();
    }
    
    resetShiftDrag() {
        const state = this.shiftDragState;
        state.active = false;
        state.direction = null;
        state.nodeStartPositions.clear();
        state.groupStartPositions.clear();
    }
    
    // ===============================================
    // 選択オーバーレイの同期
    // ===============================================
    updateSelectionOverlay(dx, dy) {
        const container = app.canvasEl.parentElement;
        const overlayElement = container?.querySelector('.selection-overlay-container');
        
        if (!overlayElement) return;
        
        // 現在位置の取得と計算
        const style = overlayElement.style;
        const currentLeft = parseFloat(style.left) || 0;
        const currentTop = parseFloat(style.top) || 0;
        
        // スケール考慮
        const scale = app.canvas.ds?.scale || 1;
        const newLeft = currentLeft + (dx * scale);
        const newTop = currentTop + (dy * scale);
        
        // 位置更新
        style.left = `${newLeft}px`;
        style.top = `${newTop}px`;
    }
}

// ===============================================
// 設定項目の定義
// ===============================================
const enableArrowMoveSetting = {
    name: "Enable Arrow Key Node Movement",
    id: _name("EnableArrowMove"),
    type: "boolean",
    defaultValue: true, 
    onChange: (value) => {
        if (movementManager) {
            movementManager.enableArrowMove = value;
        }
    },
};

const moveStepsSetting = {
    name: "Move Steps with ARROW key",
    id: _name("moveSteps"),
    type: "slider",
    defaultValue: 100, 
    attrs: { min: 1, max: 400, step: 1 },
    onChange: (value) => {
        if (movementManager) {
            movementManager.moveSteps = value;
        }
    },
};

const moveStepsShiftSetting = {
    name: "Move Steps with SHIFT+ARROW key", 
    id: _name("moveStepsShift"), 
    type: "slider", 
    defaultValue: 200, 
    attrs: { min: 1, max: 400, step: 1 }, 
    onChange: (value) => {
        if (movementManager) {
            movementManager.moveStepsShift = value;
        }
    }, 
};

const moveStepsCtrlSetting = {
    name: "Move Steps with CTRL+ARROW key", 
    id: _name("moveStepsCtrl"), 
    type: "slider", 
    defaultValue: 10, 
    attrs: { min: 1, max: 400, step: 1 }, 
    onChange: (value) => {
        if (movementManager) {
            movementManager.moveStepsCtrl = value;
        }
    }, 
};

// ===============================================
// グローバルインスタンスと拡張機能登録
// ===============================================
let movementManager = null;

const extension = {
    name: _name("LinearMove"),
    
    init: async function(app) {
        movementManager = new MovementManager();
    },
    
    settings: [
        enableArrowMoveSetting, 
        moveStepsSetting, 
        moveStepsShiftSetting, 
        moveStepsCtrlSetting
    ].slice().reverse(),
    
    setup: async function(app) {
        if (!movementManager) return;
        
        // 設定を読み込み
        movementManager.enableArrowMove = app.ui.settings.getSettingValue(enableArrowMoveSetting.id);
        movementManager.moveSteps = app.ui.settings.getSettingValue(moveStepsSetting.id);
        movementManager.moveStepsShift = app.ui.settings.getSettingValue(moveStepsShiftSetting.id);
        movementManager.moveStepsCtrl = app.ui.settings.getSettingValue(moveStepsCtrlSetting.id);
        
        // 機能を初期化
        movementManager.initialize();
    }
};

app.registerExtension(extension);