'use client'

import React, { useCallback, useMemo, useState, useRef } from 'react'
import {
  ReactFlow,
  Node,
  Edge,
  Controls,
  Background,
  MiniMap,
  Panel,
  useReactFlow,
  ReactFlowProvider,
  NodeTypes,
  MarkerType,
  ReactFlowProps,
  useNodesState,
  useEdgesState,
} from '@xyflow/react'
import '@xyflow/react/dist/style.css'
import { Search, Maximize2 } from 'lucide-react'
import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from '@/components/ui/input-group'
import { Button } from '@/components/ui/button'
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import dagre from 'dagre'
import { useDebouncedCallback } from '@/hooks/use-debounced-callback'
import { useTheme } from 'next-themes'
import { cn } from '@/lib/utils'

// 布局配置类型
export interface LayoutConfig {
  direction?: 'TB' | 'LR'
  ranksep?: number
  nodesep?: number
  nodeWidth?: number
  nodeHeight?: number
}

// 自动布局函数
const getLayoutedElements = (
  nodes: Node[],
  edges: Edge[],
  config: LayoutConfig = {}
) => {
  const {
    direction = 'TB',
    ranksep = 100,
    nodesep = 80,
    nodeWidth = 200,
    nodeHeight = 80,
  } = config

  const dagreGraph = new dagre.graphlib.Graph()
  dagreGraph.setDefaultEdgeLabel(() => ({}))
  dagreGraph.setGraph({ rankdir: direction, ranksep, nodesep })

  nodes.forEach((node) => {
    dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight })
  })

  edges.forEach((edge) => {
    dagreGraph.setEdge(edge.source, edge.target)
  })

  dagre.layout(dagreGraph)

  const layoutedNodes = nodes.map((node) => {
    const nodeWithPosition = dagreGraph.node(node.id)
    return {
      ...node,
      position: {
        x: nodeWithPosition.x - nodeWidth / 2,
        y: nodeWithPosition.y - nodeHeight / 2,
      },
    }
  })

  return { nodes: layoutedNodes, edges }
}

// 通用图组件 Props
export interface AdaptiveGraphProps<TNodeData = any> {
  // 原始节点数据
  nodes: TNodeData[]
  // 原始边数据
  edges: Array<{ source: string; target: string; label?: string }>
  // 节点类型定义
  nodeTypes: NodeTypes
  // 过滤函数：根据搜索查询返回过滤后的节点 ID 集合和高亮节点 ID 集合（可选）
  onFilter?: (nodes: TNodeData[], query: string) => {
    filteredNodeIds: Set<string>
    highlightedNodeIds: Set<string>
  }
  // 节点转换函数：将原始节点数据转换为 ReactFlow 节点
  transformNode: (
    node: TNodeData,
    options: {
      isHighlighted: boolean
      isDimmed: boolean
    }
  ) => Node
  // 边转换函数：将原始边数据转换为 ReactFlow 边（可选）
  transformEdge?: (
    edge: { source: string; target: string; label?: string },
    index: number,
    options: {
      isHighlighted: boolean
    }
  ) => Edge
  // MiniMap 节点颜色函数（可选）
  getNodeColor?: (node: Node) => string
  // 节点点击回调
  onNodeClick?: (node: TNodeData) => void
  // 搜索占位符文本
  searchPlaceholder?: string
  // 统计信息渲染函数（可选）
  renderStats?: (filteredCount: number, totalCount: number, matchedCount: number) => React.ReactNode
  // 布局配置
  layoutConfig?: LayoutConfig
  // 容器样式类名（用于控制高度等样式）
  className?: string
  // ReactFlow 额外属性（可选）
  reactFlowProps?: Partial<ReactFlowProps>
}

