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

// 预设主题配置
export interface ThemeConfig {
  name: string
  label: string
  primaryColor: string
  primaryLight: string
  primaryDark: string
  primaryBg: string
  sidebarBg: string
  sidebarLogoBg: string
  sidebarTextActive: string
  bgPage: string
  bgLight: string
  bgHover: string
  loginBgStart: string
  loginBgEnd: string
}

// 系统预设主题
export const presetThemes: ThemeConfig[] = [
  {
    name: 'blue',
    label: '天空蓝',
    primaryColor: '#4A90D9',
    primaryLight: '#74B9FF',
    primaryDark: '#2B7DE9',
    primaryBg: '#E8F4FD',
    sidebarBg: '#F0F7FF',
    sidebarLogoBg: '#4A90D9',
    sidebarTextActive: '#4A90D9',
    bgPage: '#F5F9FC',
    bgLight: '#F0F7FF',
    bgHover: '#E8F4FD',
    loginBgStart: '#74B9FF',
    loginBgEnd: '#4A90D9'
  },
  {
    name: 'green',
    label: '翠绿',
    primaryColor: '#52C41A',
    primaryLight: '#73D13D',
    primaryDark: '#389E0D',
    primaryBg: '#F6FFED',
    sidebarBg: '#F6FFED',
    sidebarLogoBg: '#52C41A',
    sidebarTextActive: '#52C41A',
    bgPage: '#F9FFF6',
    bgLight: '#F6FFED',
    bgHover: '#D9F7BE',
    loginBgStart: '#73D13D',
    loginBgEnd: '#52C41A'
  },
  {
    name: 'purple',
    label: '典雅紫',
    primaryColor: '#722ED1',
    primaryLight: '#9254DE',
    primaryDark: '#531DAB',
    primaryBg: '#F9F0FF',
    sidebarBg: '#F9F0FF',
    sidebarLogoBg: '#722ED1',
    sidebarTextActive: '#722ED1',
    bgPage: '#FBF5FF',
    bgLight: '#F9F0FF',
    bgHover: '#EFDBFF',
    loginBgStart: '#9254DE',
    loginBgEnd: '#722ED1'
  },
  {
    name: 'orange',
    label: '活力橙',
    primaryColor: '#FA8C16',
    primaryLight: '#FFA940',
    primaryDark: '#D46B08',
    primaryBg: '#FFF7E6',
    sidebarBg: '#FFF7E6',
    sidebarLogoBg: '#FA8C16',
    sidebarTextActive: '#FA8C16',
    bgPage: '#FFFBF5',
    bgLight: '#FFF7E6',
    bgHover: '#FFE7BA',
    loginBgStart: '#FFA940',
    loginBgEnd: '#FA8C16'
  },
  {
    name: 'red',
    label: '中国红',
    primaryColor: '#F5222D',
    primaryLight: '#FF4D4F',
    primaryDark: '#CF1322',
    primaryBg: '#FFF1F0',
    sidebarBg: '#FFF1F0',
    sidebarLogoBg: '#F5222D',
    sidebarTextActive: '#F5222D',
    bgPage: '#FFFAFA',
    bgLight: '#FFF1F0',
    bgHover: '#FFCCC7',
    loginBgStart: '#FF4D4F',
    loginBgEnd: '#F5222D'
  },
  {
    name: 'dark',
    label: '暗夜黑',
    primaryColor: '#1890FF',
    primaryLight: '#40A9FF',
    primaryDark: '#096DD9',
    primaryBg: '#111B26',
    sidebarBg: '#001529',
    sidebarLogoBg: '#002140',
    sidebarTextActive: '#1890FF',
    bgPage: '#0D1117',
    bgLight: '#161B22',
    bgHover: '#21262D',
    loginBgStart: '#001529',
    loginBgEnd: '#000C17'
  }
]

const THEME_STORAGE_KEY = 'honeybox-admin-theme'
const CUSTOM_THEME_KEY = 'honeybox-admin-custom-theme'

