import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Router, RouterModule } from '@angular/router';
import {
  IonContent, IonHeader, IonTitle, IonToolbar, IonCard, IonCardHeader, IonCardTitle,
  IonCardContent, IonItem, IonAvatar, IonLabel, IonButton, IonButtons, IonIcon,
  IonGrid, IonRow, IonCol, IonSegment, IonSegmentButton // 引入新的组件
} from '@ionic/angular/standalone';
import { AuthService } from '../../services/auth.service';
import { addIcons } from 'ionicons';
// 导入所有需要的图标
import { menuOutline, shareOutline, addOutline, settingsOutline, femaleOutline, checkmarkCircleOutline } from 'ionicons/icons';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.page.html',
  styleUrls: ['./profile.page.scss'],
  standalone: true,
  imports: [
    IonContent, IonHeader, IonTitle, IonToolbar, IonCard, IonCardHeader, IonCardTitle,
    IonCardContent, IonItem, IonAvatar, IonLabel, IonButton, IonButtons, IonIcon,
    IonGrid, IonRow, IonCol, IonSegment, IonSegmentButton, // 添加到 imports
    CommonModule, FormsModule, RouterModule
  ]
})
export class ProfilePage implements OnInit {
  user: any;
  selectedSegment: string = 'notes'; // 默认选中笔记

  // 模拟帖子数据，用于瀑布流布局
  posts: any[] = [
    { segment: 'notes', imageUrl: 'assets/images/test/9.png', title: '我的第一篇笔记', likes: 10 },
    { segment: 'notes', imageUrl: 'assets/images/test/ar.png', title: '生活小记', likes: 25 },
    { segment: 'notes', imageUrl: 'assets/images/test/986.jpg', title: '旅行日记', likes: 8 },
    { segment: 'notes', imageUrl: 'assets/images/test/ar.png', title: '学习心得', likes: 15 },
    { segment: 'notes', imageUrl: 'assets/images/test/9.png', title: '美食分享', likes: 30 },
    { segment: 'collections', imageUrl: 'assets/images/test/986.jpg', title: '收藏夹1', likes: 5 },
    { segment: 'collections', imageUrl: 'assets/images/test/ar.png', title: '灵感收集', likes: 12 },
    { segment: 'liked', imageUrl: 'assets/images/test/ar.png', title: '赞过的作品', likes: 50 },
    { segment: 'liked', imageUrl: 'assets/images/test/986.jpg', title: '精彩瞬间', likes: 40 },
  ];

  constructor(public authService: AuthService, private router: Router) {
    // 添加所有需要的图标
    addIcons({
      menuOutline,
      shareOutline,
      addOutline,
      settingsOutline,
      femaleOutline,
      checkmarkCircleOutline
    });
  }

  ngOnInit() {
    this.authService.user$.subscribe(user => {
      // 模拟用户数据，包含更多字段以填充 UI
      this.user = {
        ...user, // 合并现有用户数据
        name: user?.name || '测试用户',
        bio: user?.bio || '这个人很懒，什么都没留下。',
        gender: user?.gender || 'female', // 模拟性别，可以是 'male' 或 'female'
        isVerified: user?.isVerified || true, // 模拟是否认证
        following: user?.following || 11, // 关注数
        followers: user?.followers || 49, // 粉丝数
        likesCollections: user?.likesCollections || 362, // 获赞与收藏数
        // 已删除：myMomentsThumbnail
      };
    });
  }

  logout() {
    this.authService.logout();
    this.router.navigateByUrl('/login'); // 或者 '/tabs/profile' 根据你的路由设置
  }

  // 根据选中的 segment 过滤帖子数据
  getPostsBySegment(): any[] {
    return this.posts.filter(post => post.segment === this.selectedSegment);
  }
}
