{% extends "admin/layout.html" %}
{% block title %}Profile - Admin{% endblock %}

{% block body %}
<div class="space-y-6">
    <div>
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white" data-testid="text-profile-title">{% trans %}Profile{% endtrans %}</h1>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{% trans %}Manage your account settings and security{% endtrans %}</p>
    </div>

    {% set _pic = (sub_admin_profile.profile_picture if sub_admin_profile else (admin_profile.profile_picture if admin_profile)) or '' %}
    <form id="profile-form" class="space-y-6">
        <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-theme">
            <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800 bg-gradient-to-r from-primary/5 to-secondary/5 dark:from-primary-light/5 dark:to-secondary-light/5">
                <h3 class="font-semibold text-gray-900 dark:text-white"><i class="fa fa-camera mr-2 text-primary"></i>{% trans %}Profile Picture{% endtrans %}</h3>
            </div>
            <div class="p-6">
                <div class="flex items-center gap-6">
                    <div id="avatar-container" class="w-32 h-32 rounded-full border-2 border-dashed border-gray-300 dark:border-gray-600 flex items-center justify-center overflow-hidden bg-gray-50 dark:bg-gray-800 flex-shrink-0">
                        {% if _pic %}
                        <img src="{{ _pic }}" alt="Profile Picture" id="avatar-preview" class="w-full h-full object-cover" style="display:block" data-testid="img-avatar-preview">
                        <i class="fa fa-user text-4xl text-gray-400 dark:text-gray-500" id="avatar-placeholder" style="display:none" data-testid="icon-avatar-placeholder"></i>
                        {% else %}
                        <i class="fa fa-user text-4xl text-gray-400 dark:text-gray-500" id="avatar-placeholder" style="display:block" data-testid="icon-avatar-placeholder"></i>
                        <img src="" alt="Profile Picture" id="avatar-preview" class="w-full h-full object-cover" style="display:none" data-testid="img-avatar-preview">
                        {% endif %}
                    </div>
                    <div class="space-y-3">
                        <input type="file" id="avatar-file-input" accept="image/*" class="block w-full text-sm text-gray-500 dark:text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-primary/10 file:text-primary hover:file:bg-primary/20 dark:file:bg-primary-light/10 dark:file:text-primary-light cursor-pointer" data-testid="input-avatar-file">
                        <input type="hidden" name="profile_picture" id="profile_picture_value" value="{{ _pic }}">
                        <div class="flex items-center gap-2">
                            <button type="button" id="remove-avatar-btn" class="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg text-xs font-medium text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800/50 hover:bg-red-100 dark:hover:bg-red-900/30 transition-all" data-testid="button-remove-avatar">
                                <i class="fa fa-trash-alt"></i> {% trans %}Remove{% endtrans %}
                            </button>
                        </div>
                        <p class="text-xs text-gray-400 dark:text-gray-500">{% trans %}Recommended: Square image, max 2MB{% endtrans %}</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-theme">
            <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800 bg-gradient-to-r from-secondary/5 to-accent/5 dark:from-secondary-light/5 dark:to-accent-light/5">
                <h3 class="font-semibold text-gray-900 dark:text-white"><i class="fa fa-user-edit mr-2 text-secondary"></i>{% trans %}Profile Information{% endtrans %}</h3>
            </div>
            <div class="p-6 space-y-4 max-w-lg">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5" for="first_name">{% trans %}First Name{% endtrans %}</label>
                        <input type="text" id="first_name" name="first_name"
                            value="{{ (sub_admin_profile.first_name if sub_admin_profile else (admin_profile.first_name if admin_profile)) or '' }}"
                            class="w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all text-sm"
                            placeholder="{% trans %}Enter first name{% endtrans %}"
                            data-testid="input-first-name">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5" for="last_name">{% trans %}Last Name{% endtrans %}</label>
                        <input type="text" id="last_name" name="last_name"
                            value="{{ (sub_admin_profile.last_name if sub_admin_profile else (admin_profile.last_name if admin_profile)) or '' }}"
                            class="w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all text-sm"
                            placeholder="{% trans %}Enter last name{% endtrans %}"
                            data-testid="input-last-name">
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5" for="username">{% trans %}Username{% endtrans %}</label>
                    <input type="text" id="username" name="username" required
                        value="{{ sub_admin_profile.username if sub_admin_profile else ((admin_profile.username if admin_profile) or '') }}"
                        class="w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all text-sm"
                        placeholder="{% trans %}Enter username{% endtrans %}"
                        data-testid="input-username">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5" for="email">{% trans %}Email{% endtrans %}</label>
                    <input type="email" id="email" name="email"
                        value="{{ sub_admin_profile.email if sub_admin_profile else ((admin_profile.email if admin_profile) or '') }}"
                        class="w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all text-sm"
                        placeholder="{% trans %}Enter email address{% endtrans %}"
                        data-testid="input-email">
                </div>
                {% set _desc = (sub_admin_profile.profile_description if sub_admin_profile else (admin_profile.profile_description if admin_profile)) or '' %}
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5" for="profile_description">{% trans %}Profile Description{% endtrans %}</label>
                    <textarea id="profile_description" name="profile_description" rows="4" maxlength="500"
                        class="w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all text-sm"
                        placeholder="{% trans %}Tell something about yourself...{% endtrans %}"
                        data-testid="input-profile-description">{{ _desc }}</textarea>
                    <p class="mt-1 text-xs text-gray-400 dark:text-gray-500"><span id="desc-char-count">{{ _desc|length }}</span>{% trans %}/500 characters{% endtrans %}</p>
                </div>
                <div class="pt-2">
                    <button type="submit" class="inline-flex items-center gap-2 px-8 py-3 rounded-xl bg-accent hover:bg-accent-dark text-white font-semibold shadow-lg shadow-accent/30 hover:shadow-xl transition-all duration-300" data-testid="button-save-profile">
                        <i class="fa fa-save"></i> {% trans %}Save Profile{% endtrans %}
                    </button>
                </div>
            </div>
        </div>
    </form>

    <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-theme">
        <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800 bg-gradient-to-r from-accent/5 to-primary/5 dark:from-accent-light/5 dark:to-primary-light/5">
            <h3 class="font-semibold text-gray-900 dark:text-white"><i class="fa fa-lock mr-2 text-accent"></i>{% trans %}Change Password{% endtrans %}</h3>
        </div>
        <div class="p-6">
            <form id="password-form" class="space-y-4 max-w-lg">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5" for="current_password">{% trans %}Current Password{% endtrans %}</label>
                    <input type="password" id="current_password" name="current_password" required
                        class="w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all text-sm"
                        placeholder="{% trans %}Enter current password{% endtrans %}"
                        data-testid="input-current-password">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5" for="new_password">{% trans %}New Password{% endtrans %}</label>
                    <input type="password" id="new_password" name="new_password" required minlength="6"
                        class="w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all text-sm"
                        placeholder="{% trans %}Enter new password (min 6 characters){% endtrans %}"
                        data-testid="input-new-password">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5" for="confirm_password">{% trans %}Confirm New Password{% endtrans %}</label>
                    <input type="password" id="confirm_password" name="confirm_password" required minlength="6"
                        class="w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all text-sm"
                        placeholder="{% trans %}Confirm new password{% endtrans %}"
                        data-testid="input-confirm-password">
                </div>
                <div class="pt-2">
                    <button type="submit" class="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-accent hover:bg-accent-dark text-white font-semibold shadow-lg shadow-accent/30 hover:shadow-xl transition-all duration-300" data-testid="button-change-password">
                        <i class="fa fa-key"></i> {% trans %}Change Password{% endtrans %}
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- ── 2FA Section ── -->
    <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-theme">
        <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800 bg-gradient-to-r from-yellow-500/5 to-cyan-500/5 dark:from-yellow-400/5 dark:to-cyan-400/5">
            <h3 class="font-semibold text-gray-900 dark:text-white"><i class="fa fa-shield-halved mr-2 text-yellow-500"></i>{% trans %}Two-Factor Authentication{% endtrans %}</h3>
        </div>
        <div class="p-6">
            {% set _2fa_enabled = (sub_admin_profile.totp_enabled if sub_admin_profile else (admin_profile and admin_profile.totp_enabled)) %}

            <div class="flex items-center gap-3 mb-4">
                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{% trans %}Status:{% endtrans %}</span>
                {% if _2fa_enabled %}
                <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400" data-testid="badge-2fa-status">
                    <i class="fa fa-check-circle"></i> {% trans %}Enabled{% endtrans %}
                </span>
                {% else %}
                <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400" data-testid="badge-2fa-status">
                    <i class="fa fa-times-circle"></i> {% trans %}Disabled{% endtrans %}
                </span>
                {% endif %}
            </div>

            {% if _2fa_enabled %}
            <div id="2fa-enabled-section">
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">{% trans %}Two-factor authentication is currently active. To disable it, enter your password below.{% endtrans %}</p>
                <div class="flex flex-wrap items-center gap-3">
                    <button type="button" id="disable-2fa-btn" class="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-red-600 hover:bg-red-700 text-white font-semibold shadow-lg shadow-red-600/30 hover:shadow-xl transition-all duration-300" data-testid="button-disable-2fa">
                        <i class="fa fa-shield-halved"></i> {% trans %}Disable 2FA{% endtrans %}
                    </button>
                    {% if not sub_admin_profile %}
                    <button type="button" id="emergency-disable-2fa-btn"
                        class="inline-flex items-center gap-2 px-4 py-3 rounded-xl border border-orange-300 dark:border-orange-700 text-orange-700 dark:text-orange-400 text-sm font-medium hover:bg-orange-50 dark:hover:bg-orange-900/20 transition-all"
                        title="{% trans %}No password required — use this if you are locked out{% endtrans %}"
                        data-testid="button-emergency-disable-2fa">
                        <i class="fa fa-key"></i> {% trans %}Emergency Disable (No Password){% endtrans %}
                    </button>
                    {% endif %}
                </div>
            </div>

            <div id="disable-2fa-modal" class="hidden mt-4 p-4 rounded-xl border border-red-200 dark:border-red-800/50 bg-red-50 dark:bg-red-900/20">
                <h4 class="text-sm font-semibold text-red-700 dark:text-red-400 mb-3">{% trans %}Confirm Password to Disable 2FA{% endtrans %}</h4>
                <form id="disable-2fa-form" class="space-y-3 max-w-sm">
                    <div>
                        <input type="password" name="password" required
                            class="w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-red-500/50 outline-none transition-all text-sm"
                            placeholder="{% trans %}Enter your password{% endtrans %}"
                            data-testid="input-disable-2fa-password">
                    </div>
                    <div class="flex items-center gap-2">
                        <button type="submit" class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-red-600 hover:bg-red-700 text-white text-sm font-medium transition-all" data-testid="button-confirm-disable-2fa">
                            <i class="fa fa-check"></i> {% trans %}Confirm Disable{% endtrans %}
                        </button>
                        <button type="button" id="cancel-disable-2fa" class="inline-flex items-center gap-2 px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 text-sm font-medium hover:bg-gray-50 dark:hover:bg-gray-800 transition-all" data-testid="button-cancel-disable-2fa">
                            {% trans %}Cancel{% endtrans %}
                        </button>
                    </div>
                </form>
            </div>
            {% else %}
            <div id="2fa-disabled-section">
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">{% trans %}Add an extra layer of security to your account by enabling two-factor authentication.{% endtrans %}</p>
                <button type="button" id="enable-2fa-btn" class="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-accent hover:bg-accent-dark text-white font-semibold shadow-lg shadow-accent/30 hover:shadow-xl transition-all duration-300" data-testid="button-enable-2fa">
                    <i class="fa fa-shield-halved"></i> {% trans %}Enable 2FA{% endtrans %}
                </button>
            </div>

            <div id="2fa-setup-section" class="hidden mt-4 space-y-4">
                <div class="p-4 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
                    <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-3">{% trans %}Step 1: Scan QR Code{% endtrans %}</h4>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mb-3">{% trans %}Scan this QR code with your authenticator app (Google Authenticator, Authy, etc.){% endtrans %}</p>
                    <div class="flex flex-col sm:flex-row items-start gap-4">
                        <div id="qr-code-container" class="bg-white p-2 rounded-lg" data-testid="container-qr-code">
                            <img id="qr-code-img" src="" alt="2FA QR Code" class="w-48 h-48" data-testid="img-qr-code">
                        </div>
                        <div class="space-y-2">
                            <p class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Or enter this key manually:{% endtrans %}</p>
                            <code id="totp-secret-display" class="block px-3 py-2 rounded-lg bg-gray-200 dark:bg-gray-700 text-sm font-mono text-gray-900 dark:text-white select-all" data-testid="text-totp-secret"></code>
                        </div>
                    </div>
                </div>

                <div class="p-4 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
                    <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-3">{% trans %}Step 2: Verify Code{% endtrans %}</h4>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mb-3">{% trans %}Enter the 6-digit code from your authenticator app to verify setup.{% endtrans %}</p>
                    <form id="verify-2fa-form" class="flex items-end gap-3 max-w-sm">
                        <input type="hidden" id="totp-secret-input" name="secret" value="">
                        <div class="flex-1">
                            <input type="text" name="code" maxlength="6" pattern="[0-9]*" inputmode="numeric" required
                                class="w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 text-center text-lg font-mono tracking-widest focus:ring-2 focus:ring-primary/50 outline-none transition-all"
                                placeholder="000000"
                                data-testid="input-2fa-code">
                        </div>
                        <button type="submit" class="inline-flex items-center gap-2 px-4 py-3 rounded-xl bg-accent hover:bg-accent-dark text-white text-sm font-semibold shadow-lg shadow-accent/30 hover:shadow-xl transition-all duration-300 whitespace-nowrap" data-testid="button-verify-enable-2fa">
                            <i class="fa fa-check"></i> {% trans %}Verify &amp; Enable{% endtrans %}
                        </button>
                    </form>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block page_scripts %}
