import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';
import { addIcons } from 'ionicons';
import { search } from 'ionicons/icons';
import { catchError, Observable, of, tap } from 'rxjs';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss'],
  standalone: true,
  imports: [CommonModule, IonicModule, FormsModule]
})
export class Tab2Page implements OnInit {
  selectedSegment: string = 'collection'; // 默认选择分类标签
  books: any[] = []; // 所有书籍
  filteredBooks: any[] = []; // 筛选后的书籍
  categories: any[] = []; // 分类列表

  private baseUrl = 'http://localhost:3000/api'; // 后端 API 基础 URL
  private loading = false; // 加载状态标志

  constructor(private http: HttpClient, private router: Router) {
    addIcons({ search });
  }

  ngOnInit() {
    this.loadCategories();
    this.loadBooks();
  }

  private getBooks(categoryId?: number): Observable<any[]> {
    const url = `${this.baseUrl}/books${categoryId ? `?category_id=${categoryId}` : ''}`;
    return this.http.get<any[]>(url).pipe(
      catchError(error => {
        console.error('Error fetching books', error);
        return of([]);
      })
    );
  }

  private getCategories(): Observable<any[]> {
    return this.http.get<any[]>(`${this.baseUrl}/categories`).pipe(
      catchError(error => {
        console.error('Error fetching categories', error);
        return of([]);
      })
    );
  }

  loadCategories(): void {
    this.getCategories().subscribe(data => {
      this.categories = data;
    });
  }

  loadBooks(categoryId?: number): void {
    this.loading = true;
    this.getBooks(categoryId).pipe(
      tap(data => {
        this.books = data;
        this.filteredBooks = categoryId ? data : this.books;
      }),
      tap(() => this.loading = false)
    ).subscribe();
  }

  segmentChanged(event: any): void {
    const newSegment = event.detail.value;
    this.selectedSegment = newSegment;

    if (newSegment === 'collection') {
      this.filteredBooks = this.books;
    } else {
      this.filteredBooks = [];
      // 根据需要添加其他逻辑
    }
  }

  selectCategory(categoryId: number): void {
    console.log('Selected category ID:', categoryId);
    this.loadBooks(categoryId); // 使用新的方法加载特定分类的书籍
  }

  goToBookManagement(bookId: number): void {
    if (bookId) {
      this.router.navigate(['book-management', bookId]);
    } else {
      console.warn('Invalid book ID');
    }
  }

  openSearch(): void {
    console.log('Search clicked');
  }
}


// import { Component, OnInit } from '@angular/core';
// import { CommonModule } from '@angular/common';
// import { IonicModule } from '@ionic/angular';
// import { HttpClient } from '@angular/common/http';
// import { Router } from '@angular/router';
// import { addIcons } from 'ionicons';
// import { search } from 'ionicons/icons';
// import { FormsModule } from '@angular/forms';
// import { catchError, of, tap ,Observable} from 'rxjs';

// @Component({
//   selector: 'app-tab2',
//   templateUrl: 'tab2.page.html',
//   styleUrls: ['tab2.page.scss'],
//   standalone: true,
//   imports: [CommonModule, IonicModule, FormsModule]
// })
// export class Tab2Page implements OnInit {
//   selectedSegment: string = 'collection';  // 默认选择分类标签
//   books: any[] = [];  // 所有书籍
//   filteredBooks: any[] = [];  // 筛选后的书籍
//   categories: any[] = [];  // 分类列表

//   private baseUrl = 'http://localhost:3000/api'; // 后端 API 基础 URL
//   private loading = false; // 加载状态标志

//   constructor(private http: HttpClient, private router: Router) {
//     addIcons({ search });
//   }

//   ngOnInit() {
//     this.loadCategories();
//     this.loadBooks();
//   }

//   loadCategories(): void {
//     this.http.get<any[]>(`${this.baseUrl}/categories`)
//       .pipe(
//         tap(data => this.categories = data),
//         catchError(error => {
//           console.error('Error fetching categories', error);
//           return of([]);
//         })
//       ).subscribe();
//   }

//   loadBooks(categoryId?: number): void {
//     this.loading = true;
//     this.http.get<any[]>(`${this.baseUrl}/books${categoryId ? `?category_id=${categoryId}` : ''}`)
//       .pipe(
//         tap(data => {
//           this.books = data;
//           this.filteredBooks = categoryId ? data : this.books;
//         }),
//         catchError(error => {
//           console.error('Error fetching books', error);
//           return of([]);
//         }),
//         tap(() => this.loading = false)
//       ).subscribe();
//   }

//   // ngOnInit() {
//   //   // 获取分类数据
//   //   this.getCategories().subscribe((data: any[]) => {
//   //     this.categories = data;  // 保存分类数据
//   //   }, (error: any) => {
//   //     console.error('Error fetching categories', error);
//   //   });

//   //   // 获取书籍数据
//   //   this.getBooks().subscribe((data: any[]) => {
//   //     this.books = data;
//   //     this.filteredBooks = this.books;
//   //   }, (error: any) => {
//   //     console.error('Error fetching books', error);
//   //   });
//   // }

//   getBooks(categoryId?: number) {
//     const url = `${this.baseUrl}/books${categoryId ? `?category_id=${categoryId}` : ''}`;
//     return this.http.get<any[]>(url); // 获取书籍数据
//   }

//   getCategories() {
//     return this.http.get<any[]>(`${this.baseUrl}/categories`); // 获取分类数据
//   }

//   segmentChanged(event: any) {
//     const newSegment = event.detail.value;
//     if (newSegment === 'collection') {
//       this.filteredBooks = this.books; // 默认显示所有书籍
//     } else if (newSegment === 'works') {
//       this.filteredBooks = []; // 清空书籍列表，您可以根据需要添加逻辑
//     } else if (newSegment === 'authors') {
//       this.filteredBooks = []; // 清空书籍列表，您可以根据需要添加逻辑
//     }
//   }
  
//   selectCategory(categoryId: number) {
//     console.log('Selected category ID:', categoryId);
//     // 根据类别获取书籍
//     this.getBooks(categoryId).subscribe({
//       next: data => {
//         this.filteredBooks = data; // 更新书籍列表
//       },
//       error: err => {
//         console.error('Error fetching books for category', err);
//       },
//       complete: () => {
//         console.log('Request completed'); // 可选的完成回调
//       }
//     });
//   }

//   goToBookManagement(bookId: number) {
//     this.router.navigate(['book-management', bookId]); // 直接传递 bookId
//   }

//   openSearch() {
//     console.log('Search clicked');
//   }
// }