{% extends "base.html" %}
{% from "_custom_select.html" import custom_select %}

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

{% block main_content %}
<div class="page-header-glass flex-shrink-0">
    <div class="flex items-center">
        <div class="p-2.5 bg-blue-500/10 rounded-xl border border-blue-500/20 mr-4 shadow-sm">
            <i data-lucide="settings" class="h-6 w-6 text-blue-400"></i>
        </div>
        <h2 class="text-3xl font-bold text-white">User Settings</h2>
    </div>
    <p class="mt-2 text-zinc-500 text-sm ml-14">Manage your personal preferences and billing.</p>
</div>

<div class="flex-1 overflow-y-auto p-6 lg:p-8">
    <div class="grid grid-cols-1 gap-6">
        {# General Settings #}
        <button id="open-general-settings"
            class="w-full flex items-center gap-3 px-4 py-1.5 rounded-xl text-left transition-colors hover:bg-white/5 glass-panel border border-white/5">
            <div class="flex-shrink-0 w-7 h-7 rounded-lg bg-blue-500/10 flex items-center justify-center">
                <i data-lucide="user" class="h-4 w-4 text-blue-400"></i>
            </div>
            <span class="text-white font-medium">General Settings</span>
        </button>

        {# Subscriptions #}
        <button id="open-subscriptions"
            class="w-full flex items-center gap-3 px-4 py-1.5 rounded-xl text-left transition-colors hover:bg-white/5 glass-panel border border-white/5">
            <div class="flex-shrink-0 w-7 h-7 rounded-lg bg-indigo-500/10 flex items-center justify-center">
                <i data-lucide="credit-card" class="h-4 w-4 text-indigo-400"></i>
            </div>
            <span class="text-white font-medium">Subscriptions</span>
        </button>

        {# Usage #}
        <button id="open-usage"
            class="w-full flex items-center gap-3 px-4 py-1.5 rounded-xl text-left transition-colors hover:bg-white/5 glass-panel border border-white/5">
            <div class="flex-shrink-0 w-7 h-7 rounded-lg bg-emerald-500/10 flex items-center justify-center">
                <i data-lucide="bar-chart-3" class="h-4 w-4 text-emerald-400"></i>
            </div>
            <span class="text-white font-medium">Usage</span>
        </button>

        {# SSH keys (Git over SSH) #}
        <button id="open-ssh-keys"
            class="w-full flex items-center gap-3 px-4 py-1.5 rounded-xl text-left transition-colors hover:bg-white/5 glass-panel border border-white/5">
            <div class="flex-shrink-0 w-7 h-7 rounded-lg bg-orange-500/10 flex items-center justify-center">
                <i data-lucide="key-round" class="h-4 w-4 text-orange-400"></i>
            </div>
            <span class="text-white font-medium">SSH keys</span>
        </button>

        {# Terms of Service #}
        <button id="open-terms"
            class="w-full flex items-center gap-3 px-4 py-1.5 rounded-xl text-left transition-colors hover:bg-white/5 glass-panel border border-white/5">
            <div class="flex-shrink-0 w-7 h-7 rounded-lg bg-cyan-500/10 flex items-center justify-center">
                <i data-lucide="file-text" class="h-4 w-4 text-cyan-400"></i>
            </div>
            <span class="text-white font-medium">Terms of Service</span>
        </button>
    </div>
</div>
{% endblock %}

{% block portals %}
<style>
    #general-settings-modal .glass-button-primary,
    #general-settings-modal .glass-button,
    #general-settings-modal .bg-picker-opt {
        box-shadow: none !important;
        transition: border-color 0.2s, background-color 0.2s;
    }
    #general-settings-modal .glass-button-primary:hover,
    #general-settings-modal .glass-button:hover,
    #general-settings-modal .bg-picker-opt:hover {
        box-shadow: none !important;
        transform: none !important;
    }
    /* Toggle-style range sliders - match toggle switch (rounded pill, theme fill, white thumb) */
    #general-settings-modal input[type="range"].toggle-style-range {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 12px;
        background: linear-gradient(to right, rgb(var(--theme-r, 59), var(--theme-g, 130), var(--theme-b, 246)) 0%, rgb(var(--theme-r, 59), var(--theme-g, 130), var(--theme-b, 246)) var(--slider-pct, 50%), rgb(39 39 42 / 0.4) var(--slider-pct, 50%), rgb(39 39 42 / 0.4) 100%);
        border-radius: 9999px;
        cursor: pointer;
    }
    #general-settings-modal input[type="range"].toggle-style-range::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 9999px;
        background: white;
        cursor: pointer;
        border: 2px solid rgba(255,255,255,0.5);
    }
    #general-settings-modal input[type="range"].toggle-style-range::-moz-range-thumb {
        width: 20px;
        height: 20px;
        border-radius: 9999px;
        background: white;
        cursor: pointer;
        border: 2px solid rgba(255,255,255,0.5);
    }
