import { Component, OnInit } from '@angular/core';
import { IonBackButton, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardTitle, IonChip, IonCol, IonContent, IonGrid, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonNote, IonRow, IonTitle, IonToolbar } from '@ionic/angular/standalone';

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

interface Nutrition {
  calories: string;
  carbs: number;
  protein: number;
  fat: number;
}

interface Recipe {
  title: string;
  imageUrl: string;
  prepTime: string;
  cookTime: string;
  servings: number;
  category: string;
  difficulty: string;
  ingredients: Ingredient[];
  instructions: string[];
  nutrition?: Nutrition;
}

@Component({
  selector: 'app-page-detail',
  templateUrl: './page-detail.page.html',
  styleUrls: ['./page-detail.page.scss'],
  standalone: true,
  imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonBackButton, IonButtons, IonButton, IonIcon, 
            IonGrid, IonRow, IonCol, IonCard, IonCardHeader, IonCardTitle, IonCardContent, 
            IonList, IonItem, IonLabel, IonNote, IonChip]
})
export class PageDetailPage implements OnInit {
  recipe: Recipe = {
    title: '经典意大利肉酱面',
    imageUrl: 'https://images.unsplash.com/photo-1555949258-eb67b1ef0ceb?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
    prepTime: '20分钟',
    cookTime: '1小时',
    servings: 4,
    category: '意大利菜',
    difficulty: '中等',
    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: '装饰用' }
    ],
    instructions: [
      '将洋葱、胡萝卜和芹菜切碎成小丁，大蒜切末备用。',
      '在大锅中加热橄榄油，加入切碎的蔬菜炒至软化，约5分钟。',
      '加入牛肉末，用中火翻炒至变色，约8-10分钟。',
      '倒入红酒，煮至酒精挥发，约2分钟。',
      '加入番茄酱和适量的水，调至小火慢炖45分钟，期间偶尔搅拌。',
      '在另一个锅中煮意大利面，根据包装指示时间减1分钟。',
      '将煮好的面条沥干，保留一杯面水。',
      '将面条加入肉酱中，加入少量面水搅拌至酱汁浓稠裹满意面。',
      '用盐和黑胡椒调味，撒上帕玛森奶酪即可享用。'
    ],
    nutrition: {
      calories: '650kcal',
      carbs: 75,
      protein: 35,
      fat: 22
    }
  };

  isFavorite: boolean = false;

  constructor() { }

  ngOnInit() {
  }

  toggleFavorite() {
    this.isFavorite = !this.isFavorite;
  }
}
