import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
import { RouterLink } from '@angular/router';
import { AuthService, type CurrentUser } from 'feature-auth';
import { Icon } from 'shared-ui';
import { LayoutStateService } from 'shared-state';
import { ThemeSwitcher } from '../theme-switcher/theme-switcher';

/**
 * Top-of-page banner.
 *
 * v1 layout (left → right):
 *   - Logo zone — sized to the sidebar rail so the brand sits flush
 *     above the navigation column. When the sidebar collapses, the
 *     logo zone shrinks too and the wordmark hides, leaving just the
 *     glyph centered above the icon-only rail. Driven by
 *     `LayoutStateService`.
 *   - Global search input (placeholder; wired to a real search service
 *     once we have content to query).
 *   - Action cluster: notifications, help, settings, and a user
 *     widget. The widget renders one of three states — loading,
 *     anonymous (a "Sign in" button), authenticated (avatar with
 *     initials + display name + "Sign out" button) — driven by
 *     `AuthService` (ADR-0009).
 *
 * Lives at app level (not in libs/shared/ui/) on purpose: one consumer
 * for now. Promotion when a second app needs it.
 */
@Component({
  selector: 'app-header',
  imports: [RouterLink, Icon, ThemeSwitcher],
  templateUrl: './header.html',
  styleUrl: './header.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class Header {
  private readonly layout = inject(LayoutStateService);
  private readonly auth = inject(AuthService);

  protected readonly collapsed = this.layout.sidebarCollapsed;

  protected readonly authState = this.auth.state;

  protected readonly initials = computed(() => {
    const user = this.auth.currentUser();
    return user ? initialsFor(user) : '';
  });

  protected signIn(): void {
    this.auth.login();
  }

  protected signOut(): void {
    this.auth.logout();
  }
}

function initialsFor(user: CurrentUser): string {
  const name = (user.displayName || user.username).trim();
  if (!name) {
    return '?';
  }
  const parts = name.split(/\s+/).filter(Boolean).slice(0, 2);
  const letters = parts.map((p) => p.charAt(0).toUpperCase()).join('');
  // Fallback to first two chars of the trimmed string when the
  // split produced an empty array (single-word names with no
  // whitespace already covered by parts[0]).
  return letters || name.slice(0, 2).toUpperCase();
}
