import {NgClass} from '@angular/common';
import {
  OnInit,
  afterNextRender,
  Component,
  DestroyRef,
  ElementRef,
  EventEmitter,
  inject,
  Injector,
  Input,
  Output,
  ViewChild,
  booleanAttribute
} from '@angular/core';
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
import {MegaMenuItem} from 'primeng/api';
import {ButtonModule} from 'primeng/button';
import {MegaMenuModule} from 'primeng/megamenu';
import {MessageModule} from 'primeng/message';
import {UserInfo} from '../api/userinfo';
import {BrowserSupportCheckResult, BrowserVersionService} from '../browser-support/browser-version.service';
import {WidgetsConfigService} from '../i18n/widgets-config.service';
import {SkipLinksComponent} from '../skip-links/skip-links.component';
import {SkipTarget} from './model/model';

/**
 * The Anwendungsrahmen that contains general, application independent elements as logos or navigation bars.
 * The following template references can be used to insert custom HTML:
 * LogoAnbieterAwl - Access to the top left region. Only works if logoAnbieterAwl is not set.
 * LogoAwl - Access to top right region. Only works if logoAwl is not set.
 * Hauptnavigation-Tools - Access to the Menu bar behind the menu items, e.g. for a language picker.
 * Titelzeile - Access to the Titelzeile between Menu and Content. Only works if title is not set.
 * Seitentoolbar - Access to a space right under the Titelzeile, e.g. for some navigation buttons.
 * Linksnavigation - The left sidebar.
 * Informationsbereich - The right sidebar.
 *
 * Content without template references is used as main content.
 *
 * ## Responsive behaviour
 *
 * Responsive behaviour is disabled by default and enabled through the `responsive` attribute.
 * Because it is based on the width of the component itself, it also works inside a narrower
 * container. When enabled, the Hauptfenster reacts to its available width:
 *
 * - At a width of `1024px` or less, Linksnavigation and Informationsbereich are hidden automatically.
 * - The central content area stays visible and uses the available width.
 * - Above `1024px` the side areas reappear according to `showLinksnavigation` and `showInformationsbereich`.
 * - The values of `collapsedLinksnavigation` and `collapsedInformationsbereich` remain unchanged.
 *
 * Without the attribute the layout keeps its static behaviour.
 * @example
 * ```html
 * <isy-hauptfenster responsive [showLinksnavigation]="true" [showInformationsbereich]="true">
 *   <p-menu Linksnavigation [model]="navigationItems"></p-menu>
 *   <main>Zentraler Inhaltsbereich</main>
 *   <p Informationsbereich>Zusätzliche Informationen</p>
 * </isy-hauptfenster>
 * ```
 * @example
 * The attribute can also be bound dynamically:
 * ```html
 * <isy-hauptfenster [responsive]="responsiveLayoutEnabled" [showLinksnavigation]="true">
 *   <!-- Inhalte -->
 * </isy-hauptfenster>
 * ```
 */
@Component({
  standalone: true,
  selector: 'isy-hauptfenster',
  templateUrl: './hauptfenster.component.html',
  styleUrls: ['./hauptfenster.component.scss'],
  imports: [ButtonModule, MegaMenuModule, SkipLinksComponent, NgClass, MessageModule]
})
export class HauptfensterComponent implements OnInit {
  /**
   * Items to be shown in the main menu bar.
   */
  @Input() items: MegaMenuItem[] = [];

  /**
   * Contains information about the user as the name to be displayed.
   */
  @Input() userInfo?: UserInfo;

  /**
   * A URI to the logo image file of the Anbieter der Anwendungslandschaft, e.g. Bundesregierung.
   * Will be displayed in the upper left corner.
   * For custom HTML, use the "LogoAnbieterAwl" template reference instead.
   */
  @Input() logoAnbieterAwl: string = '';

  /**
   * A URI to the logo image file of the Anwendungslandschaft.
   * Will be displayed in the upper right corner.
   * For custom HTML, use the "LogoAwl" template reference instead.
   */
  @Input() logoAwl: string = '';

  /**
   * The page title to be displayed in the Titelzeile under the menu bar.
   * For custom HTML, use the "Titelzeile" template reference instead.
   */
  @Input() title?: string;

  /**
   * Boolean to determine if the logout button should be outlined or not.
   */
  @Input() outlinedLogoutButton: boolean = true;

  /**
   * The left navigation title to be displayed in the left sidebar.
   */
  @Input() linksNavigationTitle?: string;

  /**
   * Determines whether to show or hide the Linksnavigation, a navigation bar on the left screen side.
   */
  @Input() showLinksnavigation: boolean = false;

