/**
 * Graph visualization using D3.js for the Power BI Measure Call Graph
 */

class Graph {
    /**
     * Initialize the graph
     * @param {string} selector - CSS selector for the container element
     */
    constructor(selector) {
        this.container = d3.select(selector);
        this.width = this.container.node().getBoundingClientRect().width;
        this.height = this.container.node().getBoundingClientRect().height;
        this.data = null;
        this.simulation = null;
        this.svg = null;
        this.zoom = null;
        this.tooltip = null;
        this.selectedNode = null;
        this.detailGraph = null; // 详情图实例
        
        this.init();
        
        // 初始化详情图
        this.initDetailGraph();
    }
    
    /**
     * Initialize the SVG and D3 components
     */
    init() {
        // Create SVG
        this.svg = this.container.append('svg')
            .attr('width', this.width)
            .attr('height', this.height)
            .attr('class', 'graph-svg');
        
        // 添加箭头定义
        const defs = this.svg.append('defs');
        
        // 普通箭头
        defs.append('marker')
            .attr('id', 'arrow')
            .attr('viewBox', '0 -5 10 10')
            .attr('refX', 20)
            .attr('refY', 0)
            .attr('markerWidth', 6)
            .attr('markerHeight', 6)
            .attr('orient', 'auto')
            .append('path')
            .attr('d', 'M0,-5L10,0L0,5')
            .attr('class', 'arrow');
        
        // 高亮箭头
        defs.append('marker')
            .attr('id', 'arrow-highlighted')
            .attr('viewBox', '0 -5 10 10')
            .attr('refX', 20)
            .attr('refY', 0)
            .attr('markerWidth', 6)
            .attr('markerHeight', 6)
            .attr('orient', 'auto')
            .append('path')
            .attr('d', 'M0,-5L10,0L0,5')
            .attr('class', 'arrow highlighted');
        
        // 暗淡箭头
        defs.append('marker')
            .attr('id', 'arrow-dimmed')
            .attr('viewBox', '0 -5 10 10')
            .attr('refX', 20)
            .attr('refY', 0)
            .attr('markerWidth', 6)
            .attr('markerHeight', 6)
            .attr('orient', 'auto')
            .append('path')
            .attr('d', 'M0,-5L10,0L0,5')
            .attr('class', 'arrow dimmed');
        
        // Create zoom behavior
        this.zoom = d3.zoom()
            .scaleExtent([0.1, 4])
            .on('zoom', (event) => {
                this.g.attr('transform', event.transform);
            });
        
        // Apply zoom to SVG
        this.svg.call(this.zoom);
        
        // Create a group for the graph elements
        this.g = this.svg.append('g');
        
        // Create tooltip
        this.tooltip = d3.select('body').append('div')
            .attr('class', 'tooltip')
            .style('opacity', 0);
        
        // Handle window resize
        window.addEventListener('resize', () => {
            this.width = this.container.node().getBoundingClientRect().width;
            this.height = this.container.node().getBoundingClientRect().height;
            this.svg.attr('width', this.width).attr('height', this.height);
            if (this.simulation) {
                this.simulation.alpha(0.3).restart();
            }
        });
    }
    
    /**
     * 初始化详情图
     */
    initDetailGraph() {
        const detailContainer = d3.select('#graph-container-detail');
        const width = detailContainer.node().getBoundingClientRect().width;
        const height = detailContainer.node().getBoundingClientRect().height;
        
        // 创建SVG
        this.detailSvg = detailContainer.append('svg')
            .attr('width', width)
            .attr('height', height)
            .attr('class', 'graph-svg');
        
        // 添加箭头定义
        const defs = this.detailSvg.append('defs');
        
        defs.append('marker')
            .attr('id', 'detail-arrow')
            .attr('viewBox', '0 -5 10 10')
            .attr('refX', 20)
            .attr('refY', 0)
            .attr('markerWidth', 6)
            .attr('markerHeight', 6)
            .attr('orient', 'auto')
            .append('path')
            .attr('d', 'M0,-5L10,0L0,5')
            .attr('class', 'arrow');
        
        // 创建详情图的缩放行为
        this.detailZoom = d3.zoom()
            .scaleExtent([0.1, 4])
            .on('zoom', (event) => {
                this.detailG.attr('transform', event.transform);
            });
        
        // 应用缩放到SVG
        this.detailSvg.call(this.detailZoom);
        
        // 创建详情图的容器组
        this.detailG = this.detailSvg.append('g');
        
        // 添加标题
        detailContainer.select('h3')
            .text('Selected Measure Details');
        
        // 处理窗口大小调整
        window.addEventListener('resize', () => {
            const newWidth = detailContainer.node().getBoundingClientRect().width;
            const newHeight = detailContainer.node().getBoundingClientRect().height;
            this.detailSvg.attr('width', newWidth).attr('height', newHeight);
            if (this.detailSimulation) {
                this.detailSimulation.alpha(0.3).restart();
            }
        });
        
        // 初始化时调用resetDetailView方法，确保详情图在可视范围内
        // 使用setTimeout确保DOM已完全渲染
        setTimeout(() => {
            this.resetDetailView();
        }, 300);
    }
    
