import React, { useState, useEffect, useRef, useCallback } from "react";
import {
    TouchableOpacity,
    View,
    Modal,
    Text,
    ScrollView,
    StyleSheet,
} 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,
    getAdminNotifications,
    markAdminNotificationsRead,
} from "../api/api_admin";
import type { AppNotification } from "../api/api_admin";
import { fontSize, spacing } from "../theme";
import type { AdminTabParamList, AdminStackParamList } from "./types";

import DashboardScreen from "../screens/admin/DashboardScreen";
import StatsScreen from "../screens/admin/StatsScreen";
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 [notifications, setNotifications] = useState<AppNotification[]>([]);
    const [unreadCount, setUnreadCount] = useState(0);
    const [modalVisible, setModalVisible] = useState(false);
    const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);

    const fetchNotifications = useCallback(async () => {
        try {
            const res = await getAdminNotifications();
            setNotifications(res.notifications ?? []);
            setUnreadCount(res.unread_count ?? 0);
        } catch { /* ignore */ }
    }, []);

    useEffect(() => {
        fetchNotifications();
        intervalRef.current = setInterval(fetchNotifications, 15000);
        return () => {
            if (intervalRef.current) clearInterval(intervalRef.current);
        };
    }, [fetchNotifications]);

    const openModal = async () => {
        setModalVisible(true);
        if (unreadCount > 0) {
            try {
                await markAdminNotificationsRead();
                setUnreadCount(0);
                setNotifications((prev) => prev.map((n) => ({ ...n, read: true })));
            } catch { /* ignore */ }
        }
    };

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

    const formatTime = (iso: string) => {
        const diff = Math.floor((Date.now() - new Date(iso).getTime()) / 60000);
        if (diff < 1) return "à l'instant";
        if (diff < 60) return `il y a ${diff} min`;
        const h = Math.floor(diff / 60);
        if (h < 24) return `il y a ${h}h`;
        return `il y a ${Math.floor(h / 24)}j`;
    };

    return (
        <>
            <Tab.Navigator
                screenOptions={{
                    headerStyle: { backgroundColor: isDark ? colors.secondary : "#ffffff" },
                    headerTintColor: colors.textWhite,
                    headerRight: () => (
                        <View
                            style={{
                                flexDirection: "row",
                                alignItems: "center",
                                marginRight: spacing.l,
                            }}
                        >
                            <TouchableOpacity
                                onPress={openModal}
                                style={{ marginRight: spacing.m }}
                            >
                                <View>
                                    <Ionicons
                                        name="notifications-outline"
                                        size={22}
                                        color={colors.textSecondary}
                                    />
                                    {unreadCount > 0 && (
                                        <View
                                            style={[
                                                styles.badge,
                                                { backgroundColor: colors.danger },
                                            ]}
                                        >
                                            <Text style={styles.badgeText}>
                                                {unreadCount > 9 ? "9+" : unreadCount}
                                            </Text>
                                        </View>
                                    )}
                                </View>
                            </TouchableOpacity>
                            <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: isDark ? colors.secondary : "#ffffff",
                        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="Stats"
                    component={StatsScreen}
                    options={{
                        title: "Stats",
                        tabBarIcon: ({ color, size }) => (
                            <Ionicons name="bar-chart-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>

            <Modal
                visible={modalVisible}
                transparent
                animationType="slide"
                onRequestClose={() => setModalVisible(false)}
            >
                <View style={styles.modalOverlay}>
                    <View
                        style={[
                            styles.modalContainer,
                            { backgroundColor: colors.bgSecondary },
                        ]}
                    >
                        <View style={styles.modalHeader}>
                            <Text
                                style={[styles.modalTitle, { color: colors.textWhite }]}
                            >
                                Notifications
                            </Text>
                            <TouchableOpacity onPress={() => setModalVisible(false)}>
                                <Ionicons
                                    name="close"
                                    size={24}
                                    color={colors.textSecondary}
                                />
                            </TouchableOpacity>
                        </View>
                        <ScrollView style={styles.notifList}>
                            {notifications.length === 0 ? (
                                <Text
                                    style={[
                                        styles.emptyText,
                                        { color: colors.textMuted },
                                    ]}
                                >
                                    Aucune notification
                                </Text>
                            ) : (
                                notifications.map((n, i) => (
                                    <View
                                        key={i}
                                        style={[
                                            styles.notifItem,
                                            {
                                                borderLeftColor: n.read
                                                    ? colors.border
                                                    : colors.accent,
                                                backgroundColor: n.read
                                                    ? "transparent"
                                                    : colors.bgPrimary ?? colors.bgSecondary,
                                            },
                                        ]}
                                    >
                                        <Text
                                            style={[
                                                styles.notifMessage,
                                                { color: colors.textWhite },
                                            ]}
                                        >
                                            {n.message}
                                        </Text>
                                        <Text
                                            style={[
                                                styles.notifTime,
                                                { color: colors.textMuted },
                                            ]}
                                        >
                                            {formatTime(n.created_at)}
                                        </Text>
                                    </View>
                                ))
                            )}
                        </ScrollView>
                    </View>
                </View>
            </Modal>
        </>
    );
}

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

    return (
        <Stack.Navigator
            screenOptions={{
                headerStyle: { backgroundColor: isDark ? colors.secondary : "#ffffff" },
                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>
    );
}

const styles = StyleSheet.create({
    badge: {
        position: "absolute",
        top: -4,
        right: -6,
        minWidth: 16,
        height: 16,
        borderRadius: 8,
        alignItems: "center",
        justifyContent: "center",
        paddingHorizontal: 2,
    },
    badgeText: {
        color: "#fff",
        fontSize: 9,
        fontWeight: "bold",
    },
    modalOverlay: {
        flex: 1,
        backgroundColor: "rgba(0,0,0,0.5)",
        justifyContent: "flex-end",
    },
    modalContainer: {
        borderTopLeftRadius: 16,
        borderTopRightRadius: 16,
        maxHeight: "70%",
        paddingBottom: 32,
    },
    modalHeader: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        padding: 16,
        borderBottomWidth: 1,
        borderBottomColor: "rgba(255,255,255,0.1)",
    },
    modalTitle: {
        fontSize: 18,
        fontWeight: "bold",
    },
    notifList: {
        padding: 12,
    },
    notifItem: {
        borderLeftWidth: 3,
        paddingLeft: 12,
        paddingVertical: 10,
        marginBottom: 8,
        borderRadius: 4,
        paddingRight: 8,
    },
    notifMessage: {
        fontSize: 14,
    },
    notifTime: {
        fontSize: 12,
        marginTop: 4,
    },
    emptyText: {
        textAlign: "center",
        marginTop: 32,
        fontSize: 14,
    },
});