import { Redirect, Tabs } from 'expo-router';
import { Home, Clock, Zap, CalendarIcon, Building } from 'lucide-react-native';
import { useContext } from 'react';
import { AuthContext } from '@/utils/authContext';

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

  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: 90,
          paddingBottom: 30,
          paddingTop: 10,
          paddingHorizontal: 10,
        },
        tabBarActiveTintColor: '#099499',
        tabBarInactiveTintColor: '#9ca3af',
        tabBarLabelStyle: {
            fontSize: 12,
            fontWeight: '600',
            marginTop: 4
        }
      }}
      backBehavior='history'
    >
      <Tabs.Screen
        name="index"
        options={{
          title: 'Home',
          tabBarIcon: ({ color, size }) => <Home color={color} size={24} />,
        }}
      />
      <Tabs.Screen
        name="attendance/index"
        options={{
          title: 'Presenze',
          tabBarIcon: ({ color, size }) => <Clock color={color} size={24} />,
        }}
      />
      <Tabs.Screen
        name="permits/index"
        options={{
          title: 'Permessi',
          tabBarIcon: ({ color, size }) => <CalendarIcon color={color} size={24} />,
        }}
      />
      <Tabs.Screen
        name="sites"
        options={{
          title: 'Cantieri',
          tabBarIcon: ({ color, size }) => <Building color={color} size={24} />,
        }}
      />
      {/* // TODO: Probably needs to be restricted to admin */}
      <Tabs.Screen
        name="automation"
        options={{
          title: 'Domotica',
          tabBarIcon: ({ color, size }) => <Zap color={color} size={24} />,
        }}
      />
      {/* TODO: Should be removed - move tabs inside (tabs) and refactor _layout */}
      <Tabs.Screen
        name="profile"
        options={{
          href: null,
          title: 'Profilo',
        }}
      />
    </Tabs>
  );
}