import { Styles, createElement } from '../ui_styles.js';

export const Settings = {
    init(container) {
        const section = createElement('div', Styles.section);
        section.innerHTML = `<h4 style="${Styles.header}">⚙️ Settings</h4>`;

        const content = createElement('div', Styles.content);

        // Debug Toggle
        const debugRow = createElement('div', Styles.row);
        const debugLabel = createElement('span', '', {}, 'Debug Mode');
        const debugToggle = createElement('input', '', { type: 'checkbox' });

        // Sync with state
        if (window.MagicBot && window.MagicBot.settings) {
            debugToggle.checked = window.MagicBot.settings.debug;
        }

        debugToggle.onchange = (e) => {
            if (window.MagicBot) {
                if (!window.MagicBot.settings) window.MagicBot.settings = {};
                window.MagicBot.settings.debug = e.target.checked;
                console.log(`[MagicBot] Debug Mode: ${e.target.checked ? 'ON' : 'OFF'}`);
            }
        };

        debugRow.appendChild(debugLabel);
        debugRow.appendChild(debugToggle);
        content.appendChild(debugRow);

        section.appendChild(content);
        container.appendChild(section);
    }
};