<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/tabs/tab2"></ion-back-button>
    </ion-buttons>
    <ion-title>学习规划</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <!-- 任务进度显示 -->
  <div class="task-list">
    <div *ngFor="let task of taskList" class="task-item">
      <div class="task-header">
        <h3>{{ task.title }}</h3>
        <span class="task-status" [ngClass]="{
          'status-pending': task.progress === 0,
          'status-running': task.progress > 0 && task.progress < 1,
          'status-complete': task.progress === 1,
          'status-error': task.error
        }">
          {{ task.error ? '失败' : 
             task.progress === 0 ? '等待中' :
             task.progress === 1 ? '完成' : '进行中'
          }}
        </span>
      </div>
      
      <ion-progress-bar [value]="task.progress"></ion-progress-bar>
      
      <div *ngIf="task.error" class="task-error">
        {{ task.error }}
      </div>
    </div>
  </div>

  <!-- 最终结果显示 -->
  <div *ngIf="shareData.learningPlan" class="plan-result">
    <h2>{{ shareData.learningPlan.title }}</h2>
    
    <div class="plan-section">
      <h3>总体概述</h3>
      <p>{{ shareData.learningPlan.overview }}</p>
    </div>

    <div class="plan-section">
      <h3>学习阶段</h3>
      <div *ngFor="let stage of shareData.learningPlan.stages" class="stage-item">
        <h4>{{ stage.name }} ({{ stage.duration }})</h4>
        <div class="stage-goals">
          <strong>目标：</strong>
          <ul>
            <li *ngFor="let goal of stage.goals">{{ goal }}</li>
          </ul>
        </div>
        <div class="stage-tasks">
          <strong>任务：</strong>
          <ul>
            <li *ngFor="let task of stage.tasks">{{ task }}</li>
          </ul>
        </div>
        <div class="stage-resources">
          <strong>推荐资源：</strong>
          <ul>
            <li *ngFor="let resource of stage.resources">{{ resource }}</li>
          </ul>
        </div>
      </div>
    </div>

    <div class="plan-section">
      <h3>里程碑</h3>
      <ul>
        <li *ngFor="let milestone of shareData.learningPlan.milestones">
          {{ milestone }}
        </li>
      </ul>
    </div>

    <div class="plan-section">
      <h3>评估方式</h3>
      <ul>
        <li *ngFor="let method of shareData.learningPlan.evaluationMethods">
          {{ method }}
        </li>
      </ul>
    </div>
  </div>

  <!-- 重新开始按钮 -->
  <ion-button *ngIf="isComplete" expand="block" (click)="restartPlan()">
    重新规划
  </ion-button>
</ion-content> 