import React from "react";
import { TouchableOpacity, View } from "react-native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Ionicons } from "@expo/vector-icons";
import { useAuth } from "../auth/AuthContext";
import { useTheme } from "../context/ThemeContext";
import { logoutAdmin } from "../api/api_admin";
import { fontSize, spacing } from "../theme";
import type { CabineTabParamList } from "./types";

import DashboardScreen from "../screens/cabine/DashboardScreen";
import OrdersScreen from "../screens/cabine/OrdersScreen";
import DeliveryScreen from "../screens/cabine/DeliveryScreen";
import UsersScreen from "../screens/cabine/UsersScreen";
import AlertsScreen from "../screens/cabine/AlertsScreen";

const Tab = createBottomTabNavigator<CabineTabParamList>();

export default function CabineNavigator() {
    const { logout } = useAuth();
    const { colors, isDark, toggleTheme } = useTheme();

    const handleLogout = async () => {
        await logoutAdmin();
        await logout();
    };

    return (
        <Tab.Navigator
            screenOptions={{
                headerStyle: { backgroundColor: colors.bgSecondary },
                headerTintColor: colors.textWhite,
                headerRight: () => (
                    <View
                        style={{
                            flexDirection: "row",
                            alignItems: "center",
                            marginRight: spacing.l,
                        }}
                    >
                        <TouchableOpacity
                            onPress={toggleTheme}
                            style={{ marginRight: spacing.m }}
                        >
                            <Ionicons
                                name={isDark ? "sunny-outline" : "moon-outline"}
                                size={22}
                                color={colors.textSecondary}
                            />
                        </TouchableOpacity>
                        <TouchableOpacity onPress={handleLogout}>
                            <Ionicons
                                name="log-out-outline"
                                size={24}
                                color={colors.textSecondary}
                            />
                        </TouchableOpacity>
                    </View>
                ),
                tabBarStyle: {
                    backgroundColor: colors.bgSecondary,
                    borderTopColor: colors.border,
                    borderTopWidth: 1,
                },
                tabBarActiveTintColor: colors.info,
                tabBarInactiveTintColor: colors.textMuted,
                tabBarLabelStyle: { fontSize: fontSize.xs },
            }}
        >
            <Tab.Screen
                name="Dashboard"
                component={DashboardScreen}
                options={{
                    title: "Dashboard",
                    tabBarIcon: ({ color, size }) => (
                        <Ionicons
                            name="grid-outline"
                            size={size}
                            color={color}
                        />
                    ),
                }}
            />
            <Tab.Screen
                name="Orders"
                component={OrdersScreen}
                options={{
                    title: "Commandes",
                    tabBarIcon: ({ color, size }) => (
                        <Ionicons
                            name="receipt-outline"
                            size={size}
                            color={color}
                        />
                    ),
                }}
            />
            <Tab.Screen
                name="Delivery"
                component={DeliveryScreen}
                options={{
                    title: "Livreurs",
                    tabBarIcon: ({ color, size }) => (
                        <Ionicons
                            name="bicycle-outline"
                            size={size}
                            color={color}
                        />
                    ),
                }}
            />
            <Tab.Screen
                name="Users"
                component={UsersScreen}
                options={{
                    title: "Clients",
                    tabBarIcon: ({ color, size }) => (
                        <Ionicons
                            name="people-outline"
                            size={size}
                            color={color}
                        />
                    ),
                }}
            />
            <Tab.Screen
                name="Alerts"
                component={AlertsScreen}
                options={{
                    title: "Alertes",
                    tabBarIcon: ({ color, size }) => (
                        <Ionicons
                            name="alert-circle-outline"
                            size={size}
                            color={color}
                        />
                    ),
                }}
            />
        </Tab.Navigator>
    );
}