import { useLocalSearchParams, Stack } from "expo-router";
import { useState, useEffect } from "react";
import {FlatList, ActivityIndicator, Text, SafeAreaView} 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 (
      <SafeAreaView className="flex-1" edges={['right', 'bottom', 'left']}>
    <VStack className="p-4">
      <Stack.Screen
        options={{
          title: "Ogłoszenia użytkownika",
        }}
      />
      <Box className="flex-row items-center mb-4">
        <Image
          source={{
            uri:
              user.image ||
              "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",
            gap: 8,
          }}
          renderItem={({ item }) => <NoticeCard notice={item} />}
          keyExtractor={(item) => item.noticeId.toString()}
        />
      ) : (
        <Text>Ten użytkownik nie ma żadnych ogłoszeń.</Text>
      )}
    </VStack>
      </SafeAreaView>
  );
}