<!-- Settings Modal -->
<div id="settings-modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="settings-modal-title">
    <div class="modal-content" style="max-width: 520px;">
        <div class="modal-header">
            <h2 id="settings-modal-title" data-i18n="settings.title">Settings</h2>
            <button class="modal-close-btn" onclick="closeSettingsModal()" title="Close" data-i18n-aria-label="aria.close">&#x2715;</button>
        </div>

        <!-- Tab bar -->
        <div class="settings-tab-bar">
            <button class="settings-tab-btn active" data-settings-tab="general" onclick="switchSettingsTab('general')" data-i18n="settings.tab.general">General</button>
            <button class="settings-tab-btn" data-settings-tab="backup" onclick="switchSettingsTab('backup')" data-i18n="settings.tab.backup">Backup</button>
            <button class="settings-tab-btn" data-settings-tab="appearance" onclick="switchSettingsTab('appearance')" data-i18n="settings.tab.appearance">Appearance</button>
            <button class="settings-tab-btn" data-settings-tab="updates" onclick="switchSettingsTab('updates')" data-i18n="settings.tab.updates">Updates</button>
            <button class="settings-tab-btn" data-settings-tab="about" onclick="switchSettingsTab('about')" data-i18n="settings.tab.about">About</button>
        </div>

        <div class="modal-body">
            <!-- ═══ General tab ═══ -->
            <div id="settings-panel-general" class="settings-panel active">
                <!-- API Keys section (read-only) -->
                <div class="form-group">
                    <div class="label-row">
                        <label data-i18n="settings.api_keys.label">API Keys</label>
                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
                    </div>
                    <small class="input-hint" style="display:none" data-i18n="settings.api_keys.hint">API keys are defined in the server config file (config.yaml). Restart the server after editing the file to apply changes.</small>
                    <div id="settings-api-keys-list" style="font-size:0.85rem;"></div>
                </div>

                <!-- External URL -->
                <div class="form-group">
                    <div class="label-row">
                        <label data-i18n="settings.external_url.label">External URL</label>
                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
                    </div>
                    <small class="input-hint" style="display:none" data-i18n="settings.external_url.hint">If set, this base URL is used in webhook URLs and other user-visible links instead of the auto-detected local IP. Example: https://myserver.example.com:8080</small>
                    <div style="display:flex;gap:0.5rem;">
                        <input type="text" id="settings-external-url" placeholder="https://myserver.example.com:8080" style="flex:1" data-i18n-placeholder="settings.external_url.placeholder">
                        <button class="btn btn-icon btn-primary" onclick="saveExternalUrl()" title="Save" data-i18n-title="settings.external_url.save"><svg class="icon" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg></button>
                    </div>
                </div>

                <!-- Log Level section -->
                <div class="form-group">
                    <div class="label-row">
                        <label data-i18n="settings.log_level.label">Log Level</label>
                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
                    </div>
                    <small class="input-hint" style="display:none" data-i18n="settings.log_level.hint">Change the server log verbosity at runtime. DEBUG shows the most detail; CRITICAL shows only fatal errors.</small>
                    <select id="settings-log-level">
                        <option value="DEBUG">DEBUG</option>
                        <option value="INFO">INFO</option>
                        <option value="WARNING">WARNING</option>
                        <option value="ERROR">ERROR</option>
                        <option value="CRITICAL">CRITICAL</option>
                    </select>
                </div>

                <!-- Server Logs button (opens overlay) -->
                <div class="form-group">
                    <div class="label-row">
                        <label data-i18n="settings.logs.label">Server Logs</label>
                    </div>
                    <button class="btn btn-secondary" onclick="openLogOverlay()" style="width:100%" data-i18n="settings.logs.open_viewer">Open Log Viewer</button>
                </div>

                <!-- Restart section -->
                <div class="form-group">
                    <div class="label-row">
                        <label data-i18n="settings.restart_server">Restart Server</label>
                    </div>
                    <button class="btn btn-secondary" onclick="restartServer()" style="width:100%" data-i18n="settings.restart_server">Restart Server</button>
                </div>
            </div>

            <!-- ═══ Backup tab ═══ -->
            <div id="settings-panel-backup" class="settings-panel">
                <!-- Backup section -->
                <div class="form-group">
                    <div class="label-row">
                        <label data-i18n="settings.backup.label">Backup Configuration</label>
                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
                    </div>
                    <small class="input-hint" style="display:none" data-i18n="settings.backup.hint">Download all configuration (devices, targets, streams, templates, automations) as a single JSON file.</small>
                    <button class="btn btn-primary" onclick="downloadBackup()" style="width:100%" data-i18n="settings.backup.button">Download Backup</button>
                </div>

                <!-- Restore section -->
                <div class="form-group">
                    <div class="label-row">
                        <label data-i18n="settings.restore.label">Restore Configuration</label>
                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
                    </div>
                    <small class="input-hint" style="display:none" data-i18n="settings.restore.hint">Upload a previously downloaded backup file to replace all configuration. The server will restart automatically.</small>
                    <input type="file" id="settings-restore-input" accept=".db" style="display:none" onchange="handleRestoreFileSelected(this)">
                    <button class="btn btn-danger" onclick="document.getElementById('settings-restore-input').click()" style="width:100%" data-i18n="settings.restore.button">Restore from Backup</button>
                </div>

                <!-- Partial Export/Import section -->
                <!-- Auto-Backup section -->
                <div class="form-group">
                    <div class="label-row">
                        <label data-i18n="settings.auto_backup.label">Auto-Backup</label>
                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
                    </div>
                    <small class="input-hint" style="display:none" data-i18n="settings.auto_backup.hint">Automatically create periodic backups of all configuration. Old backups are pruned when the maximum count is reached.</small>

                    <div style="display:flex; align-items:center; gap:0.5rem; margin-bottom:0.5rem;">
                        <input type="checkbox" id="auto-backup-enabled">
                        <label for="auto-backup-enabled" style="margin:0" data-i18n="settings.auto_backup.enable">Enable auto-backup</label>
                    </div>

                    <div style="display:flex; gap:0.5rem; margin-bottom:0.5rem;">
                        <div style="flex:1">
                            <label for="auto-backup-interval" style="font-size:0.85rem" data-i18n="settings.auto_backup.interval_label">Interval</label>
                            <select id="auto-backup-interval" style="width:100%">
                                <option value="1">1h</option>
                                <option value="6">6h</option>
                                <option value="12">12h</option>
                                <option value="24">24h</option>
                                <option value="48">48h</option>
                                <option value="168">7d</option>
                            </select>
                        </div>
                        <div style="flex:1">
                            <label for="auto-backup-max" style="font-size:0.85rem" data-i18n="settings.auto_backup.max_label">Max backups</label>
                            <input type="number" id="auto-backup-max" min="1" max="100" value="10" style="width:100%">
                        </div>
                    </div>

                    <div style="display:flex; gap:0.5rem;">
                        <button class="btn btn-primary" onclick="saveAutoBackupSettings()" style="flex:1" data-i18n="settings.auto_backup.save">Save Settings</button>
                        <button class="btn btn-secondary" onclick="triggerBackupNow()" style="flex:1" data-i18n="settings.auto_backup.backup_now">Backup Now</button>
                    </div>

                    <div id="auto-backup-status" style="font-size:0.85rem; color:var(--text-muted); margin-top:0.5rem;"></div>
                </div>

                <!-- Saved Backups section -->
                <div class="form-group">
                    <div class="label-row">
                        <label data-i18n="settings.saved_backups.label">Saved Backups</label>
                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
                    </div>
                    <small class="input-hint" style="display:none" data-i18n="settings.saved_backups.hint">Auto-backup files stored on the server. Download to save locally, or delete to free space.</small>
                    <div id="saved-backups-list"></div>
                </div>
            </div>

            <!-- ═══ Appearance tab ═══ -->
            <div id="settings-panel-appearance" class="settings-panel">
                <!-- Rendered dynamically by renderAppearanceTab() -->
            </div>

            <!-- ═══ Updates tab ═══ -->
            <div id="settings-panel-updates" class="settings-panel">
                <!-- Current version + status -->
                <div class="form-group">
                    <div class="label-row">
                        <label data-i18n="update.status_label">Update Status</label>
                    </div>
                    <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem;">
                        <span data-i18n="update.current_version">Current version:</span>
                        <strong id="update-current-version"></strong>
                    </div>
                    <div id="update-status-text" style="font-size:0.9rem;font-weight:600;margin-bottom:0.5rem;"></div>
                    <div id="update-last-check" style="font-size:0.85rem;color:var(--text-muted);margin-bottom:0.3rem;"></div>
                    <div style="font-size:0.85rem;color:var(--text-muted);margin-bottom:0.75rem;">
                        <span data-i18n="update.install_type_label">Install type:</span>
                        <span id="update-install-type"></span>
                    </div>

                    <!-- Download progress bar -->
                    <div style="display:none;margin-bottom:0.5rem;height:4px;background:var(--border-color);border-radius:2px;overflow:hidden;">
                        <div id="update-progress-bar" style="width:0%;height:100%;background:var(--primary-color);transition:width 0.3s;"></div>
                    </div>

                    <div style="display:flex;gap:0.5rem;">
                        <button id="update-check-btn" class="btn btn-secondary" onclick="checkForUpdates()" style="flex:1">
                            <span data-i18n="update.check_now">Check for Updates</span>
                            <span id="update-check-spinner" class="spinner-inline" style="display:none"></span>
                        </button>
                        <button id="update-apply-btn" class="btn btn-primary" onclick="applyUpdate()" style="flex:1;display:none" data-i18n="update.apply_now">Update Now</button>
                    </div>
                </div>

                <!-- Release notes button -->
                <div class="form-group" id="update-release-notes-group" style="display:none">
                    <button class="btn btn-secondary" onclick="openReleaseNotes()" style="width:100%" data-i18n="update.view_release_notes">View Release Notes</button>
                </div>

                <!-- Settings -->
                <div class="form-group">
                    <div class="label-row">
                        <label data-i18n="update.auto_check_label">Auto-Check Settings</label>
                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
                    </div>
                    <small class="input-hint" style="display:none" data-i18n="update.auto_check_hint">Periodically check for new releases in the background.</small>

                    <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem;">
                        <input type="checkbox" id="update-enabled">
                        <label for="update-enabled" style="margin:0" data-i18n="update.enable">Enable auto-check</label>
                    </div>

                    <div style="display:flex;gap:0.5rem;margin-bottom:0.5rem;">
                        <div style="flex:1">
                            <label for="update-interval" style="font-size:0.85rem" data-i18n="update.interval_label">Check interval</label>
                            <select id="update-interval" style="width:100%">
                                <option value="1">1h</option>
                                <option value="6">6h</option>
                                <option value="12">12h</option>
                                <option value="24">24h</option>
                                <option value="48">48h</option>
                                <option value="168">7d</option>
                            </select>
                        </div>
                        <div style="flex:1">
                            <label for="update-channel" style="font-size:0.85rem" data-i18n="update.channel_label">Channel</label>
                            <select id="update-channel">
                                <option value="false">Stable</option>
                                <option value="true">Pre-release</option>
                            </select>
                        </div>
                    </div>

                    <button class="btn btn-primary" onclick="saveUpdateSettings()" style="width:100%" data-i18n="update.save_settings">Save Settings</button>
                </div>
            </div>

            <!-- ═══ About tab ═══ -->
            <div id="settings-panel-about" class="settings-panel">
                <div id="about-panel-content"></div>
            </div>

            <div id="settings-error" class="error-message" style="display:none;"></div>
        </div>
    </div>
