import { Component, OnInit, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { 
  IonContent, IonHeader, IonTitle, IonToolbar,
  IonCard, IonCardHeader, IonCardTitle, IonCardContent,
  IonList, IonItem, IonLabel, IonAvatar, IonInput, IonButton, IonIcon
 } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';

 interface Character {
  name: string;
  avatar: string;
  description: string;
}

interface Message {
  sender: string;
  text: string;
}


@Component({
  selector: 'app-interact',
  templateUrl: './interact.page.html',
  styleUrls: ['./interact.page.scss'],
  standalone: true,
  imports: [
    IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule, ExploreContainerComponent,
    IonCard, IonCardHeader, IonCardTitle, IonCardContent,
    IonList, IonItem, IonLabel, IonAvatar, IonInput, IonButton, IonIcon,
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA], 
})
export class InteractPage {
  characters: Character[] = [
    {
      name: '角色A',
      avatar: 'assets/character-a.png',
      description: '角色A的简介...',
    },
    {
      name: '角色B',
      avatar: 'assets/character-b.png',
      description: '角色B的简介...',
    },
    {
      name: '角色C',
      avatar: 'assets/character-c.png',
      description: '角色C的简介...',
    },
  ];

  selectedCharacter: Character | null = null; // 当前选择的角色
  chatMessages: Message[] = []; // 聊天消息列表
  userMessage: string = ''; // 用户输入的消息

  selectCharacter(character: Character) {
    this.selectedCharacter = character;
    this.chatMessages = []; // 清空聊天记录
  }

  sendMessage() {
    if (this.userMessage.trim()) {
      this.chatMessages.push({
        sender: '您',
        text: this.userMessage,
      });
      this.userMessage = ''; // 清空输入框
      // 模拟角色的回复
      setTimeout(() => {
        this.chatMessages.push({
          sender: this.selectedCharacter?.name || '角色',
          text: '这是角色的回复。',
        });
      }, 1000);
    }
  }

}
