// SearXNG theme injector - matches home page theme
(function() {
    'use strict';
    
    function getThemeFromCookie() {
        const cookies = document.cookie.split(';');
        for (let cookie of cookies) {
            const [name, value] = cookie.trim().split('=');
            if (name === 'simple_style') {
                return value === 'dark' ? 'dark' : 'light';
            }
        }
        // Check HTML class as fallback
        if (document.documentElement.classList.contains('theme-dark') || 
            document.documentElement.classList.contains('theme-black')) {
            return 'dark';
        }
        return 'light';
    }
    
    function applyTheme(theme) {
        const isDark = theme === 'dark';
        
        const colors = isDark ? {
            bg: '#0C1012',
            bgBody: '#1F282E',
            textPrimary: '#59C99C',
            textSecondary: '#A5A9AB',
            border: '#326B78',
            hover: '#326B78',
            shadow: 'rgba(53, 62, 67, 0.27)'
        } : {
            bg: '#f7f8f7',
            bgBody: '#f7f8f7',
            textPrimary: '#2a3826',
            textSecondary: '#62696D',
            border: '#904b59',
            hover: '#7d9b8f',
            shadow: 'rgba(42, 56, 38, 0.27)'
        };
        
        const styleId = 'fraggle-searxng-theme';
        let style = document.getElementById(styleId);
        if (!style) {
            style = document.createElement('style');
            style.id = styleId;
            document.head.appendChild(style);
        }
        
        style.textContent = `
            body, html { background-color: ${colors.bgBody} !important; color: ${colors.textPrimary} !important; }
            #main_results, #main_index { background-color: ${colors.bgBody} !important; }
            #q, input[type="text"], input[type="search"] { 
                background-color: ${colors.bg} !important; 
                color: ${colors.textPrimary} !important; 
                border: 4px solid ${colors.border} !important; 
                box-shadow: 5px 5px 1px 2px ${colors.shadow} !important; 
                border-radius: 8px !important; 
            }
            #q:focus, input[type="text"]:focus, input[type="search"]:focus { 
                border-color: ${colors.border} !important; 
                outline: none !important; 
            }
            button, input[type="submit"], .btn { 
                background-color: ${colors.bg} !important; 
                color: ${colors.textPrimary} !important; 
                border: 4px solid ${colors.border} !important; 
                box-shadow: 5px 5px 1px 2px ${colors.shadow} !important; 
                border-radius: 8px !important; 
            }
            button:hover, input[type="submit"]:hover, .btn:hover { 
                color: ${colors.hover} !important; 
                border-color: ${colors.hover} !important; 
            }
            a { color: ${colors.textPrimary} !important; }
            a:hover { color: ${colors.hover} !important; }
            a:visited { color: ${colors.textPrimary} !important; }
            .result, .result-default { 
                background-color: ${colors.bg} !important; 
                border: 4px solid ${colors.border} !important; 
                box-shadow: 5px 5px 1px 2px ${colors.shadow} !important; 
                border-radius: 8px !important; 
                color: ${colors.textPrimary} !important; 
            }
            .result:hover { box-shadow: 7px 7px 2px 3px ${colors.shadow} !important; }
            .result h3 a { color: ${colors.textPrimary} !important; }
            .result h3 a:hover { color: ${colors.hover} !important; }
            .result .content { color: ${colors.textPrimary} !important; }
            .result .url { color: ${colors.textSecondary} !important; }
            nav, #links_on_top { background-color: transparent !important; }
            nav a, #links_on_top a { color: ${colors.textPrimary} !important; }
            nav a:hover, #links_on_top a:hover { color: ${colors.hover} !important; }
            fieldset { 
                border: 2px solid ${colors.border} !important; 
                border-radius: 8px !important; 
                background-color: ${colors.bg} !important; 
            }
            legend { color: ${colors.textPrimary} !important; }
            select, input[type="checkbox"] { 
                background-color: ${colors.bg} !important; 
                color: ${colors.textPrimary} !important; 
                border: 2px solid ${colors.border} !important; 
                border-radius: 4px !important;
            }
            h1, h2, h3, h4, h5, h6, p { color: ${colors.textPrimary} !important; }
            .category, .tab { 
                background-color: ${colors.bg} !important; 
                color: ${colors.textPrimary} !important; 
                border: 2px solid ${colors.border} !important; 
                border-radius: 8px !important; 
            }
            .category:hover, .tab:hover, .category.selected, .tab.selected { 
                background-color: ${colors.hover} !important; 
                color: ${colors.bg} !important; 
                border-color: ${colors.hover} !important; 
            }
        `;
    }
    
    // Apply theme immediately
    const theme = getThemeFromCookie();
    applyTheme(theme);
    
    // Watch for cookie changes (when user toggles theme on home page)
    setInterval(function() {
        const newTheme = getThemeFromCookie();
        if (newTheme !== theme) {
            applyTheme(newTheme);
        }
    }, 500);
})();