import { Component, OnInit } from '@angular/core';
import { IonHeader, IonToolbar, IonTitle, IonContent, IonCard, IonCardContent, IonButton, IonCardHeader, IonCardTitle, IonCardSubtitle, ModalController, IonButtons, IonBackButton, IonIcon } from '@ionic/angular/standalone';
import { EditTagComponent } from '../edit-tag/edit-tag.component';
import { CloudUser } from 'src/lib/ncloud';
import { openUserLoginModal } from 'src/lib/user/model-user-login/model-user-login.component';
import { openUserEditModal } from 'src/lib/user/model-user-edit/model-user-edit.component';
import { Router } from '@angular/router';

@Component({
  selector: 'app-user-login',
  templateUrl: './user-login.component.html',
  styleUrls: ['./user-login.component.scss'],
  standalone: true,
  imports: [IonHeader, IonToolbar, IonTitle, IonContent,
    IonCard, IonCardContent, IonButton, IonCardHeader, IonCardTitle, IonCardSubtitle,
    EditTagComponent, IonButtons, IonBackButton, IonIcon
  ],
})
export class UserLoginComponent implements OnInit {
  ngOnInit(): void {

  }
  currentUser: CloudUser | undefined
  constructor(private modalCtrl: ModalController, private router: Router) {
    this.currentUser = new CloudUser();
  }
  async login() {
    // 弹出登录窗口
    let user = await openUserLoginModal(this.modalCtrl);
    if (user?.id) {
      this.currentUser = user
    }
  }
  async signup() {
    // 弹出注册窗口
    let user = await openUserLoginModal(this.modalCtrl, "signup");
    if (user?.id) {
      this.currentUser = user
    }
  }
  async logout() {
    try {
      let user = new CloudUser();
      await user.logout();

      // 刷新页面状态
      this.currentUser = undefined;

      // 显示成功提示
      const toast = document.createElement('ion-toast');
      toast.message = '退出登录成功';
      toast.duration = 2000;
      toast.position = 'top';
      toast.color = 'success';
      document.body.appendChild(toast);
      await toast.present();

      // 重定向到首页
      this.router.navigate(['/tabs/tab1']);
    } catch (error) {
      console.error('Logout error:', error);
      const toast = document.createElement('ion-toast');
      toast.message = '退出登录失败，请重试';
      toast.duration = 2000;
      toast.position = 'top';
      toast.color = 'danger';
      document.body.appendChild(toast);
      await toast.present();
    }
  }

  editUser() {
    openUserEditModal(this.modalCtrl)
  }

  editTags: string[] = [];

  onTagAdd(newTag: string) {
    // 检查标签是否已存在
    if (!this.editTags.includes(newTag)) {
      this.editTags.push(newTag);
      this.saveTagsToUser(); // 保存到用户数据
    } else {
      // 可以添加一个提示说标签已存在
      this.showToast('标签已存在');
    }
  }

  deleteTag(tagToDelete: string) {
    const index = this.editTags.indexOf(tagToDelete);
    if (index > -1) {
      this.editTags.splice(index, 1);
      this.saveTagsToUser(); // 保存到用户数据
    }
  }

  async saveTagsToUser() {
    let currentUser = new CloudUser();
    if (!currentUser?.id) {
      console.log("用户未登录，请登录后重试");
      let user = await openUserLoginModal(this.modalCtrl);
      if (!user?.id) {
        return;
      }
      currentUser = user;
    }
    // 这里可以添加保存标签到用户数据的逻辑
    // 例如: currentUser.set('tags', this.editTags);
    // await currentUser.save();
  }

  private async showToast(message: string) {
    const toast = document.createElement('ion-toast');
    toast.message = message;
    toast.duration = 2000;
    toast.position = 'top';
    document.body.appendChild(toast);
    await toast.present();
  }

}
