import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { ExploreContainerComponent } from '../explore-container/explore-container.component';
import { IonicModule } from '@ionic/angular';
import { CommonModule } from '@angular/common';
import { addIcons } from 'ionicons';
import { bookmarkOutline, cartOutline, documentTextOutline, downloadOutline, ellipsisHorizontal, heartOutline, imageOutline, imagesOutline, search, timeOutline, walletOutline } from 'ionicons/icons';
import { EnvironmentInjector, inject } from '@angular/core';
import { openUserEditModal } from 'src/lib/user/modal-user-edit/modal-user-edit.component';
import { openUserLoginModal } from 'src/lib/user/modal-user-login/modal-user-login.component';
import { CloudUser } from 'src/lib/ncloud';
import { ModalController } from '@ionic/angular/standalone';
import { AlertController } from '@ionic/angular/standalone'; // 导入所需的模块

@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss'],
  standalone: true,
  imports: [ExploreContainerComponent, IonicModule, CommonModule],
})
export class Tab3Page {
  profile = {
    // name: 'X',
    // level: 'X',
    vipStatus: true,
    avatar: '../../assets/image/07/1.jpg', // 默认头像路径
    buttons: [
      { icon: 'time-outline', text: '浏览记录' },
      { icon: 'download-outline', text: '我的下载' },
      { icon: 'cart-outline', text: '我的购买' },
      { icon: 'wallet-outline', text: '我的钱包' }
    ],
    tabs: [
      { icon: 'images-outline', text: '全部' },
      { icon: 'image-outline', text: '图文' },
      { icon: 'document-text-outline', text: '文章' }
    ]
  };

  showTabs = false;
  activeTab: string | null = null; // 初始状态为null
  public environmentInjector = inject(EnvironmentInjector);

  currentUser: CloudUser | undefined;

  constructor(
    private router: Router,
    private alertController: AlertController,
    private modalCtrl: ModalController
  ) {
    this.currentUser = new CloudUser();
    addIcons({ 
      search, ellipsisHorizontal, timeOutline, downloadOutline, cartOutline, walletOutline, 
      heartOutline, bookmarkOutline, imageOutline, imagesOutline, documentTextOutline 
    });
  }

  toggleTabs(action: string) {
    this.showTabs = !this.showTabs;
    if (action === 'like') {
      this.setActiveTab('all');
    } else if (action === 'collect') {
      this.setActiveTab('collect'); // 假设有一个收藏选项卡
    }
  }

  setActiveTab(tab: string | null) {
    this.activeTab = tab;
    this.updateContent();
  }

  navigateToLogin() {
    this.router.navigate(['/tabs/login']);
  }

  // editName() {
  //   const newName = prompt("请输入新的名字", this.profile.name); // 仅示例
  //   if (newName) {
  //     this.profile.name = newName;
  //   }
  // }

  openVipPage() {
    // 这里可以添加逻辑来导航到VIP开通页面
    alert("导航到VIP开通页面");
  }

  onFileSelected(event: Event) {
    const input = event.target as HTMLInputElement;
    if (input.files && input.files[0]) {
      const file = input.files[0];
      const reader = new FileReader();

      reader.onload = (e: any) => {
        this.profile.avatar = e.target.result; // 将读取的图片设置为头像
      };

      reader.readAsDataURL(file); // 读取文件为Data URL
    }
  }

  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;
    }
  }

  logout() {
    this.currentUser?.logout();
  }

  editUser() {
    openUserEditModal(this.modalCtrl);
  }

  editTags: Array<string> = [];

  async setTagsValue(ev: any) {
    let currentUser = new CloudUser();
    let userPrompt = ``;
    if (!currentUser?.id) {
      console.log("用户未登录，请登录后重试");
      let user = await openUserLoginModal(this.modalCtrl);
      if (!user?.id) {
        return;
      }
      currentUser = user;
    }
    this.editTags = ev;
  }

  async showAlert() {
    const alert = await this.alertController.create({
      header: '提示', // 提示框的标题
      message: '请先登录以查看个人信息。', // 提示框的消息
      buttons: ['确定'], // 按钮文本，用户点击后关闭提示框
    });

    await alert.present(); // 显示提示框
  }

  updateContent() {
    const contentContainer = document.getElementById('content-container');
    if (!contentContainer) return;

    switch (this.activeTab) {
      case 'all':
        contentContainer.innerHTML = `
          <h2>全部内容</h2>
          <p>这里是全部内容的详细信息。</p>
        `;
        break;
      case 'image':
        contentContainer.innerHTML = `
          <h2>图文内容</h2>
          <p>这里是图文内容的详细信息。</p>
        `;
        break;
      case 'document':
        contentContainer.innerHTML = `
          <h2>文章内容</h2>
          <p>这里是文章内容的详细信息。</p>
        `;
        break;
      default:
        contentContainer.innerHTML = ''; // 默认情况下清空内容
    }
  }
}