import { defineStore } from 'pinia'
import { computed, watch } from 'vue'
import { useStorage, usePreferredDark } from '@vueuse/core'
import {
  themeColorPresets,
  defaultThemeColor,
  type ThemeColorKey,
  type ThemeColorSet
} from '@/assets/styles/theme/presets'

export type ThemeMode = 'light' | 'dark' | 'system'

export interface ThemeConfig {
  mode: ThemeMode
  colorScheme: ThemeColorKey
  fontSize: 'small' | 'default' | 'large'
  compactMode: boolean
}

const DEFAULT_CONFIG: ThemeConfig = {
  mode: 'system',
  colorScheme: defaultThemeColor,
  fontSize: 'default',
  compactMode: false
}

export const useThemeStore = defineStore('theme', () => {
  // 持久化存储主题配置
  const config = useStorage<ThemeConfig>('theme-config', DEFAULT_CONFIG, localStorage, {
    mergeDefaults: true
  })

  // 系统深色模式偏好
  const prefersDark = usePreferredDark()

  // 计算实际主题模式
  const isDark = computed(() => {
    if (config.value.mode === 'system') {
      return prefersDark.value
    }
    return config.value.mode === 'dark'
  })

  // 当前主题色配置
  const currentColors = computed<ThemeColorSet>(() => {
    return themeColorPresets[config.value.colorScheme]
  })

  // 切换深色/浅色模式
  function toggleDarkMode() {
    if (config.value.mode === 'system') {
      config.value.mode = prefersDark.value ? 'light' : 'dark'
    } else {
      config.value.mode = config.value.mode === 'dark' ? 'light' : 'dark'
    }
  }

  // 设置主题模式
  function setMode(mode: ThemeMode) {
    config.value.mode = mode
  }

  // 设置主题色
  function setColorScheme(scheme: ThemeColorKey) {
    config.value.colorScheme = scheme
  }

  // 设置字体大小
  function setFontSize(size: 'small' | 'default' | 'large') {
    config.value.fontSize = size
  }

  // 切换紧凑模式
  function toggleCompactMode() {
    config.value.compactMode = !config.value.compactMode
  }

  // 重置为默认配置
  function resetToDefault() {
    config.value = { ...DEFAULT_CONFIG }
  }

  // 应用主题到 DOM
  function applyTheme() {
    const root = document.documentElement

    // 1. 设置主题模式 (使用 Element Plus 官方的 dark 类名)
    if (isDark.value) {
      root.classList.add('dark')
    } else {
      root.classList.remove('dark')
    }

    // 2. 设置主题色 CSS 变量
    const colors = currentColors.value
    root.style.setProperty('--color-primary', colors.primary)
    root.style.setProperty('--color-primary-light-3', colors.primaryLight3)
    root.style.setProperty('--color-primary-light-5', colors.primaryLight5)
    root.style.setProperty('--color-primary-light-7', colors.primaryLight7)
    root.style.setProperty('--color-primary-light-9', colors.primaryLight9)
    root.style.setProperty('--color-primary-dark-2', colors.primaryDark2)

    // 3. 同步 Element Plus 主题变量
    root.style.setProperty('--el-color-primary', colors.primary)
    root.style.setProperty('--el-color-primary-light-3', colors.primaryLight3)
    root.style.setProperty('--el-color-primary-light-5', colors.primaryLight5)
    root.style.setProperty('--el-color-primary-light-7', colors.primaryLight7)
    root.style.setProperty('--el-color-primary-light-8', colors.primaryLight7)
    root.style.setProperty('--el-color-primary-light-9', colors.primaryLight9)
    root.style.setProperty('--el-color-primary-dark-2', colors.primaryDark2)

    // 4. 设置字体大小
    const fontSizeMap = {
      small: '13px',
      default: '14px',
      large: '15px'
    }
    root.style.setProperty('--font-size-base', fontSizeMap[config.value.fontSize])

    // 5. 设置紧凑模式
    if (config.value.compactMode) {
      root.classList.add('compact-mode')
    } else {
      root.classList.remove('compact-mode')
    }
  }

  // 监听配置变化，自动应用
  watch(
    [() => config.value, isDark],
    () => {
      applyTheme()
    },
    { deep: true, immediate: true }
  )

  // 监听系统主题变化
  watch(prefersDark, () => {
    if (config.value.mode === 'system') {
      applyTheme()
    }
  })

  return {
    config,
    isDark,
    currentColors,
    prefersDark,
    themeColorPresets,
    toggleDarkMode,
    setMode,
    setColorScheme,
    setFontSize,
    toggleCompactMode,
    resetToDefault,
    applyTheme
  }
})
