frontend/src/views/Settings.vue

<template>
  <div class="settings">
    <!-- Settings Header -->
    <div class="settings-header">
      <h1 class="saap-heading-2">Platform Settings</h1>
      <p class="saap-body text-saap-gray-600">
        Configure your SAAP platform preferences
      </p>
    </div>

    <!-- Settings Sections -->
    <div class="settings-sections space-y-6">
      
      <!-- System Configuration -->
      <div class="settings-section saap-card p-6">
        <h2 class="saap-heading-3 mb-4">System Configuration</h2>
        
        <div class="setting-item">
          <label class="setting-label">Backend URL</label>
          <input 
            v-model="backendUrl"
            type="url"
            class="setting-input"
            placeholder="http://localhost:8000"
          />
          <p class="setting-description">
            SAAP Backend API base URL
          </p>
        </div>

        <div class="setting-item">
          <label class="setting-label">WebSocket URL</label>
          <input 
            v-model="websocketUrl"
            type="url"
            class="setting-input"
            placeholder="ws://localhost:8000/ws"
          />
          <p class="setting-description">
            Real-time updates connection URL
          </p>
        </div>
      </div>

      <!-- Agent Configuration -->
      <div class="settings-section saap-card p-6">
        <h2 class="saap-heading-3 mb-4">Agent Configuration</h2>
        
        <div class="setting-item">
          <label class="setting-label">Default Agent Timeout</label>
          <input 
            v-model="agentTimeout"
            type="number"
            class="setting-input"
            placeholder="30"
          />
          <p class="setting-description">
            Default timeout for agent responses (seconds)
          </p>
        </div>

        <div class="setting-item">
          <label class="setting-label">Auto-refresh Interval</label>
          <input 
            v-model="refreshInterval"
            type="number"
            class="setting-input"
            placeholder="30"
          />
          <p class="setting-description">
            Auto-refresh dashboard every N seconds
          </p>
        </div>
      </div>

      <!-- UI Preferences -->
      <div class="settings-section saap-card p-6">
        <h2 class="saap-heading-3 mb-4">Interface Preferences</h2>
        
        <div class="setting-item">
          <label class="setting-label">Theme</label>
          <select v-model="theme" class="setting-select">
            <option value="light">Light</option>
            <option value="dark">Dark</option>
            <option value="auto">Auto</option>
          </select>
          <p class="setting-description">
            Dashboard color theme
          </p>
        </div>

        <div class="setting-item">
          <div class="checkbox-item">
            <input 
              v-model="enableNotifications"
              type="checkbox"
              id="notifications"
              class="setting-checkbox"
            />
            <label for="notifications" class="checkbox-label">
              Enable Notifications
            </label>
          </div>
          <p class="setting-description">
            Show browser notifications for agent events
          </p>
        </div>
      </div>

      <!-- Actions -->
      <div class="settings-actions">
        <button @click="saveSettings" class="saap-button-primary">
          Save Settings
        </button>
        <button @click="resetSettings" class="saap-button-secondary">
          Reset to Defaults
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// Settings state
const backendUrl = ref('http://localhost:8000')
const websocketUrl = ref('ws://localhost:8000/ws')
const agentTimeout = ref(30)
const refreshInterval = ref(30)
const theme = ref('light')
const enableNotifications = ref(true)

// Load settings from localStorage
const loadSettings = () => {
  const saved = localStorage.getItem('saap-settings')
  if (saved) {
    try {
      const settings = JSON.parse(saved)
      backendUrl.value = settings.backendUrl || backendUrl.value
      websocketUrl.value = settings.websocketUrl || websocketUrl.value
      agentTimeout.value = settings.agentTimeout || agentTimeout.value
      refreshInterval.value = settings.refreshInterval || refreshInterval.value
      theme.value = settings.theme || theme.value
      enableNotifications.value = settings.enableNotifications ?? enableNotifications.value
    } catch (error) {
      console.error('Failed to load settings:', error)
    }
  }
}

// Save settings to localStorage
const saveSettings = () => {
  const settings = {
    backendUrl: backendUrl.value,
    websocketUrl: websocketUrl.value,
    agentTimeout: agentTimeout.value,
    refreshInterval: refreshInterval.value,
    theme: theme.value,
    enableNotifications: enableNotifications.value
  }
  
  localStorage.setItem('saap-settings', JSON.stringify(settings))
  
  // Show success notification (simple alert for now)
  alert('Settings saved successfully!')
}

// Reset settings to defaults
const resetSettings = () => {
  if (confirm('Reset all settings to defaults?')) {
    backendUrl.value = 'http://localhost:8000'
    websocketUrl.value = 'ws://localhost:8000/ws'
    agentTimeout.value = 30
    refreshInterval.value = 30
    theme.value = 'light'
    enableNotifications.value = true
    
    localStorage.removeItem('saap-settings')
    alert('Settings reset to defaults!')
  }
}

onMounted(() => {
  loadSettings()
})
</script>

<style scoped>
.settings {
  @apply space-y-8;
}

.settings-header {
  @apply space-y-2;
}

.settings-sections {
  @apply space-y-6;
}

.settings-section {
  @apply space-y-4;
}

.setting-item {
  @apply space-y-2;
}

.setting-label {
  @apply block text-sm font-medium text-saap-gray-700;
}

.setting-input,
.setting-select {
  @apply w-full px-3 py-2 border border-saap-gray-300 rounded-md;
  @apply focus:outline-none focus:ring-2 focus:ring-saap-primary-500 focus:border-transparent;
  @apply text-saap-gray-900 bg-white;
}

.setting-description {
  @apply text-sm text-saap-gray-500;
}

.checkbox-item {
  @apply flex items-center space-x-2;
}

.setting-checkbox {
  @apply h-4 w-4 text-saap-primary-600 border-saap-gray-300 rounded;
  @apply focus:ring-saap-primary-500 focus:ring-2;
}

.checkbox-label {
  @apply text-sm font-medium text-saap-gray-700 cursor-pointer;
}

.settings-actions {
  @apply flex space-x-4;
}
</style>