/**
 * GraphContent - 图表渲染核心组件
 *
 * 这是一个独立的图表渲染组件，负责实际的 ReactFlow 图表展示和交互。
 * 它必须在 ReactFlowProvider 内部使用，因为它依赖 useReactFlow hook。
 *
 * 职责：
 * - 渲染 ReactFlow 图表（节点、边、控件、小地图等）
 * - 管理节点和边的交互状态（拖拽、选择等）
 * - 处理搜索输入和全屏按钮的 UI
 * - 自动调整视野以适应过滤后的节点
 *
 * 与 AdaptiveGraph 的关系：
 * - AdaptiveGraph 是外层容器组件，负责数据处理、状态管理和布局计算
 * - GraphContent 是内层渲染组件，接收处理好的数据并负责图表的实际展示
 * - AdaptiveGraph 会在两个地方使用 GraphContent：普通视图和全屏对话框
 * - 两者通过 ReactFlowProvider 隔离，确保每个实例有独立的 ReactFlow 上下文
 */
function GraphContent<TNodeData = any>({
  flowNodes,
  flowEdges,
  handleNodeClick,
  nodeTypes,
  getNodeColor,
  onFilter,
  searchPlaceholder,
  inputValue,
  handleInputChange,
  isFullscreen,
  setFullscreenOpen,
  renderStats,
  filteredNodeIds,
  rawNodes,
  highlightedNodeIds,
  reactFlowProps,
  filteredNodeIdsForFitView,
}: {
  flowNodes: Node[]
  flowEdges: Edge[]
  handleNodeClick: (event: React.MouseEvent, node: Node) => void
  nodeTypes: NodeTypes
  getNodeColor?: (node: Node) => string
  onFilter?: any
  searchPlaceholder: string
  inputValue: string
  handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void
  isFullscreen: boolean
  setFullscreenOpen?: (open: boolean) => void
  renderStats?: (filteredCount: number, totalCount: number, matchedCount: number) => React.ReactNode
  filteredNodeIds: Set<string>
  rawNodes: TNodeData[]
  highlightedNodeIds: Set<string>
  reactFlowProps: Partial<ReactFlowProps>
  filteredNodeIdsForFitView: Set<string>
}) {
  const { fitView } = useReactFlow()
  const fitViewTimeoutRef = useRef<number>(0)
  const previousFilteredNodeIdsRef = useRef<Set<string>>(new Set())
  // 使用 useNodesState 和 useEdgesState 来管理节点和边的状态，支持拖拽等交互
  const [nodes, setNodes, onNodesChange] = useNodesState(flowNodes)
  const [edges, setEdges, onEdgesChange] = useEdgesState(flowEdges)
  const { theme, resolvedTheme } = useTheme() // Tailwind CSS的样式变化无法自动传递到ReactFlow内部，需要显式监听网站主题的变化
  const themeIsDark = resolvedTheme === 'dark' || (theme === 'system' && resolvedTheme === 'dark')
  
  // 当 flowNodes 或 flowEdges 变化时，更新内部状态
  React.useEffect(() => {
    setNodes(flowNodes)
  }, [flowNodes, setNodes])
  
  React.useEffect(() => {
    setEdges(flowEdges)
  }, [flowEdges, setEdges])


  // 当过滤节点变化时，自动调整视野
  React.useEffect(() => {
    // 比较 filteredNodeIds 的实际内容是否发生变化
    const previousIds = previousFilteredNodeIdsRef.current
    const currentIds = filteredNodeIdsForFitView
    
    // 检查节点ID集合是否真正发生了变化
    const hasChanged =
      previousIds.size !== currentIds.size ||
      Array.from(currentIds).some(id => !previousIds.has(id))
    
    if (hasChanged) {
      // 更新引用
      previousFilteredNodeIdsRef.current = new Set(currentIds)
      
      // 清除之前的定时器
      if (fitViewTimeoutRef.current) {
        window.clearTimeout(fitViewTimeoutRef.current)
      }

      // 延迟执行 fitView，确保节点已经渲染
      fitViewTimeoutRef.current = window.setTimeout(() => {
        if (flowNodes.length > 0) {
          fitView({
            padding: 0.2,
            duration: 300,
            maxZoom: 1.5,
            minZoom: 0.1,
          })
        }
      }, 100)
    }

    return () => {
      if (fitViewTimeoutRef.current) {
        window.clearTimeout(fitViewTimeoutRef.current)
      }
    }
  }, [filteredNodeIdsForFitView, fitView, flowNodes.length])

  // 默认统计信息渲染
  const defaultRenderStats = (filteredCount: number, totalCount: number, matchedCount: number) => (
    onFilter ?
    <div className="mt-2 text-xs text-muted-foreground">
      显示 {filteredCount} / {totalCount} 个节点
      {matchedCount > 0 && ` (${matchedCount} 个匹配)`}
    </div> : <></>
  )

  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      onNodeClick={handleNodeClick}
      nodeTypes={nodeTypes}
      fitView
      minZoom={0.1}
      maxZoom={2}
      defaultEdgeOptions={{
        type: 'smoothstep',
        animated: false,
      }}
      proOptions={{ hideAttribution: true }}
      colorMode={themeIsDark ? 'dark' : 'light'}
      {...reactFlowProps}
    >
      <Background />
      <Controls />
      <MiniMap
        nodeColor={getNodeColor || (() => '#cbd5e1')}
        maskColor="rgba(0, 0, 0, 0.1)"
      />
      <Panel position="top-left" className="bg-background/95 backdrop-blur-sm p-3 rounded-lg shadow-lg border">
        <div className="flex items-center gap-2">
          {onFilter && (
            <InputGroup className="min-w-[300px]">
              <InputGroupAddon>
                <InputGroupText>
                  <Search className="h-4 w-4" />
                </InputGroupText>
              </InputGroupAddon>
              <InputGroupInput
                placeholder={searchPlaceholder}
                value={inputValue}
                onChange={handleInputChange}
              />
            </InputGroup>
          )}
          {!isFullscreen && setFullscreenOpen && (
            <Button
              variant="ghost"
              size="sm"
              className="h-9 px-3"
              title="全屏显示"
              onClick={() => setFullscreenOpen(true)}
            >
              <Maximize2 className="h-3.5 w-3.5 mr-1.5" />
            </Button>
          )}
        </div>
        {(renderStats || defaultRenderStats)(filteredNodeIds.size, rawNodes.length, highlightedNodeIds.size)}
      </Panel>
    </ReactFlow>
  )
}

