import { Component, computed, inject } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router';
import { filter, map } from 'rxjs/operators';
import { SESSION_PORT } from '@shared/application/session.port';
import { BreadcrumbComponent } from '@shared/layout/breadcrumb/breadcrumb.component';
import { trailFor } from '@shared/layout/breadcrumb/breadcrumb-trail';

interface HeaderNavItem {
  readonly label: string;
  readonly to: string;
}

const NAV_ITEMS: readonly HeaderNavItem[] = [
  { label: $localize`:@@header.nav.overzicht:Overzicht`, to: '/dashboard' },
  { label: $localize`:@@header.nav.gegevens:Mijn gegevens`, to: '/registratie' },
  { label: $localize`:@@header.nav.herregistratie:Herregistratie`, to: '/herregistratie' },
  { label: $localize`:@@header.nav.inschrijven:Inschrijven`, to: '/registreren' },
];

/** Organism: CIBG Huisstijl site header — logo block, robijn titlebar (breadcrumb +
    user menu), horizontal nav. ponytail: text wordmark, not the licensed Rijksoverheid
    beeldmerk; no search box (no search feature yet). */
@Component({
  selector: 'app-site-header',
  imports: [RouterLink, RouterLinkActive, BreadcrumbComponent],
  styles: [
    `
      .logout {
        background: none;
        border: 0;
        padding: 0;
        cursor: pointer;
        text-decoration: underline;
        font: inherit;
        color: inherit;
      }
      /* CIBG's header nav has no bg by default in this build — the grey bar is ours.
       (.titlebar keeps its own robijn fill — --ro-layout — untouched; the breadcrumb
       inside it has no background of its own, so the bar's colour shows through.) */
      nav {
        background-color: var(--rhc-color-cool-grey-200);
      }
    `,
  ],
  template: `
    <header>
      <div class="logo">
        <div class="logo__wrapper">
          <a routerLink="/dashboard" class="logo__link">
            <figure class="logo__figure">
              <figcaption class="logo__text">
                <span class="logo__sender" i18n="@@header.sender">BIG-register</span>
                <span class="logo__ministry" i18n="@@header.ministry"
                  >Ministerie van Volksgezondheid, Welzijn en Sport</span
                >
              </figcaption>
            </figure>
          </a>
        </div>
      </div>
      <div class="titlebar">
        <div class="container">
          <div class="row">
            <div class="title col-md-7">
              @if (trail().length) {
                <app-breadcrumb [items]="trail()" />
              }
            </div>
            <div class="user-menu col-md-5">
              @if (session(); as s) {
                <div>
                  <span class="login-name">{{ s.naam }}</span>
                </div>
                <div>
                  <button type="button" class="logout" (click)="logout()" i18n="@@header.uitloggen">
                    Uitloggen
                  </button>
                </div>
              }
            </div>
          </div>
        </div>
      </div>
      <nav i18n-aria-label="@@header.navAria" aria-label="Hoofdnavigatie">
        <div class="container">
          <ul>
            @for (item of navItems; track item.to) {
              <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
                <a [routerLink]="item.to">{{ item.label }}</a>
              </li>
            }
          </ul>
        </div>
      </nav>
    </header>
  `,
})
export class SiteHeaderComponent {
  protected readonly navItems = NAV_ITEMS;

  private router = inject(Router);
  private sessionPort = inject(SESSION_PORT, { optional: true });

  readonly session = computed(() => this.sessionPort?.session() ?? null);
  private url = toSignal(
    this.router.events.pipe(
      filter((e) => e instanceof NavigationEnd),
      map(() => this.router.url),
    ),
    { initialValue: this.router.url },
  );
  protected trail = computed(() => trailFor(this.url()));

  logout() {
    this.sessionPort?.logout();
    this.router.navigate(['/login']);
  }
}
