import React, { useEffect } from 'react';
import { Stack, useRouter, useSegments } from 'expo-router';
import { StatusBar } from 'expo-status-bar';
import { useAuthStore } from '@store/authStore';

/**
 * Root layout do expo-router.
 * Carrega a sessão armazenada e controla o fluxo auth vs app.
 */
export default function RootLayout(): React.ReactElement | null {
  const { loadStoredSession, isLoading, isAuthenticated } = useAuthStore();
  const router = useRouter();
  const segments = useSegments();

  useEffect(() => {
    loadStoredSession();
  }, [loadStoredSession]);

  useEffect(() => {
    if (isLoading) return;
    const inAuthGroup = segments[0] === '(auth)';
    const inPublicRoute = segments[0] === 'verify-email' || segments[0] === 'filament';
    if (isAuthenticated && inAuthGroup) {
      router.replace('/(app)/(tabs)/home');
    } else if (!isAuthenticated && !inAuthGroup && !inPublicRoute) {
      router.replace('/(auth)/login');
    }
  }, [isAuthenticated, isLoading, segments, router]);

  if (isLoading) return null;

  return (
    <>
      <StatusBar style="light" backgroundColor="transparent" translucent />
      <Stack screenOptions={{ headerShown: false, contentStyle: { backgroundColor: '#1E1B18' } }}>
        <Stack.Screen name="index" />
        <Stack.Screen name="(auth)" />
        <Stack.Screen name="(app)" />
        <Stack.Screen name="verify-email" />
        <Stack.Screen name="filament/[id]" />
      </Stack>
    </>
  );
}