import { Component } from '@angular/core';
import { IonItem, IonLabel, IonList } from '@ionic/angular/standalone';
import { IonAvatar, IonContent, IonGrid, IonHeader, IonRow, IonSearchbar, IonTitle, IonToolbar, IonCol, IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonImg, IonButton } from '@ionic/angular/standalone';
import { Router } from '@angular/router';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss'],
  standalone: true,
  imports: [
    IonImg, IonHeader, IonToolbar, IonTitle, IonSearchbar, IonAvatar, IonContent, IonGrid, IonRow, IonCol, IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonLabel, IonItem, IonList, IonButton // 导入所有需要的组件
  ],
})
export class Tab1Page {
  userName: string = '用户'; // 默认用户名
  userAvatar: string = 'assets/user-avatar.png'; // 用户头像路径
  searchQuery: string = ''; // 搜索框的内容
  recommendations: Array<{ title: string; feedback: string }> = []; // 用户推荐的课程

  constructor(private router: Router) {
    // 初始化推荐课程
    this.initializeRecommendations();
  }

  // 初始化用户推荐的课程
  private initializeRecommendations() {
    this.recommendations = [
      {
        title: '绘画课程',
        feedback: '“这个课程帮助我提高了绘画技巧！” - 用户A',
      },
      {
        title: '吉他入门',
        feedback: '“非常实用的课程，通俗易懂。” - 用户B',
      },
      {
        title: '摄影基础',
        feedback: '“非常好的入门课程，推荐给所有摄影爱好者！” - 用户C',
      },
    ];
  }

  // 处理搜索框输入
  onSearchChange(event: CustomEvent) {
    this.searchQuery = event.detail.value; // 更新搜索查询
    console.log('搜索内容:', this.searchQuery);
    // 你可以在这里添加搜索逻辑，比如过滤课程列表等
  }

  // 处理用户头像点击
  onAvatarClick() {
    console.log('用户头像被点击');
    // 这里可以导航到用户个人中心或显示用户信息
  }

  // 处理课程推荐点击
  onRecommendationClick(title: string) {
    console.log(`用户点击了推荐课程: ${title}`);
    // 这里可以导航到相应的课程详情页面
  }

  // 处理图片点击
  onImageClick() {
    console.log('图片被点击');
    // 这里可以跳转到其他页面
  }

  // 跳转到AI学习规划页面（示例方法）
  goToPageLearningPlanning() {
    console.log('Navigating to learning planning page...');
    this.router.navigate(['/tabs/learningPlanning']);
  }
}
