/**
 * Angular component templates — Banner + Gate directive reference snippets.
 *
 * Phase 4: extracted from angular/index.ts.
 */

/**
 * ConsentBannerComponent Template
 *
 * Fuer Angular Library Implementation:
 *
 * @example
 * ```typescript
 * @Component({
 *   selector: 'bp-consent-banner',
 *   template: CONSENT_BANNER_TEMPLATE,
 *   styles: [CONSENT_BANNER_STYLES],
 * })
 * export class ConsentBannerComponent {
 *   constructor(public consent: ConsentService) {}
 * }
 * ```
 */
export const CONSENT_BANNER_TEMPLATE = `
<div
  *ngIf="consent.isBannerVisible"
  class="bp-consent-banner"
  role="dialog"
  aria-modal="true"
  aria-label="Cookie-Einstellungen"
>
  <div class="bp-consent-banner-content">
    <h2>Datenschutzeinstellungen</h2>
    <p>
      Wir nutzen Cookies und ähnliche Technologien, um Ihnen ein optimales
      Nutzererlebnis zu bieten.
    </p>
    <div class="bp-consent-banner-actions">
      <button
        type="button"
        class="bp-consent-btn bp-consent-btn-reject"
        (click)="consent.rejectAll()"
      >
        Alle ablehnen
      </button>
      <button
        type="button"
        class="bp-consent-btn bp-consent-btn-settings"
        (click)="consent.showSettings()"
      >
        Einstellungen
      </button>
      <button
        type="button"
        class="bp-consent-btn bp-consent-btn-accept"
        (click)="consent.acceptAll()"
      >
        Alle akzeptieren
      </button>
    </div>
  </div>
</div>
`;

/**
 * ConsentGateDirective Template
 *
 * @example
 * ```typescript
 * @Directive({
 *   selector: '[bpConsentGate]',
 * })
 * export class ConsentGateDirective implements OnInit, OnDestroy {
 *   @Input('bpConsentGate') category!: ConsentCategory;
 *
 *   private unsubscribe?: () => void;
 *
 *   constructor(
 *     private templateRef: TemplateRef<any>,
 *     private viewContainer: ViewContainerRef,
 *     private consent: ConsentService
 *   ) {}
 *
 *   ngOnInit() {
 *     this.updateView();
 *     this.unsubscribe = this.consent.onConsentChange(() => this.updateView());
 *   }
 *
 *   ngOnDestroy() {
 *     this.unsubscribe?.();
 *   }
 *
 *   private updateView() {
 *     if (this.consent.hasConsent(this.category)) {
 *       this.viewContainer.createEmbeddedView(this.templateRef);
 *     } else {
 *       this.viewContainer.clear();
 *     }
 *   }
 * }
 * ```
 */
export const CONSENT_GATE_USAGE = `
<!-- Verwendung in Templates -->
<div *bpConsentGate="'analytics'">
  <analytics-component></analytics-component>
</div>

<!-- Mit else Template -->
<ng-container *bpConsentGate="'marketing'; else placeholder">
  <marketing-component></marketing-component>
</ng-container>
<ng-template #placeholder>
  <p>Bitte akzeptieren Sie Marketing-Cookies.</p>
</ng-template>
`;

/**
 * RxJS Observable Wrapper fuer ConsentService
 *
 * Fuer Projekte die RxJS bevorzugen:
 *
 * @example
 * ```typescript
 * import { BehaviorSubject, Observable } from 'rxjs';
 *
 * export class ConsentServiceRx extends ConsentServiceBase {
 *   private consentSubject = new BehaviorSubject<ConsentState | null>(null);
 *   private bannerVisibleSubject = new BehaviorSubject<boolean>(false);
 *
 *   consent$ = this.consentSubject.asObservable();
 *   isBannerVisible$ = this.bannerVisibleSubject.asObservable();
 *
 *   constructor(config: ConsentConfig) {
 *     super(config);
 *     this.onConsentChange((c) => this.consentSubject.next(c));
 *     this.onBannerShow(() => this.bannerVisibleSubject.next(true));
 *     this.onBannerHide(() => this.bannerVisibleSubject.next(false));
 *   }
 * }
 * ```
 */
