import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { CloudSeUser } from 'src/lib/cloudSeuser'; // 引入 CloudSeUser 类
import { FmodeChatCompletion } from 'fmode-ng'; // 引入 FmodeChatCompletion
import { addIcons } from 'ionicons';
import { albumsOutline, documentOutline, leafOutline, scanOutline, storefrontOutline } from 'ionicons/icons';
import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCol, IonContent, IonHeader, IonIcon, IonInput, IonRow, IonTextarea, IonTitle, IonToolbar, IonGrid, IonCardTitle, IonSearchbar } from '@ionic/angular/standalone'; // 导入 Ionic 组件
import { CommonModule } from '@angular/common'; // 导入 CommonModule
import { ImagePopupComponent } from '../image-popup/image-popup.component'; // 导入弹窗组件
import { ModalController, NavController } from '@ionic/angular/standalone';
import { Image1PopupComponent } from '../image-popup/image1-popup/image1-popup.component';
import { Image2PopupComponent } from '../image-popup/image2-popup/image2-popup.component';
import { Image3PopupComponent } from '../image-popup/image3-popup/image3-popup.component';
import { Image4PopupComponent } from '../image-popup/image4-popup/image4-popup.component';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss'],
  standalone: true,  // 使用 standalone 组件
  imports: [
    CommonModule, IonContent, IonHeader, IonTitle, IonToolbar, 
    IonButton, IonTextarea, IonInput, IonCard, IonCardContent, IonGrid, IonRow, IonCol, IonIcon,
    IonCardHeader, IonCardTitle, IonSearchbar,
  ],
})
export class Tab1Page implements OnInit {
  private cloudSeUser: CloudSeUser; // 引入 CloudSeUser 实例

  userInfo: any = null; // 用户信息
  responseMsg: string = ""; // 用于存储 AI 生成的饮食建议
  recipeMsg: string = ""; // 用于存储 AI 生成的推荐食谱

  // 存储图片的数组
  images = [
    'https://app.fmode.cn/dev/jxnu/202226701038/ssbt2022.jpg',
    'https://app.fmode.cn/dev/jxnu/202226701038/ssbt2021.jpg',
    '',
    ''
  ];

// 每张图片的描述
  descriptions = [
    '<p><strong>第一张图片</strong></p>',
      '<p><strong>第二张图片</strong></p>',
      '<p><strong>第三张图片</strong></p>',
      '<p><strong>第四张图片</strong></p>'
  ];
  // 当前显示的幻灯片索引
  currentSlide: number = 0;

  constructor(private router: Router, private modalCtrl: ModalController) {
    addIcons({ scanOutline, documentOutline, storefrontOutline, albumsOutline, leafOutline });
    this.cloudSeUser = new CloudSeUser();
  }

  ngOnInit(): void {
    this.loadUserData(); // 页面初始化时加载用户数据
  }

  // 从 seUser 表加载当前用户数据
  async loadUserData() {
    try {
        const userData = await this.cloudSeUser.getCurrentUserInfo();
        if (userData) {
            // 使用 get 方法逐个提取字段
            this.userInfo = {
                name: userData.get('name') || '',
                email: userData.get('email') || '',
                phone: userData.get('phone') || '',
                age: userData.get('age') || null,
                gender: userData.get('gender') || '',
                height: userData.get('height') || null,
                weight: userData.get('weight') || null,
                activityLevel: userData.get('activityLevel') || '',
                dietPreference: userData.get('dietPreference') || '',
                dietGroup: userData.get('dietGroup') || '',
                avatar: userData.get('avatar') || null,
                allergies: userData.get('allergies') || '',
            };
        }
    } catch (error) {
        console.error('加载用户数据失败', error);
    }
  }

  // 获取健康建议
  async goHealthTips() {
    if (!this.userInfo) return;

    const { height, weight, activityLevel, dietPreference, dietGroup } = this.userInfo;
    const newPrompt = `
      你是一名专业的饮食营养规划师。根据以下用户信息，请提供今日的饮食建议：
      身高：${height} cm
      体重：${weight} kg
      活动水平：${activityLevel}
      饮食偏好：${dietPreference}
      饮食类型：${dietGroup}
    `;

    const completion = new FmodeChatCompletion([
      { role: "system", content: "" },
      { role: "user", content: newPrompt }
    ]);

    completion.sendCompletion().subscribe((message: any) => {
      console.log(message.content);
      this.responseMsg = message.content; // 更新健康建议
    });
  }

  // 查看推荐食谱
  async viewRecommendedRecipes() {
    if (!this.userInfo) return;

    const { height, weight, activityLevel, dietPreference, dietGroup } = this.userInfo;
    const newPrompt = `
      你是一名专业的饮食营养规划师。根据以下用户信息，请推荐今日的食谱：
      身高：${height} cm
      体重：${weight} kg
      活动水平：${activityLevel}
      饮食偏好：${dietPreference}
      饮食类型：${dietGroup}
    `;

    const completion = new FmodeChatCompletion([
      { role: "system", content: "" },
      { role: "user", content: newPrompt }
    ]);

    completion.sendCompletion().subscribe((message: any) => {
      console.log(message.content);
      this.recipeMsg = message.content; // 更新推荐食谱
    });
  }

  // 打开弹窗
  async openImagePopup(imageUrl: string, description: string) {
    let modal;

    // 根据图片的 URL 或其他参数动态加载弹窗组件
    if (imageUrl === this.images[0]) {
      modal = await this.modalCtrl.create({
        component: Image1PopupComponent,
        componentProps: {
          imageUrl: imageUrl,
          description: description
        }
      });
    } else if (imageUrl === this.images[1]) {
      modal = await this.modalCtrl.create({
        component: Image2PopupComponent,
        componentProps: {
          imageUrl: imageUrl,
          description: description
        }
      });
    } else if (imageUrl === this.images[2]) {
      modal = await this.modalCtrl.create({
        component: Image3PopupComponent,
        componentProps: {
          imageUrl: imageUrl,
          description: description
        }
      });
    } else if (imageUrl === this.images[3]) {
      modal = await this.modalCtrl.create({
        component: Image4PopupComponent,
        componentProps: {
          imageUrl: imageUrl,
          description: description
        }
      });
    }

    if (modal) {
      await modal.present();
    }
  }

  // 点击轮播图
  async onImageClick(index: number) {
    const descriptions = [
      '<p><strong>第一张图片</strong></p>',
      '<p><strong>第二张图片</strong></p>',
      '<p><strong>第三张图片</strong></p>',
      '<p><strong>第四张图片</strong></p>'
    ];

    // 打开弹窗并传递描述
    await this.openImagePopup(this.images[index], descriptions[index]);
  }

  // 前一个幻灯片
  prevSlide() {
    if (this.currentSlide > 0) {
      this.currentSlide--;
    } else {
      this.currentSlide = this.images.length - 1; // 如果是第一个幻灯片，跳转到最后一个
    }
  }

  // 后一个幻灯片
  nextSlide() {
    if (this.currentSlide < this.images.length - 1) {
      this.currentSlide++;
    } else {
      this.currentSlide = 0; // 如果是最后一个幻灯片，跳转到第一个
    }
  }

  // 跳转到指定的幻灯片
  goToSlide(index: number) {
    this.currentSlide = index;
  }

    // 跳转到饮食建议页面
    goHealthTipsPage() {
      this.router.navigate([`/tabs/tips`]);
    }
  }