<!--pages/wiki/index.wxml-->
<view class="wiki-page">

  <view class="wiki-scroll-area">
    <view class="search-section">
        <t-search placeholder="搜索植物名称，如：龟背竹" value="{{searchQuery}}" bind:change="onSearchInput" shape="round" />
    </view>

    <view class="category-scroll">
       <t-tag 
            wx:for="{{['全部', '观叶', '观花', '多肉']}}" 
            wx:key="*this"
            variant="{{activeCategory === item ? 'dark' : 'outline'}}" 
            theme="{{activeCategory === item ? 'primary' : 'default'}}" 
            shape="mark"
            size="medium"
            style="margin-right: 16rpx;"
            bind:tap="setCategory" 
            data-cat="{{item}}"
        >
            {{item}}
        </t-tag>
    </view>

    <view class="wiki-list">
       <view wx:for="{{displayedList}}" wx:key="id" class="wiki-card" bindtap="goToDetail" data-item="{{item}}">
          <view class="wiki-image">
             <t-image src="/assets/{{item.images[0]}}" mode="aspectFill" width="100%" height="100%" />
          </view>
          <view class="wiki-info">
             <view class="wiki-top">
                <text class="wiki-name">{{item.name}}</text>
                <text class="scientific-name">{{item.scientificName}}</text>
             </view>
             <t-tag size="small" variant="light" theme="success">{{item.category}}</t-tag>
          </view>
          <t-icon name="chevron-right" size="48rpx" color="#ccc" />
       </view>
    </view>
    
    <!-- Spacer -->
     <view style="height: 160rpx;"></view>
  </view>

  <t-fab icon="scan" text="植物识别" bind:click="openIdentifyModal" aria-label="植物识别"></t-fab>

  <!-- Identify Popup -->
  <t-popup visible="{{showIdentifyModal}}" bind:visible-change="onPopupVisibleChange" placement="bottom">
      <view class="popup-content">
         <view class="popup-header">
            <text class="popup-title">识别植物</text>
         </view>
         
         <view class="upload-options-grid">
            <view class="upload-opt-item">
               <view class="opt-icon-circle" style="background: #E8F5E9;">
                  <t-icon name="camera" size="64rpx" color="#2E7D32" />
               </view>
               <text>拍照识别</text>
            </view>
            <view class="upload-opt-item">
               <view class="opt-icon-circle" style="background: #E3F2FD;">
                  <t-icon name="image" size="64rpx" color="#1565C0" />
               </view>
               <text>从相册上传</text>
            </view>
         </view>

         <view class="popup-footer">
            <t-button block variant="outline" bind:tap="closeIdentifyModal">取消</t-button>
         </view>
      </view>
  </t-popup>
</view>
