<ion-header class="ion-no-border">
  <ion-toolbar color="transparent">
    <ion-buttons slot="start">
      <ion-button>
        <ion-icon slot="icon-only" name="menu-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-buttons slot="end">
      <ion-button>
        <ion-icon slot="icon-only" name="share-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="profile-page-content">
  <!-- 页面背景图容器 -->
  <div class="profile-background-image">
      <img src="assets/images/bg.jpg" />
  </div>

  <div *ngIf="authService.isLoggedIn(); else notLoggedIn" class="profile-container">
    <!-- 用户信息区 -->
    <div class="user-info-section">
      <ion-avatar class="user-avatar">
        <img [src]="user?.avatar ? user.avatar : 'assets/images/noavar.gif'" />
      </ion-avatar>

      <div class="user-details">
        <h2 class="user-name">{{ user?.name || '用户昵称' }}</h2>
        <div class="user-tags">
          <!-- 根据性别动态显示图标 -->
          <ion-icon *ngIf="user?.gender === 'female'" name="female-outline" class="gender-icon female"></ion-icon>
          <!-- 认证标签 -->
          <span *ngIf="user?.isVerified" class="verified-tag">
            <ion-icon name="checkmark-circle-outline"></ion-icon> 困困薯
          </span>
        </div>
        <p class="user-bio">{{ user?.bio || '这个人很懒，什么都没留下。' }}</p>
      </div>
    </div>

    <!-- 数据统计区 -->
    <ion-grid class="stats-grid">
      <ion-row>
        <ion-col size="4" class="stat-item">
          <div class="stat-number">{{ user?.following || 0 }}</div>
          <div class="stat-label">关注</div>
        </ion-col>
        <ion-col size="4" class="stat-item">
          <div class="stat-number">{{ user?.followers || 0 }}</div>
          <div class="stat-label">粉丝</div>
        </ion-col>
        <ion-col size="4" class="stat-item">
          <div class="stat-number">{{ user?.likesCollections || 0 }}</div>
          <div class="stat-label">获赞与收藏</div>
        </ion-col>
      </ion-row>
    </ion-grid>

    <!-- 操作区域：包含分享瞬间、编辑资料和设置 -->
    <div class="profile-actions-main-row">
      <!-- 左侧：分享瞬间 -->
      <div class="moment-section">
        <div class="moment-action-item">
          <ion-button fill="clear" class="add-moment-button">
            <ion-icon slot="icon-only" name="add-outline"></ion-icon>
          </ion-button>
          <div class="moment-action-label">分享瞬间</div>
        </div>
      </div>

      <!-- 右侧：编辑资料 & 设置 -->
      <div class="edit-settings-buttons">
        <ion-button fill="outline" shape="round" class="edit-profile-button">编辑资料</ion-button>
        <ion-button fill="outline" shape="round" class="settings-button">
          <ion-icon slot="icon-only" name="settings-outline"></ion-icon>
        </ion-button>
      </div>
    </div>

    <!-- 内容切换标签 -->
    <ion-segment [(ngModel)]="selectedSegment" mode="md" class="profile-segment">
      <ion-segment-button value="notes">
        <p>笔记</p> <!-- 移除 style="color: white;" -->
      </ion-segment-button>
      <ion-segment-button value="collections">
        <p>收藏</p> <!-- 移除 style="color: white;" -->
      </ion-segment-button>
      <ion-segment-button value="liked">
        <p>赞过</p> <!-- 移除 style="color: white;" -->
      </ion-segment-button>
    </ion-segment>

    <!-- 内容展示区 (瀑布流布局) -->
    <div class="content-grid">
      <ion-grid>
        <ion-row class="ion-align-items-start">
          <!-- 左列 -->
          <ion-col size="6">
            <div *ngFor="let post of getPostsBySegment(); let i = index">
              <div class="post-item" *ngIf="i % 2 === 0">
                <img [src]="post.imageUrl" alt="Post Image" class="post-image" />
                <!-- 可以添加帖子标题、点赞数等 -->
              </div>
            </div>
          </ion-col>
          <!-- 右列 -->
          <ion-col size="6">
            <div *ngFor="let post of getPostsBySegment(); let i = index">
              <div class="post-item" *ngIf="i % 2 !== 0">
                <img [src]="post.imageUrl" alt="Post Image" class="post-image" />
                <!-- 可以添加帖子标题、点赞数等 -->
              </div>
            </div>
          </ion-col>
        </ion-row>
      </ion-grid>
    </div>

  </div>

  <ng-template #notLoggedIn>
    <div class="not-logged-in-container">
      <p>请登录以查看您的个人资料。</p>
      <ion-button expand="block" [routerLink]="['/login']">登录</ion-button>
      <ion-button expand="block" fill="outline" [routerLink]="['/register']">注册</ion-button>
      </div>
  </ng-template>
</ion-content>
