app/miniApp/settings.js

/**
 * Settings Tab Logic
 * Handles interaction within the Settings tab.
 */

const settingsTab = {
    init: function () {
        console.log("Settings Tab Initialized");
        this.cacheDOM();
        this.bindEvents();
        this.loadPresets();
    },

    cacheDOM: function () {
        this.creativitySlider = document.getElementById('creativity');
        this.creativityValue = document.getElementById('creativity-val');
        this.presetSelect = document.getElementById('preset-select');
        this.presetDesc = document.getElementById('preset-description');
        this.tagsInput = document.getElementById('tags-input');
    },

    bindEvents: function () {
        if (this.creativitySlider) {
            this.creativitySlider.addEventListener('input', (e) => {
                this.creativityValue.textContent = e.target.value;
                // Optional: Save on change
                // this.saveSettings();
            });
            this.creativitySlider.addEventListener('change', () => this.saveSettings());
        }

        if (this.presetSelect) {
            this.presetSelect.addEventListener('change', (e) => {
                this.updateDescription(e.target.value);
                // updateDescription calls saveSettings, so we are good.
            });
        }

        if (this.tagsInput) {
            this.tagsInput.addEventListener('change', () => {
                this.saveSettings();
            });
            // Also save on blur to be safe
            this.tagsInput.addEventListener('blur', () => {
                this.saveSettings();
            });
        }
    },

    loadPresets: function () {
        // Load presets from the shared global variable (loaded via script tag)
        if (typeof window.stylePresets === 'undefined') {
            console.error("Error: stylePresets not loaded. Ensure stylePresets.js is included.");
            this.presetSelect.innerHTML = '<option disabled>Presets not available</option>';
            return;
        }

        const presets = window.stylePresets;

        // Clear existing options
        this.presetSelect.innerHTML = '';

        presets.forEach(preset => {
            const option = document.createElement('option');
            // Using preset_name as value.
            option.value = preset.preset_name;
            option.textContent = preset.preset_name.replace(/_/g, ' '); // Beautify display name
            option.dataset.description = preset.description;
            this.presetSelect.appendChild(option);
        });

        // Trigger change to set initial description
        if (presets.length > 0) {
            this.updateDescription(presets[0].preset_name);
        }
    },

    updateDescription: function (presetId) {
        const selectedOption = this.presetSelect.querySelector(`option[value="${presetId}"]`);
        if (selectedOption) {
            this.presetDesc.value = selectedOption.dataset.description;
            this.saveSettings();
        } else {
            this.presetDesc.value = "";
        }
    },

    saveSettings: function () {
        // Get user ID from Telegram WebApp
        if (!window.Telegram || !window.Telegram.WebApp || !window.Telegram.WebApp.initDataUnsafe.user) {
            console.warn("Settings not saved: Not running inside Telegram or user info missing.");
            return;
        }

        const userId = window.Telegram.WebApp.initDataUnsafe.user.id;

        // Gather all settings from DOM
        const presetName = this.presetSelect.value;
        const creativity = this.creativitySlider.value;
        const tags = this.tagsInput.value;

        console.log(`Saving settings for user ${userId}: Preset=${presetName}, Creativity=${creativity}, Tags=${tags}`);

        fetch('/api/settings', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                userId,
                presetName,
                creativity,
                tags
            })
        })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    console.log("Settings saved successfully");
                } else {
                    console.error("Failed to save settings:", data.error);
                }
            })
            .catch(err => {
                console.error("Error saving settings:", err);
            });
    }
};

// Export for use in app.js if using modules, or just global if simple script inclusion.
// For simple usage without bundlers, we can attach to window or just leave it available.
window.settingsTab = settingsTab;