import React from 'react';
import { Tabs } from 'expo-router';
import { Platform, StyleSheet, Dimensions } from 'react-native';
import { Home, BarChart2, User, DollarSign } from 'lucide-react-native';
import { useTheme } from '@/context/ThemeContext';

export default function TabsLayout() {
  const { theme, colors } = useTheme();
  const screenWidth = Dimensions.get('window').width;
  const isSmallScreen = screenWidth < 360;
  
  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: colors.primary,
        tabBarInactiveTintColor: colors.textSecondary,
        tabBarStyle: {
          backgroundColor: colors.background,
          borderTopColor: colors.border,
          height: Platform.OS === 'ios' ? 85 : 58,
          paddingBottom: Platform.OS === 'ios' ? 28 : 8,
        },
        tabBarLabelStyle: {
          fontSize: isSmallScreen ? 10 : 12,
          fontWeight: '500',
          marginTop: 0,
          marginBottom: Platform.OS === 'ios' ? 4 : 6,
          opacity: 1,
          display: 'flex',
          color: colors.text,
        },
        tabBarIconStyle: {
          marginBottom: 0,
        },
        headerStyle: {
          backgroundColor: colors.background,
          borderBottomColor: colors.border,
          borderBottomWidth: 1,
          height: Platform.OS === 'ios' ? 90 : 60,
        },
        headerTintColor: colors.text,
        headerTitleStyle: {
          fontWeight: 'bold',
          fontSize: isSmallScreen ? 16 : 18,
        },
        contentStyle: {
          backgroundColor: colors.background,
        },
        tabBarItemStyle: {
          paddingVertical: 4,
        },
        tabBarHideOnKeyboard: true,
        tabBarShowLabel: true,
        tabBarAllowFontScaling: false,
        // Hide all headers by default in the tab navigator
        headerShown: false,
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: 'Trade',
          tabBarIcon: ({ color }) => <Home size={isSmallScreen ? 20 : 22} color={color} />,
        }}
      />
      <Tabs.Screen
        name="trade-history"
        options={{
          title: 'History',
          tabBarIcon: ({ color }) => <BarChart2 size={isSmallScreen ? 20 : 22} color={color} />,
          // Show header only for trade-history
          headerShown: true,
          headerTitle: "Trade History",
        }}
      />
      <Tabs.Screen
        name="withdraw"
        options={{
          title: 'Withdraw',
          tabBarIcon: ({ color }) => <DollarSign size={isSmallScreen ? 20 : 22} color={color} />,
        }}
      />
      <Tabs.Screen
        name="profile"
        options={{
          title: 'Profile',
          tabBarIcon: ({ color }) => <User size={isSmallScreen ? 20 : 22} color={color} />,
        }}
      />
    </Tabs>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});