import { useEffect, useRef, useState, useCallback } from 'react'
import { Terminal } from '@xterm/xterm'
import { FitAddon } from '@xterm/addon-fit'
import { SearchAddon } from '@xterm/addon-search'
import '@xterm/xterm/css/xterm.css'
import { Search, ChevronUp, ChevronDown, X, Terminal as TerminalIcon } from 'lucide-react'
import { themes } from '../themes/terminal'
import { useSettingsStore } from '../stores/settingsStore'
import { useTabStore, type ConnectionInstance } from '../stores/tabStore'
import { getSessionConfig, getConnectionStore, type ConnectionState } from '../stores/connection'
import { useTerminalSnapshotStore } from '../stores/terminalSnapshotStore'
import { createLogger } from '../utils/logger'
import type { TerminalViewProps } from './terminal/types'

const logger = createLogger('TerminalView')

export default function TerminalView({ tabId, isActive = true }: TerminalViewProps) {
  const terminalRef = useRef<HTMLDivElement>(null)
  const xtermRef = useRef<Terminal | null>(null)
  const fitAddonRef = useRef<FitAddon | null>(null)
  const searchAddonRef = useRef<SearchAddon | null>(null)
  const shellIdRef = useRef<string | null>(null)
  const connectionIdRef = useRef<string | null>(null)
  const hasConnectedRef = useRef(false)
  const isConnectingRef = useRef(false)
  const handleShellDataRef = useRef<((_event: unknown, _connId: string, shellId: string, data: Buffer) => void) | null>(null)
  const listenerRegisteredRef = useRef(false)
  
  // 本地状态
  const [connectionState, setConnectionState] = useState<ConnectionState>('disconnected')
  const [statusMessage, setStatusMessage] = useState<string>('')
  const [showSuspendedOverlay, setShowSuspendedOverlay] = useState(false)
  
  // 搜索状态
  const [showSearch, setShowSearch] = useState(false)
  const [searchQuery, setSearchQuery] = useState('')
  const [searchResultCount, setSearchResultCount] = useState<number | undefined>(undefined)
  const [searchResultIndex, setSearchResultIndex] = useState<number | undefined>(undefined)
  const searchInputRef = useRef<HTMLInputElement>(null)
  
  // 全局状态
  const { settings, loadSettings } = useSettingsStore()
  const { updateTab, updateTabConnectionInstance, updateTabStatus, getTabById } = useTabStore()
  const snapshotStore = useTerminalSnapshotStore()
  
  const currentTheme = themes[settings.terminalTheme] || themes['dracula']

  // 加载设置
  useEffect(() => {
    loadSettings()
  }, [loadSettings])

  // 搜索相关回调
  const searchDecorations = {
    matchBackground: '#3b82f633',
    matchBorder: '#3b82f666',
    matchOverviewRuler: '#3b82f6',
    activeMatchBackground: '#3b82f6',
    activeMatchBorder: '#60a5fa',
    activeMatchColorOverviewRuler: '#60a5fa',
  }

  const handleSearchChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    const query = e.target.value
    setSearchQuery(query)
    if (query) {
      searchAddonRef.current?.findNext(query, { decorations: searchDecorations, incremental: true })
    } else {
      searchAddonRef.current?.clearDecorations()
      setSearchResultCount(undefined)
      setSearchResultIndex(undefined)
    }
  }, [])

  const handleSearchNext = useCallback(() => {
    if (searchAddonRef.current && searchQuery) {
      searchAddonRef.current.findNext(searchQuery, { decorations: searchDecorations })
    }
  }, [searchQuery])

  const handleSearchPrevious = useCallback(() => {
    if (searchAddonRef.current && searchQuery) {
      searchAddonRef.current.findPrevious(searchQuery, { decorations: searchDecorations })
    }
  }, [searchQuery])

  const handleCloseSearch = useCallback(() => {
    setShowSearch(false)
    searchAddonRef.current?.clearDecorations()
    setSearchQuery('')
    setSearchResultCount(undefined)
    setSearchResultIndex(undefined)
    xtermRef.current?.focus()
  }, [])

  // Ctrl+F / Cmd+F 打开搜索栏，Escape 关闭
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
        // 只在当前标签激活时拦截
        if (!isActive) return
        e.preventDefault()
        e.stopPropagation()
        if (!showSearch) {
          setShowSearch(true)
          // 延迟聚焦输入框，等 DOM 更新
          setTimeout(() => searchInputRef.current?.focus(), 50)
        } else {
          searchInputRef.current?.focus()
          searchInputRef.current?.select()
        }
      }
      if (e.key === 'Escape' && showSearch) {
        handleCloseSearch()
      }
    }
    window.addEventListener('keydown', handleKeyDown)
    return () => window.removeEventListener('keydown', handleKeyDown)
  }, [isActive, showSearch, handleCloseSearch])

  // 监听 SearchAddon 的 onDidChangeResults 事件
  useEffect(() => {
    const addon = searchAddonRef.current
    if (!addon) return
    const disposable = addon.onDidChangeResults((e) => {
      setSearchResultCount(e.resultCount)
      setSearchResultIndex(e.resultIndex !== undefined ? e.resultIndex + 1 : undefined)
    })
    return () => disposable.dispose()
  }, [])

  // 初始化 xterm
  useEffect(() => {
    // 修复：只检查 terminalRef，不检查 xtermRef
    // 因为在严格模式下，组件会 unmount/remount，xtermRef 可能还存在
    // 但监听器需要重新注册
    if (!terminalRef.current) {
      return
    }
    
    // 处理窗口大小调整
    const handleResize = () => {
      fitAddonRef.current?.fit()
      if (shellIdRef.current && xtermRef.current) {
        const { cols, rows } = xtermRef.current
        window.electronAPI?.sshShellResize(shellIdRef.current, cols, rows)
      }
    }

    // 如果 xterm 不存在，创建它
    if (!xtermRef.current) {
      const term = new Terminal({
        cursorBlink: true,
        cursorStyle: 'block',
        fontSize: settings.fontSize,
        fontFamily: settings.fontFamily + ', Menlo, Monaco, "Courier New", monospace',
        theme: {
          background: currentTheme.background,
          foreground: currentTheme.foreground,
          cursor: currentTheme.cursor,
          black: currentTheme.black,
          red: currentTheme.red,
          green: currentTheme.green,
          yellow: currentTheme.yellow,
          blue: currentTheme.blue,
          magenta: currentTheme.magenta,
          cyan: currentTheme.cyan,
          white: currentTheme.white,
          brightBlack: currentTheme.brightBlack,
          brightRed: currentTheme.brightRed,
          brightGreen: currentTheme.brightGreen,
          brightYellow: currentTheme.brightYellow,
          brightBlue: currentTheme.brightBlue,
          brightMagenta: currentTheme.brightMagenta,
          brightCyan: currentTheme.brightCyan,
          brightWhite: currentTheme.brightWhite,
        },
        scrollback: 10000,
        rows: 30
      })

      const fitAddon = new FitAddon()
      const searchAddon = new SearchAddon()
      term.loadAddon(fitAddon)
      term.loadAddon(searchAddon)
      term.open(terminalRef.current)

      fitAddon.fit()

      xtermRef.current = term
      fitAddonRef.current = fitAddon
      searchAddonRef.current = searchAddon

      // 处理终端输入
      term.onData((data) => {
        if (shellIdRef.current && window.electronAPI) {
          // 更新活动状态
          if (connectionIdRef.current) {
            getConnectionStore().updateActivity(connectionIdRef.current)
          }
          window.electronAPI.sshShellWrite(shellIdRef.current, data)
        }
      })
    }

    window.addEventListener('resize', handleResize)

    // IP 地址高亮处理 - 将包含 "from" 或 "Last login" 行中的 IP 地址标记为绿色
    const highlightIPAddresses = (text: string): string => {
      // 匹配 IPv4 地址格式 (xxx.xxx.xxx.xxx)
      const ipRegex = /(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})/g
      // 如果包含 Last login 或 from IP，将 IP 地址替换为绿色
      if (text.includes('Last login') || text.includes(' from ')) {
        return text.replace(ipRegex, '\x1b[32m$1\x1b[0m')
      }
      return text
    }

    // Shell 数据处理器 - 直接处理，不依赖外部 ref
    // 使用 ref 存储 handler，避免闭包问题
    handleShellDataRef.current = (_event: unknown, _connId: string, shellId: string, data: Buffer) => {
      const text = data.toString('utf-8')
      
      // 使用 ref 获取最新的 shellId，避免闭包问题
      if (shellId === shellIdRef.current && xtermRef.current) {
        // 处理数据，高亮 IP 地址（Last login 或 from IP 行）
        let processedData = data
        
        // 如果包含 Last login 或 from IP，处理 IP 地址高亮
        if (text.includes('Last login') || text.includes(' from ')) {
          logger.debug('[Terminal] Found IP address line, highlighting IP')
          const highlighted = highlightIPAddresses(text)
          processedData = Buffer.from(highlighted, 'utf-8')
        }
        
        // 写入 xterm
        xtermRef.current.write(processedData)
        
        // 更新传输统计
        const connId = connectionIdRef.current
        if (connId) {
          const conn = getConnectionStore().getConnection(connId)
          if (conn) {
            conn.stats.bytesTransferred += data.length
          }
        }
      }
    }

    // 只注册一次监听器（防止严格模式下重复注册）
    if (!listenerRegisteredRef.current) {
      const handler = (event: any, connectionId: string, shellId: string, data: Buffer) => {
        handleShellDataRef.current?.(event, connectionId, shellId, data)
      }
      window.electronAPI?.onShellData(handler)
      listenerRegisteredRef.current = true
    }

    return () => {
      window.removeEventListener('resize', handleResize)
      // 不在这里移除监听器，避免严格模式下的问题
      // 监听器会在组件真正卸载时通过 removeAllListeners 清理
      
      // 注意：不要在严格模式下 dispose terminal
    }
  }, []) // 只在挂载时运行

  // 保存快照
  const saveSnapshot = useCallback(() => {
    if (!xtermRef.current || !connectionIdRef.current) return

    useTerminalSnapshotStore.getState().createSnapshot(tabId, xtermRef.current, {
      connectionId: connectionIdRef.current,
      shellId: shellIdRef.current,
    })
  }, [tabId])

  // 恢复快照
  const restoreSnapshot = useCallback(() => {
    if (!xtermRef.current) return false

    const snapshot = useTerminalSnapshotStore.getState().getSnapshot(tabId)
    if (!snapshot) return false

    // 清屏
    xtermRef.current.clear()

    // 恢复内容
    const content = snapshot.buffer.join('\r\n')
    if (content) {
      xtermRef.current.write(content)
    }

    // 恢复光标
    xtermRef.current.write(`\x1b[${snapshot.cursorY + 1};${snapshot.cursorX + 1}H`)

    return true
  }, [tabId])

  // 连接管理
  const connect = useCallback(async () => {
    if (isConnectingRef.current) {
      logger.debug('[Terminal] Connection already in progress, skipping')
      return
    }
    isConnectingRef.current = true

    // 直接使用 getTabById，避免 useCallback 循环问题
    const currentTab = getTabById(tabId)
    if (!currentTab) {
      logger.debug('[Terminal] Tab not found:', tabId)
      isConnectingRef.current = false
      return
    }
    
    logger.debug('[Terminal] Starting connection for tab:', tabId, 'sessionId:', currentTab.sessionId)

    // 检查是否已有连接
    if (connectionIdRef.current) {
      const conn = getConnectionStore().getConnection(connectionIdRef.current)
      if (conn) {
        if (conn.state === 'connected' || conn.state === 'background') {
          // 已有活跃连接，恢复显示
          shellIdRef.current = currentTab.connectionInstance?.shellId || null
          setConnectionState(conn.state)
          updateTabStatus(tabId, conn.state === 'connected' ? 'connected' : 'disconnected')
          isConnectingRef.current = false
          return
        } else if (conn.state === 'suspended') {
          // 连接被挂起，需要恢复
          setShowSuspendedOverlay(true)
          setConnectionState('suspended')
          updateTabStatus(tabId, 'disconnected')
          isConnectingRef.current = false
          return
        }
      }
    }

    // 开始连接
    setConnectionState('connecting')
    updateTabStatus(tabId, 'connecting')

    try {
      // 获取配置
      let config: {
        host: string
        port: number
        username: string
        password?: string
        privateKey?: string
        passphrase?: string
      } | null = null

      if (currentTab.connectionConfig) {
        config = {
          host: currentTab.connectionConfig.host,
          port: currentTab.connectionConfig.port || 22,
          username: currentTab.connectionConfig.username,
          password: currentTab.connectionConfig.password,
          privateKey: currentTab.connectionConfig.privateKey,
          passphrase: currentTab.connectionConfig.passphrase,
        }
      } else if (currentTab.sessionId) {
        config = await getSessionConfig(currentTab.sessionId)
      }

      if (!config) {
        throw new Error('无可用连接信息')
      }

      // 创建连接
      const result = await getConnectionStore().createConnection(tabId, config)

      if (!result.success || !result.connectionId) {
        throw new Error(result.error || '连接失败')
      }

      const connectionId = result.connectionId
      connectionIdRef.current = connectionId

      // 创建 Shell - 先生成前端 shellId，确保数据不会丢失
      const pendingShellId = `shell-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
      logger.debug('[Terminal] Pre-assigning shellId:', pendingShellId)
      shellIdRef.current = pendingShellId
      
      logger.debug('[Terminal] Creating shell for connection:', connectionId, 'with shellId:', pendingShellId)
      const shellResult = await window.electronAPI?.sshCreateShell(connectionId, {
        cols: xtermRef.current?.cols || 80,
        rows: xtermRef.current?.rows || 24,
      }, pendingShellId)

      if (!shellResult?.success || !shellResult.shellId) {
        logger.error('[Terminal] Shell creation failed:', shellResult?.error)
        shellIdRef.current = null
        await getConnectionStore().disconnectConnection(connectionId, 'shell creation failed')
        throw new Error(shellResult?.error || '创建终端失败')
      }

      // shellId 应该和 pendingShellId 相同（由后端确认）
      const confirmedShellId = shellResult.shellId
      logger.debug('[Terminal] Shell confirmed with ID:', confirmedShellId)
      // shellIdRef 已经是 confirmedShellId（等于 pendingShellId）
      getConnectionStore().addShell(connectionId, confirmedShellId)

      // 更新标签
      const connectionInstance: ConnectionInstance = {
        connectionId,
        shellId: confirmedShellId,
      }
      updateTabConnectionInstance(tabId, connectionInstance)

      // 更新状态
      setConnectionState('connected')
      updateTabStatus(tabId, 'connected')
      getConnectionStore().setActiveTab(connectionId, tabId)
      
      // 更新标题
      if (currentTab.title === '新终端' || currentTab.title === 'Terminal') {
        updateTab(tabId, { 
          title: `${config.username}@${config.host}`,
        })
      }

      // 等待服务器返回真实的 Last login 信息和提示符
      // 不手动写入任何内容，让 SSH 服务器的自然输出显示
      
      xtermRef.current?.focus()

    } catch (error: any) {
      setConnectionState('error')
      updateTabStatus(tabId, 'error')
      setStatusMessage(`错误: ${error.message}`)
      xtermRef.current?.writeln(`\r\n\x1b[31m错误: ${error.message}\x1b[0m`)
    } finally {
      isConnectingRef.current = false
      hasConnectedRef.current = true
    }
  }, [tabId, updateTabConnectionInstance, updateTabStatus, getTabById])

  // 注意：不再使用模拟的 Last login 信息
  // 真实的 SSH 服务器会自动发送欢迎信息和提示符

  // 恢复挂起的连接
  const resumeConnection = useCallback(async () => {
    if (!connectionIdRef.current) return

    setConnectionState('reconnecting')
    const resumed = await getConnectionStore().resumeConnection(connectionIdRef.current)

    if (resumed) {
      // 获取新的连接 ID
      const currentTab = getTabById(tabId)
      if (currentTab?.connectionInstance?.connectionId) {
        connectionIdRef.current = currentTab.connectionInstance.connectionId

        // 创建新的 shell - 预分配 shellId 防止数据丢失
        const newShellId = `shell-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
        shellIdRef.current = newShellId
        
        const shellResult = await window.electronAPI?.sshCreateShell(connectionIdRef.current, {
          cols: xtermRef.current?.cols || 80,
          rows: xtermRef.current?.rows || 24,
        }, newShellId)

        if (shellResult?.success && shellResult.shellId) {
          // shellId 应该和 newShellId 相同
          getConnectionStore().addShell(connectionIdRef.current, shellResult.shellId)

          updateTabConnectionInstance(tabId, {
            connectionId: connectionIdRef.current,
            shellId: shellResult.shellId,
          })

          setConnectionState('connected')
          updateTabStatus(tabId, 'connected')
          setShowSuspendedOverlay(false)

          // 恢复连接成功，等待服务器发送提示符
          return
        }
      }
    }

    // 恢复失败，重新连接
    setConnectionState('disconnected')
    hasConnectedRef.current = false
    setShowSuspendedOverlay(false)
    connect()
  }, [connect, updateTabConnectionInstance, updateTabStatus, getTabById, tabId])

  // 初始连接
  useEffect(() => {
    if (!hasConnectedRef.current && isActive) {
      // 检查标签是否从持久化恢复（需要手动重新连接）
      const currentTab = getTabById(tabId)
      if (currentTab?.needsReconnect) {
        // 从持久化恢复的标签，不自动连接，显示「重新连接」界面
        logger.info('[Terminal] Tab restored from session, waiting for manual reconnect')
        setConnectionState('disconnected')
        setStatusMessage('上次会话已恢复，点击重新连接')
        return
      }

      // 检查是否有快照
      const hasSnapshot = snapshotStore.hasSnapshot(tabId)
      if (hasSnapshot && isActive) {
        // 先恢复快照
        restoreSnapshot()
      }
      
      connect()
    }
  }, []) // 只在挂载时执行

  // 处理活跃状态变化
  useEffect(() => {
    if (!hasConnectedRef.current) return

    const pool = getConnectionStore()

    if (isActive) {
      // 标签变为活跃
      if (connectionIdRef.current) {
        const conn = pool.getConnection(connectionIdRef.current)
        if (conn?.state === 'suspended') {
          setShowSuspendedOverlay(true)
          setConnectionState('suspended')
        } else {
          pool.setActiveTab(connectionIdRef.current, tabId)
          // 同步本地状态
          setConnectionState(conn?.state === 'connected' || conn?.state === 'background' ? conn.state : 'connected')
          // 不再恢复快照 - shell 是实时输出的，重复写入会导致内容重复
        }
      }
      xtermRef.current?.focus()
    } else {
      // 标签进入后台 - 保存快照用于恢复
      if (connectionIdRef.current) {
        pool.setBackgroundTab(connectionIdRef.current, tabId)
        saveSnapshot()
      }
    }
  }, [isActive, tabId, saveSnapshot])

  // 重连功能
  const handleReconnect = useCallback(() => {
    if (connectionState === 'error' || connectionState === 'disconnected' || connectionState === 'suspended') {
      if (connectionIdRef.current) {
        getConnectionStore().disconnectConnection(connectionIdRef.current, 'manual reconnect')
      }
      connectionIdRef.current = null
      shellIdRef.current = null
      hasConnectedRef.current = false
      setConnectionState('disconnected')
      setShowSuspendedOverlay(false)
      // 清除 needsReconnect 标志
      updateTab(tabId, { needsReconnect: false })
      xtermRef.current?.clear()
      connect()
    }
  }, [connectionState, connect, updateTab, tabId])

  // 组件卸载时清理监听器
  useEffect(() => {
    return () => {
      // 重置连接状态，防止严格模式下 remount 时状态混乱
      isConnectingRef.current = false
      listenerRegisteredRef.current = false  // 重置监听器注册标记
      // 组件真正卸载时移除所有监听器
      window.electronAPI?.removeAllListeners('ssh:shellData')
    }
  }, [])

  return (
    <div className="h-full flex flex-col bg-dark-900">
      {/* 终端容器 */}
      <div className="flex-1 p-2 overflow-hidden relative">
        <div
          ref={terminalRef}
          className="w-full h-full bg-dark-900 rounded"
        />
        
        {/* 搜索栏 - 终端顶部覆盖 */}
        {showSearch && (
          <div className="absolute top-0 left-0 right-0 z-30 flex items-center gap-2 px-3 py-2 bg-dark-800/95 border-b border-dark-600 backdrop-blur-sm">
            <Search size={14} className="text-gray-400 shrink-0" />
            <input
              ref={searchInputRef}
              type="text"
              value={searchQuery}
              onChange={handleSearchChange}
              onKeyDown={(e) => {
                if (e.key === 'Enter') {
                  if (e.shiftKey) {
                    handleSearchPrevious()
                  } else {
                    handleSearchNext()
                  }
                }
                e.stopPropagation()
              }}
              placeholder="搜索..."
              className="flex-1 bg-dark-900 text-gray-200 text-sm px-2 py-1 rounded border border-dark-600 focus:border-accent-blue focus:outline-none placeholder-gray-500"
            />
            {searchResultCount !== undefined && (
              <span className="text-xs text-gray-400 whitespace-nowrap min-w-[60px] text-center">
                {searchResultIndex ?? 0}/{searchResultCount}
              </span>
            )}
            <button
              onClick={handleSearchPrevious}
              className="p-1 hover:bg-dark-600 rounded text-gray-400 hover:text-gray-200 transition-colors"
              title="上一个 (Shift+Enter)"
            >
              <ChevronUp size={16} />
            </button>
            <button
              onClick={handleSearchNext}
              className="p-1 hover:bg-dark-600 rounded text-gray-400 hover:text-gray-200 transition-colors"
              title="下一个 (Enter)"
            >
              <ChevronDown size={16} />
            </button>
            <button
              onClick={handleCloseSearch}
              className="p-1 hover:bg-dark-600 rounded text-gray-400 hover:text-gray-200 transition-colors"
              title="关闭 (Escape)"
            >
              <X size={16} />
            </button>
          </div>
        )}
        
        {/* 会话恢复 - 需要重新连接覆盖层 */}
        {connectionState === 'disconnected' && getTabById(tabId)?.needsReconnect && (
          <div className="absolute inset-0 bg-dark-900/90 flex items-center justify-center z-10">
            <div className="text-center">
              <div className="w-16 h-16 bg-accent-blue/20 rounded-2xl flex items-center justify-center mx-auto mb-4">
                <TerminalIcon className="w-8 h-8 text-accent-blue" />
              </div>
              <div className="text-gray-200 mb-2 text-lg">会话已恢复</div>
              <div className="text-gray-400 text-sm mb-6">
                上次关闭时的终端标签已恢复<br />
                点击下方按钮重新建立 SSH 连接
              </div>
              <button
                onClick={handleReconnect}
                className="px-6 py-2.5 bg-accent-blue hover:bg-blue-500 text-white rounded-lg transition-colors"
              >
                重新连接
              </button>
            </div>
          </div>
        )}
        
        {/* 挂起状态覆盖层 */}
        {showSuspendedOverlay && (
          <div className="absolute inset-0 bg-dark-900/90 flex items-center justify-center z-10">
            <div className="text-center">
              <div className="text-yellow-400 mb-2 text-lg">连接已挂起</div>
              <div className="text-gray-400 text-sm mb-4">
                长时间未操作，连接已进入挂起状态
              </div>
              <button
                onClick={resumeConnection}
                className="px-4 py-2 bg-accent-blue hover:bg-blue-500 text-white rounded transition-colors mr-2"
              >
                恢复连接
              </button>
              <button
                onClick={handleReconnect}
                className="px-4 py-2 bg-dark-700 hover:bg-dark-600 text-gray-200 rounded transition-colors"
              >
                重新连接
              </button>
            </div>
          </div>
        )}
        
        {/* 错误状态覆盖层 */}
        {connectionState === 'error' && (
          <div className="absolute inset-0 bg-dark-900/80 flex items-center justify-center z-10">
            <div className="text-center">
              <div className="text-red-400 mb-2">连接失败</div>
              <div className="text-gray-400 text-sm mb-4">{statusMessage}</div>
              <button
                onClick={handleReconnect}
                className="px-4 py-2 bg-accent-blue hover:bg-blue-500 text-white rounded transition-colors"
              >
                重新连接
              </button>
            </div>
          </div>
        )}
        
        {/* 连接中状态 */}
        {connectionState === 'connecting' && (
          <div className="absolute inset-0 bg-dark-900/50 flex items-center justify-center pointer-events-none z-10">
            <div className="text-accent-blue animate-pulse">连接中...</div>
          </div>
        )}
        
        {/* 连接状态指示器 - 简洁版 */}
        <div className="absolute top-3 right-3 flex items-center gap-2 z-20">
          {/* 状态指示已移至 TabBar */}
        </div>
      </div>
    </div>
  )
}