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 { 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 = ({ icon, focused }: { icon: string; focused: boolean }) => (
  <View style={[iconStyles.wrap, focused && iconStyles.wrapActive]}>
    <Text style={iconStyles.emoji}>{icon}</Text>
  </View>
);

/* ── Client Tab Stacks ── */
function ExploreStack() {
  return (
    <Stack.Navigator 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 screenOptions={{ headerShown: false }}>
      <Stack.Screen name="Cart" component={Cart} />
    </Stack.Navigator>
  );
}

function ClientProfileStack() {
  return (
    <Stack.Navigator 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
      screenOptions={{
        headerShown: false,
        tabBarStyle: tabStyles.bar,
        tabBarActiveTintColor: '#a5b4fc',
        tabBarInactiveTintColor: '#475569',
        tabBarLabelStyle: tabStyles.label,
      }}
    >
      <Tab.Screen
        name="ExploreTab"
        component={ExploreStack}
        options={{
          tabBarLabel: 'Explorar',
          tabBarIcon: ({ focused }) => <TabIcon icon="◉" focused={focused} />,
        }}
      />
      <Tab.Screen
        name="CartTab"
        component={CartStack}
        options={{
          tabBarLabel: 'Carrinho',
          tabBarIcon: ({ focused }) => <TabIcon icon="◫" focused={focused} />,
          tabBarBadge: cart.length > 0 ? cart.length : undefined,
          tabBarBadgeStyle: tabStyles.badge,
        }}
      />
      <Tab.Screen
        name="ProfileTab"
        component={ClientProfileStack}
        options={{
          tabBarLabel: 'Perfil',
          tabBarIcon: ({ focused }) => <TabIcon icon="◎" focused={focused} />,
        }}
      />
    </Tab.Navigator>
  );
}

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

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

function BarbeariaTabs() {
  return (
    <Tab.Navigator
      screenOptions={{
        headerShown: false,
        tabBarStyle: tabStyles.bar,
        tabBarActiveTintColor: '#a5b4fc',
        tabBarInactiveTintColor: '#475569',
        tabBarLabelStyle: tabStyles.label,
      }}
    >
      <Tab.Screen
        name="DashboardTab"
        component={DashboardStack}
        options={{
          tabBarLabel: 'Painel',
          tabBarIcon: ({ focused }) => <TabIcon icon="▦" focused={focused} />,
        }}
      />
      <Tab.Screen
        name="BarberProfileTab"
        component={BarberProfileStack}
        options={{
          tabBarLabel: 'Perfil',
          tabBarIcon: ({ focused }) => <TabIcon icon="◎" focused={focused} />,
        }}
      />
    </Tab.Navigator>
  );
}

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

  return (
    <NavigationContainer>
      {!user ? (
        <Stack.Navigator
          screenOptions={{
            headerStyle: { backgroundColor: '#0a0a0f' },
            headerTintColor: '#f8fafc',
            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: '#0a0a0f',
    borderTopColor: 'rgba(255,255,255,0.06)',
    borderTopWidth: 1,
    height: Platform.OS === 'ios' ? 88 : 64,
    paddingBottom: Platform.OS === 'ios' ? 28 : 8,
    paddingTop: 8,
  },
  label: {
    fontSize: 10,
    fontWeight: '700',
    letterSpacing: 0.5,
  },
  badge: {
    backgroundColor: '#6366f1',
    color: '#fff',
    fontSize: 10,
    fontWeight: '800',
    minWidth: 18,
    height: 18,
    lineHeight: 14,
  },
});

const iconStyles = StyleSheet.create({
  wrap: {
    width: 32,
    height: 32,
    borderRadius: 10,
    alignItems: 'center',
    justifyContent: 'center',
  },
  wrapActive: {
    backgroundColor: 'rgba(99,102,241,0.15)',
  },
  emoji: {
    fontSize: 18,
    color: '#94a3b8',
  },
});
