library/apps/frontend/src/app/components/header/header.component.ts

/**
 * @copyright 2026 NHCarrigan
 * @license Naomi's Public License
 * @author Naomi Carrigan
 */

import { Component, inject, signal, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { AuthService } from '../../services/auth.service';
import { ApiService } from '../../services/api.service';

@Component({
  selector: 'app-header',
  standalone: true,
  imports: [CommonModule, RouterModule],
  template: `
    <header class="header">
      <nav class="navbar">
        <div class="nav-brand">
          <h1><a routerLink="/">Naomi's Library</a></h1>
          @if (version()) {
            <span class="version">v{{ version() }}</span>
          }
        </div>

        <ul class="nav-links">
          <li><a routerLink="/games" routerLinkActive="active">Games</a></li>
          <li><a routerLink="/books" routerLinkActive="active">Books</a></li>
          <li><a routerLink="/music" routerLinkActive="active">Music</a></li>
          <li><a routerLink="/shows" routerLinkActive="active">Shows</a></li>
          <li><a routerLink="/manga" routerLinkActive="active">Manga</a></li>
          <li><a routerLink="/art" routerLinkActive="active">Art</a></li>
        </ul>

        <div class="auth-section">
          @if (authService.user(); as user) {
            <span class="welcome">Welcome, {{ user.username }}!</span>
            @if (!user.isAdmin) {
              <a routerLink="/my-suggestions" class="user-link">My Suggestions</a>
            }
            <a routerLink="/my-likes" class="user-link">My Likes</a>
            @if (user.isAdmin) {
              <a routerLink="/admin/users" class="admin-badge">Users</a>
              <a routerLink="/admin/audit" class="admin-badge">Audit</a>
              <a routerLink="/admin/suggestions" class="admin-badge">Suggestions</a>
            }
            <button (click)="logout()" class="btn btn-secondary">Logout</button>
          } @else {
            <button (click)="login()" class="btn btn-primary">Login with Discord</button>
          }
        </div>
      </nav>
    </header>
  `,
  styles: [`
    .header {
      background-color: var(--witch-purple);
      color: var(--witch-moon);
      padding: 0;
      box-shadow: 0 2px 8px var(--witch-shadow);
    }

    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem 2rem;
      max-width: 1200px;
      margin: 0 auto;
    }

    .nav-brand h1 {
      margin: 0;
      font-size: 1.5rem;
    }

    .nav-brand a {
      color: var(--witch-moon);
      text-decoration: none;
      font-weight: 600;
    }

    .version {
      font-size: 0.7rem;
      color: var(--witch-lavender);
      opacity: 0.8;
      margin-left: 0.5rem;
    }

    .nav-links {
      display: flex;
      list-style: none;
      gap: 1rem;
      margin: 0;
      padding: 0;
      flex-wrap: wrap;
    }

    .nav-links a {
      color: var(--witch-lavender);
      text-decoration: none;
      padding: 0.5rem 1rem;
      border-radius: 4px;
      transition: all 0.3s;
    }

    .nav-links a:hover,
    .nav-links a.active {
      background-color: var(--witch-plum);
      color: var(--witch-moon);
    }

    .auth-section {
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .welcome {
      font-size: 0.9rem;
      color: var(--witch-lavender);
    }

    .admin-badge {
      background-color: var(--witch-rose);
      color: var(--witch-moon);
      padding: 0.25rem 0.5rem;
      border-radius: 4px;
      font-size: 0.8rem;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.3s;
    }

    .admin-badge:hover {
      background-color: var(--witch-plum);
      transform: translateY(-2px);
    }

    .user-link {
      color: var(--witch-lavender);
      text-decoration: none;
      font-size: 0.9rem;
      padding: 0.25rem 0.5rem;
      border-radius: 4px;
      transition: all 0.3s;
    }

    .user-link:hover {
      background-color: var(--witch-plum);
      color: var(--witch-moon);
    }

    .btn {
      padding: 0.5rem 1rem;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 0.9rem;
      transition: all 0.3s;
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px var(--witch-shadow);
    }

    .btn-primary {
      background-color: var(--witch-rose);
      color: var(--witch-moon);
    }

    .btn-primary:hover {
      background-color: var(--witch-plum);
    }

    .btn-secondary {
      background-color: var(--witch-mauve);
      color: var(--witch-purple);
    }

    .btn-secondary:hover {
      background-color: var(--witch-rose);
      color: var(--witch-moon);
    }
  `]
})
export class HeaderComponent implements OnInit {
  authService = inject(AuthService);
  private apiService = inject(ApiService);
  version = signal<string | null>(null);

  ngOnInit() {
    this.apiService.get<{ version: string }>('/version').subscribe({
      next: (response) => this.version.set(response.version),
      error: () => this.version.set(null)
    });
  }

  login() {
    this.authService.login();
  }

  logout() {
    this.authService.logout().subscribe();
  }
}