<div class="page">
  <div class="page-header">
    <div>
      <h1 class="page-title">Feature Flags</h1>
      <p class="page-subtitle">Ative ou desative features em runtime sem restart</p>
    </div>
    <div style="display:flex;align-items:center;gap:12px">
      @if (version() !== null) {
        <span class="badge badge-info">version {{ version() }}</span>
      }
      <button class="btn btn-secondary" (click)="load()" [disabled]="loading()">
        @if (loading()) {
          <span class="spinner"></span>
        } @else {
          <hugeicons-icon [icon]="RefreshIcon" [size]="16" [strokeWidth]="1.5" />
          Refresh
        }
      </button>
    </div>
  </div>

  <!-- New flag form -->
  <div class="card" style="margin-bottom:24px">
    <div class="card-header">
      <span class="op-badge">POST</span>
      <span class="card-title">Create / Update Flag</span>
    </div>
    <div class="card-body">
      <div class="form-row">
        <div class="input-group" style="flex:1">
          <label>Flag name</label>
          <input [(ngModel)]="newName" placeholder="ex: dark_mode" />
        </div>
        <div class="input-group" style="flex:2">
          <label>Description</label>
          <input [(ngModel)]="newDesc" placeholder="optional description" />
        </div>
        <div style="display:flex;gap:8px;align-self:flex-end">
          <button class="btn btn-success" [disabled]="!newName.trim() || loadingNew()" (click)="createFlag(true)">
            @if (loadingNew()) {
              <span class="spinner"></span>
            } @else {
              <hugeicons-icon [icon]="TickDouble01Icon" [size]="15" [strokeWidth]="1.5" />
              Enable
            }
          </button>
          <button class="btn btn-danger" [disabled]="!newName.trim() || loadingNew()" (click)="createFlag(false)">
            @if (loadingNew()) {
              <span class="spinner"></span>
            } @else {
              <hugeicons-icon [icon]="Cancel01Icon" [size]="15" [strokeWidth]="1.5" />
              Disable
            }
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Flags list -->
  @if (loading() && flags().length === 0) {
    <div class="loading-state">
      <span class="spinner" style="width:28px;height:28px;border-width:3px"></span>
    </div>
  } @else if (flags().length === 0) {
    <div class="empty-state">Nenhuma feature flag configurada ainda.</div>
  } @else {
    <div class="flags-grid">
      @for (flag of flags(); track flag.name) {
        <div
          class="flag-card"
          [class.flag-enabled]="flag.enabled"
          [class.flag-disabled]="!flag.enabled"
        >
          <div class="flag-header">
            <div style="display:flex;align-items:center;gap:8px">
              <hugeicons-icon [icon]="Flag01Icon" [size]="16" [strokeWidth]="1.5" />
              <span class="flag-name">{{ flag.name }}</span>
            </div>
            <span class="badge" [class.badge-success]="flag.enabled" [class.badge-danger]="!flag.enabled">
              {{ flag.enabled ? 'ENABLED' : 'DISABLED' }}
            </span>
          </div>
          @if (flag.description) {
            <p class="flag-desc">{{ flag.description }}</p>
          }
          <div class="flag-actions">
            @if (!flag.enabled) {
              <button class="btn btn-success btn-sm" (click)="toggle(flag, true)">
                <hugeicons-icon [icon]="TickDouble01Icon" [size]="14" [strokeWidth]="1.5" /> Enable
              </button>
            } @else {
              <button class="btn btn-danger btn-sm" (click)="toggle(flag, false)">
                <hugeicons-icon [icon]="Cancel01Icon" [size]="14" [strokeWidth]="1.5" /> Disable
              </button>
            }
          </div>
        </div>
      }
    </div>
  }
</div>
