// page-home.component.ts
import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

// 导入 Swiper 相关
import { register } from 'swiper/element/bundle';
import { SwiperOptions } from 'swiper/types';

// 注册 Swiper 组件
register();


@Component({
  selector: 'app-page-home',
  standalone: true,
  imports: [CommonModule, FormsModule],
  templateUrl: './page-home.html',
  styleUrls: ['./page-home.scss'],
  schemas: [CUSTOM_ELEMENTS_SCHEMA] // 添加这个以支持 Web Components
})
export class PageHomeComponent implements AfterViewInit {
  @ViewChild('swiperContainer') swiperContainer!: ElementRef;
  
  menuItems = [
    {
      id: 1,
      name: '招牌酸菜鱼',
      price: 68,
      discountPrice: null,
      description: '新鲜黑鱼片搭配秘制酸菜，麻辣鲜香',
      sales: '1286',
      rating: '98%',
      badge: '热销TOP1'
    },
    {
      id: 2,
      name: '香辣小龙虾',
      price: 98,
      discountPrice: 128,
      description: '精选大号小龙虾，麻辣鲜香，肉质饱满',
      sales: '856',
      rating: '97%',
      badge: '限时8折'
    },
    {
      id: 3,
      name: '金汤肥牛锅',
      price: 58,
      discountPrice: null,
      description: '精选肥牛搭配南瓜金汤，微辣鲜香',
      sales: '523',
      rating: '99%',
      badge: '新品'
    },
    {
      id: 4,
      name: '情侣双人餐',
      price: 168,
      discountPrice: null,
      description: '酸菜鱼+小龙虾+2份甜品+2杯饮品',
      sales: '342',
      rating: '100%',
      badge: '双人套餐'
    }
  ];

  activeTab = 'home';

  ngAfterViewInit(): void {
    this.initSwiper();
  }

  private initSwiper(): void {
    if (this.swiperContainer?.nativeElement) {
      this.swiperContainer.nativeElement.params = {
        loop: true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false,
        },
        pagination: {
          clickable: true,
        },
      };
    }
  }

  handleAddToCart(event: MouseEvent, itemId: number): void {
    const button = event.target as HTMLButtonElement;
    const originalText = button.innerHTML;
    
    button.innerHTML = '<i class="fas fa-check"></i> 已添加';
    button.style.background = '#666';
    
    setTimeout(() => {
      button.innerHTML = originalText;
      button.style.background = '';
    }, 1500);
  }

  handleCategoryClick(event: MouseEvent): void {
    const target = event.currentTarget as HTMLElement;
    const icon = target.querySelector('.category-icon');
    
    if (icon) {
      icon.classList.add('active');
      setTimeout(() => icon.classList.remove('active'), 300);
    }
  }

  handleIPClick(): void {
    alert('点菜喵智能推荐已开启！将为您推荐最合适的菜品~');
  }

  handleReadStory(): void {
    alert('即将打开酸菜鱼的完整故事...');
  }

  handleShareStory(): void {
    alert('分享菜品故事给好友');
  }

  setActiveTab(tab: string): void {
    this.activeTab = tab;
  }
}