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

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

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

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

    // Prefer the role cached at sign-in; fall back to a fresh fetch.
    if (user?.role !== undefined && user?.role !== null) {
      setRole(user.role);
      return;
    }

    fetchAPI("/(api)/user")
      .then((res) => setRole(res?.data?.role ?? null))
      .catch(() => setRole(null));
  }, [isSignedIn, user]);

  if (!isLoaded) {
    return (
      <View className="flex-1 items-center justify-center bg-white">
        <ActivityIndicator size="large" color="#0286FF" />
      </View>
    );
  }

  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;