<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      饮食计划生成
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <!-- 用户输入饮食目标 -->
  <ion-item>
    <ion-label position="floating">饮食目标</ion-label>
    <ion-input [(ngModel)]="dietGoal"></ion-input>
  </ion-item>

  <!-- 用户输入食物忌口 -->
  <ion-item>
    <ion-label position="floating">食物忌口</ion-label>
    <ion-input [(ngModel)]="foodRestrictions"></ion-input>
  </ion-item>

  <!-- 用户输入详细需求 -->
  <ion-item>
    <ion-label position="floating">详细需求</ion-label>
    <ion-textarea [(ngModel)]="detailedRequirements" autoGrow="true"></ion-textarea>
  </ion-item>

  <!-- 用户输入饮食偏好 -->
  <ion-item>
    <ion-label position="floating">饮食偏好</ion-label>
    <ion-input [(ngModel)]="dietPreference"></ion-input>
  </ion-item>

  <!-- 用户输入饮食计划时长 -->
  <ion-item>
    <ion-label position="floating">饮食计划时长</ion-label>
    <ion-input [(ngModel)]="dietDuration" type="number"></ion-input>
  </ion-item>

  <!-- 用户输入需求 -->
  <ion-textarea 
    [value]="userPrompt" 
    (ionInput)="promptInput($event)" 
    autoGrow="true"
    class="user-input-textarea"
  ></ion-textarea>

  <!-- 按钮：生成饮食计划 -->
  <ion-button expand="block" (click)="sendMessage()" class="generate-button">
    生成饮食计划
  </ion-button>

  <!-- 显示生成的饮食计划 -->
  <div *ngIf="responseMsg" class="response-container">
    <h2>饮食计划</h2>
    <p><strong>目标：</strong>{{ responseMsg.goal }}</p>
    <p><strong>偏好：</strong>{{ responseMsg.preference }}</p>
    <p><strong>时长：</strong>{{ responseMsg.duration }} 天</p>
    <p><strong>忌口：</strong>{{ responseMsg.foodRestrictions }}</p>
    <p><strong>需求：</strong>{{ responseMsg.detailedRequirements }}</p>

    <!-- 遍历每个餐食并展示 -->
    <div class="meal-plan" *ngFor="let meal of responseMsg.meals">
      <h3>{{ meal.type }}</h3>
      <ul>
        <li *ngFor="let item of meal.foods">
          <strong>{{ item.food }}</strong>: {{ item.quantity }} ({{ item.calories }} kcal)
        </li>
      </ul>
    </div>
  </div>
</ion-content>
