import { Link } from "expo-router";
import {Button} from "react-native";
import {Box} from "@/components/ui/box";
import {Text} from "@/components/ui/text";
import {VStack} from "@/components/ui/vstack";
import {Image} from "@/components/ui/image";
import {ActivityIndicator, } from "react-native";
import {useEffect, useState} from "react";
import {getUserById} from "@/api/client";

export default function Account() {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const currentUserId = 1; // Tymczasowo, do czasu zaimplementowania logowania bo nie moge pobrac usera

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

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

  if (!user) {
    return <Text>Nie udało się pobrać danych użytkownika.</Text>;
  }

  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 text-center rounded-full mr-4"
              alt="Zdjęcie profilowe"
          />
          <Text className="text-xl font-bold">
            {user.firstName} {user.lastName}
          </Text>
        </Box>
        <Button className="mb-4"
                title="Edytuj dane użytkownika"
            onPress={() => {
              // TODO: Implementacja edycji danych użytkownika
              console.log("Edytuj dane użytkownika");
            }}

        >
        </Button>
        <Box className="mt-4">
          <Link href="/dashboard/userNotices">
            <Text className="text-lg text-primary-500">Moje ogłoszenia</Text>
          </Link>
          <Link href="/dashboard/userPaymentHistory">
            <Text className="text-lg text-primary-500 mt-2">Moje płatności</Text>
          </Link>
        </Box>
      </VStack>
  );
}