import { MemberNameWithStatus } from "./member-name-with-status"
import { useFamily } from "@/context/family-context"

interface RelationshipPathDisplayProps {
  path: string
  className?: string
}

/**
 * 显示关系路径，并为路径中的每个成员姓名添加状态标识
 * 路径格式: "虞国栋 → 儿子(虞晓东) → 儿子(虞雨轩) → 女儿(虞诗语)"
 */
export function RelationshipPathDisplay({ path, className = "" }: RelationshipPathDisplayProps) {
  const { treeData } = useFamily()
  
  if (!path) return null
  
  // 解析路径字符串
  // 格式: "起点名 → 关系(名字) → 关系(名字) → ..."
  const parts = path.split(' → ')
  
  return (
    <div className={`flex flex-wrap items-center gap-2 ${className}`}>
      {parts.map((part, index) => {
        // 第一个部分是起点名字（没有关系前缀）
        if (index === 0) {
          const member = Object.values(treeData.members).find(m => m.fullName === part)
          return (
            <span key={index} className="inline-flex items-center">
              <MemberNameWithStatus 
                name={part}
                isDead={!!member?.deathDate}
              />
            </span>
          )
        }
        
        // 其他部分格式: "关系(名字)"
        const match = part.match(/^(.+?)\((.+?)\)$/)
        if (match) {
          const [, relation, name] = match
          const member = Object.values(treeData.members).find(m => m.fullName === name)
          
          return (
            <span key={index} className="inline-flex items-center gap-2">
              <span className="text-muted-foreground">→</span>
              <span className="text-sm text-muted-foreground">{relation}</span>
              <span className="text-muted-foreground">(</span>
              <MemberNameWithStatus 
                name={name}
                isDead={!!member?.deathDate}
              />
              <span className="text-muted-foreground">)</span>
            </span>
          )
        }
        
        // 如果格式不匹配，直接显示原文
        return <span key={index}>{part}</span>
      })}
    </div>
  )
}