<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>FIT智体管家</ion-title>
    <ion-buttons slot="end">
      <ion-button>
        <ion-icon slot="icon-only" name="notifications-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding" scroll-y="false">
  <ion-refresher slot="fixed" (ionRefresh)="refreshData($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>

  <div class="content-container">
    <!-- 用户状态栏 -->
    <ion-card class="user-status-card">
      <ion-card-header>
        <ion-card-title>{{getGreeting()}}，{{userData.name}}</ion-card-title>
        <ion-card-subtitle>您的健康评分: {{healthScore}}/100</ion-card-subtitle>
      </ion-card-header>
      <ion-card-content>
        <div class="health-metrics">
          <div class="metric-item">
            <div class="metric-value">{{userData.bodyFat}}%</div>
            <div class="metric-label">体脂率</div>
          </div>
          <div class="metric-item">
            <div class="metric-value">{{userData.muscleMass}}kg</div>
            <div class="metric-label">肌肉量</div>
          </div>
          <div class="metric-item">
            <div class="metric-value">{{userData.metabolism}}kcal</div>
            <div class="metric-label">基础代谢</div>
          </div>
        </div>
      </ion-card-content>
    </ion-card>

    <!-- AI管家推荐 -->
    <ion-card class="ai-recommendation-card">
      <ion-card-header>
        <ion-card-title>
          <ion-icon name="sparkles" color="primary"></ion-icon>
          AI管家建议
        </ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <ion-list lines="none">
          <ion-item *ngFor="let rec of aiRecommendations">
            <ion-icon [name]="rec.icon" slot="start" [color]="rec.type"></ion-icon>
            <ion-label>{{rec.message}}</ion-label>
          </ion-item>
        </ion-list>
      </ion-card-content>
    </ion-card>

    <!-- 功能入口 -->
    <div class="feature-grid">
      <!-- 代谢分析按钮复制三份，填充空间 -->
      <ion-button expand="block" fill="clear" class="feature-button">
        <div class="feature-icon">
          <ion-icon name="nutrition-outline"></ion-icon>
        </div>
        <div class="feature-label">代谢分析</div>
      </ion-button>
      
      <ion-button expand="block" fill="clear" class="feature-button">
        <div class="feature-icon">
          <ion-icon name="calendar-outline"></ion-icon>
        </div>
        <div class="feature-label">计划优化</div>
      </ion-button>
      
      <ion-button expand="block" fill="clear" class="feature-button">
        <div class="feature-icon">
          <ion-icon name="stats-chart-outline"></ion-icon>
        </div>
        <div class="feature-label">健康报告</div>
      </ion-button>
    </div>

    <!-- 今日训练计划 -->
    <ion-card class="training-card">
      <ion-card-header>
        <ion-card-title>
          <ion-icon name="barbell-outline" color="primary"></ion-icon>
          今日训练计划
        </ion-card-title>
        <ion-card-subtitle>第{{todayPlan.week}}周/共12周</ion-card-subtitle>
      </ion-card-header>
      <ion-card-content>
        <div class="training-content">
          <div class="training-details">
            <h3>{{todayPlan.focus}}</h3>
            <p>{{todayPlan.duration}}分钟</p>
            <ion-progress-bar [value]="0.25" color="primary"></ion-progress-bar>
            <p>下次训练: 下午4:30</p>
          </div>
          <div class="training-animation">
            <div class="animation-placeholder">
              <ion-icon name="play-circle-outline"></ion-icon>
              <p>3D动作演示</p>
            </div>
          </div>
        </div>
      </ion-card-content>
    </ion-card>

    <!-- 营养建议 -->
    <ion-card class="nutrition-card">
      <ion-card-header>
        <ion-card-title>
          <ion-icon name="restaurant-outline" color="primary"></ion-icon>
          营养建议
        </ion-card-title>
        <ion-card-subtitle>下一餐推荐</ion-card-subtitle>
      </ion-card-header>
      <ion-card-content>
        <ion-list lines="none">
          <ion-item *ngFor="let item of nutritionRecommendation.items">
            <ion-label>
              <h3>{{item.name}}</h3>
              <p>{{item.amount}}g | {{item.calories}}kcal</p>
            </ion-label>
            <ion-note slot="end">{{item.macro}}</ion-note>
          </ion-item>
        </ion-list>
        <ion-button expand="block" fill="outline" size="small">
          <ion-icon slot="start" name="camera-outline"></ion-icon>
          扫描外食
        </ion-button>
      </ion-card-content>
    </ion-card>
  </div>

  <!-- 加载指示器 -->
  <ion-loading 
    [isOpen]="isLoading" 
    message="正在准备体态扫描..."
    spinner="circles">
  </ion-loading>
</ion-content>