"use client"

import { useEffect, useState } from "react"
import { useParams, useRouter } from "next/navigation"
import Link from "next/link"
import { useFamily } from "@/context/family-context"
import { SiteHeader } from "@/components/site-header"
import { MemberForm } from "@/components/members/member-form"
import { Button } from "@/components/ui/button"
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
import { ArrowLeft, Edit, Trash, Share2, Printer, CircleUser, CircleUserRound, Images, BookOpen, UserPlus, Camera } from "lucide-react"
import type { FamilyMember } from "@/types/family"
import { PhotoGallery } from "@/components/members/photo-gallery"
import { StoryManager } from "@/components/members/story-manager"
import { useDialog } from "@/components/ui/alert-dialog-custom"
import { permissions } from "@/lib/permissions"
import { MemberNameWithStatus } from "@/components/member-name-with-status"
import { MemberVersionHistory } from "@/components/members/member-version-history"
import { useSession } from "next-auth/react"

export default function MemberProfilePage() {
  const { id } = useParams()
  const { treeData, currentTree, getMember, updateMember, deleteMember, isLoading } = useFamily()
  const { showConfirm } = useDialog()
  const router = useRouter()
  const { data: session, status } = useSession()
  const [isEditing, setIsEditing] = useState(false)
  const [editActiveTab, setEditActiveTab] = useState("basic")
  const [avatarBlobUrl, setAvatarBlobUrl] = useState<string | undefined>(undefined)
  const [isUploadingAvatar, setIsUploadingAvatar] = useState(false)
  const [lastSaveTime, setLastSaveTime] = useState(Date.now())
  
  // 未登录时重定向到登录页
  useEffect(() => {
    if (status === 'unauthenticated') {
      router.push('/auth/signin')
    }
  }, [status, router])

  const member = getMember(id as string)
  const allMembers = Object.values(treeData.members)
  
  // 始祖专用边框样式
  const founderBorderClass = member?.isFounder ? "border-2 border-amber-400 shadow-md" : "border border-border"
  
  // 计算年龄或享年
  const calculateAge = () => {
    if (!member?.birthDate) return null
    
    const birthYear = new Date(member.birthDate).getFullYear()
    
    if (member.deathDate) {
      // 已故，计算享年
      const deathYear = new Date(member.deathDate).getFullYear()
      return { age: deathYear - birthYear, type: 'deceased' }
    } else {
      // 在世，计算年龄
      const currentYear = new Date().getFullYear()
      return { age: currentYear - birthYear, type: 'living' }
    }
  }
  
  const ageInfo = calculateAge()
  
  // 获取用户角色
  const role = currentTree?.currentUserRole

  // Load avatar
  useEffect(() => {
    if (member?.avatarUrl) {
      setAvatarBlobUrl(member.avatarUrl)
    } else {
      setAvatarBlobUrl(undefined)
    }
  }, [member?.avatarUrl])

  // 显示加载状态
  if (isLoading) {
    return (
      <div className="min-h-screen flex flex-col bg-background">
        <SiteHeader />
        <div className="flex-1 flex flex-col items-center justify-center gap-4">
          <p className="text-muted-foreground">加载中...</p>
        </div>
      </div>
    )
  }

  // 成员未找到
  if (!member) {
    return (
      <div className="min-h-screen flex flex-col bg-background">
        <SiteHeader />
        <div className="flex-1 flex flex-col items-center justify-center gap-4">
          <p className="text-muted-foreground">未找到该成员</p>
          <Button onClick={() => router.push(`/members${typeof window !== 'undefined' ? window.location.search : ''}`)}>返回列表</Button>
        </div>
      </div>
    )
  }

  const handleSave = async (updatedMember: FamilyMember) => {
    await updateMember(updatedMember.id, updatedMember)
    setIsEditing(false)
    setLastSaveTime(Date.now())
  }

  const handleDelete = async () => {
    const confirmed = await showConfirm("确定要删除这位成员吗？这将同时删除其关联关系。", "删除成员", "destructive")
    if (confirmed) {
      deleteMember(member.id)
      const params = new URLSearchParams(window.location.search)
      router.push(`/members?${params.toString()}`)
    }
  }

  const handleQuickAddChild = () => {
    // 跳转到新增成员页面，并预填父母信息
    const params = new URLSearchParams(window.location.search)
    if (member.gender === 'MALE') {
      params.set('fatherId', member.id)
      // 如果父亲有配偶，设置配偶为母亲
      if (member.spouseIds && member.spouseIds.length > 0) {
        params.set('motherId', member.spouseIds[0])
      }
    } else {
      params.set('motherId', member.id)
      // 如果母亲有配偶，设置配偶为父亲
      if (member.spouseIds && member.spouseIds.length > 0) {
        params.set('fatherId', member.spouseIds[0])
      }
    }
    params.set('generation', (member.generation + 1).toString())
    router.push(`/members/new?${params.toString()}`)
  }

  const handleQuickAddSpouse = () => {
    // 跳转到新增成员页面，并预填配偶信息
    const params = new URLSearchParams(window.location.search)
    params.set('spouseId', member.id)
    params.set('generation', member.generation.toString())
    // 配偶性别与当前成员相反
    params.set('gender', member.gender === 'MALE' ? 'FEMALE' : 'MALE')
    
    // 如果当前成员有子女，将他们也作为新配偶的子女
    if (member.childrenIds && member.childrenIds.length > 0) {
      // 传递所有子女ID
      member.childrenIds.forEach(id => {
        params.append('childrenIds', id)
      })
    }
    
    router.push(`/members/new?${params.toString()}`)
  }

  const handleQuickAddFather = () => {
    // 跳转到新增成员页面，并预填父亲信息
    const params = new URLSearchParams(window.location.search)
    params.set('childId', member.id)
    params.set('generation', (member.generation - 1).toString())
    params.set('gender', 'MALE')
    // 如果已有母亲，将母亲设置为配偶
    if (member.motherId) {
      params.set('spouseId', member.motherId)
    }
    router.push(`/members/new?${params.toString()}`)
  }

  const handleAvatarUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]
    if (!file) return

    try {
      setIsUploadingAvatar(true)
      
      // 上传到服务器
      const formData = new FormData()
      formData.append('file', file)
      
      const response = await fetch('/api/upload', {
        method: 'POST',
        body: formData,
      })

      if (!response.ok) {
        const error = await response.json()
        throw new Error(error.error || '上传失败')
      }

      const { url } = await response.json()
      
      // 更新成员头像 URL
      await updateMember(member.id, {
        avatarUrl: url,
      })

      // 显示新头像
      setAvatarBlobUrl(url)
      setLastSaveTime(Date.now())
    } catch (error) {
      console.error('上传头像失败:', error)
      alert('上传头像失败: ' + (error instanceof Error ? error.message : '未知错误'))
    } finally {
      setIsUploadingAvatar(false)
    }
  }

  const handleQuickAddMother = () => {
    // 跳转到新增成员页面，并预填母亲信息
    const params = new URLSearchParams(window.location.search)
    params.set('childId', member.id)
    params.set('generation', (member.generation - 1).toString())
    params.set('gender', 'FEMALE')
    // 如果已有父亲，将父亲设置为配偶
    if (member.fatherId) {
      params.set('spouseId', member.fatherId)
    }
    router.push(`/members/new?${params.toString()}`)
  }

  if (isEditing) {
    return (
      <div className="min-h-screen flex flex-col bg-background">
        <SiteHeader />
        <main className="container mx-auto py-8 px-4 md:px-6">
          <Tabs value={editActiveTab} onValueChange={setEditActiveTab} className="flex flex-col h-[calc(100vh-8rem)]">
            {/* 固定头部区域 */}
            <div className="flex-shrink-0 pb-4 border-b border-border">
              {/* 返回按钮 */}
              <div className="py-4">
                <Button 
                  variant="ghost" 
                  onClick={() => setIsEditing(false)}
                  className="gap-2 pl-0 hover:bg-transparent hover:text-primary text-2xl font-bold"
                >
                  <ArrowLeft className="h-6 w-6" />
                  返回成员详情
                </Button>
              </div>

              {/* Header Section */}
              <div className="flex flex-col md:flex-row justify-between items-start gap-6 pb-4">
                <div className="flex items-start gap-6">
                  <div className="h-24 w-24 rounded-lg bg-muted flex items-center justify-center border-2 border-primary/20 overflow-hidden">
                    {member.avatarUrl ? (
                      <img
                        src={member.avatarUrl}
                        alt={member.fullName}
                        className="h-full w-full object-cover"
                      />
                    ) : (
                      member.gender === 'FEMALE' ? (
                        <CircleUserRound className="h-16 w-16 text-pink-400" />
                      ) : (
                        <CircleUser className="h-16 w-16 text-blue-400" />
                      )
                    )}
                  </div>
                  <div>
                    <div className="flex items-center gap-3 mb-2">
                      <h1 className="text-3xl font-bold font-serif text-foreground flex items-center gap-2">
                        {member.isFounder && <span className="text-amber-600 text-2xl">👑</span>}
                        编辑: {member.fullName}
                      </h1>
                      {member.isFounder ? (
                        <span className="px-3 py-1 bg-gradient-to-r from-amber-100 to-orange-100 text-amber-800 text-sm font-semibold rounded-full border-2 border-amber-300 shadow-sm">
                          始祖 · {member.generation}世
                        </span>
                      ) : (
                        <span className="px-2 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full border border-primary/20">
                          {member.generation}世
                        </span>
                      )}
                    </div>
                    <p className="text-muted-foreground">
                      {member.isFounder 
                        ? '修改始祖信息将影响整个家族树' 
                        : '更新成员信息'}
                    </p>
                  </div>
                </div>

                <div className="flex gap-2 flex-wrap">
                  <Button type="button" variant="outline" onClick={() => setIsEditing(false)}>
                    取消
                  </Button>
                  <Button 
                    type="button" 
                    className="bg-primary text-primary-foreground hover:bg-primary/90"
                    onClick={() => {
                      const form = document.querySelector('form')
                      if (form) {
                        form.requestSubmit()
                      }
                    }}
                  >
                    保存成员
                  </Button>
                </div>
              </div>

              {/* Tab 导航栏 */}
              <TabsList className="flex flex-wrap gap-2 bg-muted/70 p-1 w-fit">
                <TabsTrigger value="basic">基本信息</TabsTrigger>
                <TabsTrigger value="family">家庭关系</TabsTrigger>
                <TabsTrigger value="details">详细资料</TabsTrigger>
                <TabsTrigger value="media">照片故事</TabsTrigger>
              </TabsList>
              
              {/* 始祖特殊提示框 */}
              {member.isFounder && (
                <div className="mt-6 p-6 bg-gradient-to-br from-amber-50 via-orange-50 to-amber-50 border-2 border-amber-400 rounded-xl shadow-md">
                  <div className="flex items-start gap-4">
                    <div className="flex-shrink-0 w-14 h-14 bg-gradient-to-br from-amber-200 to-orange-200 rounded-full flex items-center justify-center shadow-sm">
                      <span className="text-3xl">👑</span>
                    </div>
                    <div className="flex-1">
                      <h2 className="text-2xl font-serif font-bold text-amber-900 mb-3">
                        编辑家族始祖
                      </h2>
                      <p className="text-base text-amber-800 leading-relaxed font-serif">
                        此为家族树之<span className="font-bold text-amber-900">始祖</span>，
                        <span className="font-bold text-amber-900">第一世</span>传人。
                        <br />
                        请谨慎修改始祖信息，这将影响整个家族树的根基。
                      </p>
                    </div>
                  </div>
                </div>
              )}
            </div>

            {/* Tab 内容区域 - 可滚动 */}
            <div className="flex-1 overflow-y-auto">
              <MemberForm 
                initialData={member} 
                existingMembers={allMembers}
                onSubmit={handleSave} 
                onCancel={() => setIsEditing(false)}
                isFounder={member.isFounder}
                hideTabs={true}
                activeTab={editActiveTab}
              />
            </div>
          </Tabs>
        </main>
      </div>
    )
  }

  return (
    <div className="min-h-screen flex flex-col bg-background">
      <SiteHeader />
      <main className="container mx-auto py-8 px-4 md:px-6">
        <Tabs defaultValue="family" className="flex flex-col h-[calc(100vh-8rem)]">
          {/* 固定头部区域 */}
          <div className="flex-shrink-0 pb-4 border-b border-border">
            {/* 返回按钮 */}
            <div className="py-4">
              <Button 
                variant="ghost" 
                onClick={() => router.push(`/members${typeof window !== 'undefined' ? window.location.search : ''}`)}
                className="gap-2 pl-0 hover:bg-transparent hover:text-primary text-2xl font-bold"
              >
                <ArrowLeft className="h-6 w-6" />
                返回成员列表
              </Button>
            </div>

            {/* Header Section */}
            <div className="flex flex-col md:flex-row justify-between items-start gap-6 pb-4">
              <div className="flex items-start gap-6">
                <div className="relative group">
                  <div className="h-24 w-24 rounded-lg bg-muted flex items-center justify-center border-2 border-primary/20 overflow-hidden">
                    {avatarBlobUrl ? (
                      <img
                        src={avatarBlobUrl}
                        alt={member.fullName}
                        className="h-full w-full object-cover"
                      />
                    ) : (
                      member.gender === 'FEMALE' ? (
                        <CircleUserRound className="h-16 w-16 text-pink-400" />
                      ) : (
                        <CircleUser className="h-16 w-16 text-blue-400" />
                      )
                    )}
                  </div>
                  {permissions.canUpdate(role) && (
                    <label className="absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer rounded-lg">
                      <Camera className="h-6 w-6 text-white" />
                      <input
                        type="file"
                        accept="image/*"
                        className="hidden"
                        onChange={handleAvatarUpload}
                        disabled={isUploadingAvatar}
                      />
                    </label>
                  )}
                  {isUploadingAvatar && (
                    <div className="absolute inset-0 flex items-center justify-center bg-black/50 rounded-lg">
                      <div className="text-white text-xs">上传中...</div>
                    </div>
                  )}
                </div>
                <div>
                  <div className="flex items-center gap-3 mb-2">
                    <h1 className="text-3xl font-bold font-serif text-foreground flex items-center gap-2">
                      {member.isFounder && <span className="text-amber-600 text-2xl">👑</span>}
                      <MemberNameWithStatus 
                        name={member.fullName}
                        isDead={!!member.deathDate}
                        memberId={member.id}
                        treeId={currentTree?.id}
                      />
                    </h1>
                    {member.isFounder ? (
                      <span className="px-3 py-1 bg-gradient-to-r from-amber-100 to-orange-100 text-amber-800 text-sm font-semibold rounded-full border-2 border-amber-300 shadow-sm">
                        始祖 · {member.generation}世
                      </span>
                    ) : (
                      <span className="px-2 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full border border-primary/20">
                        {member.generation}世
                      </span>
                    )}
                  </div>
                  <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm text-muted-foreground">
                    {member.courtesyName && <span>字：{member.courtesyName}</span>}
                    {member.artName && <span>号：{member.artName}</span>}
                    {member.generationName && <span>字辈：{member.generationName}</span>}
                    {ageInfo && <span>{ageInfo.type === 'deceased' ? '享年' : '年龄'}：{ageInfo.age}岁</span>}
                  </div>
                </div>
              </div>

              <div className="flex gap-2 flex-wrap">
                {permissions.canCreate(role) && (
                  <>
                    {!member.isFounder && !member.fatherId && (
                      <Button variant="outline" size="sm" onClick={handleQuickAddFather} className="gap-1">
                        <UserPlus className="h-4 w-4" /> 添加父亲
                      </Button>
                    )}
                    {!member.isFounder && !member.motherId && (
                      <Button variant="outline" size="sm" onClick={handleQuickAddMother} className="gap-1">
                        <UserPlus className="h-4 w-4" /> 添加母亲
                      </Button>
                    )}
                    <Button variant="default" size="sm" onClick={handleQuickAddChild} className="gap-1">
                      <UserPlus className="h-4 w-4" /> 添加子女
                    </Button>
                    <Button variant="secondary" size="sm" onClick={handleQuickAddSpouse} className="gap-1">
                      <UserPlus className="h-4 w-4" /> 添加配偶
                    </Button>
                  </>
                )}
                <Button variant="outline" size="icon" onClick={() => window.print()} title="打印">
                  <Printer className="h-4 w-4" />
                </Button>
                <Button variant="outline" size="icon" title="分享">
                  <Share2 className="h-4 w-4" />
                </Button>
                {permissions.canUpdate(role) && (
                  <Button variant="outline" size="sm" onClick={() => setIsEditing(true)} className="gap-1">
                    <Edit className="h-4 w-4" /> 编辑
                  </Button>
                )}
                {permissions.canDeleteMember(role) && (
                  <Button variant="destructive" size="icon" onClick={handleDelete} title="删除">
                    <Trash className="h-4 w-4" />
                  </Button>
                )}
              </div>
            </div>

            {/* Tab 导航栏 */}
            <TabsList className="flex flex-wrap gap-2 bg-muted/70 p-1 w-fit">
              <TabsTrigger value="family">家族关系</TabsTrigger>
              <TabsTrigger value="details">详细信息</TabsTrigger>
              <TabsTrigger value="life">生平影像</TabsTrigger>
              <TabsTrigger value="stories">家族故事</TabsTrigger>
              <TabsTrigger value="history">时间记录</TabsTrigger>
            </TabsList>
            
            {/* 始祖特殊提示框 */}
            {member.isFounder && (
              <div className="mt-6 p-6 bg-gradient-to-br from-amber-50 via-orange-50 to-amber-50 border-2 border-amber-400 rounded-xl shadow-md">
                <div className="flex items-start gap-4">
                  <div className="flex-shrink-0 w-14 h-14 bg-gradient-to-br from-amber-200 to-orange-200 rounded-full flex items-center justify-center shadow-sm">
                    <span className="text-3xl">👑</span>
                  </div>
                  <div className="flex-1">
                    <h2 className="text-2xl font-serif font-bold text-amber-900 mb-3">
                      家族始祖
                    </h2>
                    <p className="text-base text-amber-800 leading-relaxed font-serif">
                      此为家族树之<span className="font-bold text-amber-900">始祖</span>，
                      <span className="font-bold text-amber-900">第一世</span>传人。
                      <br />
                      血脉由此而始，世系因此而传。
                    </p>
                  </div>
                </div>
              </div>
            )}
          </div>

          {/* Tab 内容区域 - 可滚动 */}
          <div className="flex-1 overflow-y-auto">
            <TabsContent value="family" className="mt-6 space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className={`bg-card p-4 rounded-lg ${founderBorderClass}`}>
                <h3 className="font-medium text-muted-foreground mb-3 text-sm uppercase tracking-wider">
                  父母
                </h3>
                <div className="grid gap-3 sm:grid-cols-2">
                  <div>
                    <p className="text-xs text-muted-foreground uppercase tracking-widest mb-1">父亲</p>
                    {member.fatherId ? (
                      <Link
                        href={`/members/${member.fatherId}${typeof window !== 'undefined' ? window.location.search : ''}`}
                        className="text-lg font-serif font-bold hover:underline text-primary"
                      >
                        <MemberNameWithStatus
                          name={getMember(member.fatherId)?.fullName || member.fatherId}
                          isDead={!!getMember(member.fatherId)?.deathDate}
                        />
                      </Link>
                    ) : member.spouseFatherName ? (
                      <span className="text-lg font-serif font-bold text-foreground">
                        {member.spouseFatherName}
                      </span>
                    ) : (
                      <span className="text-muted-foreground">-</span>
                    )}
                  </div>
                  <div>
                    <p className="text-xs text-muted-foreground uppercase tracking-widest mb-1">母亲</p>
                    {member.motherId ? (
                      <Link
                        href={`/members/${member.motherId}${typeof window !== 'undefined' ? window.location.search : ''}`}
                        className="text-lg font-serif font-bold hover:underline text-primary"
                      >
                        <MemberNameWithStatus
                          name={getMember(member.motherId)?.fullName || member.motherId}
                          isDead={!!getMember(member.motherId)?.deathDate}
                        />
                      </Link>
                    ) : member.spouseMotherName ? (
                      <span className="text-lg font-serif font-bold text-foreground">
                        {member.spouseMotherName}
                      </span>
                    ) : (
                      <span className="text-muted-foreground">-</span>
                    )}
                  </div>
                </div>
              </div>
              <div className={`bg-card p-4 rounded-lg ${founderBorderClass}`}>
                <h3 className="font-medium text-muted-foreground mb-3 text-sm uppercase tracking-wider">
                  配偶与子女
                </h3>
                <div className="grid gap-4 sm:grid-cols-2">
                  <div>
                    <p className="text-xs text-muted-foreground uppercase tracking-widest mb-2">配偶</p>
                    <div className="flex flex-wrap gap-2">
                      {member.spouseIds?.length > 0 ? (
                        member.spouseIds.map((spouseId) => (
                          <Link
                            href={`/members/${spouseId}${typeof window !== 'undefined' ? window.location.search : ''}`}
                            key={spouseId}
                            className="px-3 py-1 bg-muted rounded hover:bg-muted/80 text-sm font-medium"
                          >
                            <MemberNameWithStatus
                              name={getMember(spouseId)?.fullName || spouseId}
                              isDead={!!getMember(spouseId)?.deathDate}
                            />
                          </Link>
                        ))
                      ) : (
                        <span className="text-muted-foreground">无记录</span>
                      )}
                    </div>
                  </div>
                  <div>
                    <p className="text-xs text-muted-foreground uppercase tracking-widest mb-2">子女</p>
                    <div className="flex flex-wrap gap-2">
                      {member.childrenIds?.length > 0 ? (
                        member.childrenIds.map((childId) => (
                          <Link
                            href={`/members/${childId}${typeof window !== 'undefined' ? window.location.search : ''}`}
                            key={childId}
                            className="px-3 py-1 bg-muted rounded hover:bg-muted/80 text-sm font-medium"
                          >
                            <MemberNameWithStatus
                              name={getMember(childId)?.fullName || childId}
                              isDead={!!getMember(childId)?.deathDate}
                            />
                          </Link>
                        ))
                      ) : (
                        <span className="text-muted-foreground">无记录</span>
                      )}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </TabsContent>

          <TabsContent value="details" className="mt-6 space-y-6">
            <div className={`bg-card rounded-lg ${founderBorderClass} p-6 shadow-sm w-full`}>
              <h3 className="text-lg font-serif font-semibold mb-4">详细信息</h3>
              <dl className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-6 gap-x-8 gap-y-4 text-sm">
                <div>
                  <dt className="text-muted-foreground mb-1">生卒</dt>
                  <dd className="font-medium space-y-1">
                    <div className="flex flex-wrap items-center gap-2">
                      <span>出生：{member.birthDate || "-"}</span>
                      {member.birthDate && member.isLunarDate && (
                        <span className="text-xs text-amber-600 bg-amber-50 px-2 py-0.5 rounded border border-amber-200">
                          农历
                        </span>
                      )}
                    </div>
                    <div className="flex flex-wrap items-center gap-2">
                      <span>逝世：{member.deathDate || "-"}</span>
                      {member.deathDate && member.isLunarDate && (
                        <span className="text-xs text-amber-600 bg-amber-50 px-2 py-0.5 rounded border border-amber-200">
                          农历
                        </span>
                      )}
                    </div>
                  </dd>
                </div>
                {ageInfo && (
                  <div>
                    <dt className="text-muted-foreground mb-1">{ageInfo.type === 'deceased' ? '享年' : '年龄'}</dt>
                    <dd className="font-medium text-primary">{ageInfo.age} 岁</dd>
                  </div>
                )}
                {member.deathDate && (
                  <>
                    <div>
                      <dt className="text-muted-foreground mb-1">谥号</dt>
                      <dd className="font-medium">{member.posthumousName || "-"}</dd>
                    </div>
                    <div>
                      <dt className="text-muted-foreground mb-1">墓地</dt>
                      <dd className="font-medium">{member.burialPlace || "-"}</dd>
                    </div>
                  </>
                )}
                {member.generationName && (
                  <div>
                    <dt className="text-muted-foreground mb-1">字辈</dt>
                    <dd className="font-medium">{member.generationName}</dd>
                  </div>
                )}
                {member.courtesyName && (
                  <div>
                    <dt className="text-muted-foreground mb-1">字</dt>
                    <dd className="font-medium">{member.courtesyName}</dd>
                  </div>
                )}
                {member.artName && (
                  <div>
                    <dt className="text-muted-foreground mb-1">号</dt>
                    <dd className="font-medium">{member.artName}</dd>
                  </div>
                )}
                {member.ancestralHome && (
                  <div>
                    <dt className="text-muted-foreground mb-1">籍贯</dt>
                    <dd className="font-medium">{member.ancestralHome}</dd>
                  </div>
                )}
                {member.birthPlace && (
                  <div>
                    <dt className="text-muted-foreground mb-1">出生地</dt>
                    <dd className="font-medium">{member.birthPlace}</dd>
                  </div>
                )}
                {member.address && (
                  <div>
                    <dt className="text-muted-foreground mb-1">现居地址</dt>
                    <dd className="font-medium">{member.address}</dd>
                  </div>
                )}
                {member.phone && (
                  <div>
                    <dt className="text-muted-foreground mb-1">手机号</dt>
                    <dd className="font-medium">
                      <a href={`tel:${member.phone}`} className="hover:text-primary">
                        {member.phone}
                      </a>
                    </dd>
                  </div>
                )}
                {member.telephone && (
                  <div>
                    <dt className="text-muted-foreground mb-1">固定电话</dt>
                    <dd className="font-medium">
                      <a href={`tel:${member.telephone}`} className="hover:text-primary">
                        {member.telephone}
                      </a>
                    </dd>
                  </div>
                )}
                {member.email && (
                  <div>
                    <dt className="text-muted-foreground mb-1">邮箱</dt>
                    <dd className="font-medium">
                      <a href={`mailto:${member.email}`} className="hover:text-primary">
                        {member.email}
                      </a>
                    </dd>
                  </div>
                )}
              </dl>
            </div>
            {member.tags && member.tags.length > 0 && (
              <div className={`bg-card rounded-lg ${founderBorderClass} p-6 shadow-sm`}>
                <h3 className="text-lg font-serif font-semibold mb-4">标签</h3>
                <div className="flex flex-wrap gap-2">
                  {member.tags.map((tag) => (
                    <span
                      key={tag}
                      className="px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-md border border-primary/20"
                    >
                      {tag}
                    </span>
                  ))}
                </div>
              </div>
            )}
          </TabsContent>

          <TabsContent value="life" className="mt-6 space-y-6">
            {/* 生平事迹 */}
            <div className={`prose prose-stone dark:prose-invert max-w-none bg-card p-6 rounded-lg ${founderBorderClass} shadow-sm w-full`}>
              <h3 className="text-lg font-serif font-semibold mb-4">生平事迹</h3>
              {member.bio ? (
                <p className="whitespace-pre-line leading-relaxed">{member.bio}</p>
              ) : (
                <p className="text-sm text-muted-foreground text-center py-10">生平待书，欢迎补充这段故事。</p>
              )}
            </div>

            {/* 影像记忆 */}
            <div className={`bg-card p-6 rounded-lg ${founderBorderClass} shadow-sm w-full`}>
              <h3 className="text-lg font-serif font-semibold mb-4 flex items-center gap-2">
                <Images className="h-5 w-5 text-primary" />
                影像记忆
              </h3>
              <PhotoGallery
                photos={member.photos}
                photoIds={member.photoIds}
                onChange={async (photos) => {
                  await updateMember(member.id, { photos, photoIds: undefined })
                  setLastSaveTime(Date.now())
                }}
                readonly={false}
              />
            </div>
          </TabsContent>

          <TabsContent value="stories" className="mt-6 space-y-6">
            <div className={`bg-card p-6 rounded-lg ${founderBorderClass} shadow-sm w-full`}>
              <h3 className="text-lg font-serif font-semibold mb-4 flex items-center gap-2">
                <BookOpen className="h-5 w-5 text-primary" />
                家族故事
              </h3>
              {member.stories && member.stories.length > 0 ? (
                <StoryManager
                  stories={member.stories}
                  onChange={async (stories) => {
                    await updateMember(member.id, { stories })
                    setLastSaveTime(Date.now())
                  }}
                  readonly={false}
                />
              ) : (
                <div className="text-sm text-muted-foreground text-center py-10">
                  暂无故事记录，期待您书写这段家族记忆。
                </div>
              )}
            </div>
          </TabsContent>

          <TabsContent value="history" className="mt-6 space-y-6">
            <div className={`bg-card rounded-lg ${founderBorderClass} p-6 shadow-sm w-full`}>
              <h3 className="text-lg font-serif font-semibold mb-2">最近更新</h3>
              <p className="text-sm text-muted-foreground">
                最后保存于 {new Date(lastSaveTime).toLocaleString('zh-CN')}
              </p>
            </div>
            <div className={`bg-card rounded-lg ${founderBorderClass} p-6 shadow-sm w-full`}>
              <h3 className="text-lg font-serif font-semibold mb-4">版本历史</h3>
              <MemberVersionHistory 
                memberId={member.id}
                treeId={currentTree?.id || ''}
                lastUpdated={lastSaveTime}
              />
            </div>
          </TabsContent>
          </div>
        </Tabs>
      </main>
    </div>
  )
}