import { Component, EventEmitter, Input, Output, inject } from '@angular/core';
import { Router, RouterLink } from '@angular/router';
import { TranslatePipe } from '@ngx-translate/core';
import { AuthService } from '../core/services/auth.service';
import { ThemeService } from '../core/services/theme.service';
import { AppearanceSwitcherComponent } from '../shared/components/appearance-switcher.component';
import { LanguageSwitcherComponent } from '../shared/components/language-switcher.component';
import { LayoutSwitcherComponent } from '../shared/components/layout-switcher.component';

@Component({
  selector: 'app-navbar',
  standalone: true,
  imports: [RouterLink, TranslatePipe, AppearanceSwitcherComponent, LanguageSwitcherComponent, LayoutSwitcherComponent],
  template: `
    <header
      class="sticky top-0 z-30 border-b border-slate-200 bg-white/80 backdrop-blur dark:border-slate-800 dark:bg-slate-900/80"
    >
      <div class="flex h-16 items-center justify-between gap-4 px-4 sm:px-6">
        <div class="flex items-center gap-3">
          @if (showMenuToggle) {
            <button
              type="button"
              (click)="toggleSidebar.emit()"
              class="btn-secondary !px-2.5 !py-2 lg:hidden"
              [attr.aria-label]="'nav.toggleNav' | translate"
            >
              <span
                class="block h-0.5 w-5 bg-current shadow-[0_6px_0_currentColor,0_-6px_0_currentColor]"
              ></span>
            </button>
          }
          <a routerLink="/" class="flex items-center gap-2 font-extrabold tracking-tight">
            <span class="grid h-9 w-9 place-items-center rounded-xl bg-brand-600 text-white">
              <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                <path d="M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2" />
                <path d="M7 2v20" />
                <path d="M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7" />
              </svg>
            </span>
            <span class="text-lg">{{ 'app.name' | translate }}</span>
          </a>
        </div>

        <div class="flex items-center gap-2 sm:gap-3">
          <app-appearance-switcher />
          <app-layout-switcher />
          <app-language-switcher />

          <button
            type="button"
            (click)="theme.toggle()"
            class="btn-secondary !px-2.5 !py-2"
            [attr.aria-label]="
              theme.theme() === 'dark' ? ('nav.lightMode' | translate) : ('nav.darkMode' | translate)
            "
          >
            @if (theme.theme() === 'dark') {
              <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                <circle cx="12" cy="12" r="4" />
                <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" />
              </svg>
            } @else {
              <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
              </svg>
            }
          </button>

          <div class="hidden text-right sm:block">
            <p class="text-sm font-semibold leading-tight">
              {{ auth.user()?.userName ?? ('nav.user' | translate) }}
            </p>
            <p class="text-xs text-slate-500 dark:text-slate-400">{{ auth.user()?.email }}</p>
          </div>

          <button type="button" (click)="logout()" class="btn-secondary">
            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
              <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
              <polyline points="16 17 21 12 16 7" />
              <line x1="21" y1="12" x2="9" y2="12" />
            </svg>
            <span class="hidden sm:inline">{{ 'nav.logout' | translate }}</span>
          </button>
        </div>
      </div>
    </header>
  `,
})
export class NavbarComponent {
  readonly auth = inject(AuthService);
  readonly theme = inject(ThemeService);
  private readonly router = inject(Router);

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

  async logout(): Promise<void> {
    await this.auth.logout();
    void this.router.navigateByUrl('/login');
  }
}
