import { Component, computed, input, output } from '@angular/core';
import { ButtonComponent } from '@shared/ui/button/button.component';

/**
 * Atom: a possibly-masked sensitive value (BSN, BIG-nummer, …) with an optional, audited
 * reveal affordance (WP-40). The value arrives masked from the server (data-minimisation)
 * and is swapped for the full value on reveal; the reveal button shows only when the value
 * is still masked AND the caller says the principal may reveal it. Centralises the
 * masked-detection that consumers used to sniff inline. The atom only emits `reveal`; the
 * caller owns the step-up gesture + the audited fetch (see behandel-scherm).
 *
 * ponytail: masked-detection is the mask character (`*`) — a POC heuristic. A server-sent
 * `masked` boolean would remove the sniff; wire it here without touching consumers.
 */
@Component({
  selector: 'app-masked-value',
  imports: [ButtonComponent],
  template: `
    <span class="value">{{ value() }}</span>
    @if (canReveal() && masked()) {
      <app-button variant="subtle" (click)="reveal.emit()">{{ revealLabel() }}</app-button>
    }
  `,
})
export class MaskedValueComponent {
  value = input.required<string>();
  canReveal = input(false);
  revealLabel = input($localize`:@@maskedValue.reveal:Tonen`);
  reveal = output<void>();

  protected masked = computed(() => this.value().includes('*'));
}