{% 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 %}
{% call auth_page_card("Verify Your Identity", product_name) %}
  <p class="text-center text-[13px] text-[hsl(var(--muted-foreground))] mb-4 -mt-2">
    Enter the verification code to continue.
  </p>

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

    <div class="w-full space-y-1">
      <label id="dz-code-label" for="code" class="block text-[13px] font-medium text-[hsl(var(--foreground))]">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="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-4">
      Verify
    </button>
  </form>

  {% if "email_otp" in methods %}
  <div class="text-center mt-3">
    <button id="dz-send-otp"
            class="h-7 px-3 text-[12px] text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] hover:underline disabled:opacity-50 disabled:no-underline">
      Send code to email
    </button>
  </div>
  {% endif %}

  {# Divider with centred "OR" label. Pure Tailwind replacement for DaisyUI .border-t border-[hsl(var(--border))]. #}
  <div class="relative my-4" aria-hidden="true">
    <div class="absolute inset-0 flex items-center">
      <div class="w-full border-t border-[hsl(var(--border))]"></div>
    </div>
    <div class="relative flex justify-center">
      <span class="px-2 text-[11px] uppercase tracking-wider text-[hsl(var(--muted-foreground))] bg-[hsl(var(--card))]">OR</span>
    </div>
  </div>

  <p class="text-center text-[13px]">
    <a href="#" id="dz-use-recovery" class="text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] hover:underline">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 %}