import React, { useEffect } from 'react';
import { Stack } from 'expo-router';
import { StatusBar } from 'expo-status-bar';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { ThemeProvider, useTheme } from '@/context/ThemeContext';
import { ToastProvider } from '@/context/ToastContext';
import { StyleSheet, View, Platform } from 'react-native';

// Wrap the app with all required providers
export default function RootLayout() {
  return (
    <ThemeProvider>
      <ToastProvider>
        <RootLayoutNav />
      </ToastProvider>
    </ThemeProvider>
  );
}

// The main navigation component
function RootLayoutNav() {
  const { theme, colors } = useTheme();
  
  // Apply global styles to remove highlight effects on web
  useEffect(() => {
    if (Platform.OS === 'web') {
      // Create a style element to remove highlight effects
      const style = document.createElement('style');
      style.textContent = `
        * {
          -webkit-tap-highlight-color: transparent !important;
          highlight-color: transparent !important;
          -webkit-touch-callout: none !important;
        }
        
        input, textarea, button, select, a, div {
          -webkit-tap-highlight-color: transparent !important;
          -webkit-user-select: none !important;
          -khtml-user-select: none !important;
          -moz-user-select: none !important;
          -ms-user-select: none !important;
          user-select: none !important;
        }
        
        /* Fix tab bar label visibility */
        .r-fontWeight-1enofrn {
          opacity: 1 !important;
        }
        
        /* Remove focus outlines */
        *:focus {
          outline: none !important;
        }
        
        /* Fix tab bar label visibility */
        .r-color-1rmcaf9 {
          color: inherit !important;
          opacity: 1 !important;
        }
        
        /* Ensure tab bar labels are displayed */
        .css-view-175oi2r {
          display: flex !important;
        }
        
        /* Fix tab bar height */
        .css-view-1dbjc4n[role="tablist"] {
          height: auto !important;
          min-height: 60px !important;
        }
        
        /* Fix tab labels */
        .css-text-901oao {
          display: inline !important;
          visibility: visible !important;
          opacity: 1 !important;
        }
        
        /* Additional fixes for tab bar labels */
        [role="tab"] {
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
        }
        
        [role="tab"] > div {
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
        }
        
        [role="tab"] div:last-child {
          display: flex !important;
          visibility: visible !important;
          opacity: 1 !important;
          margin-top: 4px !important;
        }
        
        /* Force tab labels to be visible */
        [role="tab"] span {
          display: inline !important;
          visibility: visible !important;
          opacity: 1 !important;
          font-size: 12px !important;
          line-height: 16px !important;
        }
      `;
      document.head.appendChild(style);
      
      return () => {
        document.head.removeChild(style);
      };
    }
  }, []);
  
  return (
    <SafeAreaProvider style={styles.container}>
      <StatusBar style={theme === 'dark' ? 'light' : 'dark'} />
      <Stack
        screenOptions={{
          headerStyle: {
            backgroundColor: colors.background,
          },
          headerTintColor: colors.text,
          headerTitleStyle: {
            fontWeight: 'bold',
          },
          contentStyle: {
            backgroundColor: colors.background,
          },
        }}
      >
        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
        <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
        <Stack.Screen name="deposit-methods" options={{ title: 'Deposit Methods' }} />
        <Stack.Screen name="help-support" options={{ title: 'Help & Support' }} />
        <Stack.Screen name="privacy-policy" options={{ title: 'Privacy Policy' }} />
      </Stack>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});