App.tsx

import './src/i18n';

import { Ionicons } from '@expo/vector-icons'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { createNavigationContainerRef, DarkTheme, NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import { LinearGradient } from 'expo-linear-gradient'
import { StatusBar } from 'expo-status-bar'
import * as Updates from 'expo-updates'
import React, { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { Dimensions, Text, TouchableOpacity, View } from 'react-native'
import { SafeAreaProvider, SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context'

import APIScreen from './src/screens/APIScreen'
import APICategoryScreen from './src/screens/APICategoryScreen'
import ConnectScreen from './src/screens/ConnectScreen'
import InterfaceScreen from './src/screens/InterfaceScreen'
import WebViewScreen from './src/screens/WebViewScreen'

import * as QuickActions from 'expo-quick-actions'
import { ErrorBoundary } from './src/components/ErrorBoundary'
import { Sidebar, SidebarTraditional } from './src/components/Sidebar'
import { configService } from './src/config/AppConfig'
import { AppContextProvider } from './src/contexts'
import { useAutoConnectExpected } from './src/hooks/useAutoConnect'
import ConnectionHistoryScreen from './src/screens/ConnectionHistoryScreen'
import SettingsScreen from './src/screens/SettingsScreen'
import { ErrorLogger } from './src/services/ErrorLogger'
import { FreeShowTheme } from './src/theme/FreeShowTheme'
import { getDeviceType } from "./src/utils/navigationUtils"

const Tab = createBottomTabNavigator();
import * as Sentry from '@sentry/react-native';

Sentry.init({
  dsn: 'https://7013ba6a75324fd1201daf8817b11394@o4510432524107776.ingest.us.sentry.io/4510446363607040',
  sendDefaultPii: true,
  enableLogs: true,
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1,
  integrations: [Sentry.mobileReplayIntegration()],

  // uncomment the line below to enable Spotlight (https://spotlightjs.com)
  // spotlight: __DEV__,
});
const Stack = createStackNavigator();

const navigationRef = createNavigationContainerRef();

const InterfaceScreenComponent = (props: any) => (
  <ErrorBoundary onError={(error, errorInfo) => ErrorLogger.error('InterfaceScreen Error', 'App', error, { errorInfo })}>
    <InterfaceScreen {...props} />
  </ErrorBoundary>
);

const ConnectScreenWrapped = (props: any) => (
  <ErrorBoundary onError={(error, errorInfo) => ErrorLogger.error('ConnectScreen Error', 'App', error, { errorInfo })}>
    <ConnectScreen {...props} />
  </ErrorBoundary>
);

const SettingsScreenWrapped = (props: any) => (
  <ErrorBoundary onError={(error, errorInfo) => ErrorLogger.error('SettingsScreen Error', 'App', error, { errorInfo })}>
    <SettingsScreen {...props} />
  </ErrorBoundary>
);

const SIDEBAR_ROUTES = ['Interface', 'Connect', 'Settings'];
const EXTERNAL_ROUTES = ['WebView', 'APIScreen', 'ConnectionHistory', 'Main'];

function SidebarLayout() {
  const { t } = useTranslation();
  const autoConnectExpected = useAutoConnectExpected();

  const initialRoute = React.useMemo(() => {
    return "Interface";
  }, [autoConnectExpected]);

  const [currentRoute, setCurrentRoute] = useState(initialRoute);
  const [sidebarVisible, setSidebarVisible] = useState(false);
  const [screenWidth, setScreenWidth] = useState(Dimensions.get('window').width);

  const isMobile = screenWidth < 768;

  React.useEffect(() => {
    if (autoConnectExpected !== null) {
      const newInitialRoute = autoConnectExpected ? "Interface" : "Connect";
      setCurrentRoute(newInitialRoute);
      ErrorLogger.info(`[SidebarLayout] Initial route determined: ${newInitialRoute}`, 'App', {
        autoConnectExpected,
        initialRoute: newInitialRoute
      });
    }
  }, [autoConnectExpected]);

  React.useEffect(() => {
    const subscription = Dimensions.addEventListener('change', ({ window }) => {
      setScreenWidth(window.width);
      // Close sidebar when switching from mobile to tablet layout
      if (window.width >= 768 && sidebarVisible) {
        setSidebarVisible(false);
      }
    });

    return () => subscription?.remove();
  }, [sidebarVisible]);

  const handleNavigate = React.useCallback((route: string) => {
    setCurrentRoute(route);
  }, []);

  const toggleSidebar = React.useCallback(() => {
    setSidebarVisible(!sidebarVisible);
  }, [sidebarVisible]);

  const closeSidebar = React.useCallback(() => {
    setSidebarVisible(false);
  }, []);

  const navigateSafely = (routeName: string, params?: Record<string, any>) => {
    if (navigationRef.current?.navigate) {
      // Type assertion to bypass strict typing for dynamic navigation
      (navigationRef.current.navigate as (routeName: string, params?: Record<string, any>) => void)(routeName, params);
    } else {
      console.warn(`[SidebarLayout] No valid main navigation available for: ${routeName}`);
    }
  };

  const sidebarNavigation = React.useMemo(() => ({
    navigate: (routeName: string, params?: Record<string, any>) => {
      if (EXTERNAL_ROUTES.includes(routeName)) {
        navigateSafely(routeName, params);
      } else if (SIDEBAR_ROUTES.includes(routeName)) {
        handleNavigate(routeName);
      } else {
        console.warn(`[SidebarLayout] Unknown route: ${routeName}. Attempting to use main navigation.`);
        navigateSafely(routeName, params);
      }
    },
    addListener: (_event: string, _callback: () => void) => {
      // Screens remain mounted; listeners not used
      return () => {};
    },
    getParent: () => navigationRef.current || null,
  }), [handleNavigate]);

  const renderContent = React.useCallback(() => {
    switch (currentRoute) {
      case 'Interface':
        return <InterfaceScreenComponent navigation={sidebarNavigation} />;
      case 'Connect':
        return <ConnectScreenWrapped navigation={sidebarNavigation} />;
      case 'Settings':
        return <SettingsScreenWrapped navigation={sidebarNavigation} />;
      default:
        return <InterfaceScreenComponent navigation={sidebarNavigation} />;
    }
  }, [currentRoute, sidebarNavigation]);

  // Show loading if not ready
  if (autoConnectExpected === null) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: FreeShowTheme.colors.primary }}>
        <Text style={{ color: FreeShowTheme.colors.text }}>{t('common.loading')}</Text>
      </View>
    );
  }

  // Mobile layout with overlay sidebar
  if (isMobile) {
    return (
      <SafeAreaView style={{ flex: 1, backgroundColor: FreeShowTheme.colors.primaryDarker }} edges={['top', 'left', 'right']}>
        <View style={{
          backgroundColor: FreeShowTheme.colors.primaryDarker,
          flexDirection: 'row',
          alignItems: 'center',
          paddingVertical: FreeShowTheme.spacing.md,
          paddingHorizontal: FreeShowTheme.spacing.md,
          borderBottomWidth: 1,
          borderBottomColor: FreeShowTheme.colors.primaryLighter,
          minHeight: 64, // Ensure minimum height for proper touch targets
        }}>
          <TouchableOpacity 
            onPress={toggleSidebar}
            style={{
              width: 44,
              height: 44,
              borderRadius: FreeShowTheme.borderRadius.md,
              backgroundColor: FreeShowTheme.colors.primaryDarkest,
              borderWidth: 1,
              borderColor: FreeShowTheme.colors.primaryLighter,
              justifyContent: 'center',
              alignItems: 'center',
            }}
            activeOpacity={0.7}
          >
            <Ionicons name="menu" size={24} color={FreeShowTheme.colors.text} />
          </TouchableOpacity>

          <View style={{ marginLeft: FreeShowTheme.spacing.md, flex: 1 }}>
            <Text style={{
              fontSize: FreeShowTheme.fontSize.lg,
              fontWeight: '700',
              color: FreeShowTheme.colors.text,
            }}>
              {t('app.name')}
            </Text>
          </View>
        </View>

        <View style={{ flex: 1, backgroundColor: FreeShowTheme.colors.primary }}>
          {renderContent()}
        </View>

        <Sidebar 
          navigation={null}
          currentRoute={currentRoute} 
          onNavigate={handleNavigate}
          isVisible={sidebarVisible}
          onClose={closeSidebar}
        />
      </SafeAreaView>
    );
  }

  return (
    <View style={{ flex: 1, flexDirection: 'row', backgroundColor: FreeShowTheme.colors.primary }}>
      <SidebarTraditional
        navigation={null}
        currentRoute={currentRoute}
        onNavigate={handleNavigate}
      />
      <View style={{ flex: 1 }}>
        <View style={{ flex: 1, display: currentRoute === 'Interface' ? 'flex' : 'none' }}>
          <InterfaceScreenComponent navigation={sidebarNavigation} />
        </View>
        <View style={{ flex: 1, display: currentRoute === 'Connect' ? 'flex' : 'none' }}>
          <ConnectScreenWrapped navigation={sidebarNavigation} />
        </View>
        <View style={{ flex: 1, display: currentRoute === 'Settings' ? 'flex' : 'none' }}>
          <SettingsScreenWrapped navigation={sidebarNavigation} />
        </View>
      </View>
    </View>
  );
}

