{% extends "base.html" %}
{% block content %}
<div class="container mx-auto p-4 md:p-8 lg:p-12 relative max-w-7xl">
    <div class="space-y-8 pb-28">
        <div class="min-w-0">
            <div class="flex items-center justify-between gap-4 min-w-0">
                <h1 class="text-3xl font-bold text-white min-w-0 truncate">Admin Settings</h1>
                <div class="flex items-center flex-shrink-0 ml-auto">
                    {% include 'menu_toggle.html' %}
                </div>
            </div>
            <p class="text-slate-500 text-sm mt-1">Configure appearance, search, and monitoring behavior.</p>
        </div>

        <form id="admin-settings-form" method="POST" class="space-y-8" data-settings-form>
            <section class="glass-panel p-8 rounded-3xl space-y-6">
                <h2 class="text-lg font-bold text-white">General</h2>
                <div class="space-y-2">
                    <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">Dashboard Title</label>
                    <input type="text" name="dashboard_title" value="{{ settings.dashboard_title }}"
                        class="w-full bg-slate-900 border border-white/5 rounded-xl px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/30">
                </div>
            </section>

            <section class="glass-panel p-8 rounded-3xl space-y-6">
                <div>
                    <h2 class="text-lg font-bold text-white">Theme</h2>
                    <p class="text-slate-500 text-sm">Choose a color palette for the entire app.</p>
                </div>
                <div id="theme-options-grid" class="theme-options-grid grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
                    {% for theme_id, theme_def in themes.items() %}
                    <label class="theme-option cursor-pointer">
                        <input type="radio" name="theme" value="{{ theme_id }}" class="theme-option-input"
                            data-default-accent="{{ theme_def.default_accent }}"
                            data-default-sites-badge="{{ theme_def.default_sites_badge }}"
                            {% if settings.theme | default('default') == theme_id %}checked{% endif %}>
                        <div class="theme-option-card glass-panel rounded-2xl p-5 border border-white/5 transition-all">
                            <div class="flex items-center justify-between gap-3 mb-3">
                                <span class="text-sm font-bold text-white">{{ theme_def.label }}</span>
                                <span class="theme-option-check w-5 h-5 rounded-full border border-white/20 flex items-center justify-center">
                                    <span class="theme-option-dot w-2.5 h-2.5 rounded-full bg-[var(--color-primary)] opacity-0 transition-opacity"></span>
                                </span>
                            </div>
                            <p class="text-xs text-slate-500 mb-4">{{ theme_def.description }}</p>
                            <div class="flex gap-2">
                                <span class="theme-swatch h-8 flex-1 rounded-lg border border-white/10" style="background: {{ theme_def.vars.color_bg }}"></span>
                                <span class="theme-swatch h-8 flex-1 rounded-lg border border-white/10" style="background: {{ theme_def.vars.color_surface }}"></span>
                                <span class="theme-swatch h-8 w-12 rounded-lg border border-white/10" style="background: {{ theme_def.default_accent }}"></span>
                            </div>
                        </div>
                    </label>
                    {% endfor %}
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 pt-2 border-t border-white/5">
                    <div class="space-y-2">
                        <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">Accent Color</label>
                        <div class="flex gap-3 items-center">
                            <input type="color" id="accent-color-picker" name="accent_color"
                                value="{{ settings.accent_color | default('#ffffff') }}"
                                class="w-12 h-12 rounded-lg border-0 cursor-pointer flex-shrink-0">
                            <input type="text" id="accent-color-text" value="{{ settings.accent_color | default('#ffffff') }}" readonly
                                class="flex-1 bg-slate-900 border border-white/5 rounded-xl px-4 py-3 text-white text-sm font-mono">
                        </div>
                        <p class="text-xs text-slate-500">Buttons, links, and highlights. Switching themes resets this to the theme default.</p>
                    </div>
                    <div class="space-y-2">
                        <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">Sites Badge Color</label>
                        <div class="flex gap-3 items-center">
                            <input type="color" id="sites-badge-color-picker" name="sites_badge_color"
                                value="{{ settings.sites_badge_color | default('#ffffff') }}"
                                class="w-12 h-12 rounded-lg border-0 cursor-pointer flex-shrink-0">
                            <input type="text" id="sites-badge-color-text" value="{{ settings.sites_badge_color | default('#ffffff') }}" readonly
                                class="flex-1 bg-slate-900 border border-white/5 rounded-xl px-4 py-3 text-white text-sm font-mono">
                        </div>
                        <p class="text-xs text-slate-500">Default badge color for new sites and the site count badge. Switching themes resets this to the theme default.</p>
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 pt-2 border-t border-white/5">
                    <div class="space-y-3">
                        <div class="flex items-center justify-between gap-3">
                            <label for="card-opacity-slider" class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">Card Opacity</label>
                            <span id="card-opacity-value" class="text-xs font-mono text-slate-400">{{ settings.card_opacity | default(45) }}%</span>
                        </div>
                        <input type="range" id="card-opacity-slider" name="card_opacity" min="10" max="90" step="1"
                            value="{{ settings.card_opacity | default(45) }}"
                            class="settings-range w-full">
                        <p class="text-xs text-slate-500">How solid dashboard cards, modals, and panels appear.</p>
                    </div>
                    <div class="space-y-3">
                        <div class="flex items-center justify-between gap-3">
                            <label for="card-blur-slider" class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">Card Blur</label>
                            <span id="card-blur-value" class="text-xs font-mono text-slate-400">{{ settings.card_blur | default(8) }}px</span>
                        </div>
                        <input type="range" id="card-blur-slider" name="card_blur" min="0" max="24" step="1"
                            value="{{ settings.card_blur | default(8) }}"
                            class="settings-range w-full">
                        <p class="text-xs text-slate-500">Backdrop blur behind glass cards. Set to 0 for a flat look.</p>
                    </div>
                </div>
                <div class="space-y-3 pt-2 border-t border-white/5">
                    <div>
                        <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">Animated Background</label>
                        <p class="text-xs text-slate-500 mt-1">Accent-colored motion behind the dashboard. Works with every theme and accent.</p>
                    </div>
                    <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5 gap-3">
                        {% for effect_id, effect_def in background_effects.items() %}
                        <label class="bg-effect-option cursor-pointer">
                            <input type="radio" name="background_effect" value="{{ effect_id }}" class="bg-effect-option-input"
                                {% if settings.background_effect | default('none') == effect_id %}checked{% endif %}>
                            <div class="bg-effect-option-card glass-panel rounded-2xl p-4 border border-white/5 transition-all h-full">
                                <div class="flex items-center justify-between gap-2 mb-2">
                                    <span class="text-sm font-bold text-white">{{ effect_def.label }}</span>
                                    <span class="bg-effect-option-check w-4 h-4 rounded-full border border-white/20 flex items-center justify-center">
                                        <span class="bg-effect-option-dot w-2 h-2 rounded-full bg-[var(--color-primary)] opacity-0 transition-opacity"></span>
                                    </span>
                                </div>
                                <p class="text-xs text-slate-500 leading-relaxed">{{ effect_def.description }}</p>
                                <div class="bg-effect-preview mt-3 rounded-lg border border-white/5 overflow-hidden bg-effect-preview--{{ effect_id }}" aria-hidden="true">
                                    <div class="bg-effect-preview-matrix">
                                        <div class="bg-matrix-grid-container">
                                            <div class="bg-matrix-plane">
                                                <div class="bg-matrix-grid"></div>
                                                <div class="bg-matrix-glow"></div>
                                            </div>
                                            <div class="bg-matrix-plane">
                                                <div class="bg-matrix-grid"></div>
                                                <div class="bg-matrix-glow"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="bg-effect-preview-grain">
                                        <div class="bg-grain-wash"></div>
                                    </div>
                                    <div class="bg-effect-preview-shooting-star">
                                        <div class="bg-shooting-stars">
                                            {% for _ in range(8) %}
                                            <span class="bg-shooting-star"></span>
                                            {% endfor %}
                                        </div>
                                    </div>
                                    <span class="bg-effect-preview-orb"></span>
                                    <span class="bg-effect-preview-orb-2"></span>
                                </div>
                            </div>
                        </label>
                        {% endfor %}
                    </div>
                </div>
            </section>

            <section class="glass-panel p-8 rounded-3xl space-y-4">
                <div>
                    <h2 class="text-lg font-bold text-white">Secret Key</h2>
                    <p class="text-[10px] text-slate-500 font-bold uppercase tracking-[0.2em] mt-2">
                        Used for session security.
                        <span class="text-rose-400">Restart required if changed.</span>
                    </p>
                </div>
                <div class="flex items-center gap-3 bg-slate-900 border border-white/5 rounded-xl px-4 py-3">
                    <span id="secret-key-display" class="font-mono text-sm text-slate-400 flex-grow truncate">
                        {{ settings.secret_key[:8] }}...
                    </span>
                    <input type="hidden" name="secret_key" id="secret-key-input" value="{{ settings.secret_key }}">
                    <button type="button" id="generate-secret-btn"
                        class="px-4 py-2 bg-slate-800 text-amber-400 text-[10px] font-bold uppercase tracking-widest hover:bg-slate-700 transition-colors whitespace-nowrap">
                        Generate New
                    </button>
                </div>
            </section>

            <section class="glass-panel p-8 rounded-3xl space-y-6">
                <h2 class="text-lg font-bold text-white">Dashboard Components</h2>
                <p class="text-slate-500 text-sm">Choose which widgets appear on the dashboard. Drag to reorder in edit mode.</p>
                <div class="space-y-4">
                    <label class="settings-toggle">
                        <input type="checkbox" name="search_enabled" {% if settings.search_enabled %}checked{% endif %}>
                        <span class="settings-toggle-track"><span class="settings-toggle-thumb"></span></span>
                        <span class="text-sm text-white font-medium">Web Search</span>
                    </label>
                    <label class="settings-toggle">
                        <input type="checkbox" name="news_enabled" id="news-enabled-toggle" {% if settings.news_enabled %}checked{% endif %}>
                        <span class="settings-toggle-track"><span class="settings-toggle-thumb"></span></span>
                        <span class="text-sm text-white font-medium">Daily News</span>
                    </label>
                    <label class="settings-toggle">
                        <input type="checkbox" name="calendar_enabled" {% if settings.calendar_enabled %}checked{% endif %}>
                        <span class="settings-toggle-track"><span class="settings-toggle-thumb"></span></span>
                        <span class="text-sm text-white font-medium">Calendar</span>
                    </label>
                </div>
            </section>

            <section class="glass-panel p-8 rounded-3xl space-y-6">
                <h2 class="text-lg font-bold text-white">Search</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="space-y-2">
                        <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">Default Search Engine</label>
                        <select name="search_engine" class="w-full bg-slate-900 border border-white/5 rounded-xl px-4 py-3 text-white focus:outline-none">
                            <option value="google" {% if settings.search_engine == 'google' %}selected{% endif %}>Google</option>
                            <option value="duckduckgo" {% if settings.search_engine == 'duckduckgo' %}selected{% endif %}>DuckDuckGo</option>
                            <option value="searxng" {% if settings.search_engine == 'searxng' %}selected{% endif %}>SearXNG (Self-Hosted)</option>
                        </select>
                    </div>
                    <div class="space-y-2">
                        <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">SearXNG URL</label>
                        <input type="url" name="searxng_url" value="{{ settings.searxng_url }}"
                            class="w-full bg-slate-900 border border-white/5 rounded-xl px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/30"
                            placeholder="https://search.example.com">
                        <p class="text-[10px] text-slate-600">Used by Daily News and AI Search when AI is enabled.</p>
                    </div>
                    <div class="space-y-2">
                        <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">AI Search Sources</label>
                        <input type="number" name="ai_search_sources" min="1" max="10" value="{{ settings.ai_search_sources | default(5) }}"
                            class="w-full bg-slate-900 border border-white/5 rounded-xl px-4 py-3 text-white focus:outline-none">
                        <p class="text-[10px] text-slate-600">Web results fetched per search query (default 5).</p>
                    </div>
                    <div class="space-y-2">
                        <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">AI Search Queries (Min)</label>
                        <input type="number" name="ai_search_queries_min" min="1" max="10" value="{{ settings.ai_search_queries_min | default(1) }}"
                            class="w-full bg-slate-900 border border-white/5 rounded-xl px-4 py-3 text-white focus:outline-none">
                        <p class="text-[10px] text-slate-600">Minimum SearXNG searches the AI will run per question.</p>
                    </div>
                    <div class="space-y-2">
                        <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">AI Search Queries (Max)</label>
                        <input type="number" name="ai_search_queries_max" min="1" max="10" value="{{ settings.ai_search_queries_max | default(5) }}"
                            class="w-full bg-slate-900 border border-white/5 rounded-xl px-4 py-3 text-white focus:outline-none">
                        <p class="text-[10px] text-slate-600">Maximum searches for complex questions. The AI picks how many to use within this range.</p>
                    </div>
                    <div class="space-y-2">
                        <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">AI Context Sources (Max)</label>
                        <input type="number" name="ai_search_context_max_sources" min="3" max="20" value="{{ settings.ai_search_context_max_sources | default(10) }}"
                            class="w-full bg-slate-900 border border-white/5 rounded-xl px-4 py-3 text-white focus:outline-none">
                        <p class="text-[10px] text-slate-600">Top sources sent to the model after ranking (default 10). Lower = less noise; higher = more context.</p>
                    </div>
                    <div class="space-y-2">
                        <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">Enrich Top Sources</label>
                        <input type="number" name="ai_search_enrich_top" min="0" max="10" value="{{ settings.ai_search_enrich_top | default(5) }}"
                            class="w-full bg-slate-900 border border-white/5 rounded-xl px-4 py-3 text-white focus:outline-none">
                        <p class="text-[10px] text-slate-600">Fetch full page text for the top N sources (SearXNG snippets are often too short).</p>
                    </div>
                    <div class="space-y-2">
                        <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">Enriched Chars / Source</label>
                        <input type="number" name="ai_search_enrich_chars" min="500" max="8000" value="{{ settings.ai_search_enrich_chars | default(3000) }}"
                            class="w-full bg-slate-900 border border-white/5 rounded-xl px-4 py-3 text-white focus:outline-none">
                        <p class="text-[10px] text-slate-600">How much page text to extract per enriched source (default 3000).</p>
                    </div>
                    <div class="space-y-2">
                        <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">Ollama Context (num_ctx)</label>
                        <input type="number" name="ai_search_num_ctx" min="4096" max="131072" step="1024" value="{{ settings.ai_search_num_ctx | default(16384) }}"
                            class="w-full bg-slate-900 border border-white/5 rounded-xl px-4 py-3 text-white focus:outline-none">
                        <p class="text-[10px] text-slate-600">Model context window for AI Search. Increase if answers truncate (default 16384).</p>
                    </div>
                </div>
            </section>

            <section class="glass-panel p-8 rounded-3xl space-y-6">
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                    <div>
                        <h2 class="text-lg font-bold text-white">AI (Ollama)</h2>
                        <p class="text-slate-500 text-sm">Powers AI Search and Daily News summarization. Disabled by default.</p>
                    </div>
                    <label class="settings-toggle">
                        <input type="checkbox" name="ai_enabled" id="ai-enabled-toggle" {% if settings.ai_enabled %}checked{% endif %}>
                        <span class="settings-toggle-track"><span class="settings-toggle-thumb"></span></span>
                        <span class="text-sm text-white font-medium">Enable AI</span>
                    </label>
                </div>
                <div id="ai-settings-fields" class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="space-y-2">
                        <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">Ollama URL</label>
                        <input type="url" name="ollama_url" value="{{ settings.ollama_url }}"
                            class="w-full bg-slate-900 border border-white/5 rounded-xl px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/30"
                            placeholder="http://127.0.0.1:11434">
                    </div>
                    <div class="space-y-2">
                        <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">Ollama Model</label>
                        <input type="text" name="ollama_model" value="{{ settings.ollama_model }}"
                            class="w-full bg-slate-900 border border-white/5 rounded-xl px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/30"
                            placeholder="lfm2.5:8b">
                    </div>
                </div>
                <div class="flex justify-end">
                    <button type="button" id="test-ollama-btn"
                        class="px-5 py-2.5 bg-slate-800 text-slate-200 text-xs font-bold uppercase tracking-widest hover:bg-slate-700 transition-colors">
                        Test AI Connection
                    </button>
                </div>
            </section>

            <section id="news-settings-section" class="glass-panel p-8 rounded-3xl space-y-6">
                <div>
                    <h2 class="text-lg font-bold text-white">Daily News</h2>
                    <p class="text-slate-500 text-sm">Fetched daily at midnight via SearXNG and summarized with Ollama.</p>
                </div>
                <div class="space-y-2">
                    <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">Topics</label>
                    <p class="text-[10px] text-slate-600">Select one or more. Articles to Fetch applies per topic.</p>
                    <div class="grid grid-cols-2 md:grid-cols-5 gap-3">
                        {% for key, label in news_topics.items() %}
                        <label class="news-topic-option">
                            <input type="checkbox" name="news_topics" value="{{ key }}" {% if key in settings.news_topics %}checked{% endif %}>
                            <span>{{ label }}</span>
                        </label>
                        {% endfor %}
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div class="space-y-2">
                        <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">Articles to Fetch (per topic)</label>
                        <input type="number" name="news_count" min="1" max="20" value="{{ settings.news_count }}"
                            class="w-full bg-slate-900 border border-white/5 rounded-xl px-4 py-3 text-white focus:outline-none">
                    </div>
                    <div class="space-y-2">
                        <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">Delay Between Articles (seconds)</label>
                        <input type="number" name="news_article_delay" min="0" max="86400" value="{{ settings.news_article_delay | default(300) }}"
                            class="w-full bg-slate-900 border border-white/5 rounded-xl px-4 py-3 text-white focus:outline-none">
                        <p class="text-[10px] text-slate-600">Default 300 (5 minutes). Set to 0 for no delay.</p>
                    </div>
                    <div class="space-y-2">
                        <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">Component Height (2–10)</label>
                        <input type="number" name="news_height" min="2" max="10" value="{{ settings.news_height }}"
                            class="w-full bg-slate-900 border border-white/5 rounded-xl px-4 py-3 text-white focus:outline-none">
                        <p class="text-[10px] text-slate-600">Height units — Web Search is 2 units tall.</p>
                    </div>
                </div>
                <div class="flex justify-end">
                    <button type="button" id="fetch-news-btn"
                        class="px-5 py-2.5 accent-btn text-xs font-bold uppercase tracking-widest active:scale-95 transition-all">
                        Fetch News Now
                    </button>
                </div>
            </section>

            <section class="glass-panel p-8 rounded-3xl space-y-6">
                <h2 class="text-lg font-bold text-white">Monitoring</h2>
                <p class="text-slate-500 text-sm">Live checks push over Socket.IO while the dashboard is open. Uptime history is kept for 31 days.</p>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="space-y-2">
                        <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">Check Interval (seconds)</label>
                        <input type="number" name="monitor_interval" min="3" max="300" value="{{ settings.monitor_interval | default(60) }}"
                            class="w-full bg-slate-900 border border-white/5 rounded-xl px-4 py-3 text-white focus:outline-none">
                        <p class="text-[10px] text-slate-600">How often sites are re-checked while the dashboard is open.</p>
                    </div>
                    <div class="space-y-2">
                        <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">Request Timeout (seconds)</label>
                        <input type="number" name="monitor_timeout" min="3" max="60" value="{{ settings.monitor_timeout }}"
                            class="w-full bg-slate-900 border border-white/5 rounded-xl px-4 py-3 text-white focus:outline-none">
                        <p class="text-[10px] text-slate-600">Max wait per site probe — not the refresh interval.</p>
                    </div>
                </div>
            </section>

        </form>
    </div>
