<kendo-dialog title="Invitation Link" (close)="onClose()" [width]="560" [maxWidth]="'95vw'" [maxHeight]="'90vh'">

  <!-- Ask for an email when the member has none on file -->
  <ng-container *ngIf="step === 'needEmail'">
    <p class="k-mb-4">
      Create a first-login invitation for <strong>{{ memberName }}</strong>.
      This member has no email on file — enter one to use as their login.
    </p>

    <form [formGroup]="emailForm" (ngSubmit)="generate()" class="k-form k-form-vertical">
      <kendo-formfield>
        <kendo-label text="Login Email *"></kendo-label>
        <kendo-textbox formControlName="email"></kendo-textbox>
        <kendo-formerror *ngIf="emailForm.get('email')?.errors?.['required']">Email is required.</kendo-formerror>
        <kendo-formerror *ngIf="emailForm.get('email')?.errors?.['email']">Invalid email address.</kendo-formerror>
      </kendo-formfield>
    </form>

    <p *ngIf="errorMessage" class="k-color-error k-mt-3">{{ errorMessage }}</p>

    <kendo-dialog-actions>
      <button kendoButton (click)="onClose()">Cancel</button>
      <button kendoButton themeColor="primary" (click)="generate()">Create Link</button>
    </kendo-dialog-actions>
  </ng-container>

  <!-- Generating spinner -->
  <ng-container *ngIf="step === 'generating'">
    <div class="k-text-center k-p-4">
      <kendo-loader></kendo-loader>
      <p class="k-mt-2">Creating invitation link…</p>
    </div>
  </ng-container>

  <!-- Ready — show link to copy / email -->
  <ng-container *ngIf="step === 'ready'">
    <p class="k-mb-3">
      Send this link to <strong>{{ memberName }}</strong>. They'll set their own password and sign in.
    </p>

    <div class="k-d-flex k-gap-2 k-align-items-center k-mb-2">
      <kendo-textbox [value]="link" [readonly]="true" style="flex: 1"></kendo-textbox>
      <button kendoButton (click)="copyLink()">{{ copied ? 'Copied!' : 'Copy' }}</button>
    </div>

    <p class="k-font-size-sm k-mb-3">
      Single use — expires {{ expiresAt | date:'medium' }}.
    </p>

    <button kendoButton themeColor="info" (click)="sendEmail()" [disabled]="isSending">
      <span *ngIf="isSending">…</span>
      Send via email
    </button>

    <kendo-dialog-actions>
      <button kendoButton themeColor="primary" (click)="onClose()">Done</button>
    </kendo-dialog-actions>
  </ng-container>

</kendo-dialog>
