import { Component, NgZone } from '@angular/core';
import { 
  IonHeader, IonToolbar, IonTitle, IonContent, 
  IonCard, IonCardHeader, IonCardTitle, IonCardContent, 
  IonChip, IonIcon, IonLabel, IonList, IonItem,
  IonRow, IonCol, IonModal, IonButton, IonInput,
  IonGrid, IonButtons, IonBackButton, IonAvatar
} from '@ionic/angular/standalone';
import { addIcons } from 'ionicons';
import { 
  timeOutline, calendarOutline, trophyOutline, 
  documentTextOutline, heartOutline, schoolOutline, 
  medalOutline, nutritionOutline, walletOutline, 
  giftOutline, peopleOutline, helpCircleOutline, 
  chevronForwardOutline, logInOutline, personAddOutline,
  logOutOutline, closeOutline, checkmarkOutline, warningOutline } from 'ionicons/icons';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { CloudUser, CloudObject } from '../../lib/ncloud';
import { Capacitor } from '@capacitor/core';

@Component({
  selector: 'app-tab4',
  templateUrl: 'tab4.page.html',
  styleUrls: ['tab4.page.scss'],
  standalone: true,
  imports: [
    CommonModule,
    FormsModule,
    IonHeader, IonToolbar, IonTitle, IonContent, 
    IonCard, IonCardHeader, IonCardTitle, IonCardContent, 
    IonChip, IonIcon, IonLabel, IonList, IonItem,
    IonRow, IonCol, IonModal, IonButton, IonInput,
    IonGrid, IonButtons, IonBackButton, IonAvatar
  ],
})
export class Tab4Page {
  weeklyBars = [30, 60, 90, 40, 70, 50, 80];
  totalBars = [20, 40, 60, 80, 100, 50, 70];
  
  // 用户状态
  isLoggedIn = false;
  currentUser: any = {
    name: '运动达人',
    email: '',
    stats: {
      following: 128,
      followers: 356,
      cheers: 1024,
      hours: 90,
      days: 120,
      medals: 5
    }
  };
  
  // 登录/注册表单
  loginForm = {
    email: '',
    password: ''
  };
  
  registerForm = {
    name: '',
    email: '',
    password: '',
    confirmPassword: ''
  };
  
  // 模态框状态
  showLoginModal = false;
  showRegisterModal = false;
  authError = '';
  
  // 用户服务
  userService = new CloudUser();

  constructor(private ngZone: NgZone) {
    addIcons({
      logOutOutline,logInOutline,timeOutline,calendarOutline,trophyOutline,
      personAddOutline,documentTextOutline,chevronForwardOutline,heartOutline,
      schoolOutline,medalOutline,nutritionOutline,walletOutline,giftOutline,
      peopleOutline,helpCircleOutline,closeOutline,warningOutline,checkmarkOutline
    });
    
    // 检查登录状态
    this.checkLoginStatus();
  }
  
  // 检查登录状态
  async checkLoginStatus() {
    // 检查是否在移动设备上运行
    const isMobile = Capacitor.isNativePlatform();
    
    // 尝试获取当前用户
    const currentUser = await this.userService.current();
    
    if (this.userService.id) {
      this.isLoggedIn = true;
      this.updateUserProfile();
    } else if (isMobile && currentUser) {
      // 在移动设备上需要额外处理当前用户状态
      this.ngZone.run(() => {
        this.isLoggedIn = true;
        this.updateUserProfile();
      });
    } else {
      this.isLoggedIn = false;
    }
  }
  
  // 更新用户资料
  updateUserProfile() {
    this.currentUser = {
      name: this.userService.get('name') || '健身爱好者',
      email: this.userService.get('email') || '未设置邮箱',
      stats: {
        following: this.userService.get('following') || 0,
        followers: this.userService.get('followers') || 0,
        cheers: this.userService.get('cheers') || 0,
        hours: this.userService.get('totalHours') || 0,
        days: this.userService.get('activeDays') || 0,
        medals: this.userService.get('medals') || 0
      }
    };
  }
  
  // 打开登录模态框
  openLogin() {
    this.showLoginModal = true;
    this.authError = '';
    this.loginForm = { email: '', password: '' };
  }
  
  // 打开注册模态框
  openRegister() {
    this.showRegisterModal = true;
    this.authError = '';
    this.registerForm = { 
      name: '', 
      email: '', 
      password: '', 
      confirmPassword: '' 
    };
  }
  
  // 关闭模态框
  closeModals() {
    this.showLoginModal = false;
    this.showRegisterModal = false;
  }
  
  // 处理登录
  async handleLogin() {
    if (!this.loginForm.email || !this.loginForm.password) {
      this.authError = '请输入邮箱和密码';
      return;
    }
    
    try {
      const user = await this.userService.login(
        this.loginForm.email, 
        this.loginForm.password
      );
      
      if (user) {
        this.isLoggedIn = true;
        this.updateUserProfile();
        this.closeModals();
      } else {
        this.authError = '登录失败，请检查邮箱和密码';
      }
    } catch (error: any) {
      this.authError = '登录过程中发生错误';
      if (error.message) {
        this.authError = error.message;
      }
      console.error('登录错误:', error);
    }
  }
  
  // 处理注册
  async handleRegister() {
    if (this.registerForm.password !== this.registerForm.confirmPassword) {
      this.authError = '两次输入的密码不一致';
      return;
    }
    
    if (!this.registerForm.name || !this.registerForm.email || !this.registerForm.password) {
      this.authError = '请填写所有必填字段';
      return;
    }
    
    if (this.registerForm.password.length < 6) {
      this.authError = '密码至少需要6位字符';
      return;
    }
    
    try {
      const user = await this.userService.signUp(
        this.registerForm.email,
        this.registerForm.password,
        {
          name: this.registerForm.name,
          email: this.registerForm.email,
          following: 0,
          followers: 0,
          cheers: 0,
          totalHours: 0,
          activeDays: 0,
          medals: 0
        }
      );
      
      if (user) {
        this.isLoggedIn = true;
        this.updateUserProfile();
        this.closeModals();
      } else {
        this.authError = '注册失败，请稍后再试';
      }
    } catch (error: any) {
      this.authError = '注册过程中发生错误';
      if (error.message) {
        this.authError = error.message;
      }
      console.error('注册错误:', error);
    }
  }
  
  // 退出登录
  async logout() {
    try {
      await this.userService.logout();
      this.isLoggedIn = false;
      this.currentUser = {
        name: '运动达人',
        email: '',
        stats: {
          following: 128,
          followers: 356,
          cheers: 1024,
          hours: 90,
          days: 120,
          medals: 5
        }
      };
    } catch (error) {
      console.error('登出错误:', error);
    }
  }
}