import { Component, computed, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterLink, RouterOutlet } from '@angular/router';
import { BootstrapService } from '../../core/services/bootstrap.service';
import { AuthService } from '../../core/services/auth.service';
import { shouldShowAdminNav } from './home.shell';

export { shouldShowAdminNav } from './home.shell';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [CommonModule, RouterLink, RouterOutlet],
  template: `
    <div class="container">
      <header class="shell-header">
        <h1 class="shell-title">{{ bootstrap.payload()?.pageTitle ?? 'HIPCTF' }}</h1>
        <div class="shell-user" *ngIf="auth.isAuthenticated()">
          <span>Signed in as <b>{{ auth.currentUser()?.username }}</b> ({{ auth.currentUser()?.role }})</span>
        </div>
      </header>

      <nav class="shell-nav" *ngIf="showAdminNav()">
        <a routerLink="/admin" data-testid="nav-admin">Admin</a>
      </nav>

      <section class="shell-body">
        <div *ngIf="!auth.isAuthenticated()">
          <p>{{ bootstrap.payload()?.welcomeMarkdown }}</p>
          <a href="/login">Sign in</a>
        </div>
        <router-outlet></router-outlet>
      </section>
    </div>
  `,
})
export class HomeComponent {
  bootstrap = inject(BootstrapService);
  auth = inject(AuthService);

  readonly showAdminNav = computed(() =>
    shouldShowAdminNav({
      isAuthenticated: this.auth.isAuthenticated(),
      role: this.auth.currentUser()?.role,
    }),
  );
}