import { Tabs } from "expo-router";
import React from "react";
import { Platform } from "react-native";

import { HapticTab } from "@/components/HapticTab";
import TabBarBackground from "@/components/ui/TabBarBackground";
import { useColorScheme } from "@/hooks/useColorScheme";
import { MessageCircle, Calendar, Grid3X3, Settings } from "lucide-react-native";

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

  return (
    <Tabs
      screenOptions={{
        // Colors and theming
        tabBarActiveTintColor: "#3b82f6", // Modern blue color
        tabBarInactiveTintColor: isDark ? "#9CA3AF" : "#6B7280",
        headerShown: false,
        tabBarButton: HapticTab,
        tabBarBackground: TabBarBackground,

        // Enhanced styling
        tabBarStyle: {
          backgroundColor: isDark ? "#1F2937" : "#FFFFFF",
          borderTopWidth: 0,
          elevation: 20,
          shadowColor: "#000000",
          shadowOffset: { width: 0, height: -4 },
          shadowOpacity: 0.1,
          shadowRadius: 20,
          height: Platform.OS === "ios" ? 88 : 70,
          paddingTop: 8,
          paddingBottom: Platform.OS === "ios" ? 16 : 8,
          paddingHorizontal: 12,
          borderTopLeftRadius: 24,
          borderTopRightRadius: 24,
          position: "absolute",
          overflow: "hidden",
        },

        // Label styling
        tabBarLabelStyle: {
          fontSize: 12,
          fontWeight: "600",
          marginTop: 4,
          marginBottom: Platform.OS === "ios" ? 0 : 4,
        },

        // Icon styling
        tabBarIconStyle: {
          marginTop: 2,
        },

        // Animation and interaction
        tabBarHideOnKeyboard: true,
        tabBarAllowFontScaling: false,
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: "Discussions",
          tabBarIcon: ({ focused, color, size }) => (
            <MessageCircle size={focused ? 24 : 22} color={color} strokeWidth={focused ? 2.2 : 2} />
          ),
          tabBarLabel: "Discussions",
          // tabBarBadge: 10, // TODO: Add badge for notifications
        }}
      />
      <Tabs.Screen
        name="planning"
        options={{
          title: "Planning",
          tabBarIcon: ({ focused, color, size }) => (
            <Calendar size={focused ? 24 : 22} color={color} strokeWidth={focused ? 2.2 : 2} />
          ),
          tabBarLabel: "Planning",
        }}
      />
      <Tabs.Screen
        name="tablos"
        options={{
          title: "Tablos",
          tabBarIcon: ({ focused, color, size }) => (
            <Grid3X3 size={focused ? 24 : 22} color={color} strokeWidth={focused ? 2.2 : 2} />
          ),
          tabBarLabel: "Tablos",
          // Optional: Add a badge for notifications
          tabBarBadge: undefined, // You can set this to a number for notifications
        }}
      />
      <Tabs.Screen
        name="settings"
        options={{
          title: "Paramètres",
          tabBarIcon: ({ focused, color, size }) => (
            <Settings size={focused ? 24 : 22} color={color} strokeWidth={focused ? 2.2 : 2} />
          ),
          tabBarLabel: "Paramètres",
          tabBarBadge: undefined,
        }}
      />
    </Tabs>
  );
}
