import { Component, OnInit, Renderer2 } from '@angular/core';
import { Router } from '@angular/router';
import { NavController } from '@ionic/angular';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss'],
  standalone: false,
})
export class Tab1Page implements OnInit {
  searchQuery: string = '';
  categories: any[] = [
    { name: '中式菜系', icon: 'utensils' },
    { name: '西式料理', icon: 'fork-knife' },
    { name: '减脂轻食', icon: 'carrot' },
    { name: '甜点烘焙', icon: 'cake' },
    { name: '汤羹粥品', icon: 'bowl' },
    { name: '素食主义', icon: 'leaf' },
  ];
  recommendedRecipes: any[] = [
    { id: 1, title: '香煎鸡胸肉配时蔬', image: '/assets/food/jxr.jpg', time: 30, rating: 4.8 },
    { id: 2, title: '奶油蘑菇意面', image: '/assets/food/nymg.jpg', time: 45, rating: 4.9 },
    { id: 3, title: '蔬菜鸡胸肉沙拉', image: '/assets/food/jxsl.jpg', time: 25, rating: 4.7 },
  ];

  constructor(private router: Router, private renderer: Renderer2,private navCtrl: NavController) {}

  ngOnInit() {
    setTimeout(() => {
      const recipeCards = document.querySelectorAll('.recipe-card');
      recipeCards.forEach(card => {
        this.renderer.setStyle(card, 'opacity', '1');
        this.renderer.setStyle(card, 'transform', 'translateY(0)');
      });
    }, 1000);
  }

  login() {
    this.router.navigate(['/login']);
  }

  register() {
    this.router.navigate(['/register']);
  }

  navigateToCategory(category: any) {
    this.router.navigate(['/category', category.name]);
  }

  goToRecipeDetail(recipeId: number) {
    this.router.navigate(['/recipe', recipeId]);
  }

  performSearch() {
    const query = this.searchQuery.trim();
    if (query) {
      this.router.navigate(['/search-results'], { queryParams: { q: query } });
    }
  }

  goToDetail() {
    this.navCtrl.navigateForward(["tabs","tab1","page-detail"]);
    console.log('Navigating to page-detail');
  }
}