import { Component, computed, input, output } from '@angular/core';
import { AlertComponent } from '@shared/ui/alert/alert.component';
import { Diagnostic } from '@brief/domain/placeholders';

/** Molecule: lists all letter diagnostics grouped by severity. Errors block
    save/send; warnings (deprecated, unresolved-at-send) are surfaced but allowed.
    Fed by a `computed()` over the letter content — never stored. */
@Component({
  selector: 'app-diagnostics-panel',
  imports: [AlertComponent],
  styles: [`
    :host{display:block}
    ul{margin:0;padding-inline-start:1.1rem;display:grid;gap:0.15rem}
    button{background:none;border:0;padding:0;color:var(--rhc-color-foreground-link);cursor:pointer;text-align:start;text-decoration:underline}
  `],
  template: `
    @if (errors().length) {
      <app-alert type="error">
        <strong>{{ errorsTitle() }}</strong>
        <ul>
          @for (d of errors(); track $index) { <li><button type="button" (click)="locate.emit(d)">{{ d.message }}</button></li> }
        </ul>
      </app-alert>
    }
    @if (warnings().length) {
      <app-alert type="warning">
        <strong>{{ warningsTitle() }}</strong>
        <ul>
          @for (d of warnings(); track $index) { <li><button type="button" (click)="locate.emit(d)">{{ d.message }}</button></li> }
        </ul>
      </app-alert>
    }
    @if (!errors().length && !warnings().length) {
      <app-alert type="ok">{{ cleanText() }}</app-alert>
    }
  `,
})
export class DiagnosticsPanelComponent {
  diagnostics = input<readonly Diagnostic[]>([]);
  locate = output<Diagnostic>();

  errorsTitle = input($localize`:@@brief.diag.errors:Op te lossen voor indienen/versturen:`);
  warningsTitle = input($localize`:@@brief.diag.warnings:Aandachtspunten:`);
  cleanText = input($localize`:@@brief.diag.clean:Geen problemen gevonden in de velden.`);

  protected errors = computed(() => this.diagnostics().filter((d) => d.severity === 'error'));
  protected warnings = computed(() => this.diagnostics().filter((d) => d.severity === 'warning'));
}