<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      拓展
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding">
  <!-- 通知中心 -->
  <ion-card class="notification-card">
    <ion-item lines="none">
      <ion-icon name="notifications" slot="start" color="primary"></ion-icon>
      <ion-label>
        <h2>通知中心</h2>
        <p *ngIf="notifications.length > 0">{{notifications[0].content}}</p>
        <p *ngIf="notifications.length === 0">暂无新通知</p>
      </ion-label>
      <ion-badge slot="end" *ngIf="notifications.length > 0">{{notifications.length}}</ion-badge>
    </ion-item>
  </ion-card>

  <!-- 主要功能网格 -->
  <ion-grid>
    <ion-row>
      <!-- 个性化学习设计 -->
      <ion-col size="6">
        <ion-card class="feature-card" (click)="navigateToFeature('learning-design')">
          <ion-card-content class="ion-text-center">
            <ion-icon name="bulb" color="warning"></ion-icon>
            <h3>个性化学习设计</h3>
            <p>定制你的学习风格</p>
          </ion-card-content>
        </ion-card>
      </ion-col>
      
      <!-- 学习概览 -->
      <ion-col size="6">
        <ion-card class="feature-card" (click)="navigateToFeature('learning-overview')">
          <ion-card-content class="ion-text-center">
            <ion-icon name="bar-chart" color="success"></ion-icon>
            <h3>学习概览</h3>
            <p>查看学习进度</p>
          </ion-card-content>
        </ion-card>
      </ion-col>
      
      <!-- 互动练习 -->
      <ion-col size="6">
        <ion-card class="feature-card" (click)="navigateToFeature('interactive-practice')">
          <ion-card-content class="ion-text-center">
            <ion-icon name="people" color="tertiary"></ion-icon>
            <h3>互动练习</h3>
            <p>与AI互动学习</p>
          </ion-card-content>
        </ion-card>
      </ion-col>
      
      <!-- 收藏题库 -->
      <ion-col size="6">
        <ion-card class="feature-card" (click)="navigateToFeature('favorites')">
          <ion-card-content class="ion-text-center">
            <ion-icon name="star" color="warning"></ion-icon>
            <h3>收藏题库</h3>
            <p>复习重点内容</p>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>

  <!-- 学习进度概览 -->
  <ion-card class="progress-card">
    <ion-card-header>
      <ion-card-title>今日学习进度</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <ion-progress-bar [value]="dailyProgress"></ion-progress-bar>
      <div class="progress-stats">
        <span>已完成: {{completedTasks}}/{{totalTasks}}</span>
        <span>{{(dailyProgress * 100).toFixed(0)}}%</span>
      </div>
    </ion-card-content>
  </ion-card>
</ion-content>
