import { Redirect, Tabs } from 'expo-router';
import { Home, Clock, CalendarIcon, FileText, Image as ImageIcon, Car } from 'lucide-react-native';
import { useContext } from 'react';
import { AuthContext } from '@/utils/authContext';
import { useSafeAreaInsets } from "react-native-safe-area-context";

export default function ProtectedLayout() {
  const authState = useContext(AuthContext);
  const insets = useSafeAreaInsets();

  if (!authState.isReady) {
    return null;
  }

  if (!authState.isAuthenticated) {
    return <Redirect href="/login" />;
  }

  return (
    <Tabs
      screenOptions={{
        headerShown: false,
        tabBarStyle: {
          backgroundColor: '#ffffff',
          borderTopWidth: 1,
          borderTopColor: '#f3f4f6',
          height: 70 + insets.bottom,
          paddingBottom: insets.bottom,
          paddingTop: 10,
          paddingHorizontal: 10,
        },
        tabBarActiveTintColor: '#1071C2',
        tabBarInactiveTintColor: '#9ca3af',
        tabBarLabelStyle: {
          fontSize: 12,
          fontWeight: '600',
          marginTop: 4
        }
      }}
      backBehavior='history'
    >
      <Tabs.Screen
        name="index"
        options={{
          title: 'Home',
          tabBarIcon: ({ color, size }) => <Home pointerEvents="none" color={color} size={24} />,
        }}
      />
      <Tabs.Screen
        name="attendance/index"
        options={{
          title: 'Presenze',
          tabBarIcon: ({ color, size }) => <Clock pointerEvents="none" color={color} size={24} />,
        }}
      />
      <Tabs.Screen
        name="journal"
        options={{
          title: 'Giornale',
          tabBarIcon: ({ color, size }) => <ImageIcon pointerEvents="none" color={color} size={24} />,
        }}
      />
      <Tabs.Screen
        name="permits/index"
        options={{
          title: 'Ferie',
          tabBarIcon: ({ color, size }) => <CalendarIcon pointerEvents="none" color={color} size={24} />,
        }}
      />
      <Tabs.Screen
        name="invoice"
        options={{
          title: 'Fatture',
          tabBarIcon: ({ color, size }) => <FileText pointerEvents="none" color={color} size={24} />,
          href: authState.user?.isAdmin ? undefined : null,
        }}
      />
      <Tabs.Screen
        name="machine/index"
        options={{
          title: 'Macchine',
          tabBarIcon: ({ color, size }) => <Car pointerEvents="none" color={color} size={24} />,
          href: authState.user?.isAdmin ? undefined : null,
        }}
      />
      <Tabs.Screen
        name="profile"
        options={{
          href: null,
          title: 'Profilo',
        }}
      />
    </Tabs>
  );
}