<div class="signin-wrapper">
  <!-- Left Side - Login Form -->
  <div class="signin-left">
    <div class="signin-form-container">
      <div class="signin-header">
        <h2 class="signin-title">Se connecter</h2>
        <p class="signin-subtitle">Accédez à votre espace Estair</p>
      </div>        <!-- Indicateur de progression lors du login -->
      <div *ngIf="isLoading" class="loading-progress" role="status" aria-live="polite">
        <div class="progress-bar" [attr.aria-valuenow]="loadingProgress" aria-valuemin="0" aria-valuemax="100">
          <div class="progress-fill" [style.width.%]="loadingProgress"></div>
        </div>
        <p class="loading-message">{{ loadingMessage }}</p>
        
        <!-- Aperçu de l'élément sélectionné -->
        <div *ngIf="selectedElementInfo && loadingProgress > 75" class="selected-element-preview">
          <div class="preview-header">
            <i class="icon-preview" aria-hidden="true"></i>
            <span>Élément sélectionné</span>
          </div>
          <div class="preview-content">
            <div class="preview-item">
              <strong>{{ selectedElementInfo.moduleName }}</strong>
              <span class="preview-path">{{ selectedElementInfo.menuName }} › {{ selectedElementInfo.domainName }}</span>
            </div>
            <div *ngIf="previewData && previewData.hasData" class="preview-stats">
              <span class="stat-item" *ngIf="previewData.listsCount > 0">
                <i class="icon-list" aria-hidden="true"></i>
                {{ previewData.listsCount }} vue{{ previewData.listsCount > 1 ? 's' : '' }}
              </span>
              <span class="stat-item" *ngIf="previewData.ctaCount > 0">
                <i class="icon-action" aria-hidden="true"></i>
                {{ previewData.ctaCount }} action{{ previewData.ctaCount > 1 ? 's' : '' }}
              </span>
            </div>
            <div *ngIf="previewData && previewData.availableActions?.length > 0" class="preview-actions">
              <span class="actions-label">Actions disponibles:</span>
              <span class="action-chip" *ngFor="let action of previewData.availableActions">{{ action }}</span>
            </div>
          </div>
        </div>
        
        <div class="loading-spinner" aria-hidden="true"></div>
      </div>

      <!-- Message de blocage -->
      <div *ngIf="isBlocked && blockTimeRemaining > 0" class="blocked-message" role="alert">
        <i class="icon-warning" aria-hidden="true"></i>
        <p>Trop de tentatives de connexion.</p>
        <p>Veuillez attendre <strong>{{ blockTimeRemaining }}</strong> seconde{{ blockTimeRemaining > 1 ? 's' : '' }} avant de réessayer.</p>
      </div>      <form [formGroup]="form" [class.form-disabled]="isLoading || isBlocked" novalidate>
        <div class="form-group modern-input-group">
          <div class="input-wrapper">
            <div class="input-icon">
              <i class="icon-user" aria-hidden="true"></i>
            </div>
            <input
              id="username"
              type="text"
              class="form-control modern-input"
              placeholder="Nom d'utilisateur"
              formControlName="username"
              [class.is-invalid]="submitted && f.username.errors"
              [class.is-valid]="!f.username.errors && f.username.value"
              [disabled]="isLoading || isBlocked"
              autocomplete="username"
              [attr.aria-describedby]="submitted && f.username.errors ? 'username-error' : null"
            />
            <label class="floating-label" for="username">Utilisateur *</label>
          </div>
          <div *ngIf="submitted && f.username.errors" class="invalid-feedback" id="username-error">
            <div *ngIf="f.username.errors.required">
              Nom d'utilisateur est requis
            </div>
          </div>
        </div>
        
        <div class="form-group modern-input-group">
          <div class="input-wrapper">
            <div class="input-icon">
              <i class="icon-lock" aria-hidden="true"></i>
            </div>
            <input
              id="password"
              [type]="type"
              class="form-control modern-input"
              placeholder="Mot de passe"
              formControlName="password"
              [class.is-invalid]="submitted && f.password.errors"
              [class.is-valid]="!f.password.errors && f.password.value"
              [disabled]="isLoading || isBlocked"
              autocomplete="current-password"
              [attr.aria-describedby]="submitted && f.password.errors ? 'password-error' : null"
            />
            <label class="floating-label" for="password">Mot de passe *</label>
            <span class="password-toggle"
              [class.icon-eye]="hide"
              [class.icon-eye-close]="!hide"
              [class.disabled]="isLoading || isBlocked"
              (click)="!isLoading && !isBlocked && showPassword()"
              [attr.aria-label]="hide ? 'Afficher le mot de passe' : 'Masquer le mot de passe'"
              role="button"
              tabindex="0"
              (keydown.enter)="!isLoading && !isBlocked && showPassword()"
              (keydown.space)="!isLoading && !isBlocked && showPassword()">
            </span>
          </div>
          <div *ngIf="submitted && f.password.errors" class="invalid-feedback" id="password-error">
            <div *ngIf="f.password.errors.required">
              Le mot de passe est requis
            </div>
          </div>
        </div>

        <!-- Indicateur de tentatives -->
        <div *ngIf="connectionAttempts > 0 && !isBlocked" class="attempts-warning" role="status">
          <i class="icon-warning" aria-hidden="true"></i>
          Tentative {{ connectionAttempts }}/{{ maxAttempts }}
        </div>

        <!-- Message d'erreur amélioré -->
        <div *ngIf="errorLogin" class="error-login" role="alert">
          <i class="icon-warning" aria-hidden="true"></i>
          {{ errorLogin }}
        </div>

        <!-- Lien mot de passe oublié moderne -->
        <div class="forgot-password-section">
          <button type="button"
                  class="forgot-password-link"
                  (click)="showForgotPasswordForm()"
                  [disabled]="isLoading">
            <span class="forgot-icon">🔑</span>
            Mot de passe oublié ?
          </button>
        </div>
          <button
          type="submit"
          (click)="sumbitLogin()"
          class="btn btn-primary btn-connexion modern-btn"
          [disabled]="isLoading || isBlocked || !isFormValid"
          [class.btn-loading]="isLoading"
          [attr.aria-busy]="isLoading">
          
          <span *ngIf="!isLoading && !isBlocked" class="btn-content">
            <i class="icon-login" aria-hidden="true"></i>
            Se connecter
          </span>
          <span *ngIf="isBlocked" class="btn-content">
            <i class="icon-clock" aria-hidden="true"></i>
            Bloqué ({{ blockTimeRemaining }}s)
          </span>
          <span *ngIf="isLoading && !isBlocked" class="loading-content">
            <i class="spinner" aria-hidden="true"></i>
            {{ loadingMessage || 'Connexion en cours...' }}
          </span>
        </button>

        <!-- Indicateur de validation du formulaire -->
        <div *ngIf="!isFormValid && (f.username.touched || f.password.touched)" class="form-hint" role="status">
          <small>Veuillez remplir tous les champs requis</small>
        </div>

        <!-- Bouton de déblocage d'urgence (développement seulement) -->
        <div *ngIf="isBlocked && !environment.production" class="emergency-unblock">
          <button 
            type="button" 
            class="btn btn-outline-warning btn-sm"
            (click)="clearLoginBlocking()"
            title="Débloquer immédiatement (développement)">
            🔓 Débloquer
          </button>
        </div>
        
        <!-- Sign up link -->
        <div class="signup-link">
          <p>Besoin d'aide ? <a href="#" class="link-primary">Contactez le support</a></p>
        </div>
      </form>

      <!-- Formulaire Mot de passe oublié -->
      <div class="forgot-password-overlay"
           *ngIf="showForgotPassword"
           (click)="closeForgotPasswordForm()">
        <div class="forgot-password-modal" (click)="$event.stopPropagation()">
          <div class="forgot-header">
            <div class="forgot-title-section">
              <div class="forgot-icon-large">🔑</div>
              <h3 class="forgot-title">Mot de passe oublié</h3>
              <p class="forgot-subtitle">Entrez votre adresse e-mail pour recevoir un lien de réinitialisation</p>
            </div>
            <button class="close-btn" (click)="closeForgotPasswordForm()" type="button">
              <span class="close-icon">✕</span>
            </button>
          </div>

          <form [formGroup]="forgotPasswordForm" (ngSubmit)="submitForgotPassword()" class="forgot-form">
            <!-- Email input -->
            <div class="modern-input-group">
              <div class="input-wrapper">
                <div class="input-icon">
                  <i class="icon-mail" aria-hidden="true"></i>
                </div>
                <input
                  id="forgotEmail"
                  type="email"
                  class="form-control modern-input"
                  placeholder="votre-email@exemple.com"
                  formControlName="email"
                  [class.is-invalid]="forgotPasswordSubmitted && forgotPasswordForm.get('email')?.errors"
                  [class.is-valid]="!forgotPasswordForm.get('email')?.errors && forgotPasswordForm.get('email')?.value"
                  [disabled]="isForgotPasswordLoading"
                  autocomplete="email"
                />
                <label class="floating-label" for="forgotEmail">Adresse e-mail *</label>
              </div>
              <div *ngIf="forgotPasswordSubmitted && forgotPasswordForm.get('email')?.errors" class="invalid-feedback">
                <div *ngIf="forgotPasswordForm.get('email')?.errors?.['required']">
                  L'adresse e-mail est requise
                </div>
                <div *ngIf="forgotPasswordForm.get('email')?.errors?.['email']">
                  Veuillez saisir une adresse e-mail valide
                </div>
              </div>
            </div>

            <!-- Messages d'erreur/succès -->
            <div *ngIf="forgotPasswordError" class="error-message" role="alert">
              <i class="icon-warning" aria-hidden="true"></i>
              {{ forgotPasswordError }}
            </div>

            <div *ngIf="forgotPasswordSuccess" class="success-message" role="alert">
              <i class="icon-success" aria-hidden="true"></i>
              {{ forgotPasswordSuccess }}
            </div>

            <!-- Actions -->
            <div class="forgot-actions">
              <button type="button"
                      class="btn btn-secondary forgot-cancel-btn"
                      (click)="closeForgotPasswordForm()"
                      [disabled]="isForgotPasswordLoading">
                <span class="btn-content">
                  <i class="icon-cancel" aria-hidden="true"></i>
                  Annuler
                </span>
              </button>

              <button type="submit"
                      class="btn btn-primary forgot-submit-btn"
                      [disabled]="isForgotPasswordLoading || !forgotPasswordForm.valid">
                <span *ngIf="!isForgotPasswordLoading" class="btn-content">
                  <i class="icon-send" aria-hidden="true"></i>
                  Envoyer le lien
                </span>
                <span *ngIf="isForgotPasswordLoading" class="loading-content">
                  <i class="spinner" aria-hidden="true"></i>
                  Envoi en cours...
                </span>
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

  <!-- Right Side - Branding -->
  <div class="signin-right">
    <div class="branding-container">
      <div class="logo-section">
        <img src="../../assets/icons/logo.png" alt="Logo Estair" class="auth-logo" />
        <!-- <h3 class="branding-title">Estair</h3> -->
        <p class="branding-tagline">Plateforme de gestion moderne et intuitive</p>
      </div>
      
      <!-- Decorative elements -->
      <div class="decorative-grid">
        <div class="grid-pattern"></div>
      </div>
    </div>
  </div>
</div>
