import { Tabs, router } from "expo-router";
import { Home, ScanLine, FileText, Wallet, Newspaper, Scan } from "@/lib/icons";
import { Platform, View, Pressable } from "react-native";
import { ShadowWrapper } from "@/components/ShadowWrapper";

const NAV_BG = "#ffffff";
const ACTIVE_TINT = "#ea580c";
const INACTIVE_TINT = "#94a3b8";

export default function TabsLayout() {
  return (
    <Tabs
      screenOptions={{
        headerShown: false,
        tabBarShowLabel: true,
        tabBarActiveTintColor: ACTIVE_TINT,
        tabBarInactiveTintColor: INACTIVE_TINT,
        tabBarLabelStyle: {
          fontSize: 9,
          fontWeight: "700",
          marginBottom: Platform.OS === "ios" ? 0 : 4,
          textTransform: "uppercase",
          letterSpacing: 0.5,
        },
        tabBarStyle: {
          backgroundColor: NAV_BG,
          borderTopWidth: 0,
          elevation: 10,
          height: Platform.OS === "ios" ? 75 : 75,
          paddingBottom: Platform.OS === "ios" ? 30 : 10,
          paddingTop: 10,
          marginHorizontal: 20,
          position: "absolute",
          bottom: 25,
          left: 20,
          right: 20,
          borderRadius: 32,
          shadowColor: "#000",
          shadowOffset: { width: 0, height: 10 },
          shadowOpacity: 0.12,
          shadowRadius: 20,
        },
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          tabBarLabel: "Home",
          tabBarIcon: ({ color, focused }) => (
            <View className={focused ? "bg-primary/5 rounded-2xl p-2" : "p-2"}>
              <Home color={color} size={18} strokeWidth={focused ? 2.5 : 2} />
            </View>
          ),
        }}
      />
      <Tabs.Screen
        name="payments"
        options={{
          tabBarLabel: "Payments",
          tabBarIcon: ({ color, focused }) => (
            <View className={focused ? "bg-primary/5 rounded-2xl p-2" : "p-2"}>
              <Wallet color={color} size={18} strokeWidth={focused ? 2.5 : 2} />
            </View>
          ),
        }}
      />
      <Tabs.Screen
        name="scan"
        options={{
          tabBarLabel: "SCAN",
          tabBarLabelStyle: {
            fontSize: 9,
            fontWeight: "700",
            color: INACTIVE_TINT,
          },
          tabBarIcon: ({ focused }) => (
            <ShadowWrapper level="lg" className="-mt-12">
              <View className="h-16 w-16 rounded-full bg-primary items-center justify-center border-4 border-white">
                <ScanLine color="white" size={28} strokeWidth={3} />
              </View>
            </ShadowWrapper>
          ),
        }}
      />
      <Tabs.Screen
        name="proforma"
        options={{
          tabBarLabel: "Proforma",
          tabBarIcon: ({ color, focused }) => (
            <View className={focused ? "bg-primary/5 rounded-2xl p-2" : "p-2"}>
              <FileText
                color={color}
                size={18}
                strokeWidth={focused ? 2.5 : 2}
              />
            </View>
          ),
        }}
      />
      <Tabs.Screen
        name="news"
        options={{
          tabBarLabel: "News",
          tabBarIcon: ({ color, focused }) => (
            <View className={focused ? "bg-primary/5 rounded-2xl p-2" : "p-2"}>
              <Newspaper
                color={color}
                size={18}
                strokeWidth={focused ? 2.5 : 2}
              />
            </View>
          ),
        }}
      />
    </Tabs>
  );
}