atomic-design-poc/src/app/brief/ui/letter-preview/letter-preview.component.ts

import { Component, computed, input, signal } from '@angular/core';
import { NgTemplateOutlet } from '@angular/common';
import { HeadingComponent } from '@shared/ui/heading/heading.component';
import { ButtonComponent } from '@shared/ui/button/button.component';
import { PlaceholderChipComponent } from '@shared/ui/placeholder-chip/placeholder-chip.component';
import { Paragraph } from '@shared/kernel/rich-text';
import { Brief, LetterBlock } from '@brief/domain/brief';
import { Diagnostic } from '@brief/domain/placeholders';

/** A run of consecutive lines to render together: a list (bullet/number) or a single plain line. */
type PreviewSegment = { readonly list: 'bullet' | 'number' | null; readonly items: readonly Paragraph[] };

function groupParagraphs(paras: readonly Paragraph[]): PreviewSegment[] {
  const out: { list: 'bullet' | 'number' | null; items: Paragraph[] }[] = [];
  for (const para of paras) {
    const kind = para.list ?? null;
    const last = out[out.length - 1];
    if (kind && last && last.list === kind) last.items.push(para);
    else out.push({ list: kind, items: [para] });
  }
  return out;
}

// Illustrative values for the "Voorbeeld" toggle — what send resolves server-side.
const SAMPLE_VALUES: Record<string, string> = {
  naam_zorgverlener: 'J. Jansen',
  big_nummer: '12345678901',
};

/** Organism: read-only rendering of the letter as the approver/recipient sees it.
    Placeholders show as labelled chips (values are resolved server-side only at send);
    a chip flagged by the linter shows its error/warning state. The "Voorbeeld" toggle
    fills auto-resolvable placeholders with sample values to preview the sent result. */
@Component({
  selector: 'app-letter-preview',
  imports: [NgTemplateOutlet, HeadingComponent, ButtonComponent, PlaceholderChipComponent],
  styles: [`
    :host{display:block}
    .toolbar{display:flex;justify-content:flex-end;margin-block-end:var(--rhc-space-max-sm)}
    .letter{background:var(--rhc-color-wit);border:var(--rhc-border-width-sm) solid var(--rhc-color-border-default);border-radius:var(--rhc-border-radius-md);padding:var(--rhc-space-max-2xl)}
    section{margin-block-end:var(--rhc-space-max-xl)}
    p{margin:0 0 var(--rhc-space-max-sm)}
    ul,ol{margin:0 0 var(--rhc-space-max-sm);padding-inline-start:1.4em}
  `],
  template: `
    <ng-template #line let-nodes>
      @for (node of nodes; track $index) {
        @switch (node.type) {
          @case ('text') { <span>{{ node.text }}</span> }
          @case ('lineBreak') { <br> }
          @case ('placeholder') {
            @if (showSample() && autoFor(node.key)) {
              <span>{{ sampleFor(node.key) }}</span>
            } @else {
              <app-placeholder-chip [label]="labelFor(node.key)" [autoResolvable]="autoFor(node.key)" [state]="stateFor(node.key)" />
            }
          }
        }
      }
    </ng-template>

    <div class="toolbar">
      <app-button variant="subtle" (click)="showSample.set(!showSample())" [attr.aria-pressed]="showSample()">
        {{ showSample() ? hideSampleLabel() : showSampleLabel() }}
      </app-button>
    </div>

    <div class="letter">
      @for (section of brief().sections; track section.sectionKey) {
        <section>
          <app-heading [level]="3">{{ section.title }}</app-heading>
          @for (block of section.blocks; track block.blockId) {
            @for (seg of segmentsOf(block); track $index) {
              @if (seg.list === 'bullet') {
                <ul>@for (para of seg.items; track $index) { <li><ng-container [ngTemplateOutlet]="line" [ngTemplateOutletContext]="{ $implicit: para.nodes }" /></li>}</ul>
              } @else if (seg.list === 'number') {
                <ol>@for (para of seg.items; track $index) { <li><ng-container [ngTemplateOutlet]="line" [ngTemplateOutletContext]="{ $implicit: para.nodes }" /></li>}</ol>
              } @else {
                <p><ng-container [ngTemplateOutlet]="line" [ngTemplateOutletContext]="{ $implicit: seg.items[0].nodes }" /></p>
              }
            }
          }
        </section>
      }
    </div>
  `,
})
export class LetterPreviewComponent {
  brief = input.required<Brief>();
  diagnostics = input<readonly Diagnostic[]>([]);

  showSampleLabel = input($localize`:@@brief.preview.showSample:Voorbeeld met testwaarden`);
  hideSampleLabel = input($localize`:@@brief.preview.hideSample:Testwaarden verbergen`);

  protected showSample = signal(false);
  private today = new Date().toLocaleDateString('nl-NL', { day: 'numeric', month: 'long', year: 'numeric' });

  private defs = computed(() => new Map(this.brief().placeholders.map((p) => [p.key, p])));
  private worst = computed(() => {
    const m = new Map<string, 'error' | 'warning'>();
    for (const d of this.diagnostics()) {
      if (!d.placeholderKey) continue;
      if (d.severity === 'error') m.set(d.placeholderKey, 'error');
      else if (!m.has(d.placeholderKey)) m.set(d.placeholderKey, 'warning');
    }
    return m;
  });

  protected segmentsOf = (block: LetterBlock) => groupParagraphs(block.content.paragraphs);
  protected labelFor = (key: string) => this.defs().get(key)?.label ?? key;
  protected autoFor = (key: string) => this.defs().get(key)?.autoResolvable ?? false;
  protected stateFor = (key: string): 'ok' | 'warning' | 'error' => this.worst().get(key) ?? 'ok';
  protected sampleFor = (key: string) => SAMPLE_VALUES[key] ?? (key === 'datum' ? this.today : this.labelFor(key));
}