import { Component, computed, input, output } from '@angular/core';
import { BonusCardInfo } from '@isa/crm/data-access';
import { ButtonComponent } from '@isa/ui/buttons';

/**
 * Displays customer loyalty points summary with CTA to Prämienshop.
 *
 * Shows:
 * - Total Lesepunkte (reading points) from primary card
 * - "Zum Prämienshop" button
 *
 * Based on Figma design with centered layout.
 *
 * @example
 * ```html
 * <customer-card-points-summary
 *   [cards]="bonusCards"
 *   (navigateToPraemienshop)="handleNavigation()" />
 * ```
 */
@Component({
  selector: 'crm-customer-card-points-summary',
  templateUrl: './customer-card-points-summary.component.html',
  styleUrl: './customer-card-points-summary.component.css',
  imports: [ButtonComponent],
})
export class CustomerCardPointsSummaryComponent {
  /**
   * All bonus cards for the customer.
   */
  readonly cards = input.required<BonusCardInfo[]>();

  /**
   * Emitted when user clicks "Zum Prämienshop" button.
   */
  readonly navigateToPraemienshop = output<void>();

  /**
   * Total points from primary card, formatted with thousands separator.
   */
  readonly formattedPoints = computed(() => {
    const cards = this.cards();
    const primaryCard = cards.find((c) => c.isPrimary);
    const points = primaryCard?.totalPoints ?? 0;

    // Format with German thousands separator (dot)
    return points.toLocaleString('de-DE');
  });

  /**
   * Handle Prämienshop button click.
   */
  onNavigateToPraemienshop(): void {
    this.navigateToPraemienshop.emit();
  }
}
