<!--pages/wiki/chat/index.wxml-->
<view class="chat-page">
  <!-- Messages Area -->
  <scroll-view 
    class="chat-messages" 
    scroll-y 
    scroll-into-view="{{scrollAnchor}}"
    enhanced
    show-scrollbar="{{false}}"
    scroll-with-animation
  >
    <!-- Floating History Button (always visible) -->
    <view class="chat-history-float" bindtap="goToHistory" wx:if="{{messages.length > 0}}">
      <t-icon name="time" size="28rpx" color="#558B2F" />
      <text>历史记录</text>
    </view>
    <!-- Welcome -->
    <view class="welcome" wx:if="{{messages.length === 0}}">
      <view class="welcome-glow"></view>
      <view class="welcome-icon anim-float">🌿</view>
      <view class="welcome-title">植物AI百科</view>
      <view class="welcome-sub">基于知识库的智能问答助手</view>
      <view class="history-entry" bindtap="goToHistory">
        <t-icon name="time" size="32rpx" color="#558B2F" />
        <text>查看问答历史</text>
      </view>
      <view class="quick-grid">
        <view class="quick-card" bindtap="onQuickAsk" data-q="龟背竹怎么养护？">
          <text class="qc-emoji">🌱</text>
          <text class="qc-text">龟背竹怎么养护？</text>
        </view>
        <view class="quick-card" bindtap="onQuickAsk" data-q="哪些植物适合室内？">
          <text class="qc-emoji">🏠</text>
          <text class="qc-text">哪些植物适合室内？</text>
        </view>
        <view class="quick-card" bindtap="onQuickAsk" data-q="多肉浇水注意什么？">
          <text class="qc-emoji">💧</text>
          <text class="qc-text">多肉浇水注意什么？</text>
        </view>
        <view class="quick-card" bindtap="onQuickAsk" data-q="植物叶子发黄怎么办？">
          <text class="qc-emoji">🍂</text>
          <text class="qc-text">叶子发黄怎么办？</text>
        </view>
      </view>
    </view>

    <!-- Chat Bubbles -->
    <block wx:for="{{messages}}" wx:key="id">
      <view id="msg-{{item.id}}" class="msg-row {{item.role}}">
        <!-- AI avatar -->
        <view wx:if="{{item.role === 'ai'}}" class="ai-avatar-wrap">
          <text class="ai-avatar-emoji">🌱</text>
        </view>

        <view class="msg-bubble {{item.role}}">
          <!-- AI: typing state -->
          <view wx:if="{{item.role === 'ai' && !item.content}}" class="typing-wrap">
            <view class="typing-dots">
              <view class="dot"></view>
              <view class="dot"></view>
              <view class="dot"></view>
            </view>
            <text class="typing-label">思考中...</text>
          </view>
          <text wx:elif="{{item.role === 'ai'}}" class="ai-text" user-select>{{item.content}}</text>
          <!-- User text -->
          <text wx:else class="msg-text" user-select>{{item.content}}</text>
        </view>
      </view>
    </block>

    <view style="height: 32rpx;" id="scroll-bottom"></view>
  </scroll-view>

  <!-- Input -->
  <view class="input-area">
    <view class="input-row">
      <input 
        class="chat-input"
        placeholder="{{isTyping ? 'AI正在回答中...' : '问我任何植物相关的问题...'}}"
        value="{{inputValue}}"
        bindinput="onInput"
        bindconfirm="onSend"
        confirm-type="send"
        disabled="{{isTyping}}"
        adjust-position="{{true}}"
        cursor-spacing="20"
      />
      <view class="send-btn {{inputValue && !isTyping ? 'active' : ''}}" bindtap="onSend">
        <t-icon name="arrow-up" size="36rpx" color="#fff" />
      </view>
    </view>
    <view class="quota-bar" wx:if="{{quotaLimit > 0}}">
      <text class="quota-text {{quotaRemaining <= 2 ? 'warn' : ''}}">今日剩余 {{quotaRemaining}}/{{quotaLimit}} 次</text>
    </view>
    <view class="safe-bottom"></view>
  </view>
</view>
