chinese-family-tree-2/components/tree/tree-layout.tsx

"use client"
import type React from "react"
import type { FamilyMember } from "@/types/family"
import { FamilyNode } from "./family-node"
import { AddRelationDialog, type RelationType } from "./add-relation-dialog"
import { useFamily } from "@/context/family-context"
import { useEffect, useRef, useState, useCallback, useMemo, memo } from "react"
import { useRouter } from "next/navigation"
import { permissions } from "@/lib/permissions"

interface TreeLayoutProps {
  rootId: string
  onSelectMember?: (member: FamilyMember) => void
  relationMode?: boolean
  selectedMembers?: string[]
  onMemberClick?: (memberId: string) => void
}

interface Connection {
  from: { x: number; y: number }
  to: { x: number; y: number }
  type: 'vertical' | 'horizontal'
}

export function TreeLayout({ 
  rootId, 
  onSelectMember,
  relationMode = false,
  selectedMembers = [],
  onMemberClick
}: TreeLayoutProps) {
  const { getMember, treeData, highlightedMemberId, currentTree } = useFamily()
  
  // 检查用户是否有创建权限
  const canEdit = permissions.canCreate(currentTree?.currentUserRole)
  const root = getMember(rootId)
  const router = useRouter()
  const containerRef = useRef<HTMLDivElement>(null)
  const [connections, setConnections] = useState<Connection[]>([])
  const nodeRefs = useRef<Map<string, HTMLDivElement>>(new Map())
  const [relationDialog, setRelationDialog] = useState<{ member: FamilyMember; type: "child" | "spouse" } | null>(null)
  
    
  // 重新计算连线的函数（使用 ref 避免依赖问题）
  const recalculateConnections = useCallback(() => {
    const containerRect = containerRef.current?.getBoundingClientRect()
    if (!containerRect || nodeRefs.current.size === 0) return

    const newConnections: Connection[] = []
    nodeRefs.current.forEach((nodeElement, nodeId) => {
      const member = getMember(nodeId)
      if (!member || !member.childrenIds || member.childrenIds.length === 0) return

      const parentRect = nodeElement.getBoundingClientRect()
      const parentCenterX = parentRect.left + parentRect.width / 2 - containerRect.left
      const parentBottomY = parentRect.bottom - containerRect.top

      const childPositions = member.childrenIds
        .map(childId => {
          const childElement = nodeRefs.current.get(childId)
          if (!childElement) return null
          const childRect = childElement.getBoundingClientRect()
          return {
            id: childId,
            centerX: childRect.left + childRect.width / 2 - containerRect.left,
            topY: childRect.top - containerRect.top
          }
        })
        .filter(Boolean) as Array<{ id: string; centerX: number; topY: number }>

      if (childPositions.length === 0) return

      const verticalLineY = parentBottomY + 24
      newConnections.push({
        from: { x: parentCenterX, y: parentBottomY },
        to: { x: parentCenterX, y: verticalLineY },
        type: 'vertical'
      })

      if (childPositions.length > 1) {
        const leftmostX = Math.min(...childPositions.map(p => p.centerX))
        const rightmostX = Math.max(...childPositions.map(p => p.centerX))
        newConnections.push({
          from: { x: leftmostX, y: verticalLineY },
          to: { x: rightmostX, y: verticalLineY },
          type: 'horizontal'
        })
      }

      childPositions.forEach(child => {
        newConnections.push({
          from: { x: child.centerX, y: verticalLineY },
          to: { x: child.centerX, y: child.topY },
          type: 'vertical'
        })
      })
    })
    setConnections(newConnections)
  }, [getMember])

  
  // 节点间距配置
  const HORIZONTAL_GAP = 32 // 2rem = 32px
  const VERTICAL_GAP = 48 // 3rem = 48px
  const CONNECTOR_HEIGHT = 48 // 连接线垂直高度
  
  // 处理节点点击
  const handleNodeClick = useCallback((member: FamilyMember) => {
    if (relationMode && onMemberClick) {
      onMemberClick(member.id)
    } else {
      const params = new URLSearchParams(window.location.search)
      router.push(`/members/${member.id}?${params.toString()}`)
    }
  }, [relationMode, onMemberClick, router])

  // 计算所有连线位置
  const calculateConnections = useCallback(() => {
    const newConnections: Connection[] = []
    const containerRect = containerRef.current?.getBoundingClientRect()
    if (!containerRect) return

    // 检查是否有足够的节点已注册
    if (nodeRefs.current.size === 0) return

    nodeRefs.current.forEach((nodeElement, nodeId) => {
      const member = getMember(nodeId)
      if (!member || !member.childrenIds || member.childrenIds.length === 0) return

      const parentRect = nodeElement.getBoundingClientRect()
      const parentCenterX = parentRect.left + parentRect.width / 2 - containerRect.left
      const parentBottomY = parentRect.bottom - containerRect.top

      // 获取所有子节点的位置
      const childPositions = member.childrenIds
        .map(childId => {
          const childElement = nodeRefs.current.get(childId)
          if (!childElement) return null
          const childRect = childElement.getBoundingClientRect()
          return {
            id: childId,
            centerX: childRect.left + childRect.width / 2 - containerRect.left,
            topY: childRect.top - containerRect.top
          }
        })
        .filter(Boolean) as Array<{ id: string; centerX: number; topY: number }>

      if (childPositions.length === 0) return

      // 父节点到水平线的垂直连线
      const verticalLineY = parentBottomY + CONNECTOR_HEIGHT / 2
      newConnections.push({
        from: { x: parentCenterX, y: parentBottomY },
        to: { x: parentCenterX, y: verticalLineY },
        type: 'vertical'
      })

      // 如果有多个子节点，绘制水平连线
      if (childPositions.length > 1) {
        const leftmostX = Math.min(...childPositions.map(p => p.centerX))
        const rightmostX = Math.max(...childPositions.map(p => p.centerX))
        
        newConnections.push({
          from: { x: leftmostX, y: verticalLineY },
          to: { x: rightmostX, y: verticalLineY },
          type: 'horizontal'
        })
      }

      // 每个子节点的垂直连线
      childPositions.forEach(child => {
        newConnections.push({
          from: { x: child.centerX, y: verticalLineY },
          to: { x: child.centerX, y: child.topY },
          type: 'vertical'
        })
      })
    })

    setConnections(newConnections)
  }, [getMember])

  useEffect(() => {
    // 多次尝试计算，确保 DOM 完全渲染
    const timers: NodeJS.Timeout[] = []
    timers.push(setTimeout(calculateConnections, 50))
    timers.push(setTimeout(calculateConnections, 150))
    timers.push(setTimeout(calculateConnections, 300))
    timers.push(setTimeout(calculateConnections, 500))
    
    // 监听窗口大小变化
    window.addEventListener('resize', calculateConnections)
    
    return () => {
      timers.forEach(timer => clearTimeout(timer))
      window.removeEventListener('resize', calculateConnections)
    }
  }, [calculateConnections, treeData])

  
  // 预计算排序后的子节点映射，避免每次渲染时重复计算
  const sortedChildrenMap = useMemo(() => {
    const map = new Map<string, string[]>()
    Object.values(treeData.members).forEach(member => {
      if (member.childrenIds && member.childrenIds.length > 0) {
        const sorted = [...member.childrenIds].sort((aId, bId) => {
          const a = treeData.members[aId]
          const b = treeData.members[bId]
          if (!a || !b) return 0
          
          const aIsFounder = a.tags?.includes('始祖') || a.generation === 1
          const bIsFounder = b.tags?.includes('始祖') || b.generation === 1
          if (aIsFounder && !bIsFounder) return -1
          if (!aIsFounder && bIsFounder) return 1
          
          return (a.birthDate || "").localeCompare(b.birthDate || "")
        })
        map.set(member.id, sorted)
      }
    })
    return map
  }, [treeData.members])

  if (!root) return null

  // 姓名分解函数：将全名分解为姓和名
  const parseName = (fullName: string): { surname: string; givenName: string } => {
    const name = fullName.trim()
    if (!name) return { surname: '', givenName: '' }
    
    // 常见复姓列表
    const compoundSurnames = [
      '欧阳', '太史', '端木', '上官', '司马', '东方', '独孤', '南宫', '万俟', '闻人',
      '夏侯', '诸葛', '尉迟', '公羊', '赫连', '澹台', '皇甫', '宗政', '濮阳', '公冶',
      '太叔', '申屠', '公孙', '慕容', '仲孙', '钟离', '长孙', '宇文', '司徒', '鲜于',
      '司空', '闾丘', '子车', '亓官', '司寇', '巫马', '公西', '颛孙', '壤驷', '公良',
      '漆雕', '乐正', '宰父', '谷梁', '拓跋', '夹谷', '轩辕', '令狐', '段干', '百里',
      '呼延', '东郭', '南门', '羊舌', '微生', '公户', '公玉', '公仪', '梁丘', '公仲',
      '公上', '公门', '公山', '公坚', '左丘', '公伯', '西门', '公祖', '第五', '公乘',
      '贯丘', '公皙', '南荣', '东里', '东宫', '仲长', '子书', '子桑', '即墨', '达奚', '褚师'
    ]
    
    // 检查是否是复姓
    for (const compound of compoundSurnames) {
      if (name.startsWith(compound) && name.length > compound.length) {
        return {
          surname: compound,
          givenName: name.slice(compound.length)
        }
      }
    }
    
    // 单姓处理
    if (name.length >= 2) {
      return {
        surname: name.charAt(0),
        givenName: name.slice(1)
      }
    }
    
    // 只有一个字，作为姓
    return { surname: name, givenName: '' }
  }

  // 递归渲染树节点 - 使用 memo 优化
  const handleCreateNewRelation = (prefillName: string, relationType: RelationType) => {
    if (!relationDialog) return
    const params = new URLSearchParams()
    
    // 分解姓名
    const { surname, givenName } = parseName(prefillName)
    if (surname) params.set("surname", surname)
    if (givenName) params.set("givenName", givenName)
    
    if (relationType === "child") {
      params.set("generation", String(relationDialog.member.generation + 1))
      if (relationDialog.member.gender === "MALE") {
        params.set("fatherId", relationDialog.member.id)
        if (relationDialog.member.spouseIds?.length) {
          params.set("motherId", relationDialog.member.spouseIds[0])
        }
      } else if (relationDialog.member.gender === "FEMALE") {
        params.set("motherId", relationDialog.member.id)
        if (relationDialog.member.spouseIds?.length) {
          params.set("fatherId", relationDialog.member.spouseIds[0])
        }
      }
    } else if (relationType === "spouse") {
      params.set("generation", String(relationDialog.member.generation))
      params.set("spouseId", relationDialog.member.id)
      params.set("gender", relationDialog.member.gender === "MALE" ? "FEMALE" : "MALE")
      // 如果当前成员有子女，将他们也作为新配偶的子女
      if (relationDialog.member.childrenIds && relationDialog.member.childrenIds.length > 0) {
        relationDialog.member.childrenIds.forEach(id => {
          params.append('childrenIds', id)
        })
      }
    } else if (relationType === "father") {
      params.set("generation", String(relationDialog.member.generation - 1))
      params.set("childId", relationDialog.member.id)
      params.set("gender", "MALE")
      // 如果已有母亲，设为配偶
      if (relationDialog.member.motherId) {
        params.set("spouseId", relationDialog.member.motherId)
      }
    } else if (relationType === "mother") {
      params.set("generation", String(relationDialog.member.generation - 1))
      params.set("childId", relationDialog.member.id)
      params.set("gender", "FEMALE")
      // 如果已有父亲，设为配偶
      if (relationDialog.member.fatherId) {
        params.set("spouseId", relationDialog.member.fatherId)
      }
    }
    
    const treeParams = new URLSearchParams(window.location.search)
    treeParams.forEach((value, key) => {
      params.set(key, value)
    })
    window.location.href = `/members/new?${params.toString()}`
  }

  // 递归渲染树节点
  function renderTreeNode(memberId: string, isRoot: boolean = false): React.ReactNode {
    const member = getMember(memberId)
    if (!member) return null

    const hasChildren = member.childrenIds && member.childrenIds.length > 0
    
    // 计算实际要显示的子节点（过滤掉不存在的成员）
    const visibleChildren = hasChildren 
      ? (sortedChildrenMap.get(memberId) || []).filter(childId => getMember(childId) !== undefined)
      : []
    const hasVisibleChildren = visibleChildren.length > 0
    
    // 获取所有配偶
    const spouses = member.spouseIds && member.spouseIds.length > 0 
      ? member.spouseIds.map(id => getMember(id)).filter(Boolean) as FamilyMember[]
      : []

    return (
      <div key={memberId} className="flex flex-col items-center">
        {/* 节点本身 */}
        <div 
          ref={(el) => {
            if (el) {
              nodeRefs.current.set(memberId, el)
            } else {
              nodeRefs.current.delete(memberId)
            }
          }}
          className="relative z-10"
        >
          <FamilyNode 
            member={member} 
            spouses={spouses} 
            onSelect={handleNodeClick} 
            isRoot={isRoot}
            isHighlighted={member.id === highlightedMemberId}
            relationMode={relationMode}
            isSelected={selectedMembers.includes(member.id)}
            selectedMembers={selectedMembers}
            canEdit={canEdit}
            onAddRelation={(type) => setRelationDialog({ member, type })}
            hasChildren={false}
            isCollapsed={false}
            onToggleCollapse={undefined}
          />
        </div>

        {/* 子节点 */}
        {hasVisibleChildren && (
          <div 
            className="flex items-start relative"
            style={{ 
              marginTop: `${VERTICAL_GAP}px`,
              gap: `${HORIZONTAL_GAP}px`
            }}
          >
            {visibleChildren.map((childId) => renderTreeNode(childId, false))}
          </div>
        )}
      </div>
    )
  }

  return (
    <div className="relative">
      <div ref={containerRef} className="p-12 min-w-fit relative" style={{ minHeight: '100%' }}>
        {/* 连线层 - 使用 div 绘制 */}
        <div className="absolute inset-0 pointer-events-none" style={{ zIndex: 1 }}>
          {connections.map((conn, index) => {
            const isHorizontal = conn.type === 'horizontal'
            // 使用 1px 但通过 transform scale 缩小来实现细线
            const width = isHorizontal ? Math.abs(conn.to.x - conn.from.x) : 1
            const height = isHorizontal ? 1 : Math.abs(conn.to.y - conn.from.y)
            const left = Math.min(conn.from.x, conn.to.x)
            const top = Math.min(conn.from.y, conn.to.y)
            
            // 跳过无效的连线（宽度或高度为0）
            if (width <= 0 || height <= 0) return null
            
            return (
              <div
                key={index}
                className="absolute bg-black"
                style={{
                  left: `${left}px`,
                  top: `${top}px`,
                  width: `${width}px`,
                  height: `${height}px`,
                  transform: isHorizontal ? 'scaleY(0.5)' : 'scaleX(0.5)',
                  transformOrigin: 'top left',
                }}
              />
            )
          })}
        </div>

        {/* 树节点层 */}
        <div className="relative" style={{ zIndex: 10 }} key="tree-root">
          {renderTreeNode(rootId, true)}
        </div>
      </div>

      {relationDialog && (
        <AddRelationDialog
          open={!!relationDialog}
          onOpenChange={(open) => {
            if (!open) setRelationDialog(null)
          }}
          member={relationDialog.member}
          relationType={relationDialog.type}
          onCreateNew={handleCreateNewRelation}
        />
      )}
    </div>
  )
}