import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useAppStore = defineStore('app', () => {
  // 状态
  const loading = ref(false)
  const theme = ref<'light' | 'dark'>('light')
  const language = ref<'zh' | 'en'>('zh')
  const sidebarCollapsed = ref(false)
  
  // 计算属性
  const isDark = computed(() => theme.value === 'dark')
  
  // 动作
  const setLoading = (value: boolean) => {
    loading.value = value
  }
  
  const setTheme = (value: 'light' | 'dark') => {
    theme.value = value
    document.documentElement.classList.toggle('dark', value === 'dark')
    localStorage.setItem('theme', value)
  }
  
  const setLanguage = (value: 'zh' | 'en') => {
    language.value = value
    localStorage.setItem('language', value)
  }
  
  const toggleSidebar = () => {
    sidebarCollapsed.value = !sidebarCollapsed.value
  }
  
  const init = () => {
    // 恢复主题设置
    const savedTheme = localStorage.getItem('theme') as 'light' | 'dark'
    if (savedTheme) {
      setTheme(savedTheme)
    }
    
    // 恢复语言设置
    const savedLanguage = localStorage.getItem('language') as 'zh' | 'en'
    if (savedLanguage) {
      setLanguage(savedLanguage)
    }
  }
  
  return {
    loading,
    theme,
    language,
    sidebarCollapsed,
    isDark,
    setLoading,
    setTheme,
    setLanguage,
    toggleSidebar,
    init
  }
})