widget-loader.service.ts

import { Injectable } from '@angular/core';

declare global {
  interface Window {
    YGC_WIDGET_ID?: string;
    YGC_WIDGET_RENDER_MODE?: 'floating' | 'embedded';
    YGC_WIDGET?: {
      renderEmbedded?: (root: HTMLElement) => void;
    };
  }
}

export type WidgetMode = 'floating' | 'embedded';

@Injectable({ providedIn: 'root' })
export class WidgetLoaderService {
  private loadedMode: WidgetMode | null = null;

  load(widgetUid: string, mode: WidgetMode, rootElementId = 'yourgpt_root'): void {
    if (this.loadedMode === mode && document.getElementById('yourgpt-chatbot')) return;
    if (this.loadedMode && this.loadedMode !== mode) {
      console.warn(
        `[WidgetLoaderService] Widget already loaded in "${this.loadedMode}" mode. ` +
          `Switching modes requires a full page reload — use <a href="…"> not routerLink.`,
      );
      return;
    }

    window.YGC_WIDGET_ID = widgetUid;
    window.YGC_WIDGET_RENDER_MODE = mode;

    const script = document.createElement('script');
    script.id = 'yourgpt-chatbot';
    script.src = 'https://widget.yourgpt.ai/script.js';
    script.async = true;
    document.body.appendChild(script);

    this.loadedMode = mode;

    if (mode === 'embedded') {
      this.renderEmbeddedWhenReady(rootElementId);
    }
  }

  private renderEmbeddedWhenReady(rootElementId: string, attempts = 0): void {
    const root = document.getElementById(rootElementId);
    const render = window.YGC_WIDGET?.renderEmbedded;
    if (root && render) {
      render(root);
      return;
    }
    if (attempts > 100) {
      console.error(
        `[WidgetLoaderService] Gave up after 10s — embedded widget never became ready. ` +
          `Make sure #${rootElementId} exists in the DOM.`,
      );
      return;
    }
    window.setTimeout(() => this.renderEmbeddedWhenReady(rootElementId, attempts + 1), 100);
  }
}