</style>
{# Modals for General Settings and Subscriptions #}
<div id="general-settings-modal" class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-[100] p-4">
    <div id="general-settings-backdrop" class="modal-backdrop fixed inset-0 bg-black/40 modal-transition z-[99]"></div>
    <div
        class="modal-content glass-modal w-full max-w-lg h-auto max-h-[85vh] flex flex-col modal-content-transition relative z-[100]">
        <div class="p-8 pb-4 flex-shrink-0">
            <h3 class="text-2xl font-bold text-white leading-tight">General Settings</h3>
            <p class="text-sm text-zinc-500">More settings coming soon!</p>
        </div>
        <div class="flex-1 overflow-y-auto px-8 py-4 custom-scrollbar space-y-8">
            <div class="glass-panel p-6 rounded-2xl border border-white/5 bg-white/[0.02]">
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                    <div class="min-w-0">
                        <h4 class="text-sm font-bold text-white">Theme</h4>
                        <p class="text-[10px] text-zinc-500 mt-1 uppercase tracking-widest font-black leading-relaxed">System uses the default from Admin → System Settings (updates when admins change it). Personal keeps your own choices below.</p>
                    </div>
                    <div class="flex items-center gap-3 shrink-0">
                        <span class="text-xs text-zinc-400 font-medium whitespace-nowrap">Personal</span>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" id="appearance-follow-system" class="sr-only peer"
                                {% if g.user and g.user.get('appearance_follow_system') %}checked{% endif %}>
                            <div class="w-11 h-6 bg-zinc-800 rounded-full peer peer-focus:ring-2 peer-focus:ring-emerald-500/30 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-zinc-400 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-500 peer-checked:after:bg-white"></div>
                        </label>
                        <span class="text-xs text-zinc-400 font-medium whitespace-nowrap">System</span>
                    </div>
                </div>
            </div>
            <div id="personal-theme-controls" class="space-y-8 {% if g.user and g.user.get('appearance_follow_system') %}opacity-45 pointer-events-none select-none{% endif %}">
            {% if g.user and g.user.get('appearance_follow_system') %}
            <p class="text-xs text-amber-400/90 -mt-4 font-medium">You are using the system default theme. Turn off &quot;System&quot; above to customize background and appearance.</p>
            {% endif %}
            <div>
                <h4 class="text-sm font-bold text-white mb-4 uppercase tracking-widest text-[10px] text-zinc-500">Background</h4>
                <div class="glass-panel p-6 rounded-2xl border border-white/5 bg-white/[0.02]">
                    <form id="background-form" method="POST" action="{{ url_for('settings.update_background') }}">
                        <input type="hidden" name="background" id="background-input" value="{{ g.user.background_style if g.user and g.user.background_style else 'balls' }}">
                        <p class="text-[10px] text-zinc-500 mb-4 uppercase tracking-widest font-black">Choose your ambient background across the app.</p>
                        <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
                            <button type="button" data-bg="none" class="bg-picker-opt px-4 py-3 rounded-xl border text-left text-sm font-medium transition-all hover:border-white/20 {% if (g.user.background_style if g.user else 'balls') == 'none' %}border-blue-500/50 bg-blue-500/10 text-white{% else %}border-white/5 text-zinc-400{% endif %}">None</button>
                            <button type="button" data-bg="balls" class="bg-picker-opt px-4 py-3 rounded-xl border text-left text-sm font-medium transition-all hover:border-white/20 {% if (g.user.background_style if g.user else 'balls') == 'balls' %}border-blue-500/50 bg-blue-500/10 text-white{% else %}border-white/5 text-zinc-400{% endif %}">Balls (Default)</button>
                            <button type="button" data-bg="wave" class="bg-picker-opt px-4 py-3 rounded-xl border text-left text-sm font-medium transition-all hover:border-white/20 {% if (g.user.background_style if g.user else 'balls') == 'wave' %}border-blue-500/50 bg-blue-500/10 text-white{% else %}border-white/5 text-zinc-400{% endif %}">Bottom Wave</button>
                            <button type="button" data-bg="stars" class="bg-picker-opt px-4 py-3 rounded-xl border text-left text-sm font-medium transition-all hover:border-white/20 {% if (g.user.background_style if g.user else 'balls') == 'stars' %}border-blue-500/50 bg-blue-500/10 text-white{% else %}border-white/5 text-zinc-400{% endif %}">Parallax Stars</button>
                            <button type="button" data-bg="drip" class="bg-picker-opt px-4 py-3 rounded-xl border text-left text-sm font-medium transition-all hover:border-white/20 {% if (g.user.background_style if g.user else 'balls') == 'drip' %}border-blue-500/50 bg-blue-500/10 text-white{% else %}border-white/5 text-zinc-400{% endif %}">Color Drip</button>
                        </div>
                    </form>
                </div>
            </div>
            <div>
                <h4 class="text-sm font-bold text-white mb-4 uppercase tracking-widest text-[10px] text-zinc-500">Appearance</h4>
                <div class="glass-panel p-6 rounded-2xl border border-white/5 bg-white/[0.02]">
                    <p class="text-[10px] text-zinc-500 mb-4 uppercase tracking-widest font-black">Adjust opacity, blur, border radius, and neutral color across the app.</p>
                    <div id="appearance-form" class="space-y-4">
                        <div>
                            <label class="flex justify-between text-sm text-zinc-400 mb-1">
                                <span>Opacity</span>
                                <span id="appearance-opacity-value">{{ g.user.glass_opacity if g.user and g.user.glass_opacity is not none else 0.7 }}</span>
                            </label>
                            <input type="range" id="appearance-opacity-slider" name="glass_opacity" min="0.3" max="1" value="{{ g.user.glass_opacity if g.user and g.user.glass_opacity is not none else 0.7 }}" step="0.05" class="w-full toggle-style-range cursor-pointer">
                        </div>
                        <div>
                            <label class="flex justify-between text-sm text-zinc-400 mb-1">
                                <span>Blur (px)</span>
                                <span id="appearance-blur-value">{{ g.user.glass_blur if g.user and g.user.glass_blur is not none else 12 }}</span>
                            </label>
                            <input type="range" id="appearance-blur-slider" name="glass_blur" min="4" max="24" value="{{ g.user.glass_blur if g.user and g.user.glass_blur is not none else 12 }}" step="1" class="w-full toggle-style-range cursor-pointer">
                        </div>
                        <div>
                            <label class="flex justify-between text-sm text-zinc-400 mb-1">
                                <span>Border radius</span>
                                <span id="appearance-radius-value">{{ g.user.radius_scale if g.user and g.user.radius_scale is not none else 1 }}</span>
                            </label>
                            <input type="range" id="appearance-radius-slider" name="radius_scale" min="0.5" max="2" value="{{ g.user.radius_scale if g.user and g.user.radius_scale is not none else 1 }}" step="0.1" class="w-full toggle-style-range cursor-pointer">
                        </div>
                        <div>
                            <label class="block text-sm text-zinc-400 mb-2">Use Custom Muted Font Color</label>
                            {% set mm_raw = (g.user.muted_text_mode or '') if g.user else '' %}
                            {% if g.user and mm_raw == '' and g.user.accent_text %}
                                {% set muted_selected = 'preset' %}
                            {% else %}
                                {% set muted_selected = mm_raw %}
                            {% endif %}
                            {% set muted_labels = {'': 'Default (gray)', 'preset': 'Use Color Preset Color', 'light': 'Light (Pure White)', 'dark': 'Dark (Pure Black)', 'custom': 'Custom (pick color)'} %}
                            {{ custom_select(id="appearance-muted-text-mode", name="muted_text_mode", options=[
                                {"value": "", "label": "Default (gray)"},
                                {"value": "preset", "label": "Use Color Preset Color"},
                                {"value": "light", "label": "Light (Pure White)"},
                                {"value": "dark", "label": "Dark (Pure Black)"},
                                {"value": "custom", "label": "Custom (pick color)"}
                            ], selected_value=muted_selected, selected_label=muted_labels.get(muted_selected, 'Default (gray)'), mode="form", class="w-full", picker_title="Muted text color") }}
                            <div id="muted-text-custom-wrap" class="mt-2 {% if not g.user or (g.user.muted_text_mode or '') != 'custom' %}hidden{% endif %}">
                                <label class="text-[10px] text-zinc-500 uppercase tracking-widest font-black">Custom color</label>
                                <input type="color" id="appearance-muted-text-custom" name="muted_text_custom_hex" value="{{ (g.user.muted_text_custom_hex if g.user and g.user.muted_text_custom_hex else '#a1a1aa') | e }}" class="mt-1 h-10 w-full rounded-xl border border-white/10 bg-white/5 cursor-pointer">
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm text-zinc-400 mb-2">Use Custom Headers Color</label>
                            {% set hm_sel = (g.user.header_color_mode or '') if g.user else '' %}
                            {% set header_labels = {'': 'Default (white)', 'preset': 'Use Color Preset Color', 'light': 'Light (Pure White)', 'dark': 'Dark (Pure Black)', 'custom': 'Custom (pick color)'} %}
                            {{ custom_select(id="appearance-header-color-mode", name="header_color_mode", options=[
                                {"value": "", "label": "Default (white)"},
                                {"value": "preset", "label": "Use Color Preset Color"},
                                {"value": "light", "label": "Light (Pure White)"},
                                {"value": "dark", "label": "Dark (Pure Black)"},
                                {"value": "custom", "label": "Custom (pick color)"}
                            ], selected_value=hm_sel, selected_label=header_labels.get(hm_sel, 'Default (white)'), mode="form", class="w-full", picker_title="Header text color") }}
                            <div id="header-color-custom-wrap" class="mt-2 {% if not g.user or (g.user.header_color_mode or '') != 'custom' %}hidden{% endif %}">
                                <label class="text-[10px] text-zinc-500 uppercase tracking-widest font-black">Custom header color</label>
                                <input type="color" id="appearance-header-color-custom" name="header_custom_hex" value="{{ (g.user.header_custom_hex if g.user and g.user.header_custom_hex else '#ffffff') | e }}" class="mt-1 h-10 w-full rounded-xl border border-white/10 bg-white/5 cursor-pointer">
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm text-zinc-400 mb-2">Color preset</label>
                            <div class="flex flex-wrap gap-2 max-h-48 overflow-y-auto pr-2 custom-scrollbar">
                                {% for preset in ['red','orange','amber','yellow','lime','green','emerald','teal','cyan','sky','blue','indigo','violet','purple','fuchsia','pink','rose','slate','gray','zinc','neutral','stone','taupe','mauve','mist','olive'] %}
                                {% set rgb = {'red':[239,68,68],'orange':[249,115,22],'amber':[245,158,11],'yellow':[234,179,8],'lime':[132,204,22],'green':[34,197,94],'emerald':[16,185,129],'teal':[20,184,166],'cyan':[6,182,212],'sky':[14,165,233],'blue':[59,130,246],'indigo':[99,102,241],'violet':[139,92,246],'purple':[168,85,247],'fuchsia':[217,70,239],'pink':[236,72,153],'rose':[244,63,94],'slate':[100,116,139],'gray':[107,114,128],'zinc':[161,161,170],'neutral':[115,115,115],'stone':[120,113,108],'taupe':[120,113,108],'mauve':[121,105,123],'mist':[100,123,147],'olive':[120,123,106]}.get(preset, [161,161,170]) %}
                                {% set colorHex = 'rgb(' ~ rgb[0] ~ ',' ~ rgb[1] ~ ',' ~ rgb[2] ~ ')' %}
                                <button type="button" data-neutral="{{ preset }}" title="{{ preset }}"
                                    class="neutral-preset-opt w-10 h-10 rounded-xl border-2 transition-all hover:border-white/30 shrink-0 flex items-center justify-center {% if (g.user.neutral_preset if g.user and g.user.neutral_preset else 'zinc') == preset %}border-white ring-2 ring-blue-500/50 ring-offset-2 ring-offset-zinc-900{% else %}border-white/10{% endif %}"
                                    style="background-color: {{ colorHex }}"><!-- dot only --></button>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <h4 class="text-sm font-bold text-white mb-4 uppercase tracking-widest text-[10px] text-zinc-500">Custom Cursor</h4>
                <div class="glass-panel p-6 rounded-2xl border border-white/5 bg-white/[0.02]">
                    <p class="text-[10px] text-zinc-500 mb-4 uppercase tracking-widest font-black">A custom cursor with hover effects and your theme color. Disabled on mobile.</p>
                    <div class="flex items-center justify-between gap-4 mb-4">
                        <span class="text-sm text-zinc-400">Enable custom cursor</span>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" id="appearance-custom-cursor" name="custom_cursor_enabled" {% if g.user and (g.user.custom_cursor_enabled | default(false)) %}checked{% endif %} class="sr-only peer">
                            <div class="w-11 h-6 bg-zinc-800 rounded-full peer peer-focus:ring-2 peer-focus:ring-blue-500/30 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-zinc-400 after:border-zinc-400 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-500 peer-checked:after:bg-white"></div>
                        </label>
                    </div>
                    <div class="flex flex-wrap gap-2" id="cursor-style-options">
                        {% for style_id, style_label in [('default','Default'),('glow','Glow'),('ring','Ring'),('minimal','Minimal')] %}
                        <button type="button" data-cursor-style="{{ style_id }}" title="{{ style_label }}"
                            class="cursor-style-opt px-4 py-2 rounded-xl border text-sm font-medium transition-all {% if (g.user.custom_cursor_style if g.user and g.user.custom_cursor_style else 'default') == style_id %}border-blue-500/50 bg-blue-500/10 text-white{% else %}border-white/5 text-zinc-400 hover:border-white/20{% endif %}">{{ style_label }}</button>
                        {% endfor %}
                    </div>
                </div>
            </div>
            <div>
                <h4 class="text-sm font-bold text-white mb-4 uppercase tracking-widest text-[10px] text-zinc-500">Interface font</h4>
                <div class="glass-panel p-6 rounded-2xl border border-white/5 bg-white/[0.02]">
                    <p class="text-[10px] text-zinc-500 mb-3 uppercase tracking-widest font-black">UI typeface across the app (headers, body, modals). With System theme, the admin default applies instead.</p>
                    <p id="ui-font-preview-text" class="text-base text-zinc-200 mb-4 px-4 py-4 rounded-xl border border-white/10 bg-black/25 leading-relaxed" style="font-family: var(--ui-font-stack);">The quick brown fox jumps over the lazy dog — 0123456789</p>
                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
                        {% for fid, spec in UI_FONTS.items() %}
                        <button type="button" data-ui-font="{{ fid }}" title="{{ spec.label }}"
                            class="ui-font-opt flex w-full min-h-[3.25rem] items-center justify-center text-center px-3 py-2.5 rounded-xl border text-sm font-medium leading-tight transition-all {% if normalize_ui_font_id(g.user.get('ui_font') if g.user else none) == fid %}border-blue-500/50 bg-blue-500/10 text-white{% else %}border-white/5 text-zinc-400 hover:border-white/20{% endif %}">{{ spec.label }}</button>
                        {% endfor %}
                    </div>
                </div>
            </div>
            </div>
            <div>
                <h4 class="text-sm font-bold text-white mb-4 uppercase tracking-widest text-[10px] text-zinc-500">Billing
                    Preferences</h4>
                <div class="glass-panel p-6 rounded-2xl border border-white/5 bg-white/[0.02]">
                <form id="currency-form" action="{{ url_for('settings.update_currency') }}" method="POST">
                    <label class="block text-sm font-bold text-white mb-2">Preferred Currency</label>
                    <p class="text-[10px] text-zinc-500 mb-4 uppercase tracking-widest font-black">Used for calculating
                        subscription fees based on region.</p>
                    {% set curr = g.user.preferred_currency or 'usd' %}
                    {% set curr_labels = {"usd": "USD ($)", "cad": "CAD ($)", "eur": "EUR (€)", "gbp": "GBP (£)", "aud": "AUD ($)"} %}
                    {{ custom_select(name="currency", id="currency-select", options=[{"value": "usd", "label": "USD ($)"}, {"value": "cad", "label": "CAD ($)"}, {"value": "eur", "label": "EUR (€)"}, {"value": "gbp", "label": "GBP (£)"}, {"value": "aud", "label": "AUD ($)"}], selected_value=curr, selected_label=curr_labels.get(curr, "USD ($)"), mode="form", class="w-full") }}
                </form>
            </div>
            </div>
        </div>
        <div class="p-6 flex-shrink-0 flex items-center justify-end border-t border-white/5">
            <button id="general-settings-close-btn"
                class="glass-button no-hover-lift text-white font-bold py-2 px-6 rounded-xl text-sm">Close</button>
        </div>
    </div>
</div>

<div id="subscriptions-modal" class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-[100] p-4">
    <div class="modal-backdrop fixed inset-0 bg-black/40 modal-transition z-[99]"></div>
    <div
        class="modal-content glass-modal w-full max-w-2xl h-auto max-h-[85vh] flex flex-col modal-content-transition relative z-[100]">
        <div class="p-8 pb-4 flex-shrink-0">
            <h3 class="text-2xl font-bold text-white leading-tight">Your Subscription</h3>
        </div>

        <div class="flex-1 overflow-y-auto px-8 py-4 custom-scrollbar">
            {% if g.user.is_pro %}
            <div class="glass-panel p-6 rounded-2xl border border-purple-500/30 mb-8 bg-purple-500/5">
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center gap-3">
                        <div class="p-2 bg-purple-500/20 rounded-xl">
                            <i data-lucide="sparkles" class="text-purple-400 h-6 w-6"></i>
                        </div>
                        <div>
                            <h4 class="text-xl font-bold text-white">{% if is_gifted %}{{ brand_name }} Pro (Gifted){% else
                                %}{{ brand_name }} Pro{% endif %}</h4>
                            <p class="text-sm text-zinc-400">Active Subscription</p>
                        </div>
                    </div>
                </div>
                {% if pro_since_str %}
                <p class="text-sm text-zinc-300">Pro since: <span class="font-bold text-white">{{ pro_since_str
                        }}</span></p>
                {% endif %}
                {% if next_billing_date %}
                <p class="text-sm text-zinc-300 mt-1"><span id="billing-label-status">{% if is_gifted %}Renewal:{% elif
                        is_canceling %}Ends:{% else %}Next Billing:{% endif %}</span> <span id="billing-date-span"
                        class="font-bold text-white">{{ next_billing_date }}</span></p>
                {% endif %}
            </div>

            {% if not is_gifted %}
            <div id="resume-sub-section"
                class="mt-8 text-right border-t border-white/5 pt-6 {% if not is_canceling %}hidden{% endif %}">
                <p class="text-sm text-zinc-400 mb-4 text-left">Your subscription is set to cancel at the end of the
                    current billing cycle. It will not be renewed.</p>
                <button type="button" onclick="openModalAnimation(document.getElementById('resume-sub-confirm-modal'))"
                    class="glass-button text-green-400 hover:text-green-300 hover:bg-green-500/10 font-bold py-2 px-6 rounded-xl text-sm border-green-500/30 hover:border-green-500/50">Resume
                    Subscription</button>
            </div>

            <div id="cancel-sub-section"
                class="mt-8 text-right border-t border-white/5 pt-6 {% if is_canceling %}hidden{% endif %}">
                <p class="text-sm text-zinc-400 mb-4 text-left">If you cancel, you will keep your Pro benefits
                    until the end of your billing cycle.<br>
                    No refunds will be provided.</p>
                <button type="button" onclick="openModalAnimation(document.getElementById('cancel-sub-confirm-modal'))"
                    class="glass-button no-hover-lift text-red-400 hover:text-red-300 hover:bg-red-500/10 font-bold py-2 px-6 rounded-xl text-sm border-red-500/30 hover:border-red-500/50">Cancel
                    Subscription</button>
            </div>
            {% endif %}

            {% else %}
            <div class="glass-panel p-6 rounded-2xl border border-white/5 mb-8 text-center bg-white/5">
                <div class="mb-4">
                    <div class="inline-flex p-3 bg-white/5 rounded-2xl mb-4 text-zinc-400">
                        <i data-lucide="package" class="h-8 w-8"></i>
                    </div>
                    <h4 class="text-xl font-bold text-white">Standard Tier</h4>
                    <p class="text-sm text-zinc-400 mt-2">You are currently using the limited free tier.</p>
                </div>

                <button type="button"
                    onclick="closeModalAnimation(document.getElementById('subscriptions-modal')); setTimeout(() => openModalAnimation(document.getElementById('upgrade-pro-modal')), 300)"
                    class="join-pro-btn-shine glass-button-primary font-bold py-3 px-8 rounded-xl text-sm transition-all inline-flex items-center justify-center mt-4">
                    <span class="relative z-10 inline-flex items-center gap-2"><i data-lucide="zap" class="h-4 w-4"></i> Explore Pro Benefits</span>
                </button>
            </div>
            {% endif %}
        </div>

        <div class="p-6 flex-shrink-0 flex items-center justify-end border-t border-white/5 mt-auto">
            <button onclick="closeModalAnimation(document.getElementById('subscriptions-modal'))"
                class="glass-button no-hover-lift text-white font-bold py-2 px-6 rounded-xl text-sm">Close</button>
        </div>
    </div>
</div>

{# Usage Modal #}
<div id="usage-modal" class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-[100] p-4">
    <div class="modal-backdrop fixed inset-0 bg-black/40 modal-transition z-[99]"></div>
    <div
        class="modal-content glass-modal w-full max-w-lg h-auto max-h-[85vh] flex flex-col modal-content-transition relative z-[100]">
        <div class="p-8 pb-4 flex-shrink-0">
            <h3 class="text-2xl font-bold text-white leading-tight">Usage</h3>
            <p class="text-sm text-zinc-500">Your account resource usage and limits.</p>
        </div>
        <div class="flex-1 overflow-y-auto px-8 py-4 custom-scrollbar">
            <div id="usage-display" class="space-y-6">
                <div class="flex items-center justify-center py-12">
                    <span class="inline-flex items-center gap-2 text-zinc-500">
                        <i data-lucide="loader-2" class="h-5 w-5 animate-spin"></i>
                        Loading...
                    </span>
                </div>
            </div>
        </div>
        <div class="p-6 flex-shrink-0 flex justify-end border-t border-white/5">
            <button onclick="closeModalAnimation(document.getElementById('usage-modal'))"
                class="glass-button no-hover-lift text-white font-bold py-2 px-6 rounded-xl text-sm">Close</button>
        </div>
    </div>
</div>

{# SSH keys modal #}
<div id="ssh-keys-modal" class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-[100] p-4">
    <div class="modal-backdrop fixed inset-0 bg-black/40 modal-transition z-[99]" id="ssh-keys-backdrop"></div>
    <div
        class="modal-content glass-modal w-full max-w-lg h-auto max-h-[85vh] flex flex-col modal-content-transition relative z-[100]">
        <div class="p-8 pb-4 flex-shrink-0">
            <h3 class="text-2xl font-bold text-white leading-tight">SSH keys</h3>
            <p class="text-sm text-zinc-500">Used to authenticate <code class="text-zinc-400">git push</code> / <code class="text-zinc-400">git pull</code> when your admin enables Git over SSH. Paste your public key (e.g. <code class="text-zinc-400">id_ed25519.pub</code>).</p>
        </div>
        <div class="flex-1 overflow-y-auto px-8 py-4 custom-scrollbar space-y-4">
            <div class="glass-panel p-4 rounded-xl border border-white/5 space-y-3">
                <label class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold">Title</label>
                <input type="text" id="ssh-key-title" maxlength="128" placeholder="Work laptop"
                    class="w-full bg-white/[0.05] border border-white/10 rounded-xl px-4 py-2.5 text-sm text-white">
                <div class="mt-8 pt-2 space-y-2 border-t border-white/5">
                    <div class="flex items-center justify-between gap-2 flex-wrap">
                        <label class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold">Public key</label>
                        <button type="button" id="open-ssh-key-help-btn"
                            class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-[10px] font-bold uppercase tracking-wider text-zinc-400 hover:text-white bg-white/5 hover:bg-white/10 border border-white/10 transition-colors">
                            <i data-lucide="info" class="h-3.5 w-3.5 shrink-0"></i>
                            How to get your key
                        </button>
                    </div>
                    <textarea id="ssh-key-public" rows="3" placeholder="ssh-ed25519 AAAA... comment"
                        class="w-full bg-white/[0.05] border border-white/10 rounded-xl px-4 py-2.5 text-sm text-white font-mono"></textarea>
                </div>
                <button type="button" id="ssh-key-add-btn"
                    class="glass-button-primary w-full py-2.5 rounded-xl text-sm font-bold text-white">Add key</button>
                <p id="ssh-key-form-error" class="text-sm text-red-400 hidden"></p>
            </div>
            <div>
                <h4 class="text-xs font-bold text-zinc-500 uppercase tracking-widest mb-2">Your keys</h4>
                <ul id="ssh-keys-list" class="space-y-2"></ul>
                <p id="ssh-keys-empty" class="text-sm text-zinc-500 py-4">No keys yet.</p>
            </div>
        </div>
        <div class="p-6 flex-shrink-0 flex justify-end border-t border-white/5">
            <button type="button" id="ssh-keys-close-btn"
                class="glass-button no-hover-lift text-white font-bold py-2 px-6 rounded-xl text-sm">Close</button>
        </div>
    </div>
</div>

{# SSH public key help — stacked above ssh-keys-modal so content is not clipped #}
<div id="ssh-key-help-modal" class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-[130] p-4">
    <div class="modal-backdrop fixed inset-0 bg-black/50 modal-transition z-[129]" id="ssh-key-help-backdrop"></div>
    <div
        class="modal-content glass-modal w-full max-w-md max-h-[90vh] flex flex-col modal-content-transition relative z-[130] border border-white/10 shadow-2xl">
        <div class="p-6 pb-4 flex-shrink-0 border-b border-white/5 flex items-start justify-between gap-3">
            <div>
                <h4 class="text-lg font-bold text-white">How to get your public key</h4>
                <p class="text-xs text-zinc-500 mt-1">You can select and copy any command below.</p>
            </div>
            <button type="button" id="ssh-key-help-close-x"
                class="p-2 rounded-lg text-zinc-500 hover:text-white hover:bg-white/10 shrink-0" aria-label="Close">
                <i data-lucide="x" class="h-5 w-5"></i>
            </button>
        </div>
        <div class="flex-1 overflow-y-auto px-6 py-4 custom-scrollbar select-text text-sm text-zinc-300 space-y-4">
            <div>
                <p class="text-xs font-bold text-zinc-500 uppercase tracking-widest mb-2">Already have a key</p>
                <p class="text-zinc-400 mb-2">In a terminal (Mac, Linux, or WSL), show the public key file:</p>
                <pre class="text-xs font-mono text-emerald-300/90 bg-black/40 border border-white/10 rounded-xl p-3 overflow-x-auto whitespace-pre-wrap break-all">cat ~/.ssh/id_ed25519.pub</pre>
                <p class="text-zinc-500 text-xs mt-2">Or for RSA:</p>
                <pre class="text-xs font-mono text-emerald-300/90 bg-black/40 border border-white/10 rounded-xl p-3 overflow-x-auto whitespace-pre-wrap break-all">cat ~/.ssh/id_rsa.pub</pre>
            </div>
            <div>
                <p class="text-xs font-bold text-zinc-500 uppercase tracking-widest mb-2">Create a new key</p>
                <pre class="text-xs font-mono text-emerald-300/90 bg-black/40 border border-white/10 rounded-xl p-3 overflow-x-auto whitespace-pre-wrap break-all">ssh-keygen -t ed25519 -C "you@example.com"</pre>
                <p class="text-zinc-400 text-xs mt-2">Then open the <code class="text-zinc-300">.pub</code> file it creates (same <code class="text-zinc-300">cat</code> commands as above).</p>
            </div>
            <div class="rounded-xl bg-amber-500/10 border border-amber-500/20 p-3 text-xs text-amber-200/90">
                <strong class="text-amber-100">Important:</strong> Paste only the <strong>single line</strong> that starts with
                <code class="text-amber-200">ssh-ed25519</code> or <code class="text-amber-200">ssh-rsa</code>.
                Never paste your <strong>private</strong> key (the file without <code class="text-amber-200">.pub</code>).
            </div>
        </div>
        <div class="p-4 flex-shrink-0 flex justify-end border-t border-white/5">
            <button type="button" id="ssh-key-help-close-btn"
                class="glass-button-primary px-6 py-2.5 rounded-xl text-sm font-bold text-white">Got it</button>
        </div>
    </div>
</div>

<!-- Cancel Subscription Confirmation Modal -->
<div id="cancel-sub-confirm-modal"
    class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-[200] p-4">
    <div class="modal-backdrop fixed inset-0 bg-black/60 modal-transition z-[199]"
        onclick="closeModalAnimation(document.getElementById('cancel-sub-confirm-modal'))"></div>
    <div
        class="modal-content glass-modal modal-radius-lg shadow-3xl p-8 w-full max-w-sm border border-white/10 modal-content-transition relative z-[200]">
        <div class="flex flex-col items-center text-center">
            <div class="p-4 bg-red-500/10 rounded-2xl border border-red-500/20 mb-6">
                <i data-lucide="alert-triangle" class="h-8 w-8 text-red-500"></i>
            </div>
            <h3 class="text-xl font-bold mb-3 text-white">Cancel Subscription?</h3>
            <p class="text-sm text-zinc-400 leading-relaxed mb-8">Are you sure you want to cancel your {{ brand_name }} Pro
                subscription? You will keep your Pro benefits until the end of your billing cycle.</p>
        </div>
        <div class="flex flex-col gap-3">
            <button id="confirm-cancel-sub-btn"
                class="glass-button-primary bg-gradient-to-r from-red-600 to-red-500 hover:from-red-500 hover:to-red-400 border-none w-full py-4 rounded-2xl font-bold text-sm shadow-xl shadow-red-500/20 text-white">
                Yes, cancel
            </button>
            <button onclick="closeModalAnimation(document.getElementById('cancel-sub-confirm-modal'))"
                class="glass-button no-hover-lift w-full py-4 rounded-2xl font-bold text-sm text-zinc-400 hover:text-white">
                Nevermind
            </button>
        </div>
    </div>
</div>

<!-- Resume Subscription Confirmation Modal -->
<div id="resume-sub-confirm-modal"
    class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-[200] p-4">
    <div class="modal-backdrop fixed inset-0 bg-black/60 modal-transition z-[199]"
        onclick="closeModalAnimation(document.getElementById('resume-sub-confirm-modal'))"></div>
    <div
        class="modal-content glass-modal modal-radius-lg shadow-3xl p-8 w-full max-w-sm border border-white/10 modal-content-transition relative z-[200]">
        <div class="flex flex-col items-center text-center">
            <div class="p-4 bg-green-500/10 rounded-2xl border border-green-500/20 mb-6">
                <i data-lucide="zap" class="h-8 w-8 text-green-500"></i>
            </div>
            <h3 class="text-xl font-bold mb-3 text-white">Resume Subscription?</h3>
            <p class="text-sm text-zinc-400 leading-relaxed mb-8">Are you sure you want to resume your {{ brand_name }} Pro
                subscription? Your billing will continue as normal.</p>
        </div>
        <div class="flex flex-col gap-3">
            <button id="confirm-resume-sub-btn"
                class="glass-button-primary bg-gradient-to-r from-green-600 to-green-500 hover:from-green-500 hover:to-green-400 border-none w-full py-4 rounded-2xl font-bold text-sm shadow-xl shadow-green-500/20 text-white">
                Yes, resume
            </button>
            <button onclick="closeModalAnimation(document.getElementById('resume-sub-confirm-modal'))"
                class="glass-button no-hover-lift w-full py-4 rounded-2xl font-bold text-sm text-zinc-400 hover:text-white">
                Nevermind
            </button>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="https://js.stripe.com/v3/"></script>
<script>
    (function initSettings() {
        const generalModal = document.getElementById('general-settings-modal');
        const subscriptionsModal = document.getElementById('subscriptions-modal');
        const usageModal = document.getElementById('usage-modal');

        let generalSettingsInitial = {};
        function captureGeneralSettingsInitial() {
            const bg = document.getElementById('background-input')?.value;
            const blur = parseFloat(document.getElementById('appearance-blur-slider')?.value || 12);
            const opacity = parseFloat(document.getElementById('appearance-opacity-slider')?.value || 0.7);
            const radius = parseFloat(document.getElementById('appearance-radius-slider')?.value || 1);
            const mutedMode = document.getElementById('appearance-muted-text-mode')?.value || '';
            const mutedHex = document.getElementById('appearance-muted-text-custom')?.value || '';
            const headerMode = document.getElementById('appearance-header-color-mode')?.value || '';
            const headerHex = document.getElementById('appearance-header-color-custom')?.value || '';
            const neutral = neutralPresetValue;
            const cursorOn = document.getElementById('appearance-custom-cursor')?.checked ?? false;
            const cursorStyle = cursorStyleValue;
            const currency = document.querySelector('#currency-form select[name="currency"]')?.value;
            const uiFont = uiFontValue;
            generalSettingsInitial = { bg, blur, opacity, radius, mutedMode, mutedHex, headerMode, headerHex, neutral, cursorOn, cursorStyle, currency, uiFont };
        }
        function hasPendingGeneralChanges() {
            const currency = document.querySelector('#currency-form select[name="currency"]')?.value;
            if (document.getElementById('appearance-follow-system')?.checked) {
                return generalSettingsInitial.currency !== currency;
            }
            const bg = document.getElementById('background-input')?.value;
            const blur = parseFloat(document.getElementById('appearance-blur-slider')?.value || 12);
            const opacity = parseFloat(document.getElementById('appearance-opacity-slider')?.value || 0.7);
            const radius = parseFloat(document.getElementById('appearance-radius-slider')?.value || 1);
            const mutedMode = document.getElementById('appearance-muted-text-mode')?.value || '';
            const mutedHex = document.getElementById('appearance-muted-text-custom')?.value || '';
            const headerMode = document.getElementById('appearance-header-color-mode')?.value || '';
            const headerHex = document.getElementById('appearance-header-color-custom')?.value || '';
            const neutral = neutralPresetValue;
            const cursorOn = document.getElementById('appearance-custom-cursor')?.checked ?? false;
            const cursorStyle = cursorStyleValue;
            return generalSettingsInitial.bg !== bg || generalSettingsInitial.blur !== blur || generalSettingsInitial.opacity !== opacity ||
                generalSettingsInitial.radius !== radius || generalSettingsInitial.mutedMode !== mutedMode || generalSettingsInitial.mutedHex !== mutedHex ||
                generalSettingsInitial.headerMode !== headerMode || generalSettingsInitial.headerHex !== headerHex ||
                generalSettingsInitial.neutral !== neutral || generalSettingsInitial.cursorOn !== cursorOn || generalSettingsInitial.cursorStyle !== cursorStyle ||
                generalSettingsInitial.uiFont !== uiFontValue || generalSettingsInitial.currency !== currency;
        }
        function updateGeneralSettingsButtonText() {
            const btn = document.getElementById('general-settings-close-btn');
            if (btn) btn.textContent = hasPendingGeneralChanges() ? 'Save' : 'Close';
        }

        document.getElementById('open-general-settings').addEventListener('click', () => {
            openModalAnimation(generalModal);
            if (typeof syncGlassSlidersFromStorage === 'function') syncGlassSlidersFromStorage();
            setTimeout(() => {
                captureGeneralSettingsInitial();
                applyMutedAndHeaderPreview();
                if (typeof window.applyUiFontPreview === 'function') window.applyUiFontPreview(uiFontValue);
                updateGeneralSettingsButtonText();
            }, 50);
        });

        async function closeGeneralSettingsModal() {
            await saveGeneralSettings();
            captureGeneralSettingsInitial();
            updateGeneralSettingsButtonText();
            closeModalAnimation(generalModal);
        }
        document.getElementById('general-settings-close-btn').addEventListener('click', closeGeneralSettingsModal);
        document.getElementById('general-settings-backdrop').addEventListener('click', closeGeneralSettingsModal);

        document.getElementById('open-subscriptions').addEventListener('click', () => {
            openModalAnimation(subscriptionsModal);
        });

        document.getElementById('open-usage').addEventListener('click', () => {
            openModalAnimation(usageModal);
            const usageEl = document.getElementById('usage-display');
            usageEl.innerHTML = '<div class="flex items-center justify-center py-12"><span class="inline-flex items-center gap-2 text-zinc-500"><i data-lucide="loader-2" class="h-5 w-5 animate-spin"></i> Loading...</span></div>';
            if (window.lucide) window.lucide.createIcons();
            Promise.all([
                fetch("{{ url_for('settings.storage_usage') }}").then(r => r.json()),
                fetch("/shells/api/usage").then(r => r.json()).catch(() => ({ shells_used: 0, shells_max: 0 }))
            ]).then(([usage, shells]) => {
                const u = usage;
                const s = shells;
                usageEl.innerHTML = `
                    <div class="glass-panel p-6 rounded-2xl border border-white/5 mb-4">
                        <h4 class="text-sm font-bold text-white mb-4">Repositories</h4>
                        <p class="text-lg font-bold text-white">${u.repos_used} / ${u.repos_max} <span class="text-zinc-500 font-normal text-sm">used</span></p>
                        <p class="text-sm text-zinc-400 mt-2">${u.public_repos} public, ${u.private_repos} private</p>
                    </div>
                    <div class="glass-panel p-6 rounded-2xl border border-white/5 mb-4">
                        <h4 class="text-sm font-bold text-white mb-4">Credits</h4>
                        <p class="text-lg font-bold text-white">${u.credits} / ${u.credits_max} <span class="text-zinc-500 font-normal text-sm">max stack</span></p>
                    </div>
                    <div class="glass-panel p-6 rounded-2xl border border-white/5 mb-4">
                        <h4 class="text-sm font-bold text-white mb-4">Shells</h4>
                        <p class="text-lg font-bold text-white">${s.shells_used || 0} / ${s.shells_max || 0} <span class="text-zinc-500 font-normal text-sm">concurrent</span></p>
                    </div>
                    <div class="glass-panel p-6 rounded-2xl border border-white/5">
                        <h4 class="text-sm font-bold text-white mb-4">Storage</h4>
                        <p class="text-lg font-bold text-white">${u.total_mb} MB / ${u.limit_gb} GB <span class="text-zinc-500 font-normal text-sm">max</span></p>
                        <p class="text-[10px] text-zinc-500 mt-2 uppercase tracking-widest font-black">Across all your repositories</p>
                    </div>
                `;
                if (window.lucide) window.lucide.createIcons();
            }).catch(() => {
                usageEl.innerHTML = '<p class="text-zinc-500 text-center py-8">Unable to load usage data.</p>';
            });
        });

        const sshKeysModal = document.getElementById('ssh-keys-modal');
        const sshKeysList = document.getElementById('ssh-keys-list');
        const sshKeysEmpty = document.getElementById('ssh-keys-empty');
        const sshKeyFormErr = document.getElementById('ssh-key-form-error');

        async function loadSshKeys() {
            if (!sshKeysList) return;
            sshKeysList.innerHTML = '';
            try {
                const r = await fetch("{{ url_for('settings.list_ssh_keys') }}", { headers: { 'X-Requested-With': 'XMLHttpRequest' } });
                const data = await r.json();
                const keys = data.keys || [];
                sshKeysEmpty.classList.toggle('hidden', keys.length > 0);
                keys.forEach(k => {
                    const li = document.createElement('li');
                    li.className = 'flex items-center justify-between gap-2 glass-panel px-4 py-3 rounded-xl border border-white/5';
                    li.innerHTML = `<div class="min-w-0"><p class="text-sm font-medium text-white truncate">${(k.title || '').replace(/</g, '&lt;')}</p><p class="text-xs text-zinc-500 font-mono truncate">${(k.fingerprint_short || '').replace(/</g, '&lt;')}</p></div>
                        <button type="button" data-del="${k.id}" class="shrink-0 glass-button px-3 py-1.5 rounded-lg text-xs text-red-400 hover:bg-red-500/10">Remove</button>`;
                    sshKeysList.appendChild(li);
                });
                sshKeysList.querySelectorAll('[data-del]').forEach(btn => {
                    btn.addEventListener('click', async () => {
                        const id = btn.getAttribute('data-del');
                        const res = await fetch("{{ url_for('settings.list_ssh_keys') }}" + '/' + id, { method: 'DELETE', headers: { 'X-Requested-With': 'XMLHttpRequest' } });
                        const j = await res.json().catch(() => ({}));
                        if (j.success) loadSshKeys();
                    });
                });
                if (window.lucide) window.lucide.createIcons();
            } catch (e) {
                sshKeysEmpty.textContent = 'Could not load keys.';
                sshKeysEmpty.classList.remove('hidden');
            }
        }

        document.getElementById('open-ssh-keys')?.addEventListener('click', () => {
            openModalAnimation(sshKeysModal);
            if (window.lucide) window.lucide.createIcons();
            sshKeyFormErr.classList.add('hidden');
            document.getElementById('ssh-key-title').value = '';
            document.getElementById('ssh-key-public').value = '';
            loadSshKeys();
        });
        const sshKeyHelpModal = document.getElementById('ssh-key-help-modal');
        function closeSshKeysModal() {
            if (sshKeyHelpModal) closeModalAnimation(sshKeyHelpModal);
            closeModalAnimation(sshKeysModal);
        }
        document.getElementById('ssh-keys-close-btn')?.addEventListener('click', closeSshKeysModal);
        document.getElementById('ssh-keys-backdrop')?.addEventListener('click', closeSshKeysModal);

        document.getElementById('open-ssh-key-help-btn')?.addEventListener('click', () => {
            if (!sshKeyHelpModal) return;
            openModalAnimation(sshKeyHelpModal);
            if (window.lucide) window.lucide.createIcons();
        });
        document.getElementById('ssh-key-help-close-btn')?.addEventListener('click', () => sshKeyHelpModal && closeModalAnimation(sshKeyHelpModal));
        document.getElementById('ssh-key-help-close-x')?.addEventListener('click', () => sshKeyHelpModal && closeModalAnimation(sshKeyHelpModal));
        document.getElementById('ssh-key-help-backdrop')?.addEventListener('click', () => sshKeyHelpModal && closeModalAnimation(sshKeyHelpModal));

        document.getElementById('ssh-key-add-btn')?.addEventListener('click', async () => {
            sshKeyFormErr.classList.add('hidden');
            const title = document.getElementById('ssh-key-title').value.trim();
            const public_key = document.getElementById('ssh-key-public').value.trim();
            const res = await fetch("{{ url_for('settings.list_ssh_keys') }}", {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                body: JSON.stringify({ title, public_key })
            });
            const j = await res.json().catch(() => ({}));
            if (!j.success) {
                sshKeyFormErr.textContent = j.error || 'Failed to add key';
                sshKeyFormErr.classList.remove('hidden');
                return;
            }
            document.getElementById('ssh-key-public').value = '';
            loadSshKeys();
        });

        document.getElementById('open-terms').addEventListener('click', () => {
            if (window.openTermsModal) window.openTermsModal(true);
        });

        // Background picker - update hidden input and selected state
        const bgInput = document.getElementById('background-input');
        document.querySelectorAll('.bg-picker-opt').forEach(btn => {
            btn.addEventListener('click', () => {
                const bg = btn.dataset.bg;
                if (!bgInput || !bg) return;
                bgInput.value = bg;
                document.querySelectorAll('.bg-picker-opt').forEach(b => {
                    b.classList.remove('border-blue-500/50', 'bg-blue-500/10', 'text-white');
                    b.classList.add('border-white/5', 'text-zinc-400');
                });
                btn.classList.remove('border-white/5', 'text-zinc-400');
                btn.classList.add('border-blue-500/50', 'bg-blue-500/10', 'text-white');
                updateGeneralSettingsButtonText();
            });
        });

        // Appearance sliders - live preview + value display. Theme RGB for real-time color preset.
        const themeRgb = { red:[239,68,68], orange:[249,115,22], amber:[245,158,11], yellow:[234,179,8], lime:[132,204,22], green:[34,197,94], emerald:[16,185,129], teal:[20,184,166], cyan:[6,182,212], sky:[14,165,233], blue:[59,130,246], indigo:[99,102,241], violet:[139,92,246], purple:[168,85,247], fuchsia:[217,70,239], pink:[236,72,153], rose:[244,63,94], slate:[100,116,139], gray:[107,114,128], neutral:[115,115,115], stone:[120,113,108], taupe:[120,113,108], mauve:[121,105,123], mist:[100,123,147], olive:[120,123,106] };
        const opacitySlider = document.getElementById('appearance-opacity-slider');
        const blurSlider = document.getElementById('appearance-blur-slider');
        const radiusSlider = document.getElementById('appearance-radius-slider');
        let neutralPresetValue = '{{ (g.user.neutral_preset if g.user and g.user.neutral_preset else "zinc") | e }}';
        let cursorStyleValue = '{{ (g.user.custom_cursor_style if g.user and g.user.custom_cursor_style else "default") | e }}';
        let uiFontValue = '{{ normalize_ui_font_id(g.user.get("ui_font") if g.user else none) | e }}';

        const appearanceFollowSystemEl = document.getElementById('appearance-follow-system');
        appearanceFollowSystemEl?.addEventListener('change', async function() {
            const follow = this.checked;
            try {
                const res = await fetch("{{ url_for('settings.update_appearance_follow') }}", {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                    body: JSON.stringify({ follow_system: follow })
                });
                const data = await res.json().catch(() => ({}));
                if (res.ok && data.success) {
                    window.location.reload();
                    return;
                }
                this.checked = !follow;
                if (window.createToast) window.createToast(Date.now(), 'Theme', data.error || 'Could not update theme preference.', false);
            } catch (e) {
                this.checked = !follow;
                if (window.createToast) window.createToast(Date.now(), 'Theme', 'Network error.', false);
            }
        });

        function applyAppearancePreview(blur, opacity, radius, preset, mutedMode, mutedHex, headerMode, headerHex) {
            if (blur != null) document.documentElement.style.setProperty('--glass-blur', blur + 'px');
            if (opacity != null) document.documentElement.style.setProperty('--glass-opacity', opacity);
            if (radius != null) document.documentElement.style.setProperty('--radius-scale', radius);
            if (preset !== undefined) {
                document.documentElement.setAttribute('data-neutral', preset);
                const rgb = preset && preset !== 'zinc' && themeRgb[preset];
                if (rgb) {
                    document.documentElement.style.setProperty('--theme-r', rgb[0]);
                    document.documentElement.style.setProperty('--theme-g', rgb[1]);
                    document.documentElement.style.setProperty('--theme-b', rgb[2]);
                } else {
                    document.documentElement.style.setProperty('--theme-r', '255');
                    document.documentElement.style.setProperty('--theme-g', '255');
                    document.documentElement.style.setProperty('--theme-b', '255');
                }
            }
            if (mutedMode !== undefined) {
                document.documentElement.removeAttribute('data-accent-text');
                document.documentElement.removeAttribute('data-muted-text');
                document.documentElement.style.removeProperty('--muted-text-color');
                if (mutedMode === 'preset') document.documentElement.setAttribute('data-accent-text', 'true');
                else if (mutedMode === 'light' || mutedMode === 'dark' || mutedMode === 'custom') {
                    document.documentElement.setAttribute('data-muted-text', mutedMode);
                    if (mutedMode === 'custom' && mutedHex) document.documentElement.style.setProperty('--muted-text-color', mutedHex);
                }
            }
            if (headerMode !== undefined) {
                document.documentElement.removeAttribute('data-header-color');
                document.documentElement.style.removeProperty('--header-color');
                if (headerMode === 'preset' || headerMode === 'light' || headerMode === 'dark' || headerMode === 'custom') {
                    document.documentElement.setAttribute('data-header-color', headerMode);
                    if (headerMode === 'custom' && headerHex) document.documentElement.style.setProperty('--header-color', headerHex);
                }
            }
        }
        function applyMutedAndHeaderPreview() {
            const mutedMode = document.getElementById('appearance-muted-text-mode')?.value || '';
            const mutedHex = document.getElementById('appearance-muted-text-custom')?.value || '#a1a1aa';
            const headerMode = document.getElementById('appearance-header-color-mode')?.value || '';
            const headerHex = document.getElementById('appearance-header-color-custom')?.value || '#ffffff';
            applyAppearancePreview(null, null, null, undefined, mutedMode, mutedHex, headerMode, headerHex);
        }

        function updateSliderFill(el) {
            const min = parseFloat(el.min) || 0;
            const max = parseFloat(el.max) || 1;
            const val = parseFloat(el.value) || min;
            const pct = ((val - min) / (max - min)) * 100;
            el.style.setProperty('--slider-pct', pct + '%');
        }
        [opacitySlider, blurSlider, radiusSlider].filter(Boolean).forEach(el => {
            const key = el.name === 'glass_opacity' ? 'opacity' : el.name === 'glass_blur' ? 'blur' : 'radius';
            const valueEl = document.getElementById('appearance-' + key + '-value');
            updateSliderFill(el);
            if (valueEl) valueEl.textContent = el.value;
            el.addEventListener('input', () => {
                const v = parseFloat(el.value);
                updateSliderFill(el);
                if (valueEl) valueEl.textContent = v;
                if (el.name === 'glass_blur') applyAppearancePreview(v, null, null, undefined, undefined, undefined, undefined, undefined);
                else if (el.name === 'glass_opacity') applyAppearancePreview(null, v, null, undefined, undefined, undefined, undefined, undefined);
                else if (el.name === 'radius_scale') applyAppearancePreview(null, null, v, undefined, undefined, undefined, undefined, undefined);
                updateGeneralSettingsButtonText();
            });
        });

        document.getElementById('appearance-muted-text-mode')?.addEventListener('change', () => {
            const mode = document.getElementById('appearance-muted-text-mode').value;
            document.getElementById('muted-text-custom-wrap').classList.toggle('hidden', mode !== 'custom');
            applyMutedAndHeaderPreview();
            updateGeneralSettingsButtonText();
        });
        document.getElementById('appearance-muted-text-custom')?.addEventListener('input', () => { applyMutedAndHeaderPreview(); updateGeneralSettingsButtonText(); });
        document.getElementById('appearance-header-color-mode')?.addEventListener('change', () => {
            const mode = document.getElementById('appearance-header-color-mode').value;
            document.getElementById('header-color-custom-wrap').classList.toggle('hidden', mode !== 'custom');
            applyMutedAndHeaderPreview();
            updateGeneralSettingsButtonText();
        });
        document.getElementById('appearance-header-color-custom')?.addEventListener('input', () => { applyMutedAndHeaderPreview(); updateGeneralSettingsButtonText(); });

        document.getElementById('appearance-custom-cursor')?.addEventListener('change', async function() {
            const enabled = this.checked;
            if (typeof window.setCustomCursorEnabled === 'function') window.setCustomCursorEnabled(enabled);
            updateGeneralSettingsButtonText();
            const mutedMode = document.getElementById('appearance-muted-text-mode')?.value || '';
            const mutedHex = document.getElementById('appearance-muted-text-custom')?.value || '';
            const headerMode = document.getElementById('appearance-header-color-mode')?.value || '';
            const headerHex = document.getElementById('appearance-header-color-custom')?.value || '';
            await fetch("{{ url_for('settings.update_appearance') }}", {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                body: JSON.stringify({
                    glass_blur: parseFloat(blurSlider?.value || 12),
                    glass_opacity: parseFloat(opacitySlider?.value || 0.7),
                    radius_scale: parseFloat(radiusSlider?.value || 1),
                    neutral_preset: neutralPresetValue,
                    muted_text_mode: mutedMode || null,
                    muted_text_custom_hex: mutedMode === 'custom' ? mutedHex : null,
                    header_color_mode: headerMode || null,
                    header_custom_hex: headerMode === 'custom' ? headerHex : null,
                    custom_cursor_enabled: enabled,
                    custom_cursor_style: cursorStyleValue,
                    ui_font: uiFontValue
                })
            });
            captureGeneralSettingsInitial();
            updateGeneralSettingsButtonText();
        });

        document.querySelectorAll('.neutral-preset-opt').forEach(btn => {
            btn.addEventListener('click', () => {
                const preset = btn.dataset.neutral;
                if (!preset) return;
                neutralPresetValue = preset;
                document.querySelectorAll('.neutral-preset-opt').forEach(b => {
                    b.classList.remove('border-white', 'ring-2', 'ring-blue-500/50', 'ring-offset-2', 'ring-offset-zinc-900');
                    b.classList.add('border-white/10');
                });
                btn.classList.remove('border-white/10');
                btn.classList.add('border-white', 'ring-2', 'ring-blue-500/50', 'ring-offset-2', 'ring-offset-zinc-900');
                applyAppearancePreview(null, null, null, preset, undefined, undefined, undefined, undefined);
                applyMutedAndHeaderPreview();
                updateGeneralSettingsButtonText();
            });
        });

        document.querySelectorAll('.cursor-style-opt').forEach(btn => {
            btn.addEventListener('click', () => {
                const style = btn.dataset.cursorStyle;
                if (!style) return;
                cursorStyleValue = style;
                document.querySelectorAll('.cursor-style-opt').forEach(b => {
                    b.classList.remove('border-blue-500/50', 'bg-blue-500/10', 'text-white');
                    b.classList.add('border-white/5', 'text-zinc-400');
                });
                btn.classList.remove('border-white/5', 'text-zinc-400');
                btn.classList.add('border-blue-500/50', 'bg-blue-500/10', 'text-white');
                if (typeof window.updateCustomCursorStyle === 'function') window.updateCustomCursorStyle(style);
                updateGeneralSettingsButtonText();
            });
        });

        document.querySelectorAll('.ui-font-opt').forEach(btn => {
            btn.addEventListener('click', () => {
                const fid = btn.dataset.uiFont;
                if (!fid) return;
                uiFontValue = fid;
                document.querySelectorAll('.ui-font-opt').forEach(b => {
                    b.classList.remove('border-blue-500/50', 'bg-blue-500/10', 'text-white');
                    b.classList.add('border-white/5', 'text-zinc-400');
                });
                btn.classList.remove('border-white/5', 'text-zinc-400');
                btn.classList.add('border-blue-500/50', 'bg-blue-500/10', 'text-white');
                if (typeof window.applyUiFontPreview === 'function') window.applyUiFontPreview(fid);
                updateGeneralSettingsButtonText();
            });
        });

        document.querySelector('#currency-form select[name="currency"]')?.addEventListener('change', updateGeneralSettingsButtonText);

        async function saveGeneralSettings() {
            const followSystem = document.getElementById('appearance-follow-system')?.checked;
            if (!followSystem) {
                const blur = parseFloat(blurSlider?.value || 12);
                const opacity = parseFloat(opacitySlider?.value || 0.7);
                const radius = parseFloat(radiusSlider?.value || 1);
                const mutedMode = document.getElementById('appearance-muted-text-mode')?.value || '';
                const mutedHex = document.getElementById('appearance-muted-text-custom')?.value || '';
                const headerMode = document.getElementById('appearance-header-color-mode')?.value || '';
                const headerHex = document.getElementById('appearance-header-color-custom')?.value || '';
                const cursorEnabled = document.getElementById('appearance-custom-cursor')?.checked ?? false;
                await fetch("{{ url_for('settings.update_appearance') }}", {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                    body: JSON.stringify({
                        glass_blur: blur,
                        glass_opacity: opacity,
                        radius_scale: radius,
                        neutral_preset: neutralPresetValue,
                        muted_text_mode: mutedMode || null,
                        muted_text_custom_hex: mutedMode === 'custom' ? mutedHex : null,
                        header_color_mode: headerMode || null,
                        header_custom_hex: headerMode === 'custom' ? headerHex : null,
                        custom_cursor_enabled: cursorEnabled,
                        custom_cursor_style: cursorStyleValue,
                        ui_font: uiFontValue
                    })
                });
                if (typeof window.setCustomCursorEnabled === 'function') window.setCustomCursorEnabled(cursorEnabled);
                const bgInput = document.getElementById('background-input');
                if (bgInput) {
                    await fetch("{{ url_for('settings.update_background') }}", {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                        body: JSON.stringify({ background: bgInput.value })
                    });
                }
            }
            const currForm = document.getElementById('currency-form');
            if (currForm) {
                const formData = new FormData(currForm);
                await fetch("{{ url_for('settings.update_currency') }}", { method: 'POST', body: formData });
            }
        }

        // Join Pro btn moved to a generic upgrade_pro_modal.html
        // The event listener is part of that global modal script now.

        /* Auto open subscriptions if there's a checkout session or ?open=subscriptions */
        const urlParams = new URLSearchParams(window.location.search);
        if (urlParams.has('session_id') || urlParams.get('open') === 'subscriptions') {
            setTimeout(() => {
                openModalAnimation(subscriptionsModal);
            }, 300);

            // Remove from URL to avoid repeating on refresh
            const newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname;
            window.history.pushState({ path: newUrl }, '', newUrl);
        }

        const confirmResumeSubBtn = document.getElementById('confirm-resume-sub-btn');
        if (confirmResumeSubBtn) {
            confirmResumeSubBtn.addEventListener('click', async () => {
                const originalText = confirmResumeSubBtn.innerHTML;
                confirmResumeSubBtn.disabled = true;
                confirmResumeSubBtn.innerHTML = '<span class="flex items-center justify-center gap-2"><i data-lucide="loader-2" class="animate-spin h-5 w-5"></i> Resuming...</span>';
                if (window.lucide) { lucide.createIcons(); }

                try {
                    const res = await fetch("{{ url_for('settings.resume_subscription') }}", {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({})
                    });
                    const data = await res.json();

                    if (data.success) {
                        closeModalAnimation(document.getElementById('resume-sub-confirm-modal'));

                        document.getElementById('resume-sub-section')?.classList.add('hidden');
                        document.getElementById('cancel-sub-section')?.classList.remove('hidden');

                        const lbl = document.getElementById('billing-label-status');
                        if (lbl) lbl.innerText = "Next Billing:";

                        if (window.createToast) {
                            createToast(Date.now(), 'Success', data.message, true);
                        }
                    } else {
                        if (window.createToast) { createToast(Date.now(), 'Error', data.error || 'Failed to resume subscription.', false); }
                    }
                } catch (e) {
                    if (window.createToast) { createToast(Date.now(), 'Error', 'Network error. Please try again.', false); }
                } finally {
                    confirmResumeSubBtn.disabled = false;
                    confirmResumeSubBtn.innerHTML = originalText;
                }
            });
        }

        const confirmCancelSubBtn = document.getElementById('confirm-cancel-sub-btn');
        if (confirmCancelSubBtn) {
            confirmCancelSubBtn.addEventListener('click', async () => {
                const originalText = confirmCancelSubBtn.innerHTML;
                confirmCancelSubBtn.disabled = true;
                confirmCancelSubBtn.innerHTML = '<span class="flex items-center justify-center gap-2"><i data-lucide="loader-2" class="animate-spin h-5 w-5"></i> Canceling...</span>';
                if (window.lucide) { lucide.createIcons(); }

                try {
                    const res = await fetch("{{ url_for('settings.cancel_subscription') }}", {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({})
                    });
                    const data = await res.json();

                    if (data.success) {
                        closeModalAnimation(document.getElementById('cancel-sub-confirm-modal'));

                        document.getElementById('cancel-sub-section')?.classList.add('hidden');
                        document.getElementById('resume-sub-section')?.classList.remove('hidden');

                        const lbl = document.getElementById('billing-label-status');
                        if (lbl) lbl.innerText = "Ends:";

                        if (window.createToast) {
                            createToast(Date.now(), 'Success', data.message, true);
                        }
                    } else {
                        if (window.createToast) { createToast(Date.now(), 'Error', data.error || 'Failed to cancel subscription.', false); }
                    }
                } catch (e) {
                    if (window.createToast) { createToast(Date.now(), 'Error', 'Network error. Please try again.', false); }
                } finally {
                    confirmCancelSubBtn.disabled = false;
                    confirmCancelSubBtn.innerHTML = originalText;
                }
            });
        }

        // Asynchronous loading for accurate Stripe subscription status
        {% if g.user and g.user.is_pro and g.user.stripe_subscription_id and not is_gifted %}
        fetch("{{ url_for('settings.subscription_status') }}")
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    const lbl = document.getElementById('billing-label-status');
                    const dateSpn = document.getElementById('billing-date-span');

                    if (data.is_canceling) {
                        if (lbl) lbl.innerText = "Ends:";
                        document.getElementById('cancel-sub-section')?.classList.add('hidden');
                        document.getElementById('resume-sub-section')?.classList.remove('hidden');
                    } else {
                        if (lbl) lbl.innerText = "Next Billing:";
                        document.getElementById('cancel-sub-section')?.classList.remove('hidden');
                        document.getElementById('resume-sub-section')?.classList.add('hidden');
                    }

                    if (data.next_billing_date && dateSpn) {
                        dateSpn.innerText = data.next_billing_date;
                    }
                } else {
                    const dateSpn = document.getElementById('billing-date-span');
                    if (dateSpn) dateSpn.innerText = "{{ next_billing_date }}";
                }
            })
            .catch(err => {
                console.error("Failed to fetch subscription status:", err);
                const dateSpn = document.getElementById('billing-date-span');
                if (dateSpn) dateSpn.innerText = "{{ next_billing_date }}";
            });
        {% else %}
        const dateSpn = document.getElementById('billing-date-span');
        if (dateSpn) dateSpn.innerText = "{{ next_billing_date }}";
        {% endif %}
    })();
</script>
{% endblock %}