    /**
     * Set the graph data
     * @param {Object} data - The graph data with nodes and links
     */
    setData(data) {
        this.data = data;
        
        // 计算每个节点的引用次数
        this.data.nodes.forEach(node => {
            node.referenceCount = 0;  // 被引用次数
        });
        
        this.data.links.forEach(link => {
            // 对目标节点（被引用的节点）的引用次数+1
            const targetNode = this.data.nodes.find(node => node.id === link.target);
            if (targetNode) {
                targetNode.referenceCount = (targetNode.referenceCount || 0) + 1;
            }
        });
    }
    
    /**
     * Render the graph
     */
    render() {
        if (!this.data) return;
        
        // Clear previous graph
        this.g.selectAll('*').remove();
        
        // 排序节点：被引用次数多的在左侧
        this.data.nodes.sort((a, b) => b.referenceCount - a.referenceCount);
        
        // Create links with arrows
        const links = this.g.append('g')
            .attr('class', 'links')
            .selectAll('line')
            .data(this.data.links)
            .enter().append('line')
            .attr('class', 'link')
            .attr('marker-end', 'url(#arrow)');  // 添加箭头
        
        // Create nodes
        const nodes = this.g.append('g')
            .attr('class', 'nodes')
            .selectAll('.node')
            .data(this.data.nodes)
            .enter().append('g')
            .attr('class', 'node')
            .call(d3.drag()
                .on('start', this.dragStarted.bind(this))
                .on('drag', this.dragged.bind(this))
                .on('end', this.dragEnded.bind(this)));
        
        // Add circles to nodes
        nodes.append('circle')
            .attr('r', d => Math.max(8, Math.min(12, d.referenceCount + 6)));  // 根据引用次数调整大小
        
        // Add text labels to nodes
        nodes.append('text')
            .attr('dx', 12)
            .attr('dy', '.35em')
            .text(d => d.id);
        
        // Add event listeners to nodes
        nodes
            .on('mouseover', (event, d) => {
                // Show tooltip
                this.tooltip.transition()
                    .duration(200)
                    .style('opacity', .9);
                this.tooltip.html(d.expression)
                    .style('left', (event.pageX + 10) + 'px')
                    .style('top', (event.pageY - 28) + 'px');
            })
            .on('mouseout', () => {
                // Hide tooltip
                this.tooltip.transition()
                    .duration(500)
                    .style('opacity', 0);
            })
            .on('click', (event, d) => {
                event.stopPropagation();
                this.selectNode(d);
            });
        
        // 布局力模型 - 调整参数使节点更分散
        this.simulation = d3.forceSimulation(this.data.nodes)
            .force('link', d3.forceLink(this.data.links).id(d => d.id).distance(150)) // 增加连接距离
            .force('charge', d3.forceManyBody().strength(-500)) // 增加排斥力
            .force('center', d3.forceCenter(this.width / 2, this.height / 2))
            .force('collision', d3.forceCollide().radius(40)) // 增加碰撞半径
            // 水平定位力：根据引用次数排列，增加分散度
            .force('x', d3.forceX().x(d => {
                // 引用次数越多，越靠左
                const maxCount = Math.max(...this.data.nodes.map(n => n.referenceCount || 0));
                const scaleFactor = this.width * 0.9; // 增加宽度因子
                return this.width / 2 - (scaleFactor * (d.referenceCount / maxCount)) + (scaleFactor / 2);
            }).strength(0.2)) // 减小力强度，允许更自由的布局
            .on('tick', () => {
                links
                    .attr('x1', d => d.source.x)
                    .attr('y1', d => d.source.y)
                    .attr('x2', d => d.target.x)
                    .attr('y2', d => d.target.y);
                
                nodes.attr('transform', d => `translate(${d.x},${d.y})`);
            });
        
        // Add click handler to SVG to deselect nodes
        this.svg.on('click', () => {
            this.selectNode(null);
        });
        
        // Center the graph initially
        this.resetView();
    }
    