<script>
$(function() {
    // Preview image locally when selected (no upload yet, no toast)
    var _pendingAvatarFile = null;
    $('#avatar-file-input').on('change', function() {
        var file = this.files[0];
        if (!file) return;
        _pendingAvatarFile = file;
        var reader = new FileReader();
        reader.onload = function(e) {
            $('#avatar-preview').attr('src', e.target.result).css('display', 'block');
            $('#avatar-placeholder').css('display', 'none');
        };
        reader.readAsDataURL(file);
    });

    $('#remove-avatar-btn').on('click', function() {
        _pendingAvatarFile = null;
        $('#profile_picture_value').val('');
        $('#avatar-preview').attr('src', '').css('display', 'none');
        $('#avatar-placeholder').css('display', 'block');
        $('#avatar-file-input').val('');
    });

    $('#profile_description').on('input', function() {
        $('#desc-char-count').text($(this).val().length);
    });

    $('#profile-form').on('submit', function(e) {
        e.preventDefault();
        var $form = $(this);
        var $btn = $form.find('button[type="submit"]');
        $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin mr-2"></i>Saving...');

        function doSaveProfile() {
            $.ajax({
                url: '/admin/profile',
                method: 'POST',
                data: $form.serialize(),
                headers: { 'X-Requested-With': 'XMLHttpRequest' },
                success: function(resp) {
                    if (resp.status === 'ok') {
                        toastr.success('Profile saved successfully!');
                    } else {
                        toastr.error(resp.message || 'Failed to save profile.');
                    }
                },
                error: function(xhr) {
                    var msg = 'An error occurred.';
                    try { var data = JSON.parse(xhr.responseText); if (data.message) msg = data.message; } catch(ex) {}
                    toastr.error(msg);
                },
                complete: function() {
                    $btn.prop('disabled', false).html('<i class="fa fa-save mr-2"></i>Save Profile');
                }
            });
        }

        // If a new image is selected, upload it first, then save
        if (_pendingAvatarFile) {
            var fd = new FormData();
            fd.append('file', _pendingAvatarFile);
            // Send current avatar URL so server can delete the old file
            var _currentUrl = $('#profile_picture_value').val() || '';
            if (_currentUrl) fd.append('old_url', _currentUrl);
            $.ajax({
                url: '/admin/upload-avatar',
                method: 'POST',
                data: fd,
                processData: false,
                contentType: false,
                dataType: 'json',
                headers: { 'X-Requested-With': 'XMLHttpRequest' },
                success: function(resp) {
                    if (resp && resp.url) {
                        $('#profile_picture_value').val(resp.url);
                        $('#avatar-preview').attr('src', resp.url).css('display', 'block');
                        $('#avatar-placeholder').css('display', 'none');
                        _pendingAvatarFile = null;
                        doSaveProfile();
                    } else {
                        var msg = (resp && resp.message) ? resp.message : 'Upload failed.';
                        toastr.error(msg);
                        $btn.prop('disabled', false).html('<i class="fa fa-save mr-2"></i>Save Profile');
                    }
                },
                error: function(xhr) {
                    var msg = 'Failed to upload profile picture.';
                    try {
                        var data = JSON.parse(xhr.responseText);
                        if (data && data.message) msg = data.message;
                    } catch(ex) {
                        if (xhr.status === 403) msg = 'Session expired — please log in again.';
                        else if (xhr.status === 413) msg = 'File is too large. Please choose a smaller image.';
                        else if (xhr.status >= 500) msg = 'Server error (' + xhr.status + '). Check server logs.';
                    }
                    toastr.error(msg);
                    $btn.prop('disabled', false).html('<i class="fa fa-save mr-2"></i>Save Profile');
                }
            });
        } else {
            doSaveProfile();
        }
    });

    $('#password-form').on('submit', function(e) {
        e.preventDefault();
        var currentPassword = $('#current_password').val().trim();
        var newPassword = $('#new_password').val().trim();
        var confirmPassword = $('#confirm_password').val().trim();

        if (!currentPassword || !newPassword || !confirmPassword) {
            toastr.error('All fields are required.');
            return;
        }
        if (newPassword.length < 6) {
            toastr.error('New password must be at least 6 characters.');
            return;
        }
        if (newPassword !== confirmPassword) {
            toastr.error('New password and confirmation do not match.');
            return;
        }

        var $btn = $(this).find('button[type="submit"]');
        $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin mr-2"></i>Changing...');
        $.ajax({
            url: '/admin/profile/password',
            method: 'POST',
            data: $(this).serialize(),
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            success: function(resp) {
                if (resp.status === 'ok') {
                    toastr.success('Password changed successfully!');
                    $('#password-form')[0].reset();
                } else {
                    toastr.error(resp.message || 'Failed to change password.');
                }
            },
            error: function(xhr) {
                var msg = 'An error occurred.';
                try { var data = JSON.parse(xhr.responseText); if (data.message) msg = data.message; } catch(e) {}
                toastr.error(msg);
            },
            complete: function() {
                $btn.prop('disabled', false).html('<i class="fa fa-key mr-2"></i>Change Password');
            }
        });
    });

    var _isSubAdmin = {{ 'true' if sub_admin_profile else 'false' }};
    var _2faSetupUrl   = _isSubAdmin ? '/admin/profile/sub-2fa/setup'   : '/admin/profile/2fa/setup';
    var _2faDisableUrl = _isSubAdmin ? '/admin/profile/sub-2fa/disable'  : '/admin/profile/2fa/disable';

    $('#enable-2fa-btn').on('click', function() {
        var $btn = $(this);
        $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin mr-2"></i>Setting up...');
        $.ajax({
            url: _2faSetupUrl,
            method: 'GET',
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            success: function(resp) {
                if (resp.secret && resp.qr_code) {
                    $('#totp-secret-input').val(resp.secret);
                    $('#totp-secret-display').text(resp.secret);
                    $('#qr-code-img').attr('src', resp.qr_code);
                    $('#2fa-setup-section').removeClass('hidden');
                    $btn.addClass('hidden');
                } else {
                    toastr.error('Failed to generate 2FA setup.');
                }
            },
            error: function() {
                toastr.error('Failed to set up 2FA.');
            },
            complete: function() {
                $btn.prop('disabled', false).html('<i class="fa fa-shield-halved mr-2"></i>Enable 2FA');
            }
        });
    });

    $('#verify-2fa-form').on('submit', function(e) {
        e.preventDefault();
        var code = $(this).find('input[name="code"]').val().trim();
        var secret = $('#totp-secret-input').val();
        if (!code || code.length !== 6) {
            toastr.error('Please enter a valid 6-digit code.');
            return;
        }
        var $btn = $(this).find('button[type="submit"]');
        $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin mr-2"></i>Verifying...');
        $.ajax({
            url: _2faSetupUrl,
            method: 'POST',
            data: { code: code, secret: secret },
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            success: function(resp) {
                if (resp.status === 'ok') {
                    toastr.success('Two-factor authentication enabled!');
                    setTimeout(function() { location.reload(); }, 1500);
                } else {
                    toastr.error(resp.message || 'Invalid code. Please try again.');
                }
            },
            error: function(xhr) {
                var msg = 'Verification failed.';
                try { var data = JSON.parse(xhr.responseText); if (data.message) msg = data.message; } catch(e) {}
                toastr.error(msg);
            },
            complete: function() {
                $btn.prop('disabled', false).html('<i class="fa fa-check mr-2"></i>Verify & Enable');
            }
        });
    });

    $('#disable-2fa-btn').on('click', function() {
        $('#disable-2fa-modal').removeClass('hidden');
    });

    $('#cancel-disable-2fa').on('click', function() {
        $('#disable-2fa-modal').addClass('hidden');
        $('#disable-2fa-form')[0].reset();
    });

    $('#disable-2fa-form').on('submit', function(e) {
        e.preventDefault();
        var password = $(this).find('input[name="password"]').val().trim();
        if (!password) {
            toastr.error('Password is required.');
            return;
        }
        var $btn = $(this).find('button[type="submit"]');
        $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin mr-2"></i>Disabling...');
        $.ajax({
            url: _2faDisableUrl,
            method: 'POST',
            data: { password: password },
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            success: function(resp) {
                if (resp.status === 'ok') {
                    toastr.success('Two-factor authentication disabled.');
                    setTimeout(function() { location.reload(); }, 1500);
                } else {
                    toastr.error(resp.message || 'Failed to disable 2FA.');
                }
            },
            error: function(xhr) {
                var msg = 'An error occurred.';
                try { var data = JSON.parse(xhr.responseText); if (data.message) msg = data.message; } catch(e) {}
                toastr.error(msg);
            },
            complete: function() {
                $btn.prop('disabled', false).html('<i class="fa fa-check mr-2"></i>Confirm Disable');
            }
        });
    });

    $('#emergency-disable-2fa-btn').on('click', function() {
        var $btn = $(this);
        var msg = 'Disable 2FA immediately without a password?\n\n\u2022 Two-factor authentication will be turned off immediately\n\u2022 Your account will be secured by password only until you re-enable 2FA\n\u2022 Use this for emergencies only';
        function doDisable() {
            $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin mr-2"></i>Disabling...');
            $.ajax({
                url: '/admin/profile/2fa/emergency-disable',
                method: 'POST',
                dataType: 'json',
                headers: { 'X-Requested-With': 'XMLHttpRequest' },
                success: function(resp) {
                    if (resp && resp.status === 'ok') {
                        toastr.success('2FA disabled. You can set it up again from this page.');
                        setTimeout(function() { location.reload(); }, 1500);
                    } else {
                        toastr.error((resp && resp.message) || 'Failed to disable 2FA.');
                        $btn.prop('disabled', false).html('<i class="fa fa-key mr-2"></i>Emergency Disable (No Password)');
                    }
                },
                error: function(xhr) {
                    var errMsg = 'An error occurred. Please try again.';
                    try { var d = JSON.parse(xhr.responseText); if (d && d.message) errMsg = d.message; } catch(e) {}
                    toastr.error(errMsg);
                    $btn.prop('disabled', false).html('<i class="fa fa-key mr-2"></i>Emergency Disable (No Password)');
                }
            });
        }
        if (typeof window.ocConfirm === 'function') {
            window.ocConfirm(msg, doDisable);
        } else {
            if (window.confirm(msg)) { doDisable(); }
        }
    });
});
</script>
{% endblock %}