import { Component, computed, inject, input } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { NavigationEnd, Router, RouterLink } 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';

/** Organism: Rijksoverheid-style site header. Two tiers, like rijksoverheid.nl:
    a white brand bar (wordmark + session/logout) over a lint-blue bar carrying
    the breadcrumb. ponytail: text wordmark, not the licensed Rijksoverheid logo;
    no search box (no search feature yet). */
@Component({
  selector: 'app-site-header',
  imports: [RouterLink, BreadcrumbComponent],
  styles: [`
    :host{display:block}
    /* Tier 1 — white brand bar */
    .brandbar{background:var(--rhc-color-wit);border-block-end:var(--rhc-border-width-sm) solid var(--rhc-color-border-subtle);inline-size:100%}
    .brandbar .inner{display:flex;align-items:center;gap:var(--rhc-space-max-xl);max-inline-size:var(--app-content-max);margin-inline:auto;padding:var(--rhc-space-max-lg) var(--rhc-space-max-2xl);box-sizing:border-box}
    .brand{display:flex;align-items:center;gap:var(--rhc-space-max-lg);color:var(--rhc-color-foreground-default);text-decoration:none}
    .mark{display:inline-block;inline-size:var(--rhc-space-max-md);block-size:var(--rhc-space-max-4xl);background:var(--rhc-color-lintblauw-700)}
    .name{font-weight:var(--rhc-text-font-weight-bold);line-height:var(--rhc-text-line-height-sm)}
    .sub{font-weight:var(--rhc-text-font-weight-regular);font-size:var(--rhc-text-font-size-sm);color:var(--rhc-color-foreground-subtle)}
    .session{margin-inline-start:auto;display:flex;align-items:center;gap:var(--rhc-space-max-lg);font-size:var(--rhc-text-font-size-sm)}
    .user{color:var(--rhc-color-foreground-subtle)}
    .logout{background:none;border:0;padding:0;cursor:pointer;color:var(--rhc-color-foreground-link);text-decoration:underline;font:inherit}
    .logout:hover{color:var(--rhc-color-foreground-link-hover)}
    /* Tier 2 — blue breadcrumb bar */
    .navbar{background:var(--rhc-color-lintblauw-700);color:var(--rhc-color-foreground-on-primary);inline-size:100%}
    .navbar .inner{max-inline-size:var(--app-content-max);margin-inline:auto;padding:var(--rhc-space-max-md) var(--rhc-space-max-2xl);box-sizing:border-box}
  `],
  template: `
    <div class="brandbar">
      <div class="inner">
        <a routerLink="/dashboard" class="brand">
          <span aria-hidden="true" class="mark"></span>
          <span class="name" i18n="@@header.brand">Rijksoverheid<br><span class="sub">BIG-register</span></span>
        </a>
        <span class="portal sub">{{ subtitle() }}</span>
        @if (session(); as s) {
          <span class="session">
            <span class="user"><ng-container i18n="@@header.ingelogdAls">Ingelogd als</ng-container> {{ s.naam }}</span>
            <button type="button" class="logout" (click)="logout()" i18n="@@header.uitloggen">Uitloggen</button>
          </span>
        }
      </div>
    </div>
    @if (trail().length) {
      <div class="navbar">
        <div class="inner">
          <app-breadcrumb class="inverse" [items]="trail()" />
        </div>
      </div>
    }
  `,
})
export class SiteHeaderComponent {
  subtitle = input($localize`:@@header.subtitle:Mijn omgeving`);

  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']);
  }
}
