import { Component, inject } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { MatToolbarModule } from '@angular/material/toolbar';
import { Router, RouterLink } from '@angular/router';

import { AuthService } from '../core/auth.service';

/** App bar shared by the library and editor screens. */
@Component({
  selector: 'app-toolbar',
  imports: [MatToolbarModule, MatButtonModule, MatIconModule, MatMenuModule, RouterLink],
  template: `
    <mat-toolbar color="primary" class="toolbar">
      <a class="brand" routerLink="/games">
        <mat-icon>videogame_asset</mat-icon>
        <span class="brand-text">LudosData</span>
      </a>

      <span class="spacer"></span>

      <ng-content />

      <a mat-button routerLink="/games/new">
        <mat-icon>add</mat-icon>
        <span class="label-md">New game</span>
      </a>

      <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Account menu">
        <mat-icon>account_circle</mat-icon>
      </button>

      <mat-menu #menu="matMenu">
        @if (user(); as currentUser) {
          <div class="menu-header">
            <strong>{{ currentUser.userName }}</strong>
            @if (currentUser.email) {
              <small>{{ currentUser.email }}</small>
            }
          </div>
        }
        <a mat-menu-item routerLink="/account">
          <mat-icon>person</mat-icon>
          <span>Account</span>
        </a>
        <button mat-menu-item (click)="logout()">
          <mat-icon>logout</mat-icon>
          <span>Sign out</span>
        </button>
      </mat-menu>
    </mat-toolbar>
  `,
  styles: `
    .toolbar {
      position: sticky;
      top: 0;
      z-index: 10;
      gap: 0.5rem;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      color: inherit;
      text-decoration: none;
      font-weight: 600;
    }
    .spacer {
      flex: 1 1 auto;
    }
    .menu-header {
      display: flex;
      flex-direction: column;
      padding: 0.5rem 1rem;
      line-height: 1.3;
    }
    .menu-header small {
      opacity: 0.7;
    }
    /* Keep the bar usable on a phone: icons stay, text labels drop out. */
    @media (max-width: 599px) {
      .brand-text,
      .label-md {
        display: none;
      }
    }
  `,
})
export class Toolbar {
  private readonly auth = inject(AuthService);
  private readonly router = inject(Router);

  readonly user = this.auth.user;

  logout(): void {
    this.auth.logout();
    void this.router.navigate(['/login']);
  }
}