import { Component, OnInit, OnDestroy } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
  IonHeader, IonToolbar, IonTitle, IonContent, IonSearchbar, IonIcon,
  IonTabButton, IonTabs, IonTabBar, IonLabel, IonNav, IonImg, IonSegmentView,
  IonSegment, IonSegmentButton, IonSegmentContent, IonThumbnail, IonButton, IonRippleEffect,
  IonBackButton, ModalController
} from '@ionic/angular/standalone';
import { ExploreContainerComponent } from '../explore-container/explore-container.component';
import { Router } from '@angular/router';
import { CloudUser } from 'src/lib/ncloud';
import { openUserLoginModal } from 'src/lib/user/model-user-login/model-user-login.component';
import { AlertController } from '@ionic/angular';

import { CategoryModalComponent } from 'src/app/category-modal/category-modal.component';

interface Slide {
  image: string;
  alt: string;
}

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss'],
  standalone: true,
  imports: [
    CommonModule,
    IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
    IonSearchbar, IonIcon, IonTabButton, IonTabs, IonTabBar, IonLabel, IonNav, IonImg,
    IonSegmentView, IonSegment, IonSegmentButton, IonSegmentContent, IonThumbnail, IonButton,
    IonRippleEffect, IonBackButton]
})
export class Tab1Page implements OnInit, OnDestroy {
  slides: Slide[] = [
    { image: 'assets/img/lunbo4.png', alt: '轮播图1' },
    { image: 'assets/img/lunbo1.png', alt: '轮播图2' },
    { image: 'assets/img/lunbo2.png', alt: '轮播图3' },
    { image: 'assets/img/lunbo3.png', alt: '轮播图4' },
    { image: 'assets/img/study.png', alt: '轮播图5' }
  ];

  currentIndex = 0;
  translateX = 0;
  private autoPlayInterval: any;
  private touchStartX = 0;
  private touchDeltaX = 0;
  private slideWidth = 0;

  // 添加分类数据
  categories = [
    {
      title: '艺术创作',
      items: ['绘画', '音乐', '舞蹈', '摄影', '手工艺', '书法', '设计']
    },
    {
      title: '运动健身',
      items: ['瑜伽', '健身', '游泳', '跑步', '球类运动', '户外运动', '武术']
    },
    {
      title: '文化学习',
      items: ['文学', '历史', '哲学', '外语', '写作', '戏剧', '诗歌']
    },
    {
      title: '科技创新',
      items: ['编程', '人工智能', '机器人', '电子制作', '3D打印', '虚拟现实']
    },
    {
      title: '生活技能',
      items: ['烹饪', '园艺', '美妆', '摄影', '旅行', '茶艺', '插花']
    },
    {
      title: '职业发展',
      items: ['商业', '金融', '管理', '营销', '创业', '职场技能']
    }
  ];

  // 添加控制分类弹窗显示的变量
  isCategoryModalOpen = false;

  constructor(
    private router: Router,
    private modalCtrl: ModalController,
    private alertCtrl: AlertController  // 注入 AlertController
  ) { }

  ngOnInit() {
    this.startAutoPlay();
    // 获取轮播图容器宽度
    setTimeout(() => {
      const container = document.querySelector('.banner-container');
      if (container) {
        this.slideWidth = container.clientWidth;
      }
    });
  }

  ngOnDestroy() {
    this.stopAutoPlay();
  }

  private startAutoPlay() {
    this.stopAutoPlay();
    this.autoPlayInterval = setInterval(() => {
      this.nextSlide();
    }, 3000); // 每3秒切换一次
  }

  private stopAutoPlay() {
    if (this.autoPlayInterval) {
      clearInterval(this.autoPlayInterval);
    }
  }

  nextSlide() {
    this.currentIndex = (this.currentIndex + 1) % this.slides.length;
    this.updateTranslateX();
  }

  prevSlide() {
    this.currentIndex = (this.currentIndex - 1 + this.slides.length) % this.slides.length;
    this.updateTranslateX();
  }

  goToSlide(index: number) {
    this.currentIndex = index;
    this.updateTranslateX();
  }

  private updateTranslateX() {
    this.translateX = -this.currentIndex * this.slideWidth;
  }

  // 触摸事件处理
  onTouchStart(event: TouchEvent) {
    this.stopAutoPlay();
    this.touchStartX = event.touches[0].clientX;
    this.touchDeltaX = 0;
  }

  onTouchMove(event: TouchEvent) {
    this.touchDeltaX = event.touches[0].clientX - this.touchStartX;
    const newTranslateX = -this.currentIndex * this.slideWidth + this.touchDeltaX;
    this.translateX = newTranslateX;
  }

  onTouchEnd() {
    const threshold = this.slideWidth / 3;
    if (Math.abs(this.touchDeltaX) > threshold) {
      if (this.touchDeltaX > 0) {
        this.prevSlide();
      } else {
        this.nextSlide();
      }
    } else {
      this.updateTranslateX();
    }
    this.startAutoPlay();
  }

  async checkLoginAndNavigate(path: string) {
    const currentUser = new CloudUser();
    if (!currentUser.id) {
      console.log("用户ID不存在");

      // 使用 AlertController 来创建和显示弹窗
      const alert = await this.alertCtrl.create({
        header: '需要登录',
        message: '请先登录后再使用此功能',
        buttons: [
          {
            text: '取消',
            role: 'cancel'
          },
          {
            text: '去登录',
            handler: async () => {
              const user = await openUserLoginModal(this.modalCtrl);
              if (user) {
                this.router.navigate([path]);
              }
            }
          }
        ]
      });

      console.log("显示弹窗");
      await alert.present();  // 弹窗显示
    } else {
      this.router.navigate([path]);
    }
  }

  goToInterestTest() {
    this.checkLoginAndNavigate('/tabs/interest-test');
  }

  goToViewAll() {
    this.router.navigate(['/tabs/view-all'])
  }

  goToInterestPicture() {
    this.router.navigate(['/tabs/interest-picture'])
  }

  goToInterestSearch() {
    this.checkLoginAndNavigate('/tabs/interest-search');
  }
  goTomailbox() {
    this.router.navigate(['/tabs/mailbox'])
  }
  goToAttendance() {
    this.router.navigate(['/tabs/attendance'])
  }
  goTodrawing() {
    this.router.navigate(['/tabs/drawing'])
  }

  // 添加打开分类弹窗的方法
  async openCategoryModal() {
    const modal = await this.modalCtrl.create({
      component: CategoryModalComponent,
      componentProps: {
        categories: this.categories
      },
      breakpoints: [0, 0.9],
      initialBreakpoint: 0.9,
      cssClass: 'category-modal'
    });

    await modal.present();
  }

}