{% extends "admin/base_site.html" %}
{% load i18n admin_urls static %}

{% block extrastyle %}
{{ block.super }}
<style nonce="{{ request.csp_nonce }}">
    .form-row { margin-bottom: 15px; margin-top: 15px; }
    .help { font-size: 11px; color: #666; }
    .submit-row { margin-top: 20px; }
    .email-list { margin-top: 20px; }
    .email-list table { width: 100%; border-collapse: collapse; }
    .email-list th, .email-list td { padding: 8px 12px; text-align: left; border-bottom: 1px solid #ddd; }
    .email-list th { background: #f8f8f8; font-weight: bold; }
    .remove-btn { color: #ba2121; cursor: pointer; background: none; border: none; text-decoration: underline; }
    .remove-btn:hover { color: #a41515; }
    .empty-state { color: #666; font-style: italic; padding: 12px 0; }
    .msg-success { background: #dfd; padding: 8px 12px; margin-bottom: 10px; border-radius: 4px; }
    .msg-error { background: #fdd; padding: 8px 12px; margin-bottom: 10px; border-radius: 4px; }
</style>
{% endblock %}

{% block content %}

<div id="messages"></div>

<div id="global-disable" style="margin-bottom: 30px;">
    <fieldset class="module aligned">
        <h2>Global email MFA disable</h2>
        {% if global_disable %}
        <div class="msg-error">
            <strong>Email MFA is currently DISABLED for all users.</strong><br/>
            Reason: {{ global_disable.reason }}<br/>
            Disabled by: {{ global_disable.disabled_by }}<br/>
            Disabled at: {{ global_disable.disabled_at }}<br/>
            {% if global_disable.expires_in_seconds %}Auto re-enables in ~{{ global_disable.expires_in_seconds }} seconds.{% endif %}
        </div>
        <div class="submit-row">
            <button type="button" id="reenable-btn" class="default">Re-enable email MFA now</button>
        </div>
        {% else %}
        <p class="empty-state">Email MFA is currently enabled for all users.</p>

        <form id="disable-form">
            {% csrf_token %}
            <div class="form-row">
                <label for="id_reason">Reason:</label>
                <input type="text" name="reason" id="id_reason" required />
                <p class="help">Why email MFA is being disabled. Required and stored for audit.</p>
            </div>
            <div class="form-row">
                <label for="id_duration">Duration:</label>
                <input type="number" id="id_duration" min="1" value="6" style="width: 80px;" required />
                <select id="id_duration_unit">
                    <option value="60">minutes</option>
                    <option value="3600" selected>hours</option>
                    <option value="86400">days</option>
                </select>
                <p class="help">Auto re-enables after this. Maximum 7 days.</p>
            </div>
            <div class="submit-row">
                <input type="submit" value="Disable email MFA for all users" class="default" />
            </div>
        </form>
        {% endif %}
    </fieldset>
</div>

<div class="email-list">
    <fieldset class="module aligned">
        <h2>Bypassed emails (<span id="email-count">{{ bypass_emails|length }}</span>)</h2>

        <table id="email-table" {% if not bypass_emails %}style="display:none"{% endif %}>
            <thead>
                <tr>
                    <th>Email</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody id="email-list-body">
                {% for email in bypass_emails %}
                <tr data-email="{{ email }}">
                    <td>{{ email }}</td>
                    <td>
                        <button type="button" class="remove-btn">Remove</button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        <p id="empty-state" class="empty-state" {% if bypass_emails %}style="display:none"{% endif %}>No emails are currently bypassed.</p>
    </fieldset>
</div>

<form id="add-form" style="margin-top: 30px;">
    {% csrf_token %}
    <fieldset class="module aligned">
        <h2>Add email</h2>

        <div class="form-row">
            <label for="id_email">Email:</label>
            <input type="email" name="email" id="id_email" required />
            <p class="help">Email address to bypass email MFA verification</p>
        </div>
    </fieldset>

    <div class="submit-row">
        <input type="submit" value="Add to bypass list" class="default" />
    </div>
</form>

<script nonce="{{ request.csp_nonce }}">
const API_BASE = '/admin/api/code-based-verification-bypass/';

function getCSRFToken() {
    return document.querySelector('[name=csrfmiddlewaretoken]').value;
}

function showMessage(text, isError) {
    const el = document.getElementById('messages');
    el.textContent = '';
    const div = document.createElement('div');
    div.className = 'msg-' + (isError ? 'error' : 'success');
    div.textContent = text;
    el.appendChild(div);
    setTimeout(() => { el.textContent = ''; }, 4000);
}

function updateCount() {
    const rows = document.querySelectorAll('#email-list-body tr');
    document.getElementById('email-count').textContent = rows.length;
    document.getElementById('email-table').style.display = rows.length ? '' : 'none';
    document.getElementById('empty-state').style.display = rows.length ? 'none' : '';
}

function removeEmail(email) {
    if (!confirm('Remove ' + email + ' from bypass list?')) return;

    fetch(API_BASE + encodeURIComponent(email) + '/', {
        method: 'DELETE',
        headers: {'X-CSRFToken': getCSRFToken()},
    }).then(r => {
        if (r.ok || r.status === 204) {
            const row = document.querySelector('[data-email="' + CSS.escape(email) + '"]');
            if (row) row.remove();
            updateCount();
            showMessage('Removed ' + email + ' from bypass list.', false);
        } else {
            showMessage('Failed to remove email.', true);
        }
    });
}

function addEmail(e) {
    e.preventDefault();
    const input = document.getElementById('id_email');
    const email = input.value.trim().toLowerCase();
    if (!email) return;

    const existingRow = document.querySelector('[data-email="' + CSS.escape(email) + '"]');
    if (existingRow) {
        showMessage('Email is already in the bypass list.', true);
        return;
    }

    fetch(API_BASE, {
        method: 'POST',
        headers: {'Content-Type': 'application/json', 'X-CSRFToken': getCSRFToken()},
        body: JSON.stringify({email: email})
    }).then(r => {
        if (r.ok) {
            const tbody = document.getElementById('email-list-body');
            const tr = document.createElement('tr');
            tr.dataset.email = email;
            const td1 = document.createElement('td');
            td1.textContent = email;
            const td2 = document.createElement('td');
            const btn = document.createElement('button');
            btn.type = 'button';
            btn.className = 'remove-btn';
            btn.textContent = 'Remove';
            td2.appendChild(btn);
            tr.appendChild(td1);
            tr.appendChild(td2);
            tbody.appendChild(tr);
            input.value = '';
            updateCount();
            showMessage('Added ' + email + ' to bypass list.', false);
        } else {
            r.json().then(d => showMessage(d.email ? d.email[0] : 'Failed to add email.', true));
        }
    });
}

document.getElementById('add-form').addEventListener('submit', addEmail);

document.getElementById('email-list-body').addEventListener('click', function(e) {
    const btn = e.target.closest('.remove-btn');
    if (!btn) return;
    const row = btn.closest('tr');
    if (row) removeEmail(row.dataset.email);
});

// --- Global email MFA disable ---
const GLOBAL_API = '/admin/api/code-based-verification-global-disable/';
const MAX_TTL_SECONDS = 7 * 24 * 60 * 60;

const disableForm = document.getElementById('disable-form');
if (disableForm) {
    disableForm.addEventListener('submit', function(e) {
        e.preventDefault();
        const reason = document.getElementById('id_reason').value.trim();
        const amount = parseInt(document.getElementById('id_duration').value, 10);
        const unit = parseInt(document.getElementById('id_duration_unit').value, 10);
        if (!reason) { showMessage('A reason is required.', true); return; }
        if (!amount || amount < 1) { showMessage('Enter a valid duration.', true); return; }
        const ttlSeconds = amount * unit;
        if (ttlSeconds > MAX_TTL_SECONDS) { showMessage('Duration cannot exceed 7 days.', true); return; }

        const submitBtn = disableForm.querySelector('input[type="submit"]');
        submitBtn.disabled = true;
        submitBtn.value = 'Disabling…';
        fetch(GLOBAL_API, {
            method: 'POST',
            headers: {'Content-Type': 'application/json', 'X-CSRFToken': getCSRFToken()},
            body: JSON.stringify({reason: reason, ttl_seconds: ttlSeconds})
        }).then(r => {
            if (r.ok) {
                window.location.reload();
            } else {
                r.json().then(d => showMessage(d.reason ? d.reason[0] : (d.ttl_seconds ? d.ttl_seconds[0] : 'Failed to disable email MFA.'), true));
                submitBtn.disabled = false;
                submitBtn.value = 'Disable email MFA for all users';
            }
        }).catch(() => {
            showMessage('Failed to disable email MFA.', true);
            submitBtn.disabled = false;
            submitBtn.value = 'Disable email MFA for all users';
        });
    });
}

const reenableBtn = document.getElementById('reenable-btn');
if (reenableBtn) {
    reenableBtn.addEventListener('click', function() {
        if (!confirm('Re-enable email MFA for all users now?')) return;
        reenableBtn.disabled = true;
        reenableBtn.textContent = 'Re-enabling…';
        fetch(GLOBAL_API, {
            method: 'DELETE',
            headers: {'X-CSRFToken': getCSRFToken()},
        }).then(r => {
            if (r.ok || r.status === 204) {
                window.location.reload();
            } else {
                showMessage('Failed to re-enable email MFA.', true);
                reenableBtn.disabled = false;
                reenableBtn.textContent = 'Re-enable email MFA now';
            }
        }).catch(() => {
            showMessage('Failed to re-enable email MFA.', true);
            reenableBtn.disabled = false;
            reenableBtn.textContent = 'Re-enable email MFA now';
        });
    });
}
</script>
{% endblock %}