import { jsPDF } from 'jspdf'
import type { FamilyMember } from '@/types/family'

// 中文字体需要特殊处理，这里使用基本的方式
// jsPDF 默认不支持中文，需要添加中文字体

interface MemberInfo {
  label: string
  value: string
}

// 格式化日期
function formatDate(dateStr?: string): string {
  if (!dateStr) return ''
  try {
    const date = new Date(dateStr)
    if (isNaN(date.getTime())) return dateStr
    return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
  } catch {
    return dateStr
  }
}

// 计算年龄
function calculateAge(birthDate?: string, deathDate?: string): string {
  if (!birthDate) return ''
  try {
    const birth = new Date(birthDate)
    const end = deathDate ? new Date(deathDate) : new Date()
    if (isNaN(birth.getTime())) return ''
    
    let age = end.getFullYear() - birth.getFullYear()
    const monthDiff = end.getMonth() - birth.getMonth()
    if (monthDiff < 0 || (monthDiff === 0 && end.getDate() < birth.getDate())) {
      age--
    }
    
    if (deathDate) {
      return `享年${age}岁`
    }
    return `${age}岁`
  } catch {
    return ''
  }
}

// 获取成员主要信息
function getMemberInfo(member: FamilyMember, getMemberName: (id: string) => string): MemberInfo[] {
  const info: MemberInfo[] = []
  
  // 基本信息
  info.push({ label: '姓名', value: member.fullName || '' })
  info.push({ label: '性别', value: member.gender === 'MALE' ? '男' : member.gender === 'FEMALE' ? '女' : '' })
  info.push({ label: '世代', value: member.generation ? `第${member.generation}世` : '' })
  info.push({ label: '排行', value: member.rank ? `第${member.rank}` : '' })
  
  // 字辈名号
  info.push({ label: '字辈', value: member.generationName || '' })
  info.push({ label: '字', value: member.courtesyName || '' })
  info.push({ label: '号', value: member.artName || '' })
  
  // 日期
  info.push({ label: '出生日期', value: formatDate(member.birthDate) })
  info.push({ label: '逝世日期', value: formatDate(member.deathDate) })
  info.push({ label: '年龄', value: calculateAge(member.birthDate, member.deathDate) })
  
  // 地点
  info.push({ label: '籍贯', value: member.ancestralHome || '' })
  info.push({ label: '出生地', value: member.birthPlace || '' })
  info.push({ label: '现居地', value: member.address || '' })
  info.push({ label: '墓地', value: member.burialPlace || '' })
  
  // 联系方式
  info.push({ label: '手机', value: member.phone || '' })
  info.push({ label: '电话', value: member.telephone || '' })
  info.push({ label: '邮箱', value: member.email || '' })
  
  // 职业
  info.push({ label: '职业', value: member.occupation || '' })
  
  // 家庭关系
  const fatherName = member.fatherId ? getMemberName(member.fatherId) : ''
  const motherName = member.motherId ? getMemberName(member.motherId) : ''
  const spouseNames = member.spouseIds?.map(id => getMemberName(id)).filter(Boolean).join('、') || ''
  const childrenNames = member.childrenIds?.map(id => getMemberName(id)).filter(Boolean).join('、') || ''
  
  info.push({ label: '父亲', value: fatherName })
  info.push({ label: '母亲', value: motherName })
  info.push({ label: '配偶', value: spouseNames })
  info.push({ label: '子女', value: childrenNames })
  
  return info
}

// 按世代分组成员
function groupMembersByGeneration(members: FamilyMember[]): Map<number, FamilyMember[]> {
  const groups = new Map<number, FamilyMember[]>()
  
  members.forEach(member => {
    const gen = member.generation || 0
    if (!groups.has(gen)) {
      groups.set(gen, [])
    }
    groups.get(gen)!.push(member)
  })
  
  // 按世代排序
  return new Map([...groups.entries()].sort((a, b) => a[0] - b[0]))
}

