<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>健身教练AI</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <!-- 主菜单视图 -->
  <div *ngIf="!currentSession; else chatView" class="menu-container">
    <ion-list>
      <ion-list-header>
        <ion-label>选择训练类型</ion-label>
      </ion-list-header>
      
      <ion-item button (click)="startNewSession('strength')">
        <ion-icon name="barbell" slot="start"></ion-icon>
        <ion-label>力量训练指导</ion-label>
      </ion-item>
      
      <ion-item button (click)="startNewSession('cardio')">
        <ion-icon name="walk" slot="start"></ion-icon>
        <ion-label>有氧运动指导</ion-label>
      </ion-item>
      
      <ion-item button (click)="startNewSession('nutrition')">
        <ion-icon name="nutrition" slot="start"></ion-icon>
        <ion-label>营养饮食建议</ion-label>
      </ion-item>
    </ion-list>
    
    <ion-list *ngIf="pastSessions.length > 0">
      <ion-list-header>
        <ion-label>历史会话</ion-label>
      </ion-list-header>
      
      <ion-item button *ngFor="let session of pastSessions" (click)="restoreSession(session.id)">
        <ion-icon [name]="getSessionIcon(session.type)" slot="start"></ion-icon>
        <ion-label>
          <h2>{{getSessionTitle(session.type)}}</h2>
          <p>{{session.lastActive | date:'short'}}</p>
        </ion-label>
      </ion-item>
    </ion-list>
  </div>
  
  <!-- 聊天视图 -->
  <ng-template #chatView>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-button (click)="endSession()">
          <ion-icon name="arrow-back"></ion-icon>
        </ion-button>
      </ion-buttons>
      <ion-title>{{getSessionTitle(currentSession.type)}}</ion-title>
    </ion-toolbar>
    
    <!-- 添加消息容器 -->
    <ion-content>
      <div class="chat-container">
        <div *ngFor="let msg of messages" class="message"
             [class.user-message]="msg.isUser"
             [class.coach-message]="!msg.isUser">
          <div class="message-content">{{msg.content}}</div>
          <div class="message-time">{{msg.time}}</div>
        </div>
      </div>
      
      <!-- 添加输入框 -->
      <ion-footer>
        <ion-toolbar>
          <ion-item>
            <ion-input [(ngModel)]="newMessage" placeholder="输入消息..."></ion-input>
            <ion-button slot="end" (click)="sendMessage()">发送</ion-button>
          </ion-item>
        </ion-toolbar>
      </ion-footer>
    </ion-content>
    
    <ion-footer>
      <ion-toolbar>
        <ion-item>
          <ion-input [(ngModel)]="newMessage" placeholder="输入您的问题..." (keyup.enter)="sendMessage()"></ion-input>
          <ion-button slot="end" fill="clear" (click)="sendMessage()">
            <ion-icon name="send"></ion-icon>
          </ion-button>
        </ion-item>
      </ion-toolbar>
    </ion-footer>
  </ng-template>
</ion-content>