import { ref, watch, onMounted } from 'vue'
import { useTheme as useVuetifyTheme } from 'vuetify'

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

const STORAGE_KEY = 'alhp-theme-preference'

// Global reactive state (shared across components)
const themeMode = ref<ThemeMode>('system')
const isDark = ref(true)

/**
 * Theme management composable
 * Handles dark/light mode with OS preference detection and persistence
 */
export function useTheme() {
  const vuetifyTheme = useVuetifyTheme()

  /**
   * Get system preference for dark mode
   */
  const getSystemPreference = (): boolean => {
    if (typeof window === 'undefined') return true
    return window.matchMedia('(prefers-color-scheme: dark)').matches
  }

  /**
   * Apply theme to document and Vuetify
   */
  const applyTheme = (dark: boolean, animate = false) => {
    isDark.value = dark

    // Add transition class for smooth theme switching
    if (animate) {
      document.documentElement.classList.add('theme-transition')
      setTimeout(() => {
        document.documentElement.classList.remove('theme-transition')
      }, 300)
    }

    // Apply to Vuetify
    vuetifyTheme.global.name.value = dark ? 'darkTheme' : 'lightTheme'

    // Apply data attribute for CSS variables
    document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light')

    // Update meta theme-color for mobile browsers
    const metaThemeColor = document.querySelector('meta[name="theme-color"]')
    if (metaThemeColor) {
      metaThemeColor.setAttribute('content', dark ? '#0f1419' : '#ffffff')
    }
  }

  /**
   * Set theme mode and persist preference
   */
  const setThemeMode = (mode: ThemeMode, animate = true) => {
    themeMode.value = mode
    localStorage.setItem(STORAGE_KEY, mode)

    if (mode === 'system') {
      applyTheme(getSystemPreference(), animate)
    } else {
      applyTheme(mode === 'dark', animate)
    }
  }

  /**
   * Toggle between dark and light modes
   */
  const toggleTheme = () => {
    if (themeMode.value === 'system') {
      // If currently following system, switch to opposite of current
      setThemeMode(isDark.value ? 'light' : 'dark')
    } else {
      setThemeMode(themeMode.value === 'dark' ? 'light' : 'dark')
    }
  }

  /**
   * Initialize theme from storage or system preference
   */
  const initTheme = () => {
    const stored = localStorage.getItem(STORAGE_KEY) as ThemeMode | null

    if (stored && ['light', 'dark', 'system'].includes(stored)) {
      themeMode.value = stored
    } else {
      themeMode.value = 'system'
    }

    // Don't animate on initial load
    if (themeMode.value === 'system') {
      applyTheme(getSystemPreference(), false)
    } else {
      applyTheme(themeMode.value === 'dark', false)
    }
  }

  // Watch for system preference changes
  onMounted(() => {
    initTheme()

    // Listen for system preference changes
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
    const handleChange = (e: MediaQueryListEvent) => {
      if (themeMode.value === 'system') {
        applyTheme(e.matches, true)
      }
    }

    mediaQuery.addEventListener('change', handleChange)
  })

  return {
    themeMode,
    isDark,
    toggleTheme,
    setThemeMode,
    initTheme,
  }
}
