import React, { useEffect } from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { ActivityIndicator, View } from "react-native";
import { RootStackParamList } from "./types";
import { useAuthStore } from "../store/authStore";
import { getDb } from "../db/database";
import { startSyncManager, stopSyncManager } from "../sync/syncManager";

import LoginScreen from "../screens/LoginScreen";
import SelectAreaScreen from "../screens/SelectAreaScreen";
import HomeScreen from "../screens/HomeScreen";
import StoresScreen from "../screens/StoresScreen";
import StoreFormScreen from "../screens/StoreFormScreen";
import NewOrderScreen from "../screens/NewOrderScreen";
import OrderReviewScreen from "../screens/OrderReviewScreen";
import OrderConfirmationScreen from "../screens/OrderConfirmationScreen";
import MyOrdersScreen from "../screens/MyOrdersScreen";
import OrderDetailScreen from "../screens/OrderDetailScreen";

const Stack = createNativeStackNavigator<RootStackParamList>();

export default function RootNavigator() {
  const { user, status, restore } = useAuthStore();

  useEffect(() => {
    getDb().then(() => restore());
  }, []);

  useEffect(() => {
    if (user) {
      startSyncManager();
      return () => stopSyncManager();
    }
  }, [user]);

  if (status !== "ready") {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <ActivityIndicator size="large" />
      </View>
    );
  }

  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerTintColor: "#1a3d7c" }}>
        {user ? (
          <>
            <Stack.Screen name="SelectArea" component={SelectAreaScreen} options={{ title: "Select Area" }} />
            <Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: false }} />
            <Stack.Screen name="Stores" component={StoresScreen} options={{ title: "Medical Stores" }} />
            <Stack.Screen name="StoreForm" component={StoreFormScreen} options={{ title: "Add / Edit Store" }} />
            <Stack.Screen name="NewOrder" component={NewOrderScreen} options={{ title: "New Order" }} />
            <Stack.Screen name="OrderReview" component={OrderReviewScreen} options={{ title: "Review Order" }} />
            <Stack.Screen
              name="OrderConfirmation"
              component={OrderConfirmationScreen}
              options={{ title: "Order Confirmation", headerBackVisible: false }}
            />
            <Stack.Screen name="MyOrders" component={MyOrdersScreen} options={{ title: "My Orders" }} />
            <Stack.Screen name="OrderDetail" component={OrderDetailScreen} options={{ title: "Order Detail" }} />
          </>
        ) : (
          <Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}