<div class="page">
  <div class="page-header">
    <div>
      <h1 class="page-title">Token Admin</h1>
      <p class="page-subtitle">Gerenciamento de Bearer Tokens - requer <code>API_AUTH_ENABLED=true</code></p>
    </div>
    <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>

  <!-- Session token -->
  <div class="card" style="margin-bottom:24px">
    <div class="card-header">
      <hugeicons-icon [icon]="LockPasswordIcon" [size]="17" [strokeWidth]="1.5" />
      <span class="card-title">Bearer Token da Sessão</span>
    </div>
    <div class="card-body">
      <p style="font-size:0.85rem;color:var(--text-secondary);margin-bottom:12px">
        Informe o token para autenticar todas as requisições desta sessão.
      </p>
      <div class="row-inline">
        <div class="input-group" style="flex:1">
          <label>Token</label>
          <input type="password" [(ngModel)]="sessionToken" placeholder="apx_..." />
        </div>
        <button class="btn btn-primary" style="align-self:flex-end" (click)="saveSessionToken()">
          <hugeicons-icon [icon]="CheckmarkCircle01Icon" [size]="15" [strokeWidth]="1.5" /> Salvar
        </button>
        @if (hasSessionToken()) {
          <button class="btn btn-danger" style="align-self:flex-end" (click)="clearSessionToken()">
            <hugeicons-icon [icon]="Delete01Icon" [size]="15" [strokeWidth]="1.5" /> Limpar
          </button>
          <div class="token-active-badge">
            <hugeicons-icon [icon]="CheckmarkCircle01Icon" [size]="14" [strokeWidth]="1.5" /> Token ativo na sessão
          </div>
        }
      </div>
    </div>
  </div>

  <!-- Create token -->
  <div class="card" style="margin-bottom:24px">
    <div class="card-header"><span class="op-badge">POST</span><span class="card-title">Criar Token</span></div>
    <div class="card-body">
      <div class="form-grid">
        <div class="input-group">
          <label>Nome</label>
          <input [(ngModel)]="newName" placeholder="ex: ci-pipeline" />
        </div>
        <div class="input-group">
          <label>Expira em (dias) - vazio = nunca</label>
          <input type="number" [(ngModel)]="newExpiry" placeholder="30" min="1" />
        </div>
        <div class="input-group" style="grid-column:1/-1">
          <label>Permissions</label>
          <div class="perms-row">
            @for (p of allPermissions; track p) {
              <label class="perm-toggle" [class.selected]="newPerms().includes(p)">
                <input type="checkbox" [checked]="newPerms().includes(p)" (change)="togglePerm(p)" />
                {{ p }}
              </label>
            }
          </div>
        </div>
      </div>
      <button class="btn btn-primary" style="margin-top:14px" [disabled]="!newName.trim() || newPerms().length === 0 || loadingCreate()" (click)="createToken()">
        @if (loadingCreate()) {
          <span class="spinner"></span>
        } @else {
          <hugeicons-icon [icon]="Add01Icon" [size]="15" [strokeWidth]="1.5" />
          Create Token
        }
      </button>

      @if (createdToken()) {
        <div class="created-token-box">
          <div class="created-token-label">
            <hugeicons-icon [icon]="LockIcon" [size]="14" [strokeWidth]="1.5" />
            Copie agora - este token não será exibido novamente
          </div>
          <div class="created-token-value">{{ createdToken() }}</div>
          <button class="btn btn-secondary btn-sm" (click)="copyToken()">
            <hugeicons-icon [icon]="Copy01Icon" [size]="14" [strokeWidth]="1.5" /> Copy
          </button>
        </div>
      }
    </div>
  </div>

  <!-- Tokens list -->
  <div class="card">
    <div class="card-header" style="justify-content:space-between">
      <div style="display:flex;align-items:center;gap:10px">
        <span class="card-title">Tokens Ativos</span>
        <span class="badge badge-info">{{ tokens().length }}</span>
      </div>
    </div>

    @if (loading() && tokens().length === 0) {
      <div class="loading-state"><span class="spinner" style="width:28px;height:28px;border-width:3px"></span></div>
    } @else if (authError()) {
      <div class="auth-error">
        <hugeicons-icon [icon]="LockIcon" [size]="24" [strokeWidth]="1.5" />
        <div>
          <strong>Auth required</strong>
          <p>Configure o Bearer Token da sessão acima e tente novamente.</p>
        </div>
      </div>
    } @else if (tokens().length === 0) {
      <div class="empty-state">Nenhum token criado ainda.</div>
    } @else {
      <div class="table-wrapper">
        <table class="tokens-table">
          <thead>
            <tr><th>Name</th><th>ID</th><th>Permissions</th><th>Created</th><th>Expires</th><th>Actions</th></tr>
          </thead>
          <tbody>
            @for (t of tokens(); track t.id) {
              <tr [class.expired]="isExpired(t)">
                <td class="name-cell">{{ t.name }}</td>
                <td class="mono id-cell">{{ t.id.substring(0, 8) }}...</td>
                <td>
                  <div class="perms-chips">
                    @for (p of t.permissions; track p) {
                      <span class="perm-chip" [class]="'perm-' + p.toLowerCase()">{{ p }}</span>
                    }
                  </div>
                </td>
                <td class="time-cell">{{ nsToDate(t.created_at) | date:'dd/MM/yy HH:mm' }}</td>
                <td class="time-cell">
                  @if (t.expires_at) { {{ nsToDate(t.expires_at) | date:'dd/MM/yy' }} }
                  @else { <span style="color:var(--text-muted)">Never</span> }
                </td>
                <td>
                  <button class="btn btn-danger btn-sm" (click)="revokeToken(t.id)" style="display:flex;align-items:center;gap:6px">
                    <hugeicons-icon [icon]="Delete01Icon" [size]="14" [strokeWidth]="1.5" /> Revoke
                  </button>
                </td>
              </tr>
            }
          </tbody>
        </table>
      </div>
    }
  </div>
</div>
