import { Component, EventEmitter, OnInit, Output, inject } from '@angular/core';
import { ChangePasswordModalComponent } from '../../components/admin/users/users/change-password-modal/change-password-modal.component';
import { MatDialog } from "@angular/material/dialog";
import { GlobalStatusComponent } from 'src/app/components/global-status/global-status.component';
import { BreakpointObserver } from '@angular/cdk/layout';
import { AuthService } from '@services/auth.service';
import { TranslateService } from '@ngx-translate/core';
import { ConfigService } from '@services/config.service';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css'],
})

export class HeaderComponent implements OnInit {
  private translate = inject(TranslateService);
  private config = inject(ConfigService);
  isSuperAdmin: boolean = false;
  isSmallScreen: boolean = false;

  @Output() toggleSidebar = new EventEmitter<void>();

  onToggleSidebar() {
    this.toggleSidebar.emit();
  }

  constructor(
    public dialog: MatDialog,
    public auth: AuthService,
    private breakpointObserver: BreakpointObserver
  ) { }

  ngOnInit(): void {
    this.breakpointObserver.observe(['(max-width: 576px)']).subscribe((result) => {
      this.isSmallScreen = result.matches;
    });

    // Aplicar idioma guardado: el del JWT (servidor) tiene prioridad sobre localStorage
    const jwtLang = this.auth.language;
    const localLang = localStorage.getItem('language');
    const langToApply = jwtLang || localLang || 'es';
    this.translate.use(langToApply);
    localStorage.setItem('language', langToApply);
  }

  get availableLanguages() {
    const langs = this.config.languages;
    return Object.keys(langs).map(code => ({
      code,
      label: langs[code]
    }));
  }

  editUser() {
    const dialogRef = this.dialog.open(ChangePasswordModalComponent, {
      data: { user: this.auth.username, uuid: this.auth.uuid },
      width: '400px',
    });
  }

  showGlobalStatus() {
    this.dialog.open(GlobalStatusComponent, {
      width: '80vw',
      height: '85vh',
    })
  }

  logOut() {
    this.auth.logout();
  }

  switchLanguage(lang: string) {
    this.translate.use(lang);
    localStorage.setItem('language', lang);
  }

  getCurrentLanguage(): string {
    return this.translate.currentLang || 'es';
  }
}