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

import { AppI18nService } from '../../../core/i18n';

/**
 * Shared modal backdrop.
 *
 * Renders the full-viewport dimming scrim that sits behind centered dialogs, bottom sheets, and
 * other modal surfaces. Centralizing it keeps the backdrop darkness (`bg-black/60`) and the
 * `backdrop-blur-sm` treatment consistent across every modal in the app - callers only pick a
 * stacking level and (optionally) opt out of dismiss-on-click.
 *
 * The component renders only the scrim; the modal content should be a sibling element with a
 * higher `z-index` so it layers above the backdrop.
 *
 * @example
 * ```html
 * <app-modal-backdrop [zIndex]="110" ariaLabel="Close dialog" (dismissed)="cancel()" />
 * <div class="fixed inset-0 z-[111] flex items-center justify-center"> ...dialog... </div>
 * ```
 */
@Component({
  selector: 'app-modal-backdrop',
  standalone: true,
  templateUrl: './modal-backdrop.component.html'
})
export class ModalBackdropComponent {
  private readonly appI18n = inject(AppI18nService);

  /** Stacking level applied to the scrim. Place modal content one level above this value. */
  readonly zIndex = input<number>(50);

  /** Whether to apply the frosted `backdrop-blur-sm` treatment. Defaults to on for consistency. */
  readonly blur = input<boolean>(true);

  /** Whether clicking / pressing the backdrop dismisses the modal. Disable for blocking modals. */
  readonly dismissable = input<boolean>(true);

  /** Accessible label for the dismiss affordance when the backdrop is dismissable. */
  readonly ariaLabel = input<string>(this.appI18n.instant('shared.dialog.close'));

  /** Emits when the user dismisses the backdrop (click, Enter, or Space). */
  readonly dismissed = output<undefined>();

  /** Emit a dismissal request. Wired to the backdrop's pointer and keyboard handlers. */
  dismiss(): void {
    this.dismissed.emit(undefined);
  }
}
