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">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6 4L13 12L6 20" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M13 4H18" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
              <path d="M13 20H18" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
            </svg>
          </div>
          <div class="header-wordmark">
            <span class="header-name">App</span>
            <span class="header-sub">Intranet Corporativa</span>
          </div>
        </a>
        <div class="header-meta">Consorcio · 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');
  }
}
