<div class="auth-content" style="max-width:480px">
    <div class="auth-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="40" height="40">
            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
        </svg>
    </div>
    <h1 class="auth-title"><?= t('mfa_setup_title') ?></h1>
    <p class="auth-subtitle"><?= t('mfa_setup_desc') ?></p>

    <?php if (!empty($error)): ?>
    <div class="alert alert-error"><?= Helper::e($error) ?></div>
    <?php endif; ?>

<?php if ($method !== 'totp'): ?>
    <!-- Choice -->
    <div style="display:flex;flex-direction:column;gap:12px;margin-top:1.5rem">

        <!-- Email option -->
        <form method="POST" action="/mfa-setup">
            <?= Helper::csrf() ?>
            <input type="hidden" name="action" value="choose_email">
            <button type="submit" class="btn btn-primary btn-block" style="justify-content:flex-start;gap:12px;padding:14px 18px;height:auto">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20">
                    <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
                    <polyline points="22,6 12,13 2,6"/>
                </svg>
                <div style="text-align:left;white-space:normal">
                    <div style="font-weight:700;font-size:.95rem"><?= t('mfa_setup_email_title') ?></div>
                    <div style="font-size:.8rem;opacity:.8;font-weight:400"><?= t('mfa_setup_email_desc') ?></div>
                </div>
            </button>
        </form>

        <!-- TOTP option -->
        <form method="POST" action="/mfa-setup">
            <?= Helper::csrf() ?>
            <input type="hidden" name="action" value="choose_totp">
            <button type="submit" class="btn btn-secondary btn-block" style="justify-content:flex-start;gap:12px;padding:14px 18px;height:auto">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20">
                    <rect x="5" y="11" width="14" height="10" rx="2"/>
                    <path d="M8 11V7a4 4 0 018 0v4"/>
                </svg>
                <div style="text-align:left;white-space:normal">
                    <div style="font-weight:700;font-size:.95rem"><?= t('mfa_setup_totp_title') ?></div>
                    <div style="font-size:.8rem;opacity:.8;font-weight:400"><?= t('mfa_setup_totp_desc') ?></div>
                </div>
            </button>
        </form>
    </div>

<?php else: ?>
    <!-- TOTP setup -->
    <p style="margin:1rem 0 .5rem"><?= t('totp_scan_desc') ?></p>

    <div id="qrcode" class="totp-qr"></div>

    <div class="totp-secret-box">
        <span class="form-label"><?= t('totp_manual_key') ?></span>
        <code class="totp-secret-code" id="totpSecret"><?= Helper::e(chunk_split($user['totp_secret'], 4, ' ')) ?></code>
        <button type="button" class="btn btn-ghost btn-xs" data-click="copySecret"><?= t('totp_copy') ?></button>
    </div>

    <form method="POST" action="/mfa-setup" style="margin-top:1.25rem">
        <?= Helper::csrf() ?>
        <input type="hidden" name="action" value="totp_enable_mfa">
        <input type="hidden" name="totp_secret" value="<?= Helper::e($user['totp_secret']) ?>">
        <div class="form-group">
            <label class="form-label"><?= t('totp_confirm_code') ?></label>
            <input type="text" name="totp_code" class="form-input totp-input"
                   maxlength="6" pattern="\d{6}" inputmode="numeric"
                   autocomplete="one-time-code" placeholder="000000" required autofocus>
        </div>
        <button type="submit" class="btn btn-primary btn-block"><?= t('totp_enable') ?></button>
    </form>

    <a href="/mfa-setup" class="totp-back-link" style="margin-top:.75rem;display:block;text-align:center">
        &larr; <?= t('mfa_setup_back_choice') ?>
    </a>
<?php endif; ?>

    <a href="/login" class="totp-back-link"><?= t('back') ?> <?= t('login') ?></a>
</div>

<?php if ($otpUrl): ?>
<script nonce="<?= csp_nonce() ?>" src="/assets/js/qrcode.min.js"></script>
<script nonce="<?= csp_nonce() ?>">
document.addEventListener('DOMContentLoaded', function() {
    const el = document.getElementById('qrcode');
    if (el && typeof QRCode !== 'undefined') {
        new QRCode(el, {
            text: <?= json_encode($otpUrl) ?>,
            width: 200, height: 200,
            colorDark: '#000000', colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.M
        });
    }
});
function copySecret() {
    const s = document.getElementById('totpSecret').textContent.replace(/\s/g,'');
    navigator.clipboard.writeText(s).then(() => {
        const btn = event.target;
        btn.textContent = '✓';
        setTimeout(() => btn.textContent = <?= json_encode(t('totp_copy')) ?>, 1500);
    });
}
</script>
<?php endif; ?>
