import { AclService } from '@allianz/taly-acl/angular';
import { WEB_COMPONENT_ID } from '@allianz/taly-common/web-components';
import {
  CHANNEL,
  CHANNEL_TOKEN,
  NO_MARGIN,
  TalyPageDataService,
  TalyStickyService,
  USE_ENHANCED_VERTICAL_SPACING
} from '@allianz/taly-core';
import { FooterConfiguration, StageConfiguration } from '@allianz/taly-core/schemas';
import {
  AfterViewInit,
  Component,
  ContentChild,
  DestroyRef,
  ElementRef,
  HostBinding,
  inject,
  Input,
  NgZone,
  OnChanges,
  OnDestroy,
  OnInit,
  Renderer2,
  SimpleChanges,
  TemplateRef,
  ViewChild
} from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { NavigationEnd, Router } from '@angular/router';
import { filter, map, skip, take, type Observable } from 'rxjs';
import { NavigationConfig } from '../frame-parts/navigation/model';
import { TalyFrameBannerService } from '../services/banner.service';
import { TalyFrameLayoutService } from '../services/frame-layout.service';
import { TalyFrameSidebarService } from '../services/sidebar.service';
import { TalyFrameNavigationService } from '../services/taly-frame-navigation-service';
import { TalyFrameSmallPrintService } from '../services/small-print.service';

@Component({
  selector: 'taly-frame',
  templateUrl: './frame.component.html',
  styleUrls: ['./frame.component.scss'],
  standalone: false
})
export class FrameComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy {
  frameLayoutService = inject(TalyFrameLayoutService);
  sidebarService = inject(TalyFrameSidebarService);
  private pageDataService = inject(TalyPageDataService);
  frameNavigationService = inject(TalyFrameNavigationService);
  private smallPrintService = inject(TalyFrameSmallPrintService);

  private el = inject(ElementRef);
  private renderer = inject(Renderer2);
  private pageId = '';

  @Input()
  chromeless = false;

  @HostBinding('class.no-header')
  get isHeaderHidden() {
    return this.chromeless || this.aclService.isHidden('taly-frame-header');
  }

  @HostBinding('class.has-banner')
  get hasBanner() {
    return this.hasBannerContent && !this.aclService.isHidden(this.pageId + '/banner');
  }

  get hasFooter() {
    return !this.chromeless && !this.aclService.isHidden('taly-frame-footer');
  }

  get hasOfferCode() {
    return this.hasOfferCodeContent && !this.aclService.isHidden(this.pageId + '/offer-code');
  }

  @HostBinding('class.has-header')
  get hasHeader() {
    return !this.isHeaderHidden;
  }

  @Input() title?: string;
  @Input() logoSrc?: string;

  private _centered = false;

  @Input()
  @HostBinding('class.is-centered')
  set centered(value: boolean) {
    this._centered = value;
  }

  get centered() {
    return this._centered || !this.hasNavigation;
  }

  @HostBinding('class.has-stage')
  _hasStage = false;

  hasSmallPrintContent = false;
  hasOfferCodeContent = false;

  @HostBinding('class.is-stacked')
  stackedLayout = false;

  @HostBinding('class.collapsed-navigation')
  collapsedNavigation = false;

  @Input()
  @HostBinding('class.has-sidebar')
  sidebar = false;

  @HostBinding('class.has-navigation')
  get hasNavigation() {
    if (
      this.navigationConfig?.sections === undefined ||
      this.navigationConfig?.sections?.size === 0 ||
      this.pageDataService.pageData?.navigation?.hidden
    ) {
      return false;
    }

    return true;
  }

  @Input() spinner = false;

  @Input() headerLogoLinkUrl?: string;

  @Input() footerConfig?: FooterConfiguration;
  @ContentChild('footerTemplate', { static: true, read: TemplateRef })
  public footerTemplate?: TemplateRef<FooterConfiguration>;

  @Input() stageConfig?: StageConfiguration;

  @Input() navigationConfig?: NavigationConfig;

  @Input() offerCodeStateKey?: string;

  @ContentChild('headerTemplate', { static: true, read: TemplateRef })
  public headerTemplate?: TemplateRef<unknown>;

