{% 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 %}
{% 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="hidden flex gap-2 p-3 mb-4 rounded-[4px] border border-[hsl(var(--primary))] bg-[hsl(var(--primary)/0.08)] text-[13px] text-[hsl(var(--foreground))]"
       role="status"></div>

  {# ─── TOTP (Authenticator App) ─────────────────────────────────────── #}
  <div id="dz-totp-section">
    <h2 class="text-[14px] font-semibold text-[hsl(var(--foreground))] mb-1">Authenticator App</h2>
    <p class="text-[13px] text-[hsl(var(--muted-foreground))] mb-3">
      Scan this QR code with your authenticator app (Google Authenticator, Authy, etc.)
    </p>

    <div id="dz-qr-container" class="flex justify-center my-4">
      <button id="dz-setup-totp"
              class="h-9 px-4 rounded-[4px] border border-[hsl(var(--primary))] bg-transparent text-[hsl(var(--primary))] text-[13px] font-medium hover:bg-[hsl(var(--primary)/0.08)] transition-colors duration-[120ms]">
        Generate QR Code
      </button>
    </div>

    <div id="dz-totp-verify" class="hidden">
      <p class="text-[13px] text-[hsl(var(--muted-foreground))] mb-2">
        Or enter the secret manually:
        <code id="dz-totp-secret" class="text-[11px] font-mono text-[hsl(var(--foreground))] bg-[hsl(var(--muted))] px-1 py-0.5 rounded-[3px]"></code>
      </p>

      <form id="dz-totp-form" class="space-y-3">
        <div class="w-full space-y-1">
          <label for="totp_code" class="block text-[13px] font-medium text-[hsl(var(--foreground))]">Enter code from app</label>
          <input type="text" id="totp_code" name="code" required
                 inputmode="numeric" pattern="[0-9]*" maxlength="6"
                 placeholder="000000"
                 class="w-full h-10 px-3 rounded-[4px] bg-[hsl(var(--background))] border border-[hsl(var(--border))] text-center text-[20px] font-semibold tracking-[0.4em] text-[hsl(var(--foreground))] placeholder:text-[hsl(var(--muted-foreground))] focus:outline-none focus:ring-1 focus:ring-[hsl(var(--ring))] transition-[box-shadow,border-color] duration-[120ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]">
        </div>
        <button type="submit"
                class="w-full h-9 rounded-[4px] bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] text-[13px] font-medium hover:brightness-110 transition-[filter] duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)] mt-2">
          Verify &amp; Enable
        </button>
      </form>
    </div>
  </div>

  <hr class="my-6 border-[hsl(var(--border))]">

  {# ─── Email OTP ────────────────────────────────────────────────────── #}
  <div id="dz-email-otp-section">
    <h2 class="text-[14px] font-semibold text-[hsl(var(--foreground))] mb-1">Email Verification</h2>
    <p class="text-[13px] text-[hsl(var(--muted-foreground))] mb-3">
      Receive a one-time code via email when you sign in.
    </p>
    <button id="dz-enable-email-otp"
            class="w-full h-9 rounded-[4px] border border-[hsl(var(--border))] bg-transparent text-[hsl(var(--foreground))] text-[13px] font-medium hover:bg-[hsl(var(--muted)/0.5)] disabled:opacity-50 disabled:hover:bg-transparent transition-colors duration-[120ms]">
      Enable Email OTP
    </button>
  </div>

  {# ─── Recovery Codes ─────────────────────────────────────────────── #}
  <div id="dz-recovery-section" class="hidden mt-4">
    <div class="rounded-[4px] border border-[hsl(var(--border))] bg-[hsl(var(--muted)/0.5)] p-3" role="alert">
      <h3 class="text-[13px] font-semibold text-[hsl(var(--foreground))]">Save Your Recovery Codes</h3>
      <p class="text-[12px] text-[hsl(var(--muted-foreground))] mt-1">
        Store these codes in a safe place. Each code can only be used once.
      </p>
    </div>
    <div id="dz-recovery-codes" class="grid grid-cols-2 gap-2 mt-4 font-mono text-[12px]"></div>
  </div>

  <div class="mt-6">
    <a href="/app"
       class="block w-full h-9 leading-9 text-center rounded-[4px] text-[hsl(var(--muted-foreground))] text-[13px] font-medium hover:text-[hsl(var(--foreground))] hover:bg-[hsl(var(--muted)/0.5)] transition-colors duration-[120ms]">
      Back to App
    </a>
  </div>
{% endcall %}
{% endblock %}

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

  // Class string applied to each recovery-code pill. Kept in one place so the
  // grammar matches the rest of the UX-036 adopters (see /ux-log cycle 41).
  const RECOVERY_CODE_CLASSES =
    'rounded-[4px] border border-[hsl(var(--border))] bg-[hsl(var(--background))] ' +
    'px-2 py-2 text-center text-[12px] text-[hsl(var(--foreground))]';

  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 = 'https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=' + encodeURIComponent(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 %}