<!-- 👥 群聊信息页面 -->
<view class="group-info-container">
  <!-- 自定义导航栏 -->
  <view class="custom-navbar" style="padding-top: {{statusBarHeight}}px;">
    <view class="navbar-content" style="height: {{navBarHeight}}px;">
      <view class="navbar-left" bindtap="goBack">
        <text class="back-icon">‹</text>
      </view>
      
      <view class="navbar-title">
        <text class="title-text">群聊信息</text>
      </view>
      
      <view class="navbar-right" bindtap="showMoreMenu">
        <text class="more-icon">⋯</text>
      </view>
    </view>
  </view>

  <!-- 页面内容 -->
  <scroll-view class="page-content" scroll-y="true">
    <!-- 群基本信息 -->
    <view class="group-basic-info">
      <!-- 群头像和名称 -->
      <view class="group-header">
        <view class="group-avatar-container">
          <image class="group-avatar" 
                 src="{{groupInfo.avatar || '/images/default-group-avatar.png'}}" 
                 mode="aspectFill" />
          <view wx:if="{{isOwnerOrAdmin}}" 
                class="edit-avatar-btn" 
                bindtap="editGroupAvatar">
            <text class="edit-icon">📷</text>
          </view>
        </view>
        
        <view class="group-name-section">
          <view class="group-name-container" bindtap="editGroupName">
            <text class="group-name">{{groupInfo.name}}</text>
            <text wx:if="{{isOwnerOrAdmin}}" class="edit-name-icon">✏️</text>
          </view>
          <text class="group-id">群聊ID: {{groupInfo.groupId}}</text>
          <text class="member-count">{{memberCount}} 人</text>
        </view>
      </view>
      
      <!-- 群描述 -->
      <view class="group-description" wx:if="{{groupInfo.description || isOwnerOrAdmin}}">
        <view class="desc-header">
          <text class="desc-title">群描述</text>
          <text wx:if="{{isOwnerOrAdmin}}" 
                class="edit-desc-btn" 
                bindtap="editGroupDescription">编辑</text>
        </view>
        <text class="desc-content">{{groupInfo.description || '暂无群描述'}}</text>
      </view>
      
      <!-- 群公告 -->
      <view class="group-announcement" wx:if="{{groupInfo.announcement || isOwnerOrAdmin}}">
        <view class="announcement-header">
          <text class="announcement-title">群公告</text>
          <text wx:if="{{isOwnerOrAdmin}}" 
                class="edit-announcement-btn" 
                bindtap="editGroupAnnouncement">{{groupInfo.announcement ? '编辑' : '发布'}}</text>
        </view>
        <text class="announcement-content">{{groupInfo.announcement || '暂无群公告'}}</text>
        <text wx:if="{{groupInfo.announcementTime}}" 
              class="announcement-time">{{announcementTimeText}}</text>
      </view>
    </view>

    <!-- 群成员 -->
    <view class="group-members-section">
      <view class="section-header">
        <text class="section-title">群成员 ({{memberCount}})</text>
        <view class="header-actions">
          <text wx:if="{{canInviteMembers}}" 
                class="action-btn" 
                bindtap="inviteMembers">邀请</text>
          <text class="action-btn" bindtap="viewAllMembers">查看全部</text>
        </view>
      </view>
      
      <!-- 成员网格 -->
      <view class="members-grid">
        <!-- 邀请按钮 -->
        <view wx:if="{{canInviteMembers}}" 
              class="member-item invite-item" 
              bindtap="inviteMembers">
          <view class="member-avatar invite-avatar">
            <text class="invite-icon">+</text>
          </view>
          <text class="member-name">邀请</text>
        </view>
        
        <!-- 成员列表 -->
        <view class="member-item"
              wx:for="{{displayMembers}}"
              wx:key="userId"
              bindtap="viewMemberProfile"
              data-user-id="{{item.userId}}">
          <view class="member-avatar-container">
            <image class="member-avatar" 
                   src="{{item.avatar || '/images/default-avatar.png'}}" 
                   mode="aspectFill" />
            <view wx:if="{{item.role === 'owner'}}" class="role-badge owner">
              <text class="role-text">群主</text>
            </view>
            <view wx:elif="{{item.role === 'admin'}}" class="role-badge admin">
              <text class="role-text">管理员</text>
            </view>
          </view>
          <text class="member-name">{{item.nickname || item.username}}</text>
        </view>
      </view>
    </view>

    <!-- 群功能 -->
    <view class="group-functions-section">
      <view class="function-items">
        <!-- 查找聊天记录 -->
        <view class="function-item" bindtap="searchChatHistory">
          <view class="function-icon">🔍</view>
          <text class="function-title">查找聊天记录</text>
          <text class="function-arrow">›</text>
        </view>
        
        <!-- 群聊文件 -->
        <view class="function-item" bindtap="viewGroupFiles">
          <view class="function-icon">📁</view>
          <text class="function-title">群聊文件</text>
          <text class="function-arrow">›</text>
        </view>
        
        <!-- 群聊相册 -->
        <view class="function-item" bindtap="viewGroupPhotos">
          <view class="function-icon">🖼️</view>
          <text class="function-title">群聊相册</text>
          <text class="function-arrow">›</text>
        </view>
        
        <!-- 群二维码 -->
        <view class="function-item" bindtap="showGroupQRCode">
          <view class="function-icon">📱</view>
          <text class="function-title">群二维码</text>
          <text class="function-arrow">›</text>
        </view>
      </view>
    </view>

    <!-- 群设置 -->
    <view class="group-settings-section">
      <view class="setting-items">
        <!-- 消息免打扰 -->
        <view class="setting-item">
          <view class="item-info">
            <text class="item-title">消息免打扰</text>
          </view>
          <switch class="setting-switch"
                  checked="{{groupSettings.muteNotifications}}"
                  bindchange="onMuteNotificationsChange" />
        </view>
        
        <!-- 置顶聊天 -->
        <view class="setting-item">
          <view class="item-info">
            <text class="item-title">置顶聊天</text>
          </view>
          <switch class="setting-switch"
                  checked="{{groupSettings.pinned}}"
                  bindchange="onPinnedChange" />
        </view>
        
        <!-- 保存到通讯录 -->
        <view class="setting-item">
          <view class="item-info">
            <text class="item-title">保存到通讯录</text>
          </view>
          <switch class="setting-switch"
                  checked="{{groupSettings.saveToContacts}}"
                  bindchange="onSaveToContactsChange" />
        </view>
        
        <!-- 群聊设置 -->
        <view wx:if="{{isOwnerOrAdmin}}" 
              class="setting-item" 
              bindtap="openGroupSettings">
          <view class="item-info">
            <text class="item-title">群聊设置</text>
          </view>
          <text class="item-arrow">›</text>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <!-- 发消息按钮 -->
      <view class="action-btn primary" bindtap="sendMessage">
        <text class="btn-text">发消息</text>
      </view>
      
      <!-- 退出/解散群聊 -->
      <view class="action-btn danger" bindtap="showLeaveGroupOptions">
        <text class="btn-text">{{isOwner ? '解散群聊' : '退出群聊'}}</text>
      </view>
    </view>
  </scroll-view>
</view>

<!-- 群二维码弹窗 -->
<view class="qr-code-modal" wx:if="{{showQRCodeModal}}" bindtap="closeQRCodeModal">
  <view class="modal-content" catchtap="stopPropagation">
    <view class="modal-header">
      <text class="modal-title">群二维码</text>
      <view class="close-btn" bindtap="closeQRCodeModal">
        <text class="close-icon">✕</text>
      </view>
    </view>
    
    <view class="qr-code-container">
      <canvas class="qr-code-canvas" 
              canvas-id="groupQRCode"
              style="width: {{qrCodeSize}}px; height: {{qrCodeSize}}px;"></canvas>
    </view>
    
    <view class="qr-code-info">
      <text class="qr-info-text">扫描二维码，加入群聊</text>
      <text class="qr-group-name">{{groupInfo.name}}</text>
    </view>
    
    <view class="qr-code-actions">
      <view class="qr-action-btn" bindtap="saveQRCodeToAlbum">
        <text class="action-text">保存到相册</text>
      </view>
      <view class="qr-action-btn" bindtap="shareQRCode">
        <text class="action-text">分享二维码</text>
      </view>
    </view>
  </view>
</view>

<!-- 编辑群名称弹窗 -->
<view class="edit-modal" wx:if="{{showEditNameModal}}" bindtap="closeEditNameModal">
  <view class="modal-content" catchtap="stopPropagation">
    <view class="modal-header">
      <text class="modal-title">修改群名称</text>
      <view class="close-btn" bindtap="closeEditNameModal">
        <text class="close-icon">✕</text>
      </view>
    </view>

    <view class="modal-body">
      <input class="edit-input"
             placeholder="请输入群名称"
             value="{{editGroupName}}"
             bindinput="onEditGroupNameInput"
             maxlength="20"
             focus="{{showEditNameModal}}" />
      <view class="input-counter">
        <text class="counter-text">{{editGroupName.length}}/20</text>
      </view>
    </view>

    <view class="modal-actions">
      <view class="modal-btn cancel" bindtap="closeEditNameModal">
        <text class="btn-text">取消</text>
      </view>
      <view class="modal-btn confirm {{editGroupName.trim() ? 'active' : ''}}"
            bindtap="confirmEditGroupName">
        <text class="btn-text">确定</text>
      </view>
    </view>
  </view>
</view>

<!-- 编辑群描述弹窗 -->
<view class="edit-modal" wx:if="{{showEditDescModal}}" bindtap="closeEditDescModal">
  <view class="modal-content" catchtap="stopPropagation">
    <view class="modal-header">
      <text class="modal-title">修改群描述</text>
      <view class="close-btn" bindtap="closeEditDescModal">
        <text class="close-icon">✕</text>
      </view>
    </view>

    <view class="modal-body">
      <textarea class="edit-textarea"
                placeholder="请输入群描述"
                value="{{editGroupDescription}}"
                bindinput="onEditGroupDescInput"
                maxlength="200"
                auto-height
                focus="{{showEditDescModal}}" />
      <view class="input-counter">
        <text class="counter-text">{{editGroupDescription.length}}/200</text>
      </view>
    </view>

    <view class="modal-actions">
      <view class="modal-btn cancel" bindtap="closeEditDescModal">
        <text class="btn-text">取消</text>
      </view>
      <view class="modal-btn confirm" bindtap="confirmEditGroupDescription">
        <text class="btn-text">确定</text>
      </view>
    </view>
  </view>
</view>

<!-- 加载提示 -->
<view class="loading-overlay" wx:if="{{loading}}">
  <view class="loading-content">
    <view class="loading-spinner"></view>
    <text class="loading-text">{{loadingText}}</text>
  </view>
</view>
