import { Component, inject } from '@angular/core';
import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
import { AsyncPipe } from '@angular/common';
import { AuthService } from './core/auth.service';

/**
 * Composant racine : barre de navigation commune + zone de routage.
 */
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, RouterLink, RouterLinkActive, AsyncPipe],
  template: `
    <header class="barre-nav">
      <a class="logo" routerLink="/editor">📄 PdfEditor</a>
      <nav>
        <a routerLink="/editor" routerLinkActive="actif">Éditeur</a>
        @if (auth.estConnecte$ | async) {
          <a routerLink="/dashboard" routerLinkActive="actif">Mes documents</a>
          <span class="email">{{ (auth.utilisateur$ | async)?.email }}</span>
          <button class="btn" (click)="deconnexion()">Déconnexion</button>
        } @else {
          <a routerLink="/login" routerLinkActive="actif">Connexion</a>
          <a routerLink="/register" routerLinkActive="actif">Inscription</a>
        }
      </nav>
    </header>
    <main>
      <router-outlet />
    </main>
  `,
  styles: [
    `
      .barre-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        height: 56px;
        background: var(--couleur-surface);
        border-bottom: 1px solid var(--couleur-bordure);
        box-shadow: var(--ombre);
      }
      .logo {
        font-weight: 700;
        font-size: 18px;
        color: var(--couleur-texte);
      }
      .logo:hover {
        text-decoration: none;
      }
      nav {
        display: flex;
        align-items: center;
        gap: 16px;
      }
      nav a {
        color: var(--couleur-texte-doux);
        font-size: 14px;
      }
      nav a.actif {
        color: var(--couleur-primaire);
        font-weight: 600;
      }
      .email {
        font-size: 13px;
        color: var(--couleur-texte-doux);
      }
      main {
        height: calc(100vh - 56px);
        overflow: auto;
      }
    `,
  ],
})
export class AppComponent {
  protected readonly auth = inject(AuthService);

  deconnexion(): void {
    this.auth.logout().subscribe();
  }
}
