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

const ACTIVE_TINT = "rgba(228, 98, 18, 1)";
const INACTIVE_TINT = "#94a3b8";

export default function TabsLayout() {
  const { colorScheme } = useColorScheme();
  const isDark = colorScheme === "dark";

  const NAV_BG =
    colorScheme === "dark" ? "rgba(31,31,31, 1)" : "rgba(255,255,255, 1)";
  const BORDER_COLOR = isDark ? "#1e293b" : "#ffffff";

  return (
    <Tabs
      screenOptions={{
        headerShown: false,
        tabBarShowLabel: true,
        tabBarActiveTintColor: ACTIVE_TINT,
        tabBarInactiveTintColor: INACTIVE_TINT,
        tabBarButton: ({ ref, ...navProps }) => (
          <Pressable {...navProps} android_ripple={null} />
        ),
        tabBarLabelStyle: {
          fontSize: 9,
          fontWeight: "700",
          marginBottom: Platform.OS === "ios" ? 0 : 4,
          textTransform: "uppercase",
          letterSpacing: 0.5,
        },
        tabBarStyle: {
          backgroundColor: NAV_BG,
          borderTopWidth: 0,
          elevation: isDark ? 0 : 6,
          shadowColor: "#000",
          shadowOffset: { width: 0, height: -10 },
          shadowOpacity: isDark ? 0 : 0.1,
          shadowRadius: 20,
          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,
        },
      }}
    >
      <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 }) => (
            <View className="-mt-12">
              <View
                className="h-16 w-16 rounded-full bg-primary items-center justify-center border-4"
                style={{ borderColor: BORDER_COLOR }}
              >
                <ScanLine color="white" size={28} strokeWidth={3} />
              </View>
            </View>
          ),
        }}
      />
      <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>
  );
}