import { Link, Stack, useLocalSearchParams } from "expo-router";
import { KeyboardAvoidingView, Platform } from "react-native";
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 {
  Avatar,
  AvatarImage,
  AvatarFallbackText,
} from "@/components/ui/avatar";
import {
  ActivityIndicator,
  Dimensions,
  FlatList,
  View,
  TextInput,
  SafeAreaView,
  Alert,
} 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";
import * as ScreenOrientation from "expo-screen-orientation";
import { useAuthStore } from "@/store/authStore";
import { sendEmail } from "@/api/email";

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 [isLandscape, setIsLandscape] = useState(false);
  const flatListRef = useRef(null);
  const [currentIndex, setCurrentIndex] = useState(0);
  const [isMessageFormVisible, setIsMessageFormVisible] = useState(false);
  const [message, setMessage] = useState("");
  const [Email, setEmail] = useState("");
  const [isSending, setIsSending] = useState(false);

  const handleSendMessage = async () => {
    setIsSending(true);
    console.log("Rozpoczynanie procesu wysyłania wiadomości...");

    const { user_id, token } = useAuthStore.getState();
    console.log("Dane z authStore:", { user_id, token });

    if (!user_id || !token) {
      console.error("Brak danych zalogowanego użytkownika.");
      Alert.alert("Błąd", "Zaloguj się, aby wysłać wiadomość.");
      setIsSending(false);
      return;
    }

    let currentUserEmail = "";
    try {
      console.log(`Pobieranie danych użytkownika dla user_id : $ { user_id }`);
      const currentUser = await getUserById(user_id);
      console.log("Dane zalogowanego użytkownika:", currentUser);
      currentUserEmail = currentUser?.email;
      if (!currentUserEmail) {
        console.error("Nie znaleziono adresu email zalogowanego użytkownika.");
        Alert.alert(
          "Błąd",
          "Nie znaleziono adresu email zalogowanego użytkownika."
        );
        setIsSending(false);
        return;
      }
      console.log(`Pobrano email zalogowanego użytkownika
                  : $ { currentUserEmail }`);
    } catch (error) {
      console.error("Błąd podczas pobierania danych użytkownika:", error);
      Alert.alert(
        "Błąd",
        "Nie udało się pobrać danych użytkownika. Spróbuj ponownie później."
      );
      setIsSending(false);
      return;
    }

    const emailData = {
      to: user?.email || "",
      subject: `Zapytanie ${currentUserEmail} o ogłoszenie ${notice.title}`,
      body: message,
    };
    console.log("Dane emaila do wysyłki:", emailData);

    if (!emailData.to || !emailData.subject || !emailData.body) {
      console.error("Walidacja nieudana: brakujące pola w emailData.");
      Alert.alert("Błąd", "Wszystkie pola są wymagane!");
      setIsSending(false);
      return;
    }

    const result = await sendEmail(emailData);
    if (result.success) {
      console.log("Wiadomość wysłana pomyślnie!", result.result);
      setIsMessageFormVisible(false);
      setMessage("");
      Alert.alert("Sukces", "Wiadomość została wysłana!");
    } else {
      console.error("Błąd podczas wysyłania wiadomości:", result.error);
      Alert.alert(
        "Błąd",
        `Nie udało się wysłać wiadomości
                  : $ { result.error }`
      );
    }
    setIsSending(false);
    console.log("Zakończono proces wysyłania wiadomości.");
  };

  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 unlockOrientation = async () => {
      try {
        await ScreenOrientation.unlockAsync();
      } catch (err) {
        console.error("Error unlocking orientation:", err);
      }
    };

    const getInitialOrientation = async () => {
      try {
        const orientation = await ScreenOrientation.getOrientationAsync();
        setIsLandscape(
          orientation === ScreenOrientation.Orientation.LANDSCAPE_LEFT ||
            orientation === ScreenOrientation.Orientation.LANDSCAPE_RIGHT
        );
      } catch (err) {
        console.error("Error getting initial orientation:", err);
      }
    };

    unlockOrientation();
    getInitialOrientation();

    const subscription = ScreenOrientation.addOrientationChangeListener(
      ({ orientationInfo }) => {
        const isLandscapeMode =
          orientationInfo.orientation ===
            ScreenOrientation.Orientation.LANDSCAPE_LEFT ||
          orientationInfo.orientation ===
            ScreenOrientation.Orientation.LANDSCAPE_RIGHT;
        setIsLandscape(isLandscapeMode);
      }
    );

    return () => {
      ScreenOrientation.removeOrientationChangeListener(subscription);
      ScreenOrientation.lockAsync(
        ScreenOrientation.OrientationLock.PORTRAIT_UP
      ).catch((err) =>
        console.error("Error locking orientation on unmount:", err)
      );
    };
  }, []);

  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="start"
            decelerationRate="fast"
            showsHorizontalScrollIndicator={false}
            pagingEnabled
            onViewableItemsChanged={onViewableItemsChanged}
            viewabilityConfig={viewabilityConfig}
            renderItem={({ item, index }) => (
              <View
                style={{ width: Dimensions.get("window").width }}
                className="p-1"
              >
                <Image
                  source={item}
                  className="h-auto w-auto rounded-md aspect-[1/1]"
                  alt={`Zdjęcie ${index + 1}`}
                  resizeMode={isLandscape ? "cover" : "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/50 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>
      )} */}
      {isMessageFormVisible && (
        <KeyboardAvoidingView
          behavior={Platform.OS === "ios" ? "padding" : "height"}
          className="absolute inset-0 bg-black/50 justify-center items-center z-20"
        >
          <View className="bg-white p-4 rounded-lg w-4/5 max-h-4/5">
            <ScrollView showsVerticalScrollIndicator={false}>
              <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 mb-4"
                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-blue-500 py-2 px-4 rounded-md"
                  disabled={isSending}
                >
                  {isSending ? (
                    <ActivityIndicator color="#fff" />
                  ) : (
                    <Text className="text-white">Wyślij</Text>
                  )}
                </Pressable>
              </View>
            </ScrollView>
          </View>
        </KeyboardAvoidingView>
      )}
    </Card>
  );
}