<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>我的</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding">
  <!-- 用户信息卡片 -->
  <ion-card class="user-card">
    <ion-item lines="none">
      <ion-avatar slot="start">
        <img [src]="userAvatar || 'assets/default-avatar.png'" alt="用户头像">
      </ion-avatar>
      <ion-label>
        <h2>{{ userName || '未登录' }}</h2>
        <p>{{ userLevel }}</p>
      </ion-label>
      <ion-button fill="clear" (click)="editProfile()">
        <ion-icon name="create-outline"></ion-icon>
      </ion-button>
    </ion-item>
  </ion-card>

  <!-- 个人中心板块 -->
  <ion-list-header>
    <ion-label>个人中心</ion-label>
  </ion-list-header>
  <ion-list>
    <ion-item button (click)="navigateTo('profile')">
      <ion-icon name="person-outline" slot="start"></ion-icon>
      <ion-label>个人资料</ion-label>
      <ion-icon name="chevron-forward" slot="end"></ion-icon>
    </ion-item>
    <ion-item button (click)="navigateTo('achievements')">
      <ion-icon name="trophy-outline" slot="start"></ion-icon>
      <ion-label>成就与勋章</ion-label>
      <ion-badge slot="end" color="success">{{ achievementCount }}</ion-badge>
      <ion-icon name="chevron-forward" slot="end"></ion-icon>
    </ion-item>
    <ion-item button (click)="navigateTo('history')">
      <ion-icon name="time-outline" slot="start"></ion-icon>
      <ion-label>学习历史</ion-label>
      <ion-icon name="chevron-forward" slot="end"></ion-icon>
    </ion-item>
  </ion-list>

  <!-- 订阅与支付板块 -->
  <ion-list-header>
    <ion-label>订阅与支付</ion-label>
  </ion-list-header>
  <ion-list>
    <ion-item button (click)="navigateTo('subscription')">
      <ion-icon name="card-outline" slot="start"></ion-icon>
      <ion-label>订阅状态</ion-label>
      <ion-badge slot="end" [color]="subscriptionStatus.color">{{ subscriptionStatus.text }}</ion-badge>
      <ion-icon name="chevron-forward" slot="end"></ion-icon>
    </ion-item>
    <ion-item button (click)="navigateTo('courses')">
      <ion-icon name="book-outline" slot="start"></ion-icon>
      <ion-label>购买课程</ion-label>
      <ion-icon name="chevron-forward" slot="end"></ion-icon>
    </ion-item>
    <ion-item button (click)="navigateTo('payments')">
      <ion-icon name="receipt-outline" slot="start"></ion-icon>
      <ion-label>支付记录</ion-label>
      <ion-icon name="chevron-forward" slot="end"></ion-icon>
    </ion-item>
  </ion-list>

  <!-- 设置板块 -->
  <ion-list-header>
    <ion-label>设置</ion-label>
  </ion-list-header>
  <ion-list>
    <ion-item button (click)="navigateTo('notifications')">
      <ion-icon name="notifications-outline" slot="start"></ion-icon>
      <ion-label>消息通知</ion-label>
      <ion-icon name="chevron-forward" slot="end"></ion-icon>
    </ion-item>
    <ion-item button (click)="navigateTo('privacy')">
      <ion-icon name="lock-closed-outline" slot="start"></ion-icon>
      <ion-label>隐私设置</ion-label>
      <ion-icon name="chevron-forward" slot="end"></ion-icon>
    </ion-item>
    <ion-item button (click)="navigateTo('about')">
      <ion-icon name="information-circle-outline" slot="start"></ion-icon>
      <ion-label>关于我们</ion-label>
      <ion-icon name="chevron-forward" slot="end"></ion-icon>
    </ion-item>
  </ion-list>

  <!-- 退出登录按钮 -->
  <div class="logout-button-container">
    <ion-button expand="block" color="danger" (click)="logout()">
      退出登录
    </ion-button>
  </div>
</ion-content>
