import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { 
  IonHeader, 
  IonToolbar, 
  IonTitle, 
  IonContent,
  IonCard,
  IonItem,
  IonAvatar,
  IonLabel,
  IonButton,
  IonIcon,
  IonList,
  IonListHeader,
  IonBadge,
  AlertController
} from '@ionic/angular/standalone';
import { addIcons } from 'ionicons';
import { 
  personOutline,
  createOutline,
  trophyOutline,
  timeOutline,
  cardOutline,
  bookOutline,
  receiptOutline,
  notificationsOutline,
  lockClosedOutline,
  informationCircleOutline,
  chevronForward
} from 'ionicons/icons';

@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss'],
  standalone: true,
  imports: [
    IonHeader,
    IonToolbar,
    IonTitle,
    IonContent,
    IonCard,
    IonItem,
    IonAvatar,
    IonLabel,
    IonButton,
    IonIcon,
    IonList,
    IonListHeader,
    IonBadge
  ]
})
export class Tab3Page implements OnInit {
  // 用户信息
  userAvatar: string = 'assets/default-avatar.png';
  userName: string = 'namgnal';
  userLevel: string = 'LV.3 学习达人';
  achievementCount: number = 5;
  
  // 订阅状态
  subscriptionStatus = {
    text: 'AiStudy Plus',
    color: 'success'
  };

  constructor(
    private router: Router,
    private alertController: AlertController
  ) {
    // 添加图标
    addIcons({
      personOutline,
      createOutline,
      trophyOutline,
      timeOutline,
      cardOutline,
      bookOutline,
      receiptOutline,
      notificationsOutline,
      lockClosedOutline,
      informationCircleOutline,
      chevronForward
    });
  }

  ngOnInit() {
    // 初始化数据
    this.loadUserData();
  }

  // 加载用户数据
  async loadUserData() {
    // TODO: 从服务器获取用户数据
  }

  // 编辑个人资料
  editProfile() {
    this.navigateTo('profile');
  }

  // 导航到指定页面
  navigateTo(page: string) {
    this.router.navigate([`/tabs/tab3/${page}`]);
  }

  // 退出登录
  async logout() {
    const alert = await this.alertController.create({
      header: '确认退出',
      message: '您确定要退出登录吗？',
      buttons: [
        {
          text: '取消',
          role: 'cancel'
        },
        {
          text: '确定',
          handler: () => {
            // TODO: 实现退出登录逻辑
            console.log('执行退出登录');
          }
        }
      ]
    });

    await alert.present();
  }
}
