import { Component, computed, input } from '@angular/core';

/** Atom: a highlighted, non-editable placeholder chip for READ-ONLY rendering
    (preview, diagnostics). Distinct styling for auto-resolvable vs manual fields and
    for linter error/warning states. Domain-free and presentational — the caller
    passes label/state; a11y label announces the field name + its resolution status.
    (The editor renders its own inline chips inside contenteditable; this atom is for
    everywhere the letter is shown, not edited.) */
@Component({
  selector: 'app-placeholder-chip',
  styles: [`
    .chip{
      display:inline-flex;align-items:center;gap:0.2em;
      border-radius:var(--rhc-border-radius-sm);
      padding:0 0.35em;line-height:1.6;border:1px solid transparent;white-space:nowrap;
    }
    /* Braces use unicode escapes; a literal { in a CSS content string breaks the style parser. */
    .chip::before{content:'\\7B';opacity:0.6;font-weight:700}
    .chip::after{content:'\\7D';opacity:0.6;font-weight:700}
    .chip--auto{background:var(--rhc-color-cool-grey-100);color:var(--rhc-color-foreground-default)}
    .chip--manual{background:var(--rhc-color-geel-100);color:var(--rhc-color-foreground-default)}
    .chip--warning{background:var(--rhc-color-geel-100);border-color:var(--rhc-color-border-default);color:var(--rhc-color-foreground-default)}
    .chip--error{background:var(--rhc-color-rood-100);border-color:var(--rhc-color-border-default);color:var(--rhc-color-foreground-default)}
  `],
  template: `<span class="chip" [class]="'chip--' + variant()" [attr.aria-label]="ariaLabel()">{{ label() }}</span>`,
})
export class PlaceholderChipComponent {
  label = input.required<string>();
  autoResolvable = input(false);
  state = input<'ok' | 'warning' | 'error'>('ok');

  // Copy is localizable-by-default per the shared-UI convention (like <app-async>).
  autoText = input($localize`:@@placeholderChip.auto:wordt automatisch ingevuld`);
  manualText = input($localize`:@@placeholderChip.manual:handmatig in te vullen`);
  warningText = input($localize`:@@placeholderChip.warning:let op`);
  errorText = input($localize`:@@placeholderChip.error:fout`);

  protected variant = computed(() => {
    const s = this.state();
    return s !== 'ok' ? s : this.autoResolvable() ? 'auto' : 'manual';
  });

  protected ariaLabel = computed(() => {
    const status = { auto: this.autoText(), manual: this.manualText(), warning: this.warningText(), error: this.errorText() }[this.variant()];
    return $localize`:@@placeholderChip.aria:Veld ${this.label()}:label:, ${status}:status:`;
  });
}
