atomic-design-poc/libs/beheer/src/ui/feature-flags.page.ts

import { Component, computed, inject } from '@angular/core';
import { PageShellComponent } from '@shared/layout/page-shell/page-shell.component';
import { AlertComponent } from '@shared/ui/alert/alert.component';
import { ButtonComponent } from '@shared/ui/button/button.component';
import { ASYNC } from '@shared/ui/async/async.component';
import { AccessStore } from '@shared/application/access.store';
import { FeatureFlagStore } from '@shared/application/feature-flags.store';

/**
 * Admin page: toggle runtime feature flags (WP-47). Deny-by-default capability gate
 * (`flags:manage`). The catalog is server-owned (code); this only flips the on/off state, which
 * the whole app reads via the same `FeatureFlagStore`.
 */
@Component({
  selector: 'app-feature-flags-page',
  imports: [PageShellComponent, AlertComponent, ButtonComponent, ...ASYNC],
  styles: [
    `
      .flag {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--rhc-space-max-lg);
        padding: var(--rhc-space-max-md) 0;
        border-block-end: var(--rhc-border-width-sm) solid var(--rhc-color-cool-grey-200);
      }
      .flag .meta {
        min-inline-size: 0;
      }
      .flag .key {
        font-family: monospace;
        font-size: var(--rhc-text-font-size-sm);
        color: var(--rhc-color-grijs-700);
      }
      .state {
        font-weight: var(--rhc-text-font-weight-semi-bold);
        margin-inline-end: var(--rhc-space-max-md);
      }
    `,
  ],
  template: `
    <app-page-shell [heading]="heading" [intro]="intro" backLink="/dashboard">
      @if (!access.ready()) {
        <!-- wait for /me before deciding -->
      } @else if (!canManage()) {
        <app-alert type="error">{{ deniedText }}</app-alert>
      } @else {
        <app-async [data]="store.flags()">
          <ng-template appAsyncError>
            <app-alert type="error">{{ failedText }}</app-alert>
            <app-button variant="secondary" (click)="reload()">{{ retryText }}</app-button>
          </ng-template>
          <ng-template appAsyncLoaded>
            @for (f of store.all(); track f.key) {
              <div class="flag">
                <div class="meta">
                  <div>{{ f.description }}</div>
                  <div class="key">{{ f.key }}</div>
                </div>
                <div>
                  <span class="state">{{ f.enabled ? onText : offText }}</span>
                  <app-button
                    [variant]="f.enabled ? 'secondary' : 'primary'"
                    (click)="toggle(f.key, !f.enabled)"
                    >{{ f.enabled ? disableText : enableText }}</app-button
                  >
                </div>
              </div>
            }
          </ng-template>
        </app-async>
      }
    </app-page-shell>
  `,
})
export class FeatureFlagsPage {
  protected store = inject(FeatureFlagStore);
  protected access = inject(AccessStore);

  protected canManage = computed(() => this.access.can('flags:manage'));

  protected heading = $localize`:@@flags.heading:Functievlaggen`;
  protected intro = $localize`:@@flags.intro:Zet functionaliteit aan of uit tijdens runtime. De catalogus staat vast in code; hier beheert u de status.`;
  protected deniedText = $localize`:@@flags.denied:U hebt geen rechten om functievlaggen te beheren.`;
  protected failedText = $localize`:@@flags.failed:De functievlaggen konden niet worden geladen.`;
  protected retryText = $localize`:@@flags.retry:Opnieuw proberen`;
  protected onText = $localize`:@@flags.on:Aan`;
  protected offText = $localize`:@@flags.off:Uit`;
  protected enableText = $localize`:@@flags.enable:Aanzetten`;
  protected disableText = $localize`:@@flags.disable:Uitzetten`;

  protected toggle(key: string, enabled: boolean) {
    void this.store.set(key, enabled);
  }
  protected reload() {
    void this.store.load();
  }
}