<!-- src/app/tab5/tab5.page.html -->
<ion-header>
  <ion-toolbar>
    <ion-title>智能锻炼</ion-title>
    <ion-buttons slot="end">
      <ion-button>
        <ion-icon name="fitness" slot="icon-only"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <!-- 地图容器 -->
  <div class="map-container">
    <div class="map-overlay">
      <div class="map-grid">
        <div class="road horizontal"></div>
        <div class="road vertical"></div>
        <div class="current-location">
          <ion-icon name="locate" class="pulse"></ion-icon>
        </div>
        <div class="gym-marker">
          <ion-icon name="barbell"></ion-icon>
        </div>
        <div class="running-path"></div>
      </div>
    </div>
    <div class="map-controls">
      <ion-chip>1:500</ion-chip>
      <ion-button size="small">
        <ion-icon name="navigate"></ion-icon>
      </ion-button>
    </div>
  </div>

  <!-- 状态栏 -->
  <div class="status-bar">
    <ion-chip color="primary">增肌模式</ion-chip>
    <ion-chip color="secondary">{{ currentLocation }}</ion-chip>
  </div>

  <!-- 实时数据仪表盘 -->
  <ion-grid class="dashboard">
    <ion-row>
      <ion-col size="4">
        <div class="metric-card">
          <div class="value">{{ currentTime }}</div>
          <div class="label">训练时间</div>
        </div>
      </ion-col>
      <ion-col size="4">
        <div class="metric-card heart">
          <div class="value">{{ heartRate }}<small>bpm</small></div>
          <div class="label">实时心率</div>
        </div>
      </ion-col>
      <ion-col size="4">
        <div class="metric-card">
          <div class="value">{{ activeCalorie + basalCalorie }}</div>
          <div class="label">千卡消耗</div>
        </div>
      </ion-col>
    </ion-row>
  </ion-grid>

  <!-- 训练计划 -->
  <ion-list lines="none">
    <ion-list-header>
      <h2>今日训练计划</h2>
      <ion-note>完成度 {{ getTotalProgress() }}%</ion-note>
    </ion-list-header>
    
    <ion-item *ngFor="let ex of exercises">
      <ion-thumbnail slot="start">
        <div class="progress-ring" [style.--progress]="ex.progress + '%'">
          {{ ex.progress }}%
        </div>
      </ion-thumbnail>
      <ion-label>
        <h3>{{ ex.name }}</h3>
        <p>{{ ex.duration }} | 主要肌群: {{ ex.muscle }}</p>
      </ion-label>
      <div slot="end">
        <!-- 控制按钮组 -->
        <ion-button *ngIf="!isRunning" 
                   (click)="startWorkout()" 
                   fill="solid"
                   color="success">
          开始训练
        </ion-button>
        
        <div *ngIf="isRunning" class="control-buttons">
          <ion-button (click)="isPaused ? resumeWorkout() : pauseWorkout()" 
                     [color]="isPaused ? 'success' : 'warning'">
            <ion-icon slot="start" 
                     [name]="isPaused ? 'play' : 'pause'"></ion-icon>
            {{ isPaused ? '继续' : '暂停' }}
          </ion-button>
          <ion-button (click)="endWorkout()" color="danger">
            <ion-icon slot="start" name="stop"></ion-icon>
            结束
          </ion-button>
        </div>
      </div>
    </ion-item>
  </ion-list>

  <!-- AI警告 -->
  <div class="risk-alert" *ngIf="showAlert">
    <ion-icon name="warning" color="danger"></ion-icon>
    <span class="alert-message">{{ alertMessage }}</span>
  </div>
</ion-content>