import { useEffect, type ReactNode } from 'react'
import { useThemeStore, themes } from '../stores/themeStore'

interface ThemeProviderProps {
  children: ReactNode
}

export function ThemeProvider({ children }: ThemeProviderProps) {
  const { currentTheme } = useThemeStore()
  const theme = themes[currentTheme]

  useEffect(() => {
    // Apply CSS variables
    const root = document.documentElement
    root.style.setProperty('--color-bg', theme.colors.bg)
    root.style.setProperty('--color-primary', theme.colors.primary)
    root.style.setProperty('--color-secondary', theme.colors.secondary)
    root.style.setProperty('--color-accent', theme.colors.accent)
    root.style.setProperty('--color-text', theme.colors.text)
    root.style.setProperty('--color-text-muted', theme.colors.textMuted)
    root.style.setProperty('--font-heading', theme.fonts.heading)
    root.style.setProperty('--font-body', theme.fonts.body)

    // Apply body background
    document.body.style.backgroundColor = theme.colors.bg
    document.body.style.color = theme.colors.text

    // Add theme class to body
    document.body.className = `theme-${currentTheme}`
  }, [currentTheme, theme])

  return <>{children}</>
}

// Theme-aware component wrapper
export function useThemeStyles() {
  const { currentTheme, getThemeConfig } = useThemeStore()
  const config = getThemeConfig()

  return {
    theme: currentTheme,
    config,
    styles: {
      // Background styles
      bgPrimary: { backgroundColor: config.colors.bg },
      bgSecondary: { backgroundColor: config.colors.primary + '20' },

      // Text styles
      textPrimary: { color: config.colors.text },
      textSecondary: { color: config.colors.textMuted },
      textAccent: { color: config.colors.primary },

      // Border styles
      borderPrimary: { borderColor: config.colors.primary },
      borderSecondary: { borderColor: config.colors.secondary },

      // Effect classes
      glowEffect: config.effects.glow ? 'text-shadow-neon' : '',
      scanlineEffect: config.effects.scanlines ? 'crt-scanlines' : '',
      glitchEffect: config.effects.glitch ? 'glitch-text' : '',
      sparkleEffect: config.effects.sparkles ? 'sparkle' : '',
      rgbEffect: config.effects.rgbShift ? 'animate-rgb-shift' : '',
    },
  }
}