{# 2FA management — view enabled factors, enable/disable/regenerate recovery codes.
   Contract: ~/.claude/skills/ux-architect/components/auth-2fa.md (UX-077, 3/3) #}
{% 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 %}
{# v0.62 CSS refactor: inline Tailwind → semantic .dz-auth-* family.
   The dynamic JS row/button class strings are now thin wrappers over
   the .dz-auth-status-row / .dz-button + .dz-button-sm composition. #}
{% 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="dz-auth-success hidden" role="status"></div>

  <div id="dz-status">
    <p class="dz-auth-status-loading">Loading status...</p>
  </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');
  const statusDiv = document.getElementById('dz-status');

  // v0.62 CSS refactor: row/button class strings are now thin wrappers
  // over .dz-auth-status-row + .dz-button + .dz-button-sm semantic
  // composition (components/fragments.css, components/button.css).
  const ROW_CLASSES = 'dz-auth-status-row';
  const ROW_CLASSES_LAST = 'dz-auth-status-row is-last';
  const LABEL_CLASSES = 'dz-auth-status-label';
  const BTN_PRIMARY = 'dz-button dz-button-primary dz-button-sm';
  const BTN_DESTRUCTIVE = 'dz-button dz-button-destructive dz-button-sm';
  const BTN_OUTLINE = 'dz-button dz-button-outline dz-button-sm';

  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 %}