{# 2FA mid-login challenge — verify TOTP / email OTP / recovery code.
   Contract: ~/.claude/skills/ux-architect/components/auth-2fa.md (UX-077, 1/3) #}
{% extends "site/site_base.html" %}
{% from 'macros/auth_page_wrapper.html' import auth_page_card %}

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

{% block body_class %}dz-auth-page{% endblock %}
{% block body_attrs %}hx-history="false"{% endblock %}

{% block body %}
{# v0.62 CSS refactor: inline Tailwind → semantic .dz-auth-* family. #}
{% call auth_page_card("Verify Your Identity", product_name) %}
  <p class="dz-auth-subtitle">Enter the verification code to continue.</p>

  <form id="dz-2fa-form" class="dz-auth-form">
    <input type="hidden" id="session_token" name="session_token" value="{{ session_token }}">
    <input type="hidden" id="method" name="method" value="{{ default_method }}">

    <div class="dz-auth-field">
      <label id="dz-code-label" for="code" class="dz-auth-label">Verification Code</label>
      <input type="text" id="code" name="code" required autocomplete="one-time-code"
             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
    </button>
  </form>

  {% if "email_otp" in methods %}
  <div class="dz-auth-link-button-row">
    <button id="dz-send-otp" class="dz-auth-link-button">
      Send code to email
    </button>
  </div>
  {% endif %}

  {# Divider with centred "OR" label. CSS pseudo-element draws the line. #}
  <div class="dz-auth-divider dz-auth-divider-row" aria-hidden="true">
    <span class="dz-auth-divider-label">OR</span>
  </div>

  <p class="dz-auth-footer-center">
    <a href="#" id="dz-use-recovery" class="dz-auth-link-muted">Use a recovery code</a>
  </p>
{% endcall %}
{% endblock %}

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

  form.addEventListener('submit', async function(e) {
    e.preventDefault();
    errorDiv.classList.add('hidden');

    const code = document.getElementById('code').value;
    const sessionToken = document.getElementById('session_token').value;
    const method = document.getElementById('method').value;

    try {
      const resp = await fetch('/auth/2fa/verify', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({code, session_token: sessionToken, method})
      });
      const data = await resp.json();

      if (resp.ok) {
        window.location.href = data.redirect_url || '/app';
      } else {
        errorDiv.textContent = data.detail || 'Invalid code';
        errorDiv.classList.remove('hidden');
      }
    } catch (err) {
      errorDiv.textContent = 'Network error. Please try again.';
      errorDiv.classList.remove('hidden');
    }
  });

  const sendOtp = document.getElementById('dz-send-otp');
  if (sendOtp) {
    sendOtp.addEventListener('click', async function() {
      const sessionToken = document.getElementById('session_token').value;
      document.getElementById('method').value = 'email_otp';

      await fetch('/auth/2fa/challenge', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({session_token: sessionToken, method: 'email_otp', code: ''})
      });
      sendOtp.textContent = 'Code sent!';
      sendOtp.disabled = true;
      setTimeout(() => { sendOtp.textContent = 'Resend code'; sendOtp.disabled = false; }, 30000);
    });
  }

  document.getElementById('dz-use-recovery').addEventListener('click', function(e) {
    e.preventDefault();
    document.getElementById('method').value = 'recovery';
    document.getElementById('dz-code-label').textContent = 'Recovery Code';
    const codeInput = document.getElementById('code');
    codeInput.maxLength = 9;
    codeInput.pattern = '[A-Za-z0-9-]*';
    codeInput.inputMode = 'text';
    codeInput.placeholder = 'XXXX-XXXX';
  });
})();
</script>
{% endblock %}