  hasStage$!: Observable<boolean>;
  offerCode$: Observable<string | undefined> | undefined;
  actionsBackgroundColor: string | undefined = 'transparent';
  errorMessage: string | undefined;
  hasBannerContent = false;
  hasJumpNavigationMenu = false;

  private domChanges!: MutationObserver;
  private lastNotificationsDisplayedTotal = 0;
  isRetailChannel: boolean;

  @ViewChild('frameContent', { read: ElementRef }) private frameContent!: ElementRef<HTMLElement>;
  @ViewChild('frameHeader', { read: ElementRef }) private frameHeader:
    | ElementRef<HTMLElement>
    | undefined;
  @ViewChild('frameBanner', { read: ElementRef }) private frameBanner!: ElementRef<HTMLElement>;

  private destroyRef = inject(DestroyRef);
  private aclService = inject(AclService);
  private bannerService = inject(TalyFrameBannerService);
  private stickyService = inject(TalyStickyService);

  @HostBinding('class.use-enhanced-vertical-spacing')
  useEnhancedVerticalSpacing = inject(USE_ENHANCED_VERTICAL_SPACING);

  private webComponentId = inject(WEB_COMPONENT_ID, { optional: true });

  private router = inject(Router);
  private ngZone = inject(NgZone);

  protected hasMargin = !inject(NO_MARGIN);
  protected initialRoutingDone = false;

  constructor() {
    const channel = inject<CHANNEL>(CHANNEL_TOKEN);

    this.isRetailChannel = channel === CHANNEL.RETAIL;

    this.router.events
      .pipe(
        filter((event) => event instanceof NavigationEnd),
        take(1)
      )
      .subscribe(() => {
        this.initialRoutingDone = true;
      });
  }

