import React from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { RootStackParamList } from './types';
import { AppNavigator } from './AppNavigator';
import { LoginScreen } from '../screens/auth/LoginScreen';
import { SignupScreen } from '../screens/auth/SignupScreen';
import { ForgotPasswordScreen } from '../screens/auth/ForgotPasswordScreen';
import { useTheme } from '../theme';
import { COLORS } from '../theme';

const Stack = createNativeStackNavigator<RootStackParamList>();

export function RootNavigator() {
  const { theme } = useTheme();

  return (
    <Stack.Navigator>
      {/* Tabs are always the base — marketplace is public */}
      <Stack.Screen name="Main" component={AppNavigator} options={{ headerShown: false }} />

      {/* Auth screens slide up as modals from any tab */}
      <Stack.Screen
        name="Login"
        component={LoginScreen}
        options={{
          presentation: 'modal',
          headerShown: true,
          title: 'Sign In',
          headerStyle: { backgroundColor: theme.surface },
          headerTintColor: COLORS.primary,
          headerTitleStyle: { color: theme.text },
        }}
      />
      <Stack.Screen
        name="Signup"
        component={SignupScreen}
        options={{
          presentation: 'modal',
          headerShown: true,
          title: 'Create Account',
          headerStyle: { backgroundColor: theme.surface },
          headerTintColor: COLORS.primary,
          headerTitleStyle: { color: theme.text },
        }}
      />
      <Stack.Screen
        name="ForgotPassword"
        component={ForgotPasswordScreen}
        options={{
          presentation: 'modal',
          headerShown: true,
          title: 'Reset Password',
          headerStyle: { backgroundColor: theme.surface },
          headerTintColor: COLORS.primary,
          headerTitleStyle: { color: theme.text },
        }}
      />
    </Stack.Navigator>
  );
}