import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { View, Text, StyleSheet, Platform } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { colors, radius } from '../lib/theme';
import { useApp } from '../context/AppContext';
import AuthLogin from '../pages/AuthLogin';
import AuthRegister from '../pages/AuthRegister';
import Explore from '../pages/Explore';
import ShopDetails from '../pages/ShopDetails';
import Booking from '../pages/Booking';
import Cart from '../pages/Cart';
import Profile from '../pages/Profile';
import Dashboard from '../pages/Dashboard';
import EventsCreate from '../pages/EventsCreate';

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

const TabIcon = ({ name, focused }: { name: any; focused: boolean }) => (
  <View style={[iconStyles.wrap, focused && iconStyles.wrapActive]}>
    <Ionicons 
      name={focused ? name : `${name}-outline`} 
      size={20} 
      color={focused ? colors.textInverse : '#9cad9f'}
    />
  </View>
);

/* ── Client Tab Stacks ── */
function ExploreStack() {
  return (
    <Stack.Navigator id="ExploreStack" screenOptions={{ headerShown: false }}>
      <Stack.Screen name="Explore" component={Explore} />
      <Stack.Screen name="ShopDetails" component={ShopDetails} />
      <Stack.Screen name="Booking" component={Booking} />
    </Stack.Navigator>
  );
}

function CartStack() {
  return (
    <Stack.Navigator id="CartStack" screenOptions={{ headerShown: false }}>
      <Stack.Screen name="Cart" component={Cart} />
    </Stack.Navigator>
  );
}

function ClientProfileStack() {
  return (
    <Stack.Navigator id="ClientProfileStack" screenOptions={{ headerShown: false }}>
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="EventsCreate" component={EventsCreate} />
      <Stack.Screen name="ShopDetails" component={ShopDetails} />
      <Stack.Screen name="Booking" component={Booking} />
    </Stack.Navigator>
  );
}

function ClientTabs() {
  const { cart } = useApp();
  return (
    <Tab.Navigator
      id="ClientTabs"
      screenOptions={{
        headerShown: false,
        tabBarStyle: tabStyles.bar,
        tabBarActiveTintColor: colors.textInverse,
        tabBarInactiveTintColor: '#9cad9f',
        tabBarLabelStyle: tabStyles.label,
      }}
    >
      <Tab.Screen
        name="ExploreTab"
        component={ExploreStack}
        options={{
          tabBarLabel: 'Explorar',
          tabBarIcon: ({ focused }) => <TabIcon name="search" focused={focused} />,
        }}
      />
      <Tab.Screen
        name="CartTab"
        component={CartStack}
        options={{
          tabBarLabel: 'Carrinho',
          tabBarIcon: ({ focused }) => <TabIcon name="cart" focused={focused} />,
          tabBarBadge: cart.length > 0 ? cart.length : undefined,
          tabBarBadgeStyle: tabStyles.badge,
        }}
      />
      <Tab.Screen
        name="ProfileTab"
        component={ClientProfileStack}
        options={{
          tabBarLabel: 'Perfil',
          tabBarIcon: ({ focused }) => <TabIcon name="person" focused={focused} />,
        }}
      />
    </Tab.Navigator>
  );
}

/* ── Barbearia Tab Stacks ── */
function DashboardStack() {
  return (
    <Stack.Navigator id="DashboardStack" screenOptions={{ headerShown: false }}>
      <Stack.Screen name="Dashboard" component={Dashboard} />
      <Stack.Screen name="EventsCreate" component={EventsCreate} />
    </Stack.Navigator>
  );
}

function BarberProfileStack() {
  return (
    <Stack.Navigator id="BarberProfileStack" screenOptions={{ headerShown: false }}>
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="EventsCreate" component={EventsCreate} />
    </Stack.Navigator>
  );
}

function BarbeariaTabs() {
  return (
    <Tab.Navigator
      id="BarbeariaTabs"
      screenOptions={{
        headerShown: false,
        tabBarStyle: tabStyles.bar,
        tabBarActiveTintColor: colors.textInverse,
        tabBarInactiveTintColor: '#9cad9f',
        tabBarLabelStyle: tabStyles.label,
      }}
    >
      <Tab.Screen
        name="DashboardTab"
        component={DashboardStack}
        options={{
          tabBarLabel: 'Painel',
          tabBarIcon: ({ focused }) => <TabIcon name="grid" focused={focused} />,
        }}
      />
      <Tab.Screen
        name="BarberProfileTab"
        component={BarberProfileStack}
        options={{
          tabBarLabel: 'Perfil',
          tabBarIcon: ({ focused }) => <TabIcon name="person" focused={focused} />,
        }}
      />
    </Tab.Navigator>
  );
}

/* ── Root Navigator ── */
export default function AppNavigator() {
  const { user } = useApp();

  return (
    <NavigationContainer>
      {!user ? (
        <Stack.Navigator
          id="RootStack"
          screenOptions={{
            headerStyle: { backgroundColor: colors.surfaceDark },
            headerTintColor: colors.textInverse,
            headerTitleStyle: { fontWeight: '700' },
          }}
        >
          <Stack.Screen name="Login" component={AuthLogin} options={{ headerShown: false }} />
          <Stack.Screen name="Register" component={AuthRegister} options={{ headerShown: false }} />
          <Stack.Screen name="Explore" component={Explore} options={{ headerShown: false }} />
          <Stack.Screen name="ShopDetails" component={ShopDetails} options={{ headerShown: false }} />
        </Stack.Navigator>
      ) : user.role === 'barbearia' ? (
        <BarbeariaTabs />
      ) : (
        <ClientTabs />
      )}
    </NavigationContainer>
  );
}

const tabStyles = StyleSheet.create({
  bar: {
    backgroundColor: colors.surfaceDark,
    borderTopColor: colors.borderDark,
    borderTopWidth: 1,
    height: Platform.OS === 'ios' ? 88 : 64,
    paddingBottom: Platform.OS === 'ios' ? 28 : 8,
    paddingTop: 8,
  },
  label: {
    fontSize: 10,
    fontWeight: '700',
    letterSpacing: 0,
  },
  badge: {
    backgroundColor: colors.accent,
    color: colors.textInverse,
    fontSize: 10,
    fontWeight: '800',
    minWidth: 18,
    height: 18,
    lineHeight: 14,
  },
});

const iconStyles = StyleSheet.create({
  wrap: {
    width: 32,
    height: 32,
    borderRadius: radius.md,
    alignItems: 'center',
    justifyContent: 'center',
  },
  wrapActive: {
    backgroundColor: colors.primary,
  },
  emoji: {
    fontSize: 18,
    color: '#9cad9f',
  },
});
