<view class="history-page">

  <!-- Loading -->
  <view wx:if="{{loading && records.length === 0}}" class="loading-wrap">
    <t-loading theme="circular" size="48rpx" text="加载中..." />
  </view>

  <!-- Empty -->
  <view wx:elif="{{!loading && records.length === 0}}" class="empty-wrap">
    <view class="empty-icon">
      <t-icon name="scan" size="120rpx" color="#D1D5DB" />
    </view>
    <text class="empty-title">暂无识别记录</text>
    <text class="empty-hint">去百科页面拍照识别植物吧</text>
  </view>

  <!-- Record List -->
  <view wx:else class="record-list">
    <t-swipe-cell wx:for="{{records}}" wx:key="id" class="record-swipe-cell">
        <view class="record-card" bindtap="toggleExpand" data-id="{{item.id}}">

        <!-- Card Header -->
        <view class="card-header">
            <view class="card-thumb">
            <t-image
                wx:if="{{item.topImage}}"
                src="{{item.topImage}}"
                mode="aspectFill"
                width="120rpx"
                height="120rpx"
                shape="round"
            />
            <view wx:else class="thumb-placeholder">
                <t-icon name="image" size="48rpx" color="#D1D5DB" />
            </view>
            </view>

            <view class="card-info">
            <view class="card-name-row">
                <text class="card-name">{{item.topName}}</text>
                <view class="score-badge" style="background: {{item.topScore >= 80 ? '#E8F5E9' : item.topScore >= 50 ? '#FFF8E1' : '#FBE9E7'}}; color: {{item.topScore >= 80 ? '#2E7D32' : item.topScore >= 50 ? '#F57F17' : '#D84315'}}">
                {{item.topScore}}%
                </view>
            </view>
            <text class="card-time">{{item.time}}</text>
            <view wx:if="{{item.otherResults.length > 0}}" class="other-hint">
                <text>还可能是: </text>
                <text wx:for="{{item.otherResults}}" wx:for-item="other" wx:key="name" class="other-name">{{other.name}}{{index < item.otherResults.length - 1 ? '、' : ''}}</text>
            </view>
            </view>

            <view class="expand-arrow {{expandedId === item.id ? 'expanded' : ''}}">
            <t-icon name="chevron-down" size="32rpx" color="#C5C5C5" />
            </view>
        </view>

        <!-- Expanded Detail -->
        <view wx:if="{{expandedId === item.id}}" class="card-detail">
            <!-- Description -->
            <view wx:if="{{item.topDesc}}" class="detail-desc">
            <text class="desc-text">{{item.topDesc}}</text>
            </view>

            <!-- All Results -->
            <view class="detail-results">
            <text class="detail-label">识别结果排名</text>
            <view class="result-bars">
                <!-- Top result -->
                <view class="result-bar-item">
                <text class="bar-name">{{item.topName}}</text>
                <view class="bar-track">
                    <view class="bar-fill top" style="width: {{item.topScore}}%"></view>
                </view>
                <text class="bar-score">{{item.topScore}}%</text>
                </view>
                <!-- Other results -->
                <view wx:for="{{item.otherResults}}" wx:for-item="other" wx:key="name" class="result-bar-item">
                <text class="bar-name">{{other.name}}</text>
                <view class="bar-track">
                    <view class="bar-fill" style="width: {{other.score}}%"></view>
                </view>
                <text class="bar-score">{{other.score}}%</text>
                </view>
            </view>
            </view>

            <view class="detail-meta">
            <t-icon name="time" size="24rpx" color="#9CA3AF" />
            <text class="meta-text">{{item.dateStr}}</text>
            </view>
        </view>

        </view>

        <view slot="right" class="delete-action" catchtap="deleteLog" data-id="{{item.id}}">
             <view class="delete-btn">
                <t-icon name="delete" size="40rpx" color="#fff" />
             </view>
        </view>
    </t-swipe-cell>

    <!-- Load More -->
    <view wx:if="{{loading && records.length > 0}}" class="load-more">
      <t-loading theme="circular" size="36rpx" text="加载更多..." />
    </view>
    <view wx:elif="{{!hasMore && records.length > 0}}" class="no-more">
      <text>— 没有更多了 —</text>
    </view>
  </view>

</view>
