import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
import { RouterLink, RouterLinkActive } from '@angular/router';
import { Icon, type IconName } from 'shared-ui';
import { LayoutStateService } from 'shared-state';

/**
 * Primary side navigation.
 *
 * Two visual modes:
 *   - expanded (default): icon + label + group titles. ~256 px wide.
 *   - collapsed: icon-only. ~64 px wide. Group titles hide; labels
 *     remain in the accessible name of each link via `aria-label`.
 *
 * The collapsed state is owned by `LayoutStateService` (shell-level
 * shared state) so the header's logo zone can size itself to match
 * the sidebar rail.
 *
 * v1 menu is static and points to `#` placeholders — the live routes
 * land alongside the auth flow (ADR-0009). The shape is already
 * permission-shaped (`requiredPermissions?: string[]`) so PR 2 can
 * plug in a filter without restructuring the data. The Dashboard
 * entry uses `routerLink="/"` so the active-state styling is visible
 * on the home page; the rest are anchors until real routes exist.
 *
 * String localisation: the menu data uses `$localize` tagged template
 * literals (per ADR-0019). The literals evaluate at module load — the
 * `@angular/localize/init` polyfill is loaded before the bundle so
 * the active-locale value is resolved by the time MENU is built.
 */

export interface MenuItem {
  readonly label: string;
  readonly icon: IconName;
  /** v1: anchor placeholder. v2: Angular route path. */
  readonly href?: string;
  readonly routerLink?: string;
  /** Reserved for PR 2 (permission-aware filtering). */
  readonly requiredPermissions?: readonly string[];
}

export interface MenuGroup {
  readonly label: string;
  readonly items: readonly MenuItem[];
}

const MENU: readonly MenuGroup[] = [
  {
    label: $localize`:@@sidebar.group.general:General`,
    items: [
      {
        label: $localize`:@@sidebar.item.dashboard:Dashboard`,
        icon: 'layout-dashboard',
        routerLink: '/',
      },
      { label: $localize`:@@sidebar.item.calendar:Calendar`, icon: 'calendar', href: '#' },
    ],
  },
  {
    label: $localize`:@@sidebar.group.establishments:Establishments`,
    items: [
      { label: $localize`:@@sidebar.item.directory:Directory`, icon: 'building-2', href: '#' },
      { label: $localize`:@@sidebar.item.activities:Activities`, icon: 'folder', href: '#' },
    ],
  },
  {
    label: $localize`:@@sidebar.group.communication:Communication`,
    items: [
      { label: $localize`:@@sidebar.item.messages:Messages`, icon: 'mail', href: '#' },
      { label: $localize`:@@sidebar.item.documents:Documents`, icon: 'file-text', href: '#' },
    ],
  },
];

@Component({
  selector: 'app-sidebar',
  imports: [RouterLink, RouterLinkActive, Icon],
  templateUrl: './sidebar.html',
  styleUrl: './sidebar.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class Sidebar {
  private readonly layout = inject(LayoutStateService);

  protected readonly menu = MENU;
  protected readonly collapsed = this.layout.sidebarCollapsed;

  protected readonly toggleAriaLabel = computed(() =>
    this.collapsed()
      ? $localize`:@@sidebar.toggle.aria.expand:Expand sidebar`
      : $localize`:@@sidebar.toggle.aria.collapse:Collapse sidebar`,
  );

  protected toggle(): void {
    this.layout.toggleSidebar();
  }
}
