<script setup lang="ts">
/**
 * 主题设置独立页：避免 ActionSheet 被浮动 Tabbar 遮挡。
 * 三选一写入本地 theme-pref，即时预览当前页背景。
 */
import { useToast } from '@wot-ui/ui'
import AppNavbar from '@/components/layout/AppNavbar.vue'
import AppPageShell from '@/components/layout/AppPageShell.vue'
import ContentPageHeader from '../../components/ContentPageHeader.vue'
import ArtMenuGroup from '@/components/c-end/ArtMenuGroup.vue'
import ArtMenuItem from '@/components/c-end/ArtMenuItem.vue'
import { useTheme, type ThemePref } from '@/composables/useTheme'

const toast = useToast()
const { themePref, themeLabel, setThemePref } = useTheme()

const options: { name: string, value: ThemePref, label: string }[] = [
  { name: '跟随系统', value: 'system', label: '与设备深浅色保持一致' },
  { name: '浅色', value: 'light', label: '始终使用浅色界面' },
  { name: '深色', value: 'dark', label: '始终使用深色界面' },
]

/** 当前选中项右侧展示勾选文案 */
const selectedMark = (pref: ThemePref) => (themePref.value === pref ? '已选' : '')

/** 点选主题：写入并 toast，留在页内可立即看到效果 */
const onSelect = (pref: ThemePref) => {
  setThemePref(pref)
  toast.success(`已切换为${themeLabel.value}`)
}
</script>

<template>
  <AppPageShell>
    <AppNavbar title="主题" show-back />
    <view class="page-pad animate-reveal">
      <ContentPageHeader
        eyebrow="Appearance"
        title="主题模式"
        desc="选择后立即生效，可随时回来修改。"
      />
      <ArtMenuGroup eyebrow="Theme" title="外观">
        <ArtMenuItem
          v-for="item in options"
          :key="item.value"
          :title="item.name"
          :label="item.label"
          icon="settings"
          :value="selectedMark(item.value)"
          is-link
          @click="onSelect(item.value)"
        />
      </ArtMenuGroup>
      <view class="hint text-art-muted">
        当前：{{ themeLabel }}
      </view>
    </view>
  </AppPageShell>
</template>

<style scoped lang="scss">
.page-pad {
  padding: 32rpx 32rpx 80rpx;
}
.hint {
  margin-top: 8rpx;
  padding: 0 8rpx;
  font-size: 24rpx;
}
</style>
