import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import * as Parse from 'parse';
import { IonRefresher } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {
  items: any[] = [];
  filteredItems: any[] = [];
  selectedSegment: string = 'recommendations';

  constructor(private router: Router) {}

  ngOnInit() {
    this.fetchPosts();
  }

  ionViewWillEnter() {
    this.fetchPosts();
  }

  async fetchPosts() {
    const Post = Parse.Object.extend("Post240709");
    const query = new Parse.Query(Post);

    try {
      const results = await query.find();
      this.items = results.map(post => ({
        id: post.id,
        title: post.get('title'),
        author: post.get('author'),
        image: post.get('image'),
        description: post.get('description'),
        likes: post.get('likes') || 0,
        comments: post.get('comments') || 0,
        createdAt: post.createdAt,
        footer: `${post.get('likes') || 0} 赞同 · ${post.get('comments') || 0} 评论`
      }));
      this.updateFilteredItems();
    } catch (error) {
      console.error("Error while fetching posts", error);
    }
  }

  updateFilteredItems() {
    if (this.selectedSegment === 'recommendations') {
      this.filteredItems = [...this.items];
    } else if (this.selectedSegment === 'hot') {
      this.filteredItems = [...this.items].sort((a, b) => b.likes - a.likes);
    } else if (this.selectedSegment === 'newest') {
      this.filteredItems = [...this.items].sort((a, b) => b.createdAt - a.createdAt);
    }
  }

  onSegmentChanged(event: any) {
    this.selectedSegment = event.detail.value;
    this.updateFilteredItems();
  }

  onSearch(event: any) {
    const query = event.target.value.toLowerCase();
    this.filteredItems = this.items.filter(item => 
      (item.title && item.title.toLowerCase().includes(query)) || 
      (item.description && item.description.toLowerCase().includes(query))
    );
  }

  goToPostDetail(postId: string) {
    this.router.navigate(['/post-detail', postId]);
  }

  createPost() {
    this.router.navigate(['/post-create']);
  }

  async submitPostReply(content: string, postId: string) {
    const currentUser = Parse.User.current();
    if (!currentUser) {
      console.error('No user logged in. Please log in to reply.');
      return;
    }

    const Comment240709 = Parse.Object.extend('Comment240709');
    const comment = new Comment240709();

    comment.set('author', currentUser);
    comment.set('content', content);
    comment.set('post', {
      __type: 'Pointer',
      className: 'Post240709',
      objectId: postId
    });

    try {
      await comment.save();
      console.log('Reply to post saved successfully.');
      this.updatePostInHomePage(postId);
    } catch (error) {
      console.error('Error while saving reply:', error);
    }
  }

  async updatePostInHomePage(postId: string) {
    const postIndex = this.items.findIndex(post => post.id === postId);
    if (postIndex !== -1) {
      const commentsCount = await this.getCommentsCount(postId);
      this.items[postIndex].footer = `${this.items[postIndex].likes || 0} 赞同 · ${commentsCount} 评论`;
      this.filteredItems = [...this.items];
    }
  }

  async getCommentsCount(postId: string): Promise<number> {
    const query = new Parse.Query('Comment240709');
    query.equalTo('post', {
      __type: 'Pointer',
      className: 'Post240709',
      objectId: postId
    });
    try {
      const count = await query.count();
      return count;
    } catch (error) {
      console.error('Error getting comments count:', error);
      return 0;
    }
  }

  async doRefresh(event: CustomEvent) {
    await this.fetchPosts();
    const refresher = event.target as unknown as IonRefresher;
    if (refresher) {
      refresher.complete();
    }
  }
}