<ion-header>
  <ion-toolbar color="primary">
    <ion-title>个性化训练计划生成器</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="resetForm()">
        <ion-icon slot="icon-only" name="refresh"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <div class="form-container">
    <ion-item>
      <ion-textarea label="您的训练目标" labelPlacement="floating" placeholder="例如: 增肌、减脂、提高耐力等" [(ngModel)]="userGoal"
        [disabled]="isLoading" rows="3" autoGrow="true"></ion-textarea>
    </ion-item>

    <ion-item>
      <ion-select label="您的健身水平" [(ngModel)]="fitnessLevel" [disabled]="isLoading">
        <ion-select-option *ngFor="let level of fitnessLevels" [value]="level.value">
          {{level.label}}
        </ion-select-option>
      </ion-select>
    </ion-item>

    <ion-item>
      <ion-range label="每周可训练天数: {{availableDays}}天" [(ngModel)]="availableDays" [disabled]="isLoading" min="1" max="7"
        snaps="true"></ion-range>
    </ion-item>

    <ion-item>
      <ion-range label="每次训练时间: {{availableTime}}分钟" [(ngModel)]="availableTime" [disabled]="isLoading" min="15"
        max="120" step="5"></ion-range>
    </ion-item>

    <ion-button expand="block" color="primary" (click)="generatePlan()" [disabled]="isLoading || !userGoal.trim()">
      <ion-spinner *ngIf="isLoading" name="lines"></ion-spinner>
      <span *ngIf="!isLoading">生成训练计划</span>
    </ion-button>
  </div>

  <ion-card class="ai-response-card" *ngIf="aiContent">
    <ion-card-header>
      <ion-card-title>
        <ion-icon name="barbell-outline"></ion-icon>
        您的个性化训练计划
      </ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <div class="ai-content">
        @if(!isPlanGenerated){
        <div [innerHTML]="aiContent"></div>
        }
        @if(isPlanGenerated){
        <fm-markdown-preview class="content-style" [content]="aiContent"></fm-markdown-preview>
        }
      </div>
    </ion-card-content>
  </ion-card>
</ion-content>