<!-- 🔍 全局搜索页面 -->
<view class="search-container">
  <!-- 现代化导航栏 -->
  <view class="search-header" style="padding-top: {{statusBarHeight}}px;">
    <view class="header-content">
      <!-- 返回按钮 -->
      <view class="back-btn" bindtap="goBack">
        <text class="back-icon">←</text>
      </view>
      
      <!-- 搜索输入框 -->
      <view class="search-input-container">
        <view class="search-input-wrapper">
          <text class="search-icon">🔍</text>
          <input class="search-input"
                 placeholder="{{isConversationSearch ? '在此会话中搜索' : '搜索消息、好友、群聊'}}"
                 value="{{searchKeyword}}"
                 bindinput="onSearchInput"
                 bindconfirm="onSearchConfirm"
                 focus="{{searchFocus}}"
                 confirm-type="search" />
          <view class="clear-btn"
                wx:if="{{searchKeyword}}"
                bindtap="clearSearch">
            <text class="clear-icon">✕</text>
          </view>
        </view>
      </view>
      
      <!-- 搜索按钮 -->
      <view class="search-btn" bindtap="performSearch">
        <text class="search-btn-text">搜索</text>
      </view>
    </view>
  </view>

  <!-- 搜索内容区域 -->
  <view class="search-content">
    <!-- 搜索建议和历史 -->
    <view class="search-suggestions" wx:if="{{!searchResults.length && !isSearching}}">
      <!-- 搜索历史 -->
      <view class="suggestion-section" wx:if="{{searchHistory.length}}">
        <view class="section-header">
          <text class="section-title">搜索历史</text>
          <view class="clear-history-btn" bindtap="clearSearchHistory">
            <text class="clear-text">清除</text>
          </view>
        </view>
        <view class="history-list">
          <view class="history-item"
                wx:for="{{searchHistory}}"
                wx:key="index"
                bindtap="selectHistoryItem"
                data-keyword="{{item}}">
            <text class="history-icon">🕐</text>
            <text class="history-text">{{item}}</text>
            <view class="remove-history-btn"
                  bindtap="removeHistoryItem"
                  data-keyword="{{item}}"
                  catchtap="true">
              <text class="remove-icon">✕</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 热门搜索 -->
      <view class="suggestion-section" wx:if="{{hotSearches.length}}">
        <view class="section-header">
          <text class="section-title">热门搜索</text>
        </view>
        <view class="hot-search-list">
          <view class="hot-search-item"
                wx:for="{{hotSearches}}"
                wx:key="index"
                bindtap="selectHotSearch"
                data-keyword="{{item}}">
            <text class="hot-search-text">{{item}}</text>
          </view>
        </view>
      </view>

      <!-- 搜索提示 -->
      <view class="search-tips" wx:if="{{!searchHistory.length && !hotSearches.length}}">
        <view class="tips-icon">🔍</view>
        <text class="tips-title">开始搜索</text>
        <text class="tips-description">搜索消息、好友、群聊等内容</text>
      </view>
    </view>

    <!-- 搜索结果 -->
    <view class="search-results" wx:if="{{searchResults.length || isSearching}}">
      <!-- 搜索状态栏 -->
      <view class="search-status-bar" wx:if="{{searchKeyword}}">
        <text class="search-status-text">
          {{searchStatusText}}
        </text>
        
        <!-- 搜索类型筛选 -->
        <view class="search-type-filter">
          <view class="filter-item {{searchType === 'all' ? 'active' : ''}}"
                bindtap="changeSearchType"
                data-type="all">
            <text class="filter-text">全部</text>
          </view>
          <view class="filter-item {{searchType === 'text' ? 'active' : ''}}"
                bindtap="changeSearchType"
                data-type="text">
            <text class="filter-text">文本</text>
          </view>
          <view class="filter-item {{searchType === 'image' ? 'active' : ''}}"
                bindtap="changeSearchType"
                data-type="image">
            <text class="filter-text">图片</text>
          </view>
          <view class="filter-item {{searchType === 'file' ? 'active' : ''}}"
                bindtap="changeSearchType"
                data-type="file">
            <text class="filter-text">文件</text>
          </view>
        </view>
      </view>

      <!-- 搜索结果列表 -->
      <scroll-view class="results-scroll"
                   scroll-y="true"
                   bindscrolltolower="loadMoreResults"
                   enable-back-to-top="true">
        
        <!-- 消息结果 -->
        <view class="result-section" wx:if="{{searchResults.length}}">
          <view class="result-item"
                wx:for="{{searchResults}}"
                wx:key="id"
                bindtap="openMessage"
                data-message="{{item}}">
            
            <!-- 消息发送者头像 -->
            <view class="result-avatar">
              <image wx:if="{{item.senderAvatar}}"
                     src="{{item.senderAvatar}}"
                     class="avatar-image"
                     mode="aspectFill" />
              <view wx:else class="avatar-placeholder">
                <text class="avatar-text">{{item.senderName.charAt(0)}}</text>
              </view>
            </view>

            <!-- 消息内容 -->
            <view class="result-content">
              <view class="result-header">
                <text class="sender-name">{{item.senderName}}</text>
                <text class="message-time">{{item.formattedTime}}</text>
              </view>
              
              <view class="result-body">
                <!-- 文本消息 -->
                <view class="message-text" wx:if="{{item.msgType === 0}}">
                  <rich-text nodes="{{item.highlightedContent || item.content}}"></rich-text>
                </view>
                
                <!-- 图片消息 -->
                <view class="message-media" wx:elif="{{item.msgType === 1}}">
                  <text class="media-icon">🖼️</text>
                  <text class="media-text">[图片]</text>
                </view>
                
                <!-- 语音消息 -->
                <view class="message-media" wx:elif="{{item.msgType === 2}}">
                  <text class="media-icon">🎵</text>
                  <text class="media-text">[语音]</text>
                </view>
                
                <!-- 视频消息 -->
                <view class="message-media" wx:elif="{{item.msgType === 3}}">
                  <text class="media-icon">🎬</text>
                  <text class="media-text">[视频]</text>
                </view>
                
                <!-- 文件消息 -->
                <view class="message-media" wx:elif="{{item.msgType === 4}}">
                  <text class="media-icon">📄</text>
                  <text class="media-text">[文件] {{item.fileName || ''}}</text>
                </view>
              </view>
              
              <!-- 会话信息 -->
              <view class="conversation-info">
                <text class="conversation-name">来自: {{item.conversationName || '私聊'}}</text>
              </view>
            </view>

            <!-- 操作按钮 -->
            <view class="result-actions">
              <view class="action-btn" bindtap="jumpToMessage" data-message="{{item}}">
                <text class="action-icon">→</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 加载更多 -->
        <view class="load-more" wx:if="{{hasMoreResults}}">
          <view class="loading-spinner" wx:if="{{isLoadingMore}}"></view>
          <text class="load-more-text">
            {{isLoadingMore ? '加载中...' : '上拉加载更多'}}
          </text>
        </view>

        <!-- 无结果提示 -->
        <view class="no-results" wx:if="{{!isSearching && searchKeyword && !searchResults.length}}">
          <view class="no-results-icon">🔍</view>
          <text class="no-results-title">未找到相关内容</text>
          <text class="no-results-description">
            尝试使用其他关键词或检查拼写
          </text>
        </view>
      </scroll-view>
    </view>

    <!-- 加载状态 -->
    <view class="loading-state" wx:if="{{isSearching && !searchResults.length}}">
      <view class="loading-spinner"></view>
      <text class="loading-text">正在搜索...</text>
    </view>
  </view>
</view>
