import { CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { NavController, ModalController, IonicModule } from '@ionic/angular';
import { addIcons } from 'ionicons';
import { arrowBackOutline, checkmarkCircleOutline, closeCircleOutline, radioButtonOffOutline, reload, reloadOutline } from 'ionicons/icons';
import { FormsModule } from '@angular/forms';
import { AgentTaskStep } from 'src/agent/agent.task';
import { TaskGenerateUserValiate } from 'src/agent/tasks/generate/generate-user-valiate';
import { TaskExecutor } from 'src/agent/agent.start';
import { TaskGeneratePrompt } from 'src/agent/tasks/generate/generate-prompt';
import { TaskGeneratePicture } from 'src/agent/tasks/generate/generate-picture';
import { CloudQuery, CloudUser } from 'src/lib/ncloud';
import { CustomHeaderComponent } from 'src/lib/component/custom-header/custom-header.component';
import { IonButton, IonCard, IonContent, IonIcon, IonImg, IonText, IonTextarea } from '@ionic/angular/standalone';
addIcons({ 'arrow-back-outline': arrowBackOutline, radioButtonOffOutline, closeCircleOutline, checkmarkCircleOutline, reloadOutline });
@Component({
  selector: 'app-generate-option',
  templateUrl: './generate-option.component.html',
  styleUrls: ['./generate-option.component.scss'],
  standalone: true,
  imports: [CustomHeaderComponent, CommonModule, FormsModule, IonButton, IonCard, IonIcon,
    IonImg, IonText, IonTextarea, IonContent
  ],
  providers: [ModalController],
})
export class GenerateOptionComponent implements OnInit {
  /**
   * @构造和初始化
   */
  //构造器
  constructor(private modalCtrl: ModalController, private router: Router, private navCtrl: NavController) { }
  //初始化
  ngOnInit() { }
  /**
   * @返回按钮事件
   */
  goBack() {
    this.navCtrl.back();
  }
  /**
   * @常量定义
   */
  description: { [key: string]: string } = {
    '中国风': "汉服/唐装/中式元素/古典美",
    '日系': "棉麻/清新/柔和/文艺/舒适/盐系/森女系",
    '韩系': "色彩淡雅/感性/温柔/气质/甜美",
    '欧美风': "Athflow风/随性/简单/街头/帅气/张扬/性感/中性",
    '英伦风': "学院派/复古猎装/绅士格子/复古/低饱和度",
    '法式': "优雅/浪漫/知性/碎花/慵懒",
    '波西米亚风': "层层叠叠的花边/细绳结/皮质的流苏/纷乱的珠串装饰",
    '通勤风': "职业装/OL风/时髦知识分子风/简约通勤",
    '休闲风': "时尚/街头/日常/慵懒休闲风",
    '田园风': "轻松/舒适/棉麻/碎花/蕾丝",
    '校园风': "美式校园/英伦校园/日式JK",
    '约会装': "御姐/软妹/辣妹/仙女/淑女",
    '度假风': "轻盈/舒适/清爽/自然/休闲",
    '新中式': "传统中式元素融合现代设计/混搭/中式美学元素/更日常",
    '淑女风': "知性/优雅/简洁大方/现代都市",
    '名媛风': "高贵/典雅/精致/凸显气质",
    '简约风': "艺术/至简纯粹/质感/高级感",
    '极简风': "老钱风/CleanFit风/静奢风简约/大气/中性",
    '中性风': "无性别主义/中性色调",
    '民族风': "民族元素/手工艺/色彩鲜艳",
    '复古风': "随性/文艺/复古/浊色调",
    '嘻哈风': "街头文化/运动/奢华时尚",
    '哥特风格': "暗黑/锐角三角形/金属件",
    '浪漫主义': "柔美/荷叶边/透明",
    '洛可可风格': "C型漩涡花纹/胸衣/木耳边/花边",
    '洛丽塔风格': "可爱/甜美/蕾丝/褶边",
    '维多利亚风': "蕾丝/细砂/荷叶边/缎带蝴蝶结/多层次/褶皱/抽褶/羊腿袖",
    '未来主义': "金属色/现代几何/科技感",
  };
  /**
   * @选项卡定义变量
  */
  //用户信息定义变量
  userProfile: UserProfile = {
    gender: '不限制',
    age: '不限制',
    height: '不限制',
    weight: '不限制',
    season: '不限制',
    customDesc: '',
    areaStyle: '不限制',
    function: '不限制',
    designIdea: '不限制',
    artStyle: '不限制',
  };
  //性别选项卡定义变量
  gender: { [key: string]: boolean } = {
    '男': false,
    '女': false
  };
  //年龄选项卡定义变量
  age: { [key: string]: boolean } = {
    '20岁以下': false,
    '20-30岁': false,
    '30-40岁': false,
    '40岁以上': false
  };
  //身高选项卡定义变量
  height: { [key: string]: boolean } = {
    '160cm以下': false,
    '160-170cm': false,
    '170-180cm': false,
    '180-190cm': false,
    '190cm以上': false
  };
  //体重选项卡定义变量
  weight: { [key: string]: boolean } = {
    '50kg以下': false,
    '50-60kg': false,
    '60-70kg': false,
    '70-80kg': false,
    '80kg以上': false
  };
  //季节选项卡定义变量
  season: { [key: string]: boolean } = {
    '春季': false,
    '夏季': false,
    '秋季': false,
    '冬季': false
  };
  //区域风格选项卡定义变量
  areaStyle: { [key: string]: boolean } = {
    '中国风': false,
    '日系': false,
    '韩系': false,
    '欧美风': false,
    '英伦风': false,
    '法式': false,
    '波西米亚风': false
  }
  //场景功能选项卡定义变量
  function: { [key: string]: boolean } = {
    '通勤风': false,
    '休闲风': false,
    '田园风': false,
    '校园风': false,
    '约会装': false,
    '度假风': false
  };
  //设计理念选项卡定义变量
  designIdea: { [key: string]: boolean } = {
    '新中式': false,
    '淑女风': false,
    '名媛风': false,
    '简约风': false,
    '极简风': false,
    '中性风': false,
    '民族风': false,
    '复古风': false,
    '嘻哈风': false,
  }
  //艺术风格选项卡定义变量
  artStyle: { [key: string]: boolean } = {
    '哥特风格': false,
    '浪漫主义': false,
    '洛可可风格': false,
    '洛丽塔风格': false,
    '维多利亚风': false,
    '未来主义': false,
  }
  //颜色选项卡定义变量
  color: { [key: string]: boolean } = {
    '多巴胺穿搭': false,
    '美拉德穿搭': false
  };

  /**
   * @根据索引找到键值
   */
  getKeyByIndex(option: { [key: string]: boolean }, index: number): string {
    const keys = Object.keys(option); // 获取 option 对象中的所有键
    return keys[index]; // 根据索引找到选中的键
  }
  /**
   * @返回字典中true值对应的key
   */
  getSelectedKey(option: { [key: string]: boolean }): string {
    for (const key in option) {
      if (option[key]) {
        return key;
      }
    }
    return "null"; // 如果没有找到选中的键，则返回null
  }
  /**
   * @切换选项卡
   * 1.option:字典对象
   * 2.index:索引
   * 3.name:字典变量名
   */
  toggleActive(option: { [key: string]: boolean }, index: number, name: string) {
    const selectedKey = this.getKeyByIndex(option, index); // 根据索引找到选中的键
    if (!option[selectedKey]) {
      for (const optkey in option) {
        option[optkey] = false;
      }
      // 将选中的键对应的值设置为 true
      option[selectedKey] = true;
      // 更新 userProfile 中的对应字段
      this.userProfile[name as keyof UserProfile] = selectedKey + ":" + this.description[selectedKey];
    } else {
      option[selectedKey] = false;
      this.userProfile[name as keyof UserProfile] = '不限制';
    }
    console.log(this.userProfile);
  }
  /**
   * @获取图片路径
   * 1.option:字典对象
   * 2.index:索引
   * 3.String:图片前缀字符串
  */
  getImageSrc(option: { [key: string]: boolean }, index: number, String: string): string {
    const keys = Object.keys(option); // 获取 option 对象中的所有键
    const selectedKey = keys[index]; // 根据索引找到选中的键
    if (String.includes('areaStyle') ||
      String.includes('function') ||
      String.includes('designIdea') ||
      String.includes('artStyle')) {
      return '/assets/generate-option-style/' + String + '.jpg';
    }
    const isActive = option[selectedKey];
    // return isActive ? 'https://app.fmode.cn/dev/jxnu/202226701053/assets/generate-option-style/' + String + '-isActive-true.png' : 'https://app.fmode.cn/dev/jxnu/202226701053/assets/generate-option-style/' + String + '-isActive-false.png';
    return isActive ? '/assets/generate-option-style/' + String + '-isActive-true.png' : '/assets/generate-option-style/' + String + '-isActive-false.png';
  }

  /**
   * @其他变量定义
   */

  taskList: AgentTaskStep[] = [];//任务列表
  shareData: any = {};//共享数据
  /**
   * @任务链设计
   */
  /**
   * 任务：
   * 1.验证必填资料
   * 2.验证话题是否相关
   * 3.生成服装提示词
   * 4.生成图片
   */
  async doGenerateTask() {
    console.log('生成任务开始执行');
    this.shareData.userProfile = this.userProfile;
    //设置任务
    let task1 = TaskGenerateUserValiate({ shareData: this.shareData, modalCtrl: this.modalCtrl });
    let task2 = TaskGeneratePrompt({ shareData: this.shareData, modalCtrl: this.modalCtrl });
    let task3 = TaskGeneratePicture({ shareData: this.shareData, modalCtrl: this.modalCtrl });
    //定义任务集
    let GenerateTaskList = [task1, task2, task3]
    this.taskList = GenerateTaskList;
    await TaskExecutor(GenerateTaskList);
    this.goGenerateResult();
  }
  /**
   * @跳转函数
   * 调用路由跳转到chatPanel页面，并传递用户需求信息
   */
  goChatPanel() {
    // this.router.navigate(['/chatPanel']);
    this.goGenerateResult();
  }
  async goGenerateResult() {
    let query = new CloudQuery("GenerateResult");
    let user = new CloudUser();
    query.equalTo("UserID", user.id);
    let result: any = await query.find();
    //按照ruslt中的careatedAt字段(string)进行排序
    result.sort((a: { createdAt: string | number | Date; }, b: { createdAt: string | number | Date; }) => {
      return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
    });
    result = result[0];
    console.log(result);
    this.router.navigate(['generateResult', result?.id]);
  }
  /**
   * @风格描述下的帮助文本点击事件
   * 1. 将可选提示词展示或隐藏
   * 2. 切换帮助文本的文字
   */
  onHelperTextClick() {
    let element = document.getElementById('option-prompt');
    if (element) {
      if (element.style.display === 'block') {
        element.style.display = 'none';
      } else {
        element.style.display = 'block';
      }
    }
    element = document.getElementById('helper-text')
    if (element) {
      if (element.textContent === '没有想法？点击展开') {
        element.textContent = '收起'
      } else {
        element.textContent = '没有想法？点击展开'
      }
    }
  }

  /**
   * @提交生成判定
   */
  showJudgePage() {
    console.log("展示判断页面（加载进度）");
    let element = document.getElementById('container');
    if (element) {
      // 直接切换元素的显示状态
      element.style.display = 'block';
    }
  }
  /**
   * @提交生成终止返回
   */
  hidePopover() {
    let element = document.getElementById('container');
    if (element) {
      // 直接切换元素的显示状态
      element.style.display = 'none';
    }
  }
  /**
   * @发送提示词到下一个页面并跳转到生成结果页面
   * 1.调用validate方法
   * 2.调用showJudgePage方法
   * 3.调用doGenerateTask方法
   */
  sendMsgAndGoGenerateResult() {
    if (this.validate()) {
      this.showJudgePage();
      console.log("展示当前读取到的用户信息:");
      console.log(this.userProfile);
      this.doGenerateTask();
    }
  }

  validate() {
    console.log("开始验证用户信息");
    let currentUser = new CloudUser();
    if (!currentUser?.id) {
      console.log("用户未登录，请先登录");
      //openUserLoginModal(this.modalCtrl as any);
      return false;
    }
    return true;
  }
}
/**
 * @用户信息结构
 * 用于存储用户选择的信息生成提示词
 */
type UserProfile = {
  gender: string;
  age: string;
  height: string;
  weight: string;
  season: string;
  customDesc: string;
  areaStyle: string;
  function: string;
  designIdea: string;
  artStyle: string;
};