<section class="security-section">
  <div class="section-header">
    <h2>Two-Factor Authentication</h2>
    <p>Protect your account with enterprise-grade MFA</p>
  </div>

  <div class="card">
    <div class="security-status">
      <p>
        <strong>2FA Status:</strong>
        <span [class]="twoFAEnabled ? 'status-enabled' : 'status-disabled'">
          {{ twoFAEnabled ? 'Enabled' : 'Disabled' }}
        </span>
      </p>
      <p *ngIf="twoFAStatus?.hasBackupCodes" class="backup-codes-info">
        You have {{ twoFAStatus.backupCodesCount }} backup codes
      </p>
    </div>
    <p class="info-text">Two-factor authentication adds an extra layer of security to your account.</p>
    <div class="security-actions">
      <button *ngIf="!twoFAEnabled" class="primary-button" (click)="onSetup()">Enable 2FA</button>
      <button *ngIf="twoFAEnabled" class="danger-button" (click)="onDisable()">Disable 2FA</button>
    </div>
  </div>

  <div *ngIf="show2FAModal" class="modal-overlay" (click)="onCloseModal()">
    <div class="modal-content" (click)="$event.stopPropagation()">
      <div class="modal-header">
        <h2>Setup Two-Factor Authentication</h2>
        <button class="modal-close" (click)="onCloseModal()">×</button>
      </div>
      <div class="modal-body">
        <p class="modal-instructions">
          1. Scan the QR code below with your authenticator app (Google Authenticator, Authy, etc.)<br />
          2. Enter the 6-digit code from your app to enable 2FA
        </p>

        <div class="qr-code-container" *ngIf="qrCodeUrl">
          <img [src]="qrCodeUrl" alt="QR Code for 2FA Setup" class="qr-code-image" />
        </div>

        <div class="secret-key-container" *ngIf="twoFASecretKey">
          <p><strong>Or enter this secret key manually:</strong></p>
          <code class="secret-key">{{ twoFASecretKey }}</code>
        </div>

        <div class="code-input-container">
          <label for="twoFACode">Enter 6-digit code:</label>
          <input
            type="text"
            id="twoFACode"
            [ngModel]="twoFACodeInput"
            (ngModelChange)="onCodeChange($event)"
            maxlength="6"
            placeholder="000000"
            pattern="[0-9]{6}"
            class="code-input"
          />
        </div>

        <div class="backup-codes-preview" *ngIf="twoFABackupCodes.length > 0">
          <p><strong>Save these backup codes in a secure location:</strong></p>
          <div class="backup-codes-list">
            <code *ngFor="let code of twoFABackupCodes">{{ code }}</code>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button class="secondary-button" (click)="onCloseModal()">Cancel</button>
        <button class="primary-button" (click)="onVerify()">Verify &amp; Enable</button>
      </div>
    </div>
  </div>
</section>