    /**
     * Handle drag start event
     */
    dragStarted(event, d) {
        if (!event.active) this.simulation.alphaTarget(0.3).restart();
        d.fx = d.x;
        d.fy = d.y;
    }
    
    /**
     * Handle drag event
     */
    dragged(event, d) {
        d.fx = event.x;
        d.fy = event.y;
    }
    
    /**
     * Handle drag end event
     */
    dragEnded(event, d) {
        if (!event.active) this.simulation.alphaTarget(0);
        d.fx = null;
        d.fy = null;
    }
    
    /**
     * Select a node and highlight its connections
     * @param {Object} node - The selected node
     */
    selectNode(node) {
        this.selectedNode = node;
        
        // Update node classes based on selection
        this.g.selectAll('.node')
            .classed('selected', d => d === node)
            .classed('highlighted', d => {
                if (!node) return false;
                // Check if this node is connected to the selected node
                return this.data.links.some(link => 
                    (link.source.id === node.id && link.target.id === d.id) || 
                    (link.target.id === node.id && link.source.id === d.id)
                );
            })
            .classed('dimmed', d => {
                if (!node) return false;
                if (d === node) return false;
                // Dim nodes that are not connected to the selected node
                return !this.data.links.some(link => 
                    (link.source.id === node.id && link.target.id === d.id) || 
                    (link.target.id === node.id && link.source.id === d.id)
                );
            });
        
        // Update link classes based on selection
        this.g.selectAll('.link')
            .classed('highlighted', link => 
                node && (link.source.id === node.id || link.target.id === node.id)
            )
            .classed('dimmed', link => 
                node && !(link.source.id === node.id || link.target.id === node.id)
            )
            .attr('marker-end', link => {
                if (!node) return 'url(#arrow)';
                if (link.source.id === node.id || link.target.id === node.id) {
                    return 'url(#arrow-highlighted)';
                }
                return 'url(#arrow-dimmed)';
            });
        
        // Display measure details
        if (window.appFunctions && window.appFunctions.showMeasureDetails) {
            window.appFunctions.showMeasureDetails(node);
        }
        
        // 更新详情图
        this.renderDetailGraph(node);
    }
    
