import { Component, effect, inject, input, output } from '@angular/core';
import { CustomerBonusCardsResource } from '@isa/crm/data-access';
import { logger } from '@isa/core/logging';
import { CustomerCardPointsSummaryComponent } from './components/customer-card-points-summary';
import { CustomerCardsCarouselComponent } from './components/customer-cards-carousel';
import { coerceNumberProperty, NumberInput } from '@angular/cdk/coercion';
import { AddCustomerCardComponent } from './components/add-customer-card/add-customer-card.component';

/**
 * Main container component for displaying customer loyalty cards.
 *
 * Manages the loading and display of all bonus cards (Kundenkarten) for a customer,
 * including:
 * - Points summary with CTA to Prämienshop
 * - Carousel of customer cards with barcodes
 * - Card management actions (add, block/unblock)
 * - Blocked card overlay states
 *
 * Provides scoped CustomerBonusCardsResource for all child components.
 *
 * @example
 * ```html
 * <customer-loyalty-cards [customerId]="selectedCustomerId()" />
 * ```
 */
@Component({
  selector: 'crm-customer-loyalty-cards',
  imports: [
    CustomerCardPointsSummaryComponent,
    CustomerCardsCarouselComponent,
    AddCustomerCardComponent,
  ],
  templateUrl: './customer-loyalty-cards.component.html',
  styleUrl: './customer-loyalty-cards.component.css',
})
export class CustomerLoyaltyCardsComponent {
  #bonusCardsResource = inject(CustomerBonusCardsResource);

  #logger = logger(() => ({
    component: 'CustomerLoyaltyCardsComponent',
  }));

  /**
   * Customer ID to load loyalty cards for.
   * When changed, triggers automatic reload of bonus cards.
   */
  readonly customerId = input.required<number, NumberInput>({
    transform: coerceNumberProperty,
  });

  /**
   * Tab ID where this component is used.
   * Used for telemetry/logging purposes.
   */
  readonly tabId = input.required<number, NumberInput>({
    transform: coerceNumberProperty,
  });

  /**
   * Event emitted when user requests navigation to Prämienshop.
   * Parent must handle navigation using autoTriggerContinueFn pattern.
   */
  readonly navigateToPraemienshop = output<void>();

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

  /**
   * All bonus cards for the selected customer.
   */
  readonly cards = this.#bonusCardsResource.resource.value;

  /**
   * Loading state for bonus cards.
   */
  readonly isLoading = this.#bonusCardsResource.resource.isLoading;

  /**
   * Error state from loading bonus cards.
   */
  readonly error = this.#bonusCardsResource.resource.error;

  constructor() {
    // React to customerId changes and load bonus cards
    effect(() => {
      const customerId = this.customerId();
      this.#logger.debug('Customer ID changed, loading cards', () => ({
        customerId,
      }));
      this.#bonusCardsResource.params({ customerId });
    });
  }

  /**
   * Handle navigation to Prämienshop.
   * Emits event for parent to handle navigation with proper customer selection.
   */
  onNavigateToPraemienshop(): void {
    this.#logger.info('Emit navigate to Prämienshop event');
    this.navigateToPraemienshop.emit();
  }

  /**
   * Handle card update events from child components.
   * Forwards the event to parent for reload coordination.
   */
  onCardUpdated(): void {
    this.#logger.debug('Card updated, forwarding event to parent');
    this.cardUpdated.emit();
  }
}