  ngOnInit(): void {
    this.setSubscriptions();
    this.setOfferCode();
    this.disableBackgroundScrolling();
    this.setJumpNavigationMenuFlag();
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes['navigationConfig']?.firstChange === false) {
      this.setJumpNavigationMenuFlag();
    }
  }

  private setJumpNavigationMenuFlag() {
    this.hasJumpNavigationMenu = Boolean(
      this.navigationConfig?.jumpNavigationMenu &&
        this.navigationConfig?.jumpNavigationMenu.items.length > 0
    );
  }

  onResize(value: number) {
    this.el.nativeElement.style.setProperty('--navigation-width', `${value}px`);
  }

  private setOfferCode() {
    if (this.offerCodeStateKey) {
      this.offerCode$ = this.frameNavigationService.getOfferCode$(this.offerCodeStateKey);

      if (this.offerCode$) {
        this.offerCode$
          .pipe(takeUntilDestroyed(this.destroyRef))
          .subscribe((offerCode) => (this.hasOfferCodeContent = Boolean(offerCode)));
      }
    }
  }

  private setSubscriptions() {
    this.frameLayoutService.isStackedLayoutObservable
      .pipe(
        takeUntilDestroyed(this.destroyRef),
        filter(() => !this.hasJumpNavigationMenu)
      )
      .subscribe((value) => (this.stackedLayout = value));
    this.frameLayoutService.collapseNavigationUser$
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe((value) => (this.collapsedNavigation = value));
    this.sidebarService.setVisibility(this.sidebar);
    this.sidebarService.show$
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe((value) => (this.sidebar = value));

    this.hasStage$ = this.pageDataService.pageData$.pipe(
      takeUntilDestroyed(this.destroyRef),
      map((pageData) => Object.keys(pageData.stage ?? {}).length > 0)
    );

    this.hasStage$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => {
      this._hasStage = value;
    });

    this.bannerService.template$
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe((template) => (this.hasBannerContent = Boolean(template)));

    this.pageDataService.pageId$
      .pipe(
        takeUntilDestroyed(this.destroyRef),
        // in case of a web component:
        // skip the first emitted page ID to avoid focusing something.
        // Focusing automatically scrolls the focused element into view.
        // We don't want that behavior for web components.
        // See https://github.developer.allianz.io/ilt/taly-workspace/issues/2546
        skip(this.webComponentId ? 1 : 0)
      )
      .subscribe(() => setTimeout(() => this.setFocus()));

    this.smallPrintService.templateList$
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe((templateList) => (this.hasSmallPrintContent = templateList.length > 0));

    this.pageDataService.pageId$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => {
      this.pageId = value;
    });
  }

  ngAfterViewInit(): void {
    this.listenToDomChanges();
    this.stickyService.addStickyElement(this.frameBanner);
    if (!this.isRetailChannel && this.frameHeader) {
      this.stickyService.addStickyElement(this.frameHeader);
    }
  }

  disableBackgroundScrolling(): void {
    if (this.spinner) {
      this.frameNavigationService.applicationBusy$
        .pipe(takeUntilDestroyed(this.destroyRef))
        .subscribe((isApplicationBusy: boolean) => {
          const overflowValue = isApplicationBusy ? 'hidden' : 'visible';
          this.renderer.setStyle(document.body, 'overflow', overflowValue);
        });
    }
  }

  private listenToDomChanges(): void {
    const hasContent = (section: HTMLElement) =>
      Boolean(section.querySelector('.building-block-element'));

    this.ngZone.runOutsideAngular(() => {
      this.domChanges = new MutationObserver(() => {
        this.manageFirstVisibleContentAreaSection();
        this.scrollToNotificationsIfNecessary();

        const allSections: HTMLElement[] = Array.from(
          this.frameContent.nativeElement.querySelectorAll('.section-wrapper')
        );

        const allPanels: HTMLElement[] = Array.from(
          this.frameContent.nativeElement.querySelectorAll('.panel-wrapper')
        );

        [...allSections, ...allPanels].forEach((item) => {
          item.classList.toggle('is-empty', !hasContent(item));
        });

        if (this.isRetailChannel && !this.useEnhancedVerticalSpacing) {
          const lastVisibleSection: HTMLElement | undefined = allSections
            .reverse()
            .find(hasContent);

          this.actionsBackgroundColor =
            lastVisibleSection?.style?.getPropertyValue('--background-color') || 'transparent';
        }
      });
    });

    this.domChanges.observe(this.frameContent.nativeElement, {
      subtree: true,
      childList: true
    });
  }

  private manageFirstVisibleContentAreaSection(): void {
    const hasContent = (section: HTMLElement) =>
      Boolean(section.querySelector('.building-block-element'));

    const allContentAreaSections: HTMLElement[] = Array.from(
      this.frameContent.nativeElement.querySelectorAll('.section')
    );

    allContentAreaSections.forEach(function resetPreviousFirstContentAreaSection(item) {
      item.classList.remove('first-with-content');
    });

    const firstVisibleSection: HTMLElement | undefined = allContentAreaSections.find(hasContent);
    firstVisibleSection?.classList.add('first-with-content');
  }

  private scrollToNotificationsIfNecessary(): void {
    const currentNotificationsDisplayedTotal = Array.from(
      this.frameContent.nativeElement.querySelectorAll('.js-notification-content')
    ).length;

    if (currentNotificationsDisplayedTotal > this.lastNotificationsDisplayedTotal) {
      const scrollMargin = this.stickyService.getStickyElementHeights();
      this.renderer.setStyle(
        this.frameContent.nativeElement,
        'scroll-margin-top',
        `${scrollMargin}px`
      );
      this.frameContent.nativeElement.scrollIntoView({ behavior: 'smooth' });
    }
    this.lastNotificationsDisplayedTotal = currentNotificationsDisplayedTotal;
  }

  private setFocus() {
    const hasStage = this.pageDataService.pageData?.stage?.showAsStage;
    if (hasStage) {
      const stage = document.querySelector<HTMLElement>('.js-stage-headline');
      stage?.focus();
      return;
    }

    const pageTitle = document.querySelector<HTMLElement>('.js-page-headline');
    if (pageTitle) {
      pageTitle.focus();
      return;
    }

    if (this.hasBannerContent) {
      const banner = document.querySelector<HTMLElement>('.js-banner');
      banner?.focus();
      return;
    }

    const overarchingDetails = document.querySelector<HTMLElement>('.js-overarching-details');
    if (overarchingDetails) {
      overarchingDetails.focus();
      return;
    }

    document.getElementById('frameContent')?.focus();
  }

  ngOnDestroy(): void {
    this.domChanges?.disconnect();
  }
}