    /**
     * 渲染选中节点相关的详情图
     * @param {Object} selectedNode - 选中的节点
     */
    renderDetailGraph(selectedNode) {
        // 清除之前的详情图
        this.detailG.selectAll('*').remove();
        
        if (!selectedNode || !this.data) {
            d3.select('#graph-container-detail h3').text('Selected Measure Details');
            return;
        }
        
        d3.select('#graph-container-detail h3').text(`"${selectedNode.id}" Details`);
        
        // 找出与选中节点相关的所有节点和连接
        const relatedNodes = [];
        const relatedLinks = [];
        
        // 添加选中的节点
        relatedNodes.push({
            ...selectedNode,
            type: 'selected'
        });
        
        // 找出引用这个节点的其他节点（出现在source位置）
        this.data.links.forEach(link => {
            if (link.target.id === selectedNode.id) {
                // 找到引用这个节点的其他节点
                const sourceNode = this.data.nodes.find(n => n.id === link.source.id);
                if (sourceNode) {
                    relatedNodes.push({
                        ...sourceNode,
                        type: 'reference'  // 引用节点
                    });
                    
                    relatedLinks.push({
                        source: link.source.id,
                        target: selectedNode.id
                    });
                }
            } else if (link.source.id === selectedNode.id) {
                // 找到被这个节点引用的其他节点
                const targetNode = this.data.nodes.find(n => n.id === link.target.id);
                if (targetNode) {
                    relatedNodes.push({
                        ...targetNode,
                        type: 'referenced'  // 被引用节点
                    });
                    
                    relatedLinks.push({
                        source: selectedNode.id,
                        target: link.target.id
                    });
                }
            }
        });
        
        // 获取详情图容器的边界
        const containerBounds = d3.select('#graph-container-detail').node().getBoundingClientRect();
        const width = containerBounds.width;
        const height = containerBounds.height;
        
        // 绘制连接线
        const links = this.detailG.append('g')
            .attr('class', 'detail-links')
            .selectAll('line')
            .data(relatedLinks)
            .enter().append('line')
            .attr('class', 'detail-link')
            .attr('marker-end', 'url(#detail-arrow)');
        
        // 绘制节点
        const nodes = this.detailG.append('g')
            .attr('class', 'detail-nodes')
            .selectAll('g')
            .data(relatedNodes)
            .enter().append('g')
            .attr('class', d => `detail-node ${d.type}`)
            .call(d3.drag()  // 添加拖拽功能
                .on('start', this.detailDragStarted.bind(this))
                .on('drag', this.detailDragged.bind(this))
                .on('end', this.detailDragEnded.bind(this)));
        
        // 添加节点圆形
        nodes.append('circle')
            .attr('r', 10)
            .attr('class', d => d.type);
        
        // 添加节点文本，根据节点类型调整文本位置
        nodes.append('text')
            .attr('dx', d => {
                if (d.type === 'referenced') return -12; // 被引用节点文本在左侧
                return 12; // 选中节点和引用节点文本在右侧
            })
            .attr('dy', '.35em')
            .attr('text-anchor', d => {
                if (d.type === 'referenced') return 'end'; // 被引用节点文本右对齐
                return 'start'; // 选中节点和引用节点文本左对齐
            })
            .text(d => d.id);
        
        // 设置布局 - 被引用节点在左侧，引用节点在右侧
        this.detailSimulation = d3.forceSimulation(relatedNodes)
            .force('link', d3.forceLink(relatedLinks).id(d => d.id).distance(120)) // 减小连接距离
            .force('charge', d3.forceManyBody().strength(-300)) // 减小排斥力
            .force('center', d3.forceCenter(width / 2, height / 2))
            .force('collision', d3.forceCollide().radius(30)) // 减小碰撞半径
            // 水平布局力 - 被引用节点在左侧，引用节点在右侧
            .force('x', d3.forceX().x(d => {
                if (d.type === 'selected') return width / 2;  // 选中节点在中间
                if (d.type === 'referenced') return width * 0.25;  // 被引用节点在左侧
                if (d.type === 'reference') return width * 0.75;  // 引用节点在右侧
                return width / 2;
            }).strength(0.5)) // 减小力度让节点可以更自由分布
            .on('tick', () => {
                links
                    .attr('x1', d => d.source.x)
                    .attr('y1', d => d.source.y)
                    .attr('x2', d => d.target.x)
                    .attr('y2', d => d.target.y);
                
                nodes.attr('transform', d => `translate(${d.x},${d.y})`);
            });
        
        // 添加双击事件来重置详情图视图
        this.detailSvg.on('dblclick', () => {
            this.resetDetailView();
        });
        
        // 添加点击事件到详情图中的节点
        nodes.on('click', (event, d) => {
            // 防止事件冒泡
            event.stopPropagation();
            
            // 在主图中查找该节点
            const mainNode = this.data.nodes.find(n => n.id === d.id);
            if (mainNode) {
                // 在主图中选中该节点
                this.selectNode(mainNode);
                
                // 将主图视图移动到该节点位置
                this.centerViewOnNode(mainNode);
            }
        })
        .on('mouseover', (event, d) => {
            // 显示点击提示
            this.tooltip.transition()
                .duration(200)
                .style('opacity', .9);
            
            let tooltipText = '点击跳转到主图中的该节点';
            if (d.type === 'selected') {
                tooltipText = '当前选中的节点';
            }
            
            this.tooltip.html(tooltipText)
                .style('left', (event.pageX + 10) + 'px')
                .style('top', (event.pageY - 28) + 'px');
        })
        .on('mouseout', () => {
            // 隐藏提示
            this.tooltip.transition()
                .duration(500)
                .style('opacity', 0);
        });
        
        // 在力学模拟稳定后重置视图，确保等待图表完全渲染
        this.detailSimulation.on('end', () => {
            // 延迟一点执行重置，确保图表完全渲染
            setTimeout(() => {
                this.resetDetailView();
            }, 200);
        });
    }
    
    /**
     * 将主图的视图中心移动到指定节点
     * @param {Object} node - 要居中显示的节点
     */
    centerViewOnNode(node) {
        if (!node || !node.x || !node.y) return;
        
        // 获取当前缩放级别
        const currentTransform = d3.zoomTransform(this.svg.node());
        const scale = currentTransform.k;
        
        // 计算需要的平移量，使节点位于视图中心
        const x = node.x;
        const y = node.y;
        const translate = [this.width / 2 - scale * x, this.height / 2 - scale * y];
        
        // 应用变换，添加动画效果
        this.svg.transition()
            .duration(750)
            .call(this.zoom.transform, d3.zoomIdentity
                .translate(translate[0], translate[1])
                .scale(scale));
    }
    
