import { useLocalSearchParams } from "expo-router";
import { useState, useEffect } from "react";
import { FlatList, ActivityIndicator, Text } from "react-native";
import { Box } from "@/components/ui/box";
import { Image } from "@/components/ui/image";
import { VStack } from "@/components/ui/vstack";
import { Heading } from "@/components/ui/heading";
import { getUserById } from "@/api/client";
import { useNoticesStore } from "@/store/noticesStore";
import { NoticeCard } from "@/components/NoticeCard";

export default function UserProfile() {
    const { userId } = useLocalSearchParams();
    const [user, setUser] = useState(null);
    const [isUserLoading, setIsUserLoading] = useState(true);
    const { notices } = useNoticesStore();

    useEffect(() => {
        const fetchUser = async () => {
            setIsUserLoading(true);
            try {
                const userData = await getUserById(Number(userId));
                setUser(userData);
            } catch (err) {
                console.error("Błąd podczas pobierania danych użytkownika:", err);
                setUser(null);
            } finally {
                setIsUserLoading(false);
            }
        };
        fetchUser();
    }, [userId]);

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

    if (!user) {
        return <Text>Nie znaleziono użytkownika</Text>;
    }

    const userNotices = notices.filter(notice => notice.clientId === Number(userId));

    return (
        <VStack className="p-4">
            <Box className="flex-row items-center mb-4">
                <Image
                    source={{ uri: user.profileImage || "https://th.bing.com/th/id/OIP.3coo_N8sieled8QNroQmkgHaHa?rs=1&pid=ImgDetMain" }}
                    className="h-16 w-16 rounded-full mr-4"
                    alt="Zdjęcie profilowe"
                />
                <Heading size="lg">
                    {user.firstName} {user.lastName}
                </Heading>
            </Box>
            {userNotices.length > 0 ? (
                <FlatList
                    data={userNotices}
                    numColumns={2}
                    columnWrapperStyle={{ marginBottom: 10, justifyContent: "space-between" }}
                    renderItem={({ item }) => <NoticeCard notice={item} />}
                    keyExtractor={(item) => item.noticeId.toString()}
                />
            ) : (
                <Text>Ten użytkownik nie ma żadnych ogłoszeń.</Text>
            )}
        </VStack>
    );
}