import React, { useEffect, useState } from "react";
import "../global.css";
import { Stack } from "expo-router";
import { StatusBar } from "expo-status-bar";
import { PortalHost } from "@rn-primitives/portal";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { View } from "react-native";
import { useRestoreTheme } from "@/lib/theme";

export default function RootLayout() {
  useRestoreTheme();
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  if (!isMounted) return null;

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <SafeAreaProvider>
        <View className="flex-1 bg-background">
          <StatusBar style="light" />
          <Stack
            screenOptions={{
              headerStyle: { backgroundColor: "#2d2d2d" },
              headerTintColor: "#ffffff",
              headerTitleStyle: { fontWeight: "600" },
            }}
          >
            <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
            <Stack.Screen
              name="proforma/[id]"
              options={{ title: "Proforma request" }}
            />
            <Stack.Screen name="payments/[id]" options={{ title: "Payment" }} />
            <Stack.Screen
              name="notifications/index"
              options={{ title: "Notifications" }}
            />
            <Stack.Screen
              name="notifications/settings"
              options={{ title: "Notification settings" }}
            />
            <Stack.Screen
              name="login"
              options={{ title: "Sign in", headerShown: false }}
            />
            <Stack.Screen
              name="register"
              options={{ title: "Create account", headerShown: false }}
            />
            <Stack.Screen name="invoices/[id]" options={{ title: "Invoice" }} />
            <Stack.Screen name="reports/index" options={{ title: "Reports" }} />
            <Stack.Screen
              name="documents/index"
              options={{ title: "Documents" }}
            />
            <Stack.Screen name="settings" options={{ title: "Settings" }} />
            <Stack.Screen name="profile" options={{ headerShown: false }} />
          </Stack>
          <PortalHost />
        </View>
      </SafeAreaProvider>
    </GestureHandlerRootView>
  );
}