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

<ion-content [fullscreen]="true">
  <!-- 个人信息区 -->
  <div class="profile-section" [class.logged-in]="isLoggedIn" [class.logged-out]="!isLoggedIn">
    <ion-avatar class="profile-avatar">
      <img [src]="isLoggedIn ? 'https://ionicframework.com/docs/img/demos/avatar.svg' : 'assets/icon/guest-avatar.png'" />
      <div class="status-dot" [class.online]="isLoggedIn"></div>
    </ion-avatar>
    
    <div class="profile-info">
      <h2 class="nickname">
        {{ isLoggedIn ? (currentUser?.data?.['nickname'] || currentUser?.data?.['username'] || '健康达人') : '请登录' }}
      </h2>
      
      <div class="tag-container">
        <ion-badge *ngIf="isLoggedIn && currentUser?.data?.['disease']" color="tertiary" class="disease-tag">
          {{ currentUser?.data?.['disease'] }}
        </ion-badge>
        <ion-badge *ngIf="!isLoggedIn" color="medium" class="guest-tag">
          访客模式
        </ion-badge>
        <ion-icon *ngIf="isLoggedIn" name="create-outline" class="edit-icon"></ion-icon>
      </div>
    </div>
    
    <!-- 登录/登出按钮 -->
    <ion-button *ngIf="!isLoggedIn" shape="round" fill="solid" color="primary" (click)="showLoginAlert()">
      <ion-icon slot="start" name="log-in-outline"></ion-icon>
      立即登录
    </ion-button>
    
    <ion-button *ngIf="isLoggedIn" shape="round" fill="outline" color="danger" (click)="logout()">
      <ion-icon slot="start" name="log-out-outline"></ion-icon>
      退出登录
    </ion-button>
  </div>

  <!-- 账户管理区 -->
  <ion-list lines="none">
    <ion-item button detail="true">
      <ion-icon slot="start" name="person-circle-outline" color="primary"></ion-icon>
      <ion-label>账户信息</ion-label>
    </ion-item>
    <ion-item button detail="true">
      <ion-icon slot="start" name="link-outline" color="primary"></ion-icon>
      <ion-label>绑定管理</ion-label>
    </ion-item>
    <ion-item button detail="true">
      <ion-icon slot="start" name="lock-closed-outline" color="primary"></ion-icon>
      <ion-label>隐私设置</ion-label>
    </ion-item>
    <ion-item button detail="true">
      <ion-icon slot="start" name="shield-checkmark-outline" color="primary"></ion-icon>
      <ion-label>安全设置</ion-label>
    </ion-item>
  </ion-list>

  <!-- 应用设置区 -->
  <ion-list lines="none">
    <ion-item button detail="true">
      <ion-icon slot="start" name="notifications-outline" color="primary"></ion-icon>
      <ion-label>通知设置</ion-label>
    </ion-item>
    <ion-item button detail="true">
      <ion-icon slot="start" name="language-outline" color="primary"></ion-icon>
      <ion-label>语言选择</ion-label>
    </ion-item>
    <ion-item button detail="true">
      <ion-icon slot="start" name="trash-outline" color="primary"></ion-icon>
      <ion-label>清除缓存</ion-label>
    </ion-item>
    <ion-item button detail="true">
      <ion-icon slot="start" name="information-circle-outline" color="primary"></ion-icon>
      <ion-label>关于应用</ion-label>
    </ion-item>
  </ion-list>

  <!-- 互动反馈区 -->
  <ion-list lines="none">
    <ion-item button detail="true">
      <ion-icon slot="start" name="mail-unread-outline" color="primary"></ion-icon>
      <ion-label>消息中心</ion-label>
      <ion-badge slot="end" color="danger">3</ion-badge>
    </ion-item>
    <ion-item button detail="true">
      <ion-icon slot="start" name="help-circle-outline" color="primary"></ion-icon>
      <ion-label>帮助与反馈</ion-label>
    </ion-item>
    <ion-item button detail="true">
      <ion-icon slot="start" name="person-add-outline" color="primary"></ion-icon>
      <ion-label>邀请好友</ion-label>
    </ion-item>
  </ion-list>
</ion-content>