<script setup lang="ts">
// src/renderer/src/components/SettingsView.vue
import { useAppStore } from '@renderer/stores/app'
import { useI18n } from '@renderer/i18n'
import { ref } from 'vue'

const appStore = useAppStore()
const { t, locale } = useI18n()

const themes = [
  { value: 'dark', labelKey: 'settings.themeDark' },
  { value: 'light', labelKey: 'settings.themeLight' },
  { value: 'system', labelKey: 'settings.themeSystem' },
]

const locales = [
  { value: 'en', label: 'English' },
  { value: 'zh-CN', label: '中文' },
]
</script>

<template>
  <div class="settings-view">
    <h2 class="settings-title">{{ t('settings.title') }}</h2>

    <div class="settings-group">
      <label class="settings-label">{{ t('settings.theme') }}</label>
      <el-radio-group :model-value="appStore.theme" @change="appStore.setTheme($event)">
        <el-radio-button v-for="item in themes" :key="item.value" :value="item.value">
          {{ t(item.labelKey) }}
        </el-radio-button>
      </el-radio-group>
    </div>

    <div class="settings-group">
      <label class="settings-label">{{ t('settings.language') }}</label>
      <el-select :model-value="locale" @change="locale = $event" size="small" style="width: 140px">
        <el-option v-for="l in locales" :key="l.value" :label="l.label" :value="l.value" />
      </el-select>
    </div>

    <div class="settings-group">
      <label class="settings-label">{{ t('settings.scanCount') }}</label>
      <el-input-number
        :model-value="appStore.scanCount"
        @change="appStore.setScanCount($event || 100)"
        :min="10"
        :max="10000"
        :step="10"
        size="small"
      />
    </div>

    <div class="settings-group">
      <label class="settings-label">{{ t('settings.fontSize') }}</label>
      <el-input-number
        :model-value="appStore.fontSize"
        @change="appStore.setFontSize($event || 13)"
        :min="10"
        :max="20"
        size="small"
      />
    </div>
  </div>
</template>

<style scoped>
.settings-view {
  padding: 24px;
  max-width: 500px;
}

.settings-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 24px;
}

.settings-group {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.settings-label {
  font-size: 13px;
  color: var(--text-secondary);
  min-width: 140px;
}
</style>
