import { Component, inject } from '@angular/core';
import { RouterOutlet, Router, RouterLink } from '@angular/router';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, CommonModule, RouterLink],
  styleUrls: ['./app.component.css'],
  template: `
    <main class="app-shell" [class.login-mode]="isLoginView()">

      <header *ngIf="!isLoginView()" class="app-header">
        <a routerLink="/dashboard" class="header-brand" style="text-decoration: none; cursor: pointer;">
          <div class="header-logo">
            <img src="/assets/wave.jpg" alt="Wave" class="header-logo__img">
          </div>
          <div class="header-wordmark">
            <span class="header-name">WAVE</span>
            <span class="header-sub">Intranet Corporativa</span>
          </div>
        </a>
        <div class="header-meta">Wave · 2026</div>
      </header>

      <section class="app-content">
        <router-outlet></router-outlet>
      </section>

      <footer *ngIf="!isLoginView()" class="app-footer">
        <span>© 2026 App</span>
        <span class="footer-dot"></span>
        <span>Todos los derechos reservados</span>
        <span class="footer-dot"></span>
        <span>SSL/TLS Activo</span>
      </footer>

    </main>
  `
})
export class AppComponent {
  private router = inject(Router);

  isLoginView(): boolean {
    return this.router.url.includes('/login');
  }
}
