import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react'
import { Search, MessageSquare, AlertCircle, Loader2, RefreshCw, X, ChevronDown, ChevronLeft, Info, Calendar, Database, Hash, Play, Pause, Image as ImageIcon, Link, Mic, CheckCircle, Copy, Check, CheckSquare, Download, BarChart3, Edit2, Trash2, BellOff, Users, FolderClosed, UserCheck, Crown, Aperture } from 'lucide-react'
import { useNavigate } from 'react-router-dom'
import { createPortal } from 'react-dom'
import { Virtuoso, type VirtuosoHandle } from 'react-virtuoso'
import { useShallow } from 'zustand/react/shallow'
import { useChatStore } from '../stores/chatStore'
import { useBatchTranscribeStore, type BatchVoiceTaskType } from '../stores/batchTranscribeStore'
import { useBatchImageDecryptStore } from '../stores/batchImageDecryptStore'
import type { ChatRecordItem, ChatSession, Message } from '../types/models'
import { getEmojiPath } from 'wechat-emojis'
import { VoiceTranscribeDialog } from '../components/VoiceTranscribeDialog'
import { LivePhotoIcon } from '../components/LivePhotoIcon'
import { AnimatedStreamingText } from '../components/AnimatedStreamingText'
import JumpToDatePopover from '../components/JumpToDatePopover'
import { ContactSnsTimelineDialog } from '../components/Sns/ContactSnsTimelineDialog'
import { type ContactSnsTimelineTarget, isSingleContactSession } from '../components/Sns/contactSnsTimeline'
import * as configService from '../services/config'
import {
  finishBackgroundTask,
  isBackgroundTaskCancelRequested,
  registerBackgroundTask,
  updateBackgroundTask
} from '../services/backgroundTaskMonitor'
import {
  emitOpenSingleExport,
  onExportSessionStatus,
  onSingleExportDialogStatus,
  requestExportSessionStatus
} from '../services/exportBridge'
import './ChatPage.scss'

// 系统消息类型常量
const SYSTEM_MESSAGE_TYPES = [
  10000,        // 系统消息
  266287972401, // 拍一拍
]

interface PendingInSessionSearchPayload {
  sessionId: string
  keyword: string
  firstMsgTime: number
  results: Message[]
}

type GlobalMsgSearchPhase = 'idle' | 'seed' | 'backfill' | 'done'
type GlobalMsgSearchResult = Message & { sessionId: string }

interface GlobalMsgPrefixCacheEntry {
  keyword: string
  matchedSessionIds: Set<string>
  completed: boolean
}

const GLOBAL_MSG_PER_SESSION_LIMIT = 10
const GLOBAL_MSG_SEED_LIMIT = 120
const GLOBAL_MSG_BACKFILL_CONCURRENCY = 3
const GLOBAL_MSG_LEGACY_CONCURRENCY = 6
const GLOBAL_MSG_SEARCH_CANCELED_ERROR = '__WEFLOW_GLOBAL_MSG_SEARCH_CANCELED__'
const GLOBAL_MSG_SHADOW_COMPARE_SAMPLE_RATE = 0.2
const GLOBAL_MSG_SHADOW_COMPARE_STORAGE_KEY = 'weflow.debug.searchShadowCompare'

function isGlobalMsgSearchCanceled(error: unknown): boolean {
  return String(error || '') === GLOBAL_MSG_SEARCH_CANCELED_ERROR
}

function normalizeGlobalMsgSearchSessionId(value: unknown): string | null {
  const sessionId = String(value || '').trim()
  if (!sessionId) return null
  return sessionId
}

function normalizeGlobalMsgSearchMessages(
  messages: Message[] | undefined,
  fallbackSessionId?: string
): GlobalMsgSearchResult[] {
  if (!Array.isArray(messages) || messages.length === 0) return []
  const dedup = new Set<string>()
  const normalized: GlobalMsgSearchResult[] = []
  const normalizedFallback = normalizeGlobalMsgSearchSessionId(fallbackSessionId)

  for (const message of messages) {
    const raw = message as Message & { sessionId?: string; _session_id?: string }
    const sessionId = normalizeGlobalMsgSearchSessionId(raw.sessionId || raw._session_id || normalizedFallback)
    if (!sessionId) continue
    const uniqueKey = raw.localId > 0
      ? `${sessionId}::local:${raw.localId}`
      : `${sessionId}::key:${raw.messageKey || ''}:${raw.createTime || 0}`
    if (dedup.has(uniqueKey)) continue
    dedup.add(uniqueKey)
    normalized.push({ ...message, sessionId })
  }

  return normalized
}

function buildGlobalMsgSearchSessionMap(messages: GlobalMsgSearchResult[]): Map<string, GlobalMsgSearchResult[]> {
  const map = new Map<string, GlobalMsgSearchResult[]>()
  for (const message of messages) {
    if (!message.sessionId) continue
    const list = map.get(message.sessionId) || []
    if (list.length >= GLOBAL_MSG_PER_SESSION_LIMIT) continue
    list.push(message)
    map.set(message.sessionId, list)
  }
  return map
}

function flattenGlobalMsgSearchSessionMap(map: Map<string, GlobalMsgSearchResult[]>): GlobalMsgSearchResult[] {
  const all: GlobalMsgSearchResult[] = []
  for (const list of map.values()) {
    if (list.length > 0) all.push(...list)
  }
  return sortMessagesByCreateTimeDesc(all)
}

function normalizeChatRecordText(value?: string): string {
  return String(value || '')
    .replace(/\u00a0/g, ' ')
    .replace(/\s+/g, ' ')
    .trim()
}

function hasRenderableChatRecordName(value?: string): boolean {
  return value !== undefined && value !== null && String(value).length > 0
}

function getChatRecordPreviewText(item: ChatRecordItem): string {
  const text = normalizeChatRecordText(item.datadesc) || normalizeChatRecordText(item.datatitle)
  if (item.datatype === 17) {
    return normalizeChatRecordText(item.chatRecordTitle) || normalizeChatRecordText(item.datatitle) || '聊天记录'
  }
  if (item.datatype === 2 || item.datatype === 3) return '[媒体消息]'
  if (item.datatype === 43) return '[视频]'
  if (item.datatype === 34) return '[语音]'
  if (item.datatype === 47) return '[表情]'
  return text || '[媒体消息]'
}

function buildChatRecordPreviewItems(recordList: ChatRecordItem[], maxVisible = 3): ChatRecordItem[] {
  if (recordList.length <= maxVisible) return recordList.slice(0, maxVisible)
  const firstNestedIndex = recordList.findIndex(item => item.datatype === 17)
  if (firstNestedIndex < 0 || firstNestedIndex < maxVisible) {
    return recordList.slice(0, maxVisible)
  }
  if (maxVisible <= 1) {
    return [recordList[firstNestedIndex]]
  }
  return [
    ...recordList.slice(0, maxVisible - 1),
    recordList[firstNestedIndex]
  ]
}

function composeGlobalMsgSearchResults(
  seedMap: Map<string, GlobalMsgSearchResult[]>,
  authoritativeMap: Map<string, GlobalMsgSearchResult[]>
): GlobalMsgSearchResult[] {
  const merged = new Map<string, GlobalMsgSearchResult[]>()
  for (const [sessionId, seedRows] of seedMap.entries()) {
    if (authoritativeMap.has(sessionId)) {
      merged.set(sessionId, authoritativeMap.get(sessionId) || [])
    } else {
      merged.set(sessionId, seedRows)
    }
  }
  for (const [sessionId, rows] of authoritativeMap.entries()) {
    if (!merged.has(sessionId)) merged.set(sessionId, rows)
  }
  return flattenGlobalMsgSearchSessionMap(merged)
}

function shouldRunGlobalMsgShadowCompareSample(): boolean {
  if (!import.meta.env.DEV) return false
  try {
    const forced = window.localStorage.getItem(GLOBAL_MSG_SHADOW_COMPARE_STORAGE_KEY)
    if (forced === '1') return true
    if (forced === '0') return false
  } catch {
    // ignore storage read failures
  }
  return Math.random() < GLOBAL_MSG_SHADOW_COMPARE_SAMPLE_RATE
}

function buildGlobalMsgSearchSessionLocalIds(results: GlobalMsgSearchResult[]): Record<string, number[]> {
  const grouped = new Map<string, number[]>()
  for (const row of results) {
    if (!row.sessionId || row.localId <= 0) continue
    const list = grouped.get(row.sessionId) || []
    list.push(row.localId)
    grouped.set(row.sessionId, list)
  }
  const output: Record<string, number[]> = {}
  for (const [sessionId, localIds] of grouped.entries()) {
    output[sessionId] = localIds
  }
  return output
}

function sortMessagesByCreateTimeDesc<T extends Pick<Message, 'createTime' | 'localId'>>(items: T[]): T[] {
  return [...items].sort((a, b) => {
    const timeDiff = (b.createTime || 0) - (a.createTime || 0)
    if (timeDiff !== 0) return timeDiff
    return (b.localId || 0) - (a.localId || 0)
  })
}

function normalizeSearchIdentityText(value?: string | null): string | undefined {
  const normalized = String(value || '').trim()
  if (!normalized) return undefined
  const lower = normalized.toLowerCase()
  if (normalized === '未知' || lower === 'unknown' || lower === 'null' || lower === 'undefined') {
    return undefined
  }
  if (lower.startsWith('unknown_sender_')) {
    return undefined
  }
  return normalized
}

function normalizeSearchAvatarUrl(value?: string | null): string | undefined {
  const normalized = String(value || '').trim()
  if (!normalized) return undefined
  const lower = normalized.toLowerCase()
  if (lower === 'null' || lower === 'undefined') {
    return undefined
  }
  return normalized
}

function resolveSessionDisplayName(
  displayName?: string | null,
  sessionId?: string | null
): string | undefined {
  const normalizedSessionId = String(sessionId || '').trim()
  const normalizedDisplayName = normalizeSearchIdentityText(displayName)
  if (!normalizedDisplayName) return undefined
  if (normalizedSessionId && normalizedDisplayName === normalizedSessionId) return undefined
  return normalizedDisplayName
}

function isFoldPlaceholderSession(sessionId?: string | null): boolean {
  return String(sessionId || '').toLowerCase().includes('placeholder_foldgroup')
}

function isWxidLikeSearchIdentity(value?: string | null): boolean {
  const normalized = String(value || '').trim().toLowerCase()
  if (!normalized) return false
  if (normalized.startsWith('wxid_')) return true
  const suffixMatch = normalized.match(/^(.+)_([a-z0-9]{4})$/i)
  return Boolean(suffixMatch && suffixMatch[1].startsWith('wxid_'))
}

function resolveSearchSenderDisplayName(
  displayName?: string | null,
  senderUsername?: string | null,
  sessionId?: string | null
): string | undefined {
  const normalizedDisplayName = normalizeSearchIdentityText(displayName)
  if (!normalizedDisplayName) return undefined

  const normalizedSenderUsername = normalizeSearchIdentityText(senderUsername)
  const normalizedSessionId = normalizeSearchIdentityText(sessionId)

  if (normalizedSessionId && normalizedDisplayName === normalizedSessionId) {
    return undefined
  }
  if (isWxidLikeSearchIdentity(normalizedDisplayName)) {
    return undefined
  }
  if (
    normalizedSenderUsername &&
    normalizedDisplayName === normalizedSenderUsername &&
    isWxidLikeSearchIdentity(normalizedSenderUsername)
  ) {
    return undefined
  }

  return normalizedDisplayName
}

function resolveSearchSenderUsernameFallback(value?: string | null): string | undefined {
  const normalized = normalizeSearchIdentityText(value)
  if (!normalized || isWxidLikeSearchIdentity(normalized)) {
    return undefined
  }
  return normalized
}

function buildSearchIdentityCandidates(value?: string | null): string[] {
  const normalized = normalizeSearchIdentityText(value)
  if (!normalized) return []
  const lower = normalized.toLowerCase()
  const candidates = new Set<string>([lower])
  if (lower.startsWith('wxid_')) {
    const match = lower.match(/^(wxid_[^_]+)/i)
    if (match?.[1]) {
      candidates.add(match[1])
    }
  }
  return [...candidates]
}

function isCurrentUserSearchIdentity(
  senderUsername?: string | null,
  myWxid?: string | null
): boolean {
  const senderCandidates = buildSearchIdentityCandidates(senderUsername)
  const selfCandidates = buildSearchIdentityCandidates(myWxid)
  if (senderCandidates.length === 0 || selfCandidates.length === 0) {
    return false
  }

  for (const sender of senderCandidates) {
    for (const self of selfCandidates) {
      if (sender === self) return true
      if (sender.startsWith(self + '_')) return true
      if (self.startsWith(sender + '_')) return true
    }
  }
  return false
}

interface XmlField {
  key: string;
  value: string;
  type: 'attr' | 'node';
  tagName?: string;
  path: string;
}

interface BatchImageDecryptCandidate {
  imageMd5?: string
  imageDatName?: string
  createTime?: number
}

// 尝试解析 XML 为可编辑字段
function parseXmlToFields(xml: string): XmlField[] {
  const fields: XmlField[] = []
  if (!xml || !xml.includes('<')) return []
  try {
    const parser = new DOMParser()
    // 包装一下确保是单一根节点
    const wrappedXml = xml.trim().startsWith('<?xml') ? xml : `<root>${xml}</root>`
    const doc = parser.parseFromString(wrappedXml, 'text/xml')
    const errorNode = doc.querySelector('parsererror')
    if (errorNode) return []

    const walk = (node: Node, path: string = '') => {
      if (node.nodeType === Node.ELEMENT_NODE) {
        const element = node as Element
        if (element.tagName === 'root') {
          node.childNodes.forEach((child, index) => walk(child, path))
          return
        }

        const currentPath = path ? `${path} > ${element.tagName}` : element.tagName

        for (let i = 0; i < element.attributes.length; i++) {
          const attr = element.attributes[i]
          fields.push({
            key: attr.name,
            value: attr.value,
            type: 'attr',
            tagName: element.tagName,
            path: `${currentPath}[@${attr.name}]`
          })
        }

        if (element.childNodes.length === 1 && element.childNodes[0].nodeType === Node.TEXT_NODE) {
          const text = element.textContent?.trim() || ''
          if (text) {
            fields.push({
              key: element.tagName,
              value: text,
              type: 'node',
              path: currentPath
            })
          }
        } else {
          node.childNodes.forEach((child, index) => walk(child, `${currentPath}[${index}]`))
        }
      }
    }
    doc.childNodes.forEach((node, index) => walk(node, ''))
  } catch (e) {
    console.warn('[XML Parse] Failed:', e)
  }
  return fields
}

// 将编辑后的字段同步回 XML
function updateXmlWithFields(xml: string, fields: XmlField[]): string {
  try {
    const parser = new DOMParser()
    const wrappedXml = xml.trim().startsWith('<?xml') ? xml : `<root>${xml}</root>`
    const doc = parser.parseFromString(wrappedXml, 'text/xml')
    const errorNode = doc.querySelector('parsererror')
    if (errorNode) return xml

    fields.forEach(f => {
      if (f.type === 'attr') {
        const elements = doc.getElementsByTagName(f.tagName!)
        if (elements.length > 0) {
          elements[0].setAttribute(f.key, f.value)
        }
      } else {
        const elements = doc.getElementsByTagName(f.key)
        if (elements.length > 0 && (elements[0].childNodes.length <= 1)) {
          elements[0].textContent = f.value
        }
      }
    })

    let result = new XMLSerializer().serializeToString(doc)
    if (!xml.trim().startsWith('<?xml')) {
      result = result.replace('<root>', '').replace('</root>', '').replace('<root/>', '')
    }
    return result
  } catch (e) {
    return xml
  }
}

// 判断是否为系统消息
function isSystemMessage(localType: number): boolean {
  return SYSTEM_MESSAGE_TYPES.includes(localType)
}

// 格式化文件大小
function formatFileSize(bytes: number): string {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i]
}

// 清理消息内容的辅助函数
function cleanMessageContent(content: string): string {
  if (!content) return ''
  return content.trim()
}

const CHAT_SESSION_LIST_CACHE_TTL_MS = 24 * 60 * 60 * 1000
const CHAT_SESSION_PREVIEW_CACHE_TTL_MS = 24 * 60 * 60 * 1000
const CHAT_SESSION_PREVIEW_LIMIT_PER_SESSION = 30
const CHAT_SESSION_PREVIEW_MAX_SESSIONS = 18
const CHAT_SESSION_WINDOW_CACHE_TTL_MS = 12 * 60 * 60 * 1000
const CHAT_SESSION_WINDOW_CACHE_MAX_SESSIONS = 30
const CHAT_SESSION_WINDOW_CACHE_MAX_MESSAGES = 300
const GROUP_MEMBERS_PANEL_CACHE_TTL_MS = 10 * 60 * 1000
const SESSION_CONTACT_PROFILE_RETRY_INTERVAL_MS = 15 * 1000
const SESSION_CONTACT_PROFILE_CACHE_TTL_MS = 3 * 24 * 60 * 60 * 1000

function buildChatSessionListCacheKey(scope: string): string {
  return `weflow.chat.sessions.v1::${scope || 'default'}`
}

function buildChatSessionPreviewCacheKey(scope: string): string {
  return `weflow.chat.preview.v1::${scope || 'default'}`
}

function normalizeChatCacheScope(dbPath: unknown, wxid: unknown): string {
  const db = String(dbPath || '').trim()
  const id = String(wxid || '').trim()
  if (!db && !id) return 'default'
  return `${db}::${id}`
}

function safeParseJson<T>(raw: string | null): T | null {
  if (!raw) return null
  try {
    return JSON.parse(raw) as T
  } catch {
    return null
  }
}

function formatYmdDateFromSeconds(timestamp?: number): string {
  if (!timestamp || !Number.isFinite(timestamp)) return '—'
  const d = new Date(timestamp * 1000)
  const y = d.getFullYear()
  const m = `${d.getMonth() + 1}`.padStart(2, '0')
  const day = `${d.getDate()}`.padStart(2, '0')
  return `${y}-${m}-${day}`
}

function formatYmdHmDateTime(timestamp?: number): string {
  if (!timestamp || !Number.isFinite(timestamp)) return '—'
  const d = new Date(timestamp)
  const y = d.getFullYear()
  const m = `${d.getMonth() + 1}`.padStart(2, '0')
  const day = `${d.getDate()}`.padStart(2, '0')
  const h = `${d.getHours()}`.padStart(2, '0')
  const min = `${d.getMinutes()}`.padStart(2, '0')
  return `${y}-${m}-${day} ${h}:${min}`
}

interface ChatPageProps {
  standaloneSessionWindow?: boolean
  initialSessionId?: string | null
  standaloneSource?: string | null
  standaloneInitialDisplayName?: string | null
  standaloneInitialAvatarUrl?: string | null
  standaloneInitialContactType?: string | null
}

type StandaloneLoadStage = 'idle' | 'connecting' | 'loading' | 'ready'

interface SessionDetail {
  wxid: string
  displayName: string
  remark?: string
  nickName?: string
  alias?: string
  avatarUrl?: string
  messageCount: number
  voiceMessages?: number
  imageMessages?: number
  videoMessages?: number
  emojiMessages?: number
  transferMessages?: number
  redPacketMessages?: number
  callMessages?: number
  privateMutualGroups?: number
  groupMemberCount?: number
  groupMyMessages?: number
  groupActiveSpeakers?: number
  groupMutualFriends?: number
  relationStatsLoaded?: boolean
  statsUpdatedAt?: number
  statsStale?: boolean
  firstMessageTime?: number
  latestMessageTime?: number
  messageTables: { dbName: string; tableName: string; count: number }[]
}

interface SessionExportMetric {
  totalMessages: number
  voiceMessages: number
  imageMessages: number
  videoMessages: number
  emojiMessages: number
  transferMessages: number
  redPacketMessages: number
  callMessages: number
  firstTimestamp?: number
  lastTimestamp?: number
  privateMutualGroups?: number
  groupMemberCount?: number
  groupMyMessages?: number
  groupActiveSpeakers?: number
  groupMutualFriends?: number
}

interface SessionExportCacheMeta {
  updatedAt: number
  stale: boolean
  includeRelations: boolean
  source: 'memory' | 'disk' | 'fresh'
}

interface SessionContactProfile {
  displayName?: string
  avatarUrl?: string
  alias?: string
  updatedAt: number
}

type GroupMessageCountStatus = 'loading' | 'ready' | 'failed'

interface GroupPanelMember {
  username: string
  displayName: string
  avatarUrl?: string
  nickname?: string
  alias?: string
  remark?: string
  groupNickname?: string
  isOwner?: boolean
  isFriend: boolean
  messageCount: number
  messageCountStatus: GroupMessageCountStatus
}

interface SessionListCachePayload {
  updatedAt: number
  sessions: ChatSession[]
}

interface SessionPreviewCacheEntry {
  updatedAt: number
  messages: Message[]
}

interface SessionPreviewCachePayload {
  updatedAt: number
  entries: Record<string, SessionPreviewCacheEntry>
}

interface GroupMembersPanelCacheEntry {
  updatedAt: number
  members: GroupPanelMember[]
  includeMessageCounts: boolean
}

interface SessionWindowCacheEntry {
  updatedAt: number
  messages: Message[]
  currentOffset: number
  hasMoreMessages: boolean
  hasMoreLater: boolean
  jumpStartTime: number
  jumpEndTime: number
}

interface LoadMessagesOptions {
  preferLatestPath?: boolean
  deferGroupSenderWarmup?: boolean
  forceInitialLimit?: number
  switchRequestSeq?: number
  inSessionJumpRequestSeq?: number
}

// 全局头像加载队列管理器已移至 src/utils/AvatarLoadQueue.ts
import { avatarLoadQueue } from '../utils/AvatarLoadQueue'
import { Avatar } from '../components/Avatar'

// 头像组件 - 支持骨架屏加载和懒加载（优化：限制并发，使用 memo 避免不必要的重渲染）
// 高亮搜索关键词组件
const HighlightText = React.memo(({ text, keyword }: { text: string; keyword: string }) => {
  if (!keyword) return <>{text}</>

  const lowerText = text.toLowerCase()
  const lowerKeyword = keyword.toLowerCase()
  const matchIndex = lowerText.indexOf(lowerKeyword)

  if (matchIndex === -1) return <>{text}</>

  // 如果匹配位置在后面且文本过长，截断前面部分
  const maxLength = 50
  let displayText = text

  if (text.length > maxLength && matchIndex > 20) {
    const start = Math.max(0, matchIndex - 15)
    displayText = '...' + text.slice(start)
  }

  const parts = displayText.split(new RegExp(`(${keyword})`, 'gi'))
  return (
    <>
      {parts.map((part, i) =>
        part.toLowerCase() === lowerKeyword ?
          <span key={i} className="highlight">{part}</span> : part
      )}
    </>
  )
})

const HighlightTextNoTruncate = React.memo(({ text, keyword }: { text: string; keyword: string }) => {
  if (!keyword) return <>{text}</>

  const lowerText = text.toLowerCase()
  const lowerKeyword = keyword.toLowerCase()
  const matchIndex = lowerText.indexOf(lowerKeyword)

  if (matchIndex === -1) return <>{text}</>

  const escapedKeyword = keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
  const matchEnd = matchIndex + keyword.length
  const maxDisplayLength = 25

  // 如果匹配位置不在开头，或文本过长，则居中显示
  if (matchIndex > 5 || text.length > maxDisplayLength) {
    const start = Math.max(0, matchIndex - 8)
    const end = Math.min(text.length, matchEnd + 15)
    const prefix = start > 0 ? '...' : ''
    const suffix = end < text.length ? '...' : ''
    const middleText = text.slice(start, end)

    const parts = middleText.split(new RegExp(`(${escapedKeyword})`, 'gi'))
    return (
      <>
        {prefix}
        {parts.map((part, i) =>
          part.toLowerCase() === lowerKeyword ?
            <span key={i} className="highlight">{part}</span> : part
        )}
        {suffix}
      </>
    )
  }

  const parts = text.split(new RegExp(`(${escapedKeyword})`, 'gi'))
  return (
    <>
      {parts.map((part, i) =>
        part.toLowerCase() === lowerKeyword ?
          <span key={i} className="highlight">{part}</span> : part
      )}
    </>
  )
})

// 会话项组件（使用 memo 优化，避免不必要的重渲染）
const SessionItem = React.memo(function SessionItem({
  session,
  isActive,
  onSelect,
  formatTime,
  searchKeyword
}: {
  session: ChatSession
  isActive: boolean
  onSelect: (session: ChatSession) => void
  formatTime: (timestamp: number) => string
  searchKeyword?: string
}) {
  const timeText = useMemo(() =>
    formatTime(session.lastTimestamp || session.sortTimestamp),
    [formatTime, session.lastTimestamp, session.sortTimestamp]
  )

  const isFoldEntry = session.username.toLowerCase().includes('placeholder_foldgroup')

  // 折叠入口：专属名称和图标
  if (isFoldEntry) {
    return (
      <div
        className={`session-item fold-entry ${isActive ? 'active' : ''}`}
        onClick={() => onSelect(session)}
      >
        <div className="fold-entry-avatar">
          <MessageSquare size={22} />
        </div>
        <div className="session-info">
          <div className="session-top">
            <span className="session-name">折叠的聊天</span>
            <span className="session-time">{timeText}</span>
          </div>
          <div className="session-bottom">
            <span className="session-summary">{session.summary || '暂无消息'}</span>
          </div>
        </div>
      </div>
    )
  }

  // 根据匹配字段显示不同的 summary
  const summaryContent = useMemo(() => {
    if (session.matchedField === 'wxid') {
      return <span className="session-summary">wxid：<HighlightTextNoTruncate text={session.username} keyword={searchKeyword || ''} /></span>
    } else if (session.matchedField === 'alias' && session.alias) {
      return <span className="session-summary">微信号：<HighlightTextNoTruncate text={session.alias} keyword={searchKeyword || ''} /></span>
    }
    return <span className="session-summary">{session.summary || '暂无消息'}</span>
  }, [session.matchedField, session.username, session.alias, session.summary, searchKeyword])

  return (
    <div
      className={`session-item ${isActive ? 'active' : ''} ${session.isMuted ? 'muted' : ''}`}
      onClick={() => onSelect(session)}
    >
      <Avatar
        src={session.avatarUrl}
        name={session.displayName || session.username}
        size={48}
        className={session.username.includes('@chatroom') ? 'group' : ''}
      />
      <div className="session-info">
        <div className="session-top">
          <span className="session-name">
            {(() => {
              const shouldHighlight = (session.matchedField as any) === 'name' && searchKeyword
              return shouldHighlight ? (
                <HighlightText text={session.displayName || session.username} keyword={searchKeyword} />
              ) : (
                session.displayName || session.username
              )
            })()}
          </span>
          <span className="session-time">{timeText}</span>
        </div>
        <div className="session-bottom">
          {summaryContent}
          <div className="session-badges">
            {session.isMuted && <BellOff size={12} className="mute-icon" />}
            {session.unreadCount > 0 && (
              <span className={`unread-badge ${session.isMuted ? 'muted' : ''}`}>
                {session.unreadCount > 99 ? '99+' : session.unreadCount}
              </span>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}, (prevProps, nextProps) => {
  return (
    prevProps.session.username === nextProps.session.username &&
    prevProps.session.displayName === nextProps.session.displayName &&
    prevProps.session.avatarUrl === nextProps.session.avatarUrl &&
    prevProps.session.summary === nextProps.session.summary &&
    prevProps.session.matchedField === nextProps.session.matchedField &&
    prevProps.session.alias === nextProps.session.alias &&
    prevProps.session.unreadCount === nextProps.session.unreadCount &&
    prevProps.session.lastTimestamp === nextProps.session.lastTimestamp &&
    prevProps.session.sortTimestamp === nextProps.session.sortTimestamp &&
    prevProps.session.isMuted === nextProps.session.isMuted &&
    prevProps.isActive === nextProps.isActive &&
    prevProps.searchKeyword === nextProps.searchKeyword
  )
})



function ChatPage(props: ChatPageProps) {
  const {
    standaloneSessionWindow = false,
    initialSessionId = null,
    standaloneSource = null,
    standaloneInitialDisplayName = null,
    standaloneInitialAvatarUrl = null,
    standaloneInitialContactType = null
  } = props
  const normalizedInitialSessionId = useMemo(() => String(initialSessionId || '').trim(), [initialSessionId])
  const normalizedStandaloneSource = useMemo(() => String(standaloneSource || '').trim().toLowerCase(), [standaloneSource])
  const normalizedStandaloneInitialDisplayName = useMemo(() => String(standaloneInitialDisplayName || '').trim(), [standaloneInitialDisplayName])
  const normalizedStandaloneInitialAvatarUrl = useMemo(() => String(standaloneInitialAvatarUrl || '').trim(), [standaloneInitialAvatarUrl])
  const normalizedStandaloneInitialContactType = useMemo(() => String(standaloneInitialContactType || '').trim().toLowerCase(), [standaloneInitialContactType])
  const shouldHideStandaloneDetailButton = standaloneSessionWindow && normalizedStandaloneSource === 'export'
  const navigate = useNavigate()

  const {
    isConnected,
    isConnecting,
    connectionError,
    sessions,
    currentSessionId,
    isLoadingSessions,
    messages,
    isLoadingMessages,
    isLoadingMore,
    hasMoreMessages,
    searchKeyword,
    setConnected,
    setConnecting,
    setConnectionError,
    setSessions,
    setCurrentSession,
    setLoadingSessions,
    setMessages,
    appendMessages,
    setLoadingMessages,
    setLoadingMore,
    setHasMoreMessages,
    hasMoreLater,
    setHasMoreLater,
    setSearchKeyword
  } = useChatStore(useShallow((state) => ({
    isConnected: state.isConnected,
    isConnecting: state.isConnecting,
    connectionError: state.connectionError,
    sessions: state.sessions,
    currentSessionId: state.currentSessionId,
    isLoadingSessions: state.isLoadingSessions,
    messages: state.messages,
    isLoadingMessages: state.isLoadingMessages,
    isLoadingMore: state.isLoadingMore,
    hasMoreMessages: state.hasMoreMessages,
    searchKeyword: state.searchKeyword,
    setConnected: state.setConnected,
    setConnecting: state.setConnecting,
    setConnectionError: state.setConnectionError,
    setSessions: state.setSessions,
    setCurrentSession: state.setCurrentSession,
    setLoadingSessions: state.setLoadingSessions,
    setMessages: state.setMessages,
    appendMessages: state.appendMessages,
    setLoadingMessages: state.setLoadingMessages,
    setLoadingMore: state.setLoadingMore,
    setHasMoreMessages: state.setHasMoreMessages,
    hasMoreLater: state.hasMoreLater,
    setHasMoreLater: state.setHasMoreLater,
    setSearchKeyword: state.setSearchKeyword
  })))

  const messageListRef = useRef<HTMLDivElement>(null)
  const [messageListScrollParent, setMessageListScrollParent] = useState<HTMLDivElement | null>(null)
  const messageVirtuosoRef = useRef<VirtuosoHandle | null>(null)
  const visibleMessageRangeRef = useRef<{ startIndex: number; endIndex: number }>({ startIndex: 0, endIndex: 0 })
  const topRangeLoadLockRef = useRef(false)
  const bottomRangeLoadLockRef = useRef(false)
  const suppressAutoLoadLaterRef = useRef(false)
  const searchInputRef = useRef<HTMLInputElement>(null)
  const sidebarRef = useRef<HTMLDivElement>(null)
  const handleMessageListScrollParentRef = useCallback((node: HTMLDivElement | null) => {
    messageListRef.current = node
    setMessageListScrollParent(node)
  }, [])

  const getMessageKey = useCallback((msg: Message): string => {
    if (msg.messageKey) return msg.messageKey
    return `fallback:${msg.serverId || 0}:${msg.createTime}:${msg.sortSeq || 0}:${msg.localId || 0}:${msg.senderUsername || ''}:${msg.localType || 0}`
  }, [])
  const initialRevealTimerRef = useRef<number | null>(null)
  const sessionListRef = useRef<HTMLDivElement>(null)
  const jumpCalendarWrapRef = useRef<HTMLDivElement>(null)
  const jumpPopoverPortalRef = useRef<HTMLDivElement>(null)
  const [currentOffset, setCurrentOffset] = useState(0)
  const [jumpStartTime, setJumpStartTime] = useState(0)
  const [jumpEndTime, setJumpEndTime] = useState(0)
  const [showJumpPopover, setShowJumpPopover] = useState(false)
  const [jumpPopoverDate, setJumpPopoverDate] = useState<Date>(new Date())
  const [jumpPopoverPosition, setJumpPopoverPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 })
  const isDateJumpRef = useRef(false)
  const [messageDates, setMessageDates] = useState<Set<string>>(new Set())
  const [hasLoadedMessageDates, setHasLoadedMessageDates] = useState(false)
  const [loadingDates, setLoadingDates] = useState(false)
  const messageDatesCache = useRef<Map<string, Set<string>>>(new Map())
  const [messageDateCounts, setMessageDateCounts] = useState<Record<string, number>>({})
  const [loadingDateCounts, setLoadingDateCounts] = useState(false)
  const messageDateCountsCache = useRef<Map<string, Record<string, number>>>(new Map())
  const [myAvatarUrl, setMyAvatarUrl] = useState<string | undefined>(undefined)
  const [myWxid, setMyWxid] = useState<string | undefined>(undefined)
  const [showScrollToBottom, setShowScrollToBottom] = useState(false)
  const [sidebarWidth, setSidebarWidth] = useState(260)
  const [isResizing, setIsResizing] = useState(false)
  const [showDetailPanel, setShowDetailPanel] = useState(false)
  const [showGroupMembersPanel, setShowGroupMembersPanel] = useState(false)
  const [sessionDetail, setSessionDetail] = useState<SessionDetail | null>(null)
  const [isLoadingDetail, setIsLoadingDetail] = useState(false)
  const [isLoadingDetailExtra, setIsLoadingDetailExtra] = useState(false)
  const [isRefreshingDetailStats, setIsRefreshingDetailStats] = useState(false)
  const [isLoadingRelationStats, setIsLoadingRelationStats] = useState(false)
  const [groupPanelMembers, setGroupPanelMembers] = useState<GroupPanelMember[]>([])
  const [isLoadingGroupMembers, setIsLoadingGroupMembers] = useState(false)
  const [groupMembersError, setGroupMembersError] = useState<string | null>(null)
  const [groupMembersLoadingHint, setGroupMembersLoadingHint] = useState('')
  const [isRefreshingGroupMembers, setIsRefreshingGroupMembers] = useState(false)
  const [groupMemberSearchKeyword, setGroupMemberSearchKeyword] = useState('')
  const [copiedField, setCopiedField] = useState<string | null>(null)
  const [highlightedMessageKeys, setHighlightedMessageKeys] = useState<string[]>([])
  const [isRefreshingSessions, setIsRefreshingSessions] = useState(false)
  const [foldedView, setFoldedView] = useState(false) // 是否在"折叠的群聊"视图
  const [hasInitialMessages, setHasInitialMessages] = useState(false)
  const [isSessionSwitching, setIsSessionSwitching] = useState(false)
  const [noMessageTable, setNoMessageTable] = useState(false)
  const [fallbackDisplayName, setFallbackDisplayName] = useState<string | null>(normalizedStandaloneInitialDisplayName || null)
  const [fallbackAvatarUrl, setFallbackAvatarUrl] = useState<string | null>(normalizedStandaloneInitialAvatarUrl || null)
  const [standaloneLoadStage, setStandaloneLoadStage] = useState<StandaloneLoadStage>(
    standaloneSessionWindow && normalizedInitialSessionId ? 'connecting' : 'idle'
  )
  const [standaloneInitialLoadRequested, setStandaloneInitialLoadRequested] = useState(false)
  const [showVoiceTranscribeDialog, setShowVoiceTranscribeDialog] = useState(false)
  const [autoTranscribeVoiceEnabled, setAutoTranscribeVoiceEnabled] = useState(false)
  const [pendingVoiceTranscriptRequest, setPendingVoiceTranscriptRequest] = useState<{ sessionId: string; messageId: string } | null>(null)
  const [inProgressExportSessionIds, setInProgressExportSessionIds] = useState<Set<string>>(new Set())
  const [isPreparingExportDialog, setIsPreparingExportDialog] = useState(false)
  const [chatSnsTimelineTarget, setChatSnsTimelineTarget] = useState<ContactSnsTimelineTarget | null>(null)
  const [exportPrepareHint, setExportPrepareHint] = useState('')

  // 消息右键菜单
  const [contextMenu, setContextMenu] = useState<{ x: number, y: number, message: Message } | null>(null)
  const [showMessageInfo, setShowMessageInfo] = useState<Message | null>(null)
  const [editingMessage, setEditingMessage] = useState<{ message: Message, content: string } | null>(null)

  // 多选模式
  const [isSelectionMode, setIsSelectionMode] = useState(false)
  const [selectedMessages, setSelectedMessages] = useState<Set<string>>(new Set())

  // 编辑消息额外状态
  const [editMode, setEditMode] = useState<'raw' | 'fields'>('raw')
  const [tempFields, setTempFields] = useState<XmlField[]>([])

  // 批量语音转文字相关状态（进度/结果 由全局 store 管理）
  const {
    isBatchTranscribing,
    runningBatchVoiceTaskType,
    batchTranscribeProgress,
    startTranscribe,
    updateProgress,
    finishTranscribe,
    setShowBatchProgress
  } = useBatchTranscribeStore(useShallow((state) => ({
    isBatchTranscribing: state.isBatchTranscribing,
    runningBatchVoiceTaskType: state.taskType,
    batchTranscribeProgress: state.progress,
    startTranscribe: state.startTranscribe,
    updateProgress: state.updateProgress,
    finishTranscribe: state.finishTranscribe,
    setShowBatchProgress: state.setShowToast
  })))
  const {
    isBatchDecrypting,
    batchDecryptProgress,
    startDecrypt,
    updateDecryptProgress,
    finishDecrypt,
    setShowBatchDecryptToast
  } = useBatchImageDecryptStore(useShallow((state) => ({
    isBatchDecrypting: state.isBatchDecrypting,
    batchDecryptProgress: state.progress,
    startDecrypt: state.startDecrypt,
    updateDecryptProgress: state.updateProgress,
    finishDecrypt: state.finishDecrypt,
    setShowBatchDecryptToast: state.setShowToast
  })))
  const [showBatchConfirm, setShowBatchConfirm] = useState(false)
  const [batchVoiceCount, setBatchVoiceCount] = useState(0)
  const [batchVoiceMessages, setBatchVoiceMessages] = useState<Message[] | null>(null)
  const [batchVoiceDates, setBatchVoiceDates] = useState<string[]>([])
  const [batchSelectedDates, setBatchSelectedDates] = useState<Set<string>>(new Set())
  const [batchVoiceTaskType, setBatchVoiceTaskType] = useState<BatchVoiceTaskType>('transcribe')
  const [showBatchDecryptConfirm, setShowBatchDecryptConfirm] = useState(false)
  const [batchImageMessages, setBatchImageMessages] = useState<BatchImageDecryptCandidate[] | null>(null)
  const [batchImageDates, setBatchImageDates] = useState<string[]>([])
  const [batchImageSelectedDates, setBatchImageSelectedDates] = useState<Set<string>>(new Set())
  const [batchDecryptConcurrency, setBatchDecryptConcurrency] = useState(6)
  const [showConcurrencyDropdown, setShowConcurrencyDropdown] = useState(false)

  // 批量删除相关状态
  const [isDeleting, setIsDeleting] = useState(false)
  const [deleteProgress, setDeleteProgress] = useState({ current: 0, total: 0 })
  const [cancelDeleteRequested, setCancelDeleteRequested] = useState(false)
  // 会话内搜索
  const [showInSessionSearch, setShowInSessionSearch] = useState(false)
  const [inSessionQuery, setInSessionQuery] = useState('')
  const [inSessionResults, setInSessionResults] = useState<Message[]>([])
  const [inSessionSearching, setInSessionSearching] = useState(false)
  const [inSessionEnriching, setInSessionEnriching] = useState(false)
  const [inSessionSearchError, setInSessionSearchError] = useState<string | null>(null)
  const inSessionSearchRef = useRef<HTMLInputElement>(null)
  const inSessionResultJumpTimerRef = useRef<number | null>(null)
  const inSessionResultJumpRequestSeqRef = useRef(0)
  // 全局消息搜索
  const [showGlobalMsgSearch, setShowGlobalMsgSearch] = useState(false)
  const [globalMsgQuery, setGlobalMsgQuery] = useState('')
  const [globalMsgResults, setGlobalMsgResults] = useState<GlobalMsgSearchResult[]>([])
  const [globalMsgSearching, setGlobalMsgSearching] = useState(false)
  const [globalMsgSearchPhase, setGlobalMsgSearchPhase] = useState<GlobalMsgSearchPhase>('idle')
  const [globalMsgIsBackfilling, setGlobalMsgIsBackfilling] = useState(false)
  const [globalMsgAuthoritativeSessionCount, setGlobalMsgAuthoritativeSessionCount] = useState(0)
  const [globalMsgSearchError, setGlobalMsgSearchError] = useState<string | null>(null)
  const pendingInSessionSearchRef = useRef<PendingInSessionSearchPayload | null>(null)
  const pendingGlobalMsgSearchReplayRef = useRef<string | null>(null)
  const globalMsgPrefixCacheRef = useRef<GlobalMsgPrefixCacheEntry | null>(null)

  // 自定义删除确认对话框
  const [deleteConfirm, setDeleteConfirm] = useState<{
    show: boolean;
    mode: 'single' | 'batch';
    message?: Message;
    count?: number;
  }>({ show: false, mode: 'single' })

  // 联系人信息加载控制
  const isEnrichingRef = useRef(false)
  const enrichCancelledRef = useRef(false)
  const isScrollingRef = useRef(false)
  const sessionScrollTimeoutRef = useRef<number | null>(null)
  const pendingSessionContactEnrichRef = useRef<Set<string>>(new Set())
  const sessionContactEnrichAttemptAtRef = useRef<Map<string, number>>(new Map())
  const sessionContactProfileCacheRef = useRef<Map<string, SessionContactProfile>>(new Map())


  const highlightedMessageSet = useMemo(() => new Set(highlightedMessageKeys), [highlightedMessageKeys])
  const messageKeySetRef = useRef<Set<string>>(new Set())
  const lastMessageTimeRef = useRef(0)
  const isMessageListAtBottomRef = useRef(true)
  const lastObservedMessageCountRef = useRef(0)
  const lastVisibleSenderWarmupAtRef = useRef(0)
  const sessionMapRef = useRef<Map<string, ChatSession>>(new Map())
  const sessionsRef = useRef<ChatSession[]>([])
  const currentSessionRef = useRef<string | null>(null)
  const pendingSessionLoadRef = useRef<string | null>(null)
  const sessionSwitchRequestSeqRef = useRef(0)
  const initialLoadRequestedSessionRef = useRef<string | null>(null)
  const prevSessionRef = useRef<string | null>(null)
  const isConnectedRef = useRef(false)
  const isRefreshingRef = useRef(false)
  const searchKeywordRef = useRef('')
  const preloadImageKeysRef = useRef<Set<string>>(new Set())
  const lastPreloadSessionRef = useRef<string | null>(null)
  const detailRequestSeqRef = useRef(0)
  const groupMembersRequestSeqRef = useRef(0)
  const groupMembersPanelCacheRef = useRef<Map<string, GroupMembersPanelCacheEntry>>(new Map())
  const hasInitializedGroupMembersRef = useRef(false)
  const chatCacheScopeRef = useRef('default')
  const previewCacheRef = useRef<Record<string, SessionPreviewCacheEntry>>({})
  const sessionWindowCacheRef = useRef<Map<string, SessionWindowCacheEntry>>(new Map())
  const previewPersistTimerRef = useRef<number | null>(null)
  const sessionListPersistTimerRef = useRef<number | null>(null)
  const scrollBottomButtonArmTimerRef = useRef<number | null>(null)
  const suppressScrollToBottomButtonRef = useRef(false)
  const pendingExportRequestIdRef = useRef<string | null>(null)
  const exportPrepareLongWaitTimerRef = useRef<number | null>(null)
  const jumpDatesRequestSeqRef = useRef(0)
  const jumpDateCountsRequestSeqRef = useRef(0)

  const suppressScrollToBottomButton = useCallback((delayMs = 180) => {
    suppressScrollToBottomButtonRef.current = true
    if (scrollBottomButtonArmTimerRef.current !== null) {
      window.clearTimeout(scrollBottomButtonArmTimerRef.current)
      scrollBottomButtonArmTimerRef.current = null
    }
    scrollBottomButtonArmTimerRef.current = window.setTimeout(() => {
      suppressScrollToBottomButtonRef.current = false
      scrollBottomButtonArmTimerRef.current = null
    }, delayMs)
  }, [])

  const isGroupChatSession = useCallback((username: string) => {
    return username.includes('@chatroom')
  }, [])

  const mergeSessionContactPresentation = useCallback((session: ChatSession, previousSession?: ChatSession): ChatSession => {
    const username = String(session.username || '').trim()
    if (!username || isFoldPlaceholderSession(username)) {
      return session
    }

    const now = Date.now()
    const cacheMap = sessionContactProfileCacheRef.current
    const cachedProfile = cacheMap.get(username)
    if (cachedProfile && now - cachedProfile.updatedAt > SESSION_CONTACT_PROFILE_CACHE_TTL_MS) {
      cacheMap.delete(username)
    }
    const profile = cacheMap.get(username)

    const sessionDisplayName = resolveSessionDisplayName(session.displayName, username)
    const previousDisplayName = resolveSessionDisplayName(previousSession?.displayName, username)
    const profileDisplayName = resolveSessionDisplayName(profile?.displayName, username)
    const resolvedDisplayName = sessionDisplayName || previousDisplayName || profileDisplayName || session.displayName || username

    const sessionAvatarUrl = normalizeSearchAvatarUrl(session.avatarUrl)
    const previousAvatarUrl = normalizeSearchAvatarUrl(previousSession?.avatarUrl)
    const profileAvatarUrl = normalizeSearchAvatarUrl(profile?.avatarUrl)
    const resolvedAvatarUrl = sessionAvatarUrl || previousAvatarUrl || profileAvatarUrl

    const sessionAlias = normalizeSearchIdentityText(session.alias)
    const previousAlias = normalizeSearchIdentityText(previousSession?.alias)
    const profileAlias = normalizeSearchIdentityText(profile?.alias)
    const resolvedAlias = sessionAlias || previousAlias || profileAlias

    if (
      resolvedDisplayName === session.displayName &&
      resolvedAvatarUrl === session.avatarUrl &&
      resolvedAlias === session.alias
    ) {
      return session
    }

    return {
      ...session,
      displayName: resolvedDisplayName,
      avatarUrl: resolvedAvatarUrl,
      alias: resolvedAlias
    }
  }, [])

  const clearExportPrepareState = useCallback(() => {
    pendingExportRequestIdRef.current = null
    setIsPreparingExportDialog(false)
    setExportPrepareHint('')
    if (exportPrepareLongWaitTimerRef.current) {
      window.clearTimeout(exportPrepareLongWaitTimerRef.current)
      exportPrepareLongWaitTimerRef.current = null
    }
  }, [])

  const resolveCurrentViewDate = useCallback(() => {
    if (jumpStartTime > 0) {
      return new Date(jumpStartTime * 1000)
    }
    const fallbackMessage = messages[messages.length - 1] || messages[0]
    const rawTimestamp = Number(fallbackMessage?.createTime || 0)
    if (Number.isFinite(rawTimestamp) && rawTimestamp > 0) {
      return new Date(rawTimestamp > 10000000000 ? rawTimestamp : rawTimestamp * 1000)
    }
    return new Date()
  }, [jumpStartTime, messages])

  const loadJumpCalendarData = useCallback(async (sessionId: string) => {
    const normalizedSessionId = String(sessionId || '').trim()
    if (!normalizedSessionId) return

    const cachedDates = messageDatesCache.current.get(normalizedSessionId)
    if (cachedDates) {
      setMessageDates(new Set(cachedDates))
      setHasLoadedMessageDates(true)
      setLoadingDates(false)
    } else {
      setLoadingDates(true)
      setHasLoadedMessageDates(false)
      setMessageDates(new Set())
      const requestSeq = jumpDatesRequestSeqRef.current + 1
      jumpDatesRequestSeqRef.current = requestSeq
      try {
        const result = await window.electronAPI.chat.getMessageDates(normalizedSessionId)
        if (requestSeq !== jumpDatesRequestSeqRef.current || currentSessionRef.current !== normalizedSessionId) return
        if (result?.success && Array.isArray(result.dates)) {
          const dateSet = new Set<string>(result.dates)
          messageDatesCache.current.set(normalizedSessionId, dateSet)
          setMessageDates(new Set(dateSet))
          setHasLoadedMessageDates(true)
        }
      } catch (error) {
        console.error('获取消息日期失败:', error)
      } finally {
        if (requestSeq === jumpDatesRequestSeqRef.current && currentSessionRef.current === normalizedSessionId) {
          setLoadingDates(false)
        }
      }
    }

    const cachedCounts = messageDateCountsCache.current.get(normalizedSessionId)
    if (cachedCounts) {
      setMessageDateCounts({ ...cachedCounts })
      setLoadingDateCounts(false)
      return
    }

    setLoadingDateCounts(true)
    setMessageDateCounts({})
    const requestSeq = jumpDateCountsRequestSeqRef.current + 1
    jumpDateCountsRequestSeqRef.current = requestSeq
    try {
      const result = await window.electronAPI.chat.getMessageDateCounts(normalizedSessionId)
      if (requestSeq !== jumpDateCountsRequestSeqRef.current || currentSessionRef.current !== normalizedSessionId) return
      if (result?.success && result.counts) {
        const normalizedCounts: Record<string, number> = {}
        Object.entries(result.counts).forEach(([date, value]) => {
          const count = Number(value)
          if (!date || !Number.isFinite(count) || count <= 0) return
          normalizedCounts[date] = count
        })
        messageDateCountsCache.current.set(normalizedSessionId, normalizedCounts)
        setMessageDateCounts(normalizedCounts)
      }
    } catch (error) {
      console.error('获取每日消息数失败:', error)
    } finally {
      if (requestSeq === jumpDateCountsRequestSeqRef.current && currentSessionRef.current === normalizedSessionId) {
        setLoadingDateCounts(false)
      }
    }
  }, [])

  const updateJumpPopoverPosition = useCallback(() => {
    const anchor = jumpCalendarWrapRef.current
    if (!anchor) return

    const popoverWidth = 312
    const viewportGap = 8
    const anchorRect = anchor.getBoundingClientRect()

    let left = anchorRect.right - popoverWidth
    left = Math.max(viewportGap, Math.min(left, window.innerWidth - popoverWidth - viewportGap))

    const portalHeight = jumpPopoverPortalRef.current?.offsetHeight || 0
    const belowTop = anchorRect.bottom + 10
    let top = belowTop
    if (portalHeight > 0 && belowTop + portalHeight > window.innerHeight - viewportGap) {
      top = Math.max(viewportGap, anchorRect.top - portalHeight - 10)
    }

    setJumpPopoverPosition(prev => {
      if (prev.top === top && prev.left === left) return prev
      return { top, left }
    })
  }, [])

  const handleToggleJumpPopover = useCallback(() => {
    if (!currentSessionId) return
    if (showJumpPopover) {
      setShowJumpPopover(false)
      return
    }
    setJumpPopoverDate(resolveCurrentViewDate())
    updateJumpPopoverPosition()
    setShowJumpPopover(true)
    requestAnimationFrame(() => updateJumpPopoverPosition())
    void loadJumpCalendarData(currentSessionId)
  }, [currentSessionId, loadJumpCalendarData, resolveCurrentViewDate, showJumpPopover, updateJumpPopoverPosition])

  useEffect(() => {
    const unsubscribe = onExportSessionStatus((payload) => {
      const ids = Array.isArray(payload?.inProgressSessionIds)
        ? payload.inProgressSessionIds
          .filter((id): id is string => typeof id === 'string')
          .map(id => id.trim())
          .filter(Boolean)
        : []
      setInProgressExportSessionIds(new Set(ids))
    })

    requestExportSessionStatus()
    const timer = window.setTimeout(() => {
      requestExportSessionStatus()
    }, 0)
    return () => {
      window.clearTimeout(timer)
      unsubscribe()
    }
  }, [])

  useEffect(() => {
    const unsubscribe = onSingleExportDialogStatus((payload) => {
      const requestId = typeof payload?.requestId === 'string' ? payload.requestId.trim() : ''
      if (!requestId || requestId !== pendingExportRequestIdRef.current) return

      if (payload.status === 'initializing') {
        setExportPrepareHint('正在准备导出模块（首次会稍慢，通常 1-3 秒）')
        if (exportPrepareLongWaitTimerRef.current) {
          window.clearTimeout(exportPrepareLongWaitTimerRef.current)
        }
        exportPrepareLongWaitTimerRef.current = window.setTimeout(() => {
          if (pendingExportRequestIdRef.current !== requestId) return
          setExportPrepareHint('仍在准备导出模块，请稍候...')
        }, 8000)
        return
      }

      if (payload.status === 'opened') {
        clearExportPrepareState()
        return
      }

      if (payload.status === 'failed') {
        const message = (typeof payload.message === 'string' && payload.message.trim())
          ? payload.message.trim()
          : '导出模块初始化失败，请重试'
        clearExportPrepareState()
        window.alert(message)
      }
    })

    return () => {
      unsubscribe()
      if (exportPrepareLongWaitTimerRef.current) {
        window.clearTimeout(exportPrepareLongWaitTimerRef.current)
        exportPrepareLongWaitTimerRef.current = null
      }
    }
  }, [clearExportPrepareState])

  useEffect(() => {
    if (!isPreparingExportDialog || !currentSessionId) return
    if (!inProgressExportSessionIds.has(currentSessionId)) return
    clearExportPrepareState()
  }, [clearExportPrepareState, currentSessionId, inProgressExportSessionIds, isPreparingExportDialog])

  // 加载当前用户头像
  const loadMyAvatar = useCallback(async () => {
    try {
      const result = await window.electronAPI.chat.getMyAvatarUrl()
      if (result.success && result.avatarUrl) {
        setMyAvatarUrl(result.avatarUrl)
      }
    } catch (e) {
      console.error('加载用户头像失败:', e)
    }
  }, [])

  const resolveChatCacheScope = useCallback(async (): Promise<string> => {
    try {
      const [dbPath, myWxid] = await Promise.all([
        window.electronAPI.config.get('dbPath'),
        window.electronAPI.config.get('myWxid')
      ])
      const scope = normalizeChatCacheScope(dbPath, myWxid)
      chatCacheScopeRef.current = scope
      return scope
    } catch {
      chatCacheScopeRef.current = 'default'
      return 'default'
    }
  }, [])

  const loadPreviewCacheFromStorage = useCallback((scope: string): Record<string, SessionPreviewCacheEntry> => {
    try {
      const cacheKey = buildChatSessionPreviewCacheKey(scope)
      const payload = safeParseJson<SessionPreviewCachePayload>(window.localStorage.getItem(cacheKey))
      if (!payload || typeof payload.updatedAt !== 'number' || !payload.entries) {
        return {}
      }
      if (Date.now() - payload.updatedAt > CHAT_SESSION_PREVIEW_CACHE_TTL_MS) {
        return {}
      }
      return payload.entries
    } catch {
      return {}
    }
  }, [])

  const persistPreviewCacheToStorage = useCallback((scope: string, entries: Record<string, SessionPreviewCacheEntry>) => {
    try {
      const cacheKey = buildChatSessionPreviewCacheKey(scope)
      const payload: SessionPreviewCachePayload = {
        updatedAt: Date.now(),
        entries
      }
      window.localStorage.setItem(cacheKey, JSON.stringify(payload))
    } catch {
      // ignore cache write failures
    }
  }, [])

  const persistSessionPreviewCache = useCallback((sessionId: string, previewMessages: Message[]) => {
    const id = String(sessionId || '').trim()
    if (!id || !Array.isArray(previewMessages) || previewMessages.length === 0) return

    const trimmed = previewMessages.slice(-CHAT_SESSION_PREVIEW_LIMIT_PER_SESSION)
    const currentEntries = { ...previewCacheRef.current }
    currentEntries[id] = {
      updatedAt: Date.now(),
      messages: trimmed
    }

    const sortedIds = Object.entries(currentEntries)
      .sort((a, b) => (b[1]?.updatedAt || 0) - (a[1]?.updatedAt || 0))
      .map(([entryId]) => entryId)

    const keptIds = new Set(sortedIds.slice(0, CHAT_SESSION_PREVIEW_MAX_SESSIONS))
    const compactEntries: Record<string, SessionPreviewCacheEntry> = {}
    for (const [entryId, entry] of Object.entries(currentEntries)) {
      if (keptIds.has(entryId)) {
        compactEntries[entryId] = entry
      }
    }

    previewCacheRef.current = compactEntries
    if (previewPersistTimerRef.current !== null) {
      window.clearTimeout(previewPersistTimerRef.current)
    }
    previewPersistTimerRef.current = window.setTimeout(() => {
      persistPreviewCacheToStorage(chatCacheScopeRef.current, previewCacheRef.current)
      previewPersistTimerRef.current = null
    }, 220)
  }, [persistPreviewCacheToStorage])

  const hydrateSessionPreview = useCallback(async (sessionId: string) => {
    const id = String(sessionId || '').trim()
    if (!id) return

    const localEntry = previewCacheRef.current[id]
    if (
      localEntry &&
      Array.isArray(localEntry.messages) &&
      localEntry.messages.length > 0 &&
      Date.now() - localEntry.updatedAt <= CHAT_SESSION_PREVIEW_CACHE_TTL_MS
    ) {
      setMessages(localEntry.messages.slice())
      setHasInitialMessages(true)
      return
    }

    try {
      const result = await window.electronAPI.chat.getCachedMessages(id)
      if (!result.success || !Array.isArray(result.messages) || result.messages.length === 0) {
        return
      }
      if (currentSessionRef.current !== id && pendingSessionLoadRef.current !== id) return
      setMessages(result.messages)
      setHasInitialMessages(true)
      persistSessionPreviewCache(id, result.messages)
    } catch {
      // ignore preview cache errors
    }
  }, [persistSessionPreviewCache, setMessages])

  const saveSessionWindowCache = useCallback((sessionId: string, entry: Omit<SessionWindowCacheEntry, 'updatedAt'>) => {
    const id = String(sessionId || '').trim()
    if (!id || !Array.isArray(entry.messages) || entry.messages.length === 0) return

    const trimmedMessages = entry.messages.length > CHAT_SESSION_WINDOW_CACHE_MAX_MESSAGES
      ? entry.messages.slice(-CHAT_SESSION_WINDOW_CACHE_MAX_MESSAGES)
      : entry.messages.slice()

    const cache = sessionWindowCacheRef.current
    cache.set(id, {
      updatedAt: Date.now(),
      ...entry,
      messages: trimmedMessages,
      currentOffset: trimmedMessages.length
    })

    if (cache.size <= CHAT_SESSION_WINDOW_CACHE_MAX_SESSIONS) return

    const sortedByTime = [...cache.entries()]
      .sort((a, b) => (a[1].updatedAt || 0) - (b[1].updatedAt || 0))

    for (const [key] of sortedByTime) {
      if (cache.size <= CHAT_SESSION_WINDOW_CACHE_MAX_SESSIONS) break
      cache.delete(key)
    }
  }, [])

  const restoreSessionWindowCache = useCallback((sessionId: string): boolean => {
    const id = String(sessionId || '').trim()
    if (!id) return false

    const cache = sessionWindowCacheRef.current
    const entry = cache.get(id)
    if (!entry) return false
    if (Date.now() - entry.updatedAt > CHAT_SESSION_WINDOW_CACHE_TTL_MS) {
      cache.delete(id)
      return false
    }
    if (!Array.isArray(entry.messages) || entry.messages.length === 0) {
      cache.delete(id)
      return false
    }

    // LRU: 命中后更新时间
    cache.set(id, {
      ...entry,
      updatedAt: Date.now(),
      messages: entry.messages.slice()
    })

    setMessages(entry.messages.slice())
    setCurrentOffset(entry.messages.length)
    setHasMoreMessages(entry.hasMoreMessages !== false)
    setHasMoreLater(entry.hasMoreLater === true)
    setJumpStartTime(entry.jumpStartTime || 0)
    setJumpEndTime(entry.jumpEndTime || 0)
    setNoMessageTable(false)
    setHasInitialMessages(true)
    return true
  }, [
    setMessages,
    setHasMoreMessages,
    setHasMoreLater,
    setCurrentOffset,
    setJumpStartTime,
    setJumpEndTime,
    setNoMessageTable,
    setHasInitialMessages
  ])

  const hydrateSessionListCache = useCallback((scope: string): boolean => {
    try {
      const cacheKey = buildChatSessionListCacheKey(scope)
      const payload = safeParseJson<SessionListCachePayload>(window.localStorage.getItem(cacheKey))
      if (!payload || typeof payload.updatedAt !== 'number' || !Array.isArray(payload.sessions)) {
        previewCacheRef.current = loadPreviewCacheFromStorage(scope)
        return false
      }
      previewCacheRef.current = loadPreviewCacheFromStorage(scope)
      if (Date.now() - payload.updatedAt > CHAT_SESSION_LIST_CACHE_TTL_MS) {
        return false
      }
      if (!Array.isArray(sessionsRef.current) || sessionsRef.current.length === 0) {
        setSessions(payload.sessions)
        sessionsRef.current = payload.sessions
        return payload.sessions.length > 0
      }
      return false
    } catch {
      previewCacheRef.current = loadPreviewCacheFromStorage(scope)
      return false
    }
  }, [loadPreviewCacheFromStorage, setSessions])

  const persistSessionListCache = useCallback((scope: string, nextSessions: ChatSession[]) => {
    try {
      const cacheKey = buildChatSessionListCacheKey(scope)
      const payload: SessionListCachePayload = {
        updatedAt: Date.now(),
        sessions: nextSessions
      }
      window.localStorage.setItem(cacheKey, JSON.stringify(payload))
    } catch {
      // ignore cache write failures
    }
  }, [])

  const applySessionDetailStats = useCallback((
    sessionId: string,
    metric: SessionExportMetric,
    cacheMeta?: SessionExportCacheMeta,
    relationLoadedOverride?: boolean
  ) => {
    setSessionDetail((prev) => {
      if (!prev || prev.wxid !== sessionId) return prev
      const relationLoaded = relationLoadedOverride ?? Boolean(prev.relationStatsLoaded)
      return {
        ...prev,
        messageCount: Number.isFinite(metric.totalMessages) ? metric.totalMessages : prev.messageCount,
        voiceMessages: Number.isFinite(metric.voiceMessages) ? metric.voiceMessages : prev.voiceMessages,
        imageMessages: Number.isFinite(metric.imageMessages) ? metric.imageMessages : prev.imageMessages,
        videoMessages: Number.isFinite(metric.videoMessages) ? metric.videoMessages : prev.videoMessages,
        emojiMessages: Number.isFinite(metric.emojiMessages) ? metric.emojiMessages : prev.emojiMessages,
        transferMessages: Number.isFinite(metric.transferMessages) ? metric.transferMessages : prev.transferMessages,
        redPacketMessages: Number.isFinite(metric.redPacketMessages) ? metric.redPacketMessages : prev.redPacketMessages,
        callMessages: Number.isFinite(metric.callMessages) ? metric.callMessages : prev.callMessages,
        groupMemberCount: Number.isFinite(metric.groupMemberCount) ? metric.groupMemberCount : prev.groupMemberCount,
        groupMyMessages: Number.isFinite(metric.groupMyMessages) ? metric.groupMyMessages : prev.groupMyMessages,
        groupActiveSpeakers: Number.isFinite(metric.groupActiveSpeakers) ? metric.groupActiveSpeakers : prev.groupActiveSpeakers,
        privateMutualGroups: relationLoaded && Number.isFinite(metric.privateMutualGroups)
          ? metric.privateMutualGroups
          : prev.privateMutualGroups,
        groupMutualFriends: relationLoaded && Number.isFinite(metric.groupMutualFriends)
          ? metric.groupMutualFriends
          : prev.groupMutualFriends,
        relationStatsLoaded: relationLoaded,
        statsUpdatedAt: cacheMeta?.updatedAt ?? prev.statsUpdatedAt,
        statsStale: typeof cacheMeta?.stale === 'boolean' ? cacheMeta.stale : prev.statsStale,
        firstMessageTime: Number.isFinite(metric.firstTimestamp) ? metric.firstTimestamp : prev.firstMessageTime,
        latestMessageTime: Number.isFinite(metric.lastTimestamp) ? metric.lastTimestamp : prev.latestMessageTime
      }
    })
  }, [])

  // 加载会话详情
  const loadSessionDetail = useCallback(async (sessionId: string) => {
    const normalizedSessionId = String(sessionId || '').trim()
    if (!normalizedSessionId) return
    const taskId = registerBackgroundTask({
      sourcePage: 'chat',
      title: '聊天页会话详情统计',
      detail: `准备读取 ${sessionMapRef.current.get(normalizedSessionId)?.displayName || normalizedSessionId} 的详情`,
      progressText: '基础信息',
      cancelable: true
    })

    const requestSeq = ++detailRequestSeqRef.current
    const mappedSession = sessionMapRef.current.get(normalizedSessionId) || sessionsRef.current.find((s) => s.username === normalizedSessionId)
    const hintedCount = typeof mappedSession?.messageCountHint === 'number' && Number.isFinite(mappedSession.messageCountHint) && mappedSession.messageCountHint >= 0
      ? Math.floor(mappedSession.messageCountHint)
      : undefined

    setIsRefreshingDetailStats(false)
    setIsLoadingRelationStats(false)
    setSessionDetail((prev) => {
      const sameSession = prev?.wxid === normalizedSessionId
      return {
        wxid: normalizedSessionId,
        displayName: mappedSession?.displayName || prev?.displayName || normalizedSessionId,
        remark: sameSession ? prev?.remark : undefined,
        nickName: sameSession ? prev?.nickName : undefined,
        alias: sameSession ? prev?.alias : undefined,
        avatarUrl: mappedSession?.avatarUrl || (sameSession ? prev?.avatarUrl : undefined),
        messageCount: hintedCount ?? (sameSession ? prev.messageCount : Number.NaN),
        voiceMessages: sameSession ? prev?.voiceMessages : undefined,
        imageMessages: sameSession ? prev?.imageMessages : undefined,
        videoMessages: sameSession ? prev?.videoMessages : undefined,
        emojiMessages: sameSession ? prev?.emojiMessages : undefined,
        transferMessages: sameSession ? prev?.transferMessages : undefined,
        redPacketMessages: sameSession ? prev?.redPacketMessages : undefined,
        callMessages: sameSession ? prev?.callMessages : undefined,
        privateMutualGroups: sameSession ? prev?.privateMutualGroups : undefined,
        groupMemberCount: sameSession ? prev?.groupMemberCount : undefined,
        groupMyMessages: sameSession ? prev?.groupMyMessages : undefined,
        groupActiveSpeakers: sameSession ? prev?.groupActiveSpeakers : undefined,
        groupMutualFriends: sameSession ? prev?.groupMutualFriends : undefined,
        relationStatsLoaded: sameSession ? prev?.relationStatsLoaded : false,
        statsUpdatedAt: sameSession ? prev?.statsUpdatedAt : undefined,
        statsStale: sameSession ? prev?.statsStale : undefined,
        firstMessageTime: sameSession ? prev?.firstMessageTime : undefined,
        latestMessageTime: sameSession ? prev?.latestMessageTime : undefined,
        messageTables: sameSession && Array.isArray(prev?.messageTables) ? prev.messageTables : []
      }
    })
    setIsLoadingDetail(true)
    setIsLoadingDetailExtra(true)

    if (normalizedSessionId.includes('@chatroom')) {
      void (async () => {
        try {
          const hintResult = await window.electronAPI.chat.getGroupMyMessageCountHint(normalizedSessionId)
          if (requestSeq !== detailRequestSeqRef.current) return
          if (!hintResult.success || !Number.isFinite(hintResult.count)) return
          const hintedMyCount = Math.max(0, Math.floor(hintResult.count as number))
          setSessionDetail((prev) => {
            if (!prev || prev.wxid !== normalizedSessionId) return prev
            return {
              ...prev,
              groupMyMessages: hintedMyCount
            }
          })
        } catch {
          // ignore hint errors
        }
      })()
    }

    try {
      updateBackgroundTask(taskId, {
        detail: '正在读取会话基础详情',
        progressText: '基础信息'
      })
      const result = await window.electronAPI.chat.getSessionDetailFast(normalizedSessionId)
      if (isBackgroundTaskCancelRequested(taskId)) {
        finishBackgroundTask(taskId, 'canceled', {
          detail: '已停止后续加载，当前基础查询结束后未继续补充统计'
        })
        return
      }
      if (requestSeq !== detailRequestSeqRef.current) {
        finishBackgroundTask(taskId, 'canceled', {
          detail: '会话已切换，旧详情任务已停止'
        })
        return
      }
      if (result.success && result.detail) {
        setSessionDetail((prev) => ({
          wxid: normalizedSessionId,
          displayName: result.detail!.displayName || prev?.displayName || normalizedSessionId,
          remark: result.detail!.remark,
          nickName: result.detail!.nickName,
          alias: result.detail!.alias,
          avatarUrl: result.detail!.avatarUrl || prev?.avatarUrl,
          messageCount: Number.isFinite(result.detail!.messageCount) ? result.detail!.messageCount : prev?.messageCount ?? Number.NaN,
          voiceMessages: prev?.voiceMessages,
          imageMessages: prev?.imageMessages,
          videoMessages: prev?.videoMessages,
          emojiMessages: prev?.emojiMessages,
          transferMessages: prev?.transferMessages,
          redPacketMessages: prev?.redPacketMessages,
          callMessages: prev?.callMessages,
          privateMutualGroups: prev?.privateMutualGroups,
          groupMemberCount: prev?.groupMemberCount,
          groupMyMessages: prev?.groupMyMessages,
          groupActiveSpeakers: prev?.groupActiveSpeakers,
          groupMutualFriends: prev?.groupMutualFriends,
          relationStatsLoaded: prev?.relationStatsLoaded,
          statsUpdatedAt: prev?.statsUpdatedAt,
          statsStale: prev?.statsStale,
          firstMessageTime: prev?.firstMessageTime,
          latestMessageTime: prev?.latestMessageTime,
          messageTables: Array.isArray(prev?.messageTables) ? (prev?.messageTables || []) : []
        }))
      }
    } catch (e) {
      console.error('加载会话详情失败:', e)
    } finally {
      if (requestSeq === detailRequestSeqRef.current) {
        setIsLoadingDetail(false)
      }
    }

    try {
      updateBackgroundTask(taskId, {
        detail: '正在读取补充信息与导出统计',
        progressText: '补充统计'
      })
      const [extraResultSettled, statsResultSettled] = await Promise.allSettled([
        window.electronAPI.chat.getSessionDetailExtra(normalizedSessionId),
        window.electronAPI.chat.getExportSessionStats(
          [normalizedSessionId],
          { includeRelations: false, allowStaleCache: true, cacheOnly: true }
        )
      ])

      if (isBackgroundTaskCancelRequested(taskId)) {
        finishBackgroundTask(taskId, 'canceled', {
          detail: '已停止后续加载，补充统计结果未继续写入'
        })
        return
      }
      if (requestSeq !== detailRequestSeqRef.current) {
        finishBackgroundTask(taskId, 'canceled', {
          detail: '会话已切换，旧补充统计任务已停止'
        })
        return
      }

      if (extraResultSettled.status === 'fulfilled' && extraResultSettled.value.success) {
        const detail = extraResultSettled.value.detail
        if (detail) {
          setSessionDetail((prev) => {
            if (!prev || prev.wxid !== normalizedSessionId) return prev
            return {
              ...prev,
              firstMessageTime: detail.firstMessageTime,
              latestMessageTime: detail.latestMessageTime,
              messageTables: Array.isArray(detail.messageTables) ? detail.messageTables : []
            }
          })
        }
      }

      let refreshIncludeRelations = false
      let shouldRefreshStatsInBackground = false
      if (statsResultSettled.status === 'fulfilled' && statsResultSettled.value.success) {
        const metric = statsResultSettled.value.data?.[normalizedSessionId] as SessionExportMetric | undefined
        const cacheMeta = statsResultSettled.value.cache?.[normalizedSessionId] as SessionExportCacheMeta | undefined
        refreshIncludeRelations = Boolean(cacheMeta?.includeRelations)
        if (metric) {
          applySessionDetailStats(normalizedSessionId, metric, cacheMeta, refreshIncludeRelations)
        } else if (cacheMeta) {
          setSessionDetail((prev) => {
            if (!prev || prev.wxid !== normalizedSessionId) return prev
            return {
              ...prev,
              relationStatsLoaded: refreshIncludeRelations || prev.relationStatsLoaded,
              statsUpdatedAt: cacheMeta.updatedAt,
              statsStale: cacheMeta.stale
            }
          })
        }
        shouldRefreshStatsInBackground = !metric || Boolean(cacheMeta?.stale)
      } else {
        shouldRefreshStatsInBackground = true
      }
      finishBackgroundTask(taskId, 'completed', {
        detail: '聊天页会话详情统计完成',
        progressText: '已完成'
      })

      if (shouldRefreshStatsInBackground) {
        setIsRefreshingDetailStats(true)
        void (async () => {
          try {
            const freshResult = await window.electronAPI.chat.getExportSessionStats(
              [normalizedSessionId],
              { includeRelations: false, forceRefresh: true }
            )
            if (requestSeq !== detailRequestSeqRef.current) return
            if (freshResult.success && freshResult.data) {
              const freshMetric = freshResult.data[normalizedSessionId] as SessionExportMetric | undefined
              const freshMeta = freshResult.cache?.[normalizedSessionId] as SessionExportCacheMeta | undefined
              if (freshMetric) {
                applySessionDetailStats(normalizedSessionId, freshMetric, freshMeta, false)
              } else if (freshMeta) {
                setSessionDetail((prev) => {
                  if (!prev || prev.wxid !== normalizedSessionId) return prev
                  return {
                    ...prev,
                    statsUpdatedAt: freshMeta.updatedAt,
                    statsStale: freshMeta.stale
                  }
                })
              }
            }
          } catch (error) {
            console.error('聊天页后台刷新会话统计失败:', error)
          } finally {
            if (requestSeq === detailRequestSeqRef.current) {
              setIsRefreshingDetailStats(false)
            }
          }
        })()
      }
    } catch (e) {
      console.error('加载会话详情补充统计失败:', e)
      finishBackgroundTask(taskId, 'failed', {
        detail: String(e)
      })
    } finally {
      if (requestSeq === detailRequestSeqRef.current) {
        setIsLoadingDetailExtra(false)
      }
    }
  }, [applySessionDetailStats])

  const loadRelationStats = useCallback(async () => {
    const normalizedSessionId = String(currentSessionId || '').trim()
    if (!normalizedSessionId || isLoadingRelationStats) return

    const requestSeq = detailRequestSeqRef.current
    const taskId = registerBackgroundTask({
      sourcePage: 'chat',
      title: '聊天页关系统计补算',
      detail: `正在补算 ${normalizedSessionId} 的共同好友与关联数据`,
      progressText: '关系统计',
      cancelable: true
    })
    setIsLoadingRelationStats(true)
    try {
      const relationResult = await window.electronAPI.chat.getExportSessionStats(
        [normalizedSessionId],
        { includeRelations: true, forceRefresh: true, preferAccurateSpecialTypes: true }
      )
      if (isBackgroundTaskCancelRequested(taskId)) {
        finishBackgroundTask(taskId, 'canceled', {
          detail: '已停止后续加载，当前关系统计查询结束后未继续刷新'
        })
        return
      }
      if (requestSeq !== detailRequestSeqRef.current) {
        finishBackgroundTask(taskId, 'canceled', {
          detail: '会话已切换，旧关系统计任务已停止'
        })
        return
      }

      const metric = relationResult.success && relationResult.data
        ? relationResult.data[normalizedSessionId] as SessionExportMetric | undefined
        : undefined
      const cacheMeta = relationResult.success
        ? relationResult.cache?.[normalizedSessionId] as SessionExportCacheMeta | undefined
        : undefined
      if (metric) {
        applySessionDetailStats(normalizedSessionId, metric, cacheMeta, true)
      }

      const needRefresh = relationResult.success &&
        Array.isArray(relationResult.needsRefresh) &&
        relationResult.needsRefresh.includes(normalizedSessionId)

      if (needRefresh) {
        setIsRefreshingDetailStats(true)
        void (async () => {
          try {
            updateBackgroundTask(taskId, {
              detail: '正在刷新关系统计结果',
              progressText: '关系统计刷新'
            })
            const freshResult = await window.electronAPI.chat.getExportSessionStats(
              [normalizedSessionId],
              { includeRelations: true, forceRefresh: true, preferAccurateSpecialTypes: true }
            )
            if (isBackgroundTaskCancelRequested(taskId)) {
              finishBackgroundTask(taskId, 'canceled', {
                detail: '已停止后续加载，刷新结果未继续写入'
              })
              return
            }
            if (requestSeq !== detailRequestSeqRef.current) {
              finishBackgroundTask(taskId, 'canceled', {
                detail: '会话已切换，旧关系统计刷新任务已停止'
              })
              return
            }
            if (freshResult.success && freshResult.data) {
              const freshMetric = freshResult.data[normalizedSessionId] as SessionExportMetric | undefined
              const freshMeta = freshResult.cache?.[normalizedSessionId] as SessionExportCacheMeta | undefined
              if (freshMetric) {
                applySessionDetailStats(normalizedSessionId, freshMetric, freshMeta, true)
              }
            }
            finishBackgroundTask(taskId, 'completed', {
              detail: '聊天页关系统计补算完成',
              progressText: '已完成'
            })
          } catch (error) {
            console.error('刷新会话关系统计失败:', error)
            finishBackgroundTask(taskId, 'failed', {
              detail: String(error)
            })
          } finally {
            if (requestSeq === detailRequestSeqRef.current) {
              setIsRefreshingDetailStats(false)
            }
          }
        })()
      } else {
        finishBackgroundTask(taskId, 'completed', {
          detail: '聊天页关系统计补算完成',
          progressText: '已完成'
        })
      }
    } catch (error) {
      console.error('加载会话关系统计失败:', error)
      finishBackgroundTask(taskId, 'failed', {
        detail: String(error)
      })
    } finally {
      if (requestSeq === detailRequestSeqRef.current) {
        setIsLoadingRelationStats(false)
      }
    }
  }, [applySessionDetailStats, currentSessionId, isLoadingRelationStats])

  const normalizeGroupPanelMembers = useCallback((
    payload: GroupPanelMember[],
    options?: { messageCountStatus?: GroupMessageCountStatus }
  ): GroupPanelMember[] => {
    const membersPayload = Array.isArray(payload) ? payload : []
    return membersPayload
      .map((member: GroupPanelMember): GroupPanelMember | null => {
        const username = String(member.username || '').trim()
        if (!username) return null
        const preferredName = String(
          member.groupNickname ||
          member.remark ||
          member.displayName ||
          member.nickname ||
          username
        )
        const rawStatus = member.messageCountStatus
        const normalizedStatus: GroupMessageCountStatus = options?.messageCountStatus
          ?? (rawStatus === 'loading' || rawStatus === 'failed' ? rawStatus : 'ready')

        return {
          username,
          displayName: preferredName,
          avatarUrl: member.avatarUrl,
          nickname: member.nickname,
          alias: member.alias,
          remark: member.remark,
          groupNickname: member.groupNickname,
          isOwner: Boolean(member.isOwner),
          isFriend: Boolean(member.isFriend),
          messageCount: Number.isFinite(member.messageCount) ? Math.max(0, Math.floor(member.messageCount)) : 0,
          messageCountStatus: normalizedStatus
        }
      })
      .filter((member: GroupPanelMember | null): member is GroupPanelMember => Boolean(member))
      .sort((a: GroupPanelMember, b: GroupPanelMember) => {
        const ownerDiff = Number(Boolean(b.isOwner)) - Number(Boolean(a.isOwner))
        if (ownerDiff !== 0) return ownerDiff

        const friendDiff = Number(b.isFriend) - Number(a.isFriend)
        if (friendDiff !== 0) return friendDiff

        const canSortByCount = a.messageCountStatus === 'ready' && b.messageCountStatus === 'ready'
        if (canSortByCount && a.messageCount !== b.messageCount) return b.messageCount - a.messageCount
        return a.displayName.localeCompare(b.displayName, 'zh-Hans-CN')
      })
  }, [])

  const normalizeWxidLikeIdentity = useCallback((value?: string): string => {
    const trimmed = String(value || '').trim()
    if (!trimmed) return ''
    const lowered = trimmed.toLowerCase()
    if (lowered.startsWith('wxid_')) {
      const matched = lowered.match(/^(wxid_[^_]+)/i)
      return matched ? matched[1].toLowerCase() : lowered
    }
    const suffixMatch = lowered.match(/^(.+)_([a-z0-9]{4})$/i)
    return suffixMatch ? suffixMatch[1].toLowerCase() : lowered
  }, [])

  const isSelfGroupMember = useCallback((memberUsername?: string): boolean => {
    const selfRaw = String(myWxid || '').trim().toLowerCase()
    const selfNormalized = normalizeWxidLikeIdentity(myWxid)
    if (!selfRaw && !selfNormalized) return false
    const memberRaw = String(memberUsername || '').trim().toLowerCase()
    const memberNormalized = normalizeWxidLikeIdentity(memberUsername)
    return Boolean(
      (selfRaw && memberRaw && selfRaw === memberRaw) ||
      (selfNormalized && memberNormalized && selfNormalized === memberNormalized)
    )
  }, [myWxid, normalizeWxidLikeIdentity])

  const resolveMyGroupMessageCountFromMembers = useCallback((members: GroupPanelMember[]): number | undefined => {
    if (!myWxid) return undefined

    for (const member of members) {
      if (!isSelfGroupMember(member.username)) continue
      if (Number.isFinite(member.messageCount)) {
        return Math.max(0, Math.floor(member.messageCount))
      }
      return 0
    }

    return undefined
  }, [isSelfGroupMember, myWxid])

  const syncGroupMyMessagesFromMembers = useCallback((chatroomId: string, members: GroupPanelMember[]) => {
    const myMessageCount = resolveMyGroupMessageCountFromMembers(members)
    if (!Number.isFinite(myMessageCount)) return

    setSessionDetail((prev) => {
      if (!prev || prev.wxid !== chatroomId || !prev.wxid.includes('@chatroom')) return prev
      return {
        ...prev,
        groupMyMessages: myMessageCount as number
      }
    })
  }, [resolveMyGroupMessageCountFromMembers])

  const updateGroupMembersPanelCache = useCallback((
    chatroomId: string,
    members: GroupPanelMember[],
    includeMessageCounts: boolean
  ) => {
    groupMembersPanelCacheRef.current.set(chatroomId, {
      updatedAt: Date.now(),
      members,
      includeMessageCounts
    })
    if (groupMembersPanelCacheRef.current.size > 80) {
      const oldestEntry = Array.from(groupMembersPanelCacheRef.current.entries())
        .sort((a, b) => a[1].updatedAt - b[1].updatedAt)[0]
      if (oldestEntry) {
        groupMembersPanelCacheRef.current.delete(oldestEntry[0])
      }
    }
  }, [])

  const setGroupMembersCountStatus = useCallback((
    status: GroupMessageCountStatus,
    options?: { onlyWhenNotReady?: boolean }
  ) => {
    setGroupPanelMembers((prev) => {
      if (!Array.isArray(prev) || prev.length === 0) return prev
      if (options?.onlyWhenNotReady && prev.some((member) => member.messageCountStatus === 'ready')) {
        return prev
      }
      const next = normalizeGroupPanelMembers(prev, { messageCountStatus: status })
      const changed = next.some((member, index) => member.messageCountStatus !== prev[index]?.messageCountStatus)
      return changed ? next : prev
    })
  }, [normalizeGroupPanelMembers])

  const syncGroupMembersMyCountFromDetail = useCallback((chatroomId: string, myMessageCount: number) => {
    if (!chatroomId || !chatroomId.includes('@chatroom')) return
    const normalizedCount = Number.isFinite(myMessageCount) ? Math.max(0, Math.floor(myMessageCount)) : 0

    const patchMembers = (members: GroupPanelMember[]): { changed: boolean; members: GroupPanelMember[] } => {
      if (!Array.isArray(members) || members.length === 0) {
        return { changed: false, members }
      }
      let changed = false
      const patched = members.map((member) => {
        if (!isSelfGroupMember(member.username)) return member
        if (member.messageCount === normalizedCount) return member
        changed = true
        return {
          ...member,
          messageCount: normalizedCount
        }
      })
      if (!changed) return { changed: false, members }
      return { changed: true, members: normalizeGroupPanelMembers(patched) }
    }

    const cached = groupMembersPanelCacheRef.current.get(chatroomId)
    if (cached && cached.members.length > 0) {
      const patchedCache = patchMembers(cached.members)
      if (patchedCache.changed) {
        updateGroupMembersPanelCache(chatroomId, patchedCache.members, true)
      }
    }

    setGroupPanelMembers((prev) => {
      const patched = patchMembers(prev)
      if (!patched.changed) return prev
      return patched.members
    })
  }, [
    isSelfGroupMember,
    normalizeGroupPanelMembers,
    updateGroupMembersPanelCache
  ])

  const getGroupMembersPanelDataWithTimeout = useCallback(async (
    chatroomId: string,
    options: { forceRefresh?: boolean; includeMessageCounts?: boolean },
    timeoutMs: number
  ) => {
    let timeoutTimer: number | null = null
    try {
      const timeoutPromise = new Promise<{ success: false; error: string }>((resolve) => {
        timeoutTimer = window.setTimeout(() => {
          resolve({ success: false, error: '加载群成员超时，请稍后重试' })
        }, timeoutMs)
      })
      return await Promise.race([
        window.electronAPI.groupAnalytics.getGroupMembersPanelData(chatroomId, options),
        timeoutPromise
      ])
    } finally {
      if (timeoutTimer) {
        window.clearTimeout(timeoutTimer)
      }
    }
  }, [])

  const loadGroupMembersPanel = useCallback(async (chatroomId: string) => {
    if (!chatroomId || !isGroupChatSession(chatroomId)) return

    const requestSeq = ++groupMembersRequestSeqRef.current
    const now = Date.now()
    const cached = groupMembersPanelCacheRef.current.get(chatroomId)
    const cacheFresh = Boolean(cached && now - cached.updatedAt < GROUP_MEMBERS_PANEL_CACHE_TTL_MS)
    const hasCachedMembers = Boolean(cached && cached.members.length > 0)
    const hasFreshMessageCounts = Boolean(cacheFresh && cached?.includeMessageCounts)
    let startedBackgroundRefresh = false

    const refreshMessageCountsInBackground = (forceRefresh: boolean) => {
      startedBackgroundRefresh = true
      setIsRefreshingGroupMembers(true)
      setGroupMembersCountStatus('loading', { onlyWhenNotReady: true })
      void (async () => {
        try {
          const countsResult = await getGroupMembersPanelDataWithTimeout(
            chatroomId,
            { forceRefresh, includeMessageCounts: true },
            25000
          )
          if (requestSeq !== groupMembersRequestSeqRef.current) return
          if (!countsResult.success || !Array.isArray(countsResult.data)) {
            setGroupMembersError('成员列表已加载，发言统计稍后再试')
            setGroupMembersCountStatus('failed', { onlyWhenNotReady: true })
            return
          }

          const membersWithCounts = normalizeGroupPanelMembers(
            countsResult.data as GroupPanelMember[],
            { messageCountStatus: 'ready' }
          )
          setGroupPanelMembers(membersWithCounts)
          syncGroupMyMessagesFromMembers(chatroomId, membersWithCounts)
          setGroupMembersError(null)
          updateGroupMembersPanelCache(chatroomId, membersWithCounts, true)
          hasInitializedGroupMembersRef.current = true
        } catch {
          if (requestSeq !== groupMembersRequestSeqRef.current) return
          setGroupMembersError('成员列表已加载，发言统计稍后再试')
          setGroupMembersCountStatus('failed', { onlyWhenNotReady: true })
        } finally {
          if (requestSeq === groupMembersRequestSeqRef.current) {
            setIsRefreshingGroupMembers(false)
          }
        }
      })()
    }

    if (cacheFresh && cached) {
      const cachedMembers = normalizeGroupPanelMembers(
        cached.members,
        { messageCountStatus: cached.includeMessageCounts ? 'ready' : 'loading' }
      )
      setGroupPanelMembers(cachedMembers)
      if (cached.includeMessageCounts) {
        syncGroupMyMessagesFromMembers(chatroomId, cachedMembers)
      }
      setGroupMembersError(null)
      setGroupMembersLoadingHint('')
      setIsLoadingGroupMembers(false)
      hasInitializedGroupMembersRef.current = true
      if (!hasFreshMessageCounts) {
        refreshMessageCountsInBackground(false)
      } else {
        setIsRefreshingGroupMembers(false)
      }
      return
    }

    setGroupMembersError(null)
    if (hasCachedMembers && cached) {
      const cachedMembers = normalizeGroupPanelMembers(
        cached.members,
        { messageCountStatus: cached.includeMessageCounts ? 'ready' : 'loading' }
      )
      setGroupPanelMembers(cachedMembers)
      if (cached.includeMessageCounts) {
        syncGroupMyMessagesFromMembers(chatroomId, cachedMembers)
      }
      setIsRefreshingGroupMembers(true)
      setGroupMembersLoadingHint('')
      setIsLoadingGroupMembers(false)
    } else {
      setGroupPanelMembers([])
      setIsRefreshingGroupMembers(false)
      setIsLoadingGroupMembers(true)
      setGroupMembersLoadingHint(
        hasInitializedGroupMembersRef.current
          ? '加载群成员中...'
          : '首次加载群成员，正在初始化索引（可能需要几秒）'
      )
    }

    try {
      const membersResult = await getGroupMembersPanelDataWithTimeout(
        chatroomId,
        { includeMessageCounts: false, forceRefresh: false },
        12000
      )
      if (requestSeq !== groupMembersRequestSeqRef.current) return

      if (!membersResult.success || !Array.isArray(membersResult.data)) {
        if (!hasCachedMembers) {
          setGroupPanelMembers([])
        }
        setGroupMembersError(membersResult.error || (hasCachedMembers ? '刷新群成员失败，已显示缓存数据' : '加载群成员失败'))
        return
      }

      const members = normalizeGroupPanelMembers(
        membersResult.data as GroupPanelMember[],
        { messageCountStatus: 'loading' }
      )
      setGroupPanelMembers(members)
      setGroupMembersError(null)
      updateGroupMembersPanelCache(chatroomId, members, false)
      hasInitializedGroupMembersRef.current = true
      refreshMessageCountsInBackground(false)
    } catch (e) {
      if (requestSeq !== groupMembersRequestSeqRef.current) return
      if (!hasCachedMembers) {
        setGroupPanelMembers([])
      }
      setGroupMembersError(hasCachedMembers ? '刷新群成员失败，已显示缓存数据' : String(e))
    } finally {
      if (requestSeq === groupMembersRequestSeqRef.current) {
        setIsLoadingGroupMembers(false)
        setGroupMembersLoadingHint('')
        if (!startedBackgroundRefresh) {
          setIsRefreshingGroupMembers(false)
        }
      }
    }
  }, [
    getGroupMembersPanelDataWithTimeout,
    isGroupChatSession,
    syncGroupMyMessagesFromMembers,
    normalizeGroupPanelMembers,
    updateGroupMembersPanelCache
  ])

  const toggleGroupMembersPanel = useCallback(() => {
    if (!currentSessionId || !isGroupChatSession(currentSessionId)) return
    if (showGroupMembersPanel) {
      setShowGroupMembersPanel(false)
      return
    }
    setShowDetailPanel(false)
    setShowGroupMembersPanel(true)
  }, [currentSessionId, showGroupMembersPanel, isGroupChatSession])

  // 切换详情面板
  const toggleDetailPanel = useCallback(() => {
    if (showDetailPanel) {
      setShowDetailPanel(false)
      return
    }
    setShowGroupMembersPanel(false)
    setShowDetailPanel(true)
    if (currentSessionId) {
      void loadSessionDetail(currentSessionId)
    }
  }, [showDetailPanel, currentSessionId, loadSessionDetail])

  useEffect(() => {
    if (!showGroupMembersPanel) return
    if (!currentSessionId || !isGroupChatSession(currentSessionId)) {
      setShowGroupMembersPanel(false)
      return
    }
    setGroupMemberSearchKeyword('')
    void loadGroupMembersPanel(currentSessionId)
  }, [showGroupMembersPanel, currentSessionId, loadGroupMembersPanel, isGroupChatSession])

  useEffect(() => {
    const chatroomId = String(sessionDetail?.wxid || '').trim()
    if (!chatroomId || !chatroomId.includes('@chatroom')) return
    if (!Number.isFinite(sessionDetail?.groupMyMessages)) return
    syncGroupMembersMyCountFromDetail(chatroomId, sessionDetail!.groupMyMessages as number)
  }, [sessionDetail?.groupMyMessages, sessionDetail?.wxid, syncGroupMembersMyCountFromDetail])

  // 复制字段值到剪贴板
  const handleCopyField = useCallback(async (text: string, field: string) => {
    try {
      await navigator.clipboard.writeText(text)
      setCopiedField(field)
      setTimeout(() => setCopiedField(null), 1500)
    } catch {
      // fallback
      const textarea = document.createElement('textarea')
      textarea.value = text
      document.body.appendChild(textarea)
      textarea.select()
      document.execCommand('copy')
      document.body.removeChild(textarea)
      setCopiedField(field)
      setTimeout(() => setCopiedField(null), 1500)
    }
  }, [])

  // 连接数据库
  const connect = useCallback(async () => {
    setConnecting(true)
    setConnectionError(null)
    try {
      const scopePromise = resolveChatCacheScope()
      const result = await window.electronAPI.chat.connect()
      if (result.success) {
        setConnected(true)
        const wxidPromise = window.electronAPI.config.get('myWxid')
        await Promise.all([scopePromise, loadSessions(), loadMyAvatar()])
        // 获取 myWxid 用于匹配个人头像
        const wxid = await wxidPromise
        if (wxid) setMyWxid(wxid as string)
      } else {
        setConnectionError(result.error || '连接失败')
      }
    } catch (e) {
      setConnectionError(String(e))
    } finally {
      setConnecting(false)
    }
  }, [loadMyAvatar, resolveChatCacheScope])

  const handleAccountChanged = useCallback(async () => {
    senderAvatarCache.clear()
    senderAvatarLoading.clear()
    sessionContactProfileCacheRef.current.clear()
    pendingSessionContactEnrichRef.current.clear()
    sessionContactEnrichAttemptAtRef.current.clear()
    preloadImageKeysRef.current.clear()
    lastPreloadSessionRef.current = null
    pendingSessionLoadRef.current = null
    initialLoadRequestedSessionRef.current = null
    sessionSwitchRequestSeqRef.current += 1
    sessionWindowCacheRef.current.clear()
    setIsSessionSwitching(false)
    setSessionDetail(null)
    setIsRefreshingDetailStats(false)
    setIsLoadingRelationStats(false)
    setShowDetailPanel(false)
    setShowGroupMembersPanel(false)
    setGroupPanelMembers([])
    setGroupMembersError(null)
    setGroupMembersLoadingHint('')
    setIsRefreshingGroupMembers(false)
    setGroupMemberSearchKeyword('')
    groupMembersRequestSeqRef.current += 1
    groupMembersPanelCacheRef.current.clear()
    hasInitializedGroupMembersRef.current = false
    setIsLoadingGroupMembers(false)
    setCurrentSession(null)
    setSessions([])
    setMessages([])
    setShowScrollToBottom(false)
    suppressScrollToBottomButton(260)
    setSearchKeyword('')
    setConnectionError(null)
    setConnected(false)
    setConnecting(false)
    setHasMoreMessages(true)
    setHasMoreLater(false)
    const scope = await resolveChatCacheScope()
    hydrateSessionListCache(scope)
    await connect()
  }, [
    connect,
    resolveChatCacheScope,
    hydrateSessionListCache,
    setConnected,
    setConnecting,
    setConnectionError,
    setCurrentSession,
    setHasMoreLater,
    setHasMoreMessages,
    setMessages,
    setSearchKeyword,
    setSessionDetail,
    setShowDetailPanel,
    setShowGroupMembersPanel,
    suppressScrollToBottomButton,
    setSessions
  ])

  useEffect(() => {
    let canceled = false
    void configService.getAutoTranscribeVoice()
      .then((enabled) => {
        if (!canceled) {
          setAutoTranscribeVoiceEnabled(Boolean(enabled))
        }
      })
      .catch(() => {
        if (!canceled) {
          setAutoTranscribeVoiceEnabled(false)
        }
      })
    return () => {
      canceled = true
    }
  }, [])

  useEffect(() => {
    let cancelled = false
    void (async () => {
      const scope = await resolveChatCacheScope()
      if (cancelled) return
      hydrateSessionListCache(scope)
    })()

    return () => {
      cancelled = true
    }
  }, [resolveChatCacheScope, hydrateSessionListCache])

  // 同步 currentSessionId 到 ref
  useEffect(() => {
    currentSessionRef.current = currentSessionId
    isMessageListAtBottomRef.current = true
    topRangeLoadLockRef.current = false
    bottomRangeLoadLockRef.current = false
    setShowScrollToBottom(false)
    suppressScrollToBottomButton(260)
  }, [currentSessionId, suppressScrollToBottomButton])

  const hydrateSessionStatuses = useCallback(async (sessionList: ChatSession[]) => {
    const usernames = sessionList.map((s) => s.username).filter(Boolean)
    if (usernames.length === 0) return

    try {
      const result = await window.electronAPI.chat.getSessionStatuses(usernames)
      if (!result.success || !result.map) return

      const statusMap = result.map
      const { sessions: latestSessions } = useChatStore.getState()
      if (!Array.isArray(latestSessions) || latestSessions.length === 0) return

      let hasChanges = false
      const updatedSessions = latestSessions.map((session) => {
        const status = statusMap[session.username]
        if (!status) return session

        const nextIsFolded = status.isFolded ?? session.isFolded
        const nextIsMuted = status.isMuted ?? session.isMuted
        if (nextIsFolded === session.isFolded && nextIsMuted === session.isMuted) {
          return session
        }

        hasChanges = true
        return {
          ...session,
          isFolded: nextIsFolded,
          isMuted: nextIsMuted
        }
      })

      if (hasChanges) {
        setSessions(updatedSessions)
      }
    } catch (e) {
      console.warn('会话状态补齐失败:', e)
    }
  }, [setSessions])

  // 加载会话列表（优化：先返回基础数据，异步加载联系人信息）
  const loadSessions = async (options?: { silent?: boolean }) => {
    if (options?.silent) {
      setIsRefreshingSessions(true)
    } else {
      setLoadingSessions(true)
    }
    try {
      const scope = await resolveChatCacheScope()
      const result = await window.electronAPI.chat.getSessions()
      if (result.success && result.sessions) {
        // 确保 sessions 是数组
        const sessionsArray = Array.isArray(result.sessions) ? result.sessions : []
        const nextSessions = mergeSessions(sessionsArray)
        // 确保 nextSessions 也是数组
        if (Array.isArray(nextSessions)) {
          setSessions(nextSessions)
          sessionsRef.current = nextSessions
          persistSessionListCache(scope, nextSessions)
          void hydrateSessionStatuses(nextSessions)
          // 立即启动联系人信息加载，不再延迟 500ms
          void enrichSessionsContactInfo(nextSessions)
        } else {
          console.error('mergeSessions returned non-array:', nextSessions)
          const fallbackSessions = sessionsArray.map((session) => mergeSessionContactPresentation(session))
          setSessions(fallbackSessions)
          sessionsRef.current = fallbackSessions
          persistSessionListCache(scope, fallbackSessions)
          void hydrateSessionStatuses(fallbackSessions)
          void enrichSessionsContactInfo(fallbackSessions)
        }
      } else if (!result.success) {
        setConnectionError(result.error || '获取会话失败')
      }
    } catch (e) {
      console.error('加载会话失败:', e)
      setConnectionError('加载会话失败')
    } finally {
      if (options?.silent) {
        setIsRefreshingSessions(false)
      } else {
        setLoadingSessions(false)
      }
    }
  }

  // 分批异步加载联系人信息（优化：缓存优先 + 可持续队列 + 首屏优先批次）
  const enrichSessionsContactInfo = async (sessions: ChatSession[]) => {
    if (Array.isArray(sessions) && sessions.length > 0) {
      const now = Date.now()
      for (const session of sessions) {
        const username = String(session.username || '').trim()
        if (!username || isFoldPlaceholderSession(username)) continue

        const profileCache = sessionContactProfileCacheRef.current
        const cachedProfile = profileCache.get(username)
        if (cachedProfile && now - cachedProfile.updatedAt > SESSION_CONTACT_PROFILE_CACHE_TTL_MS) {
          profileCache.delete(username)
        }

        const hasAvatar = Boolean(normalizeSearchAvatarUrl(session.avatarUrl))
        const hasDisplayName = Boolean(resolveSessionDisplayName(session.displayName, username))
        if (hasAvatar && hasDisplayName) continue

        const profile = profileCache.get(username)
        const profileHasAvatar = Boolean(normalizeSearchAvatarUrl(profile?.avatarUrl))
        const profileHasDisplayName = Boolean(resolveSessionDisplayName(profile?.displayName, username))
        if (profileHasAvatar && profileHasDisplayName) continue

        const lastAttemptAt = sessionContactEnrichAttemptAtRef.current.get(username) || 0
        if (now - lastAttemptAt < SESSION_CONTACT_PROFILE_RETRY_INTERVAL_MS) continue

        pendingSessionContactEnrichRef.current.add(username)
      }
    }

    if (pendingSessionContactEnrichRef.current.size === 0) return
    if (isEnrichingRef.current) return

    isEnrichingRef.current = true
    enrichCancelledRef.current = false
    const totalStart = performance.now()
    const batchSize = 8
    let processedBatchCount = 0

    try {
      while (!enrichCancelledRef.current && pendingSessionContactEnrichRef.current.size > 0) {
        if (isScrollingRef.current) {
          while (isScrollingRef.current && !enrichCancelledRef.current) {
            await new Promise(resolve => setTimeout(resolve, 120))
          }
        }
        if (enrichCancelledRef.current) break

        const usernames = Array.from(pendingSessionContactEnrichRef.current).slice(0, batchSize)
        if (usernames.length === 0) break
        usernames.forEach((username) => pendingSessionContactEnrichRef.current.delete(username))

        const attemptAt = Date.now()
        usernames.forEach((username) => sessionContactEnrichAttemptAtRef.current.set(username, attemptAt))

        const batchStart = performance.now()
        const shouldRunImmediately = processedBatchCount < 2
        if (shouldRunImmediately) {
          await loadContactInfoBatch(usernames)
        } else {
          await new Promise<void>((resolve) => {
            if ('requestIdleCallback' in window) {
              window.requestIdleCallback(() => {
                void loadContactInfoBatch(usernames).finally(resolve)
              }, { timeout: 700 })
            } else {
              setTimeout(() => {
                void loadContactInfoBatch(usernames).finally(resolve)
              }, 80)
            }
          })
        }
        processedBatchCount += 1

        const batchTime = performance.now() - batchStart
        if (batchTime > 200) {
          console.warn(`[性能监控] 联系人批次 ${processedBatchCount} 耗时: ${batchTime.toFixed(2)}ms, batch=${usernames.length}`)
        }

        if (!enrichCancelledRef.current && pendingSessionContactEnrichRef.current.size > 0) {
          const delay = isScrollingRef.current ? 220 : 90
          await new Promise(resolve => setTimeout(resolve, delay))
        }
      }

      const totalTime = performance.now() - totalStart
      if (totalTime > 500) {
        console.info(`[性能监控] 联系人补齐总耗时: ${totalTime.toFixed(2)}ms`)
      }
    } catch (e) {
      console.error('加载联系人信息失败:', e)
    } finally {
      isEnrichingRef.current = false
      if (!enrichCancelledRef.current && pendingSessionContactEnrichRef.current.size > 0) {
        void enrichSessionsContactInfo([])
      }
    }
  }

  // 联系人信息更新队列（防抖批量更新，避免频繁重渲染）
  const contactUpdateQueueRef = useRef<Map<string, { displayName?: string; avatarUrl?: string; alias?: string }>>(new Map())
  const contactUpdateTimerRef = useRef<number | null>(null)
  const lastUpdateTimeRef = useRef(0)

  // 批量更新联系人信息（防抖，减少重渲染次数，增加延迟避免阻塞滚动）
  const flushContactUpdates = useCallback(() => {
    if (contactUpdateTimerRef.current) {
      clearTimeout(contactUpdateTimerRef.current)
      contactUpdateTimerRef.current = null
    }

    // 使用短防抖，让头像和昵称更快补齐但依然避免频繁重渲染
    contactUpdateTimerRef.current = window.setTimeout(() => {
      const updates = contactUpdateQueueRef.current
      if (updates.size === 0) return

      const now = Date.now()
      // 如果距离上次更新太近（小于250ms），继续延迟
      if (now - lastUpdateTimeRef.current < 250) {
        contactUpdateTimerRef.current = window.setTimeout(() => {
          flushContactUpdates()
        }, 250 - (now - lastUpdateTimeRef.current))
        return
      }

      const { sessions: currentSessions } = useChatStore.getState()
      if (!Array.isArray(currentSessions)) return

      let hasChanges = false
      const updatedSessions = currentSessions.map(session => {
        const update = updates.get(session.username)
        if (update) {
          const newDisplayName = update.displayName || session.displayName || session.username
          const newAvatarUrl = update.avatarUrl || session.avatarUrl
          const newAlias = update.alias || session.alias
          if (newDisplayName !== session.displayName || newAvatarUrl !== session.avatarUrl || newAlias !== session.alias) {
            hasChanges = true
            return {
              ...session,
              displayName: newDisplayName,
              avatarUrl: newAvatarUrl,
              alias: newAlias
            }
          }
        }
        return session
      })

      if (hasChanges) {
        const updateStart = performance.now()
        setSessions(updatedSessions)
        sessionsRef.current = updatedSessions
        lastUpdateTimeRef.current = Date.now()
        const updateTime = performance.now() - updateStart
        if (updateTime > 50) {
          console.warn(`[性能监控] setSessions更新耗时: ${updateTime.toFixed(2)}ms, 更新了 ${updates.size} 个联系人`)
        }
      }

      updates.clear()
      contactUpdateTimerRef.current = null
    }, 120)
  }, [setSessions])

  // 加载一批联系人信息并更新会话列表（优化：使用队列批量更新）
  const loadContactInfoBatch = async (usernames: string[]) => {
    const startTime = performance.now()
    try {
      // 在 DLL 调用前让出控制权（使用 setTimeout 0 代替 setImmediate）
      await new Promise(resolve => setTimeout(resolve, 0))

      const dllStart = performance.now()
      const result = await window.electronAPI.chat.enrichSessionsContactInfo(usernames) as {
        success: boolean
        contacts?: Record<string, { displayName?: string; avatarUrl?: string; alias?: string }>
        error?: string
      }
      const dllTime = performance.now() - dllStart

      // DLL 调用后再次让出控制权
      await new Promise(resolve => setTimeout(resolve, 0))

      const totalTime = performance.now() - startTime
      if (dllTime > 50 || totalTime > 100) {
        console.warn(`[性能监控] DLL调用耗时: ${dllTime.toFixed(2)}ms, 总耗时: ${totalTime.toFixed(2)}ms, usernames: ${usernames.length}`)
      }

      if (result.success && result.contacts) {
        // 将更新加入队列，用于侧边栏更新
        const contacts = result.contacts || {}
        for (const [username, contact] of Object.entries(contacts)) {
          const normalizedDisplayName = resolveSessionDisplayName(contact.displayName, username) || contact.displayName
          const normalizedAvatarUrl = normalizeSearchAvatarUrl(contact.avatarUrl)
          const normalizedAlias = normalizeSearchIdentityText(contact.alias)
          contactUpdateQueueRef.current.set(username, {
            displayName: normalizedDisplayName,
            avatarUrl: normalizedAvatarUrl,
            alias: normalizedAlias
          })

          if (normalizedDisplayName || normalizedAvatarUrl || normalizedAlias) {
            sessionContactProfileCacheRef.current.set(username, {
              displayName: normalizedDisplayName,
              avatarUrl: normalizedAvatarUrl,
              alias: normalizedAlias,
              updatedAt: Date.now()
            })
          }

          // 如果是自己的信息且当前个人头像为空，同步更新
          if (myWxid && username === myWxid && normalizedAvatarUrl && !myAvatarUrl) {

            setMyAvatarUrl(normalizedAvatarUrl)
          }

          // 【核心优化】同步更新全局发送者头像缓存，供 MessageBubble 使用
          senderAvatarCache.set(username, {
            avatarUrl: normalizedAvatarUrl,
            displayName: normalizedDisplayName
          })
        }
        // 触发批量更新
        flushContactUpdates()
      }
    } catch (e) {
      console.error('加载联系人信息批次失败:', e)
    }
  }

  // 刷新会话列表
  const handleRefresh = async () => {
    setJumpStartTime(0)
    setJumpEndTime(0)
    setHasMoreLater(false)
    await loadSessions({ silent: true })
  }

  // 刷新当前会话消息（增量更新新消息）
  const [isRefreshingMessages, setIsRefreshingMessages] = useState(false)

  /**
   * 极速增量刷新：基于最后一条消息时间戳，获取后续新消息
   * (由用户建议：记住上一条消息时间，自动取之后的并渲染，然后后台兜底全量同步)
   */
  const handleIncrementalRefresh = async () => {
    if (!currentSessionId || isRefreshingRef.current) return
    isRefreshingRef.current = true
    setIsRefreshingMessages(true)

    // 找出当前已渲染消息中的最大时间戳（使用 getState 获取最新状态，避免闭包过时导致重复）
    const currentMessages = useChatStore.getState().messages || []
    const lastMsg = currentMessages[currentMessages.length - 1]
    const minTime = lastMsg?.createTime || 0

    // 1. 优先执行增量查询并渲染（第一步）
    try {
      const result = await (window.electronAPI.chat as any).getNewMessages(currentSessionId, minTime) as {
        success: boolean;
        messages?: Message[];
        error?: string
      }

      if (result.success && result.messages && result.messages.length > 0) {
        // 过滤去重：必须对比实时的状态，防止在 handleRefreshMessages 运行期间导致的冲突
        const latestMessages = useChatStore.getState().messages || []
        const existingKeys = new Set(latestMessages.map(getMessageKey))
        const newOnes = result.messages.filter(m => !existingKeys.has(getMessageKey(m)))

        if (newOnes.length > 0) {
          appendMessages(newOnes, false)
          flashNewMessages(newOnes.map(getMessageKey))
          // 滚动到底部
          requestAnimationFrame(() => {
            const latestMessages = useChatStore.getState().messages || []
            const lastIndex = latestMessages.length - 1
            if (lastIndex >= 0 && messageVirtuosoRef.current) {
              messageVirtuosoRef.current.scrollToIndex({ index: lastIndex, align: 'end', behavior: 'auto' })
            } else if (messageListRef.current) {
              messageListRef.current.scrollTop = messageListRef.current.scrollHeight
            }
          })
        }
      }
    } catch (e) {
      console.warn('[IncrementalRefresh] 失败，将依赖全量同步兜底:', e)
    } finally {
      isRefreshingRef.current = false
      setIsRefreshingMessages(false)
    }
  }

  const handleRefreshMessages = async () => {
    if (!currentSessionId || isRefreshingRef.current) return
    setJumpStartTime(0)
    setJumpEndTime(0)
    setHasMoreLater(false)
    setIsRefreshingMessages(true)
    isRefreshingRef.current = true
    try {
      // 获取最新消息并增量添加
      const result = await window.electronAPI.chat.getLatestMessages(currentSessionId, 50) as {
        success: boolean;
        messages?: Message[];
        error?: string
      }
      if (!result.success || !result.messages) {
        return
      }
      // 使用实时状态进行去重对比
      const latestMessages = useChatStore.getState().messages || []
      const existing = new Set(latestMessages.map(getMessageKey))
      const lastMsg = latestMessages[latestMessages.length - 1]
      const lastTime = lastMsg?.createTime ?? 0

      const newMessages = result.messages.filter((msg) => {
        const key = getMessageKey(msg)
        if (existing.has(key)) return false
        // 这里的 lastTime 仅作参考过滤，主要的去重靠 key
        if (lastTime > 0 && msg.createTime < lastTime - 3600) return false // 仅过滤 1 小时之前的冗余请求
        return true
      })
      if (newMessages.length > 0) {
        appendMessages(newMessages, false)
        flashNewMessages(newMessages.map(getMessageKey))
        // 滚动到底部
        requestAnimationFrame(() => {
          const currentMessages = useChatStore.getState().messages || []
          const lastIndex = currentMessages.length - 1
          if (lastIndex >= 0 && messageVirtuosoRef.current) {
            messageVirtuosoRef.current.scrollToIndex({ index: lastIndex, align: 'end', behavior: 'auto' })
          } else if (messageListRef.current) {
            messageListRef.current.scrollTop = messageListRef.current.scrollHeight
          }
        })
      }
    } catch (e) {
      console.error('刷新消息失败:', e)
    } finally {
      isRefreshingRef.current = false
      setIsRefreshingMessages(false)
    }
  }
  // 消息批量大小控制（保持稳定，避免游标反复重建）
  const currentBatchSizeRef = useRef(50)

  const warmupGroupSenderProfiles = useCallback((usernames: string[], defer = false) => {
    if (!Array.isArray(usernames) || usernames.length === 0) return

    const runWarmup = () => {
      const batchPromise = loadContactInfoBatch(usernames)
      usernames.forEach(username => {
        if (!senderAvatarLoading.has(username)) {
          senderAvatarLoading.set(username, batchPromise.then(() => senderAvatarCache.get(username) || null))
        }
      })
      batchPromise.finally(() => {
        usernames.forEach(username => senderAvatarLoading.delete(username))
      })
    }

    if (defer) {
      if ('requestIdleCallback' in window) {
        window.requestIdleCallback(() => {
          runWarmup()
        }, { timeout: 1200 })
      } else {
        globalThis.setTimeout(runWarmup, 120)
      }
      return
    }

    runWarmup()
  }, [loadContactInfoBatch])

  // 加载消息
  const loadMessages = async (
    sessionId: string,
    offset = 0,
    startTime = 0,
    endTime = 0,
    ascending = false,
    options: LoadMessagesOptions = {}
  ) => {
    const listEl = messageListRef.current
    const session = sessionMapRef.current.get(sessionId)
    const unreadCount = session?.unreadCount ?? 0

    let messageLimit = currentBatchSizeRef.current

    if (offset === 0) {
      const preferredLimit = Number.isFinite(options.forceInitialLimit)
        ? Math.max(10, Math.floor(options.forceInitialLimit as number))
        : (unreadCount > 99 ? 30 : 40)
      currentBatchSizeRef.current = preferredLimit
      messageLimit = preferredLimit
    } else {
      // 同一会话内保持固定批量，避免后端游标因 batch 改变而重建
      messageLimit = currentBatchSizeRef.current
    }


    if (offset === 0) {
      suppressScrollToBottomButton(260)
      setShowScrollToBottom(false)
      setLoadingMessages(true)
      // 切会话时保留旧内容作为过渡，避免大面积闪烁
      setHasInitialMessages(true)
    } else {
      setLoadingMore(true)
    }

    const visibleRange = visibleMessageRangeRef.current
    const visibleStartIndex = Math.min(
      Math.max(visibleRange.startIndex, 0),
      Math.max(messages.length - 1, 0)
    )
    const anchorMessageKeyBeforePrepend = offset > 0 && messages.length > 0
      ? getMessageKey(messages[visibleStartIndex])
      : null

    // 记录加载前的第一条消息元素（非虚拟列表回退路径）
    const firstMsgEl = listEl?.querySelector('.message-wrapper') as HTMLElement | null

    try {
      const useLatestPath = offset === 0 && startTime === 0 && endTime === 0 && !ascending && options.preferLatestPath
      const result = (useLatestPath
        ? await window.electronAPI.chat.getLatestMessages(sessionId, messageLimit)
        : await window.electronAPI.chat.getMessages(sessionId, offset, messageLimit, startTime, endTime, ascending)
      ) as {
        success: boolean;
        messages?: Message[];
        hasMore?: boolean;
        nextOffset?: number;
        error?: string
      }
      const isStaleSwitchRequest = Boolean(
        options.switchRequestSeq && options.switchRequestSeq !== sessionSwitchRequestSeqRef.current
      )
      const isStaleInSessionJumpRequest = Boolean(
        options.inSessionJumpRequestSeq && options.inSessionJumpRequestSeq !== inSessionResultJumpRequestSeqRef.current
      )
      if (isStaleSwitchRequest || isStaleInSessionJumpRequest) {
        return
      }
      if (options.switchRequestSeq && options.switchRequestSeq !== sessionSwitchRequestSeqRef.current) {
        return
      }
      if (currentSessionRef.current !== sessionId) {
        return
      }
      if (result.success && result.messages) {
        const resultMessages = result.messages
        if (offset === 0) {
          setMessages(resultMessages)
          persistSessionPreviewCache(sessionId, resultMessages)
          if (resultMessages.length === 0) {
            setNoMessageTable(true)
            setHasMoreMessages(false)
          }

          // 群聊发送者信息补齐改为非阻塞执行，避免影响首屏切换
          const isGroup = sessionId.includes('@chatroom')
          if (isGroup && resultMessages.length > 0) {
            const unknownSenders = [...new Set(resultMessages
              .filter(m => m.isSend !== 1 && m.senderUsername && !senderAvatarCache.has(m.senderUsername))
              .map(m => m.senderUsername as string)
            )]
            if (unknownSenders.length > 0) {
              warmupGroupSenderProfiles(unknownSenders, options.deferGroupSenderWarmup === true)
            }
          }

          // 日期跳转时滚动到顶部，否则滚动到底部
          const loadedMessages = result.messages
          requestAnimationFrame(() => {
            if (isDateJumpRef.current) {
              if (messageVirtuosoRef.current && resultMessages.length > 0) {
                messageVirtuosoRef.current.scrollToIndex({ index: 0, align: 'start', behavior: 'auto' })
              } else if (messageListRef.current) {
                messageListRef.current.scrollTop = 0
              }
              isDateJumpRef.current = false
              return
            }

            const lastIndex = resultMessages.length - 1
            if (lastIndex >= 0 && messageVirtuosoRef.current) {
              messageVirtuosoRef.current.scrollToIndex({ index: lastIndex, align: 'end', behavior: 'auto' })
            } else if (messageListRef.current) {
              messageListRef.current.scrollTop = messageListRef.current.scrollHeight
            }
          })
        } else {
          appendMessages(resultMessages, true)

          // 加载更多也同样处理发送者信息预取
          const isGroup = sessionId.includes('@chatroom')
          if (isGroup) {
            const unknownSenders = [...new Set(resultMessages
              .filter(m => m.isSend !== 1 && m.senderUsername && !senderAvatarCache.has(m.senderUsername))
              .map(m => m.senderUsername as string)
            )]
            if (unknownSenders.length > 0) {
              warmupGroupSenderProfiles(unknownSenders, false)
            }
          }

          // 加载更早消息后保持视口锚点，避免跳屏
          const appendedMessages = result.messages
          requestAnimationFrame(() => {
            if (messageVirtuosoRef.current) {
              if (anchorMessageKeyBeforePrepend) {
                const latestMessages = useChatStore.getState().messages || []
                const anchorIndex = latestMessages.findIndex((msg) => getMessageKey(msg) === anchorMessageKeyBeforePrepend)
                if (anchorIndex >= 0) {
                  messageVirtuosoRef.current.scrollToIndex({ index: anchorIndex, align: 'start', behavior: 'auto' })
                  return
                }
              }
              if (resultMessages.length > 0) {
                messageVirtuosoRef.current.scrollToIndex({ index: resultMessages.length, align: 'start', behavior: 'auto' })
              }
              return
            }

            if (firstMsgEl && listEl) {
              listEl.scrollTop = firstMsgEl.offsetTop - 80
            }
          })
        }
        // 日期跳转(ascending=true)：不往上加载更早的，往下加载更晚的
        if (ascending) {
          setHasMoreMessages(false)
          setHasMoreLater(result.hasMore ?? false)
        } else {
          setHasMoreMessages(result.hasMore ?? false)
          if (offset === 0) {
            if (endTime > 0) {
              setHasMoreLater(true)
            } else {
              setHasMoreLater(false)
            }
          }
        }
        const nextOffset = typeof result.nextOffset === 'number'
          ? result.nextOffset
          : offset + resultMessages.length
        setCurrentOffset(nextOffset)
      } else if (!result.success) {
        setNoMessageTable(true)
        setHasMoreMessages(false)
      }
    } catch (e) {
      console.error('加载消息失败:', e)
      setConnectionError('加载消息失败')
      setHasMoreMessages(false)
      if (offset === 0 && currentSessionRef.current === sessionId) {
        setMessages([])
      }
    } finally {
      setLoadingMessages(false)
      setLoadingMore(false)
      if (offset === 0 && pendingSessionLoadRef.current === sessionId) {
        if (!options.switchRequestSeq || options.switchRequestSeq === sessionSwitchRequestSeqRef.current) {
          pendingSessionLoadRef.current = null
          initialLoadRequestedSessionRef.current = null
          setIsSessionSwitching(false)

          // 处理从全局搜索跳转过来的情况
          const pendingSearch = pendingInSessionSearchRef.current
          if (pendingSearch?.sessionId === sessionId) {
            pendingInSessionSearchRef.current = null
            void applyPendingInSessionSearch(sessionId, pendingSearch, options.switchRequestSeq)
          }
        }
      }
    }
  }

  const handleJumpDateSelect = useCallback((date: Date, options: { sessionId?: string; switchRequestSeq?: number } = {}) => {
    const targetSessionId = String(options.sessionId || currentSessionRef.current || currentSessionId || '').trim()
    if (!targetSessionId) return
    const targetDate = new Date(date)
    const end = Math.floor(targetDate.setHours(23, 59, 59, 999) / 1000)
    // 日期跳转采用“锚点定位”而非“当天过滤”：
    // 先定位到当日附近，再允许上下滚动跨天浏览。
    isDateJumpRef.current = false
    setCurrentOffset(0)
    setJumpStartTime(0)
    setJumpEndTime(end)
    setShowJumpPopover(false)
    void loadMessages(targetSessionId, 0, 0, end, false, {
      switchRequestSeq: options.switchRequestSeq
    })
  }, [currentSessionId, loadMessages])

  const cancelInSessionSearchTasks = useCallback(() => {
    inSessionSearchGenRef.current += 1
    if (inSessionSearchTimerRef.current) {
      clearTimeout(inSessionSearchTimerRef.current)
      inSessionSearchTimerRef.current = null
    }
    setInSessionSearching(false)
    setInSessionEnriching(false)
  }, [])

  const cancelInSessionSearchJump = useCallback(() => {
    inSessionResultJumpRequestSeqRef.current += 1
    if (inSessionResultJumpTimerRef.current) {
      window.clearTimeout(inSessionResultJumpTimerRef.current)
      inSessionResultJumpTimerRef.current = null
    }
  }, [])

  const resolveSearchSessionContext = useCallback((sessionId?: string) => {
    const normalizedSessionId = String(sessionId || currentSessionRef.current || currentSessionId || '').trim()
    const currentSearchSession = normalizedSessionId && Array.isArray(sessions)
      ? sessions.find(session => session.username === normalizedSessionId)
      : undefined
    const resolvedSession = currentSearchSession
      ? (
          standaloneSessionWindow &&
          normalizedInitialSessionId &&
          currentSearchSession.username === normalizedInitialSessionId
            ? {
                ...currentSearchSession,
                displayName: currentSearchSession.displayName || fallbackDisplayName || currentSearchSession.username,
                avatarUrl: currentSearchSession.avatarUrl || fallbackAvatarUrl || undefined
              }
            : currentSearchSession
        )
      : (
          normalizedSessionId
            ? {
                username: normalizedSessionId,
                displayName: fallbackDisplayName || normalizedSessionId,
                avatarUrl: fallbackAvatarUrl || undefined
              } as ChatSession
            : undefined
        )
    const isGroupSearchSession = Boolean(
      resolvedSession && (
        isGroupChatSession(resolvedSession.username) ||
        (
          standaloneSessionWindow &&
          resolvedSession.username === normalizedInitialSessionId &&
          normalizedStandaloneInitialContactType === 'group'
        )
      )
    )
    const isDirectSearchSession = Boolean(
      resolvedSession &&
      isSingleContactSession(resolvedSession.username) &&
      !isGroupSearchSession
    )
    return {
      normalizedSessionId,
      resolvedSession,
      isDirectSearchSession,
      isGroupSearchSession,
      resolvedSessionDisplayName: normalizeSearchIdentityText(resolvedSession?.displayName) || normalizedSessionId || undefined,
      resolvedSessionAvatarUrl: normalizeSearchAvatarUrl(resolvedSession?.avatarUrl)
    }
  }, [
    currentSessionId,
    fallbackAvatarUrl,
    fallbackDisplayName,
    normalizedInitialSessionId,
    normalizedStandaloneInitialContactType,
    sessions,
    standaloneSessionWindow,
    isGroupChatSession
  ])

  const hydrateInSessionSearchResults = useCallback((rawMessages: Message[], sessionId?: string) => {
    const sortedMessages = sortMessagesByCreateTimeDesc(rawMessages || [])
    if (sortedMessages.length === 0) return []

    const {
      normalizedSessionId,
      isDirectSearchSession,
      isGroupSearchSession,
      resolvedSessionDisplayName,
      resolvedSessionAvatarUrl
    } = resolveSearchSessionContext(sessionId)
    const resolvedSessionUsernameFallback = resolveSearchSenderUsernameFallback(normalizedSessionId)

    return sortedMessages.map((message) => {
      const senderUsername = normalizeSearchIdentityText(message.senderUsername) || message.senderUsername
      const inferredSelfFromSender = isGroupSearchSession && isCurrentUserSearchIdentity(senderUsername, myWxid)
      const senderDisplayName = resolveSearchSenderDisplayName(
        message.senderDisplayName,
        senderUsername,
        normalizedSessionId
      )
      const senderUsernameFallback = resolveSearchSenderUsernameFallback(senderUsername)
      const senderAvatarUrl = normalizeSearchAvatarUrl(message.senderAvatarUrl)
      const nextIsSend = inferredSelfFromSender ? 1 : message.isSend
      const nextSenderDisplayName = nextIsSend === 1
        ? (senderDisplayName || '我')
        : (
            senderDisplayName ||
            (isDirectSearchSession ? resolvedSessionDisplayName : undefined) ||
            senderUsernameFallback ||
            (isDirectSearchSession ? resolvedSessionUsernameFallback : undefined) ||
            '未知'
          )
      const nextSenderAvatarUrl = nextIsSend === 1
        ? (senderAvatarUrl || myAvatarUrl)
        : (senderAvatarUrl || (isDirectSearchSession ? resolvedSessionAvatarUrl : undefined))

      if (
        senderUsername === message.senderUsername &&
        nextIsSend === message.isSend &&
        nextSenderDisplayName === message.senderDisplayName &&
        nextSenderAvatarUrl === message.senderAvatarUrl
      ) {
        return message
      }

      return {
        ...message,
        isSend: nextIsSend,
        senderUsername,
        senderDisplayName: nextSenderDisplayName,
        senderAvatarUrl: nextSenderAvatarUrl
      }
    })
  }, [currentSessionId, myAvatarUrl, myWxid, resolveSearchSessionContext])

  const enrichMessagesWithSenderProfiles = useCallback(async (rawMessages: Message[], sessionId?: string) => {
    let messages = hydrateInSessionSearchResults(rawMessages, sessionId)
    if (messages.length === 0) return []

    const sessionContext = resolveSearchSessionContext(sessionId)
    const { normalizedSessionId, isDirectSearchSession, isGroupSearchSession } = sessionContext
    let resolvedSessionDisplayName = sessionContext.resolvedSessionDisplayName
    let resolvedSessionAvatarUrl = sessionContext.resolvedSessionAvatarUrl

    if (
      normalizedSessionId &&
      isDirectSearchSession &&
      (
        !resolvedSessionAvatarUrl ||
        !resolvedSessionDisplayName ||
        resolvedSessionDisplayName === normalizedSessionId
      )
    ) {
      try {
        const result = await window.electronAPI.chat.enrichSessionsContactInfo([normalizedSessionId])
        const profile = result.success && result.contacts ? result.contacts[normalizedSessionId] : undefined
        const profileDisplayName = resolveSearchSenderDisplayName(
          profile?.displayName,
          normalizedSessionId,
          normalizedSessionId
        )
        const profileAvatarUrl = normalizeSearchAvatarUrl(profile?.avatarUrl)
        if (profileDisplayName) {
          resolvedSessionDisplayName = profileDisplayName
        }
        if (profileAvatarUrl) {
          resolvedSessionAvatarUrl = profileAvatarUrl
        }
        if (profileDisplayName || profileAvatarUrl) {
          messages = messages.map((message) => {
            if (message.isSend === 1) return message
            const preservedDisplayName = resolveSearchSenderDisplayName(
              message.senderDisplayName,
              message.senderUsername,
              normalizedSessionId
            )
            return {
              ...message,
              senderDisplayName: preservedDisplayName ||
                profileDisplayName ||
                resolvedSessionDisplayName ||
                resolveSearchSenderUsernameFallback(message.senderUsername) ||
                message.senderDisplayName,
              senderAvatarUrl: normalizeSearchAvatarUrl(message.senderAvatarUrl) || profileAvatarUrl || resolvedSessionAvatarUrl || message.senderAvatarUrl
            }
          })
        }
      } catch {
        // ignore session profile enrichment errors and keep raw search results usable
      }
    }

    if (normalizedSessionId && isGroupSearchSession) {
      const missingSenderMessages = messages.filter((message) => {
        if (message.localId <= 0) return false
        if (message.isSend === 1) return false
        return !normalizeSearchIdentityText(message.senderUsername)
      })

      if (missingSenderMessages.length > 0) {
        const messageByLocalId = new Map<number, Message>()
        for (let index = 0; index < missingSenderMessages.length; index += 8) {
          const batch = missingSenderMessages.slice(index, index + 8)
          const detailResults = await Promise.allSettled(
            batch.map(async (message) => {
              const result = await window.electronAPI.chat.getMessage(normalizedSessionId, message.localId)
              if (!result.success || !result.message) return null
              return {
                localId: message.localId,
                message: hydrateInSessionSearchResults([{
                  ...message,
                  ...result.message,
                  parsedContent: message.parsedContent || result.message.parsedContent,
                  rawContent: message.rawContent || result.message.rawContent,
                  content: message.content || result.message.content
                } as Message], normalizedSessionId)[0]
              }
            })
          )

          for (const detail of detailResults) {
            if (detail.status !== 'fulfilled' || !detail.value?.message) continue
            messageByLocalId.set(detail.value.localId, detail.value.message)
          }
        }

        if (messageByLocalId.size > 0) {
          messages = messages.map(message => messageByLocalId.get(message.localId) || message)
        }
      }
    }

    const profileMap = new Map<string, { avatarUrl?: string; displayName?: string }>()
    const pendingLoads: Array<Promise<void>> = []
    const missingUsernames: string[] = []

    const usernames = [...new Set(
      messages
        .map((message) => normalizeSearchIdentityText(message.senderUsername))
        .filter((username): username is string => Boolean(username))
    )]

    for (const username of usernames) {
      const cached = senderAvatarCache.get(username)
      if (cached) {
        profileMap.set(username, cached)
        continue
      }

      const pending = senderAvatarLoading.get(username)
      if (pending) {
        pendingLoads.push(
          pending.then((profile) => {
            if (profile) {
              profileMap.set(username, profile)
            }
          }).catch(() => {})
        )
        continue
      }

      missingUsernames.push(username)
    }

    if (pendingLoads.length > 0) {
      await Promise.allSettled(pendingLoads)
    }

    if (missingUsernames.length > 0) {
      try {
        const result = await window.electronAPI.chat.enrichSessionsContactInfo(missingUsernames)
        if (result.success && result.contacts) {
          for (const [username, profile] of Object.entries(result.contacts)) {
            const normalizedProfile = {
              avatarUrl: profile.avatarUrl,
              displayName: profile.displayName
            }
            profileMap.set(username, normalizedProfile)
            senderAvatarCache.set(username, normalizedProfile)
          }
        }
      } catch {
        // ignore sender enrichment errors and keep raw search results usable
      }
    }

    return messages.map((message) => {
      const sender = normalizeSearchIdentityText(message.senderUsername)
      const profile = sender ? profileMap.get(sender) : undefined
      const inferredSelfFromSender = isGroupSearchSession && isCurrentUserSearchIdentity(sender, myWxid)
      const profileDisplayName = resolveSearchSenderDisplayName(
        profile?.displayName,
        sender,
        normalizedSessionId
      )
      const currentSenderDisplayName = resolveSearchSenderDisplayName(
        message.senderDisplayName,
        sender,
        normalizedSessionId
      )
      const senderUsernameFallback = resolveSearchSenderUsernameFallback(sender)
      const sessionUsernameFallback = resolveSearchSenderUsernameFallback(normalizedSessionId)
      const currentSenderAvatarUrl = normalizeSearchAvatarUrl(message.senderAvatarUrl)
      const nextIsSend = inferredSelfFromSender ? 1 : message.isSend
      const nextSenderDisplayName = nextIsSend === 1
        ? (currentSenderDisplayName || profileDisplayName || '我')
        : (
            profileDisplayName ||
            currentSenderDisplayName ||
            (isDirectSearchSession ? resolvedSessionDisplayName : undefined) ||
            senderUsernameFallback ||
            (isDirectSearchSession ? sessionUsernameFallback : undefined) ||
            '未知'
          )
      const nextSenderAvatarUrl = nextIsSend === 1
        ? (currentSenderAvatarUrl || myAvatarUrl || normalizeSearchAvatarUrl(profile?.avatarUrl))
        : (
            currentSenderAvatarUrl ||
            normalizeSearchAvatarUrl(profile?.avatarUrl) ||
            (isDirectSearchSession ? resolvedSessionAvatarUrl : undefined)
          )

      if (
        sender === message.senderUsername &&
        nextIsSend === message.isSend &&
        nextSenderDisplayName === message.senderDisplayName &&
        nextSenderAvatarUrl === message.senderAvatarUrl
      ) {
        return message
      }

      return {
        ...message,
        isSend: nextIsSend,
        senderUsername: sender || message.senderUsername,
        senderDisplayName: nextSenderDisplayName,
        senderAvatarUrl: nextSenderAvatarUrl
      }
    })
  }, [
    currentSessionId,
    hydrateInSessionSearchResults,
    myAvatarUrl,
    myWxid,
    resolveSearchSessionContext
  ])

  const applyPendingInSessionSearch = useCallback(async (
    sessionId: string,
    payload: PendingInSessionSearchPayload,
    switchRequestSeq?: number
  ) => {
    const normalizedSessionId = String(sessionId || '').trim()
    if (!normalizedSessionId) return
    if (payload.sessionId !== normalizedSessionId) return
    if (switchRequestSeq && switchRequestSeq !== sessionSwitchRequestSeqRef.current) return
    if (currentSessionRef.current !== normalizedSessionId) return

    const immediateResults = hydrateInSessionSearchResults(payload.results || [], normalizedSessionId)
    setShowInSessionSearch(true)
    setInSessionQuery(payload.keyword)
    setInSessionSearchError(null)
    setInSessionResults(immediateResults)

    if (payload.firstMsgTime > 0) {
      handleJumpDateSelect(new Date(payload.firstMsgTime * 1000), {
        sessionId: normalizedSessionId,
        switchRequestSeq
      })
    }

    setInSessionEnriching(true)
    void enrichMessagesWithSenderProfiles(immediateResults, normalizedSessionId).then((enrichedResults) => {
      if (switchRequestSeq && switchRequestSeq !== sessionSwitchRequestSeqRef.current) return
      if (currentSessionRef.current !== normalizedSessionId) return
      setInSessionResults(enrichedResults)
    }).catch(() => {
      // ignore sender enrichment errors and keep current search results usable
    }).finally(() => {
      if (switchRequestSeq && switchRequestSeq !== sessionSwitchRequestSeqRef.current) return
      if (currentSessionRef.current !== normalizedSessionId) return
      setInSessionEnriching(false)
    })
  }, [enrichMessagesWithSenderProfiles, handleJumpDateSelect, hydrateInSessionSearchResults])

  // 加载更晚的消息
  const loadLaterMessages = useCallback(async () => {
    if (!currentSessionId || isLoadingMore || isLoadingMessages || messages.length === 0) return

    setLoadingMore(true)
    try {
      const lastMsg = messages[messages.length - 1]
      // 从最后一条消息的时间开始往后找
      const result = await window.electronAPI.chat.getMessages(currentSessionId, 0, 50, lastMsg.createTime, 0, true) as {
        success: boolean;
        messages?: Message[];
        hasMore?: boolean;
        error?: string
      }

      if (result.success && result.messages) {
        // 过滤掉已经在列表中的重复消息
        const existingKeys = messageKeySetRef.current
        const newMsgs = result.messages.filter(m => !existingKeys.has(getMessageKey(m)))

        if (newMsgs.length > 0) {
          appendMessages(newMsgs, false)
        }
        setHasMoreLater(result.hasMore ?? false)
      }
    } catch (e) {
      console.error('加载后续消息失败:', e)
    } finally {
      setLoadingMore(false)
    }
  }, [currentSessionId, isLoadingMore, isLoadingMessages, messages, getMessageKey, appendMessages, setHasMoreLater, setLoadingMore])

  const refreshSessionIncrementally = useCallback(async (sessionId: string, switchRequestSeq?: number) => {
    const currentMessages = useChatStore.getState().messages || []
    const lastMsg = currentMessages[currentMessages.length - 1]
    const minTime = lastMsg?.createTime || 0
    if (!sessionId || minTime <= 0) return

    try {
      const result = await window.electronAPI.chat.getNewMessages(sessionId, minTime, 120) as {
        success: boolean
        messages?: Message[]
        error?: string
      }
      if (switchRequestSeq && switchRequestSeq !== sessionSwitchRequestSeqRef.current) return
      if (currentSessionRef.current !== sessionId) return
      if (!result.success || !Array.isArray(result.messages) || result.messages.length === 0) return

      const latestMessages = useChatStore.getState().messages || []
      const existing = new Set(latestMessages.map(getMessageKey))
      const newMessages = result.messages.filter((msg) => !existing.has(getMessageKey(msg)))
      if (newMessages.length > 0) {
        appendMessages(newMessages, false)
      }
    } catch (error) {
      console.warn('[SessionCache] 增量刷新失败:', error)
    }
  }, [appendMessages, getMessageKey])

  // 选择会话
  const selectSessionById = useCallback((sessionId: string, options: { force?: boolean } = {}) => {
    const normalizedSessionId = String(sessionId || '').trim()
    if (!normalizedSessionId || (!options.force && normalizedSessionId === currentSessionId)) return
    const switchRequestSeq = sessionSwitchRequestSeqRef.current + 1
    sessionSwitchRequestSeqRef.current = switchRequestSeq
    currentSessionRef.current = normalizedSessionId

    const pendingSearch = pendingInSessionSearchRef.current
    const shouldPreservePendingSearch = pendingSearch?.sessionId === normalizedSessionId
    cancelInSessionSearchTasks()
    cancelInSessionSearchJump()

    // 清空会话内搜索状态（除非是从全局搜索跳转过来）
    if (!shouldPreservePendingSearch) {
      pendingInSessionSearchRef.current = null
      setShowInSessionSearch(false)
      setInSessionQuery('')
      setInSessionResults([])
      setInSessionSearchError(null)
    }

    setCurrentSession(normalizedSessionId, { preserveMessages: false })
    setNoMessageTable(false)

    const restoredFromWindowCache = restoreSessionWindowCache(normalizedSessionId)
    if (restoredFromWindowCache) {
      pendingSessionLoadRef.current = null
      initialLoadRequestedSessionRef.current = null
      setIsSessionSwitching(false)

      // 处理从全局搜索跳转过来的情况
      if (pendingSearch?.sessionId === normalizedSessionId) {
        pendingInSessionSearchRef.current = null
        void applyPendingInSessionSearch(normalizedSessionId, pendingSearch, switchRequestSeq)
      }

      void refreshSessionIncrementally(normalizedSessionId, switchRequestSeq)
    } else {
      pendingSessionLoadRef.current = normalizedSessionId
      initialLoadRequestedSessionRef.current = normalizedSessionId
      setIsSessionSwitching(true)
      void hydrateSessionPreview(normalizedSessionId)
      setCurrentOffset(0)
      setJumpStartTime(0)
      setJumpEndTime(0)
      void loadMessages(normalizedSessionId, 0, 0, 0, false, {
        preferLatestPath: true,
        deferGroupSenderWarmup: true,
        forceInitialLimit: 30,
        switchRequestSeq
      })
    }
    // 切换会话后回到正常聊天窗口：收起详情侧栏，详情需手动再次展开
    setShowJumpPopover(false)
    setShowDetailPanel(false)
    setShowGroupMembersPanel(false)
    setGroupMemberSearchKeyword('')
    setGroupMembersError(null)
    setGroupMembersLoadingHint('')
    setIsRefreshingGroupMembers(false)
    groupMembersRequestSeqRef.current += 1
    setIsLoadingGroupMembers(false)
    setSessionDetail(null)
    setIsRefreshingDetailStats(false)
    setIsLoadingRelationStats(false)
  }, [
    currentSessionId,
    setCurrentSession,
    restoreSessionWindowCache,
    refreshSessionIncrementally,
    hydrateSessionPreview,
    loadMessages,
    cancelInSessionSearchJump,
    cancelInSessionSearchTasks,
    applyPendingInSessionSearch
  ])

  // 选择会话
  const handleSelectSession = (session: ChatSession) => {
    // 点击折叠群入口，切换到折叠群视图
    if (session.username.toLowerCase().includes('placeholder_foldgroup')) {
      setFoldedView(true)
      return
    }
    selectSessionById(session.username)
  }

  // 搜索过滤
  const handleSearch = (keyword: string) => {
    setSearchKeyword(keyword)
  }

  // 关闭搜索框
  const handleCloseSearch = () => {
    setSearchKeyword('')
  }

  // 会话内搜索
  const inSessionSearchTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
  const inSessionSearchGenRef = useRef(0)
  const handleInSessionSearch = useCallback(async (keyword: string) => {
    setInSessionQuery(keyword)
    if (inSessionSearchTimerRef.current) clearTimeout(inSessionSearchTimerRef.current)
    inSessionSearchTimerRef.current = null
    inSessionSearchGenRef.current += 1
    if (!keyword.trim() || !currentSessionId) {
      setInSessionResults([])
      setInSessionSearchError(null)
      setInSessionSearching(false)
      setInSessionEnriching(false)
      return
    }
    setInSessionSearchError(null)
    const gen = inSessionSearchGenRef.current
    const sid = currentSessionId
    inSessionSearchTimerRef.current = setTimeout(async () => {
      if (gen !== inSessionSearchGenRef.current) return
      setInSessionSearching(true)
      try {
        const res = await window.electronAPI.chat.searchMessages(keyword.trim(), sid, 50, 0)
        if (!res?.success) {
          throw new Error(res?.error || '搜索失败')
        }
        if (gen !== inSessionSearchGenRef.current || currentSessionRef.current !== sid) return
        const messages = hydrateInSessionSearchResults(res?.messages || [], sid)
        setInSessionResults(messages)
        setInSessionSearchError(null)

        setInSessionEnriching(true)
        void enrichMessagesWithSenderProfiles(messages, sid).then((enriched) => {
          if (gen !== inSessionSearchGenRef.current || currentSessionRef.current !== sid) return
          setInSessionResults(enriched)
        }).catch(() => {
          // ignore sender enrichment errors and keep current search results usable
        }).finally(() => {
          if (gen !== inSessionSearchGenRef.current || currentSessionRef.current !== sid) return
          setInSessionEnriching(false)
        })
      } catch (error) {
        if (gen !== inSessionSearchGenRef.current || currentSessionRef.current !== sid) return
        setInSessionResults([])
        setInSessionSearchError(error instanceof Error ? error.message : String(error))
        setInSessionEnriching(false)
      } finally {
        if (gen === inSessionSearchGenRef.current) setInSessionSearching(false)
      }
    }, 500)
  }, [currentSessionId, enrichMessagesWithSenderProfiles, hydrateInSessionSearchResults])

  const handleToggleInSessionSearch = useCallback(() => {
    setShowInSessionSearch(v => {
      if (v) {
        cancelInSessionSearchTasks()
        cancelInSessionSearchJump()
        setInSessionQuery('')
        setInSessionResults([])
        setInSessionSearchError(null)
      } else {
        setTimeout(() => inSessionSearchRef.current?.focus(), 50)
      }
      return !v
    })
  }, [cancelInSessionSearchJump, cancelInSessionSearchTasks])

  // 全局消息搜索
  const globalMsgSearchTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
  const globalMsgSearchGenRef = useRef(0)
  const ensureGlobalMsgSearchNotStale = useCallback((gen: number) => {
    if (gen !== globalMsgSearchGenRef.current) {
      throw new Error(GLOBAL_MSG_SEARCH_CANCELED_ERROR)
    }
  }, [])

  const runLegacyGlobalMsgSearch = useCallback(async (
    keyword: string,
    sessionList: ChatSession[],
    gen: number
  ): Promise<GlobalMsgSearchResult[]> => {
    const results: GlobalMsgSearchResult[] = []
    for (let index = 0; index < sessionList.length; index += GLOBAL_MSG_LEGACY_CONCURRENCY) {
      ensureGlobalMsgSearchNotStale(gen)
      const chunk = sessionList.slice(index, index + GLOBAL_MSG_LEGACY_CONCURRENCY)
      const chunkResults = await Promise.allSettled(
        chunk.map(async (session) => {
          const res = await window.electronAPI.chat.searchMessages(keyword, session.username, GLOBAL_MSG_PER_SESSION_LIMIT, 0)
          if (!res?.success) {
            throw new Error(res?.error || `搜索失败: ${session.username}`)
          }
          return normalizeGlobalMsgSearchMessages(res?.messages || [], session.username)
        })
      )
      ensureGlobalMsgSearchNotStale(gen)

      for (const item of chunkResults) {
        if (item.status === 'rejected') {
          throw item.reason instanceof Error ? item.reason : new Error(String(item.reason))
        }
        if (item.value.length > 0) {
          results.push(...item.value)
        }
      }
    }
    return sortMessagesByCreateTimeDesc(results)
  }, [ensureGlobalMsgSearchNotStale])

  const compareGlobalMsgSearchShadow = useCallback((
    keyword: string,
    stagedResults: GlobalMsgSearchResult[],
    legacyResults: GlobalMsgSearchResult[]
  ) => {
    const stagedMap = buildGlobalMsgSearchSessionLocalIds(stagedResults)
    const legacyMap = buildGlobalMsgSearchSessionLocalIds(legacyResults)
    const stagedSessions = Object.keys(stagedMap).sort()
    const legacySessions = Object.keys(legacyMap).sort()

    let mismatch = stagedSessions.length !== legacySessions.length
    if (!mismatch) {
      for (let i = 0; i < stagedSessions.length; i += 1) {
        if (stagedSessions[i] !== legacySessions[i]) {
          mismatch = true
          break
        }
      }
    }

    if (!mismatch) {
      for (const sessionId of stagedSessions) {
        const stagedIds = stagedMap[sessionId] || []
        const legacyIds = legacyMap[sessionId] || []
        if (stagedIds.length !== legacyIds.length) {
          mismatch = true
          break
        }
        for (let i = 0; i < stagedIds.length; i += 1) {
          if (stagedIds[i] !== legacyIds[i]) {
            mismatch = true
            break
          }
        }
        if (mismatch) break
      }
    }

    if (!mismatch) {
      const stagedOrder = stagedResults.map((row) => `${row.sessionId}:${row.localId || 0}:${row.messageKey || ''}`)
      const legacyOrder = legacyResults.map((row) => `${row.sessionId}:${row.localId || 0}:${row.messageKey || ''}`)
      if (stagedOrder.length !== legacyOrder.length) {
        mismatch = true
      } else {
        for (let i = 0; i < stagedOrder.length; i += 1) {
          if (stagedOrder[i] !== legacyOrder[i]) {
            mismatch = true
            break
          }
        }
      }
    }

    if (!mismatch) return
    console.warn('[GlobalMsgSearch] shadow compare mismatch', {
      keyword,
      stagedSessionCount: stagedSessions.length,
      legacySessionCount: legacySessions.length,
      stagedResultCount: stagedResults.length,
      legacyResultCount: legacyResults.length,
      stagedMap,
      legacyMap
    })
  }, [])

  const handleGlobalMsgSearch = useCallback(async (keyword: string) => {
    const normalizedKeyword = keyword.trim()
    setGlobalMsgQuery(keyword)
    if (globalMsgSearchTimerRef.current) clearTimeout(globalMsgSearchTimerRef.current)
    globalMsgSearchTimerRef.current = null
    globalMsgSearchGenRef.current += 1
    if (!normalizedKeyword) {
      pendingGlobalMsgSearchReplayRef.current = null
      globalMsgPrefixCacheRef.current = null
      setGlobalMsgResults([])
      setGlobalMsgSearchError(null)
      setShowGlobalMsgSearch(false)
      setGlobalMsgSearching(false)
      setGlobalMsgSearchPhase('idle')
      setGlobalMsgIsBackfilling(false)
      setGlobalMsgAuthoritativeSessionCount(0)
      return
    }
    setShowGlobalMsgSearch(true)
    setGlobalMsgSearchError(null)
    setGlobalMsgSearchPhase('seed')
    setGlobalMsgIsBackfilling(false)
    setGlobalMsgAuthoritativeSessionCount(0)

    const sessionList = Array.isArray(sessionsRef.current) ? sessionsRef.current.filter((session) => String(session.username || '').trim()) : []
    if (!isConnectedRef.current || sessionList.length === 0) {
      pendingGlobalMsgSearchReplayRef.current = normalizedKeyword
      setGlobalMsgResults([])
      setGlobalMsgSearchError(null)
      setGlobalMsgSearching(false)
      setGlobalMsgSearchPhase('idle')
      setGlobalMsgIsBackfilling(false)
      setGlobalMsgAuthoritativeSessionCount(0)
      return
    }

    pendingGlobalMsgSearchReplayRef.current = null
    const gen = globalMsgSearchGenRef.current
    globalMsgSearchTimerRef.current = setTimeout(async () => {
      if (gen !== globalMsgSearchGenRef.current) return
      setGlobalMsgSearching(true)
      setGlobalMsgSearchPhase('seed')
      setGlobalMsgIsBackfilling(false)
      setGlobalMsgAuthoritativeSessionCount(0)
      try {
        ensureGlobalMsgSearchNotStale(gen)

        const seedResponse = await window.electronAPI.chat.searchMessages(normalizedKeyword, undefined, GLOBAL_MSG_SEED_LIMIT, 0)
        if (!seedResponse?.success) {
          throw new Error(seedResponse?.error || '搜索失败')
        }
        ensureGlobalMsgSearchNotStale(gen)

        const seedRows = normalizeGlobalMsgSearchMessages(seedResponse?.messages || [])
        const seedMap = buildGlobalMsgSearchSessionMap(seedRows)
        const authoritativeMap = new Map<string, GlobalMsgSearchResult[]>()
        setGlobalMsgResults(composeGlobalMsgSearchResults(seedMap, authoritativeMap))
        setGlobalMsgSearchError(null)
        setGlobalMsgSearchPhase('backfill')
        setGlobalMsgIsBackfilling(true)

        const previousPrefixCache = globalMsgPrefixCacheRef.current
        const previousKeyword = String(previousPrefixCache?.keyword || '').trim()
        const canUsePrefixCache = Boolean(
          previousPrefixCache &&
          previousPrefixCache.completed &&
          previousKeyword &&
          normalizedKeyword.startsWith(previousKeyword)
        )
        let targetSessionList = canUsePrefixCache
          ? sessionList.filter((session) => previousPrefixCache?.matchedSessionIds.has(session.username))
          : sessionList
        if (canUsePrefixCache && previousPrefixCache) {
          let foundOutsidePrefix = false
          for (const sessionId of seedMap.keys()) {
            if (!previousPrefixCache.matchedSessionIds.has(sessionId)) {
              foundOutsidePrefix = true
              break
            }
          }
          if (foundOutsidePrefix) {
            targetSessionList = sessionList
          }
        }

        for (let index = 0; index < targetSessionList.length; index += GLOBAL_MSG_BACKFILL_CONCURRENCY) {
          ensureGlobalMsgSearchNotStale(gen)
          const chunk = targetSessionList.slice(index, index + GLOBAL_MSG_BACKFILL_CONCURRENCY)
          const chunkResults = await Promise.allSettled(
            chunk.map(async (session) => {
              const res = await window.electronAPI.chat.searchMessages(normalizedKeyword, session.username, GLOBAL_MSG_PER_SESSION_LIMIT, 0)
              if (!res?.success) {
                throw new Error(res?.error || `搜索失败: ${session.username}`)
              }
              return {
                sessionId: session.username,
                messages: normalizeGlobalMsgSearchMessages(res?.messages || [], session.username)
              }
            })
          )
          ensureGlobalMsgSearchNotStale(gen)

          for (const item of chunkResults) {
            if (item.status === 'rejected') {
              throw item.reason instanceof Error ? item.reason : new Error(String(item.reason))
            }
            authoritativeMap.set(item.value.sessionId, item.value.messages)
          }
          setGlobalMsgAuthoritativeSessionCount(authoritativeMap.size)
          setGlobalMsgResults(composeGlobalMsgSearchResults(seedMap, authoritativeMap))
        }

        ensureGlobalMsgSearchNotStale(gen)
        const finalResults = composeGlobalMsgSearchResults(seedMap, authoritativeMap)
        setGlobalMsgResults(finalResults)
        setGlobalMsgSearchError(null)
        setGlobalMsgSearchPhase('done')
        setGlobalMsgIsBackfilling(false)

        const matchedSessionIds = new Set<string>()
        for (const row of finalResults) {
          matchedSessionIds.add(row.sessionId)
        }
        globalMsgPrefixCacheRef.current = {
          keyword: normalizedKeyword,
          matchedSessionIds,
          completed: true
        }

        if (shouldRunGlobalMsgShadowCompareSample()) {
          void (async () => {
            try {
              const legacyResults = await runLegacyGlobalMsgSearch(normalizedKeyword, sessionList, gen)
              if (gen !== globalMsgSearchGenRef.current) return
              compareGlobalMsgSearchShadow(normalizedKeyword, finalResults, legacyResults)
            } catch (error) {
              if (isGlobalMsgSearchCanceled(error)) return
              console.warn('[GlobalMsgSearch] shadow compare failed:', error)
            }
          })()
        }
      } catch (error) {
        if (isGlobalMsgSearchCanceled(error)) return
        if (gen !== globalMsgSearchGenRef.current) return
        setGlobalMsgResults([])
        setGlobalMsgSearchError(error instanceof Error ? error.message : String(error))
        setGlobalMsgSearchPhase('done')
        setGlobalMsgIsBackfilling(false)
        setGlobalMsgAuthoritativeSessionCount(0)
        globalMsgPrefixCacheRef.current = null
      } finally {
        if (gen === globalMsgSearchGenRef.current) setGlobalMsgSearching(false)
      }
    }, 500)
  }, [compareGlobalMsgSearchShadow, ensureGlobalMsgSearchNotStale, runLegacyGlobalMsgSearch])

  const handleCloseGlobalMsgSearch = useCallback(() => {
    globalMsgSearchGenRef.current += 1
    if (globalMsgSearchTimerRef.current) clearTimeout(globalMsgSearchTimerRef.current)
    globalMsgSearchTimerRef.current = null
    pendingGlobalMsgSearchReplayRef.current = null
    globalMsgPrefixCacheRef.current = null
    setShowGlobalMsgSearch(false)
    setGlobalMsgQuery('')
    setGlobalMsgResults([])
    setGlobalMsgSearchError(null)
    setGlobalMsgSearching(false)
    setGlobalMsgSearchPhase('idle')
    setGlobalMsgIsBackfilling(false)
    setGlobalMsgAuthoritativeSessionCount(0)
  }, [])

  const handleMessageRangeChanged = useCallback((range: { startIndex: number; endIndex: number }) => {
    visibleMessageRangeRef.current = range
    const total = messages.length
    const shouldWarmupVisibleGroupSenders = Boolean(
      currentSessionId && (
        isGroupChatSession(currentSessionId) ||
        (
          standaloneSessionWindow &&
          normalizedInitialSessionId &&
          currentSessionId === normalizedInitialSessionId &&
          normalizedStandaloneInitialContactType === 'group'
        )
      )
    )
    if (total <= 0) {
      isMessageListAtBottomRef.current = true
      setShowScrollToBottom(prev => (prev ? false : prev))
      return
    }

    if (range.endIndex >= Math.max(total - 2, 0)) {
      isMessageListAtBottomRef.current = true
      setShowScrollToBottom(prev => (prev ? false : prev))
    }

    if (
      range.startIndex <= 2 &&
      !topRangeLoadLockRef.current &&
      !isLoadingMore &&
      !isLoadingMessages &&
      hasMoreMessages &&
      currentSessionId
    ) {
      topRangeLoadLockRef.current = true
      void loadMessages(currentSessionId, currentOffset, jumpStartTime, jumpEndTime)
    }

    if (
      range.endIndex >= total - 3 &&
      !bottomRangeLoadLockRef.current &&
      !suppressAutoLoadLaterRef.current &&
      !isLoadingMore &&
      !isLoadingMessages &&
      hasMoreLater &&
      currentSessionId
    ) {
      bottomRangeLoadLockRef.current = true
      void loadLaterMessages()
    }

    if (shouldWarmupVisibleGroupSenders) {
      const now = Date.now()
      if (now - lastVisibleSenderWarmupAtRef.current >= 180) {
        lastVisibleSenderWarmupAtRef.current = now
        const latestMessages = useChatStore.getState().messages || []
        const visibleStart = Math.max(range.startIndex - 12, 0)
        const visibleEnd = Math.min(range.endIndex + 20, total - 1)
        const pendingUsernames = new Set<string>()
        for (let index = visibleStart; index <= visibleEnd; index += 1) {
          const msg = latestMessages[index]
          if (!msg || msg.isSend === 1) continue
          const sender = String(msg.senderUsername || '').trim()
          if (!sender) continue
          if (senderAvatarCache.has(sender) || senderAvatarLoading.has(sender)) continue
          pendingUsernames.add(sender)
          if (pendingUsernames.size >= 24) break
        }
        if (pendingUsernames.size > 0) {
          warmupGroupSenderProfiles([...pendingUsernames], false)
        }
      }
    }
  }, [
    messages.length,
    isLoadingMore,
    isLoadingMessages,
    hasMoreMessages,
    hasMoreLater,
    currentSessionId,
    currentOffset,
    jumpStartTime,
    jumpEndTime,
    isGroupChatSession,
    standaloneSessionWindow,
    normalizedInitialSessionId,
    normalizedStandaloneInitialContactType,
    warmupGroupSenderProfiles,
    loadMessages,
    loadLaterMessages
  ])

  const handleMessageAtBottomStateChange = useCallback((atBottom: boolean) => {
    if (messages.length <= 0) {
      isMessageListAtBottomRef.current = true
      setShowScrollToBottom(prev => (prev ? false : prev))
      return
    }

    const listEl = messageListRef.current
    const distanceFromBottom = listEl
      ? (listEl.scrollHeight - (listEl.scrollTop + listEl.clientHeight))
      : Number.POSITIVE_INFINITY
    const nearBottomByRange = visibleMessageRangeRef.current.endIndex >= Math.max(messages.length - 2, 0)
    const nearBottomByDistance = distanceFromBottom <= 140
    const effectiveAtBottom = atBottom || nearBottomByRange || nearBottomByDistance
    isMessageListAtBottomRef.current = effectiveAtBottom

    if (!effectiveAtBottom) {
      bottomRangeLoadLockRef.current = false
      // 用户主动离开底部后，解除“搜索跳转后的自动向后加载抑制”
      suppressAutoLoadLaterRef.current = false
    }

    if (
      isLoadingMessages ||
      isSessionSwitching ||
      isLoadingMore ||
      suppressScrollToBottomButtonRef.current
    ) {
      setShowScrollToBottom(prev => (prev ? false : prev))
      return
    }

    if (effectiveAtBottom) {
      setShowScrollToBottom(prev => (prev ? false : prev))
      return
    }
    const shouldShow = distanceFromBottom > 180
    setShowScrollToBottom(prev => (prev === shouldShow ? prev : shouldShow))
  }, [messages.length, isLoadingMessages, isLoadingMore, isSessionSwitching])

  const handleMessageListWheel = useCallback((event: React.WheelEvent<HTMLDivElement>) => {
    if (event.deltaY <= 18) return
    if (!currentSessionId || isLoadingMore || isLoadingMessages || !hasMoreLater) return
    const listEl = messageListRef.current
    if (!listEl) return
    const distanceFromBottom = listEl.scrollHeight - (listEl.scrollTop + listEl.clientHeight)
    if (distanceFromBottom > 96) return
    if (bottomRangeLoadLockRef.current) return

    // 用户明确向下滚动时允许加载后续消息
    suppressAutoLoadLaterRef.current = false
    bottomRangeLoadLockRef.current = true
    void loadLaterMessages()
  }, [currentSessionId, hasMoreLater, isLoadingMessages, isLoadingMore, loadLaterMessages])

  const handleMessageAtTopStateChange = useCallback((atTop: boolean) => {
    if (!atTop) {
      topRangeLoadLockRef.current = false
    }
  }, [])


  const isSameSession = useCallback((prev: ChatSession, next: ChatSession): boolean => {
    return (
      prev.username === next.username &&
      prev.type === next.type &&
      prev.unreadCount === next.unreadCount &&
      prev.summary === next.summary &&
      prev.sortTimestamp === next.sortTimestamp &&
      prev.lastTimestamp === next.lastTimestamp &&
      prev.lastMsgType === next.lastMsgType &&
      prev.displayName === next.displayName &&
      prev.avatarUrl === next.avatarUrl &&
      prev.alias === next.alias
    )
  }, [])

  const mergeSessions = useCallback((nextSessions: ChatSession[]) => {
    // 确保输入是数组
    if (!Array.isArray(nextSessions)) {
      console.warn('mergeSessions: nextSessions is not an array:', nextSessions)
      return Array.isArray(sessionsRef.current) ? sessionsRef.current : []
    }
    if (!Array.isArray(sessionsRef.current) || sessionsRef.current.length === 0) {
      return nextSessions.map((next) => mergeSessionContactPresentation(next))
    }
    const prevMap = new Map(sessionsRef.current.map((s) => [s.username, s]))
    return nextSessions.map((next) => {
      const prev = prevMap.get(next.username)
      const merged = mergeSessionContactPresentation(next, prev)
      if (!prev) return merged
      return isSameSession(prev, merged) ? prev : merged
    })
  }, [isSameSession, mergeSessionContactPresentation])

  const flashNewMessages = useCallback((keys: string[]) => {
    if (keys.length === 0) return
    setHighlightedMessageKeys((prev) => [...prev, ...keys])
    window.setTimeout(() => {
      setHighlightedMessageKeys((prev) => prev.filter((k) => !keys.includes(k)))
    }, 2500)
  }, [])

  const handleInSessionResultJump = useCallback((msg: Message) => {
    const targetTime = Number(msg.createTime || 0)
    const targetSessionId = String(currentSessionRef.current || currentSessionId || '').trim()
    if (!targetTime || !targetSessionId) return

    if (inSessionResultJumpTimerRef.current) {
      window.clearTimeout(inSessionResultJumpTimerRef.current)
      inSessionResultJumpTimerRef.current = null
    }

    const requestSeq = inSessionResultJumpRequestSeqRef.current + 1
    inSessionResultJumpRequestSeqRef.current = requestSeq
    const anchorEndTime = targetTime + 1
    const targetMessageKey = getMessageKey(msg)

    inSessionResultJumpTimerRef.current = window.setTimeout(() => {
      inSessionResultJumpTimerRef.current = null
      if (requestSeq !== inSessionResultJumpRequestSeqRef.current) return
      if (currentSessionRef.current !== targetSessionId) return

      setCurrentOffset(0)
      setJumpStartTime(0)
      setJumpEndTime(anchorEndTime)
      // 搜索跳转后默认不自动回流到最新消息，仅在用户主动向下滚动时加载后续
      suppressAutoLoadLaterRef.current = true
      flashNewMessages([targetMessageKey])
      void loadMessages(targetSessionId, 0, 0, anchorEndTime, false, {
        inSessionJumpRequestSeq: requestSeq
      })
    }, 220)
  }, [currentSessionId, flashNewMessages, getMessageKey, loadMessages])

  // 滚动到底部
  const scrollToBottom = useCallback(() => {
    suppressScrollToBottomButton(220)
    isMessageListAtBottomRef.current = true
    setShowScrollToBottom(false)
    const lastIndex = messages.length - 1
    if (lastIndex >= 0 && messageVirtuosoRef.current) {
      messageVirtuosoRef.current.scrollToIndex({
        index: lastIndex,
        align: 'end',
        behavior: 'auto'
      })
      return
    }
    if (messageListRef.current) {
      messageListRef.current.scrollTo({
        top: messageListRef.current.scrollHeight,
        behavior: 'auto'
      })
    }
  }, [messages.length, suppressScrollToBottomButton])

  // 拖动调节侧边栏宽度
  const handleResizeStart = useCallback((e: React.MouseEvent) => {
    e.preventDefault()
    setIsResizing(true)

    const startX = e.clientX
    const startWidth = sidebarWidth

    const handleMouseMove = (e: MouseEvent) => {
      const delta = e.clientX - startX
      const newWidth = Math.min(Math.max(startWidth + delta, 200), 400)
      setSidebarWidth(newWidth)
    }

    const handleMouseUp = () => {
      setIsResizing(false)
      document.removeEventListener('mousemove', handleMouseMove)
      document.removeEventListener('mouseup', handleMouseUp)
    }

    document.addEventListener('mousemove', handleMouseMove)
    document.addEventListener('mouseup', handleMouseUp)
  }, [sidebarWidth])

  // 初始化连接
  useEffect(() => {
    if (!isConnected && !isConnecting) {
      connect()
    }

    // 组件卸载时清理
    return () => {
      avatarLoadQueue.clear()
      if (previewPersistTimerRef.current !== null) {
        window.clearTimeout(previewPersistTimerRef.current)
        previewPersistTimerRef.current = null
      }
      if (sessionListPersistTimerRef.current !== null) {
        window.clearTimeout(sessionListPersistTimerRef.current)
        sessionListPersistTimerRef.current = null
      }
      if (scrollBottomButtonArmTimerRef.current !== null) {
        window.clearTimeout(scrollBottomButtonArmTimerRef.current)
        scrollBottomButtonArmTimerRef.current = null
      }
      if (contactUpdateTimerRef.current) {
        clearTimeout(contactUpdateTimerRef.current)
      }
      if (sessionScrollTimeoutRef.current) {
        clearTimeout(sessionScrollTimeoutRef.current)
      }
      contactUpdateQueueRef.current.clear()
      pendingSessionContactEnrichRef.current.clear()
      sessionContactEnrichAttemptAtRef.current.clear()
      sessionContactProfileCacheRef.current.clear()
      enrichCancelledRef.current = true
      isEnrichingRef.current = false
    }
  }, [])

  useEffect(() => {
    const handleChange = () => {
      void handleAccountChanged()
    }
    window.addEventListener('wxid-changed', handleChange as EventListener)
    return () => window.removeEventListener('wxid-changed', handleChange as EventListener)
  }, [handleAccountChanged])

  useEffect(() => {
    const nextSet = new Set<string>()
    for (const msg of messages) {
      nextSet.add(getMessageKey(msg))
    }
    messageKeySetRef.current = nextSet
    const lastMsg = messages[messages.length - 1]
    lastMessageTimeRef.current = lastMsg?.createTime ?? 0
  }, [messages, getMessageKey])

  useEffect(() => {
    lastObservedMessageCountRef.current = messages.length
    if (messages.length <= 0) {
      isMessageListAtBottomRef.current = true
    }
  }, [currentSessionId])

  useEffect(() => {
    const previousCount = lastObservedMessageCountRef.current
    const currentCount = messages.length
    lastObservedMessageCountRef.current = currentCount
    if (currentCount <= previousCount) return
    if (!currentSessionId || isLoadingMessages || isSessionSwitching) return
    const wasNearBottomByRange = visibleMessageRangeRef.current.endIndex >= Math.max(previousCount - 2, 0)
    if (!isMessageListAtBottomRef.current && !wasNearBottomByRange) return
    suppressScrollToBottomButton(220)
    isMessageListAtBottomRef.current = true
    requestAnimationFrame(() => {
      const latestMessages = useChatStore.getState().messages || []
      const lastIndex = latestMessages.length - 1
      if (lastIndex >= 0 && messageVirtuosoRef.current) {
        messageVirtuosoRef.current.scrollToIndex({ index: lastIndex, align: 'end', behavior: 'auto' })
      }
    })
  }, [messages.length, currentSessionId, isLoadingMessages, isSessionSwitching, suppressScrollToBottomButton])

  useEffect(() => {
    currentSessionRef.current = currentSessionId
  }, [currentSessionId])

  useEffect(() => {
    if (currentSessionId !== lastPreloadSessionRef.current) {
      preloadImageKeysRef.current.clear()
      lastPreloadSessionRef.current = currentSessionId
    }
  }, [currentSessionId])

  useEffect(() => {
    if (!currentSessionId || messages.length === 0) return
    const preloadEdgeCount = 40
    const maxPreload = 30
    const head = messages.slice(0, preloadEdgeCount)
    const tail = messages.slice(-preloadEdgeCount)
    const candidates = [...head, ...tail]
    const queued = preloadImageKeysRef.current
    const seen = new Set<string>()
    const payloads: Array<{ sessionId?: string; imageMd5?: string; imageDatName?: string }> = []
    for (const msg of candidates) {
      if (payloads.length >= maxPreload) break
      if (msg.localType !== 3) continue
      const cacheKey = msg.imageMd5 || msg.imageDatName || `local:${msg.localId}`
      if (!msg.imageMd5 && !msg.imageDatName) continue
      if (imageDataUrlCache.has(cacheKey)) continue
      const taskKey = `${currentSessionId}|${cacheKey}`
      if (queued.has(taskKey) || seen.has(taskKey)) continue
      queued.add(taskKey)
      seen.add(taskKey)
      payloads.push({
        sessionId: currentSessionId,
        imageMd5: msg.imageMd5 || undefined,
        imageDatName: msg.imageDatName
      })
    }
    if (payloads.length > 0) {
      window.electronAPI.image.preload(payloads).catch(() => { })
    }
  }, [currentSessionId, messages])

  useEffect(() => {
    const nextMap = new Map<string, ChatSession>()
    if (Array.isArray(sessions)) {
      for (const session of sessions) {
        nextMap.set(session.username, session)
      }
    }
    sessionMapRef.current = nextMap
  }, [sessions])

  useEffect(() => {
    if (!Array.isArray(sessions) || sessions.length === 0) return
    const now = Date.now()
    const cache = sessionContactProfileCacheRef.current

    for (const session of sessions) {
      const username = String(session.username || '').trim()
      if (!username || isFoldPlaceholderSession(username)) continue

      const displayName = resolveSessionDisplayName(session.displayName, username)
      const avatarUrl = normalizeSearchAvatarUrl(session.avatarUrl)
      const alias = normalizeSearchIdentityText(session.alias)
      if (!displayName && !avatarUrl && !alias) continue

      const prev = cache.get(username)
      cache.set(username, {
        displayName: displayName || prev?.displayName,
        avatarUrl: avatarUrl || prev?.avatarUrl,
        alias: alias || prev?.alias,
        updatedAt: now
      })
    }

    for (const [username, profile] of cache.entries()) {
      if (now - profile.updatedAt > SESSION_CONTACT_PROFILE_CACHE_TTL_MS) {
        cache.delete(username)
      }
    }
  }, [sessions])

  useEffect(() => {
    sessionsRef.current = Array.isArray(sessions) ? sessions : []
  }, [sessions])

  useEffect(() => {
    if (!isLoadingMore) {
      topRangeLoadLockRef.current = false
      bottomRangeLoadLockRef.current = false
    }
  }, [isLoadingMore])

  useEffect(() => {
    if (initialRevealTimerRef.current !== null) {
      window.clearTimeout(initialRevealTimerRef.current)
      initialRevealTimerRef.current = null
    }
    if (!isLoadingMessages) {
      if (messages.length === 0) {
        setHasInitialMessages(true)
      } else {
        initialRevealTimerRef.current = window.setTimeout(() => {
          setHasInitialMessages(true)
          initialRevealTimerRef.current = null
        }, 120)
      }
    }
  }, [isLoadingMessages, messages.length])

  useEffect(() => {
    if (currentSessionId !== prevSessionRef.current) {
      prevSessionRef.current = currentSessionId
      setNoMessageTable(false)
      if (initialRevealTimerRef.current !== null) {
        window.clearTimeout(initialRevealTimerRef.current)
        initialRevealTimerRef.current = null
      }
      if (messages.length === 0) {
        setHasInitialMessages(false)
      } else if (!isLoadingMessages) {
        setHasInitialMessages(true)
      }
    }
  }, [currentSessionId, messages.length, isLoadingMessages])

  useEffect(() => {
    if (currentSessionId && isConnected && messages.length === 0 && !isLoadingMessages && !isLoadingMore && !noMessageTable) {
      if (pendingSessionLoadRef.current === currentSessionId) return
      if (initialLoadRequestedSessionRef.current === currentSessionId) return
      initialLoadRequestedSessionRef.current = currentSessionId
      setHasInitialMessages(false)
      void loadMessages(currentSessionId, 0, 0, 0, false, {
        preferLatestPath: true,
        deferGroupSenderWarmup: true,
        forceInitialLimit: 30
      })
    }
  }, [currentSessionId, isConnected, messages.length, isLoadingMessages, isLoadingMore, noMessageTable])

  useEffect(() => {
    return () => {
      if (initialRevealTimerRef.current !== null) {
        window.clearTimeout(initialRevealTimerRef.current)
        initialRevealTimerRef.current = null
      }
    }
  }, [])

  useEffect(() => {
    isConnectedRef.current = isConnected
  }, [isConnected])

  useEffect(() => {
    const replayKeyword = pendingGlobalMsgSearchReplayRef.current
    if (!replayKeyword || !isConnected || sessions.length === 0) return
    pendingGlobalMsgSearchReplayRef.current = null
    void handleGlobalMsgSearch(replayKeyword)
  }, [isConnected, sessions.length, handleGlobalMsgSearch])

  useEffect(() => {
    return () => {
      inSessionSearchGenRef.current += 1
      if (inSessionSearchTimerRef.current) {
        clearTimeout(inSessionSearchTimerRef.current)
        inSessionSearchTimerRef.current = null
      }
      globalMsgSearchGenRef.current += 1
      if (globalMsgSearchTimerRef.current) {
        clearTimeout(globalMsgSearchTimerRef.current)
        globalMsgSearchTimerRef.current = null
      }
      globalMsgPrefixCacheRef.current = null
    }
  }, [])

  useEffect(() => {
    searchKeywordRef.current = searchKeyword
  }, [searchKeyword])

  useEffect(() => {
    if (!showJumpPopover) return
    const handleGlobalPointerDown = (event: MouseEvent) => {
      const target = event.target as Node | null
      if (!target) return
      if (jumpCalendarWrapRef.current?.contains(target)) return
      if (jumpPopoverPortalRef.current?.contains(target)) return
      setShowJumpPopover(false)
    }
    document.addEventListener('mousedown', handleGlobalPointerDown)
    return () => {
      document.removeEventListener('mousedown', handleGlobalPointerDown)
    }
  }, [showJumpPopover])

  useEffect(() => {
    if (!showJumpPopover) return
    const syncPosition = () => {
      requestAnimationFrame(() => updateJumpPopoverPosition())
    }

    syncPosition()
    window.addEventListener('resize', syncPosition)
    window.addEventListener('scroll', syncPosition, true)
    return () => {
      window.removeEventListener('resize', syncPosition)
      window.removeEventListener('scroll', syncPosition, true)
    }
  }, [showJumpPopover, updateJumpPopoverPosition])

  useEffect(() => {
    setShowJumpPopover(false)
    setLoadingDates(false)
    setLoadingDateCounts(false)
    setHasLoadedMessageDates(false)
    setMessageDates(new Set())
    setMessageDateCounts({})
  }, [currentSessionId])

  useEffect(() => {
    if (!currentSessionId || !Array.isArray(messages) || messages.length === 0) return
    persistSessionPreviewCache(currentSessionId, messages)
    saveSessionWindowCache(currentSessionId, {
      messages,
      currentOffset,
      hasMoreMessages,
      hasMoreLater,
      jumpStartTime,
      jumpEndTime
    })
  }, [
    currentSessionId,
    messages,
    currentOffset,
    hasMoreMessages,
    hasMoreLater,
    jumpStartTime,
    jumpEndTime,
    persistSessionPreviewCache,
    saveSessionWindowCache
  ])

  useEffect(() => {
    return () => {
      inSessionResultJumpRequestSeqRef.current += 1
      if (inSessionResultJumpTimerRef.current) {
        window.clearTimeout(inSessionResultJumpTimerRef.current)
      }
    }
  }, [])

  useEffect(() => {
    if (!Array.isArray(sessions) || sessions.length === 0) return
    if (sessionListPersistTimerRef.current !== null) {
      window.clearTimeout(sessionListPersistTimerRef.current)
    }
    sessionListPersistTimerRef.current = window.setTimeout(() => {
      persistSessionListCache(chatCacheScopeRef.current, sessions)
      sessionListPersistTimerRef.current = null
    }, 260)
  }, [sessions, persistSessionListCache])

  // 普通视图：隐藏 isFolded 的群，保留 placeholder_foldgroup 入口
  const filteredSessions = useMemo(() => {
    if (!Array.isArray(sessions)) {
      return []
    }

    // 检查是否有折叠的群聊
    const foldedGroups = sessions.filter(s => s.isFolded && !s.username.toLowerCase().includes('placeholder_foldgroup'))
    const hasFoldedGroups = foldedGroups.length > 0

    const visible = sessions.filter(s => {
      if (s.isFolded && !s.username.toLowerCase().includes('placeholder_foldgroup')) return false
      return true
    })

    // 如果有折叠的群聊，但列表中没有入口，则插入入口
    if (hasFoldedGroups && !visible.some(s => s.username.toLowerCase().includes('placeholder_foldgroup'))) {
      // 找到最新的折叠消息
      const latestFolded = foldedGroups.reduce((latest, current) => {
        const latestTime = latest.sortTimestamp || latest.lastTimestamp
        const currentTime = current.sortTimestamp || current.lastTimestamp
        return currentTime > latestTime ? current : latest
      })

      const foldEntry: ChatSession = {
        username: 'placeholder_foldgroup',
        displayName: '折叠的聊天',
        summary: `${latestFolded.displayName || latestFolded.username}: ${latestFolded.summary}`,
        type: 0,
        sortTimestamp: latestFolded.sortTimestamp || latestFolded.lastTimestamp,
        lastTimestamp: latestFolded.lastTimestamp || latestFolded.sortTimestamp,
        lastMsgType: 0,
        unreadCount: foldedGroups.reduce((sum, s) => sum + (s.unreadCount || 0), 0),
        isMuted: false,
        isFolded: false
      }

      // 按时间戳插入到正确位置
      const foldTime = foldEntry.sortTimestamp || foldEntry.lastTimestamp
      const insertIndex = visible.findIndex(s => {
        const sTime = s.sortTimestamp || s.lastTimestamp
        return sTime < foldTime
      })
      if (insertIndex === -1) {
        visible.push(foldEntry)
      } else {
        visible.splice(insertIndex, 0, foldEntry)
      }
    }

    if (!searchKeyword.trim()) {
      return visible
    }
    const lower = searchKeyword.toLowerCase()
    return visible
      .filter(s => {
        const matchedByName = s.displayName?.toLowerCase().includes(lower)
        const matchedByUsername = s.username.toLowerCase().includes(lower)
        const matchedByAlias = s.alias?.toLowerCase().includes(lower)
        return matchedByName || matchedByUsername || matchedByAlias
      })
      .map(s => {
        const matchedByName = s.displayName?.toLowerCase().includes(lower)
        const matchedByUsername = s.username.toLowerCase().includes(lower)
        const matchedByAlias = s.alias?.toLowerCase().includes(lower)

        let matchedField: 'wxid' | 'alias' | 'name' | undefined = undefined

        if (matchedByUsername && !matchedByName && !matchedByAlias) {
          matchedField = 'wxid'
        } else if (matchedByAlias && !matchedByName && !matchedByUsername) {
          matchedField = 'alias'
        } else if (matchedByName && !matchedByUsername && !matchedByAlias) {
          matchedField = 'name'
        }

        return { ...s, matchedField }
      })
  }, [sessions, searchKeyword])

  // 折叠群列表（独立计算，供折叠 panel 使用）
  const foldedSessions = useMemo(() => {
    if (!Array.isArray(sessions)) return []
    const folded = sessions.filter(s => s.isFolded)
    if (!searchKeyword.trim() || !foldedView) return folded
    const lower = searchKeyword.toLowerCase()
    return folded
        // 1. 先过滤
        .filter(s => {
          const matchedByName = s.displayName?.toLowerCase().includes(lower)
          const matchedByUsername = s.username.toLowerCase().includes(lower)
          const matchedByAlias = s.alias?.toLowerCase().includes(lower)
          const matchedBySummary = s.summary?.toLowerCase().includes(lower) // 注意：这里有个 summary

          return matchedByName || matchedByUsername || matchedByAlias || matchedBySummary
        })
        // 2. 后映射
        .map(s => {
          const matchedByName = s.displayName?.toLowerCase().includes(lower)
          const matchedByUsername = s.username.toLowerCase().includes(lower)
          const matchedByAlias = s.alias?.toLowerCase().includes(lower)
          const matchedBySummary = s.summary?.toLowerCase().includes(lower)

          let matchedField: 'wxid' | 'alias' | 'name' | undefined = undefined

          if (matchedByUsername && !matchedByName && !matchedBySummary && !matchedByAlias) {
            matchedField = 'wxid'
          } else if (matchedByAlias && !matchedByName && !matchedBySummary && !matchedByUsername) {
            matchedField = 'alias'
          }

          // ✅ 同样返回新对象
          return { ...s, matchedField }
        })
  }, [sessions, searchKeyword, foldedView])

  const sessionLookupMap = useMemo(() => {
    const map = new Map<string, ChatSession>()
    for (const session of sessions) {
      const username = String(session.username || '').trim()
      if (!username) continue
      map.set(username, session)
    }
    return map
  }, [sessions])
  const groupedGlobalMsgResults = useMemo(() => {
    const grouped = globalMsgResults.reduce((acc, msg) => {
      const sessionId = (msg as any).sessionId || '未知'
      if (!acc[sessionId]) acc[sessionId] = []
      acc[sessionId].push(msg)
      return acc
    }, {} as Record<string, Message[]>)
    return Object.entries(grouped)
  }, [globalMsgResults])

  const hasSessionRecords = Array.isArray(sessions) && sessions.length > 0
  const shouldShowSessionsSkeleton = isLoadingSessions && !hasSessionRecords
  const isSessionListSyncing = (isLoadingSessions || isRefreshingSessions) && hasSessionRecords


  // 格式化会话时间（相对时间）- 使用 useMemo 缓存，避免每次渲染都计算
  const formatSessionTime = useCallback((timestamp: number): string => {
    if (!Number.isFinite(timestamp) || timestamp <= 0) return ''

    const now = Date.now()
    const msgTime = timestamp * 1000
    const diff = now - msgTime

    const minutes = Math.floor(diff / 60000)
    const hours = Math.floor(diff / 3600000)

    if (minutes < 1) return '刚刚'
    if (minutes < 60) return `${minutes}分钟前`
    if (hours < 24) return `${hours}小时前`

    // 超过24小时显示日期
    const date = new Date(msgTime)
    const nowDate = new Date()

    if (date.getFullYear() === nowDate.getFullYear()) {
      return `${date.getMonth() + 1}/${date.getDate()}`
    }

    return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
  }, [])

  // 获取当前会话信息（从通讯录跳转时可能不在 sessions 列表中，构造 fallback）
  const currentSession = (() => {
    const found = Array.isArray(sessions) ? sessions.find(s => s.username === currentSessionId) : undefined
    if (found) {
      if (
        standaloneSessionWindow &&
        normalizedInitialSessionId &&
        found.username === normalizedInitialSessionId
      ) {
        return {
          ...found,
          displayName: found.displayName || fallbackDisplayName || found.username,
          avatarUrl: found.avatarUrl || fallbackAvatarUrl || undefined
        }
      }
      return found
    }
    if (!currentSessionId) return found
    return {
      username: currentSessionId,
      type: 0,
      unreadCount: 0,
      summary: '',
      sortTimestamp: 0,
      lastTimestamp: 0,
      lastMsgType: 0,
      displayName: fallbackDisplayName || currentSessionId,
      avatarUrl: fallbackAvatarUrl || undefined,
    } as ChatSession
  })()
  const filteredGroupPanelMembers = useMemo(() => {
    const keyword = groupMemberSearchKeyword.trim().toLowerCase()
    if (!keyword) return groupPanelMembers
    return groupPanelMembers.filter((member) => {
      const fields = [
        member.username,
        member.displayName,
        member.groupNickname,
        member.remark,
        member.nickname,
        member.alias
      ]
      return fields.some(field => String(field || '').toLowerCase().includes(keyword))
    })
  }, [groupMemberSearchKeyword, groupPanelMembers])
  const isCurrentSessionExporting = Boolean(currentSessionId && inProgressExportSessionIds.has(currentSessionId))
  const isExportActionBusy = isCurrentSessionExporting || isPreparingExportDialog
  const isCurrentSessionGroup = Boolean(
    currentSession && (
      isGroupChatSession(currentSession.username) ||
      (
        standaloneSessionWindow &&
        currentSession.username === normalizedInitialSessionId &&
        normalizedStandaloneInitialContactType === 'group'
      )
    )
  )
  const isCurrentSessionPrivateSnsSupported = Boolean(
    currentSession &&
    isSingleContactSession(currentSession.username) &&
    !isCurrentSessionGroup
  )

  const openCurrentSessionSnsTimeline = useCallback(() => {
    if (!currentSession || !isCurrentSessionPrivateSnsSupported) return
    setChatSnsTimelineTarget({
      username: currentSession.username,
      displayName: currentSession.displayName || currentSession.username,
      avatarUrl: currentSession.avatarUrl
    })
  }, [currentSession, isCurrentSessionPrivateSnsSupported])

  useEffect(() => {
    if (!standaloneSessionWindow) return
    setStandaloneInitialLoadRequested(false)
    setStandaloneLoadStage(normalizedInitialSessionId ? 'connecting' : 'idle')
    setFallbackDisplayName(normalizedStandaloneInitialDisplayName || null)
    setFallbackAvatarUrl(normalizedStandaloneInitialAvatarUrl || null)
  }, [
    standaloneSessionWindow,
    normalizedInitialSessionId,
    normalizedStandaloneInitialDisplayName,
    normalizedStandaloneInitialAvatarUrl
  ])

  useEffect(() => {
    if (!standaloneSessionWindow) return
    if (!normalizedInitialSessionId) return

    if (normalizedStandaloneInitialDisplayName) {
      setFallbackDisplayName(normalizedStandaloneInitialDisplayName)
    }
    if (normalizedStandaloneInitialAvatarUrl) {
      setFallbackAvatarUrl(normalizedStandaloneInitialAvatarUrl)
    }

    if (!currentSessionId) {
      setCurrentSession(normalizedInitialSessionId, { preserveMessages: false })
    }
    if (!isConnected || isConnecting) {
      setStandaloneLoadStage('connecting')
    }
  }, [
    standaloneSessionWindow,
    normalizedInitialSessionId,
    normalizedStandaloneInitialDisplayName,
    normalizedStandaloneInitialAvatarUrl,
    currentSessionId,
    isConnected,
    isConnecting,
    setCurrentSession
  ])

  useEffect(() => {
    if (!standaloneSessionWindow) return
    if (!normalizedInitialSessionId) return
    if (!isConnected || isConnecting) return
    if (currentSessionId === normalizedInitialSessionId && standaloneInitialLoadRequested) return
    setStandaloneInitialLoadRequested(true)
    setStandaloneLoadStage('loading')
    selectSessionById(normalizedInitialSessionId, {
      force: currentSessionId === normalizedInitialSessionId
    })
  }, [
    standaloneSessionWindow,
    normalizedInitialSessionId,
    isConnected,
    isConnecting,
    currentSessionId,
    standaloneInitialLoadRequested,
    selectSessionById
  ])

  useEffect(() => {
    if (!standaloneSessionWindow || !normalizedInitialSessionId) return
    if (!isConnected || isConnecting) {
      setStandaloneLoadStage('connecting')
      return
    }
    if (!standaloneInitialLoadRequested) {
      setStandaloneLoadStage('loading')
      return
    }
    if (currentSessionId !== normalizedInitialSessionId) {
      setStandaloneLoadStage('loading')
      return
    }
    if (isLoadingMessages || isSessionSwitching) {
      setStandaloneLoadStage('loading')
      return
    }
    setStandaloneLoadStage('ready')
  }, [
    standaloneSessionWindow,
    normalizedInitialSessionId,
    isConnected,
    isConnecting,
    standaloneInitialLoadRequested,
    currentSessionId,
    isLoadingMessages,
    isSessionSwitching
  ])

  // 从通讯录跳转时，会话不在列表中，主动加载联系人显示名称
  useEffect(() => {
    if (!currentSessionId) return
    const found = Array.isArray(sessions) ? sessions.find(s => s.username === currentSessionId) : undefined
    if (found) {
      if (found.displayName) setFallbackDisplayName(found.displayName)
      if (found.avatarUrl) setFallbackAvatarUrl(found.avatarUrl)
      return
    }
    loadContactInfoBatch([currentSessionId]).then(() => {
      const cached = senderAvatarCache.get(currentSessionId)
      if (cached?.displayName) setFallbackDisplayName(cached.displayName)
      if (cached?.avatarUrl) setFallbackAvatarUrl(cached.avatarUrl)
    })
  }, [currentSessionId, sessions])

  // 渲染日期分隔
  const shouldShowDateDivider = (msg: Message, prevMsg?: Message): boolean => {
    if (!prevMsg) return true
    const date = new Date(msg.createTime * 1000).toDateString()
    const prevDate = new Date(prevMsg.createTime * 1000).toDateString()
    return date !== prevDate
  }

  const formatDateDivider = (timestamp: number): string => {
    if (!Number.isFinite(timestamp) || timestamp <= 0) return '未知时间'
    const date = new Date(timestamp * 1000)
    const now = new Date()
    const isToday = date.toDateString() === now.toDateString()

    if (isToday) return '今天'

    const yesterday = new Date(now)
    yesterday.setDate(yesterday.getDate() - 1)
    if (date.toDateString() === yesterday.toDateString()) return '昨天'

    return date.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    })
  }

  const handleRequireModelDownload = useCallback((sessionId: string, messageId: string) => {
    setPendingVoiceTranscriptRequest({ sessionId, messageId })
    setShowVoiceTranscribeDialog(true)
  }, [])

  // 批量语音转文字
  const handleBatchTranscribe = useCallback(async () => {
    if (!currentSessionId) return
    const session = sessions.find(s => s.username === currentSessionId)
    if (!session) {
      alert('未找到当前会话')
      return
    }
    if (isBatchTranscribing) return

    const result = await window.electronAPI.chat.getAllVoiceMessages(currentSessionId)
    if (!result.success || !result.messages) {
      alert(`获取语音消息失败: ${result.error || '未知错误'}`)
      return
    }

    const voiceMessages: Message[] = result.messages
    if (voiceMessages.length === 0) {
      alert('当前会话没有语音消息')
      return
    }

    const dateSet = new Set<string>()
    voiceMessages.forEach(m => dateSet.add(new Date(m.createTime * 1000).toISOString().slice(0, 10)))
    const sortedDates = Array.from(dateSet).sort((a, b) => b.localeCompare(a))

    setBatchVoiceMessages(voiceMessages)
    setBatchVoiceCount(voiceMessages.length)
    setBatchVoiceDates(sortedDates)
    setBatchSelectedDates(new Set(sortedDates))
    setBatchVoiceTaskType('transcribe')
    setShowBatchConfirm(true)
  }, [sessions, currentSessionId, isBatchTranscribing])

  const handleBatchDecrypt = useCallback(async () => {
    if (!currentSessionId || isBatchDecrypting) return
    const session = sessions.find(s => s.username === currentSessionId)
    if (!session) {
      alert('未找到当前会话')
      return
    }

    const result = await window.electronAPI.chat.getAllImageMessages(currentSessionId)
    if (!result.success || !result.images) {
      alert(`获取图片消息失败: ${result.error || '未知错误'}`)
      return
    }

    if (result.images.length === 0) {
      alert('当前会话没有图片消息')
      return
    }

    const dateSet = new Set<string>()
    result.images.forEach((img: BatchImageDecryptCandidate) => {
      if (img.createTime) dateSet.add(new Date(img.createTime * 1000).toISOString().slice(0, 10))
    })
    const sortedDates = Array.from(dateSet).sort((a, b) => b.localeCompare(a))

    setBatchImageMessages(result.images)
    setBatchImageDates(sortedDates)
    setBatchImageSelectedDates(new Set(sortedDates))
    setShowBatchDecryptConfirm(true)
  }, [currentSessionId, isBatchDecrypting, sessions])

  const handleExportCurrentSession = useCallback(() => {
    if (!currentSessionId) return
    if (inProgressExportSessionIds.has(currentSessionId) || isPreparingExportDialog) return

    const requestId = `chat-export-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
    const sessionName = currentSession?.displayName || currentSession?.username || currentSessionId
    pendingExportRequestIdRef.current = requestId
    setIsPreparingExportDialog(true)
    setExportPrepareHint('')
    if (exportPrepareLongWaitTimerRef.current) {
      window.clearTimeout(exportPrepareLongWaitTimerRef.current)
      exportPrepareLongWaitTimerRef.current = null
    }
    emitOpenSingleExport({
      sessionId: currentSessionId,
      sessionName,
      requestId
    })
  }, [currentSession, currentSessionId, inProgressExportSessionIds, isPreparingExportDialog])

  const handleGroupAnalytics = useCallback(() => {
    if (!currentSessionId || !isGroupChatSession(currentSessionId)) return
    navigate('/analytics/group', {
      state: {
        preselectGroupIds: [currentSessionId]
      }
    })
  }, [currentSessionId, navigate, isGroupChatSession])

  // 确认批量语音任务（解密/转写）
  const confirmBatchTranscribe = useCallback(async () => {
    if (!currentSessionId) return

    const selected = batchSelectedDates
    if (selected.size === 0) {
      alert('请至少选择一个日期')
      return
    }

    const messages = batchVoiceMessages
    if (!messages || messages.length === 0) {
      setShowBatchConfirm(false)
      return
    }

    const voiceMessages = messages.filter(m =>
      selected.has(new Date(m.createTime * 1000).toISOString().slice(0, 10))
    )
    if (voiceMessages.length === 0) {
      alert('所选日期下没有语音消息')
      return
    }

    setShowBatchConfirm(false)
    setBatchVoiceMessages(null)
    setBatchVoiceDates([])
    setBatchSelectedDates(new Set())

    const session = sessions.find(s => s.username === currentSessionId)
    if (!session) return

    const taskType = batchVoiceTaskType
    startTranscribe(voiceMessages.length, session.displayName || session.username, taskType)

    if (taskType === 'transcribe') {
      // 检查模型状态
      const modelStatus = await window.electronAPI.whisper.getModelStatus()
      if (!modelStatus?.exists) {
        alert('SenseVoice 模型未下载，请先在设置中下载模型')
        finishTranscribe(0, 0)
        return
      }
    }

    let successCount = 0
    let failCount = 0
    let completedCount = 0
    const concurrency = taskType === 'decrypt' ? 12 : 10

    const runOne = async (msg: Message) => {
      try {
        if (taskType === 'decrypt') {
          const result = await window.electronAPI.chat.getVoiceData(
            session.username,
            String(msg.localId),
            msg.createTime,
            msg.serverIdRaw || msg.serverId
          )
          return { success: Boolean(result.success && result.data) }
        }
        const result = await window.electronAPI.chat.getVoiceTranscript(
          session.username,
          String(msg.localId),
          msg.createTime
        )
        return { success: result.success }
      } catch {
        return { success: false }
      }
    }

    for (let i = 0; i < voiceMessages.length; i += concurrency) {
      const batch = voiceMessages.slice(i, i + concurrency)
      const results = await Promise.all(batch.map(msg => runOne(msg)))

      results.forEach(result => {
        if (result.success) successCount++
        else failCount++
        completedCount++
        updateProgress(completedCount, voiceMessages.length)
      })
    }

    finishTranscribe(successCount, failCount)
  }, [sessions, currentSessionId, batchSelectedDates, batchVoiceMessages, batchVoiceTaskType, startTranscribe, updateProgress, finishTranscribe])

  // 批量转写：按日期的消息数量
  const batchCountByDate = useMemo(() => {
    const map = new Map<string, number>()
    if (!batchVoiceMessages) return map
    batchVoiceMessages.forEach(m => {
      const d = new Date(m.createTime * 1000).toISOString().slice(0, 10)
      map.set(d, (map.get(d) || 0) + 1)
    })
    return map
  }, [batchVoiceMessages])

  // 批量转写：选中日期对应的语音条数
  const batchSelectedMessageCount = useMemo(() => {
    if (!batchVoiceMessages) return 0
    return batchVoiceMessages.filter(m =>
      batchSelectedDates.has(new Date(m.createTime * 1000).toISOString().slice(0, 10))
    ).length
  }, [batchVoiceMessages, batchSelectedDates])

  const batchVoiceTaskTitle = batchVoiceTaskType === 'decrypt' ? '批量解密语音' : '批量语音转文字'
  const batchVoiceTaskVerb = batchVoiceTaskType === 'decrypt' ? '解密' : '转写'
  const batchVoiceTaskMinutes = Math.ceil(
    batchSelectedMessageCount * (batchVoiceTaskType === 'decrypt' ? 0.6 : 2) / 60
  )

  const toggleBatchDate = useCallback((date: string) => {
    setBatchSelectedDates(prev => {
      const next = new Set(prev)
      if (next.has(date)) next.delete(date)
      else next.add(date)
      return next
    })
  }, [])
  const selectAllBatchDates = useCallback(() => setBatchSelectedDates(new Set(batchVoiceDates)), [batchVoiceDates])
  const clearAllBatchDates = useCallback(() => setBatchSelectedDates(new Set()), [])

  const confirmBatchDecrypt = useCallback(async () => {
    if (!currentSessionId) return

    const selected = batchImageSelectedDates
    if (selected.size === 0) {
      alert('请至少选择一个日期')
      return
    }

    const images = (batchImageMessages || []).filter(img =>
      img.createTime && selected.has(new Date(img.createTime * 1000).toISOString().slice(0, 10))
    )
    if (images.length === 0) {
      alert('所选日期下没有图片消息')
      return
    }

    const session = sessions.find(s => s.username === currentSessionId)
    if (!session) return

    setShowBatchDecryptConfirm(false)
    setBatchImageMessages(null)
    setBatchImageDates([])
    setBatchImageSelectedDates(new Set())

    startDecrypt(images.length, session.displayName || session.username)

    let successCount = 0
    let failCount = 0
    let completed = 0
    const concurrency = batchDecryptConcurrency

    const decryptOne = async (img: typeof images[0]) => {
      try {
        const r = await window.electronAPI.image.decrypt({
          sessionId: session.username,
          imageMd5: img.imageMd5,
          imageDatName: img.imageDatName,
          force: true
        })
        if (r?.success) successCount++
        else failCount++
      } catch {
        failCount++
      }
      completed++
      updateDecryptProgress(completed, images.length)
    }

    // 并发池：同时跑 concurrency 个任务
    const pool = new Set<Promise<void>>()
    for (const img of images) {
      const p = decryptOne(img).then(() => { pool.delete(p) })
      pool.add(p)
      if (pool.size >= concurrency) {
        await Promise.race(pool)
      }
    }
    if (pool.size > 0) {
      await Promise.all(pool)
    }

    finishDecrypt(successCount, failCount)
  }, [batchImageMessages, batchImageSelectedDates, batchDecryptConcurrency, currentSessionId, finishDecrypt, sessions, startDecrypt, updateDecryptProgress])

  const batchImageCountByDate = useMemo(() => {
    const map = new Map<string, number>()
    if (!batchImageMessages) return map
    batchImageMessages.forEach(img => {
      if (!img.createTime) return
      const d = new Date(img.createTime * 1000).toISOString().slice(0, 10)
      map.set(d, (map.get(d) ?? 0) + 1)
    })
    return map
  }, [batchImageMessages])

  const batchImageSelectedCount = useMemo(() => {
    if (!batchImageMessages) return 0
    return batchImageMessages.filter(img =>
      img.createTime && batchImageSelectedDates.has(new Date(img.createTime * 1000).toISOString().slice(0, 10))
    ).length
  }, [batchImageMessages, batchImageSelectedDates])

  const toggleBatchImageDate = useCallback((date: string) => {
    setBatchImageSelectedDates(prev => {
      const next = new Set(prev)
      if (next.has(date)) next.delete(date)
      else next.add(date)
      return next
    })
  }, [])
  const selectAllBatchImageDates = useCallback(() => setBatchImageSelectedDates(new Set(batchImageDates)), [batchImageDates])
  const clearAllBatchImageDates = useCallback(() => setBatchImageSelectedDates(new Set()), [])

  const lastSelectedKeyRef = useRef<string | null>(null)

  const handleToggleSelection = useCallback((messageKey: string, isShiftKey: boolean = false) => {
    setSelectedMessages(prev => {
      const next = new Set(prev)

      // Range selection with Shift key
      if (isShiftKey && lastSelectedKeyRef.current !== null && lastSelectedKeyRef.current !== messageKey) {
        const currentMsgs = useChatStore.getState().messages || []
        const idx1 = currentMsgs.findIndex(m => getMessageKey(m) === lastSelectedKeyRef.current)
        const idx2 = currentMsgs.findIndex(m => getMessageKey(m) === messageKey)

        if (idx1 !== -1 && idx2 !== -1) {
          const start = Math.min(idx1, idx2)
          const end = Math.max(idx1, idx2)
          for (let i = start; i <= end; i++) {
            next.add(getMessageKey(currentMsgs[i]))
          }
        }
      } else {
        // Normal toggle
        if (next.has(messageKey)) {
          next.delete(messageKey)
          lastSelectedKeyRef.current = null
        } else {
          next.add(messageKey)
          lastSelectedKeyRef.current = messageKey
        }
      }
      return next
    })
  }, [getMessageKey])

  const formatBatchDateLabel = useCallback((dateStr: string) => {
    const [y, m, d] = dateStr.split('-').map(Number)
    return `${y}年${m}月${d}日`
  }, [])

  const clampContextMenuPosition = useCallback((x: number, y: number) => {
    const viewportPadding = 12
    const estimatedMenuWidth = 180
    const estimatedMenuHeight = 188
    const maxLeft = Math.max(viewportPadding, window.innerWidth - estimatedMenuWidth - viewportPadding)
    const maxTop = Math.max(viewportPadding, window.innerHeight - estimatedMenuHeight - viewportPadding)
    return {
      x: Math.min(Math.max(x, viewportPadding), maxLeft),
      y: Math.min(Math.max(y, viewportPadding), maxTop)
    }
  }, [])

  // 消息右键菜单处理
  const handleContextMenu = useCallback((e: React.MouseEvent, message: Message) => {
    e.preventDefault()
    const nextPos = clampContextMenuPosition(e.clientX, e.clientY)
    setContextMenu({
      x: nextPos.x,
      y: nextPos.y,
      message
    })
  }, [clampContextMenuPosition])

  // 关闭右键菜单
  useEffect(() => {
    const handleClick = () => {
      setContextMenu(null)
    }
    window.addEventListener('click', handleClick)
    return () => {
      window.removeEventListener('click', handleClick)
    }
  }, [])

  // 删除消息 - 触发确认弹窗
  const handleDelete = useCallback((target: { message: Message } | null = null) => {
    const msg = target?.message || contextMenu?.message
    if (!currentSessionId || !msg) return

    setDeleteConfirm({
      show: true,
      mode: 'single',
      message: msg
    })
    setContextMenu(null)
  }, [contextMenu, currentSessionId])

  // 执行单条删除动作
  const performSingleDelete = async (msg: Message) => {
    try {
      const targetMessageKey = getMessageKey(msg)
      const dbPathHint = msg._db_path
      const result = await (window as any).electronAPI.chat.deleteMessage(currentSessionId, msg.localId, msg.createTime, dbPathHint)
      if (result.success) {
        const currentMessages = useChatStore.getState().messages || []
        const newMessages = currentMessages.filter(m => getMessageKey(m) !== targetMessageKey)
        useChatStore.getState().setMessages(newMessages)
      } else {
        alert('删除失败: ' + (result.error || '原因未知'))
      }
    } catch (e) {
      console.error(e)
      alert('删除异常: ' + String(e))
    }
  }

  // 修改消息
  const handleEditMessage = useCallback(() => {
    if (contextMenu) {
      // 允许编辑所有类型的消息
      // 如果是文本消息(1)，使用 parsedContent
      // 如果是其他类型(如系统消息 10000)，使用 rawContent 或 content 作为 XML 源码编辑
      const isText = contextMenu.message.localType === 1
      const rawXml = contextMenu.message.content || (contextMenu.message as any).rawContent || contextMenu.message.parsedContent || ''

      const contentToEdit = isText
        ? cleanMessageContent(contextMenu.message.parsedContent)
        : rawXml

      if (!isText) {
        const fields = parseXmlToFields(rawXml)
        setTempFields(fields)
        setEditMode(fields.length > 0 ? 'fields' : 'raw')
      } else {
        setEditMode('raw')
        setTempFields([])
      }

      setEditingMessage({
        message: contextMenu.message,
        content: contentToEdit
      })
      setContextMenu(null)
    }
  }, [contextMenu])

  // 确认修改消息
  const handleSaveEdit = useCallback(async () => {
    if (editingMessage && currentSessionId) {
      let finalContent = editingMessage.content

      // 如果是字段编辑模式，先同步回 XML
      if (editMode === 'fields' && tempFields.length > 0) {
        finalContent = updateXmlWithFields(editingMessage.content, tempFields)
      }

      if (!finalContent.trim()) {
        handleDelete({ message: editingMessage.message })
        setEditingMessage(null)
        return
      }

      try {
        const result = await (window as any).electronAPI.chat.updateMessage(currentSessionId, editingMessage.message.localId, editingMessage.message.createTime, finalContent)
        if (result.success) {
          const currentMessages = useChatStore.getState().messages || []
          const newMessages = currentMessages.map(m => {
            if (getMessageKey(m) === getMessageKey(editingMessage.message)) {
              return { ...m, parsedContent: finalContent, content: finalContent, rawContent: finalContent }
            }
            return m
          })
          useChatStore.getState().setMessages(newMessages)
          setEditingMessage(null)
        } else {
          alert('修改失败: ' + result.error)
        }
      } catch (e) {
        alert('修改异常: ' + String(e))
      }
    }
  }, [editingMessage, currentSessionId, editMode, tempFields, handleDelete])

  // 用于在异步循环中获取最新的取消状态
  const cancelDeleteRef = useRef(false)

  const handleBatchDelete = () => {
    if (selectedMessages.size === 0) {
      alert('请先选择要删除的消息')
      return
    }
    if (!currentSessionId) return

    setDeleteConfirm({
      show: true,
      mode: 'batch',
      count: selectedMessages.size
    })
  }

  const performBatchDelete = async () => {
    setIsDeleting(true)
    setDeleteProgress({ current: 0, total: selectedMessages.size })
    setCancelDeleteRequested(false)
    cancelDeleteRef.current = false

    try {
      const currentMessages = useChatStore.getState().messages || []
      const selectedKeys = Array.from(selectedMessages)
      const deletedKeys = new Set<string>()

      for (let i = 0; i < selectedKeys.length; i++) {
        if (cancelDeleteRef.current) break

        const key = selectedKeys[i]
        const msgObj = currentMessages.find(m => getMessageKey(m) === key)
        const dbPathHint = msgObj?._db_path
        const createTime = msgObj?.createTime || 0
        const localId = msgObj?.localId || 0

        if (!msgObj) {
          setDeleteProgress({ current: i + 1, total: selectedKeys.length })
          continue
        }

        try {
          const result = await (window as any).electronAPI.chat.deleteMessage(currentSessionId, localId, createTime, dbPathHint)
          if (result.success) {
            deletedKeys.add(key)
          }
        } catch (err) {
          console.error(`删除消息 ${localId} 失败:`, err)
        }

        setDeleteProgress({ current: i + 1, total: selectedKeys.length })
      }

      const finalMessages = (useChatStore.getState().messages || []).filter(m => !deletedKeys.has(getMessageKey(m)))
      useChatStore.getState().setMessages(finalMessages)

      setIsSelectionMode(false)
      setSelectedMessages(new Set<string>())
      lastSelectedKeyRef.current = null

      if (cancelDeleteRef.current) {
        alert(`操作已中止。已删除 ${deletedKeys.size} 条，剩余记录保留。`)
      }
    } catch (e) {
      alert('批量删除出现错误: ' + String(e))
      console.error(e)
    } finally {
      setIsDeleting(false)
      setCancelDeleteRequested(false)
      cancelDeleteRef.current = false
    }
  }

  const messageVirtuosoComponents = useMemo(() => ({
    Header: () => (
      hasMoreMessages ? (
        <div className={`load-more-trigger ${isLoadingMore ? 'loading' : ''}`}>
          {isLoadingMore ? (
            <>
              <Loader2 size={14} />
              <span>加载更多...</span>
            </>
          ) : (
            <span>向上滚动加载更多</span>
          )}
        </div>
      ) : null
    ),
    Footer: () => (
      hasMoreLater ? (
        <div className={`load-more-trigger later ${isLoadingMore ? 'loading' : ''}`}>
          {isLoadingMore ? (
            <>
              <Loader2 size={14} />
              <span>正在加载后续消息...</span>
            </>
          ) : (
            <span>向下滚动查看更新消息</span>
          )}
        </div>
      ) : null
    )
  }), [hasMoreMessages, hasMoreLater, isLoadingMore])

  const renderMessageListItem = useCallback((index: number, msg: Message) => {
    if (!currentSession) return null

    const prevMsg = index > 0 ? messages[index - 1] : undefined
    const showDateDivider = shouldShowDateDivider(msg, prevMsg)
    const showTime = !prevMsg || (msg.createTime - prevMsg.createTime > 300)
    const isSent = msg.isSend === 1
    const isSystem = isSystemMessage(msg.localType)
    const wrapperClass = isSystem ? 'system' : (isSent ? 'sent' : 'received')
    const messageKey = getMessageKey(msg)

    return (
      <div className={`message-wrapper ${wrapperClass} ${highlightedMessageSet.has(messageKey) ? 'new-message' : ''}`}>
        {showDateDivider && (
          <div className="date-divider">
            <span>{formatDateDivider(msg.createTime)}</span>
          </div>
        )}
        <MemoMessageBubble
          message={msg}
          session={currentSession!}
          showTime={!showDateDivider && showTime}
          myAvatarUrl={myAvatarUrl}
          isGroupChat={isCurrentSessionGroup}
          autoTranscribeVoiceEnabled={autoTranscribeVoiceEnabled}
          onRequireModelDownload={handleRequireModelDownload}
          onContextMenu={handleContextMenu}
          isSelectionMode={isSelectionMode}
          messageKey={messageKey}
          isSelected={selectedMessages.has(messageKey)}
          onToggleSelection={handleToggleSelection}
        />
      </div>
    )
  }, [
    messages,
    highlightedMessageSet,
    getMessageKey,
    formatDateDivider,
    currentSession,
    myAvatarUrl,
    isCurrentSessionGroup,
    autoTranscribeVoiceEnabled,
    handleRequireModelDownload,
    handleContextMenu,
    isSelectionMode,
    selectedMessages,
    handleToggleSelection
  ])

  return (
    <div className={`chat-page ${isResizing ? 'resizing' : ''} ${standaloneSessionWindow ? 'standalone session-only' : ''}`}>
      {/* 自定义删除确认对话框 */}
      {deleteConfirm.show && (
        <div className="delete-confirm-overlay">
          <div className="delete-confirm-card">
            <div className="confirm-icon">
              <Trash2 size={32} color="var(--danger)" />
            </div>
            <div className="confirm-content">
              <h3>确认删除</h3>
              <p>
                {deleteConfirm.mode === 'single'
                  ? '确定要删除这条消息吗？此操作不可恢复。'
                  : `确定要删除选中的 ${deleteConfirm.count} 条消息吗？`}
              </p>
            </div>
            <div className="confirm-actions">
              <button
                className="btn-secondary"
                onClick={() => setDeleteConfirm({ ...deleteConfirm, show: false })}
              >
                取消
              </button>
              <button
                className="btn-danger-filled"
                onClick={() => {
                  setDeleteConfirm({ ...deleteConfirm, show: false });
                  if (deleteConfirm.mode === 'single' && deleteConfirm.message) {
                    performSingleDelete(deleteConfirm.message);
                  } else if (deleteConfirm.mode === 'batch') {
                    performBatchDelete();
                  }
                }}
              >
                确定删除
              </button>
            </div>
          </div>
        </div>
      )}

      {/* 批量删除进度遮罩 */}
      {isDeleting && (
        <div className="delete-progress-overlay">
          <div className="delete-progress-card">
            <div className="progress-header">
              <h3>正在彻底删除消息...</h3>
              <span className="count">{deleteProgress.current} / {deleteProgress.total}</span>
            </div>
            <div className="progress-bar-container">
              <div
                className="progress-bar-fill"
                style={{ width: `${(deleteProgress.current / deleteProgress.total) * 100}%` }}
              />
            </div>
            <div className="progress-footer">
              <p>请勿关闭应用或切换会话，确保所有副本都被清理。</p>
              <button
                className="cancel-delete-btn"
                onClick={() => {
                  setCancelDeleteRequested(true)
                  cancelDeleteRef.current = true
                }}
                disabled={cancelDeleteRequested}
              >
                {cancelDeleteRequested ? '正在停止...' : '中止删除'}
              </button>
            </div>
          </div>
        </div>
      )}
      {/* 左侧会话列表 */}
      {!standaloneSessionWindow && (
      <div
        className="session-sidebar"
        ref={sidebarRef}
        style={{ width: sidebarWidth, minWidth: sidebarWidth, maxWidth: sidebarWidth }}
      >
        <div className={`session-header session-header-viewport ${foldedView ? 'folded' : ''}`}>
          {/* 普通 header */}
          <div className="session-header-panel main-header">
            <div className="search-row">
              <div className="search-box expanded">
                <Search size={14} />
                <input
                  ref={searchInputRef}
                  type="text"
                  placeholder="搜索"
                  value={searchKeyword}
                  onChange={(e) => {
                    handleSearch(e.target.value)
                    handleGlobalMsgSearch(e.target.value)
                  }}
                />
                {searchKeyword && (
                  <button className="close-search" onClick={() => { handleCloseSearch(); handleCloseGlobalMsgSearch() }}>
                    <X size={12} />
                  </button>
                )}
              </div>
              <button className="icon-btn refresh-btn" onClick={handleRefresh} disabled={isLoadingSessions || isRefreshingSessions}>
                <RefreshCw size={16} className={(isLoadingSessions || isRefreshingSessions) ? 'spin' : ''} />
              </button>
            </div>
          </div>
          {/* 折叠群 header */}
          <div className="session-header-panel folded-header">
            <div className="folded-view-header">
              <button className="icon-btn back-btn" onClick={() => setFoldedView(false)}>
                <ChevronLeft size={18} />
              </button>
              <span className="folded-view-title">
                <Users size={14} />
                折叠的群聊
              </span>
            </div>
          </div>
        </div>

        {connectionError && (
          <div className="connection-error">
            <AlertCircle size={16} />
            <span>{connectionError}</span>
            <button onClick={connect}>重试</button>
          </div>
        )}

        {/* 全局消息搜索结果 */}
        {globalMsgQuery && (
          <div className="global-msg-search-results">
            {globalMsgSearchError ? (
              <div className="no-results">
                <AlertCircle size={32} />
                <p>{globalMsgSearchError}</p>
              </div>
            ) : globalMsgResults.length > 0 ? (
              <>
                <div className="search-section-header">
                  聊天记录：
                  {globalMsgSearching && (
                    <span className="search-phase-hint">
                      {globalMsgIsBackfilling
                        ? `补全中 ${globalMsgAuthoritativeSessionCount > 0 ? `(${globalMsgAuthoritativeSessionCount})` : ''}...`
                        : '搜索中...'}
                    </span>
                  )}
                  {!globalMsgSearching && globalMsgSearchPhase === 'done' && (
                    <span className="search-phase-hint done">已完成</span>
                  )}
                </div>
                <div className="search-results-list">
                  {groupedGlobalMsgResults.map(([sessionId, messages]) => {
                    const session = sessionLookupMap.get(sessionId)
                    const firstMsg = messages[0]
                    const count = messages.length
                    return (
                      <div
                        key={sessionId}
                        className="session-item"
                        onClick={() => {
                          if (session) {
                            pendingInSessionSearchRef.current = {
                              sessionId,
                              keyword: globalMsgQuery,
                              firstMsgTime: firstMsg.createTime || 0,
                              results: messages
                            }
                            handleSelectSession(session)
                          }
                        }}
                      >
                        <Avatar
                          src={session?.avatarUrl}
                          name={session?.displayName || sessionId}
                          size={48}
                        />
                        <div className="session-content">
                          <div className="session-top">
                            <span className="session-name">{session?.displayName || sessionId}</span>
                          </div>
                          <div className="session-preview">
                            <HighlightTextNoTruncate text={firstMsg.parsedContent || firstMsg.content || ''} keyword={globalMsgQuery} />
                          </div>
                          {count > 1 && (
                            <div className="search-count">共 {count} 条相关聊天记录</div>
                          )}
                        </div>
                      </div>
                    )
                  })}
                </div>
              </>
            ) : globalMsgSearching ? (
              <div className="search-loading">
                <Loader2 className="spin" size={20} />
                <span>{globalMsgSearchPhase === 'seed' ? '搜索中...' : '补全中...'}</span>
              </div>
            ) : (
              <div className="no-results">
                <MessageSquare size={32} />
                <p>未找到相关消息</p>
              </div>
            )}
          </div>
        )}

        {/* ... (previous content) ... */}
        {shouldShowSessionsSkeleton ? (
          <div className="loading-sessions">
            {[1, 2, 3, 4, 5].map(i => (
              <div key={i} className="skeleton-item">
                <div className="skeleton-avatar" />
                <div className="skeleton-content">
                  <div className="skeleton-line" />
                  <div className="skeleton-line" />
                </div>
              </div>
            ))}
          </div>
        ) : (
          <div className={`session-list-viewport ${foldedView ? 'folded' : ''}`}>
            {/* 普通会话列表 */}
            <div className="session-list-panel main-panel">
              {Array.isArray(filteredSessions) && filteredSessions.length > 0 ? (
                <>
                  {searchKeyword && (
                    <div className="search-section-header">联系人：</div>
                  )}
                  <div
                    className="session-list"
                    ref={sessionListRef}
                    onScroll={() => {
                      isScrollingRef.current = true
                      if (sessionScrollTimeoutRef.current) {
                        clearTimeout(sessionScrollTimeoutRef.current)
                      }
                      sessionScrollTimeoutRef.current = window.setTimeout(() => {
                        isScrollingRef.current = false
                        sessionScrollTimeoutRef.current = null
                      }, 200)
                    }}
                  >
                    {filteredSessions.map(session => (
                    <SessionItem
                      key={session.username}
                      session={session}
                      isActive={currentSessionId === session.username}
                      onSelect={handleSelectSession}
                      formatTime={formatSessionTime}
                      searchKeyword={searchKeyword}
                    />
                  ))}
                </div>
                </>
              ) : (
                <div className="empty-sessions">
                  <MessageSquare />
                  <p>暂无会话</p>
                  <p className="hint">检查你的数据库配置</p>
                </div>
              )}
            </div>

            {/* 折叠群列表 */}
            <div className="session-list-panel folded-panel">
              {foldedSessions.length > 0 ? (
                <div className="session-list">
                  {foldedSessions.map(session => (
                    <SessionItem
                      key={session.username}
                      session={session}
                      isActive={currentSessionId === session.username}
                      onSelect={handleSelectSession}
                      formatTime={formatSessionTime}
                      searchKeyword={searchKeyword}
                    />
                  ))}
                </div>
              ) : (
                <div className="empty-sessions">
                  <Users size={32} />
                  <p>没有折叠的群聊</p>
                </div>
              )}
            </div>
          </div>
        )}
      </div>
      )}

      {!standaloneSessionWindow && <div className="resize-handle" onMouseDown={handleResizeStart} />}

      {/* 右侧消息区域 */}
      <div className="message-area">
        {currentSession ? (
          <>
            <div className="message-header">
              <Avatar
                src={currentSession.avatarUrl}
                name={currentSession.displayName || currentSession.username}
                size={40}
                className={isCurrentSessionGroup ? 'group session-avatar' : 'session-avatar'}
              />
              <div className="header-info">
                <h3>{currentSession.displayName || currentSession.username}</h3>
                {isCurrentSessionGroup && (
                  <div className="header-subtitle">群聊</div>
                )}
              </div>
              <div className="header-actions">
                {!standaloneSessionWindow && isCurrentSessionGroup && (
                  <button
                    className="icon-btn group-analytics-btn"
                    onClick={handleGroupAnalytics}
                    title="群聊分析"
                  >
                    <BarChart3 size={18} />
                  </button>
                )}
                {isCurrentSessionGroup && (
                  <button
                    className={`icon-btn group-members-btn ${showGroupMembersPanel ? 'active' : ''}`}
                    onClick={toggleGroupMembersPanel}
                    title="群成员"
                  >
                    <Users size={18} />
                  </button>
                )}
                {!standaloneSessionWindow && (
                  <button
                    className={`icon-btn export-session-btn${isExportActionBusy ? ' exporting' : ''}`}
                    onClick={handleExportCurrentSession}
                    disabled={!currentSessionId || isExportActionBusy}
                    title={isCurrentSessionExporting ? '导出中' : isPreparingExportDialog ? '正在准备导出模块' : '导出当前会话'}
                  >
                    {isExportActionBusy ? (
                      <Loader2 size={18} className="spin" />
                    ) : (
                      <Download size={18} />
                    )}
                  </button>
                )}
                {!standaloneSessionWindow && isCurrentSessionPrivateSnsSupported && (
                  <button
                    className="icon-btn chat-sns-timeline-btn"
                    onClick={openCurrentSessionSnsTimeline}
                    disabled={!currentSessionId}
                    title="查看对方朋友圈"
                  >
                    <Aperture size={18} />
                  </button>
                )}
                {!standaloneSessionWindow && (
                  <button
                    className={`icon-btn batch-transcribe-btn${isBatchTranscribing ? ' transcribing' : ''}`}
                    onClick={() => {
                      if (isBatchTranscribing) {
                        setShowBatchProgress(true)
                      } else {
                        handleBatchTranscribe()
                      }
                    }}
                    disabled={!currentSessionId}
                    title={isBatchTranscribing
                      ? `${runningBatchVoiceTaskType === 'decrypt' ? '批量语音解密' : '批量转写'}中 (${batchTranscribeProgress.current}/${batchTranscribeProgress.total})，点击查看进度`
                      : '批量语音处理（解密/转文字）'}
                  >
                    {isBatchTranscribing ? (
                      <Loader2 size={18} className="spin" />
                    ) : (
                      <Mic size={18} />
                    )}
                  </button>
                )}
                {!standaloneSessionWindow && (
                  <button
                    className={`icon-btn batch-decrypt-btn${isBatchDecrypting ? ' transcribing' : ''}`}
                    onClick={() => {
                      if (isBatchDecrypting) {
                        setShowBatchDecryptToast(true)
                      } else {
                        handleBatchDecrypt()
                      }
                    }}
                    disabled={!currentSessionId}
                    title={isBatchDecrypting
                      ? `批量解密中 (${batchDecryptProgress.current}/${batchDecryptProgress.total})，点击查看进度`
                      : '批量解密图片'}
                  >
                    {isBatchDecrypting ? (
                      <Loader2 size={18} className="spin" />
                    ) : (
                      <ImageIcon size={18} />
                    )}
                  </button>
                )}
                <div className="jump-calendar-anchor" ref={jumpCalendarWrapRef}>
                  <button
                    className={`icon-btn jump-to-time-btn ${showJumpPopover ? 'active' : ''}`}
                    onClick={handleToggleJumpPopover}
                    title="跳转到指定时间"
                  >
                    <Calendar size={18} />
                  </button>
                </div>
                {showJumpPopover && createPortal(
                  <div
                    ref={jumpPopoverPortalRef}
                    style={{
                      position: 'fixed',
                      top: jumpPopoverPosition.top,
                      left: jumpPopoverPosition.left,
                      zIndex: 3600
                    }}
                  >
                    <JumpToDatePopover
                      isOpen={showJumpPopover}
                      currentDate={jumpPopoverDate}
                      onClose={() => setShowJumpPopover(false)}
                      onSelect={handleJumpDateSelect}
                      messageDates={messageDates}
                      hasLoadedMessageDates={hasLoadedMessageDates}
                      messageDateCounts={messageDateCounts}
                      loadingDates={loadingDates}
                      loadingDateCounts={loadingDateCounts}
                      style={{ position: 'static', top: 'auto', right: 'auto' }}
                    />
                  </div>,
                  document.body
                )}
                <button
                  className={`icon-btn in-session-search-btn ${showInSessionSearch ? 'active' : ''}`}
                  onClick={handleToggleInSessionSearch}
                  disabled={!currentSessionId}
                  title="搜索会话消息"
                >
                  <Search size={18} />
                </button>
                <button
                  className="icon-btn refresh-messages-btn"
                  onClick={handleRefreshMessages}
                  disabled={isRefreshingMessages || isLoadingMessages}
                  title="刷新消息"
                >
                  <RefreshCw size={18} className={isRefreshingMessages ? 'spin' : ''} />
                </button>
                {!shouldHideStandaloneDetailButton && (
                  <button
                    className={`icon-btn detail-btn ${showDetailPanel ? 'active' : ''}`}
                    onClick={toggleDetailPanel}
                    title="会话详情"
                  >
                    <Info size={18} />
                  </button>
                )}
              </div>
            </div>

            {isPreparingExportDialog && exportPrepareHint && (
              <div className="export-prepare-hint" role="status" aria-live="polite">
                <Loader2 size={14} className="spin" />
                <span>{exportPrepareHint}</span>
              </div>
            )}

            <ContactSnsTimelineDialog
              target={chatSnsTimelineTarget}
              onClose={() => setChatSnsTimelineTarget(null)}
            />

            {/* 会话内搜索浮窗 */}
            {showInSessionSearch && (
              <div className="in-session-search-popup">
                <div className="in-session-search-header">
                  <Search size={16} className="search-icon" />
                  <input
                    ref={inSessionSearchRef}
                    type="text"
                    placeholder="搜索消息..."
                    value={inSessionQuery}
                    onChange={e => handleInSessionSearch(e.target.value)}
                    className="search-input"
                  />
                  {inSessionSearching && <Loader2 size={16} className="spin" />}
                  <button className="close-btn" onClick={handleToggleInSessionSearch}>
                    <X size={16} />
                  </button>
                </div>
                {inSessionQuery && (
                  <div className="search-result-header">
                    {inSessionSearching
                      ? '搜索中...'
                      : inSessionSearchError
                        ? '搜索失败'
                        : `找到 ${inSessionResults.length} 条结果`}
                  </div>
                )}
                {inSessionQuery && !inSessionSearching && inSessionSearchError && (
                  <div className="no-results">
                    <AlertCircle size={32} />
                    <p>{inSessionSearchError}</p>
                  </div>
                )}
                {inSessionResults.length > 0 && (
                  <div className="in-session-results">
                    {inSessionResults.map((msg, i) => {
                      const resolvedSenderDisplayName = resolveSearchSenderDisplayName(
                        msg.senderDisplayName,
                        msg.senderUsername,
                        currentSessionId
                      )
                      const resolvedSenderUsername = resolveSearchSenderUsernameFallback(msg.senderUsername)
                      const resolvedSenderAvatarUrl = normalizeSearchAvatarUrl(msg.senderAvatarUrl)
                      const resolvedCurrentSessionName = normalizeSearchIdentityText(currentSession?.displayName) ||
                        resolveSearchSenderUsernameFallback(currentSession?.username) ||
                        resolveSearchSenderUsernameFallback(currentSessionId)
                      const senderName = resolvedSenderDisplayName || (
                        msg.isSend === 1
                          ? '我'
                          : (isCurrentSessionPrivateSnsSupported
                              ? resolvedCurrentSessionName || (inSessionEnriching ? '加载中...' : '未知')
                              : resolvedSenderUsername || (inSessionEnriching ? '加载中...' : '未知成员'))
                      )
                      const senderAvatar = resolvedSenderAvatarUrl || (
                        msg.isSend === 1
                          ? myAvatarUrl
                          : (isCurrentSessionPrivateSnsSupported ? normalizeSearchAvatarUrl(currentSession?.avatarUrl) : undefined)
                      )
                      const senderAvatarLoading = inSessionEnriching && !senderAvatar
                      const previewText = (msg.parsedContent || msg.content || '').slice(0, 80)
                      const displayTime = msg.createTime
                        ? new Date(msg.createTime * 1000).toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
                        : ''
                      const resultKey = getMessageKey(msg)

                      return (
                        <div key={resultKey} className="result-item" onClick={() => handleInSessionResultJump(msg)}>
                          <div className="result-header">
                            <Avatar src={senderAvatar} name={senderName} size={32} loading={senderAvatarLoading} />
                          </div>
                          <div className="result-content">
                            <span className="result-sender">{senderName}</span>
                            <span className="result-text">{previewText}</span>
                          </div>
                          <span className="result-time">{displayTime}</span>
                        </div>
                      )
                    })}
                  </div>
                )}
                {inSessionQuery && !inSessionSearching && !inSessionSearchError && inSessionResults.length === 0 && (
                  <div className="no-results">
                    <MessageSquare size={32} />
                    <p>未找到相关消息</p>
                  </div>
                )}
              </div>
            )}

            <div className={`message-content-wrapper ${hasInitialMessages ? 'loaded' : 'loading'} ${isSessionSwitching ? 'switching' : ''}`}>
              {standaloneSessionWindow && standaloneLoadStage !== 'ready' && (
                <div className="standalone-phase-overlay" role="status" aria-live="polite">
                  <Loader2 size={22} className="spin" />
                  <span>{standaloneLoadStage === 'connecting' ? '正在建立连接...' : '正在加载最近消息...'}</span>
                  {connectionError && <small>{connectionError}</small>}
                </div>
              )}
              {isLoadingMessages && (!hasInitialMessages || isSessionSwitching) && (
                <div className="loading-messages loading-overlay">
                  <Loader2 size={24} />
                  <span>{isSessionSwitching ? '切换会话中...' : '加载消息中...'}</span>
                </div>
              )}
              <div
                className={`message-list ${hasInitialMessages ? 'loaded' : 'loading'}`}
                ref={handleMessageListScrollParentRef}
                onWheel={handleMessageListWheel}
              >
                {!isLoadingMessages && messages.length === 0 && !hasMoreMessages ? (
                  <div className="empty-chat-inline">
                    <MessageSquare size={32} />
                    <span>该联系人没有聊天记录</span>
                  </div>
                ) : (
                  <Virtuoso
                    ref={messageVirtuosoRef}
                    className="message-virtuoso"
                    customScrollParent={messageListScrollParent ?? undefined}
                    data={messages}
                    overscan={360}
                    followOutput={(atBottom) => (atBottom || isMessageListAtBottomRef.current ? 'auto' : false)}
                    atBottomThreshold={80}
                    atBottomStateChange={handleMessageAtBottomStateChange}
                    atTopStateChange={handleMessageAtTopStateChange}
                    rangeChanged={handleMessageRangeChanged}
                    computeItemKey={(_, msg) => getMessageKey(msg)}
                    components={messageVirtuosoComponents}
                    itemContent={renderMessageListItem}
                  />
                )}

                {/* 回到底部按钮 */}
                <div className={`scroll-to-bottom ${showScrollToBottom ? 'show' : ''}`} onClick={scrollToBottom}>
                  <ChevronDown size={16} />
                  <span>回到底部</span>
                </div>
              </div>

              {/* 群成员面板 */}
              {showGroupMembersPanel && isCurrentSessionGroup && (
                <div className="detail-panel group-members-panel">
                  <div className="detail-header">
                    <h4>群成员</h4>
                    <button className="close-btn" onClick={() => setShowGroupMembersPanel(false)}>
                      <X size={16} />
                    </button>
                  </div>

                  <div className="group-members-toolbar">
                    <span className="group-members-count">共 {groupPanelMembers.length} 人</span>
                    <div className="group-members-search">
                      <Search size={14} />
                      <input
                        type="text"
                        value={groupMemberSearchKeyword}
                        onChange={(event) => setGroupMemberSearchKeyword(event.target.value)}
                        placeholder="搜索成员"
                      />
                    </div>
                  </div>

                  {isRefreshingGroupMembers && (
                    <div className="group-members-status" role="status" aria-live="polite">
                      <Loader2 size={14} className="spin" />
                      <span>正在统计成员发言数...</span>
                    </div>
                  )}
                  {groupMembersError && groupPanelMembers.length > 0 && (
                    <div className="group-members-status warning" role="status" aria-live="polite">
                      <span>{groupMembersError}</span>
                    </div>
                  )}

                  {isLoadingGroupMembers ? (
                    <div className="detail-loading">
                      <Loader2 size={20} className="spin" />
                      <span>{groupMembersLoadingHint || '加载群成员中...'}</span>
                    </div>
                  ) : groupMembersError && groupPanelMembers.length === 0 ? (
                    <div className="detail-empty">{groupMembersError}</div>
                  ) : filteredGroupPanelMembers.length === 0 ? (
                    <div className="detail-empty">{groupMemberSearchKeyword.trim() ? '暂无匹配成员' : '暂无群成员数据'}</div>
                  ) : (
                    <div className="group-members-list">
                      {filteredGroupPanelMembers.map((member) => (
                        <div key={member.username} className="group-member-item">
                          <div className="group-member-main">
                            <Avatar
                              src={member.avatarUrl}
                              name={member.displayName || member.username}
                              size={34}
                              className="group-member-avatar"
                            />
                            <div className="group-member-meta">
                              <div className="group-member-name-row">
                                <span className="group-member-name" title={member.displayName || member.username}>
                                  {member.displayName || member.username}
                                </span>
                                <div className="group-member-badges">
                                  {member.isOwner && (
                                    <span className="member-flag owner" title="群主">
                                      群主
                                    </span>
                                  )}
                                  {member.isFriend && (
                                    <span className="member-flag friend" title="好友">
                                      好友
                                    </span>
                                  )}
                                </div>
                              </div>
                              <span className="group-member-id" title={member.alias || member.username}>
                                {member.alias || member.username}
                              </span>
                            </div>
                          </div>
                          <span className={`group-member-count ${member.messageCountStatus}`}>
                            {member.messageCountStatus === 'loading'
                              ? '统计中'
                              : member.messageCountStatus === 'failed'
                                ? '统计失败'
                                : `${member.messageCount.toLocaleString()} 条`}
                          </span>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              )}

              {/* 会话详情面板 */}
              {showDetailPanel && (
                <div className="detail-panel">
                  <div className="detail-header">
                    <h4>会话详情</h4>
                    <button className="close-btn" onClick={() => setShowDetailPanel(false)}>
                      <X size={16} />
                    </button>
                  </div>
                  {isLoadingDetail && !sessionDetail ? (
                    <div className="detail-loading">
                      <Loader2 size={20} className="spin" />
                      <span>加载中...</span>
                    </div>
                  ) : sessionDetail ? (
                    <div className="detail-content">
                      <div className="detail-section">
                        <div className="detail-item">
                          <Hash size={14} />
                          <span className="label">微信ID</span>
                          <span className="value">{sessionDetail.wxid}</span>
                          <button className="copy-btn" title="复制" onClick={() => handleCopyField(sessionDetail.wxid, 'wxid')}>
                            {copiedField === 'wxid' ? <Check size={12} /> : <Copy size={12} />}
                          </button>
                        </div>
                        {sessionDetail.remark && (
                          <div className="detail-item">
                            <span className="label">备注</span>
                            <span className="value">{sessionDetail.remark}</span>
                            <button className="copy-btn" title="复制" onClick={() => handleCopyField(sessionDetail.remark!, 'remark')}>
                              {copiedField === 'remark' ? <Check size={12} /> : <Copy size={12} />}
                            </button>
                          </div>
                        )}
                        {sessionDetail.nickName && (
                          <div className="detail-item">
                            <span className="label">昵称</span>
                            <span className="value">{sessionDetail.nickName}</span>
                            <button className="copy-btn" title="复制" onClick={() => handleCopyField(sessionDetail.nickName!, 'nickName')}>
                              {copiedField === 'nickName' ? <Check size={12} /> : <Copy size={12} />}
                            </button>
                          </div>
                        )}
                        {sessionDetail.alias && (
                          <div className="detail-item">
                            <span className="label">微信号</span>
                            <span className="value">{sessionDetail.alias}</span>
                            <button className="copy-btn" title="复制" onClick={() => handleCopyField(sessionDetail.alias!, 'alias')}>
                              {copiedField === 'alias' ? <Check size={12} /> : <Copy size={12} />}
                            </button>
                          </div>
                        )}
                      </div>

                      <div className="detail-section">
                        <div className="section-title">
                          <MessageSquare size={14} />
                          <span>消息统计（导出口径）</span>
                        </div>
                        <div className="detail-stats-meta">
                          {isRefreshingDetailStats
                            ? '统计刷新中...'
                            : sessionDetail.statsUpdatedAt
                              ? `${sessionDetail.statsStale ? '缓存于' : '更新于'} ${formatYmdHmDateTime(sessionDetail.statsUpdatedAt)}${sessionDetail.statsStale ? '（将后台刷新）' : ''}`
                              : (isLoadingDetailExtra ? '统计加载中...' : '暂无统计缓存')}
                        </div>
                        <div className="detail-item">
                          <span className="label">消息总数</span>
                          <span className="value highlight">
                            {Number.isFinite(sessionDetail.messageCount)
                              ? sessionDetail.messageCount.toLocaleString()
                              : ((isLoadingDetail || isLoadingDetailExtra) ? '统计中...' : '—')}
                          </span>
                        </div>
                        <div className="detail-item">
                          <span className="label">语音</span>
                          <span className="value">
                            {Number.isFinite(sessionDetail.voiceMessages)
                              ? (sessionDetail.voiceMessages as number).toLocaleString()
                              : (isLoadingDetailExtra ? '统计中...' : '—')}
                          </span>
                        </div>
                        <div className="detail-item">
                          <span className="label">图片</span>
                          <span className="value">
                            {Number.isFinite(sessionDetail.imageMessages)
                              ? (sessionDetail.imageMessages as number).toLocaleString()
                              : (isLoadingDetailExtra ? '统计中...' : '—')}
                          </span>
                        </div>
                        <div className="detail-item">
                          <span className="label">视频</span>
                          <span className="value">
                            {Number.isFinite(sessionDetail.videoMessages)
                              ? (sessionDetail.videoMessages as number).toLocaleString()
                              : (isLoadingDetailExtra ? '统计中...' : '—')}
                          </span>
                        </div>
                        <div className="detail-item">
                          <span className="label">表情包</span>
                          <span className="value">
                            {Number.isFinite(sessionDetail.emojiMessages)
                              ? (sessionDetail.emojiMessages as number).toLocaleString()
                              : (isLoadingDetailExtra ? '统计中...' : '—')}
                          </span>
                        </div>
                        <div className="detail-item">
                          <span className="label">转账消息数</span>
                          <span className="value">
                            {Number.isFinite(sessionDetail.transferMessages)
                              ? (sessionDetail.transferMessages as number).toLocaleString()
                              : (isLoadingDetailExtra ? '统计中...' : '—')}
                          </span>
                        </div>
                        <div className="detail-item">
                          <span className="label">红包消息数</span>
                          <span className="value">
                            {Number.isFinite(sessionDetail.redPacketMessages)
                              ? (sessionDetail.redPacketMessages as number).toLocaleString()
                              : (isLoadingDetailExtra ? '统计中...' : '—')}
                          </span>
                        </div>
                        <div className="detail-item">
                          <span className="label">通话消息数</span>
                          <span className="value">
                            {Number.isFinite(sessionDetail.callMessages)
                              ? (sessionDetail.callMessages as number).toLocaleString()
                              : (isLoadingDetailExtra ? '统计中...' : '—')}
                          </span>
                        </div>
                        {sessionDetail.wxid.includes('@chatroom') ? (
                          <>
                            <div className="detail-item">
                              <span className="label">我发的消息数</span>
                              <span className="value">
                                {Number.isFinite(sessionDetail.groupMyMessages)
                                  ? (sessionDetail.groupMyMessages as number).toLocaleString()
                                  : (isLoadingDetailExtra ? '统计中...' : '—')}
                              </span>
                            </div>
                            <div className="detail-item">
                              <span className="label">群人数</span>
                              <span className="value">
                                {Number.isFinite(sessionDetail.groupMemberCount)
                                  ? (sessionDetail.groupMemberCount as number).toLocaleString()
                                  : (isLoadingDetailExtra ? '统计中...' : '—')}
                              </span>
                            </div>
                            <div className="detail-item">
                              <span className="label">群发言人数</span>
                              <span className="value">
                                {Number.isFinite(sessionDetail.groupActiveSpeakers)
                                  ? (sessionDetail.groupActiveSpeakers as number).toLocaleString()
                                  : (isLoadingDetailExtra ? '统计中...' : '—')}
                              </span>
                            </div>
                            <div className="detail-item">
                              <span className="label">群共同好友数</span>
                              <span className="value">
                                {sessionDetail.relationStatsLoaded
                                  ? (Number.isFinite(sessionDetail.groupMutualFriends)
                                    ? (sessionDetail.groupMutualFriends as number).toLocaleString()
                                    : '—')
                                  : (
                                    <button
                                      className="detail-inline-btn"
                                      onClick={() => { void loadRelationStats() }}
                                      disabled={isLoadingRelationStats || isLoadingDetailExtra}
                                    >
                                      {isLoadingRelationStats ? '加载中...' : '点击加载'}
                                    </button>
                                  )}
                              </span>
                            </div>
                          </>
                        ) : (
                          <div className="detail-item">
                            <span className="label">共同群聊数</span>
                            <span className="value">
                              {sessionDetail.relationStatsLoaded
                                ? (Number.isFinite(sessionDetail.privateMutualGroups)
                                  ? (sessionDetail.privateMutualGroups as number).toLocaleString()
                                  : '—')
                                : (
                                  <button
                                    className="detail-inline-btn"
                                    onClick={() => { void loadRelationStats() }}
                                    disabled={isLoadingRelationStats || isLoadingDetailExtra}
                                  >
                                    {isLoadingRelationStats ? '加载中...' : '点击加载'}
                                  </button>
                                )}
                            </span>
                          </div>
                        )}
                        <div className="detail-item">
                          <Calendar size={14} />
                          <span className="label">首条消息</span>
                          <span className="value">
                            {sessionDetail.firstMessageTime
                              ? formatYmdDateFromSeconds(sessionDetail.firstMessageTime)
                              : (isLoadingDetailExtra ? '统计中...' : '—')}
                          </span>
                        </div>
                        <div className="detail-item">
                          <Calendar size={14} />
                          <span className="label">最新消息</span>
                          <span className="value">
                            {sessionDetail.latestMessageTime
                              ? formatYmdDateFromSeconds(sessionDetail.latestMessageTime)
                              : (isLoadingDetailExtra ? '统计中...' : '—')}
                          </span>
                        </div>
                      </div>

                      <div className="detail-section">
                        <div className="section-title">
                          <Database size={14} />
                          <span>数据库分布</span>
                        </div>
                        {Array.isArray(sessionDetail.messageTables) && sessionDetail.messageTables.length > 0 ? (
                          <div className="table-list">
                            {sessionDetail.messageTables.map((t, i) => (
                              <div key={i} className="table-item">
                                <span className="db-name">{t.dbName}</span>
                                <span className="table-count">{t.count.toLocaleString()} 条</span>
                              </div>
                            ))}
                          </div>
                        ) : (
                          <div className="detail-table-placeholder">
                            {isLoadingDetailExtra ? '统计中...' : '暂无统计数据'}
                          </div>
                        )}
                      </div>
                    </div>
                  ) : (
                    <div className="detail-empty">暂无详情</div>
                  )}
                </div>
              )}
            </div>
          </>
        ) : (
          <div className="empty-chat">
            <MessageSquare />
            <p>{standaloneSessionWindow ? '会话加载中或暂无会话记录' : '选择一个会话开始查看聊天记录'}</p>
            {standaloneSessionWindow && connectionError && <p className="hint">{connectionError}</p>}
          </div>
        )}
      </div>

      {/* 语音转文字模型下载弹窗 */}
      {showVoiceTranscribeDialog && (
        <VoiceTranscribeDialog
          onClose={() => {
            setShowVoiceTranscribeDialog(false)
            setPendingVoiceTranscriptRequest(null)
          }}
          onDownloadComplete={async () => {
            setShowVoiceTranscribeDialog(false)
            // 下载完成后，触发页面刷新让组件重新尝试转写
            // 通过更新缓存触发组件重新检查
            if (pendingVoiceTranscriptRequest) {
              // 不直接调用转写，而是让组件自己重试
              // 通过触发一个自定义事件来通知所有 MessageBubble 组件
              window.dispatchEvent(new CustomEvent('model-downloaded', {
                detail: {
                  sessionId: pendingVoiceTranscriptRequest.sessionId,
                  messageId: pendingVoiceTranscriptRequest.messageId
                }
              }))
            }
            setPendingVoiceTranscriptRequest(null)
          }}
        />
      )}

      {/* 批量转写确认对话框 */}
      {showBatchConfirm && createPortal(
        <div className="batch-modal-overlay" onClick={() => setShowBatchConfirm(false)}>
          <div className="batch-modal-content batch-confirm-modal" onClick={(e) => e.stopPropagation()}>
            <div className="batch-modal-header">
              <Mic size={20} />
              <h3>{batchVoiceTaskTitle}</h3>
            </div>
            <div className="batch-modal-body">
              <p>先选择任务类型，再选择日期（仅显示有语音的日期），然后开始处理。</p>
              <div className="batch-task-switch" role="tablist" aria-label="语音批量任务类型">
                <button
                  type="button"
                  className={`batch-task-btn${batchVoiceTaskType === 'decrypt' ? ' active' : ''}`}
                  onClick={() => setBatchVoiceTaskType('decrypt')}
                >
                  批量解密语音
                </button>
                <button
                  type="button"
                  className={`batch-task-btn${batchVoiceTaskType === 'transcribe' ? ' active' : ''}`}
                  onClick={() => setBatchVoiceTaskType('transcribe')}
                >
                  批量转文字
                </button>
              </div>
              {batchVoiceDates.length > 0 && (
                <div className="batch-dates-list-wrap">
                  <div className="batch-dates-actions">
                    <button type="button" className="batch-dates-btn" onClick={selectAllBatchDates}>全选</button>
                    <button type="button" className="batch-dates-btn" onClick={clearAllBatchDates}>取消全选</button>
                  </div>
                  <ul className="batch-dates-list">
                    {batchVoiceDates.map(dateStr => {
                      const count = batchCountByDate.get(dateStr) ?? 0
                      const checked = batchSelectedDates.has(dateStr)
                      return (
                        <li key={dateStr}>
                          <label className="batch-date-row">
                            <input
                              type="checkbox"
                              checked={checked}
                              onChange={() => toggleBatchDate(dateStr)}
                            />
                            <span className="batch-date-label">{formatBatchDateLabel(dateStr)}</span>
                            <span className="batch-date-count">{count} 条语音</span>
                          </label>
                        </li>
                      )
                    })}
                  </ul>
                </div>
              )}
              <div className="batch-info">
                <div className="info-item">
                  <span className="label">已选:</span>
                  <span className="value">{batchSelectedDates.size} 天有语音，共 {batchSelectedMessageCount} 条语音</span>
                </div>
                <div className="info-item">
                  <span className="label">预计耗时:</span>
                  <span className="value">约 {batchVoiceTaskMinutes} 分钟</span>
                </div>
              </div>
              <div className="batch-warning">
                <AlertCircle size={16} />
                <span>
                  {batchVoiceTaskType === 'decrypt'
                    ? '批量解密会预先缓存语音数据，之后播放和转写会更快。解密过程中可以继续使用其他功能。'
                    : '批量转写可能需要较长时间，转写过程中可以继续使用其他功能。已转写过的语音会自动跳过。'}
                </span>
              </div>
            </div>
            <div className="batch-modal-footer">
              <button className="btn-secondary" onClick={() => setShowBatchConfirm(false)}>
                取消
              </button>
              <button className="btn-primary batch-transcribe-start-btn" onClick={confirmBatchTranscribe}>
                <Mic size={16} />
                开始{batchVoiceTaskVerb}
              </button>
            </div>
          </div>
        </div>,
        document.body
      )}
      {/* 消息右键菜单 */}
      {showBatchDecryptConfirm && createPortal(
        <div className="batch-modal-overlay" onClick={() => setShowBatchDecryptConfirm(false)}>
          <div className="batch-modal-content batch-confirm-modal" onClick={(e) => e.stopPropagation()}>
            <div className="batch-modal-header">
              <ImageIcon size={20} />
              <h3>批量解密图片</h3>
            </div>
            <div className="batch-modal-body">
              <p>选择要解密的日期（仅显示有图片的日期），然后开始解密。</p>
              {batchImageDates.length > 0 && (
                <div className="batch-dates-list-wrap">
                  <div className="batch-dates-actions">
                    <button type="button" className="batch-dates-btn" onClick={selectAllBatchImageDates}>全选</button>
                    <button type="button" className="batch-dates-btn" onClick={clearAllBatchImageDates}>取消全选</button>
                  </div>
                  <ul className="batch-dates-list">
                    {batchImageDates.map(dateStr => {
                      const count = batchImageCountByDate.get(dateStr) ?? 0
                      const checked = batchImageSelectedDates.has(dateStr)
                      return (
                        <li key={dateStr}>
                          <label className="batch-date-row">
                            <input
                              type="checkbox"
                              checked={checked}
                              onChange={() => toggleBatchImageDate(dateStr)}
                            />
                            <span className="batch-date-label">{formatBatchDateLabel(dateStr)}</span>
                            <span className="batch-date-count">{count} 张图片</span>
                          </label>
                        </li>
                      )
                    })}
                  </ul>
                </div>
              )}
              <div className="batch-info">
                <div className="info-item">
                  <span className="label">已选:</span>
                  <span className="value">{batchImageSelectedDates.size} 天，共 {batchImageSelectedCount} 张图片</span>
                </div>
                <div className="info-item">
                  <span className="label">并发数:</span>
                  <div className="batch-concurrency-field">
                    <button
                      type="button"
                      className={`batch-concurrency-trigger ${showConcurrencyDropdown ? 'open' : ''}`}
                      onClick={() => setShowConcurrencyDropdown(!showConcurrencyDropdown)}
                    >
                      <span>{batchDecryptConcurrency === 1 ? '1（最慢，最稳）' : batchDecryptConcurrency === 6 ? '6（推荐）' : batchDecryptConcurrency === 20 ? '20（最快，可能卡顿）' : String(batchDecryptConcurrency)}</span>
                      <ChevronDown size={14} />
                    </button>
                    {showConcurrencyDropdown && (
                      <div className="batch-concurrency-dropdown">
                        {[
                          { value: 1, label: '1（最慢，最稳）' },
                          { value: 3, label: '3' },
                          { value: 6, label: '6（推荐）' },
                          { value: 10, label: '10' },
                          { value: 20, label: '20（最快，可能卡顿）' },
                        ].map(opt => (
                          <button
                            key={opt.value}
                            type="button"
                            className={`batch-concurrency-option ${batchDecryptConcurrency === opt.value ? 'active' : ''}`}
                            onClick={() => { setBatchDecryptConcurrency(opt.value); setShowConcurrencyDropdown(false) }}
                          >
                            {opt.label}
                          </button>
                        ))}
                      </div>
                    )}
                  </div>
                </div>
              </div>
              <div className="batch-warning">
                <AlertCircle size={16} />
                <span>批量解密可能需要较长时间，进行中会在右下角显示非阻塞进度浮层。</span>
              </div>
            </div>
            <div className="batch-modal-footer">
              <button className="btn-secondary" onClick={() => setShowBatchDecryptConfirm(false)}>
                取消
              </button>
              <button className="btn-primary" onClick={confirmBatchDecrypt}>
                <ImageIcon size={16} />
                开始解密
              </button>
            </div>
          </div>
        </div>,
        document.body
      )}
      {contextMenu && createPortal(
        <>
          <div className="context-menu-overlay" onClick={() => setContextMenu(null)}
            style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, zIndex: 12040 }} />
          <div
            className="context-menu"
            style={{
              position: 'fixed',
              top: contextMenu.y,
              left: contextMenu.x,
              zIndex: 12050,
              maxHeight: 'min(280px, calc(100vh - 24px))',
              overflowY: 'auto'
            }}
            onClick={(e) => e.stopPropagation()}
          >
            <div className="menu-item" onClick={handleEditMessage}>
              <Edit2 size={16} />
              <span>{contextMenu.message.localType === 1 ? '修改消息' : '编辑源码'}</span>
            </div>
            <div className="menu-item" onClick={() => {
              setIsSelectionMode(true)
              setSelectedMessages(new Set<string>([getMessageKey(contextMenu.message)]))
              lastSelectedKeyRef.current = getMessageKey(contextMenu.message)
              setContextMenu(null)
            }}>
              <CheckSquare size={16} />
              <span>多选</span>
            </div>
            <div className="menu-item delete" onClick={(e) => { e.stopPropagation(); handleDelete() }}>
              <Trash2 size={16} />
              <span>删除消息</span>
            </div>
            <div className="menu-item" onClick={() => { setShowMessageInfo(contextMenu.message); setContextMenu(null) }}>
              <Info size={16} />
              <span>查看消息信息</span>
            </div>
          </div>
        </>,
        document.body
      )}

      {/* 消息信息弹窗 */}
      {showMessageInfo && createPortal(
        <div className="message-info-overlay" onClick={() => setShowMessageInfo(null)}>
          <div className="message-info-modal" onClick={(e) => e.stopPropagation()}>
            <div className="detail-header">
              <h4>消息详情</h4>
              <button className="close-btn" onClick={() => setShowMessageInfo(null)}>
                <X size={16} />
              </button>
            </div>
            <div className="detail-content">
              <div className="detail-section">
                <div className="detail-item">
                  <Hash size={14} />
                  <span className="label">Local ID</span>
                  <span className="value">{showMessageInfo.localId}</span>
                  <button className="copy-btn" title="复制" onClick={() => handleCopyField(String(showMessageInfo.localId), 'msgLocalId')}>
                    {copiedField === 'msgLocalId' ? <Check size={12} /> : <Copy size={12} />}
                  </button>
                </div>
                <div className="detail-item">
                  <Hash size={14} />
                  <span className="label">Server ID</span>
                  <span className="value">{showMessageInfo.serverId}</span>
                </div>
                <div className="detail-item">
                  <span className="label">消息类型</span>
                  <span className="value highlight">{showMessageInfo.localType}</span>
                </div>
                <div className="detail-item">
                  <span className="label">发送者</span>
                  <span className="value">{showMessageInfo.senderUsername || '-'}</span>
                  {showMessageInfo.senderUsername && (
                    <button className="copy-btn" title="复制" onClick={() => handleCopyField(showMessageInfo.senderUsername!, 'msgSender')}>
                      {copiedField === 'msgSender' ? <Check size={12} /> : <Copy size={12} />}
                    </button>
                  )}
                </div>
                <div className="detail-item">
                  <Calendar size={14} />
                  <span className="label">创建时间</span>
                  <span className="value">{new Date(showMessageInfo.createTime * 1000).toLocaleString()}</span>
                </div>
                <div className="detail-item">
                  <span className="label">发送状态</span>
                  <span className="value">{showMessageInfo.isSend === 1 ? '发送' : '接收'}</span>
                </div>
              </div>

              {(showMessageInfo.imageMd5 || showMessageInfo.videoMd5 || showMessageInfo.voiceDurationSeconds != null) && (
                <div className="detail-section">
                  <div className="section-title">
                    <ImageIcon size={14} />
                    <span>媒体信息</span>
                  </div>
                  {showMessageInfo.imageMd5 && (
                    <div className="detail-item">
                      <span className="label">Image MD5</span>
                      <span className="value mono">{showMessageInfo.imageMd5}</span>
                      <button className="copy-btn" title="复制" onClick={() => handleCopyField(showMessageInfo.imageMd5!, 'imgMd5')}>
                        {copiedField === 'imgMd5' ? <Check size={12} /> : <Copy size={12} />}
                      </button>
                    </div>
                  )}
                  {showMessageInfo.imageDatName && (
                    <div className="detail-item">
                      <span className="label">DAT 文件</span>
                      <span className="value mono">{showMessageInfo.imageDatName}</span>
                    </div>
                  )}
                  {showMessageInfo.videoMd5 && (
                    <div className="detail-item">
                      <span className="label">Video MD5</span>
                      <span className="value mono">{showMessageInfo.videoMd5}</span>
                      <button className="copy-btn" title="复制" onClick={() => handleCopyField(showMessageInfo.videoMd5!, 'vidMd5')}>
                        {copiedField === 'vidMd5' ? <Check size={12} /> : <Copy size={12} />}
                      </button>
                    </div>
                  )}
                  {showMessageInfo.voiceDurationSeconds != null && (
                    <div className="detail-item">
                      <Mic size={14} />
                      <span className="label">语音时长</span>
                      <span className="value">{showMessageInfo.voiceDurationSeconds}秒</span>
                    </div>
                  )}
                </div>
              )}

              {(showMessageInfo.emojiMd5 || showMessageInfo.emojiCdnUrl) && (
                <div className="detail-section">
                  <div className="section-title">
                    <span>表情包信息</span>
                  </div>
                  {showMessageInfo.emojiMd5 && (
                    <div className="detail-item">
                      <span className="label">MD5</span>
                      <span className="value mono">{showMessageInfo.emojiMd5}</span>
                    </div>
                  )}
                  {showMessageInfo.emojiCdnUrl && (
                    <div className="detail-item">
                      <span className="label">CDN URL</span>
                      <span className="value mono">{showMessageInfo.emojiCdnUrl}</span>
                    </div>
                  )}
                </div>
              )}

              {showMessageInfo.localType !== 1 && (showMessageInfo.rawContent || showMessageInfo.content) && (
                <div className="detail-section">
                  <div className="section-title">
                    <span>原始消息内容</span>
                    <button className="copy-btn" title="复制" onClick={() => handleCopyField(showMessageInfo.rawContent || showMessageInfo.content || '', 'rawContent')}>
                      {copiedField === 'rawContent' ? <Check size={12} /> : <Copy size={12} />}
                    </button>
                  </div>
                  <div className="raw-content-box">
                    <pre>{showMessageInfo.rawContent || showMessageInfo.content}</pre>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>,
        document.body
      )}

      {/* 修改消息弹窗 */}
      {editingMessage && createPortal(
        <div className="modal-overlay">
          <div className="modal-content edit-message-modal">
            <div className="modal-header">
              <h3 style={{ margin: 0 }}>{editingMessage.message.localType === 1 ? '修改消息' : '编辑消息'}</h3>
              <button className="close-btn" onClick={() => setEditingMessage(null)}>
                <X size={16} />
              </button>
            </div>

            <div style={{ flex: 1, overflowY: 'auto', display: 'flex', flexDirection: 'column' }}>
              {editMode === 'raw' ? (
                <textarea
                  className="edit-message-textarea"
                  style={{ fontFamily: 'inherit', width: '100%', boxSizing: 'border-box' }}
                  value={editingMessage.content}
                  onChange={(e) => setEditingMessage({ ...editingMessage, content: e.target.value })}
                  rows={editingMessage.message.localType === 1 ? 8 : 15}
                />
              ) : (
                <div style={{ padding: '16px 20px', display: 'flex', flexDirection: 'column', gap: '14px' }}>
                  {tempFields.map((field, idx) => (
                    <div key={idx} style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
                      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                        <span style={{ fontSize: '12px', color: 'var(--text-secondary)', fontWeight: 500 }}>
                          {field.tagName ? field.tagName : '节点'}: <span style={{ color: 'var(--primary)' }}>{field.key}</span>
                        </span>
                        <span style={{ fontSize: '10px', color: 'var(--text-tertiary)', opacity: 0.6 }}>
                          {field.type === 'attr' ? '属性' : '文本内容'}
                        </span>
                      </div>
                      <input
                        type="text"
                        value={field.value}
                        onChange={(e) => {
                          const newFields = [...tempFields]
                          newFields[idx].value = e.target.value
                          setTempFields(newFields)
                        }}
                        style={{
                          background: 'var(--bg-tertiary)',
                          border: '1px solid var(--border-color)',
                          borderRadius: '6px',
                          padding: '10px 12px',
                          color: 'var(--text-primary)',
                          fontSize: '13px',
                          outline: 'none',
                          width: '100%',
                          boxSizing: 'border-box'
                        }}
                      />
                    </div>
                  ))}
                </div>
              )}
            </div>

            <div className="modal-actions" style={{ justifyContent: 'space-between' }}>
              <div>
                {editingMessage.message.localType !== 1 && tempFields.length > 0 && (
                  <button
                    onClick={() => setEditMode(editMode === 'raw' ? 'fields' : 'raw')}
                    style={{
                      padding: '6px 12px',
                      fontSize: '12px',
                      borderRadius: '6px',
                      border: '1px solid var(--border-color)',
                      background: editMode === 'fields' ? 'var(--primary)' : 'transparent',
                      color: editMode === 'fields' ? '#fff' : 'var(--text-secondary)',
                      cursor: 'pointer',
                      transition: 'all 0.2s',
                    }}
                  >
                    {editMode === 'raw' ? '可视化编辑' : '源码编辑'}
                  </button>
                )}
              </div>
              <div style={{ display: 'flex', gap: '12px' }}>
                <button className="btn-secondary" onClick={() => setEditingMessage(null)}>取消</button>
                <button className="btn-primary" onClick={handleSaveEdit}>保存</button>
              </div>
            </div>
          </div>
        </div>,
        document.body
      )}

      {/* 底部多选操作栏 */}
      {isSelectionMode && (
        <div style={{
          position: 'absolute',
          bottom: 24,
          left: '50%',
          transform: 'translateX(-50%)',
          backgroundColor: 'var(--bg-secondary)', // Use system background
          color: 'var(--text-primary)',
          boxShadow: '0 8px 24px rgba(0,0,0,0.2)',
          borderRadius: '12px',
          padding: '12px 24px',
          display: 'flex',
          gap: '20px',
          zIndex: 1000,
          alignItems: 'center',
          border: '1px solid var(--border-color)', // Subtle border
          backdropFilter: 'blur(10px)'
        }}>
          <span style={{ fontSize: '14px', fontWeight: 500 }}>已选 {selectedMessages.size} 条</span>
          <div style={{ width: '1px', height: '16px', background: 'var(--border-color)' }}></div>
          <button
            className="btn-danger"
            onClick={handleBatchDelete}
            style={{
              padding: '6px 16px',
              borderRadius: '6px',
              border: 'none',
              backgroundColor: '#fa5151',
              color: 'white',
              cursor: 'pointer',
              fontSize: '13px',
              fontWeight: 500
            }}
          >
            删除
          </button>
          <button
            className="btn-secondary"
            onClick={() => {
              setIsSelectionMode(false)
              setSelectedMessages(new Set<string>())
              lastSelectedKeyRef.current = null
            }}
            style={{
              padding: '6px 16px',
              borderRadius: '6px',
              border: '1px solid var(--border-color)',
              backgroundColor: 'transparent',
              color: 'var(--text-primary)',
              cursor: 'pointer',
              fontSize: '13px'
            }}
          >
            取消
          </button>
        </div>
      )}
    </div>
  )
}

// 全局语音播放管理器：同一时间只能播放一条语音
const globalVoiceManager = {
  currentAudio: null as HTMLAudioElement | null,
  currentStopCallback: null as (() => void) | null,
  play(audio: HTMLAudioElement, onStop: () => void) {
    // 停止当前正在播放的语音
    if (this.currentAudio && this.currentAudio !== audio) {
      this.currentAudio.pause()
      this.currentAudio.currentTime = 0
      this.currentStopCallback?.()
    }
    this.currentAudio = audio
    this.currentStopCallback = onStop
  },
  stop(audio: HTMLAudioElement) {
    if (this.currentAudio === audio) {
      this.currentAudio = null
      this.currentStopCallback = null
    }
  },
}

// 前端表情包缓存
const emojiDataUrlCache = new Map<string, string>()
const imageDataUrlCache = new Map<string, string>()
const voiceDataUrlCache = new Map<string, string>()
const voiceTranscriptCache = new Map<string, string>()
type SharedImageDecryptResult = { success: boolean; localPath?: string; liveVideoPath?: string; error?: string }
const imageDecryptInFlight = new Map<string, Promise<SharedImageDecryptResult>>()
const senderAvatarCache = new Map<string, { avatarUrl?: string; displayName?: string }>()
const senderAvatarLoading = new Map<string, Promise<{ avatarUrl?: string; displayName?: string } | null>>()

function getSharedImageDecryptTask(
  key: string,
  createTask: () => Promise<SharedImageDecryptResult>
): Promise<SharedImageDecryptResult> {
  const existing = imageDecryptInFlight.get(key)
  if (existing) return existing
  const task = createTask().finally(() => {
    if (imageDecryptInFlight.get(key) === task) {
      imageDecryptInFlight.delete(key)
    }
  })
  imageDecryptInFlight.set(key, task)
  return task
}

const buildVoiceCacheIdentity = (
  sessionId: string,
  message: Pick<Message, 'localId' | 'createTime' | 'serverId' | 'serverIdRaw'>
): string => {
  const normalizedSessionId = String(sessionId || '').trim()
  const localId = Math.max(0, Math.floor(Number(message?.localId || 0)))
  const createTime = Math.max(0, Math.floor(Number(message?.createTime || 0)))
  const serverIdRaw = String(message?.serverIdRaw ?? message?.serverId ?? '').trim()
  const serverId = /^\d+$/.test(serverIdRaw)
    ? serverIdRaw.replace(/^0+(?=\d)/, '')
    : String(Math.max(0, Math.floor(Number(serverIdRaw || 0))))
  return `${normalizedSessionId}:${localId}:${createTime}:${serverId || '0'}`
}

// 引用消息中的动画表情组件
function QuotedEmoji({ cdnUrl, md5 }: { cdnUrl: string; md5?: string }) {
  const cacheKey = md5 || cdnUrl
  const [localPath, setLocalPath] = useState<string | undefined>(() => emojiDataUrlCache.get(cacheKey))
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState(false)

  useEffect(() => {
    if (localPath || loading || error) return
    setLoading(true)
    window.electronAPI.chat.downloadEmoji(cdnUrl, md5).then((result: { success: boolean; localPath?: string }) => {
      if (result.success && result.localPath) {
        emojiDataUrlCache.set(cacheKey, result.localPath)
        setLocalPath(result.localPath)
      } else {
        setError(true)
      }
    }).catch(() => setError(true)).finally(() => setLoading(false))
  }, [cdnUrl, md5, cacheKey, localPath, loading, error])

  if (error || (!loading && !localPath)) return <span className="quoted-type-label">[动画表情]</span>
  if (loading) return <span className="quoted-type-label">[动画表情]</span>
  return <img src={localPath} alt="动画表情" className="quoted-emoji-image" />
}

// 消息气泡组件
function MessageBubble({
  message,
  messageKey,
  session,
  showTime,
  myAvatarUrl,
  isGroupChat,
  autoTranscribeVoiceEnabled,
  onRequireModelDownload,
  onContextMenu,
  isSelectionMode,
  isSelected,
  onToggleSelection
}: {
  message: Message;
  messageKey: string;
  session: ChatSession;
  showTime?: boolean;
  myAvatarUrl?: string;
  isGroupChat?: boolean;
  autoTranscribeVoiceEnabled?: boolean;
  onRequireModelDownload?: (sessionId: string, messageId: string) => void;
  onContextMenu?: (e: React.MouseEvent, message: Message) => void;
  isSelectionMode?: boolean;
  isSelected?: boolean;
  onToggleSelection?: (messageKey: string, isShiftKey?: boolean) => void;
}) {
  const isSystem = isSystemMessage(message.localType)
  const isEmoji = message.localType === 47
  const isImage = message.localType === 3
  const isVideo = message.localType === 43
  const isVoice = message.localType === 34
  const isCard = message.localType === 42
  const isCall = message.localType === 50
  const isType49 = message.localType === 49
  const isSent = message.isSend === 1
  const [senderAvatarUrl, setSenderAvatarUrl] = useState<string | undefined>(undefined)
  const [senderName, setSenderName] = useState<string | undefined>(undefined)
  const senderProfileRequestSeqRef = useRef(0)
  const [emojiError, setEmojiError] = useState(false)
  const [emojiLoading, setEmojiLoading] = useState(false)

  // 缓存相关的 state 必须在所有 Hooks 之前声明
  const cacheKey = message.emojiMd5 || message.emojiCdnUrl || ''
  const [emojiLocalPath, setEmojiLocalPath] = useState<string | undefined>(
    () => emojiDataUrlCache.get(cacheKey) || message.emojiLocalPath
  )
  const imageCacheKey = message.imageMd5 || message.imageDatName || `local:${message.localId}`
  const [imageLocalPath, setImageLocalPath] = useState<string | undefined>(
    () => imageDataUrlCache.get(imageCacheKey)
  )
  const voiceIdentityKey = buildVoiceCacheIdentity(session.username, message)
  const voiceCacheKey = `voice:${voiceIdentityKey}`
  const [voiceDataUrl, setVoiceDataUrl] = useState<string | undefined>(
    () => voiceDataUrlCache.get(voiceCacheKey)
  )
  const voiceTranscriptCacheKey = `voice-transcript:${voiceIdentityKey}`
  const [voiceTranscript, setVoiceTranscript] = useState<string | undefined>(
    () => voiceTranscriptCache.get(voiceTranscriptCacheKey)
  )

  // State variables...
  const [imageError, setImageError] = useState(false)
  const [imageLoading, setImageLoading] = useState(false)
  const [imageHasUpdate, setImageHasUpdate] = useState(false)
  const [imageClicked, setImageClicked] = useState(false)
  const imageUpdateCheckedRef = useRef<string | null>(null)
  const imageClickTimerRef = useRef<number | null>(null)
  const imageContainerRef = useRef<HTMLDivElement>(null)
  const emojiContainerRef = useRef<HTMLDivElement>(null)
  const imageResizeBaselineRef = useRef<number | null>(null)
  const emojiResizeBaselineRef = useRef<number | null>(null)
  const imageObservedHeightRef = useRef<number | null>(null)
  const emojiObservedHeightRef = useRef<number | null>(null)
  const imageAutoDecryptTriggered = useRef(false)
  const imageAutoHdTriggered = useRef<string | null>(null)
  const [imageInView, setImageInView] = useState(false)
  const imageForceHdAttempted = useRef<string | null>(null)
  const imageForceHdPending = useRef(false)
  const imageDecryptPendingRef = useRef(false)
  const [imageLiveVideoPath, setImageLiveVideoPath] = useState<string | undefined>(undefined)
  const [voiceError, setVoiceError] = useState(false)
  const [voiceLoading, setVoiceLoading] = useState(false)
  const [isVoicePlaying, setIsVoicePlaying] = useState(false)
  const voiceAudioRef = useRef<HTMLAudioElement | null>(null)
  const [voiceTranscriptLoading, setVoiceTranscriptLoading] = useState(false)
  const [voiceTranscriptError, setVoiceTranscriptError] = useState(false)
  const voiceTranscriptRequestedRef = useRef(false)
  const [voiceCurrentTime, setVoiceCurrentTime] = useState(0)
  const [voiceDuration, setVoiceDuration] = useState(0)
  const [voiceWaveform, setVoiceWaveform] = useState<number[]>([])
  const voiceAutoDecryptTriggered = useRef(false)

  // 转账消息双方名称
  const [transferPayerName, setTransferPayerName] = useState<string | undefined>(undefined)
  const [transferReceiverName, setTransferReceiverName] = useState<string | undefined>(undefined)

  // 视频相关状态
  const [videoLoading, setVideoLoading] = useState(false)
  const [videoInfo, setVideoInfo] = useState<{ videoUrl?: string; coverUrl?: string; thumbUrl?: string; exists: boolean } | null>(null)
  const videoContainerRef = useRef<HTMLElement>(null)
  const [isVideoVisible, setIsVideoVisible] = useState(false)
  const [videoMd5, setVideoMd5] = useState<string | null>(null)

  // 解析视频 MD5
  useEffect(() => {
    if (!isVideo) return





    // 优先使用数据库中的 videoMd5
    if (message.videoMd5) {

      setVideoMd5(message.videoMd5)
      return
    }

    // 尝试从多个可能的字段获取原始内容
    const contentToUse = message.content || (message as any).rawContent || message.parsedContent
    if (contentToUse) {

      window.electronAPI.video.parseVideoMd5(contentToUse).then((result: { success: boolean; md5?: string; error?: string }) => {

        if (result && result.success && result.md5) {

          setVideoMd5(result.md5)
        } else {
          console.error('[Video Debug] Failed to parse MD5:', result)
        }
      }).catch((err: unknown) => {
        console.error('[Video Debug] Parse error:', err)
      })
    }
  }, [isVideo, message.videoMd5, message.content, message.parsedContent])

  const formatTime = (timestamp: number): string => {
    if (!Number.isFinite(timestamp) || timestamp <= 0) return '未知时间'
    const date = new Date(timestamp * 1000)
    return date.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit'
    }) + ' ' + date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit', second: '2-digit' })
  }

  const detectImageMimeFromBase64 = useCallback((base64: string): string => {
    try {
      const head = window.atob(base64.slice(0, 48))
      const bytes = new Uint8Array(head.length)
      for (let i = 0; i < head.length; i++) {
        bytes[i] = head.charCodeAt(i)
      }
      if (bytes[0] === 0x47 && bytes[1] === 0x49 && bytes[2] === 0x46) return 'image/gif'
      if (bytes[0] === 0x89 && bytes[1] === 0x50 && bytes[2] === 0x4E && bytes[3] === 0x47) return 'image/png'
      if (bytes[0] === 0xFF && bytes[1] === 0xD8 && bytes[2] === 0xFF) return 'image/jpeg'
      if (bytes[0] === 0x52 && bytes[1] === 0x49 && bytes[2] === 0x46 && bytes[3] === 0x46 &&
        bytes[8] === 0x57 && bytes[9] === 0x45 && bytes[10] === 0x42 && bytes[11] === 0x50) {
        return 'image/webp'
      }
    } catch { }
    return 'image/jpeg'
  }, [])

  const getImageObserverRoot = useCallback((): Element | null => {
    return imageContainerRef.current?.closest('.message-list') ?? null
  }, [])

  const stabilizeScrollerByDelta = useCallback((host: HTMLElement | null, delta: number) => {
    if (!host) return
    if (!Number.isFinite(delta) || Math.abs(delta) < 1) return
    const scroller = host.closest('.message-list') as HTMLDivElement | null
    if (!scroller) return

    const distanceFromBottom = scroller.scrollHeight - (scroller.scrollTop + scroller.clientHeight)
    if (distanceFromBottom <= 96) return

    const scrollerRect = scroller.getBoundingClientRect()
    const hostRect = host.getBoundingClientRect()
    const hostTopInScroller = hostRect.top - scrollerRect.top + scroller.scrollTop
    const viewportBottom = scroller.scrollTop + scroller.clientHeight
    if (hostTopInScroller > viewportBottom + 24) return

    scroller.scrollTop += delta
  }, [])

  const bindResizeObserverForHost = useCallback((
    host: HTMLElement | null,
    observedHeightRef: React.MutableRefObject<number | null>,
    pendingBaselineRef: React.MutableRefObject<number | null>
  ) => {
    if (!host) return

    const initialHeight = host.getBoundingClientRect().height
    observedHeightRef.current = Number.isFinite(initialHeight) && initialHeight > 0 ? initialHeight : null
    if (typeof ResizeObserver === 'undefined') return

    const observer = new ResizeObserver(() => {
      const nextHeight = host.getBoundingClientRect().height
      if (!Number.isFinite(nextHeight) || nextHeight <= 0) {
        observedHeightRef.current = null
        return
      }
      const previousHeight = observedHeightRef.current
      observedHeightRef.current = nextHeight
      if (!Number.isFinite(previousHeight) || (previousHeight as number) <= 0) return
      if (pendingBaselineRef.current !== null) return
      stabilizeScrollerByDelta(host, nextHeight - (previousHeight as number))
    })

    observer.observe(host)
    return () => {
      observer.disconnect()
    }
  }, [stabilizeScrollerByDelta])

  const captureResizeBaseline = useCallback(
    (host: HTMLElement | null, baselineRef: React.MutableRefObject<number | null>) => {
      if (!host) return
      const height = host.getBoundingClientRect().height
      if (!Number.isFinite(height) || height <= 0) return
      baselineRef.current = height
    },
    []
  )

  const stabilizeScrollAfterResize = useCallback(
    (host: HTMLElement | null, baselineRef: React.MutableRefObject<number | null>) => {
      if (!host) return
      const baseline = baselineRef.current
      baselineRef.current = null
      if (!Number.isFinite(baseline) || (baseline as number) <= 0) return

      requestAnimationFrame(() => {
        const nextHeight = host.getBoundingClientRect().height
        stabilizeScrollerByDelta(host, nextHeight - (baseline as number))
      })
    },
    [stabilizeScrollerByDelta]
  )

  const captureImageResizeBaseline = useCallback(() => {
    captureResizeBaseline(imageContainerRef.current, imageResizeBaselineRef)
  }, [captureResizeBaseline])

  const captureEmojiResizeBaseline = useCallback(() => {
    captureResizeBaseline(emojiContainerRef.current, emojiResizeBaselineRef)
  }, [captureResizeBaseline])

  const stabilizeImageScrollAfterResize = useCallback(() => {
    stabilizeScrollAfterResize(imageContainerRef.current, imageResizeBaselineRef)
  }, [stabilizeScrollAfterResize])

  const stabilizeEmojiScrollAfterResize = useCallback(() => {
    stabilizeScrollAfterResize(emojiContainerRef.current, emojiResizeBaselineRef)
  }, [stabilizeScrollAfterResize])

  useEffect(() => {
    if (!isImage) return
    return bindResizeObserverForHost(imageContainerRef.current, imageObservedHeightRef, imageResizeBaselineRef)
  }, [isImage, imageLocalPath, imageLoading, imageError, bindResizeObserverForHost])

  useEffect(() => {
    if (!isEmoji) return
    return bindResizeObserverForHost(emojiContainerRef.current, emojiObservedHeightRef, emojiResizeBaselineRef)
  }, [isEmoji, emojiLocalPath, emojiLoading, emojiError, bindResizeObserverForHost])

  // 下载表情包
  const downloadEmoji = () => {
    if (!message.emojiCdnUrl || emojiLoading) return

    // 先检查缓存
    const cached = emojiDataUrlCache.get(cacheKey)
    if (cached) {
      captureEmojiResizeBaseline()
      setEmojiLocalPath(cached)
      setEmojiError(false)
      return
    }

    setEmojiLoading(true)
    setEmojiError(false)
    window.electronAPI.chat.downloadEmoji(message.emojiCdnUrl, message.emojiMd5).then((result: { success: boolean; localPath?: string; error?: string }) => {
      if (result.success && result.localPath) {
        emojiDataUrlCache.set(cacheKey, result.localPath)
        captureEmojiResizeBaseline()
        setEmojiLocalPath(result.localPath)
      } else {
        setEmojiError(true)
      }
    }).catch(() => {
      setEmojiError(true)
    }).finally(() => {
      setEmojiLoading(false)
    })
  }

  // 群聊中获取发送者信息 (如果自己发的没头像，也尝试拉取)
  useEffect(() => {
    const sender = String(message.senderUsername || '').trim()
    const cached = sender ? senderAvatarCache.get(sender) : undefined
    setSenderAvatarUrl(cached?.avatarUrl || message.senderAvatarUrl || undefined)
    setSenderName(cached?.displayName || message.senderDisplayName || undefined)

    if (!sender || !(isGroupChat || (isSent && !myAvatarUrl))) return

    const requestSeq = senderProfileRequestSeqRef.current + 1
    senderProfileRequestSeqRef.current = requestSeq
    let cancelled = false
    const applyProfile = (result: { avatarUrl?: string; displayName?: string } | null) => {
      if (!result || cancelled) return
      if (requestSeq !== senderProfileRequestSeqRef.current) return
      if (result.avatarUrl) setSenderAvatarUrl(result.avatarUrl)
      if (result.displayName) setSenderName(result.displayName)
    }

    if (cached) {
      applyProfile(cached)
      return () => {
        cancelled = true
      }
    }

    const pending = senderAvatarLoading.get(sender)
    if (pending) {
      pending.then(applyProfile).catch(() => { })
      return () => {
        cancelled = true
      }
    }

    const request = window.electronAPI.chat.getContactAvatar(sender)
    senderAvatarLoading.set(sender, request)
    request.then((result: { avatarUrl?: string; displayName?: string } | null) => {
      if (result) {
        senderAvatarCache.set(sender, result)
      }
      applyProfile(result)
    }).catch(() => { }).finally(() => {
      if (senderAvatarLoading.get(sender) === request) {
        senderAvatarLoading.delete(sender)
      }
    })

    return () => {
      cancelled = true
    }
  }, [isGroupChat, isSent, message.senderAvatarUrl, message.senderDisplayName, message.senderUsername, myAvatarUrl])

  // 解析转账消息的付款方和收款方显示名称
  useEffect(() => {
    const payerWxid = (message as any).transferPayerUsername
    const receiverWxid = (message as any).transferReceiverUsername
    if (!payerWxid && !receiverWxid) return
    // 仅对转账消息类型处理
    if (message.localType !== 49 && message.localType !== 8589934592049) return

    window.electronAPI.chat.resolveTransferDisplayNames(
      session.username,
      payerWxid || '',
      receiverWxid || ''
    ).then((result: { payerName: string; receiverName: string }) => {
      if (result) {
        setTransferPayerName(result.payerName)
        setTransferReceiverName(result.receiverName)
      }
    }).catch(() => { })
  }, [(message as any).transferPayerUsername, (message as any).transferReceiverUsername, session.username])

  // 自动下载表情包
  useEffect(() => {
    if (emojiLocalPath) return
    // 后端已从本地缓存找到文件（转发表情包无 CDN URL 的情况）
    if (isEmoji && message.emojiLocalPath && !emojiLocalPath) {
      captureEmojiResizeBaseline()
      setEmojiLocalPath(message.emojiLocalPath)
      return
    }
    if (isEmoji && message.emojiCdnUrl && !emojiLoading && !emojiError) {
      downloadEmoji()
    }
  }, [isEmoji, message.emojiCdnUrl, message.emojiLocalPath, emojiLocalPath, emojiLoading, emojiError, captureEmojiResizeBaseline])

  const requestImageDecrypt = useCallback(async (forceUpdate = false, silent = false): Promise<SharedImageDecryptResult> => {
    if (!isImage) return { success: false }
    if (imageDecryptPendingRef.current) return { success: false }
    imageDecryptPendingRef.current = true
    if (!silent) {
      setImageLoading(true)
      setImageError(false)
    }
    try {
      if (message.imageMd5 || message.imageDatName) {
        const sharedDecryptKey = `${session.username}:${imageCacheKey}:${forceUpdate ? 'force' : 'normal'}`
        const result = await getSharedImageDecryptTask(sharedDecryptKey, async () => {
          return await window.electronAPI.image.decrypt({
            sessionId: session.username,
            imageMd5: message.imageMd5 || undefined,
            imageDatName: message.imageDatName,
            force: forceUpdate
          }) as SharedImageDecryptResult
        })
        if (result.success && result.localPath) {
          imageDataUrlCache.set(imageCacheKey, result.localPath)
          if (imageLocalPath !== result.localPath) {
            captureImageResizeBaseline()
          }
          setImageLocalPath(result.localPath)
          setImageHasUpdate(false)
          if (result.liveVideoPath) setImageLiveVideoPath(result.liveVideoPath)
          return result
        }
      }

      const fallback = await window.electronAPI.chat.getImageData(session.username, String(message.localId))
      if (fallback.success && fallback.data) {
        const mime = detectImageMimeFromBase64(fallback.data)
        const dataUrl = `data:${mime};base64,${fallback.data}`
        imageDataUrlCache.set(imageCacheKey, dataUrl)
        if (imageLocalPath !== dataUrl) {
          captureImageResizeBaseline()
        }
        setImageLocalPath(dataUrl)
        setImageHasUpdate(false)
        return { success: true, localPath: dataUrl }
      }
      if (!silent) setImageError(true)
    } catch {
      if (!silent) setImageError(true)
    } finally {
      if (!silent) setImageLoading(false)
      imageDecryptPendingRef.current = false
    }
    return { success: false }
  }, [isImage, message.imageMd5, message.imageDatName, message.localId, session.username, imageCacheKey, detectImageMimeFromBase64, imageLocalPath, captureImageResizeBaseline])

  const triggerForceHd = useCallback(() => {
    if (!message.imageMd5 && !message.imageDatName) return
    if (imageForceHdAttempted.current === imageCacheKey) return
    if (imageForceHdPending.current) return
    imageForceHdAttempted.current = imageCacheKey
    imageForceHdPending.current = true
    requestImageDecrypt(true, true).finally(() => {
      imageForceHdPending.current = false
    })
  }, [imageCacheKey, message.imageDatName, message.imageMd5, requestImageDecrypt])

  const handleImageClick = useCallback(() => {
    if (imageClickTimerRef.current) {
      window.clearTimeout(imageClickTimerRef.current)
    }
    setImageClicked(true)
    imageClickTimerRef.current = window.setTimeout(() => {
      setImageClicked(false)
    }, 800)
    console.info('[UI] image decrypt click (force HD)', {
      sessionId: session.username,
      imageMd5: message.imageMd5,
      imageDatName: message.imageDatName,
      localId: message.localId
    })
    void requestImageDecrypt(true)
  }, [message.imageDatName, message.imageMd5, message.localId, requestImageDecrypt, session.username])

  const handleOpenImageViewer = useCallback(async () => {
    if (!imageLocalPath) return

    let finalImagePath = imageLocalPath
    let finalLiveVideoPath = imageLiveVideoPath || undefined

    // Every explicit preview click re-runs the forced HD search/decrypt path so
    // users don't need to re-enter the session after WeChat materializes a new original image.
    if (message.imageMd5 || message.imageDatName) {
      try {
        const upgraded = await requestImageDecrypt(true, true)
        if (upgraded?.success && upgraded.localPath) {
          finalImagePath = upgraded.localPath
          finalLiveVideoPath = upgraded.liveVideoPath || finalLiveVideoPath
        }
      } catch { }
    }

    // One more resolve helps when background/batch decrypt has produced a clearer image or live video
    // but local component state hasn't caught up yet.
    if (message.imageMd5 || message.imageDatName) {
      try {
        const resolved = await window.electronAPI.image.resolveCache({
          sessionId: session.username,
          imageMd5: message.imageMd5 || undefined,
          imageDatName: message.imageDatName
        })
        if (resolved?.success && resolved.localPath) {
          finalImagePath = resolved.localPath
          finalLiveVideoPath = resolved.liveVideoPath || finalLiveVideoPath
          imageDataUrlCache.set(imageCacheKey, resolved.localPath)
          if (imageLocalPath !== resolved.localPath) {
            captureImageResizeBaseline()
          }
          setImageLocalPath(resolved.localPath)
          if (resolved.liveVideoPath) setImageLiveVideoPath(resolved.liveVideoPath)
          setImageHasUpdate(Boolean(resolved.hasUpdate))
        }
      } catch { }
    }

    void window.electronAPI.window.openImageViewerWindow(finalImagePath, finalLiveVideoPath)
  }, [
    imageLiveVideoPath,
    imageLocalPath,
    imageCacheKey,
    captureImageResizeBaseline,
    message.imageDatName,
    message.imageMd5,
    requestImageDecrypt,
    session.username
  ])

  useEffect(() => {
    return () => {
      if (imageClickTimerRef.current) {
        window.clearTimeout(imageClickTimerRef.current)
      }
    }
  }, [])

  useEffect(() => {
    if (!isImage || imageLoading) return
    if (!message.imageMd5 && !message.imageDatName) return
    if (imageUpdateCheckedRef.current === imageCacheKey) return
    imageUpdateCheckedRef.current = imageCacheKey
    let cancelled = false
    window.electronAPI.image.resolveCache({
      sessionId: session.username,
      imageMd5: message.imageMd5 || undefined,
      imageDatName: message.imageDatName
    }).then((result: { success: boolean; localPath?: string; hasUpdate?: boolean; liveVideoPath?: string; error?: string }) => {
      if (cancelled) return
      if (result.success && result.localPath) {
        imageDataUrlCache.set(imageCacheKey, result.localPath)
        if (!imageLocalPath || imageLocalPath !== result.localPath) {
          captureImageResizeBaseline()
          setImageLocalPath(result.localPath)
          setImageError(false)
        }
        if (result.liveVideoPath) setImageLiveVideoPath(result.liveVideoPath)
        setImageHasUpdate(Boolean(result.hasUpdate))
      }
    }).catch(() => { })
    return () => {
      cancelled = true
    }
  }, [isImage, imageLocalPath, imageLoading, message.imageMd5, message.imageDatName, imageCacheKey, session.username, captureImageResizeBaseline])

  useEffect(() => {
    if (!isImage) return
    const unsubscribe = window.electronAPI.image.onUpdateAvailable((payload: { cacheKey: string; imageMd5?: string; imageDatName?: string }) => {
      const matchesCacheKey =
        payload.cacheKey === message.imageMd5 ||
        payload.cacheKey === message.imageDatName ||
        (payload.imageMd5 && payload.imageMd5 === message.imageMd5) ||
        (payload.imageDatName && payload.imageDatName === message.imageDatName)
      if (matchesCacheKey) {
        setImageHasUpdate(true)
      }
    })
    return () => {
      unsubscribe?.()
    }
  }, [isImage, message.imageDatName, message.imageMd5])

  useEffect(() => {
    if (!isImage) return
    const unsubscribe = window.electronAPI.image.onCacheResolved((payload: { cacheKey: string; imageMd5?: string; imageDatName?: string; localPath: string }) => {
      const matchesCacheKey =
        payload.cacheKey === message.imageMd5 ||
        payload.cacheKey === message.imageDatName ||
        (payload.imageMd5 && payload.imageMd5 === message.imageMd5) ||
        (payload.imageDatName && payload.imageDatName === message.imageDatName)
      if (matchesCacheKey) {
        const cachedPath = imageDataUrlCache.get(imageCacheKey)
        if (cachedPath !== payload.localPath) {
          imageDataUrlCache.set(imageCacheKey, payload.localPath)
        }
        if (imageLocalPath !== payload.localPath) {
          captureImageResizeBaseline()
        }
        setImageLocalPath((prev) => (prev === payload.localPath ? prev : payload.localPath))
        setImageError(false)
      }
    })
    return () => {
      unsubscribe?.()
    }
  }, [isImage, imageCacheKey, imageLocalPath, message.imageDatName, message.imageMd5, captureImageResizeBaseline])

  // 图片进入视野前自动解密（懒加载）
  useEffect(() => {
    if (!isImage) return
    if (imageLocalPath) return // 已有图片，不需要解密
    if (!message.imageMd5 && !message.imageDatName) return

    const container = imageContainerRef.current
    if (!container) return

    const observer = new IntersectionObserver(
      (entries) => {
        const entry = entries[0]
        // rootMargin 设置为 200px，提前感知即将进入视野的图片
        setImageInView(entry.isIntersecting)
      },
      { root: getImageObserverRoot(), rootMargin: '200px', threshold: 0 }
    )

    observer.observe(container)
    return () => observer.disconnect()
  }, [getImageObserverRoot, isImage])

  // 进入视野后自动触发一次普通解密
  useEffect(() => {
    if (!isImage || !imageInView) return
    if (imageLocalPath || imageLoading) return
    if (!message.imageMd5 && !message.imageDatName) return
    if (imageAutoDecryptTriggered.current) return
    imageAutoDecryptTriggered.current = true
    void requestImageDecrypt()
  }, [isImage, imageInView, imageLocalPath, imageLoading, message.imageMd5, message.imageDatName, requestImageDecrypt])

  useEffect(() => {
    if (!isImage || !imageHasUpdate || !imageInView) return
    if (imageAutoHdTriggered.current === imageCacheKey) return
    imageAutoHdTriggered.current = imageCacheKey
    triggerForceHd()
  }, [isImage, imageHasUpdate, imageInView, imageCacheKey, triggerForceHd])


  useEffect(() => {
    if (!isVoice) return
    if (!voiceAudioRef.current) {
      voiceAudioRef.current = new Audio()
    }
    const audio = voiceAudioRef.current
    if (!audio) return
    const handlePlay = () => setIsVoicePlaying(true)
    const handlePause = () => setIsVoicePlaying(false)
    const handleEnded = () => {
      setIsVoicePlaying(false)
      setVoiceCurrentTime(0)
      globalVoiceManager.stop(audio)
    }
    const handleTimeUpdate = () => {
      setVoiceCurrentTime(audio.currentTime)
    }
    const handleLoadedMetadata = () => {
      setVoiceDuration(audio.duration)
    }
    audio.addEventListener('play', handlePlay)
    audio.addEventListener('pause', handlePause)
    audio.addEventListener('ended', handleEnded)
    audio.addEventListener('timeupdate', handleTimeUpdate)
    audio.addEventListener('loadedmetadata', handleLoadedMetadata)
    return () => {
      audio.pause()
      globalVoiceManager.stop(audio)
      audio.removeEventListener('play', handlePlay)
      audio.removeEventListener('pause', handlePause)
      audio.removeEventListener('ended', handleEnded)
      audio.removeEventListener('timeupdate', handleTimeUpdate)
      audio.removeEventListener('loadedmetadata', handleLoadedMetadata)
    }
  }, [isVoice])

  // 生成波形数据
  useEffect(() => {
    if (!voiceDataUrl) {
      setVoiceWaveform([])
      return
    }

    const generateWaveform = async () => {
      try {
        // 从 data:audio/wav;base64,... 提取 base64
        const base64 = voiceDataUrl.split(',')[1]
        const binaryString = window.atob(base64)
        const bytes = new Uint8Array(binaryString.length)
        for (let i = 0; i < binaryString.length; i++) {
          bytes[i] = binaryString.charCodeAt(i)
        }

        const audioCtx = new (window.AudioContext || (window as any).webkitAudioContext)()
        const audioBuffer = await audioCtx.decodeAudioData(bytes.buffer)
        const rawData = audioBuffer.getChannelData(0) // 获取单声道数据
        const samples = 35 // 波形柱子数量
        const blockSize = Math.floor(rawData.length / samples)
        const filteredData: number[] = []

        for (let i = 0; i < samples; i++) {
          let blockStart = blockSize * i
          let sum = 0
          for (let j = 0; j < blockSize; j++) {
            sum = sum + Math.abs(rawData[blockStart + j])
          }
          filteredData.push(sum / blockSize)
        }

        // 归一化
        const multiplier = Math.pow(Math.max(...filteredData), -1)
        const normalizedData = filteredData.map(n => n * multiplier)
        setVoiceWaveform(normalizedData)
        void audioCtx.close()
      } catch (e) {
        console.error('Failed to generate waveform:', e)
        // 降级：生成随机但平滑的波形
        setVoiceWaveform(Array.from({ length: 35 }, () => 0.2 + Math.random() * 0.8))
      }
    }

    void generateWaveform()
  }, [voiceDataUrl])

  // 消息加载时自动检测语音缓存
  useEffect(() => {
    if (!isVoice || voiceDataUrl) return
    window.electronAPI.chat.resolveVoiceCache(session.username, String(message.localId))
      .then((result: { success: boolean; hasCache: boolean; data?: string; error?: string }) => {
        if (result.success && result.hasCache && result.data) {
          const url = `data:audio/wav;base64,${result.data}`
          voiceDataUrlCache.set(voiceCacheKey, url)
          setVoiceDataUrl(url)
        }
      })
  }, [isVoice, message.localId, session.username, voiceCacheKey, voiceDataUrl])

  // 监听流式转写结果
  useEffect(() => {
    if (!isVoice) return
    const removeListener = window.electronAPI.chat.onVoiceTranscriptPartial?.((payload: { sessionId?: string; msgId: string; createTime?: number; text: string }) => {
      const sameSession = !payload.sessionId || payload.sessionId === session.username
      const sameMsgId = payload.msgId === String(message.localId)
      const sameCreateTime = payload.createTime == null || Number(payload.createTime) === Number(message.createTime || 0)
      if (!sameSession || !sameMsgId || !sameCreateTime) return
      setVoiceTranscript(payload.text)
      voiceTranscriptCache.set(voiceTranscriptCacheKey, payload.text)
    })
    return () => removeListener?.()
  }, [isVoice, message.createTime, message.localId, session.username, voiceTranscriptCacheKey])

  const requestVoiceTranscript = useCallback(async () => {
    if (voiceTranscriptLoading || voiceTranscriptRequestedRef.current) return

    // 检查 whisper API 是否可用
    if (!window.electronAPI?.whisper?.getModelStatus) {
      console.warn('[ChatPage] whisper API 不可用')
      setVoiceTranscriptError(true)
      return
    }

    voiceTranscriptRequestedRef.current = true
    setVoiceTranscriptLoading(true)
    setVoiceTranscriptError(false)
    try {
      // 检查模型状态
      const modelStatus = await window.electronAPI.whisper.getModelStatus()
      if (!modelStatus?.exists) {
        const error: any = new Error('MODEL_NOT_DOWNLOADED')
        error.requiresDownload = true
        error.sessionId = session.username
        error.messageId = String(message.localId)
        throw error
      }

      const result = await window.electronAPI.chat.getVoiceTranscript(
        session.username,
        String(message.localId),
        message.createTime
      )

      if (result.success) {
        const transcriptText = (result.transcript || '').trim()
        voiceTranscriptCache.set(voiceTranscriptCacheKey, transcriptText)
        setVoiceTranscript(transcriptText)
      } else {
        setVoiceTranscriptError(true)
        voiceTranscriptRequestedRef.current = false
      }
    } catch (error: any) {
      // 检查是否是模型未下载错误
      if (error?.requiresDownload) {
        // 模型未下载，触发下载弹窗
        onRequireModelDownload?.(error.sessionId, error.messageId)
        // 不要重置 voiceTranscriptRequestedRef，避免重复触发
        setVoiceTranscriptLoading(false)
        return
      }
      setVoiceTranscriptError(true)
      voiceTranscriptRequestedRef.current = false
    } finally {
      setVoiceTranscriptLoading(false)
    }
  }, [message.createTime, message.localId, session.username, voiceTranscriptCacheKey, voiceTranscriptLoading, onRequireModelDownload])

  // 监听模型下载完成事件
  useEffect(() => {
    if (!isVoice) return

    const handleModelDownloaded = (event: CustomEvent) => {
      if (
        event.detail?.messageId === String(message.localId) &&
        (!event.detail?.sessionId || event.detail?.sessionId === session.username)
      ) {
        // 重置状态，允许重新尝试转写
        voiceTranscriptRequestedRef.current = false
        setVoiceTranscriptError(false)
        // 立即尝试转写
        void requestVoiceTranscript()
      }
    }

    window.addEventListener('model-downloaded', handleModelDownloaded as EventListener)
    return () => {
      window.removeEventListener('model-downloaded', handleModelDownloaded as EventListener)
    }
  }, [isVoice, message.localId, requestVoiceTranscript, session.username])

  // 视频懒加载
  const videoAutoLoadTriggered = useRef(false)
  const [videoClicked, setVideoClicked] = useState(false)

  useEffect(() => {
    if (!isVideo || !videoContainerRef.current) return

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            setIsVideoVisible(true)
            observer.disconnect()
          }
        })
      },
      {
        rootMargin: '200px 0px',
        threshold: 0
      }
    )

    observer.observe(videoContainerRef.current)

    return () => observer.disconnect()
  }, [isVideo])

  // 视频加载中状态引用，避免依赖问题
  const videoLoadingRef = useRef(false)

  // 加载视频信息（添加重试机制）
  const requestVideoInfo = useCallback(async () => {
    if (!videoMd5 || videoLoadingRef.current) return

    videoLoadingRef.current = true
    setVideoLoading(true)
    try {
      const result = await window.electronAPI.video.getVideoInfo(videoMd5)
      if (result && result.success && result.exists) {
        setVideoInfo({
          exists: result.exists,
          videoUrl: result.videoUrl,
          coverUrl: result.coverUrl,
          thumbUrl: result.thumbUrl
        })
      } else {
        setVideoInfo({ exists: false })
      }
    } catch (err) {
      setVideoInfo({ exists: false })
    } finally {
      videoLoadingRef.current = false
      setVideoLoading(false)
    }
  }, [videoMd5])

  // 视频进入视野时自动加载
  useEffect(() => {
    if (!isVideo || !isVideoVisible) return
    if (videoInfo?.exists) return // 已成功加载，不需要重试
    if (videoAutoLoadTriggered.current) return

    videoAutoLoadTriggered.current = true
    void requestVideoInfo()
  }, [isVideo, isVideoVisible, videoInfo, requestVideoInfo])

  useEffect(() => {
    if (!autoTranscribeVoiceEnabled) return
    if (!isVoice) return
    if (!voiceDataUrl) return
    if (voiceTranscriptError) return
    if (voiceTranscriptLoading || voiceTranscript !== undefined || voiceTranscriptRequestedRef.current) return
    void requestVoiceTranscript()
  }, [autoTranscribeVoiceEnabled, isVoice, voiceDataUrl, voiceTranscript, voiceTranscriptError, voiceTranscriptLoading, requestVoiceTranscript])

  // 去除企业微信 ID 前缀
  const cleanMessageContent = useCallback((content: string) => {
    if (!content) return ''
    return content.replace(/^[a-zA-Z0-9]+@openim:\n?/, '')
  }, [])

  // 解析混合文本和表情
  const renderTextWithEmoji = useCallback((text: string) => {
    if (!text) return text
    const parts = text.split(/\[(.*?)\]/g)
    return parts.map((part, index) => {
      // 奇数索引是捕获组的内容（即括号内的文字）
      if (index % 2 === 1) {
        // @ts-ignore
        const path = getEmojiPath(part as any)
        if (path) {
          // path 例如 'assets/face/微笑.png'，需要添加 base 前缀
          return (
            <img
              key={index}
              src={`${import.meta.env.BASE_URL}${path}`}
              alt={`[${part}]`}
              className="inline-emoji"
              style={{ width: 22, height: 22, verticalAlign: 'bottom', margin: '0 1px' }}
            />
          )
        }
        return `[${part}]`
      }
      return part
    })
  }, [])

  const cleanedParsedContent = useMemo(
    () => cleanMessageContent(message.parsedContent || ''),
    [cleanMessageContent, message.parsedContent]
  )

  const appMsgRawXml = message.rawContent || message.parsedContent || ''
  const appMsgContainsTag = useMemo(
    () => appMsgRawXml.includes('<appmsg') || appMsgRawXml.includes('&lt;appmsg'),
    [appMsgRawXml]
  )
  const appMsgDoc = useMemo(() => {
    if (!appMsgContainsTag) return null
    try {
      const start = appMsgRawXml.indexOf('<msg>')
      const xml = start >= 0 ? appMsgRawXml.slice(start) : appMsgRawXml
      const doc = new DOMParser().parseFromString(xml, 'text/xml')
      if (doc.querySelector('parsererror')) return null
      return doc
    } catch {
      return null
    }
  }, [appMsgContainsTag, appMsgRawXml])
  const appMsgTextCache = useMemo(() => new Map<string, string>(), [appMsgDoc])
  const queryAppMsgText = useCallback((selector: string): string => {
    const cached = appMsgTextCache.get(selector)
    if (cached !== undefined) return cached
    const value = appMsgDoc?.querySelector(selector)?.textContent?.trim() || ''
    appMsgTextCache.set(selector, value)
    return value
  }, [appMsgDoc, appMsgTextCache])

  const locationMessageMeta = useMemo(() => {
    if (message.localType !== 48) return null
    const raw = message.rawContent || ''
    const poiname = raw.match(/poiname="([^"]*)"/)?.[1] || message.locationPoiname || '位置'
    const label = raw.match(/label="([^"]*)"/)?.[1] || message.locationLabel || ''
    const lat = parseFloat(raw.match(/x="([^"]*)"/)?.[1] || String(message.locationLat || 0))
    const lng = parseFloat(raw.match(/y="([^"]*)"/)?.[1] || String(message.locationLng || 0))
    const zoom = 15
    const tileX = Math.floor((lng + 180) / 360 * Math.pow(2, zoom))
    const latRad = lat * Math.PI / 180
    const tileY = Math.floor((1 - Math.log(Math.tan(latRad) + 1 / Math.cos(latRad)) / Math.PI) / 2 * Math.pow(2, zoom))
    const mapTileUrl = (lat && lng)
      ? `https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x=${tileX}&y=${tileY}&z=${zoom}`
      : ''
    return { poiname, label, lat, lng, mapTileUrl }
  }, [message.localType, message.rawContent, message.locationPoiname, message.locationLabel, message.locationLat, message.locationLng])

  // 检测是否为链接卡片消息
  const isLinkMessage = String(message.localType) === '21474836529' || appMsgContainsTag
  const bubbleClass = isSent ? 'sent' : 'received'

  // 头像逻辑：
  // - 自己发的：优先使用 myAvatarUrl，缺失则用 senderAvatarUrl (补救)
  // - 群聊中对方发的：使用发送者头像
  // - 私聊中对方发的：使用会话头像
  const fallbackSenderName = String(message.senderDisplayName || message.senderUsername || '').trim() || undefined
  const resolvedSenderName = senderName || fallbackSenderName
  const resolvedSenderAvatarUrl = senderAvatarUrl || message.senderAvatarUrl
  const avatarUrl = isSent
    ? (myAvatarUrl || resolvedSenderAvatarUrl)
    : (isGroupChat ? resolvedSenderAvatarUrl : session.avatarUrl)

  // 是否有引用消息
  const hasQuote = message.quotedContent && message.quotedContent.length > 0

  const handlePlayVideo = useCallback(async () => {
    if (!videoInfo?.videoUrl) return
    try {
      await window.electronAPI.window.openVideoPlayerWindow(videoInfo.videoUrl)
    } catch (e) {
      console.error('打开视频播放窗口失败:', e)
    }
  }, [videoInfo?.videoUrl])

  // Selection mode handling removed from here to allow normal rendering
  // We will wrap the output instead
  if (isSystem) {
    return (
      <div
        className={`message-bubble system ${isSelectionMode ? 'selectable' : ''}`}
        onContextMenu={(e) => onContextMenu?.(e, message)}
        style={{ cursor: isSelectionMode ? 'pointer' : 'default', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px' }}
        onClick={(e) => {
          if (isSelectionMode) {
            e.stopPropagation()
            onToggleSelection?.(messageKey, e.shiftKey)
          }
        }}
      >
        {isSelectionMode && (
          <div className={`checkbox ${isSelected ? 'checked' : ''}`} style={{
            width: '20px',
            height: '20px',
            borderRadius: '4px',
            border: isSelected ? 'none' : '2px solid rgba(128,128,128,0.5)',
            backgroundColor: isSelected ? 'var(--primary)' : 'transparent',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            color: 'white',
            flexShrink: 0
          }}>
            {isSelected && <Check size={14} strokeWidth={3} />}
          </div>
        )}
        <div className="bubble-content">{message.parsedContent}</div>
      </div>
    )
  }

  // 渲染消息内容
  const renderContent = () => {
    if (isImage) {
      return (
        <div ref={imageContainerRef}>
          {imageLoading ? (
            <div className="image-loading">
              <Loader2 size={20} className="spin" />
            </div>
          ) : imageError || !imageLocalPath ? (
            <button
              className={`image-unavailable ${imageClicked ? 'clicked' : ''}`}
              onClick={handleImageClick}
              disabled={imageLoading}
              type="button"
            >
              <ImageIcon size={24} />
              <span>图片未解密</span>
              <span className="image-action">{imageClicked ? '已点击…' : '点击解密'}</span>
            </button>
          ) : (
            <>
              <div className="image-message-wrapper">
                <img
                  src={imageLocalPath}
                  alt="图片"
                  className="image-message"
                  onClick={() => { void handleOpenImageViewer() }}
                  onLoad={() => {
                    setImageError(false)
                    stabilizeImageScrollAfterResize()
                  }}
                  onError={() => {
                    imageResizeBaselineRef.current = null
                    setImageError(true)
                  }}
                />
                {imageLiveVideoPath && (
                  <div className="media-badge live">
                    <LivePhotoIcon size={14} />
                  </div>
                )}
              </div>
            </>
          )}
        </div>
      )
    }

    // 视频消息
    if (isVideo) {
      // 未进入可视区域时显示占位符
      if (!isVideoVisible) {
        return (
          <div className="video-placeholder" ref={videoContainerRef as React.RefObject<HTMLDivElement>}>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <polygon points="23 7 16 12 23 17 23 7"></polygon>
              <rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
            </svg>
          </div>
        )
      }

      // 加载中
      if (videoLoading) {
        return (
          <div className="video-loading" ref={videoContainerRef as React.RefObject<HTMLDivElement>}>
            <Loader2 size={20} className="spin" />
          </div>
        )
      }

      // 视频不存在 - 添加点击重试功能
      if (!videoInfo?.exists || !videoInfo.videoUrl) {
        return (
          <button
            className={`video-unavailable ${videoClicked ? 'clicked' : ''}`}
            ref={videoContainerRef as React.RefObject<HTMLButtonElement>}
            onClick={() => {
              setVideoClicked(true)
              setTimeout(() => setVideoClicked(false), 800)
              videoAutoLoadTriggered.current = false
              void requestVideoInfo()
            }}
            type="button"
          >
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <polygon points="23 7 16 12 23 17 23 7"></polygon>
              <rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
            </svg>
            <span>视频未找到</span>
            <span className="video-action">{videoClicked ? '已点击…' : '点击重试'}</span>
          </button>
        )
      }

      // 默认显示缩略图，点击打开独立播放窗口
      const thumbSrc = videoInfo.thumbUrl || videoInfo.coverUrl
      return (
        <div className="video-thumb-wrapper" ref={videoContainerRef as React.RefObject<HTMLDivElement>} onClick={handlePlayVideo}>
          {thumbSrc ? (
            <img src={thumbSrc} alt="视频缩略图" className="video-thumb" />
          ) : (
            <div className="video-thumb-placeholder">
              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <polygon points="23 7 16 12 23 17 23 7"></polygon>
                <rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
              </svg>
            </div>
          )}
          <div className="video-play-button">
            <Play size={32} fill="white" />
          </div>
        </div>
      )
    }

    if (isVoice) {
      const durationText = message.voiceDurationSeconds ? `${message.voiceDurationSeconds}"` : ''
      const handleToggle = async () => {
        if (voiceLoading) return
        const audio = voiceAudioRef.current || new Audio()
        if (!voiceAudioRef.current) {
          voiceAudioRef.current = audio
        }
        if (isVoicePlaying) {
          audio.pause()
          audio.currentTime = 0
          globalVoiceManager.stop(audio)
          return
        }
        if (!voiceDataUrl) {
          setVoiceLoading(true)
          setVoiceError(false)
          try {
            const result = await window.electronAPI.chat.getVoiceData(
              session.username,
              String(message.localId),
              message.createTime,
              message.serverIdRaw || message.serverId
            )
            if (result.success && result.data) {
              const url = `data:audio/wav;base64,${result.data}`
              voiceDataUrlCache.set(voiceCacheKey, url)
              setVoiceDataUrl(url)
            } else {
              setVoiceError(true)
              return
            }
          } catch {
            setVoiceError(true)
            return
          } finally {
            setVoiceLoading(false)
          }
        }
        const source = voiceDataUrlCache.get(voiceCacheKey) || voiceDataUrl
        if (!source) {
          setVoiceError(true)
          return
        }
        audio.src = source
        try {
          // 停止其他正在播放的语音，确保同一时间只播放一条
          globalVoiceManager.play(audio, () => {
            audio.pause()
            audio.currentTime = 0
          })
          await audio.play()
        } catch {
          setVoiceError(true)
        }
      }

      const handleSeek = (e: React.MouseEvent<HTMLDivElement>) => {
        if (!voiceDataUrl || !voiceAudioRef.current) return
        e.stopPropagation()
        const rect = e.currentTarget.getBoundingClientRect()
        const x = e.clientX - rect.left
        const percentage = x / rect.width
        const newTime = percentage * voiceDuration
        voiceAudioRef.current.currentTime = newTime
        setVoiceCurrentTime(newTime)
      }

      const showDecryptHint = !voiceDataUrl && !voiceLoading && !isVoicePlaying
      const showTranscript = Boolean(voiceDataUrl) && (voiceTranscriptLoading || voiceTranscriptError || voiceTranscript !== undefined)
      const transcriptText = (voiceTranscript || '').trim()
      const transcriptDisplay = voiceTranscriptLoading
        ? '转写中...'
        : voiceTranscriptError
          ? '转写失败，点击重试'
          : (transcriptText || '未识别到文字')
      const handleTranscriptRetry = () => {
        if (!voiceTranscriptError) return
        voiceTranscriptRequestedRef.current = false
        void requestVoiceTranscript()
      }

      return (
        <div className="voice-stack">
          <div className={`voice-message ${isVoicePlaying ? 'playing' : ''}`} onClick={handleToggle}>
            <button
              className="voice-play-btn"
              onClick={(e) => {
                e.stopPropagation()
                handleToggle()
              }}
              aria-label="播放语音"
              type="button"
            >
              {isVoicePlaying ? <Pause size={16} /> : <Play size={16} />}
            </button>
            <div className="voice-wave" onClick={handleSeek}>
              {voiceDataUrl && voiceWaveform.length > 0 ? (
                <div className="voice-waveform">
                  {voiceWaveform.map((amplitude, i) => {
                    const progress = (voiceCurrentTime / (voiceDuration || 1))
                    const isPlayed = (i / voiceWaveform.length) < progress
                    return (
                      <div
                        key={i}
                        className={`waveform-bar ${isPlayed ? 'played' : ''}`}
                        style={{ height: `${Math.max(20, amplitude * 100)}%` }}
                      />
                    )
                  })}
                </div>
              ) : (
                <div className="voice-wave-placeholder">
                  <span />
                  <span />
                  <span />
                  <span />
                  <span />
                </div>
              )}
            </div>
            <div className="voice-info">
              <span className="voice-label">语音</span>
              {durationText && <span className="voice-duration">{durationText}</span>}
              {voiceLoading && <span className="voice-loading">解码中...</span>}
              {showDecryptHint && <span className="voice-hint">点击解密</span>}
              {voiceError && <span className="voice-error">播放失败</span>}
            </div>
            {/* 转文字按钮 */}
            {voiceDataUrl && !voiceTranscript && !voiceTranscriptLoading && (
              <button
                className="voice-transcribe-btn"
                onClick={(e) => {
                  e.stopPropagation()
                  void requestVoiceTranscript()
                }}
                title="转文字"
                type="button"
              >
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
                </svg>
              </button>
            )}
          </div>
          {showTranscript && (
            <div
              className={`voice-transcript ${isSent ? 'sent' : 'received'}${voiceTranscriptError ? ' error' : ''}`}
              onClick={handleTranscriptRetry}
              title={voiceTranscriptError ? '点击重试语音转写' : undefined}
            >
              {voiceTranscriptError ? (
                '转写失败，点击重试'
              ) : !voiceTranscript ? (
                voiceTranscriptLoading ? '转写中...' : '未识别到文字'
              ) : (
                <AnimatedStreamingText
                  text={transcriptText}
                  loading={voiceTranscriptLoading}
                />
              )}
            </div>
          )}
        </div>
      )
    }

    // 名片消息
    if (isCard) {
      const cardName = message.cardNickname || message.cardUsername || '未知联系人'
      const cardAvatar = message.cardAvatarUrl
      return (
        <div className="card-message">
          <div className="card-icon">
            {cardAvatar ? (
              <img src={cardAvatar} alt="" style={{ width: '40px', height: '40px', objectFit: 'cover', borderRadius: '8px' }} referrerPolicy="no-referrer" />
            ) : (
              <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
                <circle cx="12" cy="7" r="4" />
              </svg>
            )}
          </div>
          <div className="card-info">
            <div className="card-name">{cardName}</div>
            {message.cardUsername && message.cardUsername !== message.cardNickname && (
              <div className="card-wxid">微信号: {message.cardUsername}</div>
            )}
            <div className="card-label">个人名片</div>
          </div>
        </div>
      )
    }

    // 通话消息
    if (isCall) {
      return (
        <div className="bubble-content">
          <div className="call-message">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
            </svg>
            <span>{message.parsedContent || '[通话]'}</span>
          </div>
        </div>
      )
    }

    // 位置消息
    if (message.localType === 48) {
      if (!locationMessageMeta) return null
      const { poiname, label, lat, lng, mapTileUrl } = locationMessageMeta
      return (
        <div className="location-message" onClick={() => window.electronAPI.shell.openExternal(`https://uri.amap.com/marker?position=${lng},${lat}&name=${encodeURIComponent(poiname || label)}`)}>
          <div className="location-text">
            <div className="location-icon">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
                <circle cx="12" cy="10" r="3" />
              </svg>
            </div>
            <div className="location-info">
              {poiname && <div className="location-name">{poiname}</div>}
              {label && <div className="location-label">{label}</div>}
            </div>
          </div>
          {mapTileUrl && (
            <div className="location-map">
              <img src={mapTileUrl} alt="地图" referrerPolicy="no-referrer" />
            </div>
          )}
        </div>
      )
    }

    // 链接消息 (AppMessage)
    const appMsgRichPreview = (() => {
      const rawXml = appMsgRawXml
      if (!appMsgContainsTag) return null
      const q = queryAppMsgText

      const xmlType = message.xmlType || q('appmsg > type') || q('type')

      // type 57: 引用回复消息，解析 refermsg 渲染为引用样式
      if (xmlType === '57') {
        const replyText = q('title') || cleanedParsedContent || ''
        const referContent = q('refermsg > content') || ''
        const referSender = q('refermsg > displayname') || ''
        const referType = q('refermsg > type') || ''

        // 根据被引用消息类型渲染对应内容
        const renderReferContent = () => {
          // 动画表情：解析嵌套 XML 提取 cdnurl 渲染
          if (referType === '47') {
            try {
              const innerDoc = new DOMParser().parseFromString(referContent, 'text/xml')
              const cdnUrl = innerDoc.querySelector('emoji')?.getAttribute('cdnurl') || ''
              const md5 = innerDoc.querySelector('emoji')?.getAttribute('md5') || ''
              if (cdnUrl) return <QuotedEmoji cdnUrl={cdnUrl} md5={md5} />
            } catch { /* 解析失败降级 */ }
            return <span className="quoted-type-label">[动画表情]</span>
          }

          // 各类型名称映射
          const typeLabels: Record<string, string> = {
            '3': '图片', '34': '语音', '43': '视频',
            '49': '链接', '50': '通话', '10000': '系统消息', '10002': '撤回消息',
          }
          if (referType && typeLabels[referType]) {
            return <span className="quoted-type-label">[{typeLabels[referType]}]</span>
          }

          // 普通文本或未知类型
          return <>{renderTextWithEmoji(cleanMessageContent(referContent))}</>
        }

        return (
          <div className="bubble-content">
            <div className="quoted-message">
              {referSender && <span className="quoted-sender">{referSender}</span>}
              <span className="quoted-text">{renderReferContent()}</span>
            </div>
            <div className="message-text">{renderTextWithEmoji(cleanMessageContent(replyText))}</div>
          </div>
        )
      }

      const title = message.linkTitle || q('title') || cleanedParsedContent || 'Card'
      const desc = message.appMsgDesc || q('des')
      const url = message.linkUrl || q('url')
      const thumbUrl = message.linkThumb || message.appMsgThumbUrl || q('thumburl') || q('cdnthumburl') || q('cover') || q('coverurl')
      const musicUrl = message.appMsgMusicUrl || message.appMsgDataUrl || q('musicurl') || q('playurl') || q('dataurl') || q('lowurl')
      const sourceName = message.appMsgSourceName || q('sourcename')
      const sourceDisplayName = q('sourcedisplayname') || ''
      const appName = message.appMsgAppName || q('appname')
      const sourceUsername = message.appMsgSourceUsername || q('sourceusername')
      const finderName =
        message.finderNickname ||
        message.finderUsername ||
        q('findernickname') ||
        q('finder_nickname') ||
        q('finderusername') ||
        q('finder_username')

      const lower = rawXml.toLowerCase()

      const kind = message.appMsgKind || (
        (xmlType === '2001' || lower.includes('hongbao')) ? 'red-packet'
          : (xmlType === '115' ? 'gift'
            : ((xmlType === '33' || xmlType === '36') ? 'miniapp'
              : (((xmlType === '5' || xmlType === '49') && (sourceUsername.startsWith('gh_') || !!sourceName || appName.includes('公众号'))) ? 'official-link'
                : (xmlType === '51' ? 'finder'
                  : (xmlType === '3' ? 'music'
                    : ((xmlType === '5' || xmlType === '49') ? 'link' // Fallback for standard links
                      : (!!musicUrl ? 'music' : '')))))))
      )

      if (!kind) return null

      // 对视频号提取真实标题，避免出现 "当前版本不支持该内容"
      let displayTitle = title
      if (kind === 'finder' && (!displayTitle || displayTitle.includes('不支持'))) {
        displayTitle = q('finderFeed > desc') || q('finderFeed desc') || desc || ''
      }

      const openExternal = (e: React.MouseEvent, nextUrl?: string) => {
        if (!nextUrl) return
        e.stopPropagation()
        if (window.electronAPI?.shell?.openExternal) {
          window.electronAPI.shell.openExternal(nextUrl)
        } else {
          window.open(nextUrl, '_blank')
        }
      }

      const metaLabel =
        kind === 'red-packet' ? '红包'
          : kind === 'finder' ? (finderName || '视频号')
            : kind === 'location' ? '位置'
              : kind === 'music' ? (sourceName || appName || '音乐')
                : (sourceName || appName || (sourceUsername.startsWith('gh_') ? '公众号' : ''))

      const renderCard = (cardKind: string, clickableUrl?: string) => (
        <div
          className={`link-message appmsg-rich-card ${cardKind}`}
          onClick={clickableUrl ? (e) => openExternal(e, clickableUrl) : undefined}
          title={clickableUrl}
        >
          <div className="link-header">
            <div className="link-title" title={title}>{title}</div>
            {metaLabel ? <div className="appmsg-meta-badge">{metaLabel}</div> : null}
          </div>
          <div className="link-body">
            <div className="link-desc-block">
              {desc ? <div className="link-desc" title={desc}>{desc}</div> : null}
            </div>
            {thumbUrl ? (
              <img
                src={thumbUrl}
                alt=""
                className={`link-thumb${((cardKind === 'miniapp') || /\.svg(?:$|\?)/i.test(thumbUrl)) ? ' theme-adaptive' : ''}`}
                loading="lazy"
                referrerPolicy="no-referrer"
              />
            ) : (
              <div className={`link-thumb-placeholder ${cardKind}`}>{cardKind.slice(0, 2).toUpperCase()}</div>
            )}
          </div>
        </div>
      )

      if (kind === 'quote') {
        // 引用回复消息（appMsgKind='quote'，xmlType=57）
        const replyText = message.linkTitle || q('title') || cleanedParsedContent || ''
        const referContent = message.quotedContent || q('refermsg > content') || ''
        const referSender = message.quotedSender || q('refermsg > displayname') || ''
        return (
          <div className="bubble-content">
            <div className="quoted-message">
              {referSender && <span className="quoted-sender">{referSender}</span>}
              <span className="quoted-text">{renderTextWithEmoji(cleanMessageContent(referContent))}</span>
            </div>
            <div className="message-text">{renderTextWithEmoji(cleanMessageContent(replyText))}</div>
          </div>
        )
      }

      if (kind === 'red-packet') {
        // 专属红包卡片
        const greeting = q('receivertitle') || q('sendertitle') || ''
        return (
          <div className="hongbao-message">
            <div className="hongbao-icon">
              <svg width="32" height="32" viewBox="0 0 40 40" fill="none">
                <rect x="4" y="6" width="32" height="28" rx="4" fill="white" fillOpacity="0.3" />
                <rect x="4" y="6" width="32" height="14" rx="4" fill="white" fillOpacity="0.2" />
                <circle cx="20" cy="20" r="6" fill="white" fillOpacity="0.4" />
                <text x="20" y="24" textAnchor="middle" fill="white" fontSize="12" fontWeight="bold">¥</text>
              </svg>
            </div>
            <div className="hongbao-info">
              <div className="hongbao-greeting">{greeting || '恭喜发财，大吉大利'}</div>
              <div className="hongbao-label">微信红包</div>
            </div>
          </div>
        )
      }

      if (kind === 'gift') {
        // 礼物卡片
        const giftImg = message.giftImageUrl || thumbUrl
        const giftWish = message.giftWish || title || '送你一份心意'
        const giftPriceRaw = message.giftPrice
        const giftPriceYuan = giftPriceRaw ? (parseInt(giftPriceRaw) / 100).toFixed(2) : ''
        return (
          <div className="gift-message">
            {giftImg && <img className="gift-img" src={giftImg} alt="" referrerPolicy="no-referrer" />}
            <div className="gift-info">
              <div className="gift-wish">{giftWish}</div>
              {giftPriceYuan && <div className="gift-price">¥{giftPriceYuan}</div>}
              <div className="gift-label">微信礼物</div>
            </div>
          </div>
        )
      }

      if (kind === 'finder') {
        // 视频号专属卡片
        const coverUrl = message.finderCoverUrl || thumbUrl
        const duration = message.finderDuration
        const authorName = finderName || ''
        const authorAvatar = message.finderAvatar
        const fmtDuration = duration ? `${Math.floor(duration / 60)}:${String(duration % 60).padStart(2, '0')}` : ''
        return (
          <div className="channel-video-card" onClick={url ? (e) => openExternal(e, url) : undefined}>
            <div className="channel-video-cover">
              {coverUrl ? (
                <img src={coverUrl} alt="" referrerPolicy="no-referrer" />
              ) : (
                <div className="channel-video-cover-placeholder">
                  <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                    <polygon points="5 3 19 12 5 21 5 3" />
                  </svg>
                </div>
              )}
              {fmtDuration && <span className="channel-video-duration">{fmtDuration}</span>}
            </div>
            <div className="channel-video-info">
              <div className="channel-video-title">{displayTitle || '视频号视频'}</div>
              <div className="channel-video-author">
                {authorAvatar && <img className="channel-video-avatar" src={authorAvatar} alt="" referrerPolicy="no-referrer" />}
                <span>{authorName || '视频号'}</span>
              </div>
            </div>
          </div>
        )
      }



      if (kind === 'music') {
        // 音乐专属卡片
        const albumUrl = message.musicAlbumUrl || thumbUrl
        const playUrl = message.musicUrl || musicUrl || url
        const songTitle = title || '未知歌曲'
        const artist = desc || ''
        const appLabel = sourceName || appName || ''
        return (
          <div className="music-message" onClick={playUrl ? (e) => openExternal(e, playUrl) : undefined}>
            <div className="music-cover">
              {albumUrl ? (
                <img src={albumUrl} alt="" referrerPolicy="no-referrer" />
              ) : (
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <polygon points="5 3 19 12 5 21 5 3" />
                </svg>
              )}
            </div>
            <div className="music-info">
              <div className="music-title">{songTitle}</div>
              {artist && <div className="music-artist">{artist}</div>}
              {appLabel && <div className="music-source">{appLabel}</div>}
            </div>
          </div>
        )
      }

      if (kind === 'official-link') {
        const authorAvatar = q('publisher > headimg') || q('brand_info > headimgurl') || q('appmsg > avatar') || q('headimgurl') || message.cardAvatarUrl
        const authorName = sourceDisplayName || q('publisher > nickname') || sourceName || appName || '公众号'
        const coverPic = q('mmreader > category > item > cover') || thumbUrl
        const digest = q('mmreader > category > item > digest') || desc
        const articleTitle = q('mmreader > category > item > title') || title

        return (
          <div className="official-message" onClick={url ? (e) => openExternal(e, url) : undefined}>
            <div className="official-header">
              {authorAvatar ? (
                <img src={authorAvatar} alt="" className="official-avatar" referrerPolicy="no-referrer" />
              ) : (
                <div className="official-avatar-placeholder">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
                    <circle cx="12" cy="7" r="4" />
                  </svg>
                </div>
              )}
              <span className="official-name">{authorName}</span>
            </div>
            <div className="official-body">
              {coverPic ? (
                <div className="official-cover-wrapper">
                  <img src={coverPic} alt="" className="official-cover" referrerPolicy="no-referrer" />
                  <div className="official-title-overlay">{articleTitle}</div>
                </div>
              ) : (
                <div className="official-title-text">{articleTitle}</div>
              )}
              {digest && <div className="official-digest">{digest}</div>}
            </div>
          </div>
        )
      }

      if (kind === 'link') return renderCard('link', url || undefined)
      if (kind === 'card') return renderCard('card', url || undefined)
      if (kind === 'miniapp') {
        return (
          <div className="miniapp-message miniapp-message-rich">
            <div className="miniapp-icon">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
              </svg>
            </div>
            <div className="miniapp-info">
              <div className="miniapp-title">{title}</div>
              <div className="miniapp-label">{metaLabel || '小程序'}</div>
            </div>
            {thumbUrl ? (
              <img
                src={thumbUrl}
                alt=""
                className={`miniapp-thumb${/\.svg(?:$|\?)/i.test(thumbUrl) ? ' theme-adaptive' : ''}`}
                loading="lazy"
                referrerPolicy="no-referrer"
              />
            ) : null}
          </div>
        )
      }
      return null
    })()

    if (appMsgRichPreview) {
      return appMsgRichPreview
    }

    if (appMsgContainsTag) {
      const q = queryAppMsgText
      const title = q('title') || '链接'
      const desc = q('des')
      const url = q('url')
      const appMsgType = message.xmlType || q('appmsg > type') || q('type')
      const textAnnouncement = q('textannouncement')
      const parsedDoc: Document | null = appMsgDoc

      // 引用回复消息 (type=57)，防止被误判为链接
      if (appMsgType === '57') {
        const replyText = parsedDoc?.querySelector('title')?.textContent?.trim() || cleanedParsedContent || ''
        const referContent = parsedDoc?.querySelector('refermsg > content')?.textContent?.trim() || ''
        const referSender = parsedDoc?.querySelector('refermsg > displayname')?.textContent?.trim() || ''
        const referType = parsedDoc?.querySelector('refermsg > type')?.textContent?.trim() || ''

        const renderReferContent2 = () => {
          if (referType === '47') {
            try {
              const innerDoc = new DOMParser().parseFromString(referContent, 'text/xml')
              const cdnUrl = innerDoc.querySelector('emoji')?.getAttribute('cdnurl') || ''
              const md5 = innerDoc.querySelector('emoji')?.getAttribute('md5') || ''
              if (cdnUrl) return <QuotedEmoji cdnUrl={cdnUrl} md5={md5} />
            } catch { /* 解析失败降级 */ }
            return <span className="quoted-type-label">[动画表情]</span>
          }
          const typeLabels: Record<string, string> = {
            '3': '图片', '34': '语音', '43': '视频',
            '49': '链接', '50': '通话', '10000': '系统消息', '10002': '撤回消息',
          }
          if (referType && typeLabels[referType]) {
            return <span className="quoted-type-label">[{typeLabels[referType]}]</span>
          }
          return <>{renderTextWithEmoji(cleanMessageContent(referContent))}</>
        }

        return (
          <div className="bubble-content">
            <div className="quoted-message">
              {referSender && <span className="quoted-sender">{referSender}</span>}
              <span className="quoted-text">{renderReferContent2()}</span>
            </div>
            <div className="message-text">{renderTextWithEmoji(cleanMessageContent(replyText))}</div>
          </div>
        )
      }

      // 群公告消息 (type=87)
      if (appMsgType === '87') {
        const announcementText = textAnnouncement || desc || '群公告'
        return (
          <div className="announcement-message">
            <div className="announcement-icon">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0" />
              </svg>
            </div>
            <div className="announcement-content">
              <div className="announcement-label">群公告</div>
              <div className="announcement-text">{announcementText}</div>
            </div>
          </div>
        )
      }

      // 聊天记录 (type=19)
      if (appMsgType === '19') {
        const recordList = message.chatRecordList || []
        const displayTitle = title || '群聊的聊天记录'
        const metaText =
          recordList.length > 0
            ? `共 ${recordList.length} 条聊天记录`
            : desc || '聊天记录'

        const previewItems = buildChatRecordPreviewItems(recordList, 3)
        const remainingCount = Math.max(0, recordList.length - previewItems.length)

        return (
          <div
            className="chat-record-message"
            onClick={(e) => {
              e.stopPropagation()
              // 打开聊天记录窗口
              window.electronAPI.window.openChatHistoryWindow(session.username, message.localId)
            }}
            title="点击查看详细聊天记录"
          >
            <div className="chat-record-title" title={displayTitle}>
              {displayTitle}
            </div>
            <div className="chat-record-meta-line" title={metaText}>
              {metaText}
            </div>
            {previewItems.length > 0 ? (
              <div className="chat-record-list">
                {previewItems.map((item, i) => (
                  <div key={i} className="chat-record-item">
                    <span className="source-name">
                      {hasRenderableChatRecordName(item.sourcename) ? `${item.sourcename}: ` : ''}
                    </span>
                    {getChatRecordPreviewText(item)}
                  </div>
                ))}
                {remainingCount > 0 && (
                  <div className="chat-record-more">还有 {remainingCount} 条…</div>
                )}
              </div>
            ) : (
              <div className="chat-record-desc">
                {desc || '点击打开查看完整聊天记录'}
              </div>
            )}
            <div className="chat-record-footer">聊天记录</div>
          </div>
        )
      }

      // 文件消息 (type=6)
      if (appMsgType === '6') {
        const fileName = message.fileName || title || '文件'
        const fileSize = message.fileSize
        const fileExt = message.fileExt || fileName.split('.').pop()?.toLowerCase() || ''

        // 根据扩展名选择图标
        const getFileIcon = () => {
          const archiveExts = ['zip', 'rar', '7z', 'tar', 'gz', 'bz2']
          if (archiveExts.includes(fileExt)) {
            return (
              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                <polyline points="7 10 12 15 17 10" />
                <line x1="12" y1="15" x2="12" y2="3" />
              </svg>
            )
          }
          return (
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
              <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" />
              <polyline points="13 2 13 9 20 9" />
            </svg>
          )
        }

        return (
          <div className="file-message">
            <div className="file-icon">
              {getFileIcon()}
            </div>
            <div className="file-info">
              <div className="file-name" title={fileName}>{fileName}</div>
              <div className="file-meta">
                {fileSize ? formatFileSize(fileSize) : ''}
              </div>
            </div>
          </div>
        )
      }

      // 转账消息 (type=2000)
      if (appMsgType === '2000') {
        try {
          // 使用外层已解析好的 parsedDoc（已去除 wxid 前缀）
          const feedesc = parsedDoc?.querySelector('feedesc')?.textContent || ''
          const payMemo = parsedDoc?.querySelector('pay_memo')?.textContent || ''
          const paysubtype = parsedDoc?.querySelector('paysubtype')?.textContent || '1'

          // paysubtype: 1=待收款, 3=已收款
          const isReceived = paysubtype === '3'

          // 如果 feedesc 为空，使用 title 作为降级
          const displayAmount = feedesc || title || '微信转账'

          // 构建转账描述：A 转账给 B
          const transferDesc = transferPayerName && transferReceiverName
            ? `${transferPayerName} 转账给 ${transferReceiverName}`
            : undefined

          return (
            <div className={`transfer-message ${isReceived ? 'received' : ''}`}>
              <div className="transfer-icon">
                {isReceived ? (
                  <svg width="32" height="32" viewBox="0 0 40 40" fill="none">
                    <circle cx="20" cy="20" r="18" stroke="white" strokeWidth="2" />
                    <path d="M12 20l6 6 10-12" stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                ) : (
                  <svg width="32" height="32" viewBox="0 0 40 40" fill="none">
                    <circle cx="20" cy="20" r="18" stroke="white" strokeWidth="2" />
                    <path d="M12 20h16M20 12l8 8-8 8" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                )}
              </div>
              <div className="transfer-info">
                <div className="transfer-amount">{displayAmount}</div>
                {transferDesc && <div className="transfer-desc">{transferDesc}</div>}
                {payMemo && <div className="transfer-memo">{payMemo}</div>}
                <div className="transfer-label">{isReceived ? '已收款' : '微信转账'}</div>
              </div>
            </div>
          )
        } catch (e) {
          console.error('[Transfer Debug] Parse error:', e)
          // 解析失败时的降级处理
          const feedesc = title || '微信转账'
          return (
            <div className="transfer-message">
              <div className="transfer-icon">
                <svg width="32" height="32" viewBox="0 0 40 40" fill="none">
                  <circle cx="20" cy="20" r="18" stroke="white" strokeWidth="2" />
                  <path d="M12 20h16M20 12l8 8-8 8" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </div>
              <div className="transfer-info">
                <div className="transfer-amount">{feedesc}</div>
                <div className="transfer-label">微信转账</div>
              </div>
            </div>
          )
        }
      }

      // 小程序 (type=33/36)
      if (appMsgType === '33' || appMsgType === '36') {
        return (
          <div className="miniapp-message">
            <div className="miniapp-icon">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
              </svg>
            </div>
            <div className="miniapp-info">
              <div className="miniapp-title">{title}</div>
              <div className="miniapp-label">小程序</div>
            </div>
          </div>
        )
      }

      // 有 URL 的链接消息
      if (url) {
        return (
          <div
            className="link-message"
            onClick={(e) => {
              e.stopPropagation()
              if (window.electronAPI?.shell?.openExternal) {
                window.electronAPI.shell.openExternal(url)
              } else {
                window.open(url, '_blank')
              }
            }}
          >
            <div className="link-header">
              <div className="link-title" title={title}>{title}</div>
            </div>
            <div className="link-body">
              <div className="link-desc" title={desc}>{desc}</div>
              <div className="link-thumb-placeholder">
                <Link size={24} />
              </div>
            </div>
          </div>
        )
      }
    }

    // 表情包消息
    if (isEmoji) {
      // ... (keep existing emoji logic)
      // 没有 cdnUrl 或加载失败，显示占位符
      if ((!message.emojiCdnUrl && !message.emojiLocalPath) || emojiError) {
        return (
          <div className="emoji-message-wrapper" ref={emojiContainerRef}>
            <div className="emoji-unavailable">
              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                <circle cx="12" cy="12" r="10" />
                <path d="M8 15s1.5 2 4 2 4-2 4-2" />
                <line x1="9" y1="9" x2="9.01" y2="9" />
                <line x1="15" y1="9" x2="15.01" y2="9" />
              </svg>
              <span>表情包未缓存</span>
            </div>
          </div>
        )
      }

      // 显示加载中
      if (emojiLoading || !emojiLocalPath) {
        return (
          <div className="emoji-message-wrapper" ref={emojiContainerRef}>
            <div className="emoji-loading">
              <Loader2 size={20} className="spin" />
            </div>
          </div>
        )
      }

      // 显示表情图片
      return (
        <div className="emoji-message-wrapper" ref={emojiContainerRef}>
          <img
            src={emojiLocalPath}
            alt="表情"
            className="emoji-image"
            onLoad={() => {
              setEmojiError(false)
              stabilizeEmojiScrollAfterResize()
            }}
            onError={() => {
              emojiResizeBaselineRef.current = null
              setEmojiError(true)
            }}
          />
        </div>
      )
    }

    // 解析引用消息（Links / App Messages）
    // localType: 21474836529 corresponds to AppMessage which often contains links

    // 带引用的消息
    if (hasQuote) {
      return (
        <div className="bubble-content">
          <div className="quoted-message">
            {message.quotedSender && <span className="quoted-sender">{message.quotedSender}</span>}
            <span className="quoted-text">{renderTextWithEmoji(cleanMessageContent(message.quotedContent || ''))}</span>
          </div>
          <div className="message-text">{renderTextWithEmoji(cleanedParsedContent)}</div>
        </div>
      )
    }

    // 普通消息
    return <div className="bubble-content">{renderTextWithEmoji(cleanedParsedContent)}</div>
  }

  return (
    <>
      {showTime && (
        <div className="time-divider">
          <span>{formatTime(message.createTime)}</span>
        </div>
      )}
      <div
        className={`message-wrapper-with-selection ${isSelectionMode ? 'selectable' : ''}`}
        style={{
          display: 'flex',
          alignItems: 'flex-start',
          width: '100%',
          justifyContent: isSent ? 'flex-end' : 'flex-start',
          cursor: isSelectionMode ? 'pointer' : 'default'
        }}
        onClick={(e) => {
          if (isSelectionMode) {
            e.stopPropagation()
            onToggleSelection?.(messageKey, e.shiftKey)
          }
        }}
      >
        {isSelectionMode && !isSent && (
          <div className={`checkbox ${isSelected ? 'checked' : ''}`} style={{
            width: '20px',
            height: '20px',
            borderRadius: '4px',
            border: isSelected ? 'none' : '2px solid rgba(128,128,128,0.5)',
            backgroundColor: isSelected ? 'var(--primary)' : 'transparent',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            color: 'white',
            marginRight: '12px',
            marginTop: '10px', // Align with avatar top
            flexShrink: 0
          }}>
            {isSelected && <Check size={14} strokeWidth={3} />}
          </div>
        )}

        <div className={`message-bubble ${bubbleClass} ${isEmoji && message.emojiCdnUrl && !emojiError ? 'emoji' : ''} ${isImage ? 'image' : ''} ${isVoice ? 'voice' : ''}`}
          onContextMenu={(e) => onContextMenu?.(e, message)}
        >
          <div className="bubble-avatar">
            <Avatar
              src={avatarUrl}
              name={!isSent ? (isGroupChat ? (resolvedSenderName || '?') : (session.displayName || session.username)) : '我'}
              size={36}
              className="bubble-avatar"
            />
          </div>
          <div className="bubble-body">
            {/* 群聊中显示发送者名称 */}
            {isGroupChat && !isSent && (
              <div className="sender-name">
                {resolvedSenderName || '群成员'}
              </div>
            )}
            {renderContent()}
          </div>
        </div>

        {isSelectionMode && isSent && (
          <div className={`checkbox ${isSelected ? 'checked' : ''}`} style={{
            width: '20px',
            height: '20px',
            borderRadius: '4px',
            border: isSelected ? 'none' : '2px solid rgba(128,128,128,0.5)',
            backgroundColor: isSelected ? 'var(--primary)' : 'transparent',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            color: 'white',
            marginLeft: '12px',
            marginTop: '10px',
            flexShrink: 0
          }}>
            {isSelected && <Check size={14} strokeWidth={3} />}
          </div>
        )}
      </div>
    </>
  )
}

const MemoMessageBubble = React.memo(MessageBubble, (prevProps, nextProps) => {
  if (prevProps.message !== nextProps.message) return false
  if (prevProps.messageKey !== nextProps.messageKey) return false
  if (prevProps.showTime !== nextProps.showTime) return false
  if (prevProps.myAvatarUrl !== nextProps.myAvatarUrl) return false
  if (prevProps.isGroupChat !== nextProps.isGroupChat) return false
  if (prevProps.autoTranscribeVoiceEnabled !== nextProps.autoTranscribeVoiceEnabled) return false
  if (prevProps.isSelectionMode !== nextProps.isSelectionMode) return false
  if (prevProps.isSelected !== nextProps.isSelected) return false
  if (prevProps.onRequireModelDownload !== nextProps.onRequireModelDownload) return false
  if (prevProps.onContextMenu !== nextProps.onContextMenu) return false
  if (prevProps.onToggleSelection !== nextProps.onToggleSelection) return false

  return (
    prevProps.session.username === nextProps.session.username &&
    prevProps.session.displayName === nextProps.session.displayName &&
    prevProps.session.avatarUrl === nextProps.session.avatarUrl
  )
})

export default ChatPage