// 导出 PDF
export async function exportFamilyPDF(
  members: FamilyMember[],
  getMemberName: (id: string) => string,
  treeName: string = '家族'
): Promise<void> {
  // 创建 PDF，A4 纸张
  const doc = new jsPDF({
    orientation: 'portrait',
    unit: 'mm',
    format: 'a4'
  })
  
  // 页面尺寸
  const pageWidth = 210
  const pageHeight = 297
  const margin = 15
  const contentWidth = pageWidth - margin * 2
  const halfWidth = contentWidth / 2 - 5
  
  // 按世代分组
  const groupedMembers = groupMembersByGeneration(members)
  
  let isFirstPage = true
  
  // 遍历每个世代
  for (const [generation, genMembers] of groupedMembers) {
    // 对同世代成员按排行排序
    genMembers.sort((a, b) => (a.rank || 999) - (b.rank || 999))
    
    // 每页两个成员
    for (let i = 0; i < genMembers.length; i += 2) {
      if (!isFirstPage) {
        doc.addPage()
      }
      isFirstPage = false
      
      // 页眉
      doc.setFontSize(12)
      doc.setTextColor(100)
      doc.text(`${treeName}族谱 - 第${generation}世`, pageWidth / 2, 10, { align: 'center' })
      
      // 绘制分隔线
      doc.setDrawColor(200)
      doc.line(margin, 15, pageWidth - margin, 15)
      
      // 左侧成员
      const leftMember = genMembers[i]
      drawMemberCard(doc, leftMember, getMemberName, margin, 20, halfWidth)
      
      // 右侧成员（如果有）
      if (i + 1 < genMembers.length) {
        const rightMember = genMembers[i + 1]
        drawMemberCard(doc, rightMember, getMemberName, margin + halfWidth + 10, 20, halfWidth)
      }
      
      // 中间分隔线
      doc.setDrawColor(220)
      doc.setLineDashPattern([2, 2], 0)
      doc.line(pageWidth / 2, 20, pageWidth / 2, pageHeight - 15)
      doc.setLineDashPattern([], 0)
      
      // 页脚
      doc.setFontSize(10)
      doc.setTextColor(150)
      doc.text(`第 ${doc.getNumberOfPages()} 页`, pageWidth / 2, pageHeight - 8, { align: 'center' })
    }
  }
  
  // 保存 PDF
  const fileName = `${treeName}族谱_${new Date().toISOString().split('T')[0]}.pdf`
  doc.save(fileName)
}

// 绘制成员卡片
function drawMemberCard(
  doc: jsPDF,
  member: FamilyMember,
  getMemberName: (id: string) => string,
  x: number,
  y: number,
  width: number
): void {
  const info = getMemberInfo(member, getMemberName)
  const lineHeight = 8
  const labelWidth = 25
  
  // 成员姓名标题
  doc.setFontSize(14)
  doc.setTextColor(0)
  doc.setFont('helvetica', 'bold')
  doc.text(member.fullName || '未知', x + width / 2, y + 5, { align: 'center' })
  
  // 状态标签
  const status = member.deathDate ? '(已故)' : '(在世)'
  doc.setFontSize(10)
  doc.setTextColor(100)
  doc.text(status, x + width / 2, y + 12, { align: 'center' })
  
  // 分隔线
  doc.setDrawColor(200)
  doc.line(x, y + 16, x + width, y + 16)
  
  // 信息列表
  doc.setFont('helvetica', 'normal')
  doc.setFontSize(9)
  
  let currentY = y + 24
  
  info.forEach(item => {
    // 跳过姓名（已在标题显示）
    if (item.label === '姓名') return
    
    // 标签
    doc.setTextColor(80)
    doc.text(`${item.label}:`, x + 2, currentY)
    
    // 值
    doc.setTextColor(0)
    const value = item.value || '-'
    // 处理长文本换行
    const maxValueWidth = width - labelWidth - 5
    const lines = doc.splitTextToSize(value, maxValueWidth)
    doc.text(lines[0] || '-', x + labelWidth, currentY)
    
    // 如果有多行，继续绘制
    if (lines.length > 1) {
      for (let i = 1; i < Math.min(lines.length, 2); i++) {
        currentY += lineHeight - 2
        doc.text(lines[i], x + labelWidth, currentY)
      }
    }
    
    currentY += lineHeight
  })
}

