import { Clipboard } from '@angular/cdk/clipboard';
import {
  ChangeDetectionStrategy,
  Component,
  inject,
  input,
  output,
  viewChild,
} from '@angular/core';
import { BonusCardInfo } from '@isa/crm/data-access';
import { BarcodeComponent } from '@isa/shared/barcode';
import { TooltipDirective } from '@isa/ui/tooltip';
import { LockCustomerCardComponent } from '../lock-customer-card/lock-customer-card.component';

/**
 * Individual customer loyalty card display component.
 *
 * Displays a customer bonus card with:
 * - Card type (Kundenkarte/Mitarbeitendenkarte)
 * - Card number
 * - Barcode
 * - Customer name
 * - Blocked state overlay (if applicable)
 *
 * Based on Figma design: 337×213px card with black header and white footer.
 *
 * @example
 * ```html
 * <customer-card
 *   [card]="bonusCard"
 *   (unblock)="handleUnblock($event)" />
 * ```
 */
@Component({
  selector: 'crm-customer-card',
  standalone: true,
  templateUrl: './customer-card.component.html',
  styleUrl: './customer-card.component.css',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [BarcodeComponent, LockCustomerCardComponent, TooltipDirective],
})
export class CustomerCardComponent {
  readonly #clipboard = inject(Clipboard);
  private readonly copyTooltip = viewChild<TooltipDirective>('copyTooltip');

  /**
   * Bonus card data to display.
   */
  readonly card = input.required<BonusCardInfo>();

  /**
   * Event emitted when a card has been successfully locked or unlocked.
   * Parent should reload cards and transactions.
   */
  readonly cardLocked = output<void>();

  /**
   * Barcode dimensions in rem, converted to pixels for JsBarcode.
   * Base: 1rem = 16px
   */
  protected readonly barcodeHeight = 4.5 * 16; // 4.5rem = 72px
  protected readonly barcodeWidth = 0.125 * 16; // 0.125rem = 2px
  protected readonly barcodeMargin = 0.5 * 16; // 0.5rem = 8px

  /**
   * Copies the card code to the clipboard and shows a tooltip confirmation.
   */
  copyCode(event: Event): void {
    event.stopPropagation();
    this.#clipboard.copy(this.card().code);

    const tooltip = this.copyTooltip();
    if (tooltip) {
      tooltip.show();
      setTimeout(() => tooltip.hide(), 3000);
    }
  }
}
