{% extends "settings/layout.html.twig" %}
{% trans_default_domain "Settings" %}

{% block settings_content %}
    {# Email #}
    <div class="settings-card">
        <h3 class="settings-card-title">{{ 'account.email_title'|trans }}</h3>
        <div class="form-group">
            <label>{{ 'account.current_email'|trans }}</label>
            <input type="email" class="form-input" value="{{ user.email }}" disabled style="background: var(--bg-light); cursor: not-allowed;">
            <p class="form-hint">{{ 'account.email_hint'|trans }}</p>
        </div>
    </div>

    {# Change Password #}
    <div class="settings-card">
        <h3 class="settings-card-title">{{ 'account.password_title'|trans }}</h3>
        <form id="passwordForm" onsubmit="return false;">
            <div class="form-group">
                <label>{{ 'account.current_password'|trans }}</label>
                <input type="password" class="form-input" id="currentPassword" autocomplete="current-password">
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label>{{ 'account.new_password'|trans }}</label>
                    <input type="password" class="form-input" id="newPassword" autocomplete="new-password">
                    <p class="form-hint">{{ 'account.password_hint'|trans }}</p>
                </div>
                <div class="form-group">
                    <label>{{ 'account.confirm_password'|trans }}</label>
                    <input type="password" class="form-input" id="confirmPassword" autocomplete="new-password">
                </div>
            </div>
            <button type="button" class="btn-settings btn-settings-primary" onclick="changePassword()">
                <i class="fa fa-lock"></i> {{ 'account.change_password'|trans }}
            </button>
        </form>
    </div>

    {# Two-Factor Authentication #}
    <div class="settings-card">
        <h3 class="settings-card-title">{{ '2fa.title'|trans }}</h3>

        {% if user.totpEnabled %}
            {# 2FA is ON — show status and disable option #}
            <div class="twofa-status twofa-status-on">
                <div style="display:flex;align-items:center;gap:10px;margin-bottom:12px;">
                    <span class="twofa-badge twofa-badge-on"><i class="fa fa-check-circle"></i> {{ '2fa.status_enabled'|trans }}</span>
                </div>
                <p class="toggle-desc">{{ '2fa.enabled_desc'|trans }}</p>
            </div>

            <div style="display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;">
                <button type="button" class="btn-settings btn-settings-outline" onclick="showBackupCodesModal()">
                    <i class="fa fa-key"></i> {{ '2fa.view_backup_codes'|trans }}
                </button>
                <button type="button" class="btn-settings btn-settings-danger" onclick="showDisable2faModal()">
                    <i class="fa fa-times"></i> {{ '2fa.disable_btn'|trans }}
                </button>
            </div>
        {% else %}
            {# 2FA is OFF — show enable option #}
            <div class="twofa-status twofa-status-off">
                <div style="display:flex;align-items:center;gap:10px;margin-bottom:12px;">
                    <span class="twofa-badge twofa-badge-off"><i class="fa fa-exclamation-circle"></i> {{ '2fa.status_disabled'|trans }}</span>
                </div>
                <p class="toggle-desc">{{ '2fa.disabled_desc'|trans }}</p>
            </div>
            <button type="button" class="btn-settings btn-settings-primary" onclick="start2faSetup()" style="margin-top:16px;">
                <i class="fa fa-shield"></i> {{ '2fa.enable_btn'|trans }}
            </button>
        {% endif %}
    </div>

    {# 2FA Setup Modal #}
    <div id="twofaSetupModal" class="twofa-modal-overlay" style="display:none;">
        <div class="twofa-modal">
            <div class="twofa-modal-header">
                <h3>{{ '2fa.setup_title'|trans }}</h3>
                <button class="twofa-modal-close" onclick="close2faModal()">&times;</button>
            </div>
            <div id="twofaStep1" class="twofa-step">
                <p>{{ '2fa.setup_step1'|trans }}</p>
                <div id="twofaQrContainer" style="display:flex;justify-content:center;margin:20px 0;">
                </div>
                <div class="form-group">
                    <label>{{ '2fa.manual_key'|trans }}</label>
                    <div class="twofa-secret-display">
                        <code id="twofaSecretText"></code>
                        <button type="button" class="twofa-copy-btn" onclick="copySecret()"><i class="fa fa-copy"></i></button>
                    </div>
                </div>
                <div class="form-group">
                    <label>{{ '2fa.verify_code_label'|trans }}</label>
                    <input type="text" class="form-input twofa-code-input" id="twofaVerifyCode"
                           inputmode="numeric" maxlength="6" pattern="\d{6}" placeholder="000000" autocomplete="off">
                    <p class="form-hint">{{ '2fa.verify_code_hint'|trans }}</p>
                </div>
                <div id="twofaSetupError" class="twofa-inline-error" style="display:none;"></div>
                <button type="button" class="btn-settings btn-settings-primary" onclick="verify2faCode()" style="width:100%;">
                    <i class="fa fa-check"></i> {{ '2fa.verify_and_enable'|trans }}
                </button>
            </div>
            <div id="twofaStep2" class="twofa-step" style="display:none;">
                <div style="text-align:center;margin-bottom:16px;">
                    <div class="twofa-success-icon"><i class="fa fa-check-circle"></i></div>
                    <p style="font-weight:600;font-size:16px;">{{ '2fa.enabled_success'|trans }}</p>
                </div>
                <div class="twofa-backup-warning">
                    <i class="fa fa-exclamation-triangle"></i>
                    {{ '2fa.backup_warning'|trans }}
                </div>
                <div id="twofaBackupCodesList" class="twofa-backup-grid"></div>
                <button type="button" class="btn-settings btn-settings-outline" onclick="copyBackupCodes()" style="width:100%;margin-top:12px;">
                    <i class="fa fa-copy"></i> {{ '2fa.copy_backup_codes'|trans }}
                </button>
                <button type="button" class="btn-settings btn-settings-primary" onclick="close2faModal();location.reload();" style="width:100%;margin-top:8px;">
                    {{ '2fa.done_btn'|trans }}
                </button>
            </div>
        </div>
    </div>

    {# Disable 2FA Modal #}
    <div id="twofaDisableModal" class="twofa-modal-overlay" style="display:none;">
        <div class="twofa-modal">
            <div class="twofa-modal-header">
                <h3>{{ '2fa.disable_title'|trans }}</h3>
                <button class="twofa-modal-close" onclick="closeDisable2faModal()">&times;</button>
            </div>
            <p>{{ '2fa.disable_desc'|trans }}</p>
            <div class="form-group">
                <label>{{ 'account.current_password'|trans }}</label>
                <input type="password" class="form-input" id="twofaDisablePassword" autocomplete="current-password">
            </div>
            <div id="twofaDisableError" class="twofa-inline-error" style="display:none;"></div>
            <button type="button" class="btn-settings btn-settings-danger" onclick="disable2fa()" style="width:100%;">
                <i class="fa fa-times"></i> {{ '2fa.disable_confirm_btn'|trans }}
            </button>
        </div>
    </div>

    {# View/Regenerate Backup Codes Modal #}
    <div id="twofaBackupModal" class="twofa-modal-overlay" style="display:none;">
        <div class="twofa-modal">
            <div class="twofa-modal-header">
                <h3>{{ '2fa.backup_codes_title'|trans }}</h3>
                <button class="twofa-modal-close" onclick="closeBackupModal()">&times;</button>
            </div>
            <p>{{ '2fa.backup_codes_desc'|trans }}</p>
            <div class="form-group">
                <label>{{ 'account.current_password'|trans }}</label>
                <input type="password" class="form-input" id="twofaBackupPassword" autocomplete="current-password">
            </div>
            <div id="twofaBackupError" class="twofa-inline-error" style="display:none;"></div>
            <div id="twofaBackupResult" style="display:none;">
                <div class="twofa-backup-warning">
                    <i class="fa fa-exclamation-triangle"></i>
                    {{ '2fa.backup_regenerated_warning'|trans }}
                </div>
                <div id="twofaBackupResultCodes" class="twofa-backup-grid"></div>
                <button type="button" class="btn-settings btn-settings-outline" onclick="copyRegeneratedBackupCodes()" style="width:100%;margin-top:12px;">
                    <i class="fa fa-copy"></i> {{ '2fa.copy_backup_codes'|trans }}
                </button>
            </div>
            <button type="button" id="twofaRegenerateBtn" class="btn-settings btn-settings-primary" onclick="regenerateBackupCodes()" style="width:100%;margin-top:8px;">
                <i class="fa fa-refresh"></i> {{ '2fa.regenerate_btn'|trans }}
            </button>
        </div>
    </div>

    {# Language #}
    <div class="settings-card">
        <h3 class="settings-card-title">{{ 'account.language_title'|trans }}</h3>
        <div class="toggle-row">
            <div>
                <div class="toggle-label">{{ 'account.language_label'|trans }}</div>
                <div class="toggle-desc">{{ 'account.language_desc'|trans }}</div>
            </div>
            <div style="display: flex; gap: 8px;">
                <button class="btn-settings btn-settings-sm {{ app.request.locale == 'ar' ? 'btn-settings-primary' : 'btn-settings-outline' }}" onclick="setLocale('ar')">العربية</button>
                <button class="btn-settings btn-settings-sm {{ app.request.locale == 'en' ? 'btn-settings-primary' : 'btn-settings-outline' }}" onclick="setLocale('en')">English</button>
            </div>
        </div>
    </div>


    {# Notifications #}
    <div class="settings-card">
        <h3 class="settings-card-title">{{ 'account.notifications_title'|trans }}</h3>
        <div class="toggle-row">
            <div>
                <div class="toggle-label">{{ 'account.recommendation_newsletter'|trans }}</div>
                <div class="toggle-desc">{{ 'account.recommendation_newsletter_desc'|trans }}</div>
            </div>
            <label class="toggle-switch">
                <input type="checkbox" id="recommendationToggle" {{ user.recommendationNewsletterEnabled ? 'checked' : '' }} onchange="toggleNewsletter(this, 'recommendation')">
                <span class="toggle-slider"></span>
            </label>
        </div>
        <div class="toggle-row">
            <div>
                <div class="toggle-label">{{ 'account.digest_newsletter'|trans }}</div>
                <div class="toggle-desc">{{ 'account.digest_newsletter_desc'|trans }}</div>
            </div>
            <label class="toggle-switch">
                <input type="checkbox" id="digestToggle" {{ user.digestNewsletterEnabled ? 'checked' : '' }} onchange="toggleNewsletter(this, 'digest')">
                <span class="toggle-slider"></span>
            </label>
        </div>
        <div class="toggle-row">
            <div>
                <div class="toggle-label">{{ 'account.follow_notification'|trans }}</div>
                <div class="toggle-desc">{{ 'account.follow_notification_desc'|trans }}</div>
            </div>
            <label class="toggle-switch">
                <input type="checkbox" id="followToggle" {{ user.followNotificationEnabled ? 'checked' : '' }} onchange="toggleNewsletter(this, 'follow')">
                <span class="toggle-slider"></span>
            </label>
        </div>
    </div>

    {# Danger Zone #}
    <div class="settings-card">
        <h3 class="settings-card-title" style="border-color: #dc2626; color: #dc2626;">{{ 'account.danger_zone'|trans }}</h3>
        <div class="danger-zone">
            <h4>{{ 'account.delete_account'|trans }}</h4>
            <p>{{ 'account.delete_account_desc'|trans }}</p>
            <a href="{{ path('delete_user') }}" class="btn-settings btn-settings-danger" onclick="return confirm('{{ 'account.delete_confirm'|trans|e('js') }}')">
                <i class="fa fa-trash"></i> {{ 'account.delete_account_btn'|trans }}
            </a>
        </div>
    </div>

<script src="https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.js"></script>
<style>
/* 2FA styles */
.twofa-status { padding: 12px 16px; border-radius: 8px; }
.twofa-status-on { background: #f0faf4; border: 1px solid #bbf7d0; }
.twofa-status-off { background: #fffbeb; border: 1px solid #fde68a; }
.twofa-badge { font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 16px; display: inline-flex; align-items: center; gap: 4px; }
.twofa-badge-on { background: #dcfce7; color: #166534; }
.twofa-badge-off { background: #fef3c7; color: #92400e; }
.twofa-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.twofa-modal { background: #fff; border-radius: 16px; padding: 28px; max-width: 460px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; }
.twofa-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.twofa-modal-header h3 { margin: 0; font-size: 18px; font-weight: 700; }
.twofa-modal-close { background: none; border: none; font-size: 24px; cursor: pointer; color: #6b7280; padding: 0; line-height: 1; }
.twofa-secret-display { display: flex; align-items: center; gap: 8px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px 14px; font-family: monospace; font-size: 14px; letter-spacing: 2px; word-break: break-all; }
.twofa-secret-display code { flex: 1; }
.twofa-copy-btn { background: none; border: none; cursor: pointer; color: #6b7280; font-size: 16px; padding: 4px; }
.twofa-copy-btn:hover { color: #00A550; }
.twofa-code-input { font-family: monospace; font-size: 20px; text-align: center; letter-spacing: 6px; }
.twofa-inline-error { background: #fef2f2; color: #dc2626; padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 12px; border: 1px solid #fecaca; }
.twofa-success-icon { font-size: 48px; color: #00A550; margin-bottom: 8px; }
.twofa-backup-warning { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; padding: 12px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; }
.twofa-backup-warning i { margin-inline-end: 6px; }
.twofa-backup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.twofa-backup-grid code { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px; padding: 8px 12px; text-align: center; font-family: monospace; font-size: 14px; font-weight: 600; letter-spacing: 1px; }
</style>

<script>
var T = {
    saved: '{{ 'toast.saved'|trans|e('js') }}',
    error: '{{ 'toast.error'|trans|e('js') }}',
    password_changed: '{{ 'account.password_changed'|trans|e('js') }}',
    current_password_invalid: '{{ 'account.current_password_invalid'|trans|e('js') }}',
    passwords_dont_match: '{{ 'account.passwords_dont_match'|trans|e('js') }}',
    password_too_short: '{{ 'account.password_too_short'|trans|e('js') }}',
    password_weak: '{{ 'account.password_weak'|trans|e('js') }}',
    twofa_invalid_code: '{{ '2fa.invalid_code'|trans|e('js') }}',
    twofa_invalid_password: '{{ '2fa.invalid_password'|trans|e('js') }}',
    twofa_enabled: '{{ '2fa.enabled_success'|trans|e('js') }}',
    twofa_disabled: '{{ '2fa.disabled_success'|trans|e('js') }}',
    twofa_copied: '{{ '2fa.copied'|trans|e('js') }}'
};

function changePassword() {
    var current = document.getElementById('currentPassword').value;
    var newPwd = document.getElementById('newPassword').value;
    var confirm = document.getElementById('confirmPassword').value;

    if (!current || !newPwd || !confirm) {
        showToast(T.error, 'error');
        return;
    }

    var fd = new FormData();
    fd.append('currentPassword', current);
    fd.append('newPassword', newPwd);
    fd.append('confirmPassword', confirm);

    fetch('{{ path('app_settings_change_password') }}', { method: 'POST', body: fd })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.success) {
            showToast(T.password_changed, 'success');
            document.getElementById('currentPassword').value = '';
            document.getElementById('newPassword').value = '';
            document.getElementById('confirmPassword').value = '';
        } else {
            var msg = T[data.message] || T.error;
            showToast(msg, 'error');
        }
    })
    .catch(function() { showToast(T.error, 'error'); });
}

function setLocale(locale) {
    var fd = new FormData();
    fd.append('locale', locale);
    fetch('/api/user/profile/update-locale', { method: 'POST', body: fd })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.success) {
            // Redirect to correct locale version
            window.location.href = locale === 'en' ? '/en/settings/account' : '/settings/account';
        } else {
            showToast(T.error, 'error');
        }
    })
    .catch(function() { showToast(T.error, 'error'); });
}

function toggleNewsletter(cb, type) {
    var fd = new FormData();
    fd.append('enabled', cb.checked ? 'true' : 'false');

    var url = '/api/user/profile/update-newsletter';
    if (type === 'digest') {
        // Use generic field update for digest
        fd = new FormData();
        fd.append('field', 'digestNewsletterEnabled');
        fd.append('value', cb.checked ? '1' : '0');
        url = '/api/user/profile/update';
    } else if (type === 'follow') {
        fd = new FormData();
        fd.append('field', 'followNotificationEnabled');
        fd.append('value', cb.checked ? '1' : '0');
        url = '/api/user/profile/update';
    }

    fetch(url, { method: 'POST', body: fd })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.success) showToast(T.saved, 'success');
        else { showToast(T.error, 'error'); cb.checked = !cb.checked; }
    })
    .catch(function() { showToast(T.error, 'error'); cb.checked = !cb.checked; });
}

// ── Two-Factor Authentication ──

var twofaBackupCodes = [];

function start2faSetup() {
    document.getElementById('twofaSetupModal').style.display = 'flex';
    document.getElementById('twofaStep1').style.display = 'block';
    document.getElementById('twofaStep2').style.display = 'none';
    document.getElementById('twofaSetupError').style.display = 'none';
    document.getElementById('twofaVerifyCode').value = '';

    fetch('{{ path('app_2fa_setup') }}', { method: 'POST' })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.success) {
            document.getElementById('twofaSecretText').textContent = data.secret;

            // Generate QR code
            var qr = qrcode(0, 'M');
            qr.addData(data.qrUri);
            qr.make();
            document.getElementById('twofaQrContainer').innerHTML = qr.createImgTag(5, 10);
        } else {
            showToast(T.error, 'error');
            close2faModal();
        }
    })
    .catch(function() { showToast(T.error, 'error'); close2faModal(); });
}

function verify2faCode() {
    var code = document.getElementById('twofaVerifyCode').value.trim();
    if (!code || !/^\d{6}$/.test(code)) {
        document.getElementById('twofaSetupError').textContent = T.twofa_invalid_code;
        document.getElementById('twofaSetupError').style.display = 'block';
        return;
    }

    var fd = new FormData();
    fd.append('code', code);

    fetch('{{ path('app_2fa_enable') }}', { method: 'POST', body: fd })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.success) {
            twofaBackupCodes = data.backupCodes;
            renderBackupCodes('twofaBackupCodesList', data.backupCodes);
            document.getElementById('twofaStep1').style.display = 'none';
            document.getElementById('twofaStep2').style.display = 'block';
        } else {
            document.getElementById('twofaSetupError').textContent = T.twofa_invalid_code;
            document.getElementById('twofaSetupError').style.display = 'block';
        }
    })
    .catch(function() { showToast(T.error, 'error'); });
}

function close2faModal() {
    document.getElementById('twofaSetupModal').style.display = 'none';
}

function showDisable2faModal() {
    document.getElementById('twofaDisableModal').style.display = 'flex';
    document.getElementById('twofaDisablePassword').value = '';
    document.getElementById('twofaDisableError').style.display = 'none';
}

function closeDisable2faModal() {
    document.getElementById('twofaDisableModal').style.display = 'none';
}

function disable2fa() {
    var password = document.getElementById('twofaDisablePassword').value;
    if (!password) {
        document.getElementById('twofaDisableError').textContent = T.twofa_invalid_password;
        document.getElementById('twofaDisableError').style.display = 'block';
        return;
    }

    var fd = new FormData();
    fd.append('password', password);

    fetch('{{ path('app_2fa_disable') }}', { method: 'POST', body: fd })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.success) {
            showToast(T.twofa_disabled, 'success');
            closeDisable2faModal();
            location.reload();
        } else {
            document.getElementById('twofaDisableError').textContent = T.twofa_invalid_password;
            document.getElementById('twofaDisableError').style.display = 'block';
        }
    })
    .catch(function() { showToast(T.error, 'error'); });
}

function showBackupCodesModal() {
    document.getElementById('twofaBackupModal').style.display = 'flex';
    document.getElementById('twofaBackupPassword').value = '';
    document.getElementById('twofaBackupError').style.display = 'none';
    document.getElementById('twofaBackupResult').style.display = 'none';
    document.getElementById('twofaRegenerateBtn').style.display = 'block';
}

function closeBackupModal() {
    document.getElementById('twofaBackupModal').style.display = 'none';
}

function regenerateBackupCodes() {
    var password = document.getElementById('twofaBackupPassword').value;
    if (!password) {
        document.getElementById('twofaBackupError').textContent = T.twofa_invalid_password;
        document.getElementById('twofaBackupError').style.display = 'block';
        return;
    }

    var fd = new FormData();
    fd.append('password', password);

    fetch('{{ path('app_2fa_regenerate_backup') }}', { method: 'POST', body: fd })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.success) {
            twofaBackupCodes = data.backupCodes;
            renderBackupCodes('twofaBackupResultCodes', data.backupCodes);
            document.getElementById('twofaBackupResult').style.display = 'block';
            document.getElementById('twofaBackupError').style.display = 'none';
            document.getElementById('twofaRegenerateBtn').style.display = 'none';
        } else {
            document.getElementById('twofaBackupError').textContent = T.twofa_invalid_password;
            document.getElementById('twofaBackupError').style.display = 'block';
        }
    })
    .catch(function() { showToast(T.error, 'error'); });
}

function renderBackupCodes(containerId, codes) {
    var container = document.getElementById(containerId);
    container.innerHTML = '';
    codes.forEach(function(code) {
        var el = document.createElement('code');
        el.textContent = code;
        container.appendChild(el);
    });
}

function copySecret() {
    var secret = document.getElementById('twofaSecretText').textContent;
    navigator.clipboard.writeText(secret).then(function() {
        showToast(T.twofa_copied, 'success');
    });
}

function copyBackupCodes() {
    navigator.clipboard.writeText(twofaBackupCodes.join('\n')).then(function() {
        showToast(T.twofa_copied, 'success');
    });
}

function copyRegeneratedBackupCodes() {
    copyBackupCodes();
}
</script>
{% endblock %}