import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  inject,
  Input,
  LOCALE_ID,
  OnInit
} from '@angular/core';
import * as windowUtils from '../utils/window-utils';
import { NxMessageToastService } from '@allianz/ng-aquila/message';
import { DebugToolsService } from '../utils/debug-tools.service';
import {
  IS_A1,
  IS_NDBX,
  THEME,
  SHOWROOM_THEME_URLS,
  ThemeName,
  CHANNEL,
  CHANNEL_TOKEN
} from '@allianz/taly-core';

@Component({
  selector: 'taly-showroom-header',
  templateUrl: './showroom-header.component.html',
  styleUrls: ['./showroom-header.component.scss'],
  standalone: false,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ShowroomHeaderComponent implements OnInit {
  @Input() debugToolsToggleVisible = true;

  journeyDetailsExpanded = false;
  presentationMode = false;
  hasLocaleWarning = false;
  protected debugToolsService = inject(DebugToolsService);
  protected copyFormConfigIcon = 'duplicate';
  private cdr = inject(ChangeDetectorRef);
  protected isNdbx = inject(IS_NDBX);
  protected isA1 = inject(IS_A1);
  private readonly channel = inject(CHANNEL_TOKEN);
  protected readonly isNdbxExpert = this.isNdbx && this.channel === CHANNEL.EXPERT;
  protected themeConfig = inject(SHOWROOM_THEME_URLS);
  protected readonly currentThemeName: ThemeName | '' = this.isA1
    ? THEME.A1
    : this.isNdbx
    ? THEME.NDBX
    : '';
  protected readonly hasThemeSwitcher: boolean =
    !!this.currentThemeName && Object.keys(this.themeConfig.themeUrls).length > 1;

  private currentLocale = inject(LOCALE_ID);
  private messageToastService = inject(NxMessageToastService);
  private readonly defaultLocale = 'en-US';

  ngOnInit() {
    const url = new URL(windowUtils.getHref());
    const searchParams = url.searchParams;
    if (searchParams.get('presentation') === 'true') {
      this.presentationMode = true;
      this.journeyDetailsExpanded = false;
      this.debugToolsService.debugToolsVisible.set(false);
    }
    this.hasLocaleWarning = this.currentLocale !== this.defaultLocale;
  }

  toggleDesignMode(enabled: boolean) {
    this.debugToolsService.designModeEnabled.set(enabled);
  }

  enterPresentationMode() {
    // For the HashOnlyLocationStrategy to preserve a query param
    // we need to add it _before_ the hash. The Angular Router doesn't
    // support this out of the box, so we need to do it manually.
    const presentationUrl = new URL(windowUtils.getHref());

    if (presentationUrl.searchParams.get('presentation') === 'true') {
      return;
    }
    presentationUrl.searchParams.set('presentation', 'true');

    const encodedDynamicFormConfig = this.debugToolsService.encodedDynamicFormConfig();
    if (encodedDynamicFormConfig) {
      presentationUrl.searchParams.delete('form');
      presentationUrl.searchParams.append('form', encodedDynamicFormConfig);
      windowUtils.open(presentationUrl.href, '_blank');
      return;
    }

    windowUtils.replace(presentationUrl.href);
  }

  protected shareDynamicFormConfiguration() {
    const encodedDynamicFormConfig = this.debugToolsService.encodedDynamicFormConfig();
    const formURL = new URL(windowUtils.getHref());
    formURL.searchParams.delete('form');
    formURL.searchParams.append('form', encodedDynamicFormConfig);
    const formConfigLink = formURL.toString();

    navigator.clipboard.writeText(formConfigLink);

    this.messageToastService.open('Form configuration link copied to clipboard', {
      context: 'success',
      duration: 4000
    });
    this.copyFormConfigIcon = 'check';
    setTimeout(() => {
      this.copyFormConfigIcon = 'duplicate';
      this.cdr.markForCheck();
    }, 4000);
  }

  protected switchTheme(themeName: ThemeName): void {
    if (themeName === this.currentThemeName) return;
    const themeUrl = this.themeConfig.themeUrls[themeName];
    if (!themeUrl) return;
    const currentUrl = new URL(windowUtils.getHref());
    let targetUrl: URL;
    try {
      targetUrl = new URL(themeUrl);
    } catch {
      console.warn(`[SHOWROOM_THEME_URLS] Invalid URL for theme "${themeName}": "${themeUrl}"`);
      return;
    }
    currentUrl.searchParams.forEach((value, key) => {
      targetUrl.searchParams.set(key, value);
    });
    const encodedDynamicFormConfig = this.debugToolsService.encodedDynamicFormConfig();
    if (encodedDynamicFormConfig) {
      targetUrl.searchParams.delete('form');
      targetUrl.searchParams.append('form', encodedDynamicFormConfig);
    }
    if (currentUrl.hash) {
      targetUrl.hash = currentUrl.hash;
    }
    windowUtils.replace(targetUrl.href);
  }
}