  /**
   * Determines whether to show or hide the Informationsbereich, a navigation bar on the right screen side.
   */
  @Input() showInformationsbereich: boolean = false;

  /**
   * Determines whether the user can collapse the Linksnavigation and Informationsbereich.
   */
  @Input() allowSidebarCollapse: boolean = true;

  /**
   * Determines whether the Linksnavigation is currently collapsed.
   */
  @Input() collapsedLinksnavigation: boolean = false;

  /**
   * Determines whether the Informationsbereich is currently collapsed.
   */
  @Input() collapsedInformationsbereich: boolean = false;

  /**
   * Returns the current {@link UserInfo} when the user wants to log out.
   */
  @Input() applicationGroupColor: string = '#A13D6D';

  /**
   * Determines the width of the Linksnavigation, e.g. "15em". Suggested unit is em.
   * Default is 15em.
   */
  @Input() linksNavigationWidth = '15em';

  /**
   * Determines the width of the Informationsbereich, e.g. "15em". Suggested unit is em.
   * Default is 15em.
   */
  @Input() informationsbereichWidth = '15em';

  @Input() links: SkipTarget[] = [];

  /**
   * Enables the automatic browser version check.
   * The check is enabled by default.
   */
  @Input() checkBrowserVersion = true;

  /**
   * Enables responsive behavior for the Hauptfenster.
   *
   * When enabled, the Linksnavigation and Informationsbereich are hidden
   * automatically below the defined responsive breakpoint.
   */
  @Input({transform: booleanAttribute}) responsive = false;

  @Output() logoutEvent = new EventEmitter<UserInfo>();

  /**
   * A service used to translate labels within the widgets library.
   */
  protected readonly configService = inject(WidgetsConfigService);

  @ViewChild('linksNavigationHeader')
  private readonly linksNavigationHeader?: ElementRef<HTMLElement>;

  @ViewChild('openLinksNavigation')
  private readonly openLinksNavigation?: ElementRef<HTMLElement>;

  @ViewChild('informationsbereichHeader')
  private readonly informationsbereichHeader?: ElementRef<HTMLElement>;

  @ViewChild('openInformationsbereich')
  private readonly openInformationsbereich?: ElementRef<HTMLElement>;

  protected unsupportedBrowserMessage = '';

  private browserSupportResult?: BrowserSupportCheckResult;

  private readonly browserVersionService = inject(BrowserVersionService);

  private readonly destroyRef = inject(DestroyRef);

  private readonly injector = inject(Injector);

  ngOnInit(): void {
    if (!this.checkBrowserVersion) {
      return;
    }

    this.browserSupportResult = this.browserVersionService.checkCurrentBrowser();

    if (this.browserSupportResult.supported) {
      return;
    }

    this.configService.translation$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
      if (this.browserSupportResult) {
        this.unsupportedBrowserMessage = this.createUnsupportedBrowserMessage(this.browserSupportResult);
      }
    });
  }

  private createUnsupportedBrowserMessage(browserSupportResult: BrowserSupportCheckResult): string {
    const detectedBrowser = browserSupportResult.detectedBrowser;

    const browserText = detectedBrowser
      ? `${detectedBrowser.label} ${detectedBrowser.version}`
      : this.configService.getTranslation('hauptfenster.browserWarning.currentBrowserFallback');

    const supportedBrowsersText = browserSupportResult.supportedBrowsers
      .map((browser) =>
        this.configService.getTranslation('hauptfenster.browserWarning.supportedBrowser', {
          browser: browser.label,
          version: browser.minimumVersion
        })
      )
      .join(', ');

    return this.configService.getTranslation('hauptfenster.browserWarning.message', {
      browser: browserText,
      supportedBrowsers: supportedBrowsersText
    });
  }

  collapseSidebar(): void {
    this.collapsedLinksnavigation = true;
    this.focusFirstAfterRender(this.linksNavigationHeader);
  }

  expandSidebar(): void {
    this.collapsedLinksnavigation = false;
    this.focusFirstAfterRender(this.openLinksNavigation);
  }

  collapseInformationsbereich(): void {
    this.collapsedInformationsbereich = true;
    this.focusFirstAfterRender(this.informationsbereichHeader);
  }

  expandInformationsbereich(): void {
    this.collapsedInformationsbereich = false;
    this.focusFirstAfterRender(this.openInformationsbereich);
  }

  private focusFirstAfterRender(container?: ElementRef<HTMLElement>): void {
    afterNextRender(
      {
        write: () => {
          const element = container?.nativeElement.querySelector<HTMLElement>(
            'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
          );

          element?.focus();
        }
      },
      {injector: this.injector}
    );
  }
}