import { Component, input, output, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AlertComponent } from '@shared/ui/alert/alert.component';
import { ButtonComponent } from '@shared/ui/button/button.component';

/** Molecule: shows the rejection comments (drafter view) or collects them from the
    approver. The approver rejects WITH comments; they never edit the letter. */
@Component({
  selector: 'app-rejection-comments',
  imports: [FormsModule, AlertComponent, ButtonComponent],
  styles: [`
    :host{display:block}
    textarea{inline-size:100%;box-sizing:border-box;min-block-size:4rem;margin-block:var(--rhc-space-max-sm)}
    label{font-weight:600}
  `],
  template: `
    @if (mode() === 'show') {
      <app-alert type="warning"><strong>{{ rejectedTitle() }}</strong> {{ comments() }}</app-alert>
    } @else {
      <label for="reject-comments">{{ entryLabel() }}</label>
      <textarea id="reject-comments" [(ngModel)]="draft"></textarea>
      <app-button variant="danger" [disabled]="!draft().trim() || busy()" (click)="submit()">{{ rejectLabel() }}</app-button>
    }
  `,
})
export class RejectionCommentsComponent {
  mode = input<'show' | 'entry'>('show');
  comments = input('');
  busy = input(false);
  reject = output<string>();

  rejectedTitle = input($localize`:@@brief.reject.title:Afgewezen:`);
  entryLabel = input($localize`:@@brief.reject.entryLabel:Reden van afwijzing`);
  rejectLabel = input($localize`:@@brief.reject.button:Afwijzen`);

  protected draft = signal('');

  protected submit() {
    const c = this.draft().trim();
    if (c) this.reject.emit(c);
  }
}
