import { ChangeDetectorRef, Component } from '@angular/core';
import { IonHeader, IonToolbar, IonTitle, IonContent, IonItem, IonList, IonSelect, IonSelectOption, IonLabel, IonButton, IonTextarea, AlertController, IonSegment, IonSegmentButton, ModalController, IonAlert, IonButtons } from '@ionic/angular/standalone';
import { ExploreContainerComponent } from '../explore-container/explore-container.component';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms'; // 导入 FormsModule
/** 引用：从fmode-ng库引用FmodeChatCompletion类 */
import { ChatPanelOptions, FmChatModalInput, FmodeChat, FmodeChatCompletion, FmodeChatMessage, MarkdownPreviewModule, openChatPanelModal } from 'fmode-ng';
import { Router } from '@angular/router'; // 导入 Router
import { DalleOptions, ImagineWork } from 'fmode-ng';
import { PageAiChatComponent } from '../page-ai-chat/page-ai-chat.component';
import { PageEvaluateComponent } from '../page-evaluate/page-evaluate.component';
import { EditRatingStarComponent } from '../edit-rating-star/edit-rating-star.component';
import { CloudUser } from 'src/lib/ncloud';
import { openUserLoginModal } from 'src/lib/user/modal-user-login/modal-user-login.component';



@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss'],
  standalone: true,
  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,IonItem,IonList,IonSelect,IonSelectOption,IonButton,CommonModule,IonTextarea,FormsModule,
    MarkdownPreviewModule,IonSegment,IonSegmentButton,IonLabel,// ASR语音输入模块
    FmChatModalInput,PageAiChatComponent,PageEvaluateComponent,EditRatingStarComponent,IonAlert,IonButtons],
})
export class Tab3Page {
  placeholderText: string = "职业：非必填\n喜好：非必填\n天气：非必填\n温度：非必填\n其他需求：显高显瘦？儒雅甜美？等";
  selectedSegment: string = 'ai-outfit'; // 默认选中的导航项
  selectedGender: string = ''; // 默认性别

 

  // 新增变量
  height: number | null = null; // 身高
  weight: number | null = null; // 体重
  age: number | null = null; // 年龄
  comments: string = ''; // 用户评论
    // 属性：组件内用于展示消息内容的变量
    responseMsg:any = ""
    // 用户输入提示词
    userPrompt:string = ''
    isComplete:boolean = false; // 定义完成状态属性，用来标记是否补全完成
    isGenerating: boolean = false; // 按钮状态
    imagineWork:ImagineWork|undefined
    countdownTimer: number = 0; // 计时器初始值
    timerInterval: any; // 用于存储定时器的引用
  images:Array<string> = []
    constructor(private alertController: AlertController,private modalCtrl:ModalController,
      private router:Router, private cdRef:ChangeDetectorRef) { }

  selectSegment(segment: string) {
    this.selectedSegment = segment; // 更新选中的导航项
  }

  isActivated(segment: string): boolean {
    return this.selectedSegment === segment; // 判断当前导航项是否被激活
  }

//AI穿搭
  selectGender(gender: string) {
    this.selectedGender = gender; // 更新选中的性别
  }
  async sendMessage(){
    //如果未登录弹出登录框
    let currentUser=new CloudUser()
    if(!currentUser.id){
      let user=await openUserLoginModal(this.modalCtrl)
      if(!user?.id) return; // 未登录则返回


    }

    // 如果正在生成，弹出警告框并返回
    if (this.isGenerating) {
      const alert = await this.alertController.create({
        header: '请等待AI回答完毕后再点击！',
        buttons: ['确定']
      });
      await alert.present();
      return; // 阻止继续执行
    }
    this.isComplete = false; // 重置完成状态
    this.isGenerating = true; // 开始生成时设置为 true
    this.countdownTimer = 0; // 重置计时器
    this.imagineWork=undefined;
    this.images = []; // 清空原来的图片数组

    this.userPrompt =`有一位${this.selectedGender}用户，该用户${this.age}岁，身高${this.height}cm，体重${this.weight}kg，该用户的补充说明是
    ${this.comments}，请你作为一名专业的服装穿搭大师并严格按照给定的例子格式，为该用户给出适合的服装搭配建议,再给出具体穿搭方案时里面的衣服颜色和类型一定要唯一，不要出现类似白色或绿色之类的句子。
    例子：嘿，兄弟，你的信息我收到了，让我来帮你计算一下BMI值，再给你一些穿搭方面的建议吧！

**一、计算BMI值**

BMI是衡量身体状况的一个标准，计算方法是体重除以身高的平方。你的体重是50KG，身高是170CM，所以计算结果为：BMI = 体重 ÷ 身高^² = 50KG ÷ （身高达到肩膀手臂撑起风衣帅气的分界线两小块的分界线的位置。）看起来你的BMI值在正常范围内哦！冬天穿搭可以根据你的喜好来选择啦！

**二、详细穿搭分析**

你身高适中，体重偏轻，选择穿搭时需要注意平衡整体造型，避免显得过于瘦弱。可以选择一些稍微宽松一些的衣物来增添一些层次感。同时，注意色彩的搭配，选择一些深色系的衣服来增加视觉上的厚重感。此外，配饰的选择也很关键，可以选择一些简约的项链、手链等增添时尚感。

**三、穿搭雷点分析**

避免选择过于紧身或者过于宽松的衣服款式，以免显得不够协调。颜色上尽量不要选择过于跳跃的颜色或者过多的颜色搭配，以免显得过于花哨。保持整体造型的简约大方即可。

**四、三套穿搭方案**

方案一：运动风搭配（冬季保暖为主）
外套：阿迪达斯运动系列羽绒服（保暖又时尚）
内搭：长袖运动衫（颜色可选黑色或灰色）搭配运动裤或牛仔裤皆可
鞋子：Nike运动鞋（保暖版）增添时尚感同时保暖十足。整体搭配既舒适又保暖。

方案二：休闲风搭配（日常出行）
外套：北面羽绒服系列（经典款式）搭配简约款围巾增添时尚感。内搭可以选择一件白色卫衣或者毛衣搭配普通牛仔裤即可。鞋子可以选择休闲鞋或板鞋即可打造出简约时尚的感觉。简约却不失品味是你想要的效果哦！👏

方案三：街头风搭配（逛街约会） 可尝试今年大热的李宁秋冬卫衣系列或国潮品牌的羽绒服系列作为外套。下身搭配潮流一点的牛仔裤和潮鞋就可以打造出自己的风格啦！可以添加一些饰品如帽子等来增加时尚感！帅气满分就是这种感觉！✨当然了也要兼顾自身的舒适感和承受能力来选择适合的搭配哦！上面这三套方案你喜欢吗？如果你有别的需要还可以再告诉我哦！
    `
    console.log("开始生成")
    let completion = new FmodeChatCompletion([
      {role:"system",content:""},
      {role:"user",content:this.userPrompt}
    ])
    completion.sendCompletion().subscribe((message: any) => {
      // 打印消息体
      console.log(message.content);
      // 赋值消息内容给组件内属性
      this.responseMsg = message.content;
      if (message?.complete) { // 判断message为完成状态，则设置isComplete为完成
        
          this.isComplete = true;
          
           // 图片生成
        this.startTimer(); // 启动计时器
        this.imagineWork = new ImagineWork();
        let PicturePrompt = `描述：${this.responseMsg}\n请你作为一名专业的服装绘制大师，根据描述中的方案一描述严格生成对应的服装图片，颜色要一致。`
        let options:DalleOptions = {prompt:PicturePrompt}
        this.imagineWork?.draw(options).subscribe(work=>{
            console.log("imagineWork",work?.toJSON())
            console.log("images",work?.get("images"))
            if(work?.get("images")?.length){
              this.images = work?.get("images");
              this.stopTimer(); // 停止计时器
              this.isGenerating = false; // 生成完成后设置为 false
            }
        })
      }
  });

}

// 启动计时器
startTimer() {
  this.timerInterval = setInterval(() => {
      this.countdownTimer++; // 每秒增加计时
  }, 1000);
}

// 停止计时器
stopTimer() {
  clearInterval(this.timerInterval); // 清除定时器
}



//测试
goBmipage() {
  this.router.navigate(['/tabs/bmi']); // 跳转到测试BMI页面
}


//AI评价
async submitEvaluation() {
  // 处理评价提交逻辑
  console.log('发表评价');
  // 这里可以添加您希望执行的代码，例如将评价发送到服务器
  // 弹出提示框
  const alert = await this.alertController.create({
    header: '提交成功，感谢你的评价！',
    buttons: ['确定'] // 按钮
  });

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

//星星打分
currentScore: number = 0; // 初始分值

handleScoreChange(newScore: number) {
this.currentScore = newScore;
console.log('新分值:', newScore); // 处理分值变化
}

getScoreDescription(score: number): string {
switch (score) {
  case 1:
    return '很差';
  case 2:
    return '差';
  case 3:
    return '一般';
  case 4:
    return '还不错';
  case 5:
    return '很满意';
  default:
    return ''; // 默认返回空字符串
}
}
alertButtons = ['退出'];






}