<ion-header>
  <ion-toolbar color="primary">
    <ion-title>农业知识库</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="toggleFontSize()">
        <ion-icon [name]="isLargeFont ? 'text' : 'text-outline'"></ion-icon>
      </ion-button>
      <ion-button (click)="refreshData()">
        <ion-icon name="refresh"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>

  <ion-toolbar class="search-toolbar">
    <ion-searchbar 
      [(ngModel)]="searchQuery" 
      placeholder="搜索病虫害或种植技术..."
      (ionChange)="onSearch()"
      animated>
    </ion-searchbar>
    <ion-button fill="clear" slot="end" (click)="startVoiceSearch()">
      <ion-icon name="mic"></ion-icon>
    </ion-button>
  </ion-toolbar>
</ion-header>

<ion-content [class.large-font]="isLargeFont">
  <!-- 分类导航 -->
  <div class="category-container">
    <ion-segment [(ngModel)]="currentCategory" (ionChange)="filterByCategory()">
      <ion-segment-button *ngFor="let cat of categories" [value]="cat.id">
        <ion-icon [name]="cat.icon"></ion-icon>
        <ion-label>{{ cat.name }}</ion-label>
      </ion-segment-button>
    </ion-segment>
  </div>

  <!-- 专家在线咨询卡片 -->
  <ion-card class="expert-card">
    <ion-card-header>
      <div class="expert-card-header">
        <div>
          <ion-card-title>👨🌾 专家在线咨询</ion-card-title>
          <ion-card-subtitle>立即连线农业专家解答疑难</ion-card-subtitle>
        </div>
        <div class="expert-card-actions">
          <ion-button 
            *ngIf="consultList.length > 0"
            fill="solid" 
            color="primary"
            size="small"
            (click)="clearAllChatRecords()">
            <ion-icon name="trash" slot="start"></ion-icon>
            清空聊天记录
          </ion-button>
        </div>
      </div>
    </ion-card-header>

    <!-- 历史咨询记录 - 已修复部分 -->
    <ion-list *ngIf="consultList.length">
      <ion-item-sliding *ngFor="let consult of consultList">
        <ion-item (click)="viewChatDetail(consult.get('chatId'))">
          <ion-avatar slot="start">
            <img [src]="consult.get('avatar')">
          </ion-avatar>
          
          <ion-label>
            <h2>{{ consult.get('agentName') }}</h2>
            <p>{{ consult.get('lastMessage') | slice:0:30 }}...</p>
            <p>{{ consult.get('lastMessageTime') | date:'yyyy-MM-dd HH:mm' }}</p>
          </ion-label>
          
          <ion-badge slot="end">{{ consult.get('messageCount') }}</ion-badge>
        </ion-item>
        
        <ion-item-options side="end">
          <ion-item-option color="danger" (click)="deleteChatRecord(consult.get('chatId'))">
            <ion-icon slot="icon-only" name="trash"></ion-icon>
          </ion-item-option>
        </ion-item-options>
      </ion-item-sliding>
    </ion-list>

    <ion-card-content>
      <div class="expert-list">
        <div class="expert-item" *ngFor="let expert of onlineExperts">
          <ion-avatar>
            <img [src]="expert.avatar">
          </ion-avatar>
          <div class="expert-info">
            <h3>{{ expert.name }}</h3>
            <p>{{ expert.specialty }}</p>
          </div>
          <ion-button (click)="openConsult()" fill="clear" size="small">
            <ion-icon name="chatbubble-ellipses"></ion-icon>
          </ion-button>
        </div>
      </div>
    </ion-card-content>
  </ion-card>

  <!-- 知识卡片列表 -->
  <div class="knowledge-grid">
    <ion-card *ngFor="let item of filteredKnowledge" 
              [class.emergency]="item.isEmergency"
              (click)="navigateToDetail(item)">
      <ion-badge *ngIf="item.tag" [color]="getTagColor(item.tag)">
        {{ getTagLabel(item.tag) }}
      </ion-badge>
      <ion-img [src]="item.image"></ion-img>
      <ion-card-header>
        <ion-card-title>{{ item.title }}</ion-card-title>
        <ion-card-subtitle>
          <ion-icon name="time"></ion-icon>
          {{ item.duration || '2分钟阅读' }}
        </ion-card-subtitle>
      </ion-card-header>
      <ion-card-content>
        {{ item.summary }}
      </ion-card-content>
      <ion-footer *ngIf="item.type === 'video'">
        <ion-button fill="clear">
          <ion-icon name="play" slot="start"></ion-icon>
          播放视频
        </ion-button>
      </ion-footer>
    </ion-card>
  </div>

  <!-- 空状态 -->
  <div class="empty-state" *ngIf="filteredKnowledge.length === 0">
    <ion-icon name="book"></ion-icon>
    <h3>未找到相关知识点</h3>
    <p>尝试更换筛选条件或搜索其他关键词</p>
    <ion-button fill="outline" (click)="resetFilters()">重置筛选</ion-button>
  </div>
</ion-content>