import { Component, OnInit } from '@angular/core';
import { IonHeader, IonToolbar, IonTitle, IonContent, IonSearchbar, IonIcon, IonTabButton, IonTabs, IonTabBar, IonLabel, IonMenu, IonList, IonItem, IonMenuButton } from '@ionic/angular/standalone';
import { Router } from '@angular/router';
import { CommonModule } from '@angular/common';
import { CloudQuery, CloudObject, Pointer } from '../../lib/community_ncloud'; // 确保路径正确
import { FormsModule } from '@angular/forms';  // 导入 FormsModule

interface Work {
  WorkId: string; // 修改为 WorkId
  title: string;
  description: string;
  fileUrl: string;
  avatarUrl: string;
  userName: string;
  updatedAt: string;
  likesCount: number;
  category: string;
  comments: string[];
}

@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss'],
  standalone: true,
  imports: [
    CommonModule,
    IonHeader, IonToolbar, IonTitle, IonContent,
    IonSearchbar, IonIcon, IonTabButton, IonTabs, IonTabBar, IonLabel,
    IonMenu, IonList, IonItem, IonMenuButton, FormsModule,  // 添加 FormsModule
  ],
})

export class Tab3Page implements OnInit {
  artworks: Work[] = [];  // 存储所有的帖子信息
  displayedArtworks: Work[] = []; // 存储当前显示的帖子
  isSearchActive = false; // 控制搜索框是否显示
  searchQuery = ''; // 搜索框的输入内容
  constructor(private router: Router) { }
  ngOnInit() {
    this.loadWorks();  // 加载帖子数据
    this.red_underline('发现');
  }

  // 加载所有帖子数据
  async loadWorks() {
    try {
      const workQuery = new CloudQuery('Work');
      const workObjs = await workQuery.find();

      // 初始化 artworks 和 displayedArtworks
      this.artworks = workObjs.map((workObj: CloudObject) => {
        const workData = workObj.data as Work;

        return {
          ...workData,
          objectId: String(workObj.id),
          imageUrl: `${workData.fileUrl}`, // 图片路径
        };
      });

      // 初始显示所有帖子
      this.displayedArtworks = [...this.artworks];
    } catch (error) {
      console.error('加载帖子数据失败:', error);
    }
  }
  red_underline(text: string) {
    const prevUnderlined = document.querySelectorAll('span[underline="true"]') as NodeListOf<HTMLElement>;
    prevUnderlined.forEach((el: HTMLElement) => {
      el.style.textDecoration = 'none';
      el.removeAttribute('underline');
    });
    const target = document.querySelector(`span[data-id="${text}"]`) as HTMLElement;
    if (target) {
      target.setAttribute('underline', 'true');
    }
  }

  // 点击搜索图像时触发
  onSearchIconClick() {
    this.isSearchActive = !this.isSearchActive;  // 显示或隐藏搜索框
  }

  // 关闭搜索框
  onCloseSearch() {
    this.isSearchActive = false;
    this.searchQuery = ''; // 清空搜索内容
    this.displayedArtworks = [...this.artworks]; // 恢复显示所有帖子
  }
  onSearchInput() {
    if (this.searchQuery.trim()) {
      this.filterPosts(this.searchQuery); // 过滤帖子
    } else {
      this.displayedArtworks = [...this.artworks]; // 搜索框为空时恢复所有帖子
    }
  }

  // 根据搜索关键字过滤帖子
  filterPosts(query: string) {
    // 筛选符合条件的帖子
    this.displayedArtworks = this.artworks.filter(artwork =>
      artwork.title.toLowerCase().includes(query.toLowerCase()) || // 标题包含关键字
      artwork.description.toLowerCase().includes(query.toLowerCase()) // 描述包含关键字
    );
  }

  // 根据传入的 Work[] 数组加载帖子数据
  async loadWorkByContent(workContents: Work[]) {
    try {
      // 初始化查询
      const workQuery = new CloudQuery('Work');


      // 查询数据库中的帖子
      const workObjs = await workQuery.find();

      // 处理查询到的帖子数据
      this.artworks = workObjs.map((workObj: CloudObject) => {
        const workData = workObj.data as Work;

        console.log(workObj.data);
        console.log(workData.updatedAt);
        console.log(workData.fileUrl);

        // 返回构造好的帖子数据
        return {
          ...workData,
          objectId: String(workObj.id),
          imageUrl: `${workData.fileUrl}`, // 这里确保你的路径正确
        };
      });
    } catch (error) {
      console.error('加载帖子数据失败:', error);
    }
  }


  // 点击跳转到具体的帖子详情页面
  goToDetail(artId: string) {
    console.log('Work ID:', artId);
    const artwork = this.artworks.find(art => art.WorkId === artId);

    if (artwork) {
      this.router.navigate(['/tabs/art-detail', artId], {
        state: { artwork }
      }).then(() => {
        console.log('Navigation successful');
      }).catch(err => {
        console.error('Navigation failed:', err);
      });
    } else {
      console.warn('Artwork not found for id:', artId);
    }
  }
  // 使用 trackByFn 来提高性能
  trackByFn(index: number, item: any) {
    return item.WorkId;  // 使用 WorkId 作为唯一标识符
  }
}