import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { IonBackButton, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardTitle, IonChip, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonNote, IonThumbnail, IonTitle, IonToolbar } from '@ionic/angular/standalone';
import { addIcons } from 'ionicons';
import { basketOutline, restaurantOutline, timeOutline, flameOutline, peopleOutline } from 'ionicons/icons';

interface Ingredient {
  name: string;
  amount: string;
}

interface Recipe {
  id: number;
  title: string;
  imageUrl: string;
  category: string;
  prepTime: string;
  cookTime: string;
  difficulty: string;
  servings: number;
  ingredients: Ingredient[];
  steps: string[];
}

@Component({
  selector: 'app-page-detail',
  templateUrl: './page-detail.page.html',
  styleUrls: ['./page-detail.page.scss'],
  standalone: false,
  // imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonBackButton, IonButtons, IonButton, IonIcon, 
  //           IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonList, IonItem, IonLabel, IonNote, IonChip]
})
export class PageDetailPage implements OnInit {
  recipe: Recipe | null = null;

  constructor(private route: ActivatedRoute) {
    addIcons({ basketOutline, restaurantOutline, timeOutline, flameOutline, peopleOutline });
  }

  ngOnInit() {
    // 模拟从路由参数获取菜谱ID并加载数据
    const recipeId = this.route.snapshot.paramMap.get('id');
    this.loadRecipe(recipeId);
  }

  loadRecipe(id: string | null) {
    // 这里应该是从API获取数据，暂时使用模拟数据
    this.recipe = {
      id: 1,
      title: '经典意大利肉酱面',
      imageUrl: 'https://images.unsplash.com/photo-1555949258-eb67b1ef0ceb',
      category: '意大利菜',
      prepTime: '20分钟',
      cookTime: '1小时',
      difficulty: '中等',
      servings: 4,
      ingredients: [
        { name: '意大利面', amount: '400g' },
        { name: '牛肉末', amount: '300g' },
        { name: '洋葱', amount: '1个' },
        { name: '胡萝卜', amount: '1根' },
        { name: '芹菜', amount: '1根' },
        { name: '大蒜', amount: '3瓣' },
        { name: '番茄酱', amount: '2汤匙' },
        { name: '红酒', amount: '100ml' },
        { name: '橄榄油', amount: '2汤匙' },
        { name: '盐和黑胡椒', amount: '适量' },
        { name: '帕玛森奶酪', amount: '装饰用' }
      ],
      steps: [
        '将洋葱、胡萝卜和芹菜切碎成小丁，大蒜切末备用。',
        '在大锅中加热橄榄油，加入切碎的蔬菜炒至软化，约5分钟。',
        '加入牛肉末，用中火翻炒至变色，约8-10分钟。',
        '倒入红酒，煮至酒精挥发，约2分钟。',
        '加入番茄酱和适量的水，调至小火慢炖45分钟，期间偶尔搅拌。',
        '在另一个锅中煮意大利面，根据包装指示时间减1分钟。',
        '将煮好的面条沥干，保留一杯面水。',
        '将面条加入肉酱中，加入少量面水搅拌至酱汁浓稠裹满意面。',
        '用盐和黑胡椒调味，撒上帕玛森奶酪即可享用。'
      ]
    };
  }
}