import React, { useEffect, useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Text } from 'react-native';

import { getStoredUser } from '../services/api';
import { User } from '../types';

// Auth screens
import LoginScreen from '../screens/auth/Login';
import RegisterScreen from '../screens/auth/Register';

// Customer screens
import HomeScreen from '../screens/customer/Home';
import ProductListScreen from '../screens/customer/ProductList';
import CartScreen from '../screens/customer/Cart';
import MyOrdersScreen from '../screens/customer/MyOrders';
import ProfileScreen from '../screens/customer/Profile';

// Admin screens
import AdminDashboardScreen from '../screens/admin/AdminDashboard';
import AddProductScreen from '../screens/admin/AddProduct';
import ManageOrdersScreen from '../screens/admin/ManageOrders';
import ManageUsersScreen from '../screens/admin/ManageUsers';

export type RootStackParamList = {
  Login: undefined;
  Register: undefined;
  CustomerTabs: undefined;
  AdminTabs: undefined;
};

const Stack = createNativeStackNavigator<RootStackParamList>();
const CustomerTab = createBottomTabNavigator();
const AdminTab = createBottomTabNavigator();

function CustomerTabs() {
  return (
    <CustomerTab.Navigator screenOptions={{ tabBarActiveTintColor: '#f97316' }}>
      <CustomerTab.Screen
        name="Home"
        component={HomeScreen}
        options={{ tabBarLabel: 'Home', tabBarIcon: () => <Text>🏠</Text> }}
      />
      <CustomerTab.Screen
        name="Products"
        component={ProductListScreen}
        options={{ tabBarLabel: 'Products', tabBarIcon: () => <Text>🛒</Text> }}
      />
      <CustomerTab.Screen
        name="Cart"
        component={CartScreen}
        options={{ tabBarLabel: 'Cart', tabBarIcon: () => <Text>🛍️</Text> }}
      />
      <CustomerTab.Screen
        name="MyOrders"
        component={MyOrdersScreen}
        options={{ tabBarLabel: 'Orders', tabBarIcon: () => <Text>📦</Text> }}
      />
      <CustomerTab.Screen
        name="Profile"
        component={ProfileScreen}
        options={{ tabBarLabel: 'Profile', tabBarIcon: () => <Text>👤</Text> }}
      />
    </CustomerTab.Navigator>
  );
}

function AdminTabs() {
  return (
    <AdminTab.Navigator screenOptions={{ tabBarActiveTintColor: '#f97316' }}>
      <AdminTab.Screen
        name="Dashboard"
        component={AdminDashboardScreen}
        options={{ tabBarLabel: 'Dashboard', tabBarIcon: () => <Text>📊</Text> }}
      />
      <AdminTab.Screen
        name="Products"
        component={AddProductScreen}
        options={{ tabBarLabel: 'Products', tabBarIcon: () => <Text>📦</Text> }}
      />
      <AdminTab.Screen
        name="Orders"
        component={ManageOrdersScreen}
        options={{ tabBarLabel: 'Orders', tabBarIcon: () => <Text>🚚</Text> }}
      />
      <AdminTab.Screen
        name="Users"
        component={ManageUsersScreen}
        options={{ tabBarLabel: 'Users', tabBarIcon: () => <Text>👥</Text> }}
      />
    </AdminTab.Navigator>
  );
}

export default function AppNavigator() {
  const [initialRoute, setInitialRoute] = useState<
    'Login' | 'CustomerTabs' | 'AdminTabs' | null
  >(null);

  useEffect(() => {
    (async () => {
      const user: User | null = await getStoredUser();
      if (!user) setInitialRoute('Login');
      else if (user.role === 'admin') setInitialRoute('AdminTabs');
      else setInitialRoute('CustomerTabs');
    })();
  }, []);

  if (!initialRoute) return null;

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName={initialRoute} screenOptions={{ headerShown: false }}>
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="Register" component={RegisterScreen} />
        <Stack.Screen name="CustomerTabs" component={CustomerTabs} />
        <Stack.Screen name="AdminTabs" component={AdminTabs} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
