import { Stack, Tabs } from "expo-router";
import { DataContextProvider } from "../src/common/contexts/data_context";
import { LIGHT_THEME } from "../src/common/const/theme";
import {
  AuthContextProvider,
  useAuth,
} from "../src/auth/contexts/auth_context";
import { ActivityIndicator } from "react-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { AudioContextProvider } from "../src/common/contexts/audio_context";
import { I18nextProvider, useTranslation } from "react-i18next";
import i18n from "../src/lang/translations";
import {
  SetUpContextProvider,
  useSetUp,
} from "../src/common/contexts/set_up_context";

export default function Root() {
  return (
    <I18nextProvider i18n={i18n}>
      <GestureHandlerRootView style={{ flex: 1 }}>
        <DataContextProvider>
          <AuthContextProvider>
            <AudioContextProvider>
              <SetUpContextProvider>
                <MainLayout />
              </SetUpContextProvider>
            </AudioContextProvider>
          </AuthContextProvider>
        </DataContextProvider>
      </GestureHandlerRootView>
    </I18nextProvider>
  );
}

const MainLayout = () => {
  const { isLoading } = useAuth();
  const { t } = useTranslation();

  if (isLoading) {
    return <ActivityIndicator />;
  }

  return (
    <Stack initialRouteName="(tabs)">
      <Stack.Screen
        name="(tabs)"
        options={{
          headerShown: false,
          statusBarColor: LIGHT_THEME.color.primary,
        }}
      />
      <Stack.Screen
        name="state"
        options={{
          headerShown: false,
          statusBarColor: LIGHT_THEME.color.primary,
        }}
      />
      <Stack.Screen
        name="login"
        options={{
          title: "Login",
          headerShown: false,
        }}
      />
      <Stack.Screen
        name="sign_up"
        options={{
          headerShown: false,
        }}
      />
      <Stack.Screen
        name="profile"
        options={{
          title: "Profile",
          headerShown: false,
        }}
      />
      <Stack.Screen
        name="scan"
        options={{
          title: t("scanScreen.title"),
          statusBarColor: LIGHT_THEME.color.primary,
          headerStyle: {
            backgroundColor: LIGHT_THEME.color.primary,
          },
          headerTitleStyle: {
            color: LIGHT_THEME.color.white,
          },
          headerTitleAlign: "center",
          headerTintColor: LIGHT_THEME.color.white,
        }}
      />
      <Stack.Screen
        name="travel_history"
        options={{
          headerShown: false,
          statusBarColor: LIGHT_THEME.color.primary,
        }}
      />
      <Stack.Screen
        name="about_us"
        options={{
          title: "About Us",
          statusBarColor: LIGHT_THEME.color.primary,
          headerStyle: {
            backgroundColor: LIGHT_THEME.color.primary,
          },
          headerTitleStyle: {
            color: LIGHT_THEME.color.white,
          },
          headerTitleAlign: "center",
          headerTintColor: LIGHT_THEME.color.white,
        }}
      />
      <Stack.Screen
        name="routes/generate_route"
        options={{
          headerShown: false,
          statusBarColor: LIGHT_THEME.color.primary,
        }}
      />
      <Stack.Screen
        name="routes/generate_route_form"
        options={{
          title: t("generateRouteScreen.title"),
          statusBarColor: LIGHT_THEME.color.primary,
          headerStyle: {
            backgroundColor: LIGHT_THEME.color.primary,
          },
          headerTitleStyle: {
            color: LIGHT_THEME.color.white,
          },
          headerTitleAlign: "center",
          headerTintColor: LIGHT_THEME.color.white,
        }}
      />
      <Stack.Screen
        name="auth/reset_password"
        options={{
          title: "Reset Password",
          statusBarColor: LIGHT_THEME.color.primary,
          headerStyle: {
            backgroundColor: LIGHT_THEME.color.primary,
          },
          headerTitleStyle: {
            color: LIGHT_THEME.color.white,
          },
          headerTitleAlign: "center",
          headerTintColor: LIGHT_THEME.color.white,
        }}
      />
      <Stack.Screen
        name="auth/reset_password_error"
        options={{
          headerShown: false,
        }}
      />
    </Stack>
  );
};
