<template>
  <div class="p-4 select-none overflow-y-auto">
    <div class="mb-3.5">
      <h1 class="text-base font-semibold text-[var(--text-strong)]">桌面设置</h1>
      <p class="text-[11px] text-[var(--text-weak)] mt-0.5">壁纸 · 布局 · 信息显示</p>
    </div>

    <ToggleSection :s="s" />
    <WallpaperSection :s="s" @set-wp-type="setWpType" :current-color="currentColor" @pick-solid="onPickSolid" @pick-gradient="onPickGradient" @save-color="onSaveColor" @apply-color="onApplySavedColor" @remove-color="onRemoveSavedColor" />
    <LayoutSection :s="s" />
    <PhotoSection :s="s" />
    <PersonalizeSection :s="s" />

    <div class="text-center text-[11px] text-[var(--footer-color)] mt-3 py-1.5 tracking-wide">u-desktop v1.0</div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { go } from './composables/useGoBridge'
import ToggleSection from './components/ToggleSection.vue'
import WallpaperSection from './components/WallpaperSection.vue'
import LayoutSection from './components/LayoutSection.vue'
import PhotoSection from './components/PhotoSection.vue'
import PersonalizeSection from './components/PersonalizeSection.vue'
import type { SettingsData } from '@shared/types'

const initDone = ref(false)

const s = reactive<SettingsData>({
  lightTheme: false, wallpaper: true, time: true, weather: true,
  zodiacCard: true, knowledgeCard: true, layout: 'single', zodiac: '射手座',
  city: '', provinces: [], citiesByProv: {}, wallpaperType: 'theme', theme: '',
  themes: [], color1: '', color2: '', colorGradient: false, savedColors: [],
  bingAutoRefresh: false, knowledgeKeyword: '', knowledgePrompt: '',
  wallpaperText: '', imagePath: '', showSeconds: true, ainewsCard: true,
  photoDir: '', photoInterval: 15, photoCard: true, photoFrameMode: false, autoStart: false,
  audioVizStyle: 'bars', audioSensitivity: 1.5, audioSmoothing: 0.7, audioColorScheme: 'neon',
})

// Shared state for color section
const currentColor = reactive({ c1: '', c2: '', gradient: false })

function setWpType(type: string) {
  const prev = s.wallpaperType
  s.wallpaperType = type
  if (!initDone.value) return
  if (type === 'theme') go.saveWallpaperType('theme', s.theme)
  else if (type === 'bing' && prev !== 'bing') go.enableBing()
}

async function onPickSolid() {
  const c = await go.pickSolidColor()
  if (c) { currentColor.c1 = c; currentColor.c2 = ''; currentColor.gradient = false }
}
async function onPickGradient() {
  const res = await go.pickGradientColor()
  if (res) {
    const parts = res.split(',')
    currentColor.c1 = parts[0]; currentColor.c2 = parts[1] || ''; currentColor.gradient = true
  }
}
function onSaveColor() {
  if (!currentColor.c1) return
  go.addSavedColor(currentColor.c1, currentColor.c2, currentColor.gradient)
  s.savedColors.push({ color1: currentColor.c1, color2: currentColor.c2, gradient: currentColor.gradient })
}
function onApplySavedColor(idx: number) {
  go.applySavedColor(idx)
  const sc = s.savedColors[idx]
  currentColor.c1 = sc.color1; currentColor.c2 = sc.color2; currentColor.gradient = sc.gradient
}
async function onRemoveSavedColor(idx: number) {
  await go.removeSavedColor(idx)
  s.savedColors.splice(idx, 1)
}

onMounted(async () => {
  const raw = await go.loadAllSettings()
  const data = JSON.parse(raw) as SettingsData
  if (data.lightTheme) document.documentElement.className = 'light'
  Object.assign(s, { ...data, citiesByProv: data.citiesByProv || {}, provinces: data.provinces || [], themes: data.themes || [], savedColors: data.savedColors || [] })
  if (data.color1) { currentColor.c1 = data.color1; currentColor.c2 = data.color2 || ''; currentColor.gradient = data.colorGradient || false }
  setTimeout(() => {
    const el = document.documentElement
    if (go.resizeToFit) go.resizeToFit(el.scrollWidth, el.scrollHeight + 8)
  }, 100)
  initDone.value = true
})
</script>