    /**
     * 详情图拖拽开始事件处理
     */
    detailDragStarted(event, d) {
        if (!event.active) this.detailSimulation.alphaTarget(0.3).restart();
        d.fx = d.x;
        d.fy = d.y;
        // 添加拖动样式
        d3.select(event.sourceEvent.target.parentNode).classed('dragging', true);
    }
    
    /**
     * 详情图拖拽中事件处理
     */
    detailDragged(event, d) {
        d.fx = event.x;
        d.fy = event.y;
    }
    
    /**
     * 详情图拖拽结束事件处理
     */
    detailDragEnded(event, d) {
        if (!event.active) this.detailSimulation.alphaTarget(0);
        d.fx = null;
        d.fy = null;
        // 移除拖动样式
        d3.select(event.sourceEvent.target.parentNode).classed('dragging', false);
    }
    
    /**
     * 重置详情图视图
     */
    resetDetailView() {
        if (!this.detailG || !this.detailZoom) return;
        
        try {
            // 获取详情图容器的边界
            const containerBounds = d3.select('#graph-container-detail').node().getBoundingClientRect();
            const width = containerBounds.width;
            const height = containerBounds.height;
            
            // 获取图表内容的边界框
            const bounds = this.detailG.node().getBBox();
            
            // 如果边界框有效且有宽高
            if (bounds && bounds.width > 0 && bounds.height > 0) {
                const dx = bounds.width;
                const dy = bounds.height;
                const x = bounds.x + dx / 2;
                const y = bounds.y + dy / 2;
                
                // 计算缩放比例以适应图形
                const scale = 0.8 / Math.max(dx / width, dy / height);
                const translate = [width / 2 - scale * x, height / 2 - scale * y];
                
                // 应用变换
                this.detailSvg.transition()
                    .duration(750)
                    .call(this.detailZoom.transform, d3.zoomIdentity
                        .translate(translate[0], translate[1])
                        .scale(scale));
            } else {
                // 如果没有有效边界框，仅重置到中心
                this.detailSvg.transition()
                    .duration(750)
                    .call(this.detailZoom.transform, d3.zoomIdentity
                        .translate(width / 2, height / 2)
                        .scale(1));
            }
        } catch (error) {
            console.log('重置详情图视图出错:', error);
            // 发生错误时，尝试简单重置
            try {
                const containerBounds = d3.select('#graph-container-detail').node().getBoundingClientRect();
                const width = containerBounds.width;
                const height = containerBounds.height;
                
                this.detailSvg.transition()
                    .duration(750)
                    .call(this.detailZoom.transform, d3.zoomIdentity
                        .translate(width / 2, height / 2)
                        .scale(1));
            } catch (e) {
                console.error('备用重置也失败:', e);
            }
        }
    }
    
    /**
     * Search for nodes by name
     * @param {string} query - The search query
     * @returns {Array} - Array of matching nodes
     */
    searchNodes(query) {
        // 移除之前的搜索匹配标记
        this.g.selectAll('.node').classed('search-match', false);
        
        if (!query) {
            // 如果查询为空，恢复所有节点的正常显示
            this.g.selectAll('.node').style('opacity', 1);
            return [];
        }
        
        const lowerQuery = query.toLowerCase();
        const matchingNodes = [];
        
        // 标记匹配的节点并收集匹配结果
        this.g.selectAll('.node')
            .each((d, i, nodes) => {
                const node = d3.select(nodes[i]);
                const isMatch = d.id.toLowerCase().includes(lowerQuery);
                
                if (isMatch) {
                    matchingNodes.push(d);
                }
                
                // 为匹配的节点添加特殊类并使其文本加粗
                node.classed('search-match', isMatch);
            });
        
        return matchingNodes;
    }
    
    /**
     * Reset the view to center the graph
     */
    resetView() {
        const bounds = this.g.node().getBBox();
        const dx = bounds.width;
        const dy = bounds.height;
        const x = bounds.x + dx / 2;
        const y = bounds.y + dy / 2;
        
        // Calculate the scale to fit the graph
        const scale = 0.9 / Math.max(dx / this.width, dy / this.height);
        const translate = [this.width / 2 - scale * x, this.height / 2 - scale * y];
        
        // Apply the transform
        this.svg.transition()
            .duration(750)
            .call(this.zoom.transform, d3.zoomIdentity
                .translate(translate[0], translate[1])
                .scale(scale));
    }
}