{# 2FA enrollment — TOTP authenticator setup + email OTP + recovery codes.
   Contract: ~/.claude/skills/ux-architect/components/auth-2fa.md (UX-077, 2/3) #}
{% extends "site/site_base.html" %}
{% from 'macros/auth_page_wrapper.html' import auth_page_card %}

{% block title %}Set Up Two-Factor Authentication - {{ product_name }}{% endblock %}

{% block body_class %}dz-auth-page{% endblock %}

{% block body %}
{# v0.62 CSS refactor: inline Tailwind → semantic .dz-auth-* family. #}
{% call auth_page_card("Set Up 2FA", product_name) %}

  {# The macro renders #dz-auth-error. Success alert is unique to this flow, so we add it inline. #}
  <div id="dz-auth-success" class="dz-auth-success hidden" role="status"></div>

  {# ─── TOTP (Authenticator App) ─────────────────────────────────────── #}
  <div id="dz-totp-section">
    <h2 class="dz-auth-section-title">Authenticator App</h2>
    <p class="dz-auth-section-body">
      Scan this QR code with your authenticator app (Google Authenticator, Authy, etc.)
    </p>

    <div id="dz-qr-container" class="dz-auth-qr-container">
      <button id="dz-setup-totp" class="dz-button dz-button-outline">
        Generate QR Code
      </button>
    </div>

    <div id="dz-totp-verify" class="hidden">
      <p class="dz-auth-section-body">
        Or enter the secret manually:
        <code id="dz-totp-secret" class="dz-auth-secret-inline"></code>
      </p>

      <form id="dz-totp-form" class="dz-auth-form">
        <div class="dz-auth-field">
          <label for="totp_code" class="dz-auth-label">Enter code from app</label>
          <input type="text" id="totp_code" name="code" required
                 inputmode="numeric" pattern="[0-9]*" maxlength="6"
                 placeholder="000000"
                 class="dz-auth-input-code">
        </div>
        <button type="submit" class="dz-button dz-button-primary dz-auth-submit">
          Verify &amp; Enable
        </button>
      </form>
    </div>
  </div>

  <hr class="dz-auth-hr">

  {# ─── Email OTP ────────────────────────────────────────────────────── #}
  <div id="dz-email-otp-section">
    <h2 class="dz-auth-section-title">Email Verification</h2>
    <p class="dz-auth-section-body">
      Receive a one-time code via email when you sign in.
    </p>
    <button id="dz-enable-email-otp" class="dz-button dz-button-outline dz-auth-submit">
      Enable Email OTP
    </button>
  </div>

  {# ─── Recovery Codes ─────────────────────────────────────────────── #}
  <div id="dz-recovery-section" class="hidden">
    <div class="dz-auth-recovery-alert" role="alert">
      <h3 class="dz-auth-recovery-alert-title">Save Your Recovery Codes</h3>
      <p class="dz-auth-recovery-alert-body">
        Store these codes in a safe place. Each code can only be used once.
      </p>
    </div>
    <div id="dz-recovery-codes" class="dz-auth-recovery-grid"></div>
  </div>

  <a href="/app" class="dz-auth-back-link">
    Back to App
  </a>
{% endcall %}
{% endblock %}

{% block scripts_extra %}
<script>
(function() {
  const errorDiv = document.getElementById('dz-auth-error');
  const successDiv = document.getElementById('dz-auth-success');

  // v0.62 CSS refactor: recovery-pill chrome moved from inline Tailwind
  // string to `.dz-auth-recovery-pill` rule (components/fragments.css).
  const RECOVERY_CODE_CLASSES = 'dz-auth-recovery-pill';

  function showError(msg) {
    errorDiv.textContent = msg;
    errorDiv.classList.remove('hidden');
    successDiv.classList.add('hidden');
  }

  function showSuccess(msg) {
    successDiv.textContent = msg;
    successDiv.classList.remove('hidden');
    errorDiv.classList.add('hidden');
  }

  function showRecoveryCodes(codes) {
    const container = document.getElementById('dz-recovery-codes');
    container.replaceChildren();
    codes.forEach(function(code) {
      const pill = document.createElement('div');
      pill.className = RECOVERY_CODE_CLASSES;
      pill.textContent = code;
      container.appendChild(pill);
    });
    document.getElementById('dz-recovery-section').classList.remove('hidden');
  }

  // TOTP setup
  document.getElementById('dz-setup-totp').addEventListener('click', async function() {
    try {
      const resp = await fetch('/auth/2fa/setup/totp', {method: 'POST'});
      const data = await resp.json();
      if (!resp.ok) { showError(data.detail || 'Setup failed'); return; }

      document.getElementById('dz-totp-secret').textContent = data.secret;
      const qrContainer = document.getElementById('dz-qr-container');
      qrContainer.replaceChildren();
      const img = document.createElement('img');
      img.src = data.qr_data_uri;
      img.alt = 'QR Code';
      img.width = 200;
      img.height = 200;
      qrContainer.appendChild(img);
      document.getElementById('dz-totp-verify').classList.remove('hidden');
    } catch (err) { showError('Network error'); }
  });

  // TOTP verify
  document.getElementById('dz-totp-form').addEventListener('submit', async function(e) {
    e.preventDefault();
    const code = document.getElementById('totp_code').value;
    try {
      const resp = await fetch('/auth/2fa/verify/totp', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({code: code})
      });
      const data = await resp.json();
      if (!resp.ok) { showError(data.detail || 'Invalid code'); return; }

      showSuccess('TOTP enabled successfully!');
      if (data.recovery_codes) { showRecoveryCodes(data.recovery_codes); }
    } catch (err) { showError('Network error'); }
  });

  // Email OTP enable
  document.getElementById('dz-enable-email-otp').addEventListener('click', async function() {
    try {
      const resp = await fetch('/auth/2fa/setup/email-otp', {method: 'POST'});
      const data = await resp.json();
      if (!resp.ok) { showError(data.detail || 'Setup failed'); return; }
      showSuccess('Email OTP enabled!');
      this.textContent = 'Enabled';
      this.disabled = true;
    } catch (err) { showError('Network error'); }
  });
})();
</script>
{% endblock %}