// 定义页面数据结构
interface PageData {
  leftMember: FamilyMember
  leftGeneration: number
  rightMembers: FamilyMember[] // 配偶列表（可能多个，上下排列）
  rightGeneration: number
}

// 获取完整的图片 URL
function getFullImageUrl(url: string | undefined, baseUrl: string): string {
  if (!url) return ''
  // 如果已经是完整 URL，直接返回
  if (url.startsWith('http://') || url.startsWith('https://') || url.startsWith('data:')) {
    return url
  }
  // 相对路径，拼接基础 URL
  return `${baseUrl}${url.startsWith('/') ? '' : '/'}${url}`
}

// 导出为 HTML 格式（支持中文，夫妻同页）
export async function exportFamilyHTML(
  members: FamilyMember[],
  getMemberName: (id: string) => string,
  treeName: string = '家族',
  baseUrl: string = ''
): Promise<void> {
  const groupedMembers = groupMembersByGeneration(members)
  const membersMap = new Map<string, FamilyMember>()
  members.forEach(m => membersMap.set(m.id, m))
  
  // 已处理的成员ID（避免配偶重复出现）
  const processedIds = new Set<string>()
  
  // 构建页面数据：每页一对夫妻
  const pages: PageData[] = []
  
  for (const [generation, genMembers] of groupedMembers) {
    // 按排行排序
    genMembers.sort((a, b) => (a.rank || 999) - (b.rank || 999))
    
    for (const member of genMembers) {
      // 跳过已处理的成员（作为配偶已出现）
      if (processedIds.has(member.id)) continue
      
      processedIds.add(member.id)
      
      // 获取配偶列表
      const spouses: FamilyMember[] = []
      if (member.spouseIds && member.spouseIds.length > 0) {
        for (const spouseId of member.spouseIds) {
          const spouse = membersMap.get(spouseId)
          if (spouse && !processedIds.has(spouseId)) {
            spouses.push(spouse)
            processedIds.add(spouseId)
          }
        }
      }
      
      // 获取配偶的世代（通常与主成员相同）
      const spouseGeneration = spouses.length > 0 ? (spouses[0].generation || generation) : generation
      
      pages.push({
        leftMember: member,
        leftGeneration: generation,
        rightMembers: spouses,
        rightGeneration: spouseGeneration
      })
    }
  }
  
  let html = `
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>${treeName}族谱</title>
  <style>
    @page {
      size: A4;
      margin: 10mm;
    }
    @media print {
      .page { page-break-after: always; }
      .page:last-child { page-break-after: avoid; }
      .no-print { display: none !important; }
    }
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: "SimSun", "宋体", "Microsoft YaHei", serif;
      font-size: 11pt;
      line-height: 1.4;
      color: #333;
      background: #f5f5f5;
    }
    .page {
      width: 210mm;
      min-height: 297mm;
      padding: 10mm;
      margin: 0 auto 10px;
      background: white;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      display: flex;
      flex-direction: column;
    }
    .page-header {
      text-align: center;
      border-bottom: 2px solid #8b4513;
      padding-bottom: 8px;
      margin-bottom: 10px;
    }
    .page-header h1 {
      color: #8b4513;
      font-size: 18pt;
      margin-bottom: 3px;
    }
    .page-header .subtitle {
      font-size: 10pt;
      color: #666;
    }
    .members-container {
      flex: 1;
      display: flex;
      gap: 10mm;
    }
    .member-card {
      flex: 1;
      border: 2px solid #d4c4a8;
      background: linear-gradient(to bottom, #fefcf8, #f9f5ef);
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    .member-card.empty {
      border: 2px dashed #e0d8c8;
      background: #fafafa;
    }
    .member-header {
      background: linear-gradient(to right, #8b4513, #a0522d);
      color: white;
      padding: 8px 12px;
      text-align: center;
    }
    .member-name {
      font-size: 16pt;
      font-weight: bold;
      letter-spacing: 2px;
    }
    .member-gen {
      font-size: 10pt;
      opacity: 0.9;
      margin-top: 2px;
    }
    .member-body {
      flex: 1;
      padding: 10px;
      display: flex;
      flex-direction: column;
    }
    .avatar-section {
      text-align: center;
      margin-bottom: 10px;
    }
    .avatar {
      width: 80px;
      height: 80px;
      border: 2px solid #8b4513;
      object-fit: cover;
      background: #f0e6d3;
    }
    .avatar-placeholder {
      width: 80px;
      height: 80px;
      border: 2px solid #d4c4a8;
      background: #f0e6d3;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #8b4513;
      font-size: 10pt;
    }
    .status-badge {
      display: inline-block;
      padding: 2px 10px;
      font-size: 9pt;
      border-radius: 10px;
      margin-top: 5px;
    }
    .status-living {
      background: #d4edda;
      color: #155724;
    }
    .status-deceased {
      background: #e2e3e5;
      color: #383d41;
    }
    .info-section {
      flex: 1;
    }
    .info-group {
      margin-bottom: 8px;
      padding-bottom: 8px;
      border-bottom: 1px dashed #e0d8c8;
    }
    .info-group:last-child {
      border-bottom: none;
      margin-bottom: 0;
    }
    .info-group-title {
      font-size: 9pt;
      color: #8b4513;
      font-weight: bold;
      margin-bottom: 4px;
      padding-left: 5px;
      border-left: 3px solid #8b4513;
    }
    .info-row {
      display: flex;
      margin-bottom: 3px;
      font-size: 10pt;
    }
    .info-label {
      width: 55px;
      color: #666;
      flex-shrink: 0;
    }
    .info-value {
      flex: 1;
      color: #333;
      word-break: break-all;
    }
    .info-value.empty {
      color: #ccc;
    }
    .page-footer {
      text-align: center;
      font-size: 9pt;
      color: #999;
      padding-top: 5px;
      border-top: 1px solid #e0d8c8;
      margin-top: 10px;
    }
    .print-btn {
      position: fixed;
      top: 20px;
      right: 20px;
      padding: 12px 24px;
      background: #8b4513;
      color: white;
      border: none;
      cursor: pointer;
      font-size: 14pt;
      border-radius: 5px;
    }
    .print-btn:hover {
      background: #6b3410;
    }
    .spouse-column {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 5mm;
    }
    .spouse-card {
      flex: 1;
      border: 2px dashed #d4c4a8;
      background: linear-gradient(to bottom, #fefcf8, #f9f5ef);
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    .spouse-card .member-header {
      background: linear-gradient(to right, #a0522d, #cd853f);
    }
    .spouse-label {
      font-size: 8pt;
      color: #8b4513;
      text-align: center;
      padding: 2px;
      background: #f5f0e6;
    }
    .couple-card {
      flex: 1;
      border: 3px solid #8b4513;
      background: linear-gradient(to bottom, #fefcf8, #f9f5ef);
      display: flex;
      flex-direction: column;
    }
    .couple-header {
      background: linear-gradient(to right, #8b4513, #a0522d, #8b4513);
      color: white;
      padding: 10px 20px;
      text-align: center;
      font-size: 16pt;
      font-weight: bold;
      letter-spacing: 3px;
    }
    .couple-body {
      flex: 1;
      display: flex;
      padding: 15px;
      gap: 0;
    }
    .couple-divider {
      width: 2px;
      background: linear-gradient(to bottom, transparent, #d4c4a8, #8b4513, #d4c4a8, transparent);
      margin: 10px 15px;
    }
    .person-card {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .person-card.empty {
      justify-content: center;
      align-items: center;
      color: #999;
    }
    .person-header {
      display: flex;
      align-items: flex-start;
      gap: 15px;
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 1px dashed #d4c4a8;
    }
    .person-avatar {
      width: 70px;
      height: 70px;
      border: 2px solid #8b4513;
      object-fit: cover;
      background: #f0e6d3;
      flex-shrink: 0;
    }
    .person-avatar-placeholder {
      width: 70px;
      height: 70px;
      border: 2px solid #d4c4a8;
      background: #f0e6d3;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #8b4513;
      font-size: 24pt;
      flex-shrink: 0;
    }
    .person-title {
      flex: 1;
    }
    .person-name {
      font-size: 18pt;
      font-weight: bold;
      color: #8b4513;
      letter-spacing: 2px;
    }
    .person-meta {
      font-size: 10pt;
      color: #666;
      margin-top: 5px;
    }
    .person-info {
      flex: 1;
    }
    .children-section {
      background: #f5f0e6;
      padding: 10px 20px;
      border-top: 2px solid #d4c4a8;
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }
    .children-label {
      font-weight: bold;
      color: #8b4513;
      flex-shrink: 0;
    }
    .children-names {
      color: #333;
      line-height: 1.6;
    }
    .spouses-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .spouse-label-tag {
      font-size: 9pt;
      color: #8b4513;
      background: #f5f0e6;
      padding: 2px 8px;
      border-radius: 3px;
      margin-bottom: 5px;
      display: inline-block;
    }
  </style>
</head>
<body>
  <button class="print-btn no-print" onclick="window.print()">打印 / 保存PDF</button>
`

  // 遍历每一页（每页一对夫妻）
  const totalPages = pages.length
  
  for (let pageIndex = 0; pageIndex < totalPages; pageIndex++) {
    const pageData = pages[pageIndex]
    
    // 获取子女名单（夫妻共用）
    const childrenNames = pageData.leftMember.childrenIds?.map(id => getMemberName(id)).filter(Boolean).join('、') || ''
    
    html += `
    <div class="page">
      <div class="page-header">
        <h1>${treeName}族谱</h1>
        <div class="subtitle">导出日期：${new Date().toLocaleDateString('zh-CN')}</div>
      </div>
      
      <div class="couple-card">
        <div class="couple-header">
          <span>第${pageData.leftGeneration}世</span>
        </div>
        <div class="couple-body">
          ${renderPersonCard(pageData.leftMember, getMemberName, baseUrl, true)}
          <div class="couple-divider"></div>
          ${pageData.rightMembers.length > 0 
            ? renderSpousesCards(pageData.rightMembers, getMemberName, baseUrl)
            : '<div class="person-card empty"></div>'
          }
        </div>
        ${childrenNames ? `
        <div class="children-section">
          <div class="children-label">子女：</div>
          <div class="children-names">${childrenNames}</div>
        </div>
        ` : ''}
      </div>
      
      <div class="page-footer">
        第 ${pageIndex + 1} 页 / 共 ${totalPages} 页
      </div>
    </div>
    `
  }
  
  html += `
</body>
</html>`

  // 创建 Blob 并下载
  const blob = new Blob([html], { type: 'text/html;charset=utf-8' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = `${treeName}族谱_${new Date().toISOString().split('T')[0]}.html`
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  URL.revokeObjectURL(url)
}

function renderMemberCardHTMLNew(
  member: FamilyMember, 
  generation: number,
  getMemberName: (id: string) => string,
  baseUrl: string = ''
): string {
  const info = getMemberInfo(member, getMemberName)
  const isDead = !!member.deathDate
  const statusClass = isDead ? 'status-deceased' : 'status-living'
  const statusText = isDead ? '已故' : '在世'
  
  // 获取完整的头像 URL
  const avatarUrl = getFullImageUrl(member.avatarUrl, baseUrl)
  
  let html = `
    <div class="member-card">
      <div class="member-header">
        <div class="member-name">${member.fullName || '未知'}</div>
        <div class="member-gen">第${generation}世${member.rank ? ` · 排行第${member.rank}` : ''}</div>
      </div>
      
      <div class="member-body">
        <div class="avatar-section">
          ${avatarUrl 
            ? `<img class="avatar" src="${avatarUrl}" alt="${member.fullName}" onerror="this.style.display='none';this.nextElementSibling.style.display='inline-flex';" /><div class="avatar-placeholder" style="display:none;">无照片</div>`
            : `<div class="avatar-placeholder">${member.gender === 'MALE' ? '👤' : '👩'}</div>`
          }
          <div><span class="status-badge ${statusClass}">${statusText}</span></div>
        </div>
        
        <div class="info-section">
          <!-- 基本信息 -->
          <div class="info-group">
            <div class="info-group-title">基本信息</div>
            ${renderInfoRow('性别', member.gender === 'MALE' ? '男' : member.gender === 'FEMALE' ? '女' : '-')}
            ${renderInfoRow('字辈', member.generationName)}
            ${renderInfoRow('字', member.courtesyName)}
            ${renderInfoRow('号', member.artName)}
          </div>
          
          <!-- 生卒信息 -->
          <div class="info-group">
            <div class="info-group-title">生卒信息</div>
            ${renderInfoRow('出生', formatDate(member.birthDate))}
            ${renderInfoRow('逝世', formatDate(member.deathDate))}
            ${renderInfoRow('年龄', calculateAge(member.birthDate, member.deathDate))}
          </div>
          
          <!-- 地址信息 -->
          <div class="info-group">
            <div class="info-group-title">地址信息</div>
            ${renderInfoRow('籍贯', member.ancestralHome)}
            ${renderInfoRow('出生地', member.birthPlace)}
            ${renderInfoRow('现居地', member.address)}
            ${renderInfoRow('墓地', member.burialPlace)}
          </div>
          
          <!-- 联系方式 -->
          <div class="info-group">
            <div class="info-group-title">联系方式</div>
            ${renderInfoRow('手机', member.phone)}
            ${renderInfoRow('电话', member.telephone)}
            ${renderInfoRow('邮箱', member.email)}
            ${renderInfoRow('职业', member.occupation)}
          </div>
          
          <!-- 家庭关系 -->
          <div class="info-group">
            <div class="info-group-title">家庭关系</div>
            ${renderInfoRow('父亲', member.fatherId ? getMemberName(member.fatherId) : '')}
            ${renderInfoRow('母亲', member.motherId ? getMemberName(member.motherId) : '')}
            ${renderInfoRow('配偶', member.spouseIds?.map(id => getMemberName(id)).filter(Boolean).join('、'))}
            ${renderInfoRow('子女', member.childrenIds?.map(id => getMemberName(id)).filter(Boolean).join('、'))}
          </div>
        </div>
      </div>
    </div>
  `
  
  return html
}

function renderInfoRow(label: string, value?: string): string {
  const displayValue = value || '-'
  const emptyClass = !value ? 'empty' : ''
  return `
    <div class="info-row">
      <span class="info-label">${label}：</span>
      <span class="info-value ${emptyClass}">${displayValue}</span>
    </div>
  `
}

// 渲染配偶列（支持多配偶上下排列）
function renderSpouseColumn(
  spouses: FamilyMember[],
  generation: number,
  getMemberName: (id: string) => string,
  baseUrl: string = ''
): string {
  if (spouses.length === 0) {
    return '<div class="member-card empty"><div class="member-header"><div class="member-name">无配偶</div></div></div>'
  }
  
  if (spouses.length === 1) {
    // 单配偶，使用完整卡片
    return renderSpouseCardHTML(spouses[0], generation, getMemberName, false, baseUrl)
  }
  
  // 多配偶，上下排列
  let html = '<div class="spouse-column">'
  spouses.forEach((spouse, index) => {
    html += `<div class="spouse-label">配偶${index + 1}</div>`
    html += renderSpouseCardHTML(spouse, generation, getMemberName, true, baseUrl)
  })
  html += '</div>'
  return html
}

// 渲染配偶卡片（简化版，用于多配偶时）
function renderSpouseCardHTML(
  member: FamilyMember,
  generation: number,
  getMemberName: (id: string) => string,
  isCompact: boolean,
  baseUrl: string = ''
): string {
  const isDead = !!member.deathDate
  const statusClass = isDead ? 'status-deceased' : 'status-living'
  const statusText = isDead ? '已故' : '在世'
  const avatarUrl = getFullImageUrl(member.avatarUrl, baseUrl)
  
  if (isCompact) {
    // 紧凑版（多配偶时使用）
    return `
      <div class="spouse-card">
        <div class="member-header">
          <div class="member-name" style="font-size: 14pt;">${member.fullName || '未知'}</div>
          <div class="member-gen">第${generation}世</div>
        </div>
        <div class="member-body" style="padding: 8px;">
          <div style="display: flex; gap: 10px;">
            <div class="avatar-section" style="margin-bottom: 0;">
              ${avatarUrl 
                ? `<img class="avatar" style="width: 60px; height: 60px;" src="${avatarUrl}" alt="${member.fullName}" onerror="this.style.display='none';this.nextElementSibling.style.display='inline-flex';" /><div class="avatar-placeholder" style="width: 60px; height: 60px; display:none;">无照片</div>`
                : `<div class="avatar-placeholder" style="width: 60px; height: 60px;">${member.gender === 'MALE' ? '👤' : '👩'}</div>`
              }
              <div><span class="status-badge ${statusClass}" style="font-size: 8pt;">${statusText}</span></div>
            </div>
            <div class="info-section" style="font-size: 9pt;">
              ${renderInfoRow('性别', member.gender === 'MALE' ? '男' : member.gender === 'FEMALE' ? '女' : '-')}
              ${renderInfoRow('出生', formatDate(member.birthDate))}
              ${renderInfoRow('逝世', formatDate(member.deathDate))}
              ${renderInfoRow('籍贯', member.ancestralHome)}
              ${renderInfoRow('职业', member.occupation)}
            </div>
          </div>
        </div>
      </div>
    `
  }
  
  // 完整版（单配偶时使用）
  return `
    <div class="spouse-card" style="border-style: dashed;">
      <div class="member-header">
        <div class="member-name">${member.fullName || '未知'}</div>
        <div class="member-gen">第${generation}世${member.rank ? ` · 排行第${member.rank}` : ''}</div>
      </div>
      
      <div class="member-body">
        <div class="avatar-section">
          ${avatarUrl 
            ? `<img class="avatar" src="${avatarUrl}" alt="${member.fullName}" onerror="this.style.display='none';this.nextElementSibling.style.display='inline-flex';" /><div class="avatar-placeholder" style="display:none;">无照片</div>`
            : `<div class="avatar-placeholder">${member.gender === 'MALE' ? '👤' : '👩'}</div>`
          }
          <div><span class="status-badge ${statusClass}">${statusText}</span></div>
        </div>
        
        <div class="info-section">
          <div class="info-group">
            <div class="info-group-title">基本信息</div>
            ${renderInfoRow('性别', member.gender === 'MALE' ? '男' : member.gender === 'FEMALE' ? '女' : '-')}
            ${renderInfoRow('字辈', member.generationName)}
            ${renderInfoRow('字', member.courtesyName)}
            ${renderInfoRow('号', member.artName)}
          </div>
          
          <div class="info-group">
            <div class="info-group-title">生卒信息</div>
            ${renderInfoRow('出生', formatDate(member.birthDate))}
            ${renderInfoRow('逝世', formatDate(member.deathDate))}
            ${renderInfoRow('年龄', calculateAge(member.birthDate, member.deathDate))}
          </div>
          
          <div class="info-group">
            <div class="info-group-title">地址信息</div>
            ${renderInfoRow('籍贯', member.ancestralHome)}
            ${renderInfoRow('出生地', member.birthPlace)}
            ${renderInfoRow('现居地', member.address)}
            ${renderInfoRow('墓地', member.burialPlace)}
          </div>
          
          <div class="info-group">
            <div class="info-group-title">联系方式</div>
            ${renderInfoRow('手机', member.phone)}
            ${renderInfoRow('电话', member.telephone)}
            ${renderInfoRow('邮箱', member.email)}
            ${renderInfoRow('职业', member.occupation)}
          </div>
          
          <div class="info-group">
            <div class="info-group-title">家庭关系</div>
            ${renderInfoRow('父亲', member.fatherId ? getMemberName(member.fatherId) : '')}
            ${renderInfoRow('母亲', member.motherId ? getMemberName(member.motherId) : '')}
            ${renderInfoRow('子女', member.childrenIds?.map(id => getMemberName(id)).filter(Boolean).join('、'))}
          </div>
        </div>
      </div>
    </div>
  `
}

// 渲染单个人员卡片（用于夫妻共用外框布局）
function renderPersonCard(
  member: FamilyMember,
  getMemberName: (id: string) => string,
  baseUrl: string,
  isMain: boolean
): string {
  const isDead = !!member.deathDate
  const statusText = isDead ? '已故' : '在世'
  const statusClass = isDead ? 'status-deceased' : 'status-living'
  const avatarUrl = getFullImageUrl(member.avatarUrl, baseUrl)
  
  const genderText = member.gender === 'MALE' ? '男' : member.gender === 'FEMALE' ? '女' : ''
  const rankText = member.rank ? `排行第${member.rank}` : ''
  const metaItems = [genderText, rankText].filter(Boolean).join(' · ')
  
  return `
    <div class="person-card">
      <div class="person-header">
        ${avatarUrl 
          ? `<img class="person-avatar" src="${avatarUrl}" alt="${member.fullName}" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';" /><div class="person-avatar-placeholder" style="display:none;">${member.gender === 'MALE' ? '👤' : '👩'}</div>`
          : `<div class="person-avatar-placeholder">${member.gender === 'MALE' ? '👤' : '👩'}</div>`
        }
        <div class="person-title">
          <div class="person-name">${member.fullName || '未知'}</div>
          <div class="person-meta">${metaItems}</div>
          <div style="margin-top: 5px;"><span class="status-badge ${statusClass}">${statusText}</span></div>
        </div>
      </div>
      
      <div class="person-info">
        <div class="info-group">
          ${member.generationName ? renderInfoRow('字辈', member.generationName) : ''}
          ${member.courtesyName ? renderInfoRow('字', member.courtesyName) : ''}
          ${member.artName ? renderInfoRow('号', member.artName) : ''}
          ${renderInfoRow('出生', formatDate(member.birthDate))}
          ${renderInfoRow('逝世', formatDate(member.deathDate))}
          ${renderInfoRow('年龄', calculateAge(member.birthDate, member.deathDate))}
        </div>
        <div class="info-group">
          ${renderInfoRow('籍贯', member.ancestralHome)}
          ${member.birthPlace ? renderInfoRow('出生地', member.birthPlace) : ''}
          ${member.address ? renderInfoRow('现居地', member.address) : ''}
          ${member.burialPlace ? renderInfoRow('墓地', member.burialPlace) : ''}
        </div>
        <div class="info-group">
          ${member.phone ? renderInfoRow('手机', member.phone) : ''}
          ${member.email ? renderInfoRow('邮箱', member.email) : ''}
          ${member.occupation ? renderInfoRow('职业', member.occupation) : ''}
        </div>
        ${isMain ? `
        <div class="info-group">
          ${renderInfoRow('父亲', member.fatherId ? getMemberName(member.fatherId) : '')}
          ${renderInfoRow('母亲', member.motherId ? getMemberName(member.motherId) : '')}
        </div>
        ` : ''}
      </div>
    </div>
  `
}

// 渲染配偶卡片列表
function renderSpousesCards(
  spouses: FamilyMember[],
  getMemberName: (id: string) => string,
  baseUrl: string
): string {
  if (spouses.length === 1) {
    return renderPersonCard(spouses[0], getMemberName, baseUrl, false)
  }
  
  // 多配偶，上下排列
  let html = '<div class="spouses-container">'
  spouses.forEach((spouse, index) => {
    html += `<div><span class="spouse-label-tag">配偶${index + 1}</span></div>`
    html += renderPersonCard(spouse, getMemberName, baseUrl, false)
  })
  html += '</div>'
  return html
}