async function renderSettings() {
  const content = document.getElementById('pageContent');
  content.innerHTML = `
    <div class="page-header">
      <div class="page-header-left">
        <h1 class="page-title">Settings</h1>
        <p class="page-subtitle">Configure Agentic OS behavior</p>
      </div>
      <button class="btn btn-primary" onclick="saveAllSettings()">💾 Save All</button>
    </div>
    <div id="settingsForm"><div class="loading"><div class="loading-spinner"></div></div></div>
  `;

  try {
    const settings = await api.getSettings();
    const prefs = settings.agent_preferences || {};
    const dashboard = settings.dashboard || {};
    const limits = settings.free_tier_limits || {};
    const apiKeys = settings.api_keys || {};

    document.getElementById('settingsForm').innerHTML = `
      <div class="card">
        <div class="card-header"><span class="card-title">🤖 Agent Preferences</span></div>
        <div class="grid grid-3">
          ${['opencode', 'hermes', 'agy'].map(a => `
            <div class="card" style="padding:14px">
              <div class="flex items-center gap-2 mb-2">
                <div class="agent-dot ${prefs[a] && prefs[a].enabled !== false ? 'online' : 'offline'}" style="width:10px;height:10px"></div>
                <strong style="font-size:13px">${a}</strong>
              </div>
              <label class="switch" style="margin:8px 0">
                <input type="checkbox" id="agent_${a}" ${prefs[a] && prefs[a].enabled !== false ? 'checked' : ''} onchange="toggleAgent('${a}')">
                <span class="switch-slider"></span>
              </label>
              <div class="form-group" style="margin-bottom:0;margin-top:8px">
                <label class="form-label">Binary Path</label>
                <input id="bin_${a}" class="form-input" value="${escapeHtml((prefs[a] && prefs[a].binary) || a)}" style="font-size:12px">
              </div>
            </div>
          `).join('')}
        </div>
      </div>

      <div class="card">
        <div class="card-header"><span class="card-title">🎨 Dashboard</span></div>
        <div class="form-row">
          <div class="form-group">
            <label class="form-label">Port</label>
            <input id="setPort" class="form-input" type="number" value="${dashboard.port || 8080}">
          </div>
          <div class="form-group">
            <label class="form-label">Host</label>
            <input id="setHost" class="form-input" value="${escapeHtml(dashboard.host || '127.0.0.1')}">
          </div>
        </div>
        <div class="form-group">
          <label class="switch" style="width:auto;display:flex;align-items:center;gap:10px">
            <input type="checkbox" id="setDarkMode" ${dashboard.dark_mode !== false ? 'checked' : ''}>
            <span class="switch-slider" style="position:relative;display:inline-block;width:40px;height:22px"></span>
            <span style="font-size:13px">Dark Mode</span>
          </label>
        </div>
      </div>

      <div class="card">
        <div class="card-header"><span class="card-title">🔑 API Keys</span></div>
        <div class="form-row">
          <div class="form-group">
            <label class="form-label">Gemini API Key</label>
            <input id="keyGemini" class="form-input" type="password" value="${escapeHtml(apiKeys.gemini || '')}" placeholder="Enter Gemini API key">
          </div>
          <div class="form-group">
            <label class="form-label">OpenRouter API Key</label>
            <input id="keyOpenrouter" class="form-input" type="password" value="${escapeHtml(apiKeys.openrouter || '')}" placeholder="Enter OpenRouter API key">
          </div>
        </div>
      </div>

      <div class="card">
        <div class="card-header"><span class="card-title">💰 Free Tier Limits</span></div>
        <div class="form-row">
          <div class="form-group">
            <label class="form-label">Gemini Flash — Requests/Day</label>
            <input id="limGReqs" class="form-input" type="number" value="${(limits.gemini_flash && limits.gemini_flash.requests_per_day) || 1500}">
          </div>
          <div class="form-group">
            <label class="form-label">Gemini Flash — Tokens/Day</label>
            <input id="limGTokens" class="form-input" type="number" value="${(limits.gemini_flash && limits.gemini_flash.tokens_per_day) || 1000000}">
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label class="form-label">OpenRouter Free — Requests/Day</label>
            <input id="limORReqs" class="form-input" type="number" value="${(limits.openrouter_free && limits.openrouter_free.requests_per_day) || 100}">
          </div>
          <div class="form-group">
            <label class="form-label">OpenRouter Free — Tokens/Day</label>
            <input id="limORTokens" class="form-input" type="number" value="${(limits.openrouter_free && limits.openrouter_free.tokens_per_day) || 200000}">
          </div>
        </div>
      </div>

      <div class="card" style="border-color:var(--red)">
        <div class="card-header"><span class="card-title" style="color:var(--red)">⚠ Danger Zone</span></div>
        <p style="font-size:13px;color:var(--text-secondary);margin-bottom:12px">Reset all settings to factory defaults.</p>
        <button class="btn btn-danger" onclick="resetSettings()">Reset to Defaults</button>
      </div>
    `;
  } catch (err) {
    document.getElementById('settingsForm').innerHTML = `<div class="empty-state"><div class="empty-state-icon">⚠</div><div class="empty-state-title">${escapeHtml(err.message)}</div></div>`;
  }
}

