<ion-header [translucent]="true">
  <ion-toolbar color="success">
    <ion-title color="light">
      <ion-icon name="restaurant" class="ion-align-self-center" ></ion-icon>
      营养搭配
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding">
  <ion-card class="nutritionist-card">
    <!-- Card Header with Image -->
    <div class="card-header">
      <img src="assets/lin.jpg" alt="林舒窈营养师" class="profile-image">
      <div class="header-overlay">
        <ion-card-title class="name-title">林舒窈</ion-card-title>
        <ion-card-subtitle class="professional-title">东方食养家</ion-card-subtitle>
      </div>
    </div>

    <!-- Card Content -->
    <ion-card-content class="card-content">
      <div class="specialty-tags">
        <ion-chip color="primary">
          <ion-icon name="leaf" slot="start"></ion-icon>
          中医体质食疗
        </ion-chip>
        <ion-chip color="secondary">
          <ion-icon name="flask" slot="start"></ion-icon>
          古方新作
        </ion-chip>
        <ion-chip color="tertiary">
          <ion-icon name="calendar" slot="start"></ion-icon>
          应季精准养生
        </ion-chip>
      </div>
      
      <div class="profile-section">
        <ion-icon name="school" color="medium" class="profile-icon"></ion-icon>
        <p class="profile-description">
          北京中医药大学中医学+营养学双学位，融合传统中医理论与现代营养学，
          为您定制四季养生膳食方案。
        </p>
      </div>
      
      <div class="credentials">
        <ion-item lines="none" class="credential-item">
          <ion-icon slot="start" name="library" color="success"></ion-icon>
          <ion-label >《本草厨房》作者</ion-label>
        </ion-item>
        <ion-item lines="none" class="credential-item">
          <ion-icon slot="start" name="tv" color="success"></ion-icon>
          <ion-label >央视《健康中国》嘉宾</ion-label>
        </ion-item>
      </div>
    </ion-card-content>

    <!-- 咨询历史列表 -->
    @if(consultList?.length){
      <ion-list class="consult-history">
        <ion-list-header>
          <ion-label>历史咨询记录</ion-label>
        </ion-list-header>
        @for(consult of consultList; track consult){
          <ion-item button (click)="openConsult(consult.get('chatId'))" class="consult-item">
            <ion-avatar slot="start">
              @if(consult.get('avatar')){
                <img [src]="consult.get('avatar')" alt="用户头像">
              } @else {
                <ion-icon name="person-circle" class="default-avatar"></ion-icon>
              }
            </ion-avatar>
            <ion-label>
              <h3>{{consult.get('name') || '无名氏'}}</h3>
              <p>{{consult.updatedAt | date: 'yyyy-MM-dd HH:mm'}}</p>
            </ion-label>
            <ion-icon slot="end" name="chevron-forward" color="medium"></ion-icon>
          </ion-item>
        }
      </ion-list>
    }
    
    <!-- Card Footer with Button -->
    <ion-footer class="card-footer">
      <ion-grid>
        <ion-row>
          <ion-col size="12">
            <ion-button (click)="openConsult()" expand="block" color="success" class="consult-button">
              <ion-icon name="chatbubbles" slot="start" color = "light"></ion-icon>
              <p color = "white">立即咨询</p>
            </ion-button>
          </ion-col>
          @if(!consultList?.length){
            <ion-col size="12">
              <ion-button (click)="loadConsult()" expand="block" fill="outline" color="medium">
                <ion-icon name="time" slot="start"></ion-icon>
                查看历史记录
              </ion-button>
            </ion-col>
          }
        </ion-row>
      </ion-grid>
    </ion-footer>
  </ion-card>
</ion-content>