import { ChangeDetectionStrategy, Component, inject, OnDestroy, OnInit, signal } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AuthService } from '@service/auth.service';
import { Subscription } from 'rxjs';
import { AnimatedNumberComponent } from '@blackjack/components/animated-number/animated-number.component';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  standalone: true,
  imports: [RouterModule, AnimatedNumberComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NavbarComponent implements OnInit, OnDestroy {
  isMenuOpen = false;
  private authService: AuthService = inject(AuthService);
  isLoggedIn = this.authService.isLoggedIn();

  private userSubscription: Subscription | undefined;
  private authSubscription: Subscription | undefined;
  public balance = signal(0);

  ngOnInit() {
    // Subscribe to auth changes
    this.authSubscription = this.authService.currentUser.subscribe((user) => {
      this.isLoggedIn = !!user;
      this.balance.set(user?.balance ?? 0);
      console.log('Updated navbar balance:', user?.balance);
    });

    this.userService.refreshCurrentUser();
  }

  ngOnDestroy() {
    if (this.userSubscription) {
      this.userSubscription.unsubscribe();
    }
    if (this.authSubscription) {
      this.authSubscription.unsubscribe();
    }
  }

  logout() {
    this.authService.logout();
  }

  toggleMenu() {
    this.isMenuOpen = !this.isMenuOpen;
  }
}