import React, { useEffect, useState } from 'react';
import { View, Platform } from 'react-native';
import { useRootClassName } from '~/store/themeStore';

interface ThemeWrapperProps {
  children: React.ReactNode;
}

export function ThemeWrapper({ children }: ThemeWrapperProps) {
  const rootClassName = useRootClassName();
  const [themeKey, setThemeKey] = useState(0);

  useEffect(() => {
    // For web, apply classes to document element
    if (Platform.OS === 'web') {
      const html = document.documentElement;
      // Clear all existing theme classes
      html.classList.remove('theme-default', 'theme-forest', 'theme-sunset', 'dark');

      // Apply new theme classes
      if (rootClassName) {
        const classes = rootClassName.split(' ').filter(Boolean);
        classes.forEach((cls) => html.classList.add(cls));
      }
    }

    // Force re-render to apply new CSS variables
    setThemeKey((prev) => prev + 1);

    // Force Metro/NativeWind to re-process styles
    if (Platform.OS !== 'web') {
      // Trigger a small delay to ensure styles are applied
      setTimeout(() => {
        setThemeKey((prev) => prev + 1);
      }, 50);
    }
  }, [rootClassName]);

  // For React Native, we need to set the theme class on a wrapper View
  // The CSS variables will be applied via the global CSS
  // Using key prop to force re-render when theme changes
  return (
    <View key={themeKey} className={`flex-1 ${rootClassName}`} style={{ flex: 1 }}>
      {children}
    </View>
  );
}