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'));
}