function toggleAgent(name) {
  const cb = document.getElementById(`agent_${name}`);
  const card = cb.closest('.card');
  const dot = card.querySelector('.agent-dot');
  dot.className = `agent-dot ${cb.checked ? 'online' : 'offline'}`;
}

async function saveAllSettings() {
  try {
    const settings = {
      agent_preferences: {
        opencode: { enabled: document.getElementById('agent_opencode').checked, binary: document.getElementById('bin_opencode').value },
        hermes: { enabled: document.getElementById('agent_hermes').checked, binary: document.getElementById('bin_hermes').value },
        agy: { enabled: document.getElementById('agent_agy').checked, binary: document.getElementById('bin_agy').value },
      },
      dashboard: {
        port: parseInt(document.getElementById('setPort').value) || 8080,
        host: document.getElementById('setHost').value || '127.0.0.1',
        dark_mode: document.getElementById('setDarkMode').checked,
      },
      api_keys: {
        gemini: document.getElementById('keyGemini').value,
        openrouter: document.getElementById('keyOpenrouter').value,
      },
      free_tier_limits: {
        gemini_flash: {
          requests_per_day: parseInt(document.getElementById('limGReqs').value) || 1500,
          tokens_per_day: parseInt(document.getElementById('limGTokens').value) || 1000000,
        },
        openrouter_free: {
          requests_per_day: parseInt(document.getElementById('limORReqs').value) || 100,
          tokens_per_day: parseInt(document.getElementById('limORTokens').value) || 200000,
        },
      },
    };
    await api.updateSettings(settings);
    showToast('Settings saved successfully', 'success');
  } catch (err) {
    showToast(`Error: ${err.message}`, 'error');
  }
}

async function resetSettings() {
  showModal('Reset to Defaults', `
    <div class="card" style="background:var(--red-dim);border-color:transparent">
      <div class="flex items-center gap-2"><span style="font-size:18px">⚠</span><div><strong style="font-size:13px">Warning</strong><div style="font-size:12px;color:var(--text-secondary);margin-top:2px">This will reset all settings to factory defaults and cannot be undone.</div></div></div>
    </div>
  `, `
    <button class="btn btn-ghost" onclick="closeModal()">Cancel</button>
    <button class="btn btn-danger" onclick="confirmReset()">Reset</button>
  `);
}

async function confirmReset() {
  const defaults = {
    theme: 'dark',
    agent_preferences: { opencode: { enabled: true, binary: 'opencode' }, hermes: { enabled: true, binary: 'hermes' }, agy: { enabled: true, binary: 'agy' } },
    dashboard: { port: 8080, host: '127.0.0.1', dark_mode: true },
    api_keys: { gemini: '', openrouter: '' },
    free_tier_limits: { gemini_flash: { requests_per_day: 1500, tokens_per_day: 1000000 }, openrouter_free: { requests_per_day: 100, tokens_per_day: 200000 } },
  };
  try {
    await api.updateSettings(defaults);
    closeModal();
    showToast('Settings reset to defaults', 'success');
    renderSettings();
  } catch (err) {
    showToast(`Error: ${err.message}`, 'error');
  }
}