<ion-header>
  <ion-toolbar color="primary">
    <ion-title>
      <ion-icon name="person-circle" slot="start"></ion-icon>
      我的
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="user-profile">
  <!-- 用户信息卡片 -->
  <ion-card class="profile-card" *ngIf="isLoggedIn; else guestTemplate">
    <ion-card-header>
      <ion-avatar class="profile-avatar">
        <img [src]="user.avatar || 'assets/icon/user-default.png'" />
      </ion-avatar>
      <ion-card-title>{{ user.name || '神农用户' }}</ion-card-title>
      <ion-card-subtitle>
        <ion-chip color="success" outline *ngIf="user.type === 'farmer'">
          <ion-icon name="leaf"></ion-icon>
          <ion-label>认证农户</ion-label>
        </ion-chip>
        <ion-chip color="warning" outline *ngIf="user.type === 'expert'">
          <ion-icon name="school"></ion-icon>
          <ion-label>农业专家</ion-label>
        </ion-chip>
      </ion-card-subtitle>
    </ion-card-header>

    <ion-card-content>
      <ion-grid>
        <ion-row>
          <ion-col size="4" class="stats-item">
            <h3>{{ user.fields || 0 }}</h3>
            <p>农田地块</p>
          </ion-col>
          <ion-col size="4" class="stats-item">
            <h3>{{ user.solved || 0 }}</h3>
            <p>已解决问题</p>
          </ion-col>
          <ion-col size="4" class="stats-item">
            <h3>{{ user.exp || 0 }}</h3>
            <p>经验值</p>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-card-content>
  </ion-card>

  <!-- 未登录状态模板 -->
  <ng-template #guestTemplate>
    <div class="guest-welcome">
      <ion-icon name="leaf" color="medium"></ion-icon>
      <h3>欢迎使用神农百问</h3>
      <p>登录后享受完整服务</p>
      <ion-button expand="block" shape="round" (click)="login()">
        <ion-icon name="log-in" slot="start"></ion-icon>
        立即登录
      </ion-button>
    </div>
  </ng-template>

  <!-- 功能菜单 -->
  <ion-list lines="none" class="feature-list">
    <ion-item button detail (click)="goToSettings()">
      <ion-icon name="settings" slot="start" color="primary"></ion-icon>
      <ion-label>系统设置</ion-label>
    </ion-item>
    
    <ion-item button detail (click)="goToFields()" *ngIf="isLoggedIn">
      <ion-icon name="map" slot="start" color="success"></ion-icon>
      <ion-label>我的农田</ion-label>
    </ion-item>
    
    <ion-item button detail (click)="goToQuestions()" *ngIf="isLoggedIn">
      <ion-icon name="help-circle" slot="start" color="warning"></ion-icon>
      <ion-label>我的提问</ion-label>
    </ion-item>
    
    <ion-item button detail (click)="goToFavorites()" *ngIf="isLoggedIn">
      <ion-icon name="bookmark" slot="start" color="danger"></ion-icon>
      <ion-label>收藏内容</ion-label>
    </ion-item>
    
    <ion-item button detail (click)="goToFeedback()">
      <ion-icon name="chatbubbles" slot="start" color="tertiary"></ion-icon>
      <ion-label>意见反馈</ion-label>
    </ion-item>
    
    <ion-item button detail (click)="goToAbout()">
      <ion-icon name="information-circle" slot="start" color="medium"></ion-icon>
      <ion-label>关于我们</ion-label>
    </ion-item>
  </ion-list>

  <!-- 登录/注册按钮 -->
  <div class="auth-buttons" *ngIf="!isLoggedIn">
    <ion-button expand="block" fill="outline" (click)="login()">
      <ion-icon name="log-in" slot="start"></ion-icon>
      登录
    </ion-button>
    <ion-button expand="block" fill="outline" (click)="signUp()">
      <ion-icon name="person-add" slot="start"></ion-icon>
      注册
    </ion-button>
  </div>

  <!-- 退出登录按钮 -->
  <ion-button expand="block" color="light" (click)="logout()" *ngIf="isLoggedIn" class="logout-btn">
    <ion-icon name="log-out" slot="start"></ion-icon>
    退出登录
  </ion-button>
</ion-content>