<!-- src/app/pages/register.component.html -->

<div class="register-wrapper">
  <div class="register-card shadow-sm">

    <!-- Barra / título -->
    <div class="register-title mb-4">
      <span class="register-icon">
        <i class="bi bi-box-arrow-in-right"></i>
      </span>
      <h2 class="mb-0">Cadastre-se</h2>
    </div>

    <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">

      <!-- Nome completo -->
      <div class="mb-3">
        <label class="form-label">Nome Completo</label>
        <input
          type="text"
          class="form-control"
          formControlName="fullName"
          placeholder="Nome Completo" />

        <div class="text-danger small mt-1" *ngIf="hasError('fullName')">
          Informe o seu nome completo (mínimo 3 caracteres).
        </div>
      </div>

      <!-- E-mail -->
      <div class="mb-3">
        <label class="form-label">E-mail</label>
        <input
          type="email"
          class="form-control"
          formControlName="email"
          placeholder="E-mail" />

        <div class="text-danger small mt-1" *ngIf="hasError('email', 'required')">
          E-mail é obrigatório.
        </div>
        <div class="text-danger small mt-1" *ngIf="hasError('email', 'email')">
          Informe um e-mail válido.
        </div>
      </div>

      <!-- Telefone -->
      <div class="mb-3">
        <label class="form-label">Telefone</label>
        <input
          type="tel"
          class="form-control"
          formControlName="phone"
          placeholder="Telefone" />

        <div class="text-danger small mt-1" *ngIf="hasError('phone')">
          Informe um telefone válido.
        </div>
      </div>

      <!-- Senha -->
      <div class="mb-3">
        <label class="form-label">Senha</label>
        <input
          type="password"
          class="form-control"
          formControlName="password"
          placeholder="Senha" />

        <div class="text-danger small mt-1" *ngIf="hasError('password')">
          A senha deve ter pelo menos 6 caracteres.
        </div>
      </div>

      <!-- Confirmar senha -->
      <div class="mb-4">
        <label class="form-label">Confirme sua senha</label>
        <input
          type="password"
          class="form-control"
          formControlName="confirmPassword"
          placeholder="Confirme sua senha" />

        <div class="text-danger small mt-1" *ngIf="registerForm.errors?.['passwordsMismatch'] && registerForm.touched">
          As senhas não conferem.
        </div>
      </div>

      <!-- Erro da API -->
      <div *ngIf="apiError" class="alert alert-danger py-2 mb-3">
        {{ apiError }}
      </div>

      <!-- Botão Cadastrar -->
      <button
        type="submit"
        class="btn btn-primary w-100 register-btn mb-3"
        [disabled]="isSubmitting">
        {{ isSubmitting ? 'Cadastrando...' : 'CADASTRAR' }}
      </button>

      <!-- Botão para quem já tem conta -->
      <button
        type="button"
        class="btn btn-outline-primary w-100 login-btn"
        routerLink="/login">
        JÁ TEM UMA CONTA? ENTRE
      </button>

    </form>
  </div>
</div>

<!-- Toast (Sucesso Cadastro) -->
<div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 2000;">
  <div
    #successToast
    class="toast text-bg-success"
    role="alert"
    aria-live="assertive"
    aria-atomic="true"
  >
    <div class="toast-header">
      <strong class="me-auto">LineGestão</strong>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Fechar"></button>
    </div>
    <div class="toast-body">
      {{ toastMessage }}
    </div>
  </div>
</div>
