<script lang="ts" setup>
import {onMounted, reactive} from 'vue'
import {ElMessage} from 'element-plus'
import {GetSettings, SaveSettings} from '../../wailsjs/go/backend/App'

interface DatabaseConfig {
  name: string
  targetPath: string
  modelPackagePath: string
}

interface AppSettings {
  theme: string
  language: string
  notifications: boolean
  autoStart: boolean
  databases?: DatabaseConfig[]
}

const settings = reactive<AppSettings>({
  theme: 'light',
  language: 'zh-CN',
  notifications: true,
  autoStart: false
})

onMounted(async () => {
  try {
    const loadedSettings = await GetSettings() as any
    settings.theme = loadedSettings.theme
    settings.language = loadedSettings.language
    settings.notifications = loadedSettings.notifications
    settings.autoStart = loadedSettings.autoStart
    if (loadedSettings.databases) {
      settings.databases = loadedSettings.databases
    }
  } catch (error) {
    console.error('Failed to load settings:', error)
  }
})

async function saveSettings() {
  try {
    const currentSettings = await GetSettings() as any
    currentSettings.theme = settings.theme
    currentSettings.language = settings.language
    currentSettings.notifications = settings.notifications
    currentSettings.autoStart = settings.autoStart
    await SaveSettings(currentSettings)
    ElMessage.success('设置保存成功')
  } catch (error) {
    console.error('Failed to save settings:', error)
    ElMessage.error('设置保存失败')
  }
}
</script>

<template>
  <div class="settings-container">
    <el-card class="settings-card">
      <template #header>
        <div class="card-header">
          <span>设置</span>
        </div>
      </template>
      <el-form label-width="120px" class="settings-form">
        <el-form-item label="主题">
          <el-select v-model="settings.theme" placeholder="选择主题">
            <el-option label="浅色" value="light"/>
            <el-option label="深色" value="dark"/>
            <el-option label="跟随系统" value="auto"/>
          </el-select>
        </el-form-item>
        <el-form-item label="语言">
          <el-select v-model="settings.language" placeholder="选择语言">
            <el-option label="简体中文" value="zh-CN"/>
            <el-option label="English" value="en-US"/>
          </el-select>
        </el-form-item>
        <el-form-item label="通知">
          <el-switch v-model="settings.notifications"/>
        </el-form-item>
        <el-form-item label="开机自启">
          <el-switch v-model="settings.autoStart"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveSettings">保存设置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<style scoped>
.settings-container {
  padding: 20px;
}

.settings-card {
  max-width: 600px;
  margin: 20px auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}

.settings-form {
  padding: 20px 0;
}
</style>
