<section class="system-provision-page">
  <span class="page-blob blob-1" aria-hidden="true"></span>
  <span class="page-blob blob-2" aria-hidden="true"></span>
  <span class="page-blob blob-3" aria-hidden="true"></span>

  <div class="container-shell">
    <div class="card-shell">
      <header class="card-header">
        <div class="title-badge">
          <i class="bi bi-shield-lock-fill"></i> SYSADMIN
        </div>
        <h1>Criar Credenciais do Cliente</h1>
        <p>Selecione o cliente e gere o acesso para acompanhamento das linhas no sistema.</p>
      </header>

      <div class="card-body">
        <div class="alert-box error" *ngIf="tenantsError">
          {{ tenantsError }}
        </div>

        <div class="alert-box success" *ngIf="successMessage">
          {{ successMessage }}
        </div>

        <div class="alert-box error" *ngIf="submitErrors.length">
          <strong>Falha ao criar credencial:</strong>
          <ul>
            <li *ngFor="let err of submitErrors">{{ err }}</li>
          </ul>
        </div>

        <form [formGroup]="provisionForm" (ngSubmit)="onSubmit()" class="provision-form" novalidate>
          <div class="form-grid">
            <div class="form-field span-2">
              <label for="tenantId">Cliente</label>
              <div class="select-row">
                <app-select
                  id="tenantId"
                  class="form-control"
                  [options]="tenantOptions"
                  labelKey="label"
                  valueKey="value"
                  formControlName="tenantId"
                  [disabled]="tenantsLoading || tenantOptions.length === 0"
                  [searchable]="true"
                  searchPlaceholder="Pesquisar cliente..."
                  [placeholder]="tenantsLoading ? 'Carregando clientes...' : 'Selecione um cliente...'"
                ></app-select>
                <button type="button" class="btn btn-ghost" (click)="loadTenants()" [disabled]="tenantsLoading">
                  {{ tenantsLoading ? 'Atualizando...' : 'Atualizar lista' }}
                </button>
              </div>
              <small class="field-error" *ngIf="hasFieldError('tenantId', 'required')">
                Selecione um cliente.
              </small>
            </div>

            <div class="form-field">
              <label for="name">Nome</label>
              <input id="name" type="text" class="form-control" formControlName="name" placeholder="Nome do responsável" />
            </div>

            <div class="form-field">
              <label for="email">Email</label>
              <input
                id="email"
                type="email"
                class="form-control"
                formControlName="email"
                placeholder="usuario@cliente.com"
              />
              <small class="field-error" *ngIf="hasFieldError('email', 'required')">Email é obrigatório.</small>
              <small class="field-error" *ngIf="hasFieldError('email', 'email')">Email inválido.</small>
            </div>

            <div class="form-field">
              <label for="password">Senha</label>
              <input
                id="password"
                type="password"
                class="form-control"
                formControlName="password"
                placeholder="Defina uma senha"
                autocomplete="new-password"
              />
              <small class="field-error" *ngIf="hasFieldError('password', 'required')">Senha é obrigatória.</small>
              <small class="field-error" *ngIf="hasFieldError('password', 'minlength')">Mínimo de 6 caracteres.</small>
            </div>

            <div class="form-field">
              <label for="confirmPassword">Confirmar senha</label>
              <input
                id="confirmPassword"
                type="password"
                class="form-control"
                formControlName="confirmPassword"
                placeholder="Repita a senha"
                autocomplete="new-password"
              />
              <small class="field-error" *ngIf="hasFieldError('confirmPassword', 'required')">
                Confirmação é obrigatória.
              </small>
              <small class="field-error" *ngIf="passwordMismatch">As senhas não conferem.</small>
            </div>
          </div>

          <div class="form-actions">
            <button type="submit" class="btn btn-primary" [disabled]="submitting || provisionForm.invalid">
              <span *ngIf="!submitting">Criar credencial de acesso</span>
              <span *ngIf="submitting">Criando...</span>
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>
