import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Router, RouterLink, RouterOutlet } from '@angular/router';
import { AuthService } from './auth/auth.service';
import { ToastComponent } from './toast/toast.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterLink, RouterOutlet, ToastComponent],
  template: `
    <header class="app-header">
      <a routerLink="/" class="app-name">Reactbin</a>
      <button *ngIf="auth.isAuthenticated()" class="logout-btn" (click)="onLogout()">Sign out</button>
    </header>
    <router-outlet />
    <app-toast></app-toast>
  `,
  styles: [`
    :host { display: block; }
    .app-header {
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
    }
    .app-name { font-weight: 600; font-size: 1rem; color: var(--text); letter-spacing: 0.02em; text-decoration: none; }
    .logout-btn {
      background: none;
      border: 1px solid var(--border);
      color: var(--text-muted);
      padding: 4px 12px;
      border-radius: var(--radius);
      cursor: pointer;
      font-size: 0.85rem;
      transition: border-color var(--transition), color var(--transition);
    }
    .logout-btn:hover { border-color: var(--border-focus); color: var(--text); }
  `],
})
export class AppComponent {
  title = 'reactbin-ui';

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

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