<ion-header sticky>
  <ion-toolbar>
    <ion-segment [(ngModel)]="selectedTab" color="primary" class="custom-segment">
      <ion-segment-button value="checkin">
        <ion-icon aria-hidden="true" name="calendar"></ion-icon>
        打卡
      </ion-segment-button>
      <ion-segment-button value="plan">
        <ion-icon name="checkmark-circle" aria-hidden="true"></ion-icon>
        计划
      </ion-segment-button>
      <ion-segment-button value="consultation">
        <ion-icon name="help-circle" aria-hidden="true"></ion-icon>
        问诊
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <div style="height: 56px;"></div>

  <!-- 打卡 -->
  <div *ngIf="selectedTab === 'checkin'" class="checkin-container">
    <ion-card>
      <ion-card-header>
        <ion-card-title>今天的打卡任务</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <p>在这里打卡，开始你的一天健身之旅吧！</p>
      </ion-card-content>
    </ion-card>
    <ion-card>
      <!-- 未登录 -->
      @if(!currentUser?.id){
      <ion-card-header>
        <ion-card-title>请登录</ion-card-title>
        <ion-card-subtitle>暂无信息</ion-card-subtitle>
      </ion-card-header>
      }
      <!-- 未登录 -->
      @if(currentUser?.id){
      <ion-card-header>
        <ion-card-title>{{currentUser?.get("username")}} {{currentUser?.get("realname")}}</ion-card-title>
        <ion-card-subtitle>性别:{{currentUser?.get("gender")||"-"}} 年龄:{{currentUser?.get("age")||"-"}}
        </ion-card-subtitle>
      </ion-card-header>
      }
      <ion-card-content>
        @if(!currentUser?.id){
        <ion-button expand="block" (click)="signup()">注册</ion-button>
        <ion-button expand="block" (click)="login()">登录</ion-button>
        }
        @if(currentUser?.id){
        <ion-button expand="block" (click)="editUser()">编辑资料</ion-button>
        <ion-button expand="block" (click)="logout()" color="light">登出</ion-button>
        }
      </ion-card-content>
    </ion-card>
  </div>

  <!-- 计划 -->
  <div *ngIf="selectedTab === 'plan'" class="plan-container">
    <ion-card>
      <ion-card-header>
        <ion-card-title>我的本周计划</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <div class="plan-table">
          <ion-grid class="table">
            <ion-row>
              <ion-col size="1" class="grid-header">日期</ion-col>
              <ion-col size="1" class="grid-header">部位</ion-col>
              <ion-col size="1.5" class="grid-header">项目1</ion-col>
              <ion-col size="1.5" class="grid-header">项目2</ion-col>
              <ion-col size="1.5" class="grid-header">项目3</ion-col>
              <ion-col size="1.5" class="grid-header">项目4</ion-col>
              <ion-col size="1.5" class="grid-header">状态</ion-col>
              <ion-col size="2" class="grid-header">操作</ion-col> <!-- 操作列 -->
            </ion-row>

            <!-- 绑定计划数据 -->
            <ion-row *ngFor="let day of planList">
              <ion-col size="1" class="plan-column">{{ day.get('date') }}</ion-col>
              <ion-col size="1" class="plan-column">{{ day.get('trainingPart') }}</ion-col>

              <!-- 显示每个训练项目，确保即使为空也占位 -->
              <ion-col size="1.5" *ngFor="let task of day.get('trainingItems'); let i = index" class="plan-column">
                {{ task.item || '' }}: {{task.sets}} x {{task.reps}}
              </ion-col>

              <ion-col size="1.5" class="plan-column">
                <ion-list>
                  <ion-item>
                    <ion-select aria-label="fruit" value="未完成">
                      <ion-select-option value="未完成">未完成</ion-select-option>
                      <ion-select-option value="已完成">已完成</ion-select-option>
                      <ion-select-option value="修改中">修改中</ion-select-option>
                    </ion-select>
                  </ion-item>
                </ion-list>
              </ion-col>

              <!-- 修改和删除按钮 -->
              <ion-col size="2" class="ion-text-center">
                <ion-buttons>
                  <ion-button color="success" (click)="editPlan(day)">
                    <ion-icon slot="start" name="create"></ion-icon> 修改
                  </ion-button>
                  <ion-button color="danger" (click)="deletePlan(day)">
                    <ion-icon slot="start" name="trash"></ion-icon> 删除
                  </ion-button>
                </ion-buttons>
              </ion-col>
            </ion-row>
          </ion-grid>
        </div>

        <ion-button expand="full" color="primary" (click)="goToPage('test-page')">重新生成计划</ion-button>
      </ion-card-content>
    </ion-card>
  </div>

  <!-- 问诊 -->
  <div *ngIf="selectedTab === 'consultation'" class="consult">
    <!-- 健康问诊卡片 -->
    <ion-card>
      <ion-card-header>
        <ion-card-title>健康问诊</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <p>有任何不适，可以随时询问！</p>

        <!-- 健身建议和疼痛咨询左右分布 -->
        <ion-row>
          <!-- 健身建议 -->
          <ion-col size="6" class="ion-text-center">
            <ion-img src="../../assets/images/action.png" alt="健身建议"></ion-img>
            <ion-button expand="full" color="secondary" (click)="doPoemTask()">生成健身动作</ion-button>
          </ion-col>

          <!-- 疼痛咨询 -->
          <ion-col size="6" class="ion-text-center">
            <ion-img src="../../assets/images/ache.jpg" alt="疼痛咨询"></ion-img>
            <ion-button expand="full" color="tertiary" (click)="doInqueryTask()">疼？点这里！</ion-button>
          </ion-col>
        </ion-row>

        <!-- 任务区域 -->
        <ion-card>
          <ion-card-header>
            <ion-card-title>健康任务</ion-card-title>
          </ion-card-header>
          <ion-card-content>
            <div *ngFor="let step of taskList">
              <ion-item>
                <!-- 待开始 -->
                <ion-icon *ngIf="step.progress === 0 && !step.error" name="radio-button-off-outline"></ion-icon>
                <!-- 进行中 -->
                <ion-icon *ngIf="step.progress !== 0 && step.progress !== 1" name="reload-outline"></ion-icon>
                <!-- 已完成 -->
                <ion-icon *ngIf="step.progress === 1" name="checkmark-circle-outline"></ion-icon>
                <!-- 已出错 -->
                <ion-icon *ngIf="step.error" name="close-circle-outline"></ion-icon>
                {{ step.title }}
                <span *ngIf="step.progress">{{ step.progress * 100 | number:'2.0-0' }}%</span>
                <span *ngIf="step.error" style="color:red;">{{ step.error }}</span>
              </ion-item>
            </div>
          </ion-card-content>
        </ion-card>

        <!-- 图片展示 -->
        <ion-card *ngIf="shareData.images">
          <ion-card-header>
            <ion-card-title>动作展示</ion-card-title>
          </ion-card-header>
          <ion-card-content>
            <div *ngFor="let imageUrl of shareData.images">
              <img [src]="imageUrl" alt="诊断图片" style="width: 100%; height: 400px; object-fit: cover;" />
            </div>
          </ion-card-content>
        </ion-card>

        <!-- 诊断结果 -->
        <ion-card *ngIf="shareData.diagResult">
          <ion-card-header>
            <ion-card-title>{{ shareData.diagResult.title }}</ion-card-title>
          </ion-card-header>
          <ion-card-content>
            <h2>{{ shareData.diagResult.desc }}</h2>
            <fm-markdown-preview class="content-style" [content]=shareData.diagResult.content>
            </fm-markdown-preview>
          </ion-card-content>
        </ion-card>

        <!-- AI教练互动 -->
        <ion-card>
          <ion-card-header>
            <ion-card-title>顶级教练专区</ion-card-title>
            <ion-card-subtitle>教练简介</ion-card-subtitle>
          </ion-card-header>
          <ion-card-content>
            <ion-list>
              <ion-item (click)="openInquiry(coach)" *ngFor="let coach of coachList" lines="none">
                <ion-thumbnail slot="start">
                  <img src="../../assets/images/coach1.jpg" alt="coach.get('name')">
                </ion-thumbnail>
                <div class="coach-info">
                  <h3>{{ coach.get('name') }}({{ coach.get('age') }}岁)</h3>
                  <p>擅长领域：{{ coach.get('specialize')}}</p>
                  <p>WiseFitness俱乐部</p>
                </div>
              </ion-item>
            </ion-list>
          </ion-card-content>
        </ion-card>
      </ion-card-content>
    </ion-card>
  </div>
</ion-content>