
import { Component, OnInit } from '@angular/core';
import { IonAvatar, IonCardTitle, IonItem, IonLabel, IonSearchbar, NavController } from '@ionic/angular/standalone';
import { PageEditComponent } from '../page-edit/page-edit.component';
import { CloudUser } from 'src/lib/ncloud';
import { CloudSeUser } from 'src/lib/cloudSeuser';
import { openUserLoginModal } from '../modal-user-login/modal-user-login.component';
import { ModalController } from '@ionic/angular/standalone';
import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCol, IonContent, IonGrid, IonHeader, IonIcon, IonInput, IonRow, IonTextarea, IonTitle, IonToolbar } from '@ionic/angular/standalone';
import { PagePlansComponent } from '../page-plans/page-plans.component';
import { addIcons } from 'ionicons';
import { heartOutline, helpCircleOutline, leafOutline, settingsOutline, time } from 'ionicons/icons';

interface UserInfo {
  name: string;
  avatar: string;
}

@Component({
  selector: 'app-tab3',
  templateUrl: './tab3.page.html',
  styleUrls: ['./tab3.page.scss'],
  standalone: true,
  imports: [
    IonContent, IonHeader, IonTitle, IonToolbar, // 引入 IonicModule
    IonButton,IonTextarea,IonInput,IonCard,IonCardContent,IonGrid,IonRow,IonCol,IonIcon,
    IonCardHeader,IonItem,IonAvatar,IonSearchbar,IonLabel,IonCardTitle,
  ],
})
export class Tab3Page implements OnInit {

  currentUser:CloudUser|undefined
  // 用户信息数据
  userData = {
    name: '',  // 默认值
    avatar: 'assets/img/user-avatar.jpg'  // 默认头像路径
  };

  constructor(private navCtrl: NavController, private modalCtrl: ModalController) {
    addIcons({settingsOutline, helpCircleOutline, heartOutline,time,leafOutline})
    this.currentUser=new CloudUser();
  }
  
  async ngOnInit() {
    // 在这里可以加载用户信息（如果从API或服务中获取）
    await this.loadUserData();
  }

  async loadUserData() {
    // 如果用户已经登录，获取当前用户的 seUser 信息
    if (this.currentUser) {
      const cloudSeUser = new CloudSeUser();
      const userInfo = await cloudSeUser.getCurrentUserInfo();

      if (userInfo) {
        this.userData.name = userInfo.get('name') || '匿名用户';  // 如果没有名字，显示默认值
        this.userData.avatar = userInfo.get('avatar') || 'assets/img/user-avatar.jpg';  // 如果没有头像，显示默认头像
      }
    }
  }  
  async login(){
    // 弹出登录窗口
    let user = await openUserLoginModal(this.modalCtrl);
    if(user?.id){
      this.currentUser = user
      await this.loadUserData();// 登录后加载用户信息
    }
  }

  async signup(){
    // 弹出注册窗口
    let user = await openUserLoginModal(this.modalCtrl,"signup");
    if(user?.id){
      this.currentUser = user
    }
  }

  logout(){
    if (this.currentUser) {
      this.currentUser.logout();
      this.currentUser = undefined;
      // 清空用户数据
      this.userData = { name: '', avatar: 'assets/img/user-avatar.jpg' };
    }
  }
  
  async goToEdit() {
    // 打开编辑模态框
    const modal = await this.modalCtrl.create({
      component: PageEditComponent,
      componentProps: {
        userData: this.userData  // 将当前用户数据传递给编辑页面
      }
    });
    modal.present();

    // 等待编辑页面关闭并获取数据
    const { data, role } = await modal.onWillDismiss();

    if (role === 'confirm') {
      // 更新用户信息
      this.userData = {
        name: data.get('name') || '匿名用户',
        avatar: data.get('avatar') || 'assets/img/user-avatar.jpg',
      };
      await this.loadUserData();  // 更新头像和用户名
    }
  }

  async goToplans() {
    // 判断当前是否已登录
  if (!this.currentUser || !this.currentUser.id) {
    // 如果没有登录，弹出登录模态框
    const user = await openUserLoginModal(this.modalCtrl);
    
    if (user?.id) {
      // 登录成功后更新当前用户
      this.currentUser = user;
      // 登录后再打开 PagePlansComponent
      this.openPlansModal();
    }
  } else {
    // 如果已经登录，直接打开 PagePlansComponent
    this.openPlansModal();
  }
}

// 打开 PagePlansComponent 模态框
private async openPlansModal() {
  const modal = await this.modalCtrl.create({
    component: PagePlansComponent,
  });
  await modal.present();
  }

  goToHelp() {
    this.navCtrl.navigateForward('/help');
  }

  goToSettings() {
    this.navCtrl.navigateForward('/settings');
  }
}
