import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import React from 'react';
import { ActivityIndicator, View } from 'react-native';
import { useSession } from '../auth/session';
import { LoginScreen } from '../screens/LoginScreen';
import { ProjectDetailScreen } from '../screens/ProjectDetailScreen';
import { ProjectsScreen } from '../screens/ProjectsScreen';
import { IssueDetailScreen } from '../screens/IssueDetailScreen';
import { FeatureDetailScreen } from '../screens/FeatureDetailScreen';
import { InspectionFormScreen } from '../screens/InspectionFormScreen';
import { IssueCreateScreen } from '../screens/IssueCreateScreen';
import { OutboxScreen } from '../screens/OutboxScreen';
import { PhotoSettingsScreen } from '../screens/PhotoSettingsScreen';
import { RootStackParamList } from './types';

const Stack = createNativeStackNavigator<RootStackParamList>();

export function RootNavigator() {
  const { ready, token } = useSession();

  if (!ready) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" />
      </View>
    );
  }

  if (!token) {
    return <LoginScreen />;
  }

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Projects"
          component={ProjectsScreen}
          options={{ title: 'Proyectos' }}
        />
        <Stack.Screen
          name="ProjectDetail"
          component={ProjectDetailScreen}
          options={({ route }) => ({ title: route.params.name })}
        />
        <Stack.Screen
          name="IssueDetail"
          component={IssueDetailScreen}
          options={({ route }) => ({ title: route.params.title })}
        />
        <Stack.Screen
          name="FeatureDetail"
          component={FeatureDetailScreen}
          options={({ route }) => ({ title: route.params.name })}
        />
        <Stack.Screen
          name="InspectionForm"
          component={InspectionFormScreen}
          options={{ title: 'Nueva inspección', presentation: 'modal' }}
        />
        <Stack.Screen
          name="IssueCreate"
          component={IssueCreateScreen}
          options={{ title: 'Nueva incidencia', presentation: 'modal' }}
        />
        <Stack.Screen
          name="Outbox"
          component={OutboxScreen}
          options={{ title: 'Cola de sincronización' }}
        />
        <Stack.Screen
          name="PhotoSettings"
          component={PhotoSettingsScreen}
          options={{ title: 'Configuración de fotos', presentation: 'modal' }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
