import { Component } from '@angular/core';
import { ModalController, IonModal, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonLabel, IonAvatar, IonButton, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView, IonCardContent, IonCardTitle, IonCardHeader, IonCard, IonIcon, IonButtons, IonGrid, IonRow, IonThumbnail, IonSearchbar, IonCol } from '@ionic/angular/standalone';
import { ExploreContainerComponent } from '../explore-container/explore-container.component';
import { addIcons } from 'ionicons';
import { airplane, bluetooth, call, wifi, close } from 'ionicons/icons';
import { SaleCardComponent } from '../component/sale-card/sale-card.component';
import { CommonModule } from '@angular/common';
import { CloudObject, CloudQuery } from 'src/lib/ncloud';
import { Router } from '@angular/router';
import { FmChatModalInput } from 'fmode-ng';

addIcons({ airplane, bluetooth, call, wifi });

@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss'],
  standalone: true,
  imports: [
    IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
    IonButton, IonGrid, IonRow, IonCol, IonCardHeader, IonItem, IonLabel, IonThumbnail, IonCardContent,
    IonCardTitle, IonCard, IonIcon, IonSearchbar, CommonModule, SaleCardComponent,
    FmChatModalInput, IonModal, IonButtons
  ]
})
export class Tab3Page {
  showDetailModal = false;  // 控制模态显示与否
  currentProduct: any;      // 当前选择的商品信息

  categories = [
    { name: '皮肤用药', image: '../../assets/image/doctor7.png' },
    { name: '妇科用药', image: '../../assets/image/doctor7.png' },
    { name: '肠胃消化', image: '../../assets/image/doctor7.png' },
    { name: '呼吸用药', image: '../../assets/image/doctor7.png' },
    { name: '营养补充', image: '../../assets/image/doctor7.png' },
    { name: '家庭常备', image: '../../assets/image/doctor7.png' },
    { name: '耳鼻咽喉', image: '../../assets/image/doctor7.png' },
    { name: '男科用药', image: '../../assets/image/doctor7.png' },
  ];

  products: Array<CloudObject> = [];
  allProducts: Array<CloudObject> = []; // 存储所有药品数据，用于分类过滤

  constructor(
    private modalCtrl: ModalController,
    private router: Router,
  ) {
      addIcons({close}); }

  async ngOnInit() {
    await this.loadProducts();
  }

  async loadProducts() {
    try {
      const query = new CloudQuery('Drug');
      this.products = await query.find();
      this.allProducts = [...this.products]; // 初始化所有产品
    } catch (error) {
      console.error('加载药品数据失败', error);
    }
  }

  openDetailModal(product: any) {
    this.currentProduct = product;
    this.showDetailModal = true;
  }

  closeDetailModal() {
    this.showDetailModal = false;
    this.currentProduct = null;
  }

  // 根据分类过滤产品
  filterProducts(categoryName: string) {
    if (categoryName === '全部') {
      this.products = [...this.allProducts];
    } else {
      this.products = this.allProducts.filter(product => product.get('category') === categoryName);
    }
  }

  // 分类点击事件
  onCategoryClick(category: any) {
    this.filterProducts(category.name);
  }

  // 分享链接功能（可选）
  shareDetailModal() {
    // 实现分享功能
    console.log('分享功能待实现');
  }

  // 复制链接功能
  copyLink() {
    const link = window.location.href;
    navigator.clipboard.writeText(link).then(() => {
      console.log('链接已复制');
      // 可添加用户提示
    }).catch(err => {
      console.error('复制失败', err);
    });
  }

  //搜索功能
  searchTerm: string = '';

async searchProducts(event: any) {
  this.searchTerm = event.detail.value.toLowerCase();
  if (this.searchTerm) {
    this.products = this.allProducts.filter(product =>
      product.get('name').toLowerCase().includes(this.searchTerm) ||
      product.get('function').toLowerCase().includes(this.searchTerm) ||
      product.get('composition').toLowerCase().includes(this.searchTerm)
    );
  } else {
    this.products = [...this.allProducts];
  }
}
}