import fontRegular from './assets/fonts/SuisseIntl/SuisseIntl-Regular.woff2';
import fontMedium from './assets/fonts/SuisseIntl/SuisseIntl-Medium.woff2';
import fontBold from './assets/fonts/SuisseIntl/SuisseIntl-Bold.woff2';
import templateString from './components/popup-webinar/popup-webinar.html?raw';
import styleString from './scss/index-popup-webinars.scss?inline';
import { popupWebinar } from './components/popup-webinar/popup-webinar.ts';
import { manualPopupManager } from './scripts/manual-popup-manager.ts';
import { popupForm } from './components/popup-form/popup-form.ts';
import { updateAssetPathsWithRegex } from './utils/assets-path-replacer/replaceAssetsPath.ts';
import { loadFonts } from './utils/load-fonts /loadFonts.ts';

loadFonts([
  {
    name: 'Suisse Intl',
    fontUrl: fontRegular,
    weight: '400',
  },
  {
    name: 'Suisse Intl',
    fontUrl: fontMedium,
    weight: '500',
  },
  {
    name: 'Suisse Intl',
    fontUrl: fontBold,
    weight: '600',
  },
]);

export class PopupWidget extends HTMLElement {
  private shadow: ShadowRoot | null = null;
  private readonly sheet = new CSSStyleSheet();
  private timeoutId: number | undefined;
  private runHandler: (() => void) | undefined;

  private template: string = updateAssetPathsWithRegex(templateString);
  private styleTemplate: string = updateAssetPathsWithRegex(styleString);
  private readonly timeoutDelay = 15000;

  constructor() {
    super();
    this.initializeComponent();
  }

  private get shouldOpen(): boolean {
    return (
      localStorage.getItem('quadcode-popup-widget-open') === null &&
      window?.isUserFillingForm !== true
    );
  }

  private async initializeComponent(): Promise<void> {
    try {
      this.shadow = this.attachShadow({ mode: 'open' });
      this.shadow.adoptedStyleSheets = [this.sheet];
      await this.setupPopupManager();
      this.schedulePopupShow();
    } catch (error) {
      console.error('PopupWidget initialization failed:', error);
    }
  }

  private async setupPopupManager(): Promise<void> {
    if (!this.shadow) return;

    const managerData = await manualPopupManager(
      this.shadow,
      this.show.bind(this),
      this.hide.bind(this),
    );

    if (!managerData) return;

    const [template, ...style] = await Promise.all([managerData.template, ...managerData.style]);
    this.template = updateAssetPathsWithRegex(template.default);
    this.styleTemplate = style.map((style) => updateAssetPathsWithRegex(style.default)).join(' ');

    this.runHandler = managerData.run;
  }

  private async renderTemplate() {
    if (!this.shadow) return;

    this.shadow.innerHTML = this.template;
    this.sheet.replaceSync(this.styleTemplate);
  }

  static get observedAttributes(): string[] {
    return ['open'];
  }

  attributeChangedCallback(name: string): void {
    if (name === 'open') {
      this.togglePopup();
    }
  }

  private togglePopup(): void {
    const popup = this.shadow?.querySelector('.popup');
    popup?.classList.toggle('active', this.hasAttribute('open'));
  }

  private schedulePopupShow(): void {
    if (!this.shadow) return;

    if (this.runHandler) {
      this.renderTemplate();
      this.runHandler();
    } else {
      if (!this.shouldOpen) return;
      this.renderTemplate();
      this.timeoutId = window.setTimeout(() => {
        try {
          if (!this.shouldOpen) return;
          popupWebinar(this.shadow!, this.show.bind(this), this.hide.bind(this), async () => {
            const getLayout = async () => {
              const layout = {
                template: import('./components/popup-form/popup-form.html?raw'),
                style: [import('./scss/index-popup-form.scss?inline')],
              };
              return layout;
            };

            const layout = await getLayout();
            const [template, ...style] = await Promise.all([layout.template, ...layout.style]);
            this.template = updateAssetPathsWithRegex(template.default);
            this.styleTemplate = style
              .map((style) => updateAssetPathsWithRegex(style.default))
              .join(' ');
            this.renderTemplate();
            popupForm(this.shadow!, this.show.bind(this), this.hide.bind(this));
          });
        } catch (error) {
          console.error('Error showing popup:', error);
        }
      }, this.timeoutDelay);
    }
  }

  public destroy(): void {
    if (this.timeoutId) {
      window.clearTimeout(this.timeoutId);
    }
  }

  public show(): void {
    this.setAttribute('open', '');
  }

  public hide(): void {
    this.removeAttribute('open');
    this.destroy();
    localStorage.setItem('quadcode-popup-widget-open', 'true');
  }
}

function initializeWidget(): void {
  if (document.getElementById('quadcode-popup-widget')) return;

  const container = document.createElement('div');
  container.id = 'quadcode-popup-widget';
  container.innerHTML = '<quadcode-popup-widget></quadcode-popup-widget>';
  document.body.append(container);
}

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', initializeWidget);
} else {
  initializeWidget();
}

customElements.define('quadcode-popup-widget', PopupWidget);