</div>
<script src="{{ url_for('static', filename='js/settings-form.js') }}"></script>
<script>
    const accentPicker = document.getElementById('accent-color-picker');
    const accentText = document.getElementById('accent-color-text');
    const sitesBadgePicker = document.getElementById('sites-badge-color-picker');
    const sitesBadgeText = document.getElementById('sites-badge-color-text');

    function syncAccentPreview(color) {
        if (accentPicker) accentPicker.value = color;
        if (accentText) accentText.value = color;
    }

    function syncSitesBadgePreview(color) {
        if (sitesBadgePicker) sitesBadgePicker.value = color;
        if (sitesBadgeText) sitesBadgeText.value = color;
    }

    accentPicker?.addEventListener('input', () => syncAccentPreview(accentPicker.value));
    sitesBadgePicker?.addEventListener('input', () => syncSitesBadgePreview(sitesBadgePicker.value));

    document.querySelectorAll('.theme-option-input').forEach((radio) => {
        radio.addEventListener('change', () => {
            if (!radio.checked) return;
            syncAccentPreview(radio.dataset.defaultAccent || '#ffffff');
            syncSitesBadgePreview(radio.dataset.defaultSitesBadge || '#ffffff');
        });
    });

    const cardOpacitySlider = document.getElementById('card-opacity-slider');
    const cardOpacityValue = document.getElementById('card-opacity-value');
    const cardBlurSlider = document.getElementById('card-blur-slider');
    const cardBlurValue = document.getElementById('card-blur-value');

    function syncGlassPreview() {
        const opacity = cardOpacitySlider?.value ?? '45';
        const blur = cardBlurSlider?.value ?? '8';
        document.documentElement.style.setProperty('--glass-opacity', `${opacity}%`);
        document.documentElement.style.setProperty('--glass-blur', `${blur}px`);
        if (cardOpacityValue) cardOpacityValue.textContent = `${opacity}%`;
        if (cardBlurValue) cardBlurValue.textContent = `${blur}px`;
    }

    cardOpacitySlider?.addEventListener('input', syncGlassPreview);
    cardBlurSlider?.addEventListener('input', syncGlassPreview);

    const BG_EFFECT_CLASSES = ['bg-effect-matrix', 'bg-effect-grain', 'bg-effect-orbs', 'bg-effect-shooting_star'];

    function syncBackgroundEffectPreview(value) {
        document.body.classList.remove(...BG_EFFECT_CLASSES);
        if (value && value !== 'none') {
            document.body.classList.add(`bg-effect-${value}`);
        }
    }

    document.querySelectorAll('.bg-effect-option-input').forEach((radio) => {
        radio.addEventListener('change', () => {
            if (!radio.checked) return;
            syncBackgroundEffectPreview(radio.value);
        });
    });

    function truncateSecret(value) {
        return value && value.length > 8 ? `${value.slice(0, 8)}...` : value;
    }

    function generateTokenHex(bytes = 32) {
        const buffer = new Uint8Array(bytes);
        crypto.getRandomValues(buffer);
        return Array.from(buffer, b => b.toString(16).padStart(2, '0')).join('');
    }

    document.getElementById('generate-secret-btn')?.addEventListener('click', () => {
        const token = generateTokenHex(32);
        const input = document.getElementById('secret-key-input');
        const display = document.getElementById('secret-key-display');
        if (input) {
            input.value = token;
            input.dispatchEvent(new Event('change', { bubbles: true }));
        }
        if (display) display.textContent = truncateSecret(token);
        if (typeof showToast === 'function') {
            showToast('Secret Key', 'New token generated — save your pending changes to apply.');
        }
    });

    function syncNewsSettingsVisibility() {
        const newsOn = document.getElementById('news-enabled-toggle')?.checked;
        const aiOn = document.getElementById('ai-enabled-toggle')?.checked;
        const newsSection = document.getElementById('news-settings-section');
        const aiFields = document.getElementById('ai-settings-fields');
        if (newsSection) newsSection.classList.toggle('opacity-50', !newsOn);
        if (aiFields) aiFields.classList.toggle('opacity-50', !aiOn);
    }

    document.getElementById('news-enabled-toggle')?.addEventListener('change', syncNewsSettingsVisibility);
    document.getElementById('ai-enabled-toggle')?.addEventListener('change', syncNewsSettingsVisibility);
    syncNewsSettingsVisibility();

    function setButtonLoading(btn, loading, label) {
        if (!btn) return;
        btn.disabled = loading;
        btn.textContent = loading ? 'Working…' : label;
        btn.classList.toggle('opacity-60', loading);
        btn.classList.toggle('pointer-events-none', loading);
    }

    document.getElementById('test-ollama-btn')?.addEventListener('click', async () => {
        const btn = document.getElementById('test-ollama-btn');
        setButtonLoading(btn, true, 'Test AI Connection');
        try {
            const res = await fetch('/api/ai/test', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    ollama_url: document.querySelector('input[name="ollama_url"]')?.value?.trim(),
                    ollama_model: document.querySelector('input[name="ollama_model"]')?.value?.trim(),
                }),
            });
            const data = await res.json();
            if (res.ok) {
                showToast('Ollama', data.message || 'Connection successful.');
            } else {
                showToast('Ollama Error', data.error || 'Connection failed.');
            }
        } catch (e) {
            showToast('Ollama Error', 'Could not reach the server.');
        } finally {
            setButtonLoading(btn, false, 'Test AI Connection');
        }
    });

    document.getElementById('fetch-news-btn')?.addEventListener('click', async () => {
        const btn = document.getElementById('fetch-news-btn');
        setButtonLoading(btn, true, 'Fetch News Now');
        try {
            const topics = Array.from(document.querySelectorAll('input[name="news_topics"]:checked')).map(el => el.value);
            if (!topics.length) {
                showToast('News Error', 'Select at least one topic.');
                setButtonLoading(btn, false, 'Fetch News Now');
                return;
            }
            const res = await fetch('/api/news/refresh', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    force: true,
                    searxng_url: document.querySelector('input[name="searxng_url"]')?.value?.trim(),
                    ollama_url: document.querySelector('input[name="ollama_url"]')?.value?.trim(),
                    ollama_model: document.querySelector('input[name="ollama_model"]')?.value?.trim(),
                    news_topics: topics,
                    news_count: Number(document.querySelector('input[name="news_count"]')?.value || 5),
                    news_article_delay: Number(document.querySelector('input[name="news_article_delay"]')?.value || 300),
                }),
            });
            const data = await res.json();
            if (res.ok) {
                const total = data.total || 0;
                const delay = Number(document.querySelector('input[name="news_article_delay"]')?.value || 300);
                const delayLabel = delay === 0
                    ? 'no delay between articles'
                    : `one every ${delay} second${delay === 1 ? '' : 's'}`;
                showToast('Daily News', total
                    ? `Started fetching ${total} article${total === 1 ? '' : 's'} (${delayLabel}).`
                    : 'News fetch started.');
            } else {
                showToast('News Error', data.error || 'Failed to fetch news.');
            }
        } catch (e) {
            showToast('News Error', 'Could not reach the server.');
        } finally {
            setButtonLoading(btn, false, 'Fetch News Now');
        }
    });

</script>
{% endblock %}