import { reactive } from 'vue'
import type { WeatherData, HoroscopeData, AINewsItem, KnowledgeData, PhotoData, CardVisibility } from '@shared/types'

export const state = reactive({
  layout: 'single' as 'single' | 'multi',
  showSeconds: true,
  userZodiac: '射手座',
  wallpaperVisible: true,
  photoFrameMode: false,
  cardVisibility: {
    time: true,
    weather: true,
    zodiac: true,
    knowledge: true,
    ainews: true,
    photo: true,
  } as CardVisibility,
  backgroundHtml: '',
  weather: null as WeatherData | null,
  horoscope: null as HoroscopeData | null,
  aiNews: [] as AINewsItem[],
  knowledge: { content: '', keyword: '' } as KnowledgeData,
  photo: null as PhotoData | null,
})

export function loadInitialData() {
  const d = (window as any).__INITIAL_DATA__
  if (!d) return
  if (d.layout) state.layout = d.layout
  if (d.showSeconds !== undefined) state.showSeconds = d.showSeconds
  if (d.userZodiac) state.userZodiac = d.userZodiac
  if (d.wallpaperVisible !== undefined) state.wallpaperVisible = d.wallpaperVisible
  if (d.photoFrameMode !== undefined) state.photoFrameMode = d.photoFrameMode
  if (d.cardVisibility) Object.assign(state.cardVisibility, d.cardVisibility)
  if (d.backgroundHtml) state.backgroundHtml = d.backgroundHtml
}