/**
 * AdaptiveGraph - 自适应图表容器组件
 * 
 * 这是一个高度可配置的图表容器组件，提供完整的图表展示解决方案。
 * 它处理数据转换、过滤、布局计算和状态管理，然后将处理好的数据传递给 GraphContent 进行渲染。
 * 
 * 主要功能：
 * - 接收原始节点和边数据，通过 transformNode/transformEdge 转换为 ReactFlow 格式
 * - 支持自定义过滤逻辑（搜索、高亮）
 * - 使用 dagre 算法自动计算节点布局
 * - 提供普通视图和全屏对话框两种展示模式
 * - 管理搜索状态和防抖处理
 * ```
 */
export function AdaptiveGraph<TNodeData = any>({
  nodes: rawNodes,
  edges: rawEdges,
  nodeTypes,
  onFilter,
  transformNode,
  transformEdge,
  getNodeColor,
  onNodeClick,
  searchPlaceholder = '搜索...',
  renderStats,
  layoutConfig,
  className = 'h-[800px] max-h-[calc(100vh-12rem)]',
  reactFlowProps = {},
}: AdaptiveGraphProps<TNodeData>) {
  const [searchQuery, setSearchQuery] = useState('')
  const [inputValue, setInputValue] = useState('')
  const [fullscreenOpen, setFullscreenOpen] = useState(false)

  // 使用外部提供的过滤函数，如果未提供则显示所有节点
  const { filteredNodeIds, highlightedNodeIds } = useMemo(() => {
    if (!onFilter) {
      // 未提供过滤函数时，显示所有节点且不高亮
      const allNodeIds = new Set(
        rawNodes.map((node) => {
          const transformed = transformNode(node, { isHighlighted: false, isDimmed: false })
          return transformed.id
        })
      )
      return {
        filteredNodeIds: allNodeIds,
        highlightedNodeIds: new Set<string>(),
      }
    }
    return onFilter(rawNodes, searchQuery)
  }, [rawNodes, searchQuery, onFilter, transformNode])

  // 转换为 ReactFlow 节点
  const nodes = useMemo(() => {
    return rawNodes
      .filter((node) => {
        const nodeData = transformNode(node, { isHighlighted: false, isDimmed: false })
        return filteredNodeIds.has(nodeData.id)
      })
      .map((node) => {
        const nodeData = transformNode(node, { isHighlighted: false, isDimmed: false })
        return transformNode(node, {
          isHighlighted: highlightedNodeIds.has(nodeData.id),
          isDimmed: searchQuery.trim() !== '' && !highlightedNodeIds.has(nodeData.id),
        })
      })
  }, [rawNodes, filteredNodeIds, highlightedNodeIds, searchQuery, transformNode])

  // 转换为 ReactFlow 边
  const edges = useMemo(() => {
    const defaultTransform = (
      edge: { source: string; target: string; label?: string },
      index: number,
      options: { isHighlighted: boolean }
    ): Edge => ({
      id: `${edge.source}-${edge.target}-${index}`,
      source: edge.source,
      target: edge.target,
      type: 'smoothstep',
      animated: options.isHighlighted,
      style: {
        stroke: options.isHighlighted ? '#3b82f6' : '#94a3b8',
        strokeWidth: options.isHighlighted ? 2 : 1,
      },
      markerEnd: {
        type: MarkerType.ArrowClosed,
        color: options.isHighlighted ? '#3b82f6' : '#94a3b8',
      },
    })

    const transform = transformEdge || defaultTransform

    return rawEdges
      .filter((edge) => filteredNodeIds.has(edge.source) && filteredNodeIds.has(edge.target))
      .map((edge, index) =>
        transform(edge, index, {
          isHighlighted: highlightedNodeIds.has(edge.source) || highlightedNodeIds.has(edge.target),
        })
      )
  }, [rawEdges, filteredNodeIds, highlightedNodeIds, transformEdge])

  // 应用自动布局
  const { nodes: layoutedNodes, edges: layoutedEdges } = useMemo(() => {
    return getLayoutedElements(nodes, edges, layoutConfig)
  }, [nodes, edges, layoutConfig])

  // 防抖更新搜索查询
  const debouncedSetSearchQuery = useDebouncedCallback((value: string) => {
    setSearchQuery(value)
  }, 300)

  // 处理输入变化
  const handleInputChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      const value = e.target.value
      setInputValue(value)
      debouncedSetSearchQuery(value)
    },
    [debouncedSetSearchQuery]
  )

  // 处理节点点击
  const handleNodeClick = useCallback(
    (_event: React.MouseEvent, node: Node) => {
      const nodeData = rawNodes.find((n) => {
        const transformed = transformNode(n, { isHighlighted: false, isDimmed: false })
        return transformed.id === node.id
      })
      if (nodeData && onNodeClick) {
        onNodeClick(nodeData)
      }
    },
    [rawNodes, transformNode, onNodeClick]
  )

  // 共享的 GraphContent props
  const graphContentProps = {
    flowNodes: layoutedNodes,
    flowEdges: layoutedEdges,
    handleNodeClick,
    nodeTypes,
    getNodeColor,
    onFilter,
    searchPlaceholder,
    inputValue,
    handleInputChange,
    isFullscreen: false,
    setFullscreenOpen,
    renderStats,
    filteredNodeIds,
    rawNodes,
    highlightedNodeIds,
    reactFlowProps,
    filteredNodeIdsForFitView: filteredNodeIds,
  }

  return (
    <>
      <div className={cn('w-full border rounded-lg bg-background', className)}>
        <ReactFlowProvider>
          <GraphContent {...graphContentProps} />
        </ReactFlowProvider>
      </div>
      {/* 全屏对话框 */}
      <Dialog open={fullscreenOpen} onOpenChange={setFullscreenOpen}>
        <DialogContent className="p-0" variant="fullscreen">
          <DialogHeader className="pt-5 pb-3 m-0 border-b border-border">
            <DialogTitle className="px-6 text-base">图表查看</DialogTitle>
            <DialogDescription className="sr-only">全屏查看图表</DialogDescription>
          </DialogHeader>
          <div className="h-full my-3 px-6">
            <ReactFlowProvider>
              <GraphContent {...graphContentProps} isFullscreen={true} setFullscreenOpen={undefined} />
            </ReactFlowProvider>
          </div>
          <DialogFooter className="px-6 py-4 border-t border-border">
            <DialogClose asChild>
              <Button type="button">关闭</Button>
            </DialogClose>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  )
}