import { Stack } from "expo-router/stack";
import { ConvexProvider, ConvexReactClient } from "convex/react";
import { useState, createContext, useContext, useEffect, useCallback } from "react";
import { ThemeProvider } from "../components/theme";

const convex = new ConvexReactClient(process.env.EXPO_PUBLIC_CONVEX_URL!);

type AuthState = {
  token: string | null;
  userId: string | null;
  isAuthenticated: boolean;
  login: (token: string, userId: string) => Promise<void>;
  logout: () => Promise<void>;
};

const AuthContext = createContext<AuthState>({
  token: null,
  userId: null,
  isAuthenticated: false,
  login: async () => {},
  logout: async () => {},
});

export function useAuth() {
  return useContext(AuthContext);
}

const TOKEN_KEY = "mojmajstor_auth_token";
const USER_ID_KEY = "mojmajstor_auth_userId";

export default function RootLayout() {
  const [token, setToken] = useState<string | null>(null);
  const [userId, setUserId] = useState<string | null>(null);
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    Promise.all([
      localStorage.getItem(TOKEN_KEY),
      localStorage.getItem(USER_ID_KEY),
    ]).then(([t, u]) => {
      if (t) setToken(t);
      if (u) setUserId(u);
      setLoaded(true);
    });
  }, []);

  const login = useCallback(async (newToken: string, newUserId: string) => {
    localStorage.setItem(TOKEN_KEY, newToken);
    localStorage.setItem(USER_ID_KEY, newUserId);
    setToken(newToken);
    setUserId(newUserId);
  }, []);

  const logout = useCallback(async () => {
    localStorage.removeItem(TOKEN_KEY);
    localStorage.removeItem(USER_ID_KEY);
    setToken(null);
    setUserId(null);
  }, []);

  if (!loaded) return null;

  return (
    <ConvexProvider client={convex}>
      <ThemeProvider>
        <AuthContext.Provider
          value={{ token, userId, isAuthenticated: !!token, login, logout }}
        >
          <Stack screenOptions={{ headerShown: false }}>
            <Stack.Screen name="(auth)" />
            <Stack.Screen name="(tabs)" />
            <Stack.Screen name="ad/[id]" options={{ presentation: "card" }} />
            <Stack.Screen name="ad/create" options={{ presentation: "modal" }} />
            <Stack.Screen name="post/[id]" options={{ presentation: "card" }} />
            <Stack.Screen name="post/create" options={{ presentation: "modal" }} />
            <Stack.Screen name="chat/[id]" options={{ presentation: "card" }} />
            <Stack.Screen name="review/create" options={{ presentation: "modal" }} />
          </Stack>
        </AuthContext.Provider>
      </ThemeProvider>
    </ConvexProvider>
  );
}