import { Link, Stack, useLocalSearchParams } from "expo-router";
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 { Avatar, AvatarImage, AvatarFallbackText } from "@gluestack-ui/themed";
import { Ionicons } from "@expo/vector-icons";
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 [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);
    }

  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);
          console.log("Fetched images:", fetchedImages);
          setImages(
              fetchedImages && fetchedImages.length > 0
                  ? fetchedImages
                  : ["https://http.cat/404.jpg"]
          );
        } catch (err) {
          console.error("Error while loading images:", err);
          setImages(["https://http.cat/404.jpg"]);
        } finally {
          setIsImageLoading(false);
        }
      }
    };

    if (notice) {
      fetchImage();
    }

    if (!notice) {
        return <Text>Nie znaleziono ogłoszenia</Text>;
    }

    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>;
  }

  const renderImageSection = () => {
    if (isImageLoading) {
      return (
          <Box
              className={`h-auto w-full rounded-md ${
                  isLandscape ? "h-screen" : "aspect-[1/1]"
              } bg-gray-100 items-center justify-center`}
          >
            <ActivityIndicator size="large" color="#3b82f6" />
          </Box>
      );
    }

    return (
        <Box className={isLandscape ? "h-screen" : "sticky top-0 z-10 bg-white"}>
          <FlatList
              ref={flatListRef}
              data={images}
              horizontal
              snapToAlignment="center"
              decelerationRate="fast"
              showsHorizontalScrollIndicator={false}
              pagingEnabled
              onViewableItemsChanged={onViewableItemsChanged}
              viewabilityConfig={viewabilityConfig}
              renderItem={({ item, index }) => (
                  <View style={{ width: Dimensions.get("window").width }}>
                    <Image
                        source={{ uri: item }}
                        className={`h-auto w-full rounded-md ${
                            isLandscape ? "h-full" : "aspect-square"
                        }`}
                        alt={`Zdjęcie ${index + 1}`}
                        resizeMode={isLandscape ? "cover" : "contain"}
                        onError={(e) => console.error("Image load error:", e.nativeEvent.error)}
                    />
                  </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-500"}
                }`}
                    />
                ))}
              </Box>
          )}
        </Box>
    );
  };

  return (
      <SafeAreaView style={{ flex: 1 }}>
        <Card className="flex-1 p-4 m-3 rounded-lg shadow-sm">
          <Stack.Screen
              options={{
                title: notice.title,
              }}
          />
          <ScrollView showsVerticalScrollIndicator={false}>
            {renderImageSection()}
            <VStack className="p-4">
              <Text className="text-sm font-normal mb-2 text-gray-600">
                {formatDate(notice.publishDate)}
              </Text>
              <Text className="text-2xl font-bold mb-2 text-center bg-gray-100 rounded-md p-4">
                {notice.title}
              </Text>
              <Box className="flex-row items-center bg-gray-100 rounded-md p-2">
                <Heading size="md" className="flex-1 text-lg">
                  <Text className="text-sm text-gray-500">Cena: </Text>
                  {notice.price} zł
                </Heading>
                <Pressable
                    onPress={() => {
                      toggleNoticeInWishlist(id);
                    }}
                >
                  <Ionicons
                      name={isInWishlist ? "heart" : "heart-outline"}
                      size={24}
                      color="#3b82f6"
                  />
                </Pressable>
              </Box>
              <Box className="mt-4 bg-gray-100 p-3 rounded-lg">
                <Text className="text-sm text-gray-500">
                  Kategoria:{" "}
                  <Text className="font-bold text-gray-900">{notice.category}</Text>
                </Text>
              </Box>
              <Box className="mt-4 bg-gray-100 p-3 rounded-lg">
                <Text className="text-xl font-bold text-gray-900">Opis ogłoszenia</Text>
                <Text className="text-sm text-gray-700">{notice.description}</Text>
              </Box>
              <Box className="mt-4 bg-gray-100 p-3 rounded-lg">
                <Text className="text-sm text-gray-500">Użytkownik:</Text>
                {isUserLoading ? (
                    <ActivityIndicator />
                ) : user ? (
                    <>
                      <Box className="mr-4">
                        <Avatar size="md">
                          <AvatarImage
                              source={{
                                uri:
                                    user.image ||
                                    "https://th.bing.com/th/id/OIP.3coo_N8sieled8QNroQmkgHaHa?rs=1&pid=ImgDetMain",
                              }}
                              alt="Zdjęcie profilowe"
                          />
                          <AvatarFallbackText>
                            {user.firstName?.[0]}
                            {user.lastName?.[0]}
                          </AvatarFallbackText>
                        </Avatar>
                      </Box>
                      <Box className="flex-1">
                        <Text className="text-lg font-bold text-gray-900">
                          {user.firstName} {user.lastName}
                        </Text>
                        <Text className="text-sm text-gray-700">
                          Email: {user.email}
                        </Text>
                        <Pressable
                            onPress={() => setIsMessageFormVisible(true)}
                            className="mt-3 bg-blue-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-lg font-bold text-center text-blue-600 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 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">Temat:</Text>
                  <Text className="bg-gray-100 p-3 rounded text-gray-500">
                    Zapytanie o ogłoszenie '{notice.title || "Brak nazwy ogłoszenia"}'
                  </Text>
                  <Text className="text-sm font-medium mb-1">Treść:</Text>
                  <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>
                </View>
              </View>
          )}
        </Card>
      </SafeAreaView>
  );
}