// src/app/app.component.ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
import * as AOS from 'aos';
import { OverlayService } from './services/overlay.service';
import { filter, Observable } from 'rxjs';
import { LoadingSpinnerComponent } from './components/loading-spinner.component';
import { PosthogService } from './services/posthog.service';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, LoadingSpinnerComponent],
  template: `
    <router-outlet></router-outlet>

    <!-- Please Wait Overlay -->
    <div 
      *ngIf="isLoading$ | async" 
      class="fixed inset-0 bg-[rgb(0,0,0)]/[.50] flex items-center justify-center z-50 transition-opacity duration-300">
      <app-loading-spinner></app-loading-spinner>
    </div>

    <!-- Success Message Overlay -->
    <div 
      *ngIf="isSuccess$ | async" 
      class="fixed top-4 right-4 bg-green-500 text-white px-4 py-2 rounded shadow z-50 animate-fadeIn">
      <div class="flex items-center">
        <i class="fas fa-check-circle mr-2"></i>
        Message successfully sent
      </div>
    </div>
  `,
  styles: [`
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(-10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .animate-fadeIn {
      animation: fadeIn 0.3s ease-in-out;
    }
  `]
})
export class AppComponent {
  isLoading$: Observable<boolean>;
  isSuccess$: Observable<boolean>;

  constructor(private overlayService: OverlayService,private router: Router, private posthogService: PosthogService) {
    this.isLoading$ = this.overlayService.loading$;
    this.isSuccess$ = this.overlayService.success$;
  }

  ngOnInit() {
    AOS.init({
      duration: 1000,
      once: true,
    });
    this.router.events
      .pipe(filter(event => event instanceof NavigationEnd))
      .subscribe((event: NavigationEnd) => {
        this.posthogService.capture('$pageview', { path: event.urlAfterRedirects });
      });
  }

  ngAfterViewInit(): void {
    setTimeout(() => {
      AOS.refresh();
    }, 500);
  }
}