yo @microsoft/sharepoint

import { Version } from '@microsoft/sp-core-library';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import {
  type IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-property-pane';

export interface AirgenticMountConfig {
  target: string | HTMLElement;
  mode: 'service-hub' | 'inline';
  accountId: string;
  serviceId: string;
  authMode: string;
  redirectUri: string;
  searchInputId?: string;
  searchButtonId?: string;
}

export interface AirgenticMountHandle {
  unmount: () => void;
}

declare global {
  interface Window {
    Airgentic?: {
      mount?: (config: AirgenticMountConfig) => AirgenticMountHandle | void;
      unmount?: (target: string | HTMLElement) => void;
      isReady?: boolean;
    };
  }
}

export interface IAirgenticWebPartProps {
  accountId: string;
  serviceId: string;
  redirectUri: string;
  searchInputId: string;
  searchButtonId: string;
}

const RUNTIME_POLL_INTERVAL_MS = 50;
const RUNTIME_WAIT_TIMEOUT_MS = 60000;

export default class AirgenticWebPart extends BaseClientSideWebPart<IAirgenticWebPartProps> {

  private static readonly SCRIPT_ID = 'airgentic-script';
  private static readonly SCRIPT_SRC = 'https://chat.airgentic.com/airgentic-1.4.js';
  private static sharedScriptElementPromise: Promise<void> | undefined;

  private mountId: string = '';
  private mountHandle: AirgenticMountHandle | null = null;
  private thisInstanceInjectedScript: boolean = false;
  private scriptError: boolean = false;
  private lastInitConfigSignature: string = '';
  private renderGeneration: number = 0;

  public render(): void {
    this.mountId = this.getMountId();

    if (!this.isConfigurationValid()) {
      this.renderConfigState(this.getMissingConfigFields());
      return;
    }

    const sig = this.getConfigSignature();
    if (sig !== this.lastInitConfigSignature) {
      this.lastInitConfigSignature = sig;
      this.scriptError = false;
      this.unmountInlineServiceHub();
    }

    if (this.scriptError) {
      this.renderErrorState();
      return;
    }

    this.renderMountContainer();

    const gen = ++this.renderGeneration;
    void this.ensureScriptLoaded()
      .then(() => {
        if (gen !== this.renderGeneration) return;
        return this.mountInlineServiceHub();
      })
      .catch((err: unknown) => {
        if (gen !== this.renderGeneration) return;
        this.scriptError = true;
        const message = err instanceof Error ? err.message : undefined;
        this.renderErrorState(message);
      });
  }

  private getMountId(): string {
    return `airgentic-${this.instanceId}`;
  }

  private getConfigSignature(): string {
    const p = this.properties;
    return [p.accountId, p.serviceId, p.redirectUri, p.searchInputId, p.searchButtonId].join('\u0001');
  }

  private isConfigurationValid(): boolean {
    return this.getMissingConfigFields().length === 0;
  }

  private getMissingConfigFields(): string[] {
    const { accountId, serviceId, redirectUri } = this.properties;
    const missing: string[] = [];
    if (!accountId?.trim()) missing.push('Account ID');
    if (!serviceId?.trim()) missing.push('Service ID');
    if (!redirectUri?.trim()) missing.push('Redirect URI');
    return missing;
  }

  private renderConfigState(missingFields: string[]): void {
    const items = missingFields.map((f) => `<li>${this.escapeHtml(f)}</li>`).join('');
    this.domElement.innerHTML = `
      <div style="padding: 20px; border: 1px solid #c7c7c7; border-radius: 4px; background: #f9f9f9;">
        <p style="margin: 0 0 10px 0; font-weight: 600;">Airgentic Service Hub — configuration required</p>
        <p style="margin: 0; color: #666;">Please configure the web part properties:</p>
        <ul style="margin: 10px 0 0 0; color: #666;">${items}</ul>
        <p style="margin: 10px 0 0 0; color: #666;">Click the edit (pencil) icon on this web part to open the property pane.</p>
      </div>
    `;
  }

  private renderErrorState(message?: string): void {
    const extra = message ? `<p style="margin: 10px 0 0 0; color: #666;">${this.escapeHtml(message)}</p>` : '';
    this.domElement.innerHTML = `
      <div style="padding: 20px; border: 1px solid #d93025; border-radius: 4px; background: #fce8e6;">
        <p style="margin: 0; color: #d93025; font-weight: 600;">Failed to load Airgentic</p>
        <p style="margin: 10px 0 0 0; color: #666;">Please check that chat.airgentic.com is added to your SharePoint trusted script sources.</p>
        ${extra}
      </div>
    `;
  }

  private renderMountContainer(): void {
    this.domElement.innerHTML = `
      <div id="${this.escapeHtml(this.mountId)}" class="airgentic-inline-root">
        <div class="airgentic-loading" style="padding: 20px; text-align: center; color: #666;">
          Loading Airgentic Service Hub...
        </div>
      </div>
    `;
  }

  private escapeHtml(text: string): string {
    return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
  }

  private ensureScriptLoaded(): Promise<void> {
    if (this.isAirgenticRuntimeReady()) return Promise.resolve();

    if (!AirgenticWebPart.sharedScriptElementPromise) {
      const existing = document.getElementById(AirgenticWebPart.SCRIPT_ID) as HTMLScriptElement | null;
      if (existing) {
        AirgenticWebPart.sharedScriptElementPromise = AirgenticWebPart.waitForScriptElementReady(existing);
      } else {
        AirgenticWebPart.sharedScriptElementPromise = new Promise<void>((resolve, reject) => {
          this.injectScript(resolve, reject);
        });
      }
    }

    return AirgenticWebPart.sharedScriptElementPromise
      .then(() => this.waitForAirgenticRuntime())
      .catch((err: unknown) => {
        AirgenticWebPart.sharedScriptElementPromise = undefined;
        throw err;
      });
  }

  private isAirgenticRuntimeReady(): boolean {
    return typeof window.Airgentic !== 'undefined';
  }

  private waitForAirgenticRuntime(): Promise<void> {
    if (this.isAirgenticRuntimeReady()) return Promise.resolve();
    return new Promise((resolve, reject) => {
      const started = Date.now();
      const id = window.setInterval(() => {
        if (this.isAirgenticRuntimeReady()) {
          window.clearInterval(id);
          resolve();
        } else if (Date.now() - started > RUNTIME_WAIT_TIMEOUT_MS) {
          window.clearInterval(id);
          reject(new Error('Timed out waiting for Airgentic runtime.'));
        }
      }, RUNTIME_POLL_INTERVAL_MS);
    });
  }

  private static waitForScriptElementReady(script: HTMLScriptElement): Promise<void> {
    return new Promise((resolve, reject) => {
      if (script.dataset.airgenticSpfxLoaded === 'true') {
        resolve();
        return;
      }

      let settled = false;
      let pollId: number = 0;
      let timeoutId: number = 0;

      const settleOk = (): void => {
        if (settled) return;
        settled = true;
        window.clearInterval(pollId);
        window.clearTimeout(timeoutId);
        script.dataset.airgenticSpfxLoaded = 'true';
        resolve();
      };
      const settleErr = (): void => {
        if (settled) return;
        settled = true;
        window.clearInterval(pollId);
        window.clearTimeout(timeoutId);
        reject(new Error('Airgentic script failed to load.'));
      };

      script.addEventListener('load', settleOk, { once: true });
      script.addEventListener('error', settleErr, { once: true });

      pollId = window.setInterval(() => {
        if (typeof window.Airgentic !== 'undefined') settleOk();
      }, RUNTIME_POLL_INTERVAL_MS);

      timeoutId = window.setTimeout(() => {
        if (!settled && typeof window.Airgentic === 'undefined') settleErr();
      }, RUNTIME_WAIT_TIMEOUT_MS);
    });
  }

  private injectScript(resolve: () => void, reject: (reason?: Error) => void): void {
    const { accountId, serviceId, redirectUri, searchInputId, searchButtonId } = this.properties;

    const script = document.createElement('script');
    script.id = AirgenticWebPart.SCRIPT_ID;
    script.src = AirgenticWebPart.SCRIPT_SRC;
    script.setAttribute('data-account-id', accountId.trim());
    script.setAttribute('data-service-id', serviceId.trim());
    script.setAttribute('data-auth-mode', 'oidc');
    script.setAttribute('data-auth-redirect-uri', redirectUri.trim());
    script.setAttribute('data-target-id', this.mountId);
    script.setAttribute('data-mode', 'inline');

    if (searchInputId?.trim()) script.setAttribute('data-search-input-id', searchInputId.trim());
    if (searchButtonId?.trim()) script.setAttribute('data-search-button-id', searchButtonId.trim());

    this.thisInstanceInjectedScript = true;

    script.onload = () => {
      script.dataset.airgenticSpfxLoaded = 'true';
      resolve();
    };
    script.onerror = () => {
      if (script.parentNode) script.parentNode.removeChild(script);
      this.thisInstanceInjectedScript = false;
      reject(new Error('Airgentic script failed to load.'));
    };

    document.body.appendChild(script);
  }

  private mountInlineServiceHub(): Promise<void> {
    const root = document.getElementById(this.mountId);
    if (!root) {
      this.scriptError = true;
      this.renderErrorState('Mount container was not found.');
      return Promise.resolve();
    }

    const mountFn = window.Airgentic?.mount;
    if (typeof mountFn === 'function') {
      try {
        const result = mountFn.call(window.Airgentic, this.buildMountConfig(root));
        if (result && typeof result.unmount === 'function') this.mountHandle = result;
      } catch (e) {
        this.scriptError = true;
        const msg = e instanceof Error ? e.message : 'Mount failed.';
        this.renderErrorState(msg);
        return Promise.resolve();
      }
      this.clearLoadingPlaceholder(root);
      return Promise.resolve();
    }

    // Legacy fallback: only the injecting instance can use data-target-id on script tag
    if (this.thisInstanceInjectedScript) {
      this.clearLoadingPlaceholder(root);
      return Promise.resolve();
    }

    this.scriptError = true;
    this.renderErrorState(
      'Another Airgentic instance already loaded the script. ' +
      'Update the Airgentic runtime to support window.Airgentic.mount() for multiple inline web parts.'
    );
    return Promise.resolve();
  }

  private buildMountConfig(target: HTMLElement): AirgenticMountConfig {
    const p = this.properties;
    const config: AirgenticMountConfig = {
      target,
      mode: 'service-hub',
      accountId: p.accountId.trim(),
      serviceId: p.serviceId.trim(),
      authMode: 'oidc',
      redirectUri: p.redirectUri.trim()
    };
    if (p.searchInputId?.trim()) config.searchInputId = p.searchInputId.trim();
    if (p.searchButtonId?.trim()) config.searchButtonId = p.searchButtonId.trim();
    return config;
  }

  private clearLoadingPlaceholder(root: HTMLElement): void {
    const loading = root.querySelector('.airgentic-loading');
    if (loading?.parentNode) loading.parentNode.removeChild(loading);
  }

  private unmountInlineServiceHub(): void {
    if (this.mountHandle) {
      try { this.mountHandle.unmount(); } catch { /* ignore */ }
      this.mountHandle = null;
    } else {
      const unmount = window.Airgentic?.unmount;
      const root = this.mountId ? document.getElementById(this.mountId) : null;
      if (typeof unmount === 'function' && root) {
        try { unmount.call(window.Airgentic, root); } catch { /* ignore */ }
      }
    }
  }

  protected onDispose(): void {
    this.unmountInlineServiceHub();
    if (this.domElement) this.domElement.innerHTML = '';
    // Do NOT remove global script — other instances or future global loader may depend on it
    super.onDispose();
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [{
        groups: [
          {
            groupName: 'Airgentic Settings',
            groupFields: [
              PropertyPaneTextField('accountId', {
                label: 'Account ID',
                description: 'Your Airgentic account ID (provided by Airgentic)'
              }),
              PropertyPaneTextField('serviceId', {
                label: 'Service ID',
                description: 'Your Airgentic service ID (provided by Airgentic)'
              }),
              PropertyPaneTextField('redirectUri', {
                label: 'Redirect URI',
                description: 'The callback page URL (e.g. https://yourorg.sharepoint.com/sites/intranet/SitePages/callback.aspx)'
              })
            ]
          },
          {
            groupName: 'Search UI (Optional)',
            groupFields: [
              PropertyPaneTextField('searchInputId', {
                label: 'Search Input ID',
                description: 'The ID of your site\'s search input element (no # prefix). Leave blank if not using Search UI.'
              }),
              PropertyPaneTextField('searchButtonId', {
                label: 'Search Button ID',
                description: 'The ID of your site\'s search button element (no # prefix). Leave blank if not using Search UI.'
              })
            ]
          }
        ]
      }]
    };
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }
}

npm install
npx heft build --production
npx heft package-solution --production