{% extends "base.html" %}

{% block title %}User Settings - ArchCNTL{% endblock %}

{% block page_title %}
<span class="header-page-title truncate">User Settings</span>
{% endblock %}

<style>
    .settings-page .setting-row-glow:hover {
        border-color: rgba(59, 130, 246, 0.25);
        box-shadow: 0 0 36px -12px rgba(59, 130, 246, 0.25);
    }
</style>

{% block main_content %}
<div class="p-8 space-y-12 settings-page">
    <div>
        <form id="settings-form" class="flex flex-col gap-4 relative" autocomplete="off"
            data-username="{{ user.username }}" data-email="{{ user.email }}">
            {# Decoy fields — browsers tend to fill these instead of the real inputs #}
            <div class="absolute -left-[9999px] w-px h-px overflow-hidden" aria-hidden="true">
                <input type="text" name="username" tabindex="-1" autocomplete="username">
                <input type="password" name="password" tabindex="-1" autocomplete="current-password">
            </div>

            <div
                class="glass-panel p-5 sm:p-6 rounded-3xl border border-white/5 setting-row-glow transition-all duration-300">
                <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-5">
                    <div class="space-y-1 flex-1 min-w-0">
                        <h3 class="font-bold text-slate-100">Account ID</h3>
                        <p class="text-xs text-slate-500 font-medium tracking-wide">Your permanent account identifier.
                            Username changes do not affect this ID.</p>
                    </div>
                    <span
                        class="font-mono text-sm text-brand-400 px-4 py-3 bg-slate-950/40 border border-white/10 rounded-2xl shrink-0 w-full sm:w-auto text-center sm:text-left">{{ user.user_id }}</span>
                </div>
            </div>

            <div
                class="glass-panel p-5 sm:p-6 rounded-3xl border border-white/5 setting-row-glow transition-all duration-300">
                <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-5">
                    <div class="space-y-1 flex-1 min-w-0">
                        <h3 class="font-bold text-slate-100">Username</h3>
                        <p class="text-xs text-slate-500 font-medium tracking-wide">The name you use to sign in.</p>
                    </div>
                    <input type="text" id="settings-username" name="archcntl_account_label" required readonly
                        autocomplete="off" autocapitalize="off" spellcheck="false"
                        data-lpignore="true" data-1p-ignore data-form-type="other"
                        class="settings-field w-full sm:w-72 lg:w-80 shrink-0 bg-slate-950/40 border border-white/10 rounded-2xl py-3 px-4 text-sm text-white focus:border-brand-500/50 focus:ring-4 focus:ring-brand-500/10 outline-none transition-all font-medium">
                </div>
            </div>

            <div
                class="glass-panel p-5 sm:p-6 rounded-3xl border border-white/5 setting-row-glow transition-all duration-300">
                <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-5">
                    <div class="space-y-1 flex-1 min-w-0">
                        <h3 class="font-bold text-slate-100">Email Address</h3>
                        <p class="text-xs text-slate-500 font-medium tracking-wide">Used for account recovery and
                            notifications.</p>
                    </div>
                    <input type="text" id="settings-email" name="archcntl_contact_address" required readonly
                        inputmode="email" autocomplete="off" autocapitalize="off" spellcheck="false"
                        data-lpignore="true" data-1p-ignore data-form-type="other"
                        class="settings-field w-full sm:w-72 lg:w-80 shrink-0 bg-slate-950/40 border border-white/10 rounded-2xl py-3 px-4 text-sm text-white focus:border-brand-500/50 focus:ring-4 focus:ring-brand-500/10 outline-none transition-all font-medium">
                </div>
            </div>

            <div
                class="glass-panel p-5 sm:p-6 rounded-3xl border border-white/5 setting-row-glow transition-all duration-300">
                <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-5">
                    <div class="space-y-1 flex-1 min-w-0">
                        <h3 class="font-bold text-slate-100">Current Password</h3>
                        <p class="text-xs text-slate-500 font-medium tracking-wide">Required when changing your password.
                        </p>
                    </div>
                    <input type="password" id="settings-current-password" name="archcntl_existing_secret" readonly
                        autocomplete="off" placeholder="Enter current password"
                        data-lpignore="true" data-1p-ignore data-form-type="other"
                        class="settings-field w-full sm:w-72 lg:w-80 shrink-0 bg-slate-950/40 border border-white/10 rounded-2xl py-3 px-4 text-sm text-white focus:border-brand-500/50 focus:ring-4 focus:ring-brand-500/10 outline-none transition-all font-medium">
                </div>
            </div>

            <div
                class="glass-panel p-5 sm:p-6 rounded-3xl border border-white/5 setting-row-glow transition-all duration-300">
                <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-5">
                    <div class="space-y-1 flex-1 min-w-0">
                        <h3 class="font-bold text-slate-100">New Password</h3>
                        <p class="text-xs text-slate-500 font-medium tracking-wide">Leave blank to keep your current
                            password.</p>
                    </div>
                    <input type="password" id="settings-password" name="archcntl_new_secret" readonly
                        autocomplete="off" placeholder="Enter new password"
                        data-lpignore="true" data-1p-ignore data-form-type="other"
                        class="settings-field w-full sm:w-72 lg:w-80 shrink-0 bg-slate-950/40 border border-white/10 rounded-2xl py-3 px-4 text-sm text-white focus:border-brand-500/50 focus:ring-4 focus:ring-brand-500/10 outline-none transition-all font-medium">
                </div>
            </div>

            <div
                class="glass-panel p-5 sm:p-6 rounded-3xl border border-white/5 setting-row-glow transition-all duration-300">
                <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-5">
                    <div class="space-y-1 flex-1 min-w-0">
                        <h3 class="font-bold text-slate-100">Confirm New Password</h3>
                        <p class="text-xs text-slate-500 font-medium tracking-wide">Re-enter your new password to
                            confirm.</p>
                    </div>
                    <input type="password" id="settings-confirm-password" name="archcntl_new_secret_confirm" readonly
                        autocomplete="off" placeholder="Repeat new password"
                        data-lpignore="true" data-1p-ignore data-form-type="other"
                        class="settings-field w-full sm:w-72 lg:w-80 shrink-0 bg-slate-950/40 border border-white/10 rounded-2xl py-3 px-4 text-sm text-white focus:border-brand-500/50 focus:ring-4 focus:ring-brand-500/10 outline-none transition-all font-medium">
                </div>
            </div>

            <div
                class="glass-panel p-5 sm:p-6 rounded-3xl border border-white/5 setting-row-glow transition-all duration-300">
                <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-5">
                    <div class="flex-1 min-w-0">
                        <h3 class="font-bold text-white tracking-tight">Save Changes</h3>
                        <p class="text-xs text-slate-500 font-medium leading-relaxed mt-1">Apply updates to your account
                            credentials.</p>
                    </div>
                    <button type="submit" id="settings-save-btn"
                        class="w-full sm:w-auto sm:min-w-[10rem] bg-brand-500 hover:bg-brand-600 text-white font-bold py-2.5 px-5 rounded-2xl text-xs transition-all btn-premium btn-glow-brand shadow-lg shadow-brand-500/20 whitespace-nowrap">
                        Save Changes
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    (function () {
        const form = document.getElementById('settings-form');
        const saveBtn = document.getElementById('settings-save-btn');
        const usernameInput = document.getElementById('settings-username');
        const emailInput = document.getElementById('settings-email');
        const passwordFields = [
            document.getElementById('settings-current-password'),
            document.getElementById('settings-password'),
            document.getElementById('settings-confirm-password'),
        ];

        function enableFieldOnFocus(input) {
            if (!input) return;
            const unlock = () => {
                input.removeAttribute('readonly');
            };
            input.addEventListener('focus', unlock, { once: true });
            input.addEventListener('mousedown', unlock, { once: true });
        }

        function initSettingsFields() {
            if (usernameInput) usernameInput.value = form.dataset.username || '';
            if (emailInput) emailInput.value = form.dataset.email || '';

            document.querySelectorAll('.settings-field').forEach((input) => {
                enableFieldOnFocus(input);
            });

            // Clear any late browser autofill on password fields
            window.setTimeout(() => {
                passwordFields.forEach((input) => {
                    if (input) input.value = '';
                });
            }, 50);
            window.setTimeout(() => {
                passwordFields.forEach((input) => {
                    if (input) input.value = '';
                });
            }, 250);
        }

        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', initSettingsFields);
        } else {
            initSettingsFields();
        }

        form.addEventListener('submit', async (e) => {
            e.preventDefault();
            saveBtn.disabled = true;
            saveBtn.textContent = 'Saving...';

            try {
                const newPassword = document.getElementById('settings-password').value;
                const currentPassword = document.getElementById('settings-current-password').value;
                if (newPassword && !currentPassword) {
                    throw new Error('Current password is required to set a new password.');
                }

                const response = await fetch('{{ url_for("profile.update_user_settings") }}', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        username: usernameInput.value.trim(),
                        email: emailInput.value.trim(),
                        current_password: currentPassword,
                        password: newPassword,
                        confirm_password: document.getElementById('settings-confirm-password').value,
                    }),
                });
                const data = await response.json();
                if (!response.ok) throw new Error(data.error || 'Failed to save settings.');

                if (window.showToast) {
                    window.showToast('Success', data.success, { success: true });
                }
                passwordFields.forEach((input) => {
                    if (input) {
                        input.value = '';
                        input.setAttribute('readonly', 'readonly');
                        enableFieldOnFocus(input);
                    }
                });

                const sidebarUsername = document.getElementById('sidebar-username');
                if (sidebarUsername) sidebarUsername.textContent = usernameInput.value.trim();
            } catch (error) {
                if (window.showToast) {
                    window.showToast('Error', error.message, { success: false });
                } else {
                    alert(error.message);
                }
            } finally {
                saveBtn.disabled = false;
                saveBtn.textContent = 'Save Changes';
            }
        });
    })();
</script>
{% endblock %}