import { Component, signal, computed } from '@angular/core';
import { AuthService } from './auth/auth.service';
import { AuthUiService } from './auth/auth-ui.service';
import { Router } from '@angular/router';



@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  standalone: false,
  styleUrls: ['./app.scss']
})
export class App {
  protected readonly title = signal('Pytrade');

  isShowDropDown = false;

  // Keep signup modal local if you want
  signupOpen = false;

  constructor(public auth: AuthService, public authUi: AuthUiService, private router: Router) {}

  // Display name for the dropdown
  displayName = computed(() => {
    const u = this.auth.user();
    return u?.displayName || u?.email || 'Account';
  });


  // First letter for avatar
  avatarInitial = computed(() => {
    const n = this.displayName();
    return (n?.trim()?.charAt(0) || '').toUpperCase();
  });

  // Hover handlers
  showDropDown() { this.isShowDropDown = true; }
  hideDropDown() { this.isShowDropDown = false; }

  openSignup() {
    this.signupOpen = true;
    this.isShowDropDown = false;
  }

  openSignin() {
    this.authUi.openSignin();
    this.isShowDropDown = false;
  }

  closeSignup() { this.signupOpen = false; }
  closeSignin() { this.authUi.closeSignin(); }

  handleSignup(payload: any) {
    console.log('Signup payload', payload);
    this.signupOpen = false;
  }

  handleSignin(payload: any) {
    console.log('Signin payload', payload);
    this.authUi.closeSignin();
    
  }

  logout() {
    this.auth.logout();
    this.isShowDropDown = false;
    this.router.navigate(['/']);
   
  }
}