import { PfeNavigationService } from '@allianz/ngx-pfe';
import { createStaticAclTagProvider } from '@allianz/taly-acl/angular';
import { Stage, TalyPageDataService } from '@allianz/taly-core';
import { BuildingBlockMetaService } from '@allianz/taly-core/building-blocks';
import { TalyFrameSidebarService } from '@allianz/taly-core/frame';
import {
  DynamicFormBBConfiguration,
  isDynamicFormBbConfig,
  NotificationConfig,
  PageConfiguration
} from '@allianz/taly-core/schemas';
import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  effect,
  inject,
  OnInit
} from '@angular/core';
import { PFEBuildingBlockPage } from '../../pfe-building-block-page';
import { DynamicBuildingBlockMetaService } from '../dynamic-building-block-meta-service/dynamic-building-block-meta-service';
import { PfeRuntimeConfigService } from '../pfe-runtime-config/pfe-runtime-config.service';

@Component({
  selector: 'pfe-dynamic-page',
  templateUrl: './pfe-dynamic-page.component.html',
  providers: [
    createStaticAclTagProvider('pfe-dynamic-page'),
    {
      provide: BuildingBlockMetaService,
      useClass: DynamicBuildingBlockMetaService
    }
  ],
  standalone: false,
  // This component imperatively updates state (blocks, title, notifications) via effects.
  // It must use Eager change detection so that those updates are reflected in the view.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
  changeDetection: ChangeDetectionStrategy.Eager
})
export class PfeDynamicPageComponent extends PFEBuildingBlockPage implements OnInit {
  blocks: DynamicFormBBConfiguration[] = [];

  override id = '';

  protected title = '';
  protected subtitle = '';
  protected notifications: NotificationConfig[] = [];
  protected notificationColumnSpan = 12;

  private pfeNavigationService = inject(PfeNavigationService);
  private runtimeConfigService = inject(PfeRuntimeConfigService);
  private talyPageDataService = inject(TalyPageDataService);
  private sidebarService = inject(TalyFrameSidebarService);
  private cdr = inject(ChangeDetectorRef);

  constructor() {
    super();

    effect(async () => {
      if (!this.id || !this.runtimeConfigService.pagesConfig()) {
        return;
      }

      const currentPageConfig = this.runtimeConfigService
        .pagesConfig()
        .pages?.find((page) => page.id === this.id);

      if (!currentPageConfig) {
        const firstPage = await this.pfeNavigationService.getFirstPage();
        if (!firstPage) {
          console.error(
            `Unable to find the configuration for page "${this.id}" or determine the first page.`
          );
          return;
        }

        console.warn(
          `Unable to find the configuration for page "${this.id}". Navigating to the first page.`
        );
        this.pfeNavigationService.navigateToPageId(firstPage);
        return;
      }

      this.renderPageContent(currentPageConfig);
      this.renderPageTitle(currentPageConfig);
      this.renderNotifications(currentPageConfig);
      this.renderFrame(currentPageConfig);
      this.cdr.markForCheck();
    });
  }

  override ngOnInit(): void {
    super.ngOnInit();
    this.id = this.pfeNavigationService.currentPageId$.value as string;
    this.talyPageDataService.setPageId(this.id);
  }

  private renderPageContent(currentPageConfig: PageConfiguration) {
    this.blocks = (currentPageConfig?.blocks ?? []).filter(
      (block): block is DynamicFormBBConfiguration => {
        if (!isDynamicFormBbConfig(block)) {
          console.warn(
            `Skipping Building Block '${block.id}': Building Blocks cannot be used in TALY runtime web components. Only Dynamic Forms are supported.`
          );
          return false;
        }
        return true;
      }
    );

    this.sidebarService.setVisibility(this.blocks.some((block) => block.sidebar));
  }

  private renderFrame(currentPageConfig: PageConfiguration) {
    this.talyPageDataService.storeData({
      ...currentPageConfig.pageData,
      stage: (currentPageConfig.title as Stage)?.showAsStage
        ? (currentPageConfig.title as Stage)
        : undefined,
      smallPrint: currentPageConfig.smallPrint ? currentPageConfig.smallPrint : undefined,
      sidebar: currentPageConfig.sidebar ? currentPageConfig.sidebar : undefined
    });
  }

  private renderNotifications(currentPageConfig: PageConfiguration) {
    this.notifications = currentPageConfig.notificationsGroup?.items ?? [];
    this.notificationColumnSpan = currentPageConfig.notificationsGroup?.columnSpan ?? 12;
  }

  private renderPageTitle(currentPageConfig: PageConfiguration) {
    this.title = '';
    this.subtitle = '';

    if (typeof currentPageConfig.title === 'string') {
      this.title = currentPageConfig.title;
    } else if (
      typeof currentPageConfig.title === 'object' &&
      currentPageConfig.title.showAsStage !== true
    ) {
      this.title = currentPageConfig.title.headline;
      this.subtitle = currentPageConfig.title?.subline || '';
    }
  }
}