import React from "react";
import { TouchableOpacity, View } from "react-native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { useNavigation } from "@react-navigation/native";
import type { NativeStackNavigationProp } from "@react-navigation/native-stack";
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 { AdminTabParamList, AdminStackParamList } from "./types";

import DashboardScreen from "../screens/admin/DashboardScreen";
import OrdersScreen from "../screens/admin/OrdersScreen";
import OrderDetailScreen from "../screens/admin/OrderDetailScreen";
import UsersScreen from "../screens/admin/UsersScreen";
import ProductsScreen from "../screens/admin/ProductsScreen";
import CategoriesScreen from "../screens/admin/CategoriesScreen";
import DeliveryScreen from "../screens/admin/DeliveryScreen";
import AlertsScreen from "../screens/admin/AlertsScreen";
import AddressScreen from "../screens/admin/AddressScreen";
import SettingsScreen from "../screens/admin/SettingsScreen";

const Tab = createBottomTabNavigator<AdminTabParamList>();
const Stack = createNativeStackNavigator<AdminStackParamList>();

function AdminTabs() {
    const { logout } = useAuth();
    const { colors, isDark, toggleTheme } = useTheme();
    const navigation = useNavigation<NativeStackNavigationProp<AdminStackParamList>>();

    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={() => navigation.navigate("Settings")}
                            style={{ marginRight: spacing.m }}
                        >
                            <Ionicons
                                name="settings-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.accent,
                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="Users"
                component={UsersScreen}
                options={{
                    title: "Clients",
                    tabBarIcon: ({ color, size }) => (
                        <Ionicons
                            name="people-outline"
                            size={size}
                            color={color}
                        />
                    ),
                }}
            />
            <Tab.Screen
                name="Products"
                component={ProductsScreen}
                options={{
                    title: "Produits",
                    tabBarIcon: ({ color, size }) => (
                        <Ionicons
                            name="cube-outline"
                            size={size}
                            color={color}
                        />
                    ),
                }}
            />
            <Tab.Screen
                name="Categories"
                component={CategoriesScreen}
                options={{
                    title: "Catégories",
                    tabBarIcon: ({ color, size }) => (
                        <Ionicons
                            name="pricetag-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="Alerts"
                component={AlertsScreen}
                options={{
                    title: "Alertes",
                    tabBarIcon: ({ color, size }) => (
                        <Ionicons
                            name="alert-circle-outline"
                            size={size}
                            color={color}
                        />
                    ),
                }}
            />
            <Tab.Screen
                name="Addresses"
                component={AddressScreen}
                options={{
                    title: "Adresses",
                    tabBarIcon: ({ color, size }) => (
                        <Ionicons
                            name="map-outline"
                            size={size}
                            color={color}
                        />
                    ),
                }}
            />
        </Tab.Navigator>
    );
}

export default function AdminNavigator() {
    const { colors } = useTheme();

    return (
        <Stack.Navigator
            screenOptions={{
                headerStyle: { backgroundColor: colors.bgSecondary },
                headerTintColor: colors.textWhite,
            }}
        >
            <Stack.Screen
                name="AdminTabs"
                component={AdminTabs}
                options={{ headerShown: false }}
            />
            <Stack.Screen
                name="OrderDetail"
                component={OrderDetailScreen}
                options={{ title: "Détail commande" }}
            />
            <Stack.Screen
                name="Settings"
                component={SettingsScreen}
                options={{ title: "Paramètres" }}
            />
        </Stack.Navigator>
    );
}