/**
 * 主题管理 Composable
 * 处理浅色/深色/跟随系统 三种主题模式的切换逻辑
 */

import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useSettingsStore } from '@/stores/settings'

// 主题模式枚举
export const ThemeMode = {
  LIGHT: 'light',
  DARK: 'dark',
  SYSTEM: 'system',
}

// 主题选项配置
export const themeOptions = [
  { value: ThemeMode.LIGHT, label: '浅色', icon: 'Sunny' },
  { value: ThemeMode.DARK, label: '深色', icon: 'Moon' },
  { value: ThemeMode.SYSTEM, label: '跟随系统', icon: 'Monitor' },
]

/**
 * 获取系统主题偏好
 * @returns {'light' | 'dark'}
 */
function getSystemTheme() {
  if (typeof window === 'undefined') return 'light'
  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
}

/**
 * 应用主题到 DOM
 * @param {'light' | 'dark'} theme - 实际应用的主题
 */
function applyTheme(theme) {
  const root = document.documentElement

  // 设置 data-theme 属性（用于自定义 CSS 变量）
  root.setAttribute('data-theme', theme)

  // 同步 Element Plus 暗黑模式
  if (theme === 'dark') {
    root.classList.add('dark')
  } else {
    root.classList.remove('dark')
  }

  // 更新 meta theme-color（用于移动端浏览器主题色）
  const metaThemeColor = document.querySelector('meta[name="theme-color"]')
  if (metaThemeColor) {
    metaThemeColor.setAttribute('content', theme === 'dark' ? '#0f172a' : '#f8fafc')
  }
}

/**
 * 主题管理 Composable
 */
export function useTheme() {
  const settingsStore = useSettingsStore()
  const { theme: themeMode } = storeToRefs(settingsStore)

  // 系统主题状态
  const systemTheme = ref(getSystemTheme())

  // 媒体查询监听器
  let mediaQuery = null

  // 计算实际应用的主题
  const resolvedTheme = computed(() => {
    const mode = themeMode.value || ThemeMode.LIGHT
    if (mode === ThemeMode.SYSTEM) {
      return systemTheme.value
    }
    return mode
  })

  // 是否为深色主题
  const isDark = computed(() => resolvedTheme.value === 'dark')

  // 监听系统主题变化
  function handleSystemThemeChange(event) {
    systemTheme.value = event.matches ? 'dark' : 'light'
  }

  // 设置主题模式
  async function setTheme(mode) {
    await settingsStore.updateSettings({ theme: mode })
  }

  // 切换主题（在浅色和深色之间切换）
  async function toggleTheme() {
    const currentResolved = resolvedTheme.value
    const newTheme = currentResolved === 'dark' ? ThemeMode.LIGHT : ThemeMode.DARK
    await setTheme(newTheme)
  }

  // 循环切换主题模式（light -> dark -> system -> light）
  async function cycleTheme() {
    const current = themeMode.value || ThemeMode.LIGHT
    const modes = [ThemeMode.LIGHT, ThemeMode.DARK, ThemeMode.SYSTEM]
    const currentIndex = modes.indexOf(current)
    const nextIndex = (currentIndex + 1) % modes.length
    await setTheme(modes[nextIndex])
  }

  // 初始化主题
  function initTheme() {
    // 应用当前主题
    applyTheme(resolvedTheme.value)

    // 监听系统主题变化
    if (typeof window !== 'undefined') {
      mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
      mediaQuery.addEventListener('change', handleSystemThemeChange)
    }
  }

  // 清理监听器
  function cleanup() {
    if (mediaQuery) {
      mediaQuery.removeEventListener('change', handleSystemThemeChange)
    }
  }

  // 监听主题变化并应用
  watch(resolvedTheme, (newTheme) => {
    applyTheme(newTheme)
  })

  // 生命周期钩子
  onMounted(() => {
    initTheme()
  })

  onUnmounted(() => {
    cleanup()
  })

  return {
    // 状态
    themeMode,        // 用户设置的主题模式 (light/dark/system)
    resolvedTheme,    // 实际应用的主题 (light/dark)
    isDark,           // 是否为深色主题
    systemTheme,      // 系统主题

    // 方法
    setTheme,         // 设置主题模式
    toggleTheme,      // 切换主题（浅色/深色）
    cycleTheme,       // 循环切换主题模式
    initTheme,        // 初始化主题
  }
}

