import {Link, Stack, useLocalSearchParams} from "expo-router";
import {Box} from "@/components/ui/box";
import {Card} from "@/components/ui/card";
import {Heading} from "@/components/ui/heading";
import {Image} from "@/components/ui/image";
import {Text} from "@/components/ui/text";
import {VStack} from "@/components/ui/vstack";
import {Ionicons} from "@expo/vector-icons";
import {
    ActivityIndicator,
    Dimensions,
    FlatList,
    View,
    TextInput,
} from "react-native";
import {useEffect, useState, useRef} from "react";
import {useNoticesStore} from "@/store/noticesStore";
import {useWishlist} from "@/store/wishlistStore";
import {Pressable, ScrollView} from "react-native";
import {getUserById} from "@/api/client";

const {width} = Dimensions.get("window");

export default function NoticeDetails() {
    const {id} = useLocalSearchParams();
    const [images, setImages] = useState([]);
    const [isImageLoading, setIsImageLoading] = useState(true);
    const [isLoading, setIsLoading] = useState(true);
    const [error, setError] = useState(null);
    const [notice, setNotice] = useState(null);
    const [user, setUser] = useState(null);
    const [isUserLoading, setIsUserLoading] = useState(true);
    const flatListRef = useRef(null);
    const [currentIndex, setCurrentIndex] = useState(0);

    const [isMessageFormVisible, setIsMessageFormVisible] = useState(false);
    const [message, setMessage] = useState("");
    const [Email, setEmail] = useState("");
    const handleSendMessage = () => {
        console.log("Wiadomość do:", user?.email);
        console.log("Email nadawcy:", Email);
        console.log("Treść:", message);

        setIsMessageFormVisible(false);
        setMessage("");
        setEmail("");
    };

    const formatDate = (dateString) => {
        const date = new Date(dateString);
        return date.toLocaleDateString("pl-PL", {
            year: "numeric",
            month: "2-digit",
            day: "2-digit",
        });
    };

    const {getNoticeById, getAllImagesByNoticeId} = useNoticesStore();
    const toggleNoticeInWishlist = useWishlist(
        (state) => state.toggleNoticeInWishlist
    );

    const isInWishlist = useWishlist((state) =>
        id ? state.wishlistNotices.some((item) => item.noticeId === id) : false
    );
    const onViewableItemsChanged = useRef(({viewableItems}) => {
        if (viewableItems.length > 0) {
            setCurrentIndex(viewableItems[0].index);
        }
    }).current;

    const viewabilityConfig = useRef({
        itemVisiblePercentThreshold: 70,
    }).current;

    useEffect(() => {
        const fetchNotice = async () => {
            setIsLoading(true);
            try {
                const noticeData = getNoticeById(Number(id));
                if (noticeData) {
                    setNotice(noticeData);
                    setError(null);
                } else {
                    setError(new Error(`Notice with ID ${id} not found.`));
                }
            } catch (err) {
                setError(err);
            } finally {
                setIsLoading(false);
            }
        };

        fetchNotice();
    }, [id]);

    useEffect(() => {
        const fetchImage = async () => {
            setIsImageLoading(true);
            if (notice) {
                try {
                    const fetchedImages = await getAllImagesByNoticeId(notice.noticeId);
                    setImages(
                        fetchedImages && fetchedImages.length > 0
                            ? fetchedImages
                            : {uri: "https://http.cat/404.jpg"}
                    );
                } catch (err) {
                    console.error("Error while loading images:", err);
                    setImage({uri: "https://http.cat/404.jpg"});
                } finally {
                    setIsImageLoading(false);
                }
            }
        };

        if (notice) {
            fetchImage();
        }
    }, [notice]);

    useEffect(() => {
        const fetchUser = async () => {
            if (notice && notice.clientId) {
                setIsUserLoading(true);
                try {
                    const userData = await getUserById(notice.clientId);
                    setUser(userData);
                } catch (err) {
                    console.error("Nie udało się pobrać danych użytkownika:", err);
                } finally {
                    setIsUserLoading(false);
                }
            }
        };

        fetchUser();
    }, [notice]);

    if (isLoading) {
        return <ActivityIndicator/>;
    }

    if (error) {
        return <Text>Błąd, spróbuj ponownie póżniej: {error.message}</Text>;
    }

    if (!notice) {
        return <Text>Nie znaleziono ogłoszenia</Text>;
    }

    return (
        <Card className="p-0 rounded-lg m-3 flex-1">
            <Stack.Screen
                options={{
                    title: notice.title,
                }}
            />
            {isImageLoading ? (
                <Box className="h-auto w-full rounded-md aspect-[1/1] bg-gray-100 items-center justify-center">
                    <ActivityIndicator size="large" color="#3b82f6"/>
                </Box>
            ) : (
                <Box className="sticky top-0 z-10 bg-white">
                    <FlatList
                        ref={flatListRef}
                        data={images}
                        horizontal
                        snapToAlignment="center"
                        decelerationRate="fast"
                        showsHorizontalScrollIndicator={false}
                        pagingEnabled
                        onViewableItemsChanged={onViewableItemsChanged}
                        viewabilityConfig={viewabilityConfig}
                        renderItem={({item, index}) => (
                            <View style={{width: width}} className='p-2'>
                                <Image
                                    source={item}
                                    className="h-auto w-auto rounded-md aspect-[1/1]"
                                    alt={`Zdjęcie ${index + 1}`}
                                    resizeMode="contain"
                                />
                            </View>
                        )}
                        keyExtractor={(item, index) => index.toString()}
                    />

                    {images.length > 1 && (
                        <Box className="flex-row justify-center mt-2">
                            {images.map((_, index) => (
                                <Box
                                    key={index}
                                    className={`w-2 h-2 rounded-full mx-1 ${
                                        index === currentIndex ? "bg-primary-500" : "bg-gray-300"
                                    }`}
                                />
                            ))}
                        </Box>
                    )}
                </Box>
            )}

            <ScrollView showsVerticalScrollIndicator={false}>
                <VStack className="p-2">
                    <Text className="text-sm font-normal mb-2 text-typography-700">
                        {formatDate(notice.publishDate)}
                    </Text>
                    <Text className="text-2xl text-gray-950 font-bold mb-2 text-center bg-gray-50 rounded-md p-2">
                        {notice.title}
                    </Text>

                    <Box className="flex-row items-center  bg-gray-50 rounded-md p-2">
                        <Heading size="md" className="flex-1 text-xl text-gray-950">
                            <Text className="text-sm text-typography-500">Cena: </Text>
                            {notice.price} zł
                        </Heading>

                        <Pressable
                            onPress={() => {
                                toggleNoticeInWishlist(id);
                            }}
                        >
                            <Ionicons
                                name={isInWishlist ? "heart" : "heart-outline"}
                                size={24}
                                color={"primary-heading-500"}
                            />
                        </Pressable>
                    </Box>
                    <Box className="mt-4 bg-gray-50 p-3 rounded-lg shadow-sm">
                        <Text className="text-sm text-typography-500">
                            Kategoria:{" "}
                            <Text className="font-bold text-gray-950">{notice.category}</Text>
                        </Text>
                    </Box>
                    <Box className="mt-4 bg-gray-50 p-3 rounded-lg shadow-sm">
                        <Text className="text-2xl text-gray-950">Opis ogloszenia</Text>
                        <Text className="text-sm text-typography-700">
                            {notice.description}
                        </Text>
                    </Box>

                    <Box className="mt-4 bg-gray-50 p-3 rounded-lg shadow-sm">
                        <Text className="text-sm text-typography-500">Uzytkownik:</Text>
                        {isUserLoading ? (
                            <ActivityIndicator/>
                        ) : user ? (
                            <>
                                <Box className="mr-4">
                                    <Image
                                        source={{
                                            uri:
                                                user.profileImage ||
                                                "https://th.bing.com/th/id/OIP.3coo_N8sieled8QNroQmkgHaHa?rs=1&pid=ImgDetMain",
                                        }} // Domyślny obraz, jeśli brak zdjęcia profilowego
                                        className="h-12 w-12 rounded-full"
                                        alt="Zdjęcie profilowe"
                                    />
                                </Box>

                                <Box className="flex-1">
                                    <Text className="text-xl font-bold text-gray-950">
                                        {user.firstName} {user.lastName}
                                    </Text>
                                    <Text className="text-sm text-typography-700">
                                        Email: {user.email}
                                    </Text>
                                    <Pressable
                                        onPress={() => setIsMessageFormVisible(true)}
                                        className="mt-3 bg-primary-500 py-2 px-4 rounded-md"
                                    >
                                        <Text className="text-white text-center font-bold">
                                            Wyślij wiadomość
                                        </Text>
                                    </Pressable>
                                    <Link href={`/user/${notice.clientId}`}>
                                        <Text className="text-xl p-3 font-bold text-center text-typography-700 mt-3">
                                            Zobacz więcej ogłoszeń od {user.firstName}
                                        </Text>
                                    </Link>
                                </Box>
                            </>
                        ) : (
                            <Text>Błąd podczas ładowania danych użytkownika</Text>
                        )}
                    </Box>
                </VStack>
            </ScrollView>
            {isMessageFormVisible && (
                <View className="absolute inset-0 bg-black bg-opacity-50 justify-center items-center z-20">
                    <View className="bg-white p-4 rounded-lg w-4/5">
                        <Text className="text-lg font-bold mb-4">
                            Wyślij wiadomość do {user?.firstName}
                        </Text>

                        <Text className="text-sm font-medium mb-1">Do:</Text>
                        <Text className="bg-gray-100 p-3 rounded text-gray-500">
                            {user?.email || "Brak adresu e-mail"}
                        </Text>
                        <Text className="text-sm font-medium mb-1">Twój e-mail:</Text>
                        <TextInput
                            className="border border-gray-300 p-2 rounded"
                            placeholder="Wpisz swój adres e-mail"
                            value={Email}
                            onChangeText={setEmail}
                        />

                        <TextInput
                            className="border border-gray-300 rounded-md p-2 mb-4 h-32 text-left"
                            multiline
                            numberOfLines={4}
                            placeholder="Napisz swoją wiadomość..."
                            value={message}
                            onChangeText={setMessage}
                        />

                        <View className="flex-row justify-end space-x-2">
                            <Pressable
                                onPress={() => setIsMessageFormVisible(false)}
                                className="bg-gray-300 py-2 px-4 rounded-md"
                            >
                                <Text className="text-gray-800">Anuluj</Text>
                            </Pressable>

                            <Pressable
                                onPress={handleSendMessage}
                                className="bg-primary-500 py-2 px-4 rounded-md"
                            >
                                <Text className="text-white">Wyślij</Text>
                            </Pressable>
                        </View>
                    </View>
                </View>
            )}
        </Card>
    );
}
