/**
 * GoingsOn - Settings Module
 * Settings page with sidebar navigation, plugin manager
 */

(function() {
    'use strict';
    const esc = GoingsOn.utils.escapeHtml;
    const escAttr = GoingsOn.utils.escapeAttr;

    let currentSection = 'appearance';

    // ============ Settings Page ============

    /**
     * Open settings as a modeless overlay above the current view. The
     * underlying app stays mounted so theme/notification/account changes
     * preview live against the real surfaces. (Phase 7 Tier 6.)
     */
    async function openSettings() {
        const overlay = document.getElementById('settings-overlay');
        if (!overlay) return;
        overlay.classList.remove('hidden');
        overlay.setAttribute('aria-hidden', 'false');
        document.addEventListener('keydown', handleSettingsKeydown);
        await showSection(currentSection);
    }

    /**
     * Called by navigation.loadViewData when settings view becomes active.
     * Renders the last-active section. Retained for back-compat with any
     * remaining callers; new code should call openSettings.
     */
    async function loadSettings() {
        await showSection(currentSection);
    }

    /**
     * Close the settings overlay. Returns the user to whatever view was
     * underneath — no view switch needed since settings is now an overlay,
     * not a navigated subview.
     */
    function goBack() {
        const overlay = document.getElementById('settings-overlay');
        if (!overlay) return;
        overlay.classList.add('hidden');
        overlay.setAttribute('aria-hidden', 'true');
        document.removeEventListener('keydown', handleSettingsKeydown);
    }

    function handleSettingsKeydown(e) {
        if (e.key !== 'Escape') return;
        const isTyping = ['INPUT', 'TEXTAREA', 'SELECT'].includes(e.target.tagName)
            || e.target.isContentEditable;
        if (isTyping) return;
        goBack();
    }

    /**
     * Show a specific settings section and update sidebar active state.
     * @param {string} section - Section name (appearance, notifications, planning, plugins, sync, data)
     */
    async function showSection(section) {
        currentSection = section;

        // Update sidebar active state
        document.querySelectorAll('.settings-nav-item').forEach(btn => {
            btn.classList.toggle('active', btn.dataset.section === section);
        });

        const container = document.getElementById('settings-content');
        if (!container) return;

        switch (section) {
            case 'appearance': await renderAppearance(container); break;
            case 'notifications': renderNotifications(container); break;
            case 'email': await GoingsOn.emails.renderAccountsSection(container); break;
            case 'planning': renderPlanning(container); break;
            case 'plugins': await renderPlugins(container); break;
            case 'sync': await renderSync(container); break;
            case 'data': await renderData(container); break;
            case 'about': await renderAbout(container); break;
        }
    }

    // ============ Section Renderers ============

    async function renderAppearance(container) {
        const savedTheme = localStorage.getItem('goingson-theme') || 'system';
        const { light: lightThemes, dark: darkThemes, highContrast: highContrastThemes } = await GoingsOn.themes.getByType();

        const highContrastGroup = highContrastThemes.length > 0
            ? `<optgroup label="High Contrast">
                ${highContrastThemes.map(t => `<option value="${t.id}" ${savedTheme === t.id ? 'selected' : ''}>${esc(t.name)}</option>`).join('')}
            </optgroup>`
            : '';

        container.innerHTML = `
            <div class="settings-section">
                <h3 class="settings-heading">Appearance</h3>
                <div class="form-group">
                    <label class="form-label">Theme</label>
                    <select id="theme-selector" class="form-select" onchange="GoingsOn.themes.onChange(this.value)">
                        <optgroup label="System">
                            <option value="system" ${savedTheme === 'system' ? 'selected' : ''}>Follow System</option>
                        </optgroup>
                        <optgroup label="Light Themes">
                            ${lightThemes.map(t => `<option value="${t.id}" ${savedTheme === t.id ? 'selected' : ''}>${esc(t.name)}</option>`).join('')}
                        </optgroup>
                        <optgroup label="Dark Themes">
                            ${darkThemes.map(t => `<option value="${t.id}" ${savedTheme === t.id ? 'selected' : ''}>${esc(t.name)}</option>`).join('')}
                        </optgroup>
                        ${highContrastGroup}
                    </select>
                    <p class="form-hint" style="margin-top: 0.5rem;">Choose a color theme for the interface.</p>
                    <div class="row-flex row-flex-2" style="margin-top: 0.5rem;">
                        <button class="btn btn-small" onclick="GoingsOn.themes.importTheme()">Import Theme</button>
                        <button class="btn btn-small" onclick="GoingsOn.themes.exportTheme()">Export Current</button>
                    </div>
                </div>
            </div>
        `;
    }

    function renderNotifications(container) {
        container.innerHTML = `
            <div class="settings-section">
                <h3 class="settings-heading">Notifications</h3>
                <div class="form-group">
                    <label class="form-label">Event indicator lead time</label>
                    <select id="event-lead-time-selector" class="form-select" onchange="GoingsOn.settings.onEventLeadTimeChange(this.value)">
                        ${[5, 10, 15, 30, 60].map(m => {
                            const currentLead = parseInt(localStorage.getItem('goingson-event-lead-minutes') || '15', 10);
                            const label = m === 60 ? '1 hour' : m + ' minutes';
                            const suffix = m === 15 ? ' (default)' : '';
                            return '<option value="' + m + '"' + (currentLead === m ? ' selected' : '') + '>' + label + suffix + '</option>';
                        }).join('')}
                    </select>
                    <p class="form-hint" style="margin-top: 0.5rem;">How far in advance the Events tab dot turns yellow.</p>
                </div>
            </div>
        `;
    }

    function renderPlanning(container) {
        container.innerHTML = `
            <div class="settings-section">
                <h3 class="settings-heading">Planning & Review</h3>
                <div class="form-group">
                    <label class="form-label">Work hours</label>
                    <div class="work-hours-row">
                        <select class="form-select" onchange="GoingsOn.settings.onWorkHoursChange('start', this.value)">
                            ${buildHourOptions(parseInt(localStorage.getItem('goingson-work-start-hour') || '9', 10))}
                        </select>
                        <span>to</span>
                        <select class="form-select" onchange="GoingsOn.settings.onWorkHoursChange('end', this.value)">
                            ${buildHourOptions(parseInt(localStorage.getItem('goingson-work-end-hour') || '17', 10))}
                        </select>
                    </div>
                    <p class="form-hint" style="margin-top: 0.5rem;">Controls when plan/review nudge dots appear.</p>
                </div>
                <div class="form-group">
                    <label class="form-label">Plan nudges</label>
                    <select class="form-select" onchange="localStorage.setItem('goingson-plan-nudges', this.value)">
                        <option value="enabled" ${localStorage.getItem('goingson-plan-nudges') !== 'disabled' ? 'selected' : ''}>Enabled (default)</option>
                        <option value="disabled" ${localStorage.getItem('goingson-plan-nudges') === 'disabled' ? 'selected' : ''}>Disabled</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">Review nudges</label>
                    <select class="form-select" onchange="localStorage.setItem('goingson-review-nudges', this.value)">
                        <option value="enabled" ${localStorage.getItem('goingson-review-nudges') !== 'disabled' ? 'selected' : ''}>Enabled (default)</option>
                        <option value="disabled" ${localStorage.getItem('goingson-review-nudges') === 'disabled' ? 'selected' : ''}>Disabled</option>
                    </select>
                </div>
            </div>
        `;
    }

    async function renderPlugins(container) {
        let allPlugins = [];
        let enabledPlugins = [];

        try {
            [allPlugins, enabledPlugins] = await Promise.all([
                GoingsOn.api.plugins.listImport(),
                GoingsOn.api.plugins.listEnabled(),
            ]);
        } catch (err) {
            container.innerHTML = `<p class="text-danger">Failed to load plugins: ${esc(GoingsOn.utils.getErrorMessage(err))}</p>`;
            return;
        }

        const enabledIds = new Set(enabledPlugins.map(p => p.id));
        const pluginsList = allPlugins.length === 0
            ? '<p class="empty-italic">No plugins installed. Drop a plugin file into the GoingsOn plugins directory inside your OS app-data location.</p>'
            : allPlugins.map(plugin => renderPluginItem(plugin, enabledIds.has(plugin.id))).join('');

        container.innerHTML = `
            <div class="settings-section">
                <h3 class="settings-heading">Plugins</h3>
                <p class="settings-desc">
                    Plugins extend GoingsOn with support for importing data from various formats.
                </p>
                <div class="plugin-list" id="plugin-list">
                    ${pluginsList}
                </div>
            </div>
        `;
    }

    async function renderSync(container) {
        // Delegate to settings-sync.js which extends GoingsOn.settings
        if (GoingsOn.settings.renderSyncSection) {
            await GoingsOn.settings.renderSyncSection(container);
        } else {
            container.innerHTML = '<p class="text-secondary">Cloud sync module not loaded.</p>';
        }
    }

    async function renderData(container) {
        // Build backup settings inline
        let backupHtml = '';
        try {
            const settings = await GoingsOn.api.export.getBackupSettings();
            const lastBackupText = settings.lastBackupAt
                ? `Last backup: ${new Date(settings.lastBackupAt).toLocaleString()}`
                : 'No backups yet';

            const frequencyOptions = [
                { value: 15, label: 'Every 15 minutes (Recommended)' },
                { value: 30, label: 'Every 30 minutes' },
                { value: 60, label: 'Every hour' },
                { value: 360, label: 'Every 6 hours' },
                { value: 1440, label: 'Daily' },
            ];

            const retentionOptions = [
                { value: 1, label: 'Keep 1 backup (Recommended)' },
                { value: 3, label: 'Keep 3 backups' },
                { value: 7, label: 'Keep 7 backups' },
                { value: 14, label: 'Keep 14 backups' },
                { value: 0, label: 'Keep all backups' },
            ];

            const renderFormField = GoingsOn.ui.renderFormField;
            backupHtml = `
                <div class="settings-section-block">
                    <h4 class="settings-subheading">Backups</h4>
                    <div class="settings-actions-row">
                        <button class="btn btn-secondary" onclick="GoingsOn.export.createBackup()">Create Backup</button>
                        <button class="btn btn-secondary" onclick="GoingsOn.export.openBackupsModal()">Manage Backups</button>
                    </div>

                    <h4 class="settings-subheading">Automatic Backups</h4>
                    <p class="settings-desc-block">
                        Automatic backups protect your data by creating compressed snapshots on a schedule.
                    </p>

                    <div class="form-group">
                        <label class="form-checkbox-label">
                            <input type="checkbox" id="backup-enabled" ${settings.autoBackupEnabled ? 'checked' : ''}>
                            <span>Enable automatic backups</span>
                        </label>
                    </div>
                    ${renderFormField({
                        kind: 'select',
                        name: 'backup-frequency',
                        id: 'backup-frequency',
                        label: 'Backup Frequency',
                        value: settings.backupFrequencyMinutes,
                        options: frequencyOptions.map(o => ({
                            value: String(o.value),
                            label: o.label,
                            selected: settings.backupFrequencyMinutes === o.value,
                        })),
                    })}
                    ${renderFormField({
                        kind: 'select',
                        name: 'backup-retention',
                        id: 'backup-retention',
                        label: 'Retention Policy',
                        value: settings.maxBackupsToKeep,
                        options: retentionOptions.map(o => ({
                            value: String(o.value),
                            label: o.label,
                            selected: settings.maxBackupsToKeep === o.value,
                        })),
                        hint: 'Older backups are automatically deleted to save space.',
                    })}
                    <div class="settings-actions-row settings-actions-row--center">
                        <button class="btn btn-primary" onclick="GoingsOn.export.saveBackupSettings()">Save Backup Settings</button>
                        <span class="settings-status-text">${esc(lastBackupText)}</span>
                    </div>
                </div>
            `;
        } catch (err) {
            backupHtml = `
                <div class="settings-section-block">
                    <h4 class="settings-subheading">Backups</h4>
                    <div class="settings-actions-row">
                        <button class="btn btn-secondary" onclick="GoingsOn.export.createBackup()">Create Backup</button>
                        <button class="btn btn-secondary" onclick="GoingsOn.export.openBackupsModal()">Manage Backups</button>
                    </div>
                </div>
            `;
        }

        container.innerHTML = `
            <div class="settings-section">
                <h3 class="settings-heading">Import & Export</h3>
                <p class="settings-desc">
                    Import data from external sources or export for safekeeping.
                </p>

                <div class="settings-actions-row">
                    <button class="btn btn-secondary" onclick="GoingsOn.importExternal.openDialog();">Import Contacts / Calendar</button>
                    <button class="btn btn-secondary" onclick="GoingsOn.import.openModal();">Import via Plugin</button>
                </div>

                <div class="settings-actions-row">
                    <button class="btn btn-secondary" onclick="GoingsOn.export.exportJSON()">Export All (JSON)</button>
                    <button class="btn btn-secondary" onclick="GoingsOn.export.exportTasksCSV()">Export Tasks (CSV)</button>
                    <button class="btn btn-secondary" onclick="GoingsOn.export.exportEventsICS()">Export Calendar (ICS)</button>
                </div>

                ${backupHtml}
            </div>
        `;
    }

    // ============ About Section ============

    /**
     * Phase 7 Tier 2 #7 — surface the version + support info in Settings rather
     * than only in the one-shot welcome modal. Required for support flows.
     */
    async function setUpdateCheckOnLaunch(enabled) {
        try {
            await GoingsOn.api.preferences.setUpdateCheckOnLaunch(enabled);
            GoingsOn.ui.showToast(enabled ? 'Update checks enabled' : 'Update checks disabled');
        } catch (err) {
            GoingsOn.ui.showToast('Failed to save preference: ' + GoingsOn.utils.getErrorMessage(err), 'error');
        }
    }

    async function renderAbout(container) {
        let appVersion = 'unknown';
        try { appVersion = await window.__TAURI__.app.getVersion(); } catch (_) {}

        const platform = (navigator.userAgentData?.platform || navigator.platform || 'unknown');

        let updateCheckOnLaunch = true;
        try {
            const prefs = await GoingsOn.api.preferences.get();
            updateCheckOnLaunch = prefs.updateCheckOnLaunch !== false;
        } catch (_) {}

        container.innerHTML = `
            <div class="settings-section">
                <h3 class="settings-heading">About GoingsOn</h3>
                <p class="settings-desc">Tasks, email, calendar, contacts.</p>

                <dl class="about-info-list">
                    <dt>Version</dt><dd id="about-app-version">${esc(appVersion)}</dd>
                    <dt>Platform</dt><dd>${esc(platform)}</dd>
                    <dt>Publisher</dt><dd>Make Creative, LLC</dd>
                    <dt>License</dt><dd>PolyForm Noncommercial 1.0.0</dd>
                    <dt>Contact</dt><dd><a href="mailto:info@makenot.work">info@makenot.work</a></dd>
                    <dt>Source</dt><dd><a href="https://makenot.work" target="_blank" rel="noopener">makenot.work</a></dd>
                    <dt>Privacy</dt><dd><a href="https://makenot.work/policy" target="_blank" rel="noopener">makenot.work/policy</a></dd>
                </dl>

                <div class="settings-toggle-row">
                    <div>
                        <p class="settings-subheading">Check for updates on launch</p>
                        <p class="settings-desc">When a new signed release is available, a banner appears in the app. Install is always user-initiated.</p>
                    </div>
                    <label class="toggle-switch">
                        <input type="checkbox" ${updateCheckOnLaunch ? 'checked' : ''}
                            onchange="GoingsOn.settings.setUpdateCheckOnLaunch(this.checked)">
                        <span class="toggle-slider"></span>
                    </label>
                </div>

                <p class="settings-desc-block about-copyright">&copy; 2026 Make Creative, LLC</p>
            </div>
        `;
    }

    // ============ Plugin Item Renderer ============

    function renderPluginItem(plugin, isEnabled) {
        const config = plugin.plugin_type?.import || {};
        const extensions = config.file_extensions || [];
        const entityTypes = config.entity_types || [];

        return `
            <div class="plugin-item" data-plugin-id="${escAttr(plugin.id)}">
                <div class="plugin-info">
                    <span class="plugin-name">${esc(plugin.name)}</span>
                    <span class="plugin-version">v${esc(plugin.version)}</span>
                    <p class="plugin-description">${esc(plugin.description)}</p>
                    <span class="plugin-extensions">
                        Files: .${extensions.join(', .')} | Types: ${entityTypes.join(', ')}
                    </span>
                </div>
                <div class="plugin-actions">
                    <label class="toggle-switch">
                        <input type="checkbox" ${isEnabled ? 'checked' : ''}
                            onchange="GoingsOn.settings.togglePlugin('${escAttr(plugin.id)}', this.checked)">
                        <span class="toggle-slider"></span>
                    </label>
                </div>
            </div>
        `;
    }

    // ============ Plugin Toggle ============

    async function togglePlugin(pluginId, enabled) {
        try {
            if (enabled) {
                await GoingsOn.api.plugins.enable(pluginId);
                GoingsOn.ui.showToast('Plugin enabled');
            } else {
                await GoingsOn.api.plugins.disable(pluginId);
                GoingsOn.ui.showToast('Plugin disabled');
            }
        } catch (err) {
            GoingsOn.ui.showToast('Failed to update plugin: ' + GoingsOn.utils.getErrorMessage(err), 'error');
            // Re-render plugins section to show correct state
            const container = document.getElementById('settings-content');
            if (container) await renderPlugins(container);
        }
    }

    // ============ Helpers ============

    function onEventLeadTimeChange(value) {
        localStorage.setItem('goingson-event-lead-minutes', value);
        if (GoingsOn.events && GoingsOn.events.updateEventStatusDot) {
            GoingsOn.events.updateEventStatusDot();
        }
    }

    function buildHourOptions(selected) {
        let html = '';
        for (let h = 0; h < 24; h++) {
            const label = h === 0 ? '12:00 AM' : h < 12 ? `${h}:00 AM` : h === 12 ? '12:00 PM' : `${h - 12}:00 PM`;
            html += `<option value="${h}" ${h === selected ? 'selected' : ''}>${label}</option>`;
        }
        return html;
    }

    function onWorkHoursChange(which, value) {
        const key = which === 'start' ? 'goingson-work-start-hour' : 'goingson-work-end-hour';
        localStorage.setItem(key, value);
    }

    // ============ Populate GoingsOn Namespace ============

    GoingsOn.settings = {
        open: openSettings,
        load: loadSettings,
        showSection,
        goBack,
        openPluginsModal: () => showSection('plugins'),
        togglePlugin,
        onEventLeadTimeChange,
        onWorkHoursChange,
        setUpdateCheckOnLaunch,
    };

})();