import { CommonModule, NgIf } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import {
  FormBuilder,
  FormControl,
  FormGroup,
  ReactiveFormsModule,
} from '@angular/forms';
import {
  ActivatedRoute,
  NavigationEnd,
  Router,
  RouterLink,
} from '@angular/router';
import {
  catchError,
  debounceTime,
  distinctUntilChanged,
  of,
  switchMap,
} from 'rxjs';
import { Pin } from '../../model/Pin';
import { AuthService } from '../../services/auth/auth.service';
import { ModalService } from '../../services/modal/modal.service';
import { NavbarService } from '../../services/navbar/navbar.service';
import { PinService } from '../../services/pin/pin.service';
import { AddPinPopupComponent } from '../add-pin-popup/add-pin-popup.component';
import { FriendPageComponent } from '../friend-page/friend-page.component';

@Component({
  selector: 'app-navbar',
  imports: [
    AddPinPopupComponent,
    NgIf,
    FriendPageComponent,
    CommonModule,
    ReactiveFormsModule,
    RouterLink,
  ],
  templateUrl: './navbar.component.html',
})
export class NavbarComponent implements OnInit {
  showTimeline: boolean = false;
  isSearchOpen: boolean = false;
  isNavbarOpen: boolean = false;

  pins: Pin[] = [];
  pinsFiltered: Pin[] = [];
  inputFocus: Boolean = false;
  searchForm: FormGroup;

  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private pinService: PinService,
    private fb: FormBuilder,
    private authService: AuthService,
    private navbarService: NavbarService,
    private modalService: ModalService
  ) {
    this.searchForm = this.fb.group({
      searchControl: new FormControl(''),
    });

    this.navbarService.isSearchOpen$.subscribe((isOpen) => {
      this.isSearchOpen = isOpen;
      this.isNavbarOpen = false;
    });

    this.navbarService.isNavbarOpen$.subscribe((isOpen) => {
      this.isNavbarOpen = isOpen;
      this.isSearchOpen = false;
    });
  }

  toggleSearch(): void {
    this.navbarService.toggleSearch();
  }

  toggleNavbar(): void {
    this.navbarService.toggleNavbar();
  }

  openPinModal() {
    this.modalService.openModal('add-pin-modal');
  }

  ngOnInit(): void {
    this.pins = this.pinService.getPins().subscribe((pins: Pin[]) => {
      this.pins = pins;
    });

    this.showTimeline =
      this.router.url !== '/timeline' && this.router.url !== '/';
    this.router.events.subscribe((event) => {
      if (event instanceof NavigationEnd) {
        this.showTimeline =
          event.url !== '/timeline' && this.router.url !== '/';
      }
    });

    this.searchForm
      .get('searchControl')
      ?.valueChanges.pipe(
        debounceTime(300),
        distinctUntilChanged(),
        switchMap((searchTerm) => {
          const trimmedQuery = searchTerm?.trim();
          if (trimmedQuery && trimmedQuery.length > 1) {
            return of(this.filterPins(trimmedQuery));
          }
          return of([]);
        }),
        catchError((error) => {
          console.error(
            'Erreur lors de la récupération des suggestions :',
            error
          );
          return of([]);
        })
      )
      .subscribe((filteredPins) => {
        this.pinsFiltered = filteredPins;
      });
  }

  filterPins(searchTerm: string): Pin[] {
    const filteredPins: Pin[] = [];

    if (this.pins.length === 0) {
      this.pins = this.pinService.getPins();
    }

    this.pins.forEach((pin: Pin) => {
      if (
        pin.title &&
        pin.title.toLowerCase().includes(searchTerm.toLowerCase())
      ) {
        filteredPins.push(pin);
      }
    });

    return filteredPins;
  }

  clickSuggestion(pin: Pin): void {
    this.searchForm.reset();

    const queryParams = { pin: pin.id };
    this.router.navigate([], {
      relativeTo: this.route,
      queryParams: queryParams,
      queryParamsHandling: 'merge',
    });
  }

  onFocus(): void {
    this.inputFocus = true;
  }

  onBlur(): void {
    setTimeout(() => {
      this.inputFocus = false;
    }, 200);
  }

  public logout() {
    this.authService.logout();
    this.router.navigate(['/']);
  }
}