import { Tabs } from "expo-router/tabs";
import { Redirect } from "expo-router";
import {
  View,
  ActivityIndicator,
  StatusBar,
} from "react-native";
import { LinearGradient } from "expo-linear-gradient";
import { Ionicons } from "@expo/vector-icons";
import { useAuth } from "@/src/contexts/AuthContext";
import { tw, theme, MyTouchableOpacity, MyText } from "common-ui";
import ProfileChecker from "@/components/ProfileChecker";
import HomeIcon from "@/components/icons/HomeIcon";
import StoresIcon from "@/components/icons/StoresIcon";
import OrderAgainIcon from "@/components/icons/OrderAgainIcon";
import MeIcon from "@/components/icons/MeIcon";
import { useAppStore } from "@/src/store/appStore";

export default function Layout() {
  const { isAuthenticated, isLoading } = useAuth();
  const hideTabsNav = useAppStore((state) => state.hideTabsNav);
  const shouldHideTabs = Object.values(hideTabsNav).some(Boolean);



  if (isLoading) {
    return (
      <View style={tw`flex-1 justify-center items-center bg-white`}>
        <ActivityIndicator size="large" color={theme.colors.pink2} />
      </View>
    );
  }

  return (
    <>
      {/* <StatusBar barStyle="dark-content" backgroundColor={theme.colors.brand25} /> */}
      <Tabs
        // backBehavior="history"
        screenOptions={{
          tabBarActiveTintColor: theme.colors.brand500,
          tabBarInactiveTintColor: '#4B5563',
          tabBarStyle: shouldHideTabs ? { display: 'none' } : {
            backgroundColor: 'white',
            borderTopColor: '#E5E7EB',
            borderTopWidth: 1,
            paddingBottom: 5,
            paddingTop: 5,
            height: 60,
          },
          headerShown: false,
        }}
      >
        <Tabs.Screen
          name="(tabs)/home"
          options={{
            tabBarLabel: 'Home',
            tabBarIcon: ({ color, size, focused }) => (
              <HomeIcon focused={focused} size={size} color={color} />
            ),
          }}
        />
        <Tabs.Screen
          name="(tabs)/stores"
          options={{
            tabBarLabel: 'Stores',
            tabBarIcon: ({ color, size, focused }) => (
              <StoresIcon focused={focused} size={size} color={color} />
            ),
          }}
        />
        <Tabs.Screen
           name="(tabs)/flash-delivery"
           options={{
             tabBarLabel: () => null,
             tabBarIcon: () => null,
             tabBarButton: (props) => (
               <MyTouchableOpacity
                 {...(props as any)}
                  style={[
                    props.style,
                    tw`items-center justify-center -top-2`, // Adjusted elevation
                  ]}
                >
                 <View style={tw`items-center`}>
                   <LinearGradient
                     colors={[theme.colors.brand400, theme.colors.brand600]}
                     style={tw`w-14 h-14 rounded-full justify-center items-center shadow-lg border-4 border-white`}
                   >
                      <Ionicons name="flash" size={28} color="white" />
                    </LinearGradient>
                      <MyText numberOfLines={1} style={tw`text-[10px] font-bold mt-0.5 ${props.accessibilityState?.selected ? 'text-brand600' : 'text-gray-500'}`}>Flash Delivery</MyText>
                  </View>
               </MyTouchableOpacity>
             ),
           }}
         />
        <Tabs.Screen
          name="(tabs)/order-again"
          options={{
            tabBarLabel: 'Order Again',
            tabBarIcon: ({ color, size, focused }) => (
              <OrderAgainIcon focused={focused} size={size} color={color} />
            ),
          }}
        />
        <Tabs.Screen
          name="(tabs)/me"
          options={{
            tabBarLabel: 'Me',
            tabBarIcon: ({ color, size, focused }) => (
              <MeIcon focused={focused} size={size} color={color} />
            ),
          }}
        />
      </Tabs>
      <ProfileChecker />
    </>
  );
}