</div>

<!-- Log Viewer Overlay (full-screen, independent of settings modal) -->
<div id="log-overlay" class="log-overlay" style="display:none;">
    <button class="log-overlay-close" onclick="closeLogOverlay()" title="Close" data-i18n-aria-label="aria.close">&#x2715;</button>
    <div class="log-overlay-toolbar">
        <h3 data-i18n="settings.logs.label">Server Logs</h3>
        <select id="log-viewer-filter" onchange="applyLogFilter()">
            <option value="all" data-i18n="settings.logs.filter.all">All levels</option>
            <option value="INFO" data-i18n="settings.logs.filter.info">Info+</option>
            <option value="WARNING" data-i18n="settings.logs.filter.warning">Warning+</option>
            <option value="ERROR" data-i18n="settings.logs.filter.error">Error only</option>
        </select>
        <button id="log-viewer-connect-btn" class="btn btn-secondary btn-sm" onclick="connectLogViewer()" data-i18n="settings.logs.connect">Connect</button>
        <button class="btn btn-secondary btn-sm" onclick="clearLogViewer()" data-i18n="settings.logs.clear">Clear</button>
    </div>
    <pre id="log-viewer-output" class="log-viewer-output"></pre>
</div>

<!-- Release Notes Overlay (full-screen, same pattern as log overlay) -->
<div id="release-notes-overlay" class="log-overlay" style="display:none;">
    <button class="log-overlay-close" onclick="closeReleaseNotes()" title="Close" data-i18n-aria-label="aria.close">&#x2715;</button>
    <div class="log-overlay-toolbar">
        <h3 data-i18n="update.release_notes">Release Notes</h3>
    </div>
    <div id="release-notes-content" class="release-notes-content"></div>
</div>
