import { Component, computed, input, output } from '@angular/core';
import { RichTextBlock } from '@shared/kernel/rich-text';
import { RichTextEditorComponent, PlaceholderOption } from '@shared/ui/rich-text-editor/rich-text-editor.component';
import { ButtonComponent } from '@shared/ui/button/button.component';
import { LetterBlock } from '@brief/domain/brief';

/** Molecule: one block in a section — its editor plus provenance + block controls.
    Presentational: emits content/remove/move events; the section maps them to messages. */
@Component({
  selector: 'app-letter-block',
  imports: [RichTextEditorComponent, ButtonComponent],
  styles: [`
    :host{display:block}
    .block{border-inline-start:var(--rhc-border-width-lg) solid var(--rhc-color-border-subtle);padding-inline-start:var(--rhc-space-max-md)}
    .meta{display:flex;justify-content:space-between;align-items:center;gap:var(--rhc-space-max-md);margin-block-end:var(--rhc-space-max-sm)}
    .controls{display:flex;gap:var(--rhc-space-max-sm)}
  `],
  template: `
    <div class="block">
      <div class="meta">
        <span class="app-text-subtle">{{ provenance() }}</span>
        @if (editable()) {
          <span class="controls">
            <app-button variant="subtle" (click)="moved.emit(-1)" i18n="@@brief.block.moveUp">Omhoog</app-button>
            <app-button variant="subtle" (click)="moved.emit(1)" i18n="@@brief.block.moveDown">Omlaag</app-button>
            <app-button variant="subtle" (click)="removed.emit()" i18n="@@brief.block.remove">Verwijderen</app-button>
          </span>
        }
      </div>
      <app-rich-text-editor
        [content]="block().content"
        [placeholders]="placeholders()"
        [editable]="editable()"
        (contentChanged)="contentChanged.emit($event)" />
    </div>
  `,
})
export class LetterBlockComponent {
  block = input.required<LetterBlock>();
  placeholders = input<readonly PlaceholderOption[]>([]);
  editable = input(false);
  contentChanged = output<RichTextBlock>();
  removed = output<void>();
  moved = output<-1 | 1>();

  protected provenance = computed(() => {
    const b = this.block();
    if (b.type === 'freeText') return $localize`:@@brief.provenance.free:Vrije tekst`;
    return b.edited
      ? $localize`:@@brief.provenance.edited:Aangepaste standaardtekst`
      : $localize`:@@brief.provenance.standard:Standaardtekst`;
  });
}