import React, { useState, useEffect, useCallback, useMemo } from "react";
import {
    View,
    Text,
    StyleSheet,
    ScrollView,
    RefreshControl,
    TouchableOpacity,
    Linking,
    Alert,
    useWindowDimensions,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { spacing, fontSize, borderRadius } from "../../theme";
import { useTheme } from "../../context/ThemeContext";
import { shadows } from "../../theme/shadows";
import { useAuth } from "../../auth/AuthContext";
import {
    getCabineCommands,
    getAllDeliveryPersonsWithDetails,
    getCabineTelegramStatus,
    generateCabineLinkToken,
    unlinkCabineTelegram,
} from "../../api/api_cabine";
import LoadingSpinner from "../../components/ui/LoadingSpinner";

export default function DashboardScreen() {
    const { colors } = useTheme();
    const { username } = useAuth();
    const { width: screenWidth } = useWindowDimensions();

    const [tgLinked, setTgLinked]   = useState(false);
    const [tgEnabled, setTgEnabled] = useState(false);
    const [tgLoading, setTgLoading] = useState(false);
    const [stats, setStats] = useState<
        Array<{
            label: string;
            value: number;
            icon: keyof typeof Ionicons.glyphMap;
            color: string;
        }>
    >([]);
    const [loading, setLoading] = useState(true);
    const [refreshing, setRefreshing] = useState(false);

    const loadStats = useCallback(async () => {
        try {
            const [allCmd, livreursRes] = await Promise.all([
                getCabineCommands(),
                getAllDeliveryPersonsWithDetails(),
            ]);
            const cmds = allCmd.commands;
            setStats([
                {
                    label: "Commandes actives",
                    value: cmds.filter(
                        (c: any) =>
                            !["approved", "cancelled"].includes(c.status),
                    ).length,
                    icon: "receipt-outline",
                    color: colors.info,
                },
                {
                    label: "En route",
                    value: cmds.filter((c: any) => c.status === "en_route")
                        .length,
                    icon: "navigate-outline",
                    color: colors.warning,
                },
                {
                    label: "En attente",
                    value: cmds.filter((c: any) => c.status === "pending")
                        .length,
                    icon: "time-outline",
                    color: colors.accent,
                },
                {
                    label: "Livreurs dispo",
                    value: livreursRes.stats.available,
                    icon: "bicycle-outline",
                    color: colors.success,
                },
                {
                    label: "Livreurs occupés",
                    value: livreursRes.stats.busy,
                    icon: "bicycle",
                    color: colors.warning,
                },
                {
                    label: "Total terminées",
                    value: cmds.filter((c: any) => c.status === "approved")
                        .length,
                    icon: "checkmark-circle-outline",
                    color: colors.successDark,
                },
            ]);
        } catch {
            /* ignore */
        }
        setLoading(false);
    }, [colors]);

    useEffect(() => {
        loadStats();
        getCabineTelegramStatus().then((s) => { setTgLinked(s.linked); setTgEnabled(s.enabled); });
    }, [loadStats]);

    const handleLinkTelegram = async () => {
        setTgLoading(true);
        const res = await generateCabineLinkToken();
        setTgLoading(false);
        if (res.error || !res.link_url) {
            Alert.alert("Erreur", res.error || "Service Telegram non disponible");
            return;
        }
        Linking.openURL(res.link_url);
    };

    const handleUnlinkTelegram = () => {
        Alert.alert("Délier Telegram", "Vous ne recevrez plus de notifications Telegram.", [
            { text: "Annuler", style: "cancel" },
            { text: "Délier", style: "destructive", onPress: async () => { await unlinkCabineTelegram(); setTgLinked(false); } },
        ]);
    };

    const onRefresh = async () => {
        setRefreshing(true);
        await loadStats();
        setRefreshing(false);
    };

    const styles = useMemo(
        () =>
            StyleSheet.create({
                container: {
                    flex: 1,
                    backgroundColor: colors.bgPrimary,
                    padding: screenWidth < 380 ? spacing.m : spacing.l,
                },
                welcome: {
                    fontSize: screenWidth < 380 ? fontSize.lg : fontSize.xl,
                    fontWeight: "bold",
                    color: colors.textWhite,
                    marginBottom: spacing.xs,
                },
                subtitle: {
                    fontSize: screenWidth < 380 ? fontSize.sm : fontSize.md,
                    color: colors.textSecondary,
                    marginBottom: spacing.l,
                },
                grid: {
                    flexDirection: "row",
                    flexWrap: "wrap",
                    gap: screenWidth < 380 ? spacing.s : spacing.m,
                },
                card: {
                    width: screenWidth < 360 ? "100%" : "47%",
                    backgroundColor: colors.bgCard,
                    borderRadius: borderRadius.md,
                    padding: screenWidth < 380 ? spacing.m : spacing.l,
                    borderWidth: 1,
                    borderColor: colors.borderLight,
                    alignItems: "center",
                },
                iconCircle: {
                    width: screenWidth < 380 ? 40 : 48,
                    height: screenWidth < 380 ? 40 : 48,
                    borderRadius: screenWidth < 380 ? 20 : 24,
                    justifyContent: "center",
                    alignItems: "center",
                    marginBottom: spacing.s,
                },
                cardValue: {
                    fontSize: screenWidth < 380 ? fontSize.xl : fontSize.xxl,
                    fontWeight: "bold",
                    color: colors.textWhite,
                },
                cardLabel: {
                    fontSize: screenWidth < 380 ? fontSize.xs : fontSize.sm,
                    color: colors.textSecondary,
                    marginTop: spacing.xs,
                    textAlign: "center",
                },
            }),
        [colors, screenWidth],
    );

    if (loading) return <LoadingSpinner message="Chargement..." />;

    return (
        <ScrollView
            style={styles.container}
            refreshControl={
                <RefreshControl
                    refreshing={refreshing}
                    onRefresh={onRefresh}
                    tintColor={colors.info}
                />
            }
        >
            <Text style={styles.welcome}>Cabine - {username}</Text>
            <Text style={styles.subtitle}>Suivi des opérations</Text>
            <View style={styles.grid}>
                {stats.map((s, i) => (
                    <View key={i} style={[styles.card, shadows.md]}>
                        <View
                            style={[
                                styles.iconCircle,
                                { backgroundColor: s.color + "20" },
                            ]}
                        >
                            <Ionicons name={s.icon} size={24} color={s.color} />
                        </View>
                        <Text style={styles.cardValue}>{s.value}</Text>
                        <Text style={styles.cardLabel}>{s.label}</Text>
                    </View>
                ))}
            </View>

            {tgEnabled && (
                <View style={{ margin: spacing.l, backgroundColor: colors.bgCard, borderRadius: borderRadius.md, padding: spacing.l, borderWidth: 1, borderColor: colors.borderLight }}>
                    <View style={{ flexDirection: "row", alignItems: "center", gap: spacing.s, marginBottom: spacing.m }}>
                        <Ionicons name="paper-plane-outline" size={18} color="#2AABEE" />
                        <Text style={{ color: colors.textPrimary, fontSize: fontSize.md, fontWeight: "600" }}>Notifications Telegram</Text>
                    </View>
                    {tgLinked ? (
                        <View>
                            <View style={{ flexDirection: "row", alignItems: "center", gap: spacing.s, marginBottom: spacing.s }}>
                                <Ionicons name="checkmark-circle" size={14} color={colors.success} />
                                <Text style={{ color: colors.success, fontSize: fontSize.sm }}>Compte Telegram lié</Text>
                            </View>
                            <TouchableOpacity onPress={handleUnlinkTelegram} style={{ flexDirection: "row", alignItems: "center", gap: spacing.s, padding: spacing.s, borderRadius: borderRadius.sm, borderWidth: 1, borderColor: colors.danger + "66" }}>
                                <Ionicons name="unlink-outline" size={14} color={colors.danger} />
                                <Text style={{ color: colors.danger, fontSize: fontSize.sm }}>Délier Telegram</Text>
                            </TouchableOpacity>
                        </View>
                    ) : (
                        <TouchableOpacity onPress={handleLinkTelegram} disabled={tgLoading} style={{ flexDirection: "row", alignItems: "center", justifyContent: "center", gap: spacing.s, padding: spacing.m, borderRadius: borderRadius.sm, backgroundColor: "#2AABEE" }}>
                            <Ionicons name="paper-plane-outline" size={14} color="#fff" />
                            <Text style={{ color: "#fff", fontSize: fontSize.sm, fontWeight: "600" }}>{tgLoading ? "Génération..." : "Lier Telegram"}</Text>
                        </TouchableOpacity>
                    )}
                </View>
            )}
        </ScrollView>
    );
}