<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button text="返回" (click)="back()">返回</ion-button>
    </ion-buttons>
    <ion-title>{{bird?.get("commonName") || '鸟类详情'}}</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
  <div *ngIf="bird" class="bird-detail-container">
    <!-- 头部卡片 -->
    <ion-card class="header-card">
      <ion-card-header>
        <ion-card-title class="ion-text-center">
          {{bird.get("commonName")}}
          <small class="scientific-name">{{bird.get("scientificName")}}</small>
        </ion-card-title>
      </ion-card-header>

      <ion-card-content>
        <div class="conservation-status" [class.endangered]="bird.get('isEndangered')">
          {{bird.get("conservationStatus")}}
        </div>
        <p class="description">{{bird.get("description")}}</p>
      </ion-card-content>
    </ion-card>

    <!-- 基本信息网格 -->
    <ion-grid class="info-grid">
      <ion-row>
        <ion-col size="6">
          <ion-item>
            <ion-label>平均体重</ion-label>
            <ion-note slot="end">{{bird.get("avgWeight")}} kg</ion-note>
          </ion-item>
        </ion-col>
        <ion-col size="6">
          <ion-item>
            <ion-label>平均体长</ion-label>
            <ion-note slot="end">{{bird.get("avgLength")}} cm</ion-note>
          </ion-item>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col size="6">
          <ion-item>
            <ion-label>翼展</ion-label>
            <ion-note slot="end">{{bird.get("wingspan")}} cm</ion-note>
          </ion-item>
        </ion-col>
        <ion-col size="6">
          <ion-item>
            <ion-label>寿命</ion-label>
            <ion-note slot="end">{{bird.get("lifespan")}} 年</ion-note>
          </ion-item>
        </ion-col>
      </ion-row>
    </ion-grid>

    <!-- 栖息地与分布 -->
    <ion-card>
      <ion-card-header>
        <ion-card-title>栖息地与分布</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <p><strong>栖息地:</strong> {{bird.get("habitat")}}</p>
        <p><strong>分布范围:</strong> {{bird.get("distributionRange")}}</p>
        <p><strong>迁徙模式:</strong> {{bird.get("migrationPattern")}}</p>
      </ion-card-content>
    </ion-card>

    <!-- 饮食习性 -->
    <ion-card>
      <ion-card-header>
        <ion-card-title>饮食习性</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <p>{{bird.get("diet")}}</p>
      </ion-card-content>
    </ion-card>

    <!-- 繁殖信息 -->
    <ion-card>
      <ion-card-header>
        <ion-card-title>繁殖信息</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <ion-grid>
          <ion-row>
            <ion-col size="6">
              <ion-item>
                <ion-label>繁殖季节</ion-label>
                <ion-note slot="end">{{bird.get("breedingSeason")}}</ion-note>
              </ion-item>
            </ion-col>
            <ion-col size="6">
              <ion-item>
                <ion-label>每窝卵数</ion-label>
                <ion-note slot="end">{{bird.get("clutchSize")}}</ion-note>
              </ion-item>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col>
              <ion-item>
                <ion-label>孵化期</ion-label>
                <ion-note slot="end">{{bird.get("incubationPeriod")}} 天</ion-note>
              </ion-item>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-card-content>
    </ion-card>

    <!-- 行为特征 -->
    <ion-card>
      <ion-card-header>
        <ion-card-title>行为特征</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <p><strong>叫声:</strong> {{bird.get("vocalization")}}</p>
        <p><strong>行为:</strong> {{bird.get("behaviorNotes")}}</p>
      </ion-card-content>
    </ion-card>

    <!-- 识别特征 -->
    <ion-card>
      <ion-card-header>
        <ion-card-title>识别特征</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <p>{{bird.get("identificationTips")}}</p>
        <p *ngIf="bird.get('similarSpecies')?.length > 0">
          <strong>相似物种:</strong> {{bird.get("similarSpecies").join('、')}}
        </p>
      </ion-card-content>
    </ion-card>
  </div>

  <!-- 加载状态 -->
  <div *ngIf="!bird" class="loading-container">
    <ion-spinner name="crescent"></ion-spinner>
    <p>加载中...</p>
  </div>
</ion-content>