function FloatingNavLayout() {
  const { t } = useTranslation();
  const autoConnectExpected = useAutoConnectExpected();
  const insets = useSafeAreaInsets();

  const initialRoute = React.useMemo(() => {
    return "Interface";
  }, [autoConnectExpected]);

  const [currentRoute, setCurrentRoute] = useState(initialRoute);

  React.useEffect(() => {
    if (autoConnectExpected !== null) {
      const newInitialRoute = autoConnectExpected ? "Interface" : "Connect";
      setCurrentRoute(newInitialRoute);
    }
  }, [autoConnectExpected]);

  const handleNavigate = React.useCallback((route: string) => {
    setCurrentRoute(route);
  }, []);

  const navigateSafelyFloating = (routeName: string, params?: Record<string, any>) => {
    if (navigationRef.current?.navigate) {
      // Type assertion to bypass strict typing for dynamic navigation
      (navigationRef.current.navigate as (routeName: string, params?: Record<string, any>) => void)(routeName, params);
    } else {
      console.warn(`[FloatingNavLayout] No valid main navigation available for: ${routeName}`);
    }
  };

  const floatingNavigation = React.useMemo(() => ({
    navigate: (routeName: string, params?: Record<string, any>) => {
      if (['Interface', 'Connect', 'Settings'].includes(routeName)) {
        handleNavigate(routeName);
      } else if (EXTERNAL_ROUTES.includes(routeName)) {
        navigateSafelyFloating(routeName, params);
      } else {
        navigateSafelyFloating(routeName, params);
      }
    },
    addListener: (_event: string, _callback: () => void) => {
      // Screens remain mounted; listeners not used
      return () => {};
    },
    getParent: () => navigationRef.current || null,
  }), [handleNavigate]);

  const renderContent = () => {
    return (
      <>
        <View style={{ flex: 1, display: currentRoute === 'Interface' ? 'flex' : 'none' }}>
          <InterfaceScreenComponent navigation={floatingNavigation} />
        </View>
        <View style={{ flex: 1, display: currentRoute === 'Connect' ? 'flex' : 'none' }}>
          <ConnectScreenWrapped navigation={floatingNavigation} />
        </View>
        <View style={{ flex: 1, display: currentRoute === 'Settings' ? 'flex' : 'none' }}>
          <SettingsScreenWrapped navigation={floatingNavigation} />
        </View>
      </>
    );
  };

  const getTabIcon = (routeName: string, isFocused: boolean) => {
    let iconName: keyof typeof Ionicons.glyphMap;
    const iconColor = isFocused ? FreeShowTheme.colors.secondary : 'rgba(255,255,255,0.7)';

    if (routeName === 'Interface') {
      iconName = isFocused ? 'apps' : 'apps-outline';
    } else if (routeName === 'Connect') {
      iconName = isFocused ? 'wifi' : 'wifi-outline';
    } else if (routeName === 'Settings') {
      iconName = isFocused ? 'settings' : 'settings-outline';
    } else {
      iconName = 'help-circle-outline';
    }

    return { iconName, iconColor };
  };

  if (autoConnectExpected === null) {
    return (
      <LinearGradient
        colors={['#0a0a0f', '#0d0d15', '#0f0f18']}
        style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
      >
        <Text style={{ color: FreeShowTheme.colors.text }}>{t('common.loading')}</Text>
      </LinearGradient>
    );
  }

  return (
    <LinearGradient
      colors={['#0a0a0f', '#0d0d15', '#0f0f18']}
      style={{ flex: 1 }}
    >
      <SafeAreaView style={{ flex: 1, backgroundColor: 'transparent' }} edges={['top', 'left', 'right']}>
        <View style={{ flex: 1 }}>
          {renderContent()}
        </View>

        <View style={{
          position: 'absolute',
          left: 24,
          right: 24,
          bottom: insets.bottom + 24,
          height: 64,
          borderRadius: 32,
          overflow: 'hidden',
          shadowColor: '#000',
          shadowOffset: { width: 0, height: 8 },
          shadowOpacity: 0.3,
          shadowRadius: 16,
          elevation: 12,
        }}>
          {/* Background with blur effect */}
          <LinearGradient
            colors={['rgba(25,25,35,0.95)', 'rgba(18,18,28,0.98)']}
            style={{
              flex: 1,
              flexDirection: 'row',
              alignItems: 'center',
              paddingHorizontal: 6,
              borderRadius: 32,
              borderWidth: 1,
              borderColor: 'rgba(255, 255, 255, 0.08)',
              shadowColor: FreeShowTheme.colors.secondary,
              shadowOffset: { width: 0, height: 0 },
              shadowOpacity: 0.1,
              shadowRadius: 8,
            }}
          >
            {['Interface', 'Connect', 'Settings'].map((route) => {
              const isFocused = currentRoute === route;
              const { iconName, iconColor } = getTabIcon(route, isFocused);

              return (
                <TouchableOpacity
                  key={route}
                  style={{
                    flex: 1,
                    height: 52,
                    alignItems: 'center',
                    justifyContent: 'center',
                    marginHorizontal: 2,
                    borderRadius: 26,
                    backgroundColor: isFocused
                      ? FreeShowTheme.colors.secondarySurface
                      : 'transparent',
                    ...(isFocused && {
                      shadowColor: FreeShowTheme.colors.secondary,
                      shadowOffset: { width: 0, height: 0 },
                      shadowOpacity: 0.3,
                      shadowRadius: 6,
                    }),
                  }}
                  onPress={() => handleNavigate(route)}
                  activeOpacity={0.8}
                >
                  <Ionicons
                    name={iconName}
                    size={28}
                    color={iconColor}
                  />
                </TouchableOpacity>
              );
            })}
          </LinearGradient>
        </View>
      </SafeAreaView>
    </LinearGradient>
  );
}

function MainLayout() {
  const isTV = getDeviceType().isTV;

  if (isTV) {
    return <SidebarLayout />
  } else {
    return <FloatingNavLayout />
  }
}

const FreeShowNavigationTheme = {
  ...DarkTheme,
  colors: {
    ...DarkTheme.colors,
    primary: FreeShowTheme.colors.secondary,
    background: FreeShowTheme.colors.primary,
    card: FreeShowTheme.colors.primaryDarker,
    text: FreeShowTheme.colors.text,
    border: FreeShowTheme.colors.primaryLighter,
    notification: FreeShowTheme.colors.secondary,
  },
};

export default Sentry.wrap(function App() {

  useEffect(() => {
    const initializeApp = async () => {
      try {
        await configService.loadConfiguration();
        ErrorLogger.info('App configuration loaded successfully', 'App');
      } catch (error) {
        ErrorLogger.error('Failed to load app configuration', 'App', error instanceof Error ? error : new Error(String(error)));
      }
    };

    initializeApp();
  }, []);

  useEffect(() => {
    const checkForUpdates = async () => {
      if (__DEV__) {
        return;
      }

      try {
        const update = await Updates.checkForUpdateAsync();

        if (update.isAvailable) {
          ErrorLogger.info('Update available, downloading...', 'App');
          await Updates.fetchUpdateAsync();
          ErrorLogger.info('Update downloaded, reloading app...', 'App');
          await Updates.reloadAsync();
        } else {
          ErrorLogger.info('App is up to date', 'App');
        }
      } catch (error) {
        ErrorLogger.error('Error checking for updates', 'App', error instanceof Error ? error : new Error(String(error)));
      }
    };

    checkForUpdates();
  }, []);

  const quickActionRef = React.useRef<any>(null);

  useEffect(() => {
    const handleQuickAction = (action: QuickActions.Action | null) => {
      if (!action || !action.params) return;

      const params = action.params as any;

      if (params.type === 'connect-history') {
        ErrorLogger.info(`[QuickActions] Auto-connecting to: ${params.host}`, 'App');
        quickActionRef.current = params;
      }
    };

    if (QuickActions.initial) {
      handleQuickAction(QuickActions.initial);
    }

    const subscription = QuickActions.addListener<QuickActions.Action>((action) => {
      handleQuickAction(action);
    });

    return () => {
      subscription.remove();
    };
  }, []);

  return (
    <ErrorBoundary
      onError={(error, errorInfo) => {
        ErrorLogger.fatal('App-level Error', 'App', error, new Error(JSON.stringify(errorInfo)));
      }}
    >
      <SafeAreaProvider>
        <AppContextProvider navigation={navigationRef} quickActionRef={quickActionRef}>
          <NavigationContainer ref={navigationRef} theme={FreeShowNavigationTheme}>
            <Stack.Navigator
              screenOptions={{
                headerShown: false,
                cardStyle: {
                  backgroundColor: FreeShowTheme.colors.primary,
                },
                cardStyleInterpolator: ({ current, layouts }) => ({
                  cardStyle: {
                    transform: [
                      {
                        translateX: current.progress.interpolate({
                          inputRange: [0, 1],
                          outputRange: [layouts.screen.width, 0],
                        }),
                      },
                    ],
                    opacity: current.progress.interpolate({
                      inputRange: [0, 0.5, 1],
                      outputRange: [0, 0.8, 1],
                    }),
                  },
                  overlayStyle: {
                    backgroundColor: 'transparent',
                  },
                }),
                transitionSpec: {
                  open: {
                    animation: 'timing',
                    config: {
                      duration: 200,
                      easing: require('react-native').Easing.out(require('react-native').Easing.exp),
                    },
                  },
                  close: {
                    animation: 'timing',
                    config: {
                      duration: 180,
                      easing: require('react-native').Easing.in(require('react-native').Easing.exp),
                    },
                  },
                },
              }}
            >
              <Stack.Screen name="Main" component={MainLayout} />
              <Stack.Screen
                name="WebView"
                options={{
                  presentation: 'modal',
                  headerShown: false,
                  gestureEnabled: true,
                  cardOverlayEnabled: true,
                  cardStyleInterpolator: ({ current, layouts }) => {
                    return {
                      cardStyle: {
                        transform: [
                          {
                            translateY: current.progress.interpolate({
                              inputRange: [0, 1],
                              outputRange: [layouts.screen.height, 0],
                            }),
                          },
                        ],
                      },
                    };
                  },
                }}
              >
                {(props) => (
                  <ErrorBoundary onError={(error, errorInfo) => ErrorLogger.error('WebViewScreen Error', 'App', error, { errorInfo })}>
                    <WebViewScreen {...props} />
                  </ErrorBoundary>
                )}
              </Stack.Screen>
              <Stack.Screen
                name="APIScreen"
                options={{
                  presentation: 'modal',
                  headerShown: false,
                  gestureEnabled: true,
                  cardOverlayEnabled: true,
                  cardStyleInterpolator: ({ current, layouts }) => {
                    return {
                      cardStyle: {
                        transform: [
                          {
                            translateY: current.progress.interpolate({
                              inputRange: [0, 1],
                              outputRange: [layouts.screen.height, 0],
                            }),
                          },
                        ],
                      },
                    };
                  },
                }}
              >
                {(props) => (
                  <ErrorBoundary onError={(error, errorInfo) => ErrorLogger.error('APIScreen Error', 'App', error, { errorInfo })}>
                    <APIScreen {...props} />
                  </ErrorBoundary>
                )}
              </Stack.Screen>

              <Stack.Screen
                name="APICategory"
                options={{
                  presentation: 'card',
                  headerShown: false,
                }}
              >
                {(props) => (
                  <ErrorBoundary onError={(error, errorInfo) => ErrorLogger.error('APICategoryScreen Error', 'App', error, { errorInfo })}>
                    <APICategoryScreen {...props} />
                  </ErrorBoundary>
                )}
              </Stack.Screen>

              <Stack.Screen
                name="ConnectionHistory"
                options={{
                  presentation: 'card',
                  cardStyle: {
                    backgroundColor: 'transparent',
                  },
                  cardStyleInterpolator: ({ current, layouts }) => ({
                    cardStyle: {
                      transform: [
                        {
                          translateX: current.progress.interpolate({
                            inputRange: [0, 1],
                            outputRange: [layouts.screen.width, 0],
                          }),
                        },
                      ],
                    },
                    overlayStyle: {
                      opacity: current.progress.interpolate({
                        inputRange: [0, 1],
                        outputRange: [0, 0.5],
                      }),
                    },
                  }),
                  transitionSpec: {
                    open: {
                      animation: 'timing',
                      config: {
                        duration: 100,
                        easing: require('react-native').Easing.out(require('react-native').Easing.cubic),
                      },
                    },
                    close: {
                      animation: 'timing',
                      config: {
                        duration: 100,
                        easing: require('react-native').Easing.in(require('react-native').Easing.cubic),
                      },
                    },
                  },
                }}
              >
                {(props) => (
                  <ErrorBoundary onError={(error, errorInfo) => ErrorLogger.error('ConnectionHistoryScreen Error', 'App', error, { errorInfo })}>
                    <ConnectionHistoryScreen {...props} />
                  </ErrorBoundary>
                )}
              </Stack.Screen>
            </Stack.Navigator>
            <StatusBar
              style="light"
              translucent={true}
            />
          </NavigationContainer>
        </AppContextProvider>
      </SafeAreaProvider>
    </ErrorBoundary>
  );
});