import { FocusKeyManager } from '@angular/cdk/a11y';
import {
  AfterViewInit,
  ChangeDetectionStrategy,
  Component,
  computed,
  effect,
  inject,
  Injector,
  viewChildren,
  input,
  output
} from '@angular/core';
import { MOBILE_STEP_LABEL_KEY, SectionConfig, SectionWithState } from './model';
import { StepState } from './navigation-step-state';
import { NavigationStepComponent } from './navigation-step.component';
import { pushEvent } from '@allianz/tracking';
import { IS_A1, NO_MARGIN, TalyRuntimeLocalizationService } from '@allianz/taly-core';

@Component({
  selector: 'frame-navigation-view',
  templateUrl: './navigation-view.component.html',
  styleUrls: ['./navigation-view.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: {
    '[class.is-horizontal]': 'horizontal()',
    '[class.is-a1]': 'isA1',
    '[class.has-margin]': 'hasMargin'
  },
  imports: [NavigationStepComponent]
})
export class NavigationViewComponent implements AfterViewInit {
  readonly horizontal = input(false);
  readonly collapsed = input(false);
  readonly compact = input(false);
  readonly sectionStates = input<SectionWithState[]>([]);
  readonly sections = input<SectionConfig>();
  readonly isForbidden = input(false);
  readonly goto = output<string>();

  private talyRuntimeLocalizationService = inject(TalyRuntimeLocalizationService);
  private injector = inject(Injector);
  readonly isA1 = inject(IS_A1);
  readonly hasMargin = !inject(NO_MARGIN);
  private readonly currentState = computed(() => this.getCurrentState());
  private previousState: SectionWithState | undefined;
  readonly mobileBreadcrumbsText = computed(() => this.getMobileBreadcrumbsText());
  focusIndex: number | null = null;

  readonly items = viewChildren(NavigationStepComponent);

  private keyManager!: FocusKeyManager<NavigationStepComponent>;

  constructor() {
    effect(() => {
      const previousState = this.previousState;
      const currentState = this.currentState();

      // this.keyManager is only assigned in ngAfterViewInit; guard defensively since
      // this effect's first run relative to that lifecycle hook is not guaranteed
      if (this.keyManager) {
        this.keyManager.updateActiveItem(this.currentSectionIndex);
      }

      if (this.hasCurrentStepChanged(previousState)) {
        this.trackNavigationEvent();
      }

      this.previousState = currentState;
    });
  }

  onKeydown($event: KeyboardEvent, { sectionId }: { sectionId: string }) {
    const key = $event.key;
    if (key === 'Enter') {
      this.requestSection({ sectionId });
      $event.preventDefault();
    } else {
      this.keyManager.onKeydown($event);
      this.focusIndex = this.getFocusIndex();
    }
  }

  ngAfterViewInit() {
    this.keyManager = new FocusKeyManager(this.items, this.injector)
      .withWrap()
      .skipPredicate((item) => item.isPending)
      .withHorizontalOrientation('ltr')
      .withVerticalOrientation();
  }

  getSectionLabel(id: string) {
    const section = this.sections()?.get(id);
    return section?.label;
  }

  private getCurrentState(): SectionWithState | undefined {
    return this.sectionStates().find((item) => item.state === StepState.CURRENT);
  }

  private getFocusIndex() {
    return this.keyManager.activeItemIndex;
  }

  get currentSectionIndex() {
    const currentState = this.currentState();
    return currentState ? this.sectionStates().indexOf(currentState) : -1;
  }

  requestSection({ sectionId }: { sectionId: string }) {
    this.goto.emit(sectionId);
  }

  private trackNavigationEvent() {
    const currentState = this.currentState();
    if (!currentState) return;

    const currentIndex = this.currentSectionIndex;
    const totalSteps = this.sectionStates().length;

    const baseEventName = 'navigation';
    pushEvent(baseEventName, {
      currentStep: currentIndex + 1,
      totalSteps,
      stepId: currentState.sectionId,
      stepLabel: this.getSectionLabel(currentState.sectionId)
    });
  }

  private hasCurrentStepChanged(previousState: SectionWithState | undefined): boolean {
    return previousState?.sectionId !== this.currentState()?.sectionId;
  }

  private getMobileBreadcrumbsText(): string | undefined {
    const currentState = this.currentState();
    let text: string | undefined;
    if (currentState) {
      const configuredLabel =
        String(this.talyRuntimeLocalizationService.getTranslation(MOBILE_STEP_LABEL_KEY)()) ||
        $localize`Step `;
      text =
        `${configuredLabel.trim()} ` +
        `${this.currentSectionIndex + 1}/${this.sectionStates().length}` +
        $localize`:@@frame.navigation.step-separator::` +
        ` ${this.getSectionLabel(currentState.sectionId)}`;
    }
    return text;
  }
}