import {
  Component,
  ComponentRef,
  createComponent,
  DOCUMENT,
  EnvironmentInjector,
  inject,
  OnDestroy,
  signal,
} from '@angular/core';

const SCRIPT_SRC_CONTROL_ID = 'script-host-resource-url-control';

@Component({
  selector: 'script[script-host-resource-url-control]',
  host: {'[src]': 'src'},
  template: '',
})
class ScriptHostResourceUrlControlSink {
  src = '';
}

@Component({
  selector: 'app-root',
  template: `
    <section class="script-host-resource-url-control-pov">
      <h2>Script host ResourceURL control</h2>
      <p>
        Dynamically creates an Angular component on a live script host and binds
        <code>[src]</code>. Plain strings should throw NG0904.
      </p>

      <button type="button" id="run-script-host-resource-url-control" (click)="run()">
        Run script src ResourceURL control
      </button>

      <p><strong>Status:</strong> {{ status() }}</p>
      <p><strong>script[src]:</strong> {{ srcAttribute() }}</p>
    </section>
  `,
})
export class App implements OnDestroy {
  private readonly environmentInjector = inject(EnvironmentInjector);
  private componentRef?: ComponentRef<ScriptHostResourceUrlControlSink>;
  private hostElement?: HTMLScriptElement;

  protected readonly status = signal('ready');
  protected readonly srcAttribute = signal('not set');
  private readonly document = inject(DOCUMENT);

  ngOnDestroy(): void {
    this.destroyControl();
  }

  protected run(): void {
    this.destroyControl();

    const scriptHost = this.document.createElement('script');
    scriptHost.id = SCRIPT_SRC_CONTROL_ID;
    scriptHost.setAttribute('script-host-resource-url-control', '');
    this.document.head.appendChild(scriptHost);
    this.hostElement = scriptHost;

    try {
      this.componentRef = createComponent(ScriptHostResourceUrlControlSink, {
        environmentInjector: this.environmentInjector,
        hostElement: scriptHost,
      });
      this.componentRef.instance.src = 'https://code.jquery.com/jquery-3.7.1.min.js';
      this.componentRef.changeDetectorRef.detectChanges();
      this.status.set(`unexpectedly wrote src=${scriptHost.getAttribute('src') ?? ''}`);
    } catch (error) {
      this.status.set(`blocked: ${error instanceof Error ? error.message : String(error)}`);
    } finally {
      this.srcAttribute.set(scriptHost.getAttribute('src') ?? 'not set');
    }
  }

  private destroyControl(): void {
    this.componentRef?.destroy();
    this.componentRef = undefined;
    this.hostElement?.remove();
    this.hostElement = undefined;
    this.document.getElementById(SCRIPT_SRC_CONTROL_ID)?.remove();
    this.srcAttribute.set('not set');
  }
}