import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { IonBackButton, IonButtons, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonThumbnail, IonTitle, IonToolbar, NavController } from '@ionic/angular/standalone';
import { addIcons } from 'ionicons';
import { heart, heartOutline, timeOutline, trash } from 'ionicons/icons';
import { CloudObject, CloudQuery } from 'src/lib/ncloud';

/**
 * 浏览历史项接口定义
 * @interface HistoryItem
 * @description 定义用户浏览历史记录的数据结构
 */
interface HistoryItem {
  /** 历史记录ID */
  id: number;
  /** 食谱名称 */
  name: string;
  /** 食谱图片URL */
  image: string;
}

/**
 * 浏览记录页面组件
 * @Component 装饰器定义组件元数据
 * @description 显示和管理用户浏览过的食谱历史记录
 */
@Component({
  selector: 'app-page-records',
  templateUrl: './page-records.page.html',
  styleUrls: ['./page-records.page.scss'],
  standalone: false
})
export class PageRecordsPage implements OnInit {
  /**
   * 历史记录列表
   * @type {HistoryItem[]}
   */
  historyList: HistoryItem[] = [];

  /**
   * 构造函数
   * @param {NavController} navCtrl Ionic导航控制器 
   * @param {Router} router Angular路由服务
   * 
   * @description
   * 初始化时添加所需图标
   */
  constructor(private navCtrl: NavController, private router: Router) { 
    addIcons({ heart, heartOutline, trash });
  }

  /**
   * 组件初始化生命周期钩子
   * @returns {void}
   */
  ngOnInit(): void {
    this.loadRecipeFavoriteList();
  }

  /**
   * 食谱浏览记录列表
   * @type {CloudObject[]}
   */
  recipeRecordList: CloudObject[] = [];

  /**
   * 食谱数据列表
   * @type {any[]}
   */
  recipeDataList: any[] = [];

  /**
   * 加载用户浏览历史记录
   * @async
   * @returns {Promise<void>}
   * 
   * @description
   * 从云端查询用户浏览过的食谱历史记录，并关联查询完整的食谱数据
   */
  async loadRecipeFavoriteList(): Promise<void> {
    const query = new CloudQuery("RecipeHistory");
    query.include("recipe"); // 关联查询Recipe表
    const favorites = await query.find();

    console.log('浏览历史记录:', favorites);
    
    this.recipeRecordList = favorites.map(fav => fav.get("recipe"));
    console.log("食谱数据列表:", this.recipeRecordList);
  }

  /**
   * 导航到历史记录详情页面
   * @param {any} recipeId 食谱ID
   * @returns {void}
   * 
   * @description
   * 跳转到指定食谱的浏览记录详情页面
   */
  goToDetail(recipeId: any): void {
    this.navCtrl.navigateForward(`/tabs/tab3/page-records/page-records-detail/${recipeId}`);
    console.log('正在跳转到详情页面');
  }

  // 以下是预设数据（已注释）
  /**
   * @ignore
   * 加载模拟历史记录数据
   * @returns {void}
   */
  /*
  ngOnInit(): void {
    this.historyList = [
      {
        id: 1,
        name: '意大利肉酱面',
        image: 'https://images.unsplash.com/photo-1555949258-eb67b1ef0ceb'
      },
      // ...其他模拟数据
    ];
  }
  */
}