import { Link } from "expo-router";
import { Pressable } 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";
import { HStack } from "@gluestack-ui/themed";
import { useAuthStore } from "@/store/authStore";

export default function Account() {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const currentUserId = useAuthStore((state) => state.user_id);
  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=" flex-1 m-2">
      <Box className="bg-white p-5 rounded-lg ">
        <Box className="items-center pt-6 mb-4">
          <Image
            source={{
              uri:
                user.profileImage ||
                "https://th.bing.com/th/id/OIP.3coo_N8sieled8QNroQmkgHaHa?rs=1&pid=ImgDetMain",
            }}
            className="h-24 w-24 rounded-full border-4 border-white shadow-md"
            alt="Zdjęcie profilowe"
          />
        </Box>

        <Text className="text-2xl font-bold text-center mb-1">
          {user.firstName} {user.lastName}
        </Text>
      </Box>

      <Box className="bg-white mt-4 p-5 rounded-lg">
        <Text className="font-bold text-lg mb-3">Moje dane</Text>

        <HStack className="mb-3">
          <Text className="text-gray-600 w-24">E-mail: </Text>
          <Text className=" text-gray-600 ">{user.email}</Text>
        </HStack>

        <Pressable
          className="border border-[#002f34] rounded-md py-2 px-4 self-start"
          onPress={() => console.log("Edytuj dane użytkownika")}
        >
          <Text className="text-[#002f34] font-medium">Edytuj profil</Text>
        </Pressable>
      </Box>

      <Box className="bg-white mt-4 p-5 rounded-lg">
        <Text className="font-bold text-lg mb-3">Moje konto</Text>

        <Link href="/dashboard/userNotices" asChild>
          <Pressable className="py-3 flex-row items-center border-b border-gray-100">
            <Text className="text-lg flex-1">Moje ogłoszenia</Text>
            <Text>▶</Text>
          </Pressable>
        </Link>

        {/*Tak dodałem, można zmienić na coś innego*/}
        <Link href="/dashboard/userOrders" asChild>
          <Pressable className="py-3 flex-row items-center border-b border-gray-100">
            <Text className="text-lg flex-1">Historia płatności</Text>
            <Text>▶</Text>
          </Pressable>
        </Link>

        {/* <Pressable className="py-3 flex-row items-center">
          <Text className="text-lg flex-1">Ustawienia powiadomień</Text>
          <Text>▶</Text>
        </Pressable> */}
      </Box>

      {/* <Pressable className="mt-8 mx-5 p-4 bg-white rounded-md items-center shadow-sm">
        <Text className="text-red-500 font-medium">Wyloguj się</Text>
      </Pressable> */}
    </VStack>
  );
}