import { Component, ViewChild } from '@angular/core';
import { IonHeader, IonToolbar, IonTitle, IonContent, IonFooter, IonItem, IonTextarea, IonButton, IonIcon, IonModal, IonList } from '@ionic/angular/standalone';
import { FormsModule } from '@angular/forms';
import { NgClass, NgFor, NgIf, DatePipe } from '@angular/common';
import { addIcons } from 'ionicons';
import { send, personCircleOutline } from 'ionicons/icons';
import { FmodeChatCompletion, MarkdownPreviewModule } from 'fmode-ng';

// 定义消息接口
interface ChatMessage {
  content: string;
  isUser: boolean;
  timestamp: Date;
}

// 定义教师接口
interface Teacher {
  id: string;
  name: string;
  description: string;
  systemPrompt: string;
}

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss'],
  standalone: true,
  imports: [
    IonHeader, 
    IonToolbar, 
    IonTitle, 
    IonContent, 
    IonFooter,
    IonItem,
    IonTextarea,
    IonButton,
    IonIcon,
    IonModal,
    IonList,
    FormsModule,
    NgClass,
    NgFor,
    NgIf,
    DatePipe,
    MarkdownPreviewModule
  ],
})
export class Tab1Page {
  @ViewChild(IonContent) content!: IonContent;
  
  messages: ChatMessage[] = [];
  userInput: string = '';
  isLoading: boolean = false;
  isComplete: boolean = false;
  currentResponse: string = '';

  // 添加教师相关属性
  teachers: Teacher[] = [
    {
      id: 'xiaoai',
      name: '教师小爱',
      description: '亲切友善，擅长耐心解答各类问题',
      systemPrompt: '你是一位亲切友善的教师，擅长耐心解答学生的各类问题。'
    },
    {
      id: 'yan',
      name: '严教授',
      description: '一丝不苟，讲解知识逻辑清晰、严谨细致',
      systemPrompt: '你是一位一丝不苟的教师，讲解知识逻辑清晰、严谨细致。在回答学生的问题时，提供详尽的解释和步骤，确保学生理解每一个细节。'
    },
    {
      id: 'youyou',
      name: '悠悠老师',
      description: '风趣幽默，善于用生动例子讲解知识',
      systemPrompt: '你是一位风趣幽默的教师，善于用生动的语言和有趣的例子讲解知识。通过幽默的表达方式，使用形象化的比喻和生活实例，讲解复杂的概念。'
    },
    {
      id: 'di',
      name: '迪先生',
      description: '启发思维，善于引导学生独立思考',
      systemPrompt: '你是一位启发思维型的教师，善于通过提问和引导帮助学生思考。在回答问题时，可以有时不直接给出答案，而是通过提问和提示，引导学生自己得出结论。'
    },
    {
      id: 'custom',
      name: '自定义教师',
      description: '创建您自己的AI教师（开发中）',
      systemPrompt: ''
    }
  ];

  selectedTeacher: Teacher = this.teachers[0]; // 默认选择教师小爱

  constructor() {
    addIcons({ send, personCircleOutline });
  }

  // 添加选择教师的方法
  selectTeacher(teacher: Teacher) {
    this.selectedTeacher = teacher;
  }

  // 发送消息
  async sendMessage() {
    if (this.userInput.trim() && !this.isLoading) {
      this.isLoading = true;
      this.isComplete = false;
      this.currentResponse = '';

      // 添加用户消息
      const userMessage: ChatMessage = {
        content: this.userInput,
        isUser: true,
        timestamp: new Date()
      };
      this.messages.push(userMessage);

      // 创建 completion 实例
      const completion = new FmodeChatCompletion([
        { role: "system", content: this.selectedTeacher.systemPrompt },
        { role: "user", content: this.userInput }
      ]);

      // 发送请求并订阅响应
      completion.sendCompletion().subscribe({
        next: (message: any) => {
          this.currentResponse = message.content;
          
          if (message?.complete) {
            this.isComplete = true;
            this.isLoading = false;
            
            // 添加 AI 回复到消息列表
            const aiMessage: ChatMessage = {
              content: this.currentResponse,
              isUser: false,
              timestamp: new Date()
            };
            this.messages.push(aiMessage);
            
            // 清空输入和当前响应
            this.userInput = '';
            this.currentResponse = '';
            
            // 滚动到底部
            this.scrollToBottom();
          }
        },
        error: (error) => {
          console.error('发送消息失败:', error);
          this.isLoading = false;
          this.messages.push({
            content: '抱歉，发生了一些错误，请稍后再试。',
            isUser: false,
            timestamp: new Date()
          });
          this.scrollToBottom();
        }
      });
    }
  }

  // 滚动到底部
  async scrollToBottom() {
    try {
      await this.content.scrollToBottom(300);
    } catch (error) {
      console.error('滚动失败:', error);
    }
  }
}