import { Component, ViewChild, ElementRef } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { AnimationController, IonContent, PopoverController } from '@ionic/angular';
import { Haptics } from '@capacitor/haptics';
import { Style } from '@capacitor/status-bar';
//import { ModalController } from '@ionic/angular/standalone';
//import { ChatPanelOptions, FmChatModalInput, FmodeChat, FmodeChatMessage, openChatPanelModal } from 'fmode-ng';

// interface ChatMessage {
//   content: string;
//   isAI: boolean;
//   time: Date;
//   suggestion?: string;
// }
// 消息接口定义（需在组件文件顶部声明）
interface Message {
  isUser: boolean;        // 类型标识（原错误点）
  text: string;        // 消息内容
  time: Date;           // 格式化时间
}

@Component({
  selector: 'app-ai',
  templateUrl: 'ai.page.html',
  styleUrls: ['ai.page.scss'],
  standalone: false,
})
export class AiPage {

  isDarkMode: boolean = false;

  toggleDarkMode(){
    //切换bool值标记
    this.isDarkMode=!this.isDarkMode;
    //操作DOM添加深色类
    document.body.classList.toggle('dark',this.isDarkMode);
    //保存用户偏好到本地存储
    localStorage.setItem('mindoc-darkmode',this.isDarkMode.toString());
    //动态更新ionic主题变量
    const style=document.documentElement.style;
    if(this.isDarkMode){
      //深色主题配色
      style.setProperty('--ion-background-color','#1a1a1a');
      style.setProperty('--ion-text-color','#ffffff');
      style.setProperty('--ai-bubble-bg','rgba(255,255,255,0.1)');
    }
    else{
      //浅色主题配色
      style.setProperty('--ion-background-color','#ffffff');
      style.setProperty('--ion-text-color','#333333');
      style.setProperty('--ai-bubble-bg','rgba(168,237,234,0.1');
    }
  }
  // @ViewChild(IonContent) contentArea!: IonContent;
  // @ViewChild('messageContainer') msgContainer!: ElementRef;
  
  // // 对话数据
  // chatHistory: ChatMessage[] = [
  //   { 
  //     content: '你好，我是你的心灵守护者小安，随时愿意倾听你的感受～', 
  //     isAI: true, 
  //     time: new Date() 
  //   }
  // ];
  
  // userInput = '';
  // showEmergency = false;
  // currentMood = {
  //   level: 7.2,
  //   avatar: 'assets/ai-avatar/normal.webp'
  // };  
  messages = [
    {
      text: "你好，我是AI守护",
      isUser: false, // 明确标记是否为用户消息
      time: new Date()
    },
    {
      text: "我今天感觉有点焦虑",
      isUser: true,  // 用户发送的消息
      time: new Date()
    },
    {
      text: "检测到您有些焦虑，试试深呼吸？",
      isUser: false, // 明确标记是否为用户消息
      time: new Date()
    },
    {
      text: "最近工作压力好大",
      isUser: true,  // 用户发送的消息
      time: new Date()
    }
  ];

  newMessage: string = '';  // 初始化输入内容


  constructor(private popoverCtrl: PopoverController) {}

  async showEmergencyOptions(ev: Event) {
    //const popover = await this.popoverCtrl.create({
      //component: EmergencyPopoverComponent,
      //event: ev,
      //cssClass: 'emergency-popover',
      //size: 'auto'
    //});
    //await popover.present();
  }

  sendMessage() {
    if (this.newMessage.trim()) {
      // 推送用户消息对象
      this.messages.push({
        isUser: true,
        text: this.newMessage,
        time: new Date()
      });
      this.newMessage = '';
    }
  }
  //constructor(
    //private http: HttpClient,
    //private animationCtrl: AnimationController
  //) {}

  // // 发送消息
  // async sendMessage() {
  //   if (!this.userInput.trim()) return;

  //   // 用户消息
  //   this.addUserMessage(this.userInput);
    
  //   // AI回复
  //   const aiResponse = await this.generateAIResponse(this.userInput);
  //   this.addAIMessage(aiResponse);

  //   // 滚动到底部
  //   this.scrollToBottom();
  //   this.userInput = '';
  // }
  
  // private async scrollToBottom() {  
  //   if (this.contentArea) {  
  //     await this.contentArea.scrollToBottom(300);  // 300ms 滚动动画  
  //   }  
  // }  

  // // 生成AI回复
  // private async generateAIResponse(text: string): Promise<string> {
  //   try {
  //     // 调用本地LLM接口
  //     const response = await this.http.post<{ reply?: string }>('/api/ai/chat', {
  //       message: text,
  //       mood: this.currentMood.level
  //     }).toPromise();
  //     // 安全访问响应数据
  //     const reply = response?.reply ?? '我现在好像有点困惑，可以再说一次吗？';

  //     // 触发干预检测
  //     this.checkIntervention(reply);
      
  //     return reply;
  //   } catch (error) {
  //     console.error('AI回复失败:', error);
  //     return '我现在好像有点困惑，可以再说一次吗？';
  //   }
  // }


  
  // // 添加用户消息
  // private addUserMessage(text: string) {
  //   this.chatHistory.push({
  //     content: text,
  //     isAI: false,
  //     time: new Date()
  //   });
  //   this.playMessageAnimation();
  // }

  // // 添加AI消息
  // private addAIMessage(text: string) {
  //   this.chatHistory.push({
  //     content: text,
  //     isAI: true,
  //     time: new Date(),
  //     suggestion: this.getSuggestionTag(text)
  //   });
  //   this.playMessageAnimation();
  // }

  // // 新增建议标签生成
  // private getSuggestionTag(text: string): string {
  //   const suggestions = [
  //     { keywords: ['呼吸', '放松'], tag: '呼吸练习' },
  //     { keywords: ['运动', '活动'], tag: '身体调节' },
  //     { keywords: ['记录', '写下'], tag: '情绪日记' },
  //     { keywords: ['冥想', '正念'], tag: '正念练习' }
  //   ];

  //   return suggestions.find(s => 
  //     s.keywords.some(kw => text.includes(kw))
  //   )?.tag || '';
  // }

  // // 消息入场动画
  // private playMessageAnimation() {
  //   const bubbles = this.msgContainer.nativeElement.querySelectorAll('.message');
  //   const lastBubble = bubbles[bubbles.length - 1];
    
  //   this.animationCtrl.create()
  //     .addElement(lastBubble)
  //     .duration(500)
  //     .easing('cubic-bezier(0.4, 0, 0.2, 1)')
  //     .beforeStyles({
  //       opacity: 0,
  //       transform: 'translateY(20px)'
  //     })      
  //     .fromTo('transform', 'translateY(20px)', 'translateY(0)')
  //     .fromTo('opacity', '0', '1')
  //     .play();
  // }

  // // 紧急状态检测
  // private checkIntervention(response: string) {
  //   const dangerKeywords = ['自杀', '自伤', '极端'];
  //   const isEmergency = dangerKeywords.some(kw => response.includes(kw));
    
  //   if (isEmergency) {
  //     this.showEmergency = true;
  //     Haptics.vibrate({ duration: 1000 });
  //   }
  // }

}
