import {
  ChangeDetectionStrategy,
  Component,
  computed,
  DestroyRef,
  inject,
  signal,
} from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { CurrentAccountService } from '@aurora';
import { TranslocoService } from '@jsverse/transloco';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideCommand } from '@ng-icons/lucide';
import { HlmSidebarImports } from '@spartan-ng/helm/sidebar';
import { navigationData } from '../../navigation-data';
import { NavMain } from './nav-main';
import { NavProjects } from './nav-projects';
import { NavSecondary } from './nav-secondary';
import { NavUser } from './nav-user';
import type { NavItem, NavSubItem } from './types';

@Component({
  selector: 'app-sidebar',
  imports: [HlmSidebarImports, NgIcon, NavMain, NavProjects, NavUser, NavSecondary],
  providers: [provideIcons({ lucideCommand })],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div hlmSidebarWrapper>
      <hlm-sidebar variant="inset">
        <hlm-sidebar-header>
          <ul hlmSidebarMenu>
            <li hlmSidebarMenuItem>
              <a
                hlmSidebarMenuButton
                size="lg"
                href="/"
              >
                <div
                  class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg"
                >
                  <ng-icon
                    name="lucideCommand"
                    class="text-base"
                  />
                </div>
                <div class="grid flex-1 text-left text-sm leading-tight">
                  <span class="truncate font-medium">Aurora</span>
                  <span class="truncate text-xs">Catalyst</span>
                </div>
              </a>
            </li>
          </ul>
        </hlm-sidebar-header>

        <hlm-sidebar-content>
          <app-nav-main
            [label]="platformLabel()"
            [items]="navMain()"
          />
          <app-nav-projects
            [label]="projectsLabel()"
            [projects]="projects()"
          />
          <app-nav-secondary
            class="mt-auto"
            [items]="navSecondary()"
          />
        </hlm-sidebar-content>

        <hlm-sidebar-footer>
          <app-nav-user [user]="user()" />
        </hlm-sidebar-footer>
      </hlm-sidebar>
      <ng-content />
    </div>
  `,
})
export class AppSidebar {
  // injections
  private readonly transloco = inject(TranslocoService);
  private readonly destroyRef = inject(DestroyRef);
  private readonly currentAccount = inject(CurrentAccountService);

  readonly data = navigationData();

  // The logged-in user shown in the sidebar footer, loaded via `iamMeAccount`
  // (CurrentAccountService). Blank until it resolves — never the old hardcoded values.
  readonly user = computed(() => ({
    name: this.currentAccount.displayName(),
    email: this.currentAccount.email(),
    avatar: '/assets/avatar.png',
  }));

  // Reactive translated data — updated on language change.
  // Global and navigation scopes are loaded eagerly in provideAppInitializer.
  // Cannot use *transloco directive here (blocks ng-content render).
  readonly platformLabel = signal(this.transloco.translate('navigation.Platform'));
  readonly projectsLabel = signal(this.transloco.translate('navigation.Projects'));
  readonly navMain = signal(this.translateItems(this.data.navMain));
  readonly navSecondary = signal(this.translateItems(this.data.navSecondary));
  readonly projects = signal(this.translateItems(this.data.projects));

  constructor() {
    // Re-evaluate when navigation translations are ready (initial load + language change)
    this.transloco
      .selectTranslation('navigation')
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe(() => {
        this.platformLabel.set(this.transloco.translate('navigation.Platform'));
        this.projectsLabel.set(this.transloco.translate('navigation.Projects'));
        this.navMain.set(this.translateItems(this.data.navMain));
        this.navSecondary.set(this.translateItems(this.data.navSecondary));
        this.projects.set(this.translateItems(this.data.projects));
      });
  }

  private translateItems(items: NavItem[]): NavItem[];
  private translateItems(items: NavSubItem[]): NavSubItem[];
  private translateItems(items: (NavItem | NavSubItem)[]): (NavItem | NavSubItem)[] {
    return items.map((item) => ({
      ...item,
      title: this.transloco.translate(item.translation),
      items: item.items ? this.translateItems(item.items) : undefined,
    }));
  }
}
