<template>
  <div class="mb-3">
    <div class="text-[10px] font-semibold text-[var(--text-weak)] uppercase tracking-[1.5px] mb-1 pl-0.5">显示控制</div>
    <div class="bg-[var(--card-bg)] border border-[var(--card-border)] rounded-lg">
      <div v-for="t in toggles" :key="t.key"
        class="flex justify-between items-center px-3.5 py-2 border-t border-[var(--card-divider)] first:border-t-0"
        :class="{ 'pl-8': t.sub }">
        <div>
          <div class="text-xs font-medium text-[var(--text-muted)]">{{ t.label }}</div>
          <div v-if="t.desc" class="text-[10px] text-[var(--text-weak)] mt-px">{{ t.desc }}</div>
        </div>
        <ToggleSwitch v-model="(s as any)[t.key]" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { watch } from 'vue'
import ToggleSwitch from './ToggleSwitch.vue'
import { go } from '../composables/useGoBridge'
import type { SettingsData } from '@shared/types'

const props = defineProps<{ s: SettingsData }>()

const toggles: { key: keyof SettingsData; label: string; desc?: string; sub?: boolean }[] = [
  { key: 'autoStart', label: '开机启动', desc: '系统启动时自动运行' },
  { key: 'wallpaper', label: '显示壁纸' },
  { key: 'time', label: '时间日期' },
  { key: 'showSeconds', label: '显示秒', sub: true },
  { key: 'weather', label: '天气信息' },
  { key: 'zodiacCard', label: '星座运势' },
  { key: 'knowledgeCard', label: '知识卡片' },
  { key: 'ainewsCard', label: 'AI 资讯' },
]

const toggleKeys = toggles.map(t => t.key)

watch(
  () => toggleKeys.map(k => (props.s as any)[k]),
  () => {
    const data: Record<string, boolean> = {}
    for (const k of toggleKeys) data[k] = (props.s as any)[k]
    go.saveToggles(data)
  }
)
</script>