export const useThemeStore = defineStore('theme', () => {
  const currentTheme = ref<string>('blue')
  const customTheme = ref<Partial<ThemeConfig> | null>(null)
  const showThemeDrawer = ref(false)

  // 初始化主题
  const initTheme = () => {
    const savedTheme = localStorage.getItem(THEME_STORAGE_KEY)
    const savedCustom = localStorage.getItem(CUSTOM_THEME_KEY)
    
    if (savedCustom) {
      customTheme.value = JSON.parse(savedCustom)
    }
    
    if (savedTheme) {
      currentTheme.value = savedTheme
      applyTheme(savedTheme)
    }
  }

  // 应用主题
  const applyTheme = (themeName: string) => {
    let theme: ThemeConfig | Partial<ThemeConfig> | undefined
    
    if (themeName === 'custom' && customTheme.value) {
      theme = customTheme.value
    } else {
      theme = presetThemes.find(t => t.name === themeName)
    }
    
    if (!theme) return
    
    const root = document.documentElement
    
    // 应用CSS变量
    if (theme.primaryColor) {
      root.style.setProperty('--primary-color', theme.primaryColor)
      root.style.setProperty('--el-color-primary', theme.primaryColor)
    }
    if (theme.primaryLight) {
      root.style.setProperty('--primary-light', theme.primaryLight)
    }
    if (theme.primaryDark) {
      root.style.setProperty('--primary-dark', theme.primaryDark)
    }
    if (theme.primaryBg) {
      root.style.setProperty('--primary-bg', theme.primaryBg)
    }
    if (theme.sidebarBg) {
      root.style.setProperty('--sidebar-bg', theme.sidebarBg)
    }
    if (theme.sidebarLogoBg) {
      root.style.setProperty('--sidebar-logo-bg', theme.sidebarLogoBg)
    }
    if (theme.sidebarTextActive) {
      root.style.setProperty('--sidebar-text-active', theme.sidebarTextActive)
      root.style.setProperty('--sidebar-item-active', theme.primaryBg || theme.sidebarBg || '')
      root.style.setProperty('--sidebar-item-hover', theme.bgHover || '')
    }
    if (theme.bgPage) {
      root.style.setProperty('--bg-page', theme.bgPage)
      root.style.setProperty('--el-bg-color-page', theme.bgPage)
    }
    if (theme.bgLight) {
      root.style.setProperty('--bg-light', theme.bgLight)
    }
    if (theme.bgHover) {
      root.style.setProperty('--bg-hover', theme.bgHover)
    }
    if (theme.loginBgStart) {
      root.style.setProperty('--login-bg-start', theme.loginBgStart)
    }
    if (theme.loginBgEnd) {
      root.style.setProperty('--login-bg-end', theme.loginBgEnd)
    }

    // 生成 Element Plus 主色阶
    if (theme.primaryColor) {
      generateElPrimaryColors(theme.primaryColor)
    }
  }

  // 生成 Element Plus 主色阶
  const generateElPrimaryColors = (primary: string) => {
    const root = document.documentElement
    const hex = primary.replace('#', '')
    const r = parseInt(hex.substring(0, 2), 16)
    const g = parseInt(hex.substring(2, 4), 16)
    const b = parseInt(hex.substring(4, 6), 16)
    
    // 生成浅色
    const lightLevels = [3, 5, 7, 8, 9]
    lightLevels.forEach(level => {
      const ratio = level / 10
      const lr = Math.round(r + (255 - r) * ratio)
      const lg = Math.round(g + (255 - g) * ratio)
      const lb = Math.round(b + (255 - b) * ratio)
      root.style.setProperty(`--el-color-primary-light-${level}`, `rgb(${lr}, ${lg}, ${lb})`)
    })
    
    // 生成深色
    const darkRatio = 0.2
    const dr = Math.round(r * (1 - darkRatio))
    const dg = Math.round(g * (1 - darkRatio))
    const db = Math.round(b * (1 - darkRatio))
    root.style.setProperty('--el-color-primary-dark-2', `rgb(${dr}, ${dg}, ${db})`)
  }

  // 切换主题
  const setTheme = (themeName: string) => {
    currentTheme.value = themeName
    localStorage.setItem(THEME_STORAGE_KEY, themeName)
    applyTheme(themeName)
  }

  // 保存自定义主题
  const saveCustomTheme = (theme: Partial<ThemeConfig>) => {
    customTheme.value = { ...theme, name: 'custom', label: '自定义' }
    localStorage.setItem(CUSTOM_THEME_KEY, JSON.stringify(customTheme.value))
    setTheme('custom')
  }

  // 切换主题抽屉
  const toggleThemeDrawer = () => {
    showThemeDrawer.value = !showThemeDrawer.value
  }

  return {
    currentTheme,
    customTheme,
    showThemeDrawer,
    initTheme,
    setTheme,
    saveCustomTheme,
    toggleThemeDrawer,
    applyTheme
  }
})
