{% extends "site/site_base.html" %}
{% from 'macros/auth_page_wrapper.html' import auth_page_card %}

{% block title %}2FA Settings - {{ product_name }}{% endblock %}

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

{% block body %}
{% call auth_page_card("2FA Settings", 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>

  <div id="dz-status" class="mt-2">
    <p class="text-center text-[13px] text-[hsl(var(--muted-foreground))]">Loading status...</p>
  </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');
  const statusDiv = document.getElementById('dz-status');

  // Class strings for the dynamically-generated status rows. Centralised so
  // any future tweak to the row/button grammar touches a single location.
  // Matches the UX-036 button vocabulary established in cycles 33–41.
  const ROW_CLASSES =
    'flex justify-between items-center py-3 border-b border-[hsl(var(--border))]';
  const ROW_CLASSES_LAST =
    'flex justify-between items-center py-3';
  const LABEL_CLASSES =
    'text-[13px] text-[hsl(var(--foreground))]';
  const BTN_BASE =
    'h-7 px-3 rounded-[4px] text-[12px] font-medium transition-colors duration-[120ms]';
  const BTN_PRIMARY =
    BTN_BASE + ' bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] hover:brightness-110';
  const BTN_DESTRUCTIVE =
    BTN_BASE + ' bg-[hsl(var(--destructive))] text-[hsl(var(--primary-foreground))] hover:brightness-110';
  const BTN_OUTLINE =
    BTN_BASE + ' border border-[hsl(var(--border))] bg-transparent text-[hsl(var(--foreground))] hover:bg-[hsl(var(--muted)/0.5)]';

  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');
  }

  async function loadStatus() {
    try {
      const resp = await fetch('/auth/2fa/status');
      const data = await resp.json();
      if (!resp.ok) { showError('Failed to load status'); return; }
      renderStatus(data);
    } catch (err) { showError('Network error'); }
  }

  function makeRow(rowClasses, labelText, button) {
    const row = document.createElement('div');
    row.className = rowClasses;
    const label = document.createElement('div');
    label.className = LABEL_CLASSES;
    label.textContent = labelText;
    row.appendChild(label);
    row.appendChild(button);
    return row;
  }

  function renderStatus(data) {
    statusDiv.replaceChildren();

    // TOTP status
    const totpBtn = document.createElement('button');
    if (data.totp_enabled) {
      totpBtn.textContent = 'Disable';
      totpBtn.className = BTN_DESTRUCTIVE;
      totpBtn.addEventListener('click', async function() {
        const resp = await fetch('/auth/2fa/totp', {method: 'DELETE'});
        if (resp.ok) { showSuccess('TOTP disabled'); loadStatus(); }
        else { showError('Failed to disable TOTP'); }
      });
    } else {
      totpBtn.textContent = 'Set Up';
      totpBtn.className = BTN_PRIMARY;
      totpBtn.addEventListener('click', function() { window.location.href = '/2fa/setup'; });
    }
    statusDiv.appendChild(makeRow(ROW_CLASSES, 'Authenticator App (TOTP)', totpBtn));

    // Email OTP status
    const emailBtn = document.createElement('button');
    if (data.email_otp_enabled) {
      emailBtn.textContent = 'Disable';
      emailBtn.className = BTN_DESTRUCTIVE;
      emailBtn.addEventListener('click', async function() {
        const resp = await fetch('/auth/2fa/email-otp', {method: 'DELETE'});
        if (resp.ok) { showSuccess('Email OTP disabled'); loadStatus(); }
        else { showError('Failed to disable email OTP'); }
      });
    } else {
      emailBtn.textContent = 'Enable';
      emailBtn.className = BTN_PRIMARY;
      emailBtn.addEventListener('click', async function() {
        const resp = await fetch('/auth/2fa/setup/email-otp', {method: 'POST'});
        if (resp.ok) { showSuccess('Email OTP enabled'); loadStatus(); }
        else { showError('Failed to enable email OTP'); }
      });
    }
    statusDiv.appendChild(makeRow(ROW_CLASSES, 'Email OTP', emailBtn));

    // Recovery codes
    const recoveryBtn = document.createElement('button');
    recoveryBtn.textContent = 'Regenerate';
    recoveryBtn.className = BTN_OUTLINE;
    recoveryBtn.addEventListener('click', async function() {
      const resp = await fetch('/auth/2fa/recovery/regenerate', {method: 'POST'});
      const rdata = await resp.json();
      if (resp.ok) {
        showSuccess('New recovery codes generated');
        alert('Save these codes:\n\n' + rdata.recovery_codes.join('\n'));
        loadStatus();
      } else { showError('Failed to regenerate'); }
    });
    const remaining = data.recovery_codes_remaining || 0;
    statusDiv.appendChild(makeRow(ROW_CLASSES_LAST, 'Recovery Codes (' + remaining + ' remaining)', recoveryBtn));
  }

  loadStatus();
})();
</script>
{% endblock %}