import { useAuth } from "@clerk/clerk-expo";
import { Redirect } from "expo-router";
import { useEffect, useState } from "react";
import { ActivityIndicator, View } from "react-native";

import { fetchAPI } from "@/lib/fetch";

const App = () => {
  const { isSignedIn, userId } = useAuth();
  const [role, setRole] = useState<string | null | undefined>(undefined);

  useEffect(() => {
    if (!isSignedIn || !userId) return;

    fetchAPI(`/(api)/user?clerkId=${userId}`)
      .then((res) => setRole(res?.data?.role ?? null))
      .catch(() => setRole(null));
  }, [isSignedIn, userId]);

  if (!isSignedIn) return <Redirect href="/(auth)/welcome" />;

  // Still loading the user's role from the database.
  if (role === undefined) {
    return (
      <View className="flex-1 items-center justify-center bg-white">
        <ActivityIndicator size="large" color="#0286FF" />
      </View>
    );
  }

  if (role === "driver") return <Redirect href="/(root)/driver-home" />;
  if (role === "rider") return <Redirect href="/(root)/(tabs)/home" />;

  // Signed in but no role chosen yet.
  return <Redirect href="/(root)/role" />;
};

export default App;