<!--pages/support/support.wxml-->
<view class="page-container">
  <!-- 状态栏 -->
  <view class="status-bar-area">
    <view class="status-bar" style="height: {{statusBarHeight}}px;"></view>
  </view>

  <!-- 顶部导航栏 -->
  <view class="nav-header" style="top: {{statusBarHeight}}px;">
    <view class="nav-content">
      <!-- 返回按钮 -->
      <view class="nav-back" bindtap="onBack">
        <image src="/images/icon-back-arrow.png" class="back-icon" mode="aspectFit"></image>
        <text class="back-text">返回</text>
      </view>
      
      <!-- 中间角色信息 -->
      <view class="nav-center">
        <view class="nav-avatar-wrap">
          <image class="nav-avatar" src="/images/icon-headphones.png" mode="aspectFit"></image>
        </view>
        <text class="nav-name">在线客服</text>
        <view class="online-dot"></view>
      </view>
      
      <!-- 右侧占位 -->
      <view class="nav-right-placeholder"></view>
    </view>
  </view>

  <!-- 聊天内容区域 -->
  <view class="chat-area-wrapper" style="top: {{navHeight + statusBarHeight}}px;" bindtap="onTapChatArea">
    <scroll-view 
      scroll-y 
      class="chat-scroll"
      scroll-into-view="{{scrollIntoView}}"
      scroll-with-animation="{{true}}"
      enhanced="{{true}}"
      show-scrollbar="{{false}}"
      scroll-top="{{scrollTop}}"
    >
      <!-- 咨询说明提示 -->
      <view class="encrypt-hint">
        <text>您正在与人工客服对话，我们将尽快回复</text>
      </view>

      <!-- 聊天消息列表 -->
      <view class="chat-list">
        <view 
          class="chat-item {{item.isMe ? 'me' : 'other'}}" 
          wx:for="{{messages}}" 
          wx:key="id"
          id="msg-{{index}}"
        >
          <!-- 客服消息（左侧） -->
          <block wx:if="{{!item.isMe}}">
            <view class="avatar-wrap">
              <image class="chat-avatar" src="/images/icon-headphones.png" mode="aspectFit"></image>
            </view>
            <view class="message-content">
              <!-- 文字消息 -->
              <view class="chat-bubble other" wx:if="{{item.type === 'text'}}">
                <text class="chat-text" decode="{{true}}">{{item.text}}</text>
              </view>
              <!-- 图片消息 -->
              <view class="chat-bubble-image other" wx:elif="{{item.type === 'image'}}">
                <image class="message-image" src="{{item.imageUrl}}" mode="widthFix" bindtap="onPreviewImage" data-url="{{item.imageUrl}}"></image>
              </view>
              <!-- 语音消息 -->
              <view class="chat-bubble voice other {{playingVoiceId === item.id ? 'playing' : ''}}" wx:elif="{{item.type === 'voice'}}" bindtap="onPlayVoice" data-id="{{item.id}}" data-url="{{item.audioUrl}}">
                <view class="voice-waves">
                  <view class="voice-wave-bar"></view>
                  <view class="voice-wave-bar"></view>
                  <view class="voice-wave-bar"></view>
                </view>
                <text class="voice-duration">{{item.duration || 1}}″</text>
              </view>
              <view class="message-actions">
                <text class="message-time">{{item.time}}</text>
              </view>
            </view>
          </block>
          
          <!-- 用户消息（右侧） -->
          <block wx:else>
            <view class="message-content me">
              <!-- 文字消息 -->
              <view class="chat-bubble me" wx:if="{{item.type === 'text'}}">
                <text class="chat-text" decode="{{true}}">{{item.text}}</text>
              </view>
              <!-- 图片消息 -->
              <view class="chat-bubble-image me" wx:elif="{{item.type === 'image'}}">
                <image class="message-image" src="{{item.imageUrl}}" mode="widthFix" bindtap="onPreviewImage" data-url="{{item.imageUrl}}"></image>
              </view>
              <!-- 语音消息 -->
              <view class="chat-bubble voice me {{playingVoiceId === item.id ? 'playing' : ''}}" wx:elif="{{item.type === 'voice'}}" bindtap="onPlayVoice" data-id="{{item.id}}" data-url="{{item.audioUrl}}">
                <text class="voice-duration">{{item.duration || 1}}″</text>
                <view class="voice-waves">
                  <view class="voice-wave-bar"></view>
                  <view class="voice-wave-bar"></view>
                  <view class="voice-wave-bar"></view>
                </view>
              </view>
              <text class="message-time">{{item.time}}</text>
            </view>
            <view class="avatar-wrap user-avatar">
              <image class="chat-avatar" src="{{myAvatar}}" mode="aspectFill" binderror="onAvatarError"></image>
            </view>
          </block>
        </view>
        
        <!-- 正在输入提示 -->
        <view class="chat-item other" wx:if="{{isTyping}}">
          <view class="avatar-wrap">
            <image class="chat-avatar" src="/images/icon-headphones.png" mode="aspectFit"></image>
          </view>
          <view class="message-content">
            <view class="chat-bubble other typing">
              <view class="typing-dot"></view>
              <view class="typing-dot"></view>
              <view class="typing-dot"></view>
            </view>
          </view>
        </view>
      </view>
      
      <view class="chat-bottom-space"></view>
      <view id="chat-bottom-anchor"></view>
    </scroll-view>
  </view>

  <!-- 面板打开时的透明遮罩层 -->
  <view class="panel-overlay" wx:if="{{showEmoji || showMorePanel}}" bindtap="onClosePanels"></view>

  <!-- 底部输入区域 -->
  <view class="bottom-input-area {{showEmoji || showMorePanel ? 'panel-open' : ''}}">
    <view class="input-container figma-input-container">
      <!-- 语音/键盘切换按钮 -->
      <view class="figma-voice-btn" bindtap="onVoiceMode">
        <image src="{{isVoiceMode ? '/images/icon-keyboard.png' : '/images/chat-input-voice.png'}}" class="figma-btn-icon" mode="aspectFit"></image>
      </view>
      
      <!-- 语音模式：按住说话按钮 -->
      <view 
        wx:if="{{isVoiceMode}}"
        class="voice-record-btn {{isRecording ? 'recording' : ''}}"
        bindtouchstart="onVoiceTouchStart"
        bindtouchmove="onVoiceTouchMove"
        bindtouchend="onVoiceTouchEnd"
        bindtouchcancel="onVoiceTouchCancel"
      >
        <text>{{isRecording ? (voiceCancelHint ? '松开 取消' : '松开 发送') : '按住 说话'}}</text>
      </view>
      
      <!-- 文字模式：输入框 -->
      <view wx:else class="figma-input-wrap">
        <input 
          class="figma-text-input" 
          placeholder="请输入您要咨询的问题..."
          value="{{inputText}}"
          bindinput="onInput"
          confirm-type="send"
          bindconfirm="onSend"
          focus="{{inputFocus}}"
          adjust-position="{{!showEmoji}}"
          hold-keyboard="{{true}}"
        />
      </view>
      
      <!-- 表情按钮 -->
      <view class="figma-emoji-btn {{showEmoji ? 'active' : ''}}" bindtap="onEmojiToggle">
        <image src="{{showEmoji ? '/images/icon-keyboard.png' : '/images/chat-input-emoji.png'}}" class="figma-btn-icon" mode="aspectFit"></image>
      </view>
      
      <!-- 发送/更多按钮 -->
      <view class="figma-send-btn" wx:if="{{inputText.length > 0 && !isVoiceMode}}" bindtap="onSend">
        <image src="/images/icon-send.png" class="figma-btn-icon" mode="aspectFit"></image>
      </view>
      <view class="figma-add-btn {{showMorePanel ? 'active' : ''}}" wx:else bindtap="onAddMore">
        <image src="/images/chat-input-plus.png" class="figma-btn-icon" mode="aspectFit"></image>
      </view>
    </view>
    
    <!-- 表情面板 -->
    <view class="emoji-panel" wx:if="{{showEmoji}}">
      <scroll-view scroll-y class="emoji-scroll">
        <view class="emoji-grid">
          <view 
            class="emoji-item" 
            wx:for="{{emojis}}" 
            wx:key="*this"
            data-emoji="{{item}}"
            bindtap="onEmojiSelect"
          >
            <text class="emoji-text">{{item}}</text>
          </view>
        </view>
      </scroll-view>
    </view>
    
    <!-- 更多功能面板 -->
    <view class="more-panel" wx:if="{{showMorePanel}}">
      <view class="more-panel-content">
        <view class="more-grid ai-chat-grid">
          <!-- 照片 -->
          <view class="more-item" bindtap="onChooseImage">
            <view class="more-icon-wrap figma-style">
              <image class="figma-action-icon" src="/images/chat-action-photo.png" mode="aspectFit"></image>
            </view>
            <text class="more-text">照片</text>
          </view>
          <!-- 拍摄 -->
          <view class="more-item" bindtap="onTakePhoto">
            <view class="more-icon-wrap figma-style">
              <image class="figma-action-icon" src="/images/chat-action-camera.png" mode="aspectFit"></image>
            </view>
            <text class="more-text">拍摄</text>
          </view>
        </view>
      </view>
      <!-- 底部安全区域 -->
      <view class="more-panel-safe"></view>
    </view>
  </view>
  
  <!-- 语音录制提示浮层 -->
  <view class="voice-recording-mask" wx:if="{{isRecording}}">
    <view class="voice-recording-popup {{voiceCancelHint ? 'cancel' : ''}}">
      <view class="voice-wave" wx:if="{{!voiceCancelHint}}">
        <view class="wave-bar"></view>
        <view class="wave-bar"></view>
        <view class="wave-bar"></view>
        <view class="wave-bar"></view>
        <view class="wave-bar"></view>
      </view>
      <image wx:else class="cancel-icon" src="/images/icon-close.png" mode="aspectFit"></image>
      <text class="voice-tip">{{voiceCancelHint ? '松开手指，取消发送' : '手指上划，取消发送'}}</text>
      <text class="voice-duration-tip" wx:if="{{!voiceCancelHint}}">{{recordingDuration}}″</text>
    </view>
  </view>
</view>
