import { useState, useEffect } from "react";
import {
  Image,
  StyleSheet,
  KeyboardAvoidingView,
  Platform,
  ActivityIndicator,
} from "react-native";
import { Button, ButtonText } from "@/components/ui/button";
import { FormControl } from "@/components/ui/form-control";
import { Input, InputField } from "@/components/ui/input";
import { Text } from "@/components/ui/text";
import { VStack } from "@/components/ui/vstack";
import { Textarea, TextareaInput } from "@/components/ui/textarea";
import { ScrollView } from "@gluestack-ui/themed";
import { Box } from "@/components/ui/box";
import * as ImagePicker from "expo-image-picker";
import {
  Select,
  SelectTrigger,
  SelectInput,
  SelectIcon,
  SelectPortal,
  SelectBackdrop,
  SelectContent,
  SelectItem,
  SelectScrollView,
} from "@/components/ui/select";

import { ChevronDownIcon } from "@/components/ui/icon";
import { useNoticesStore } from "@/store/noticesStore";
import { listCategories } from "@/api/categories";
import { useRouter } from "expo-router";
import { attributes } from "@/data/attributesData";
import { useLocalSearchParams } from "expo-router";

export default function EditNotice() {
  const { id } = useLocalSearchParams();
  const router = useRouter();
  const { editNotice, fetchNotices, notices } = useNoticesStore();
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [price, setPrice] = useState("");
  const [category, setCategory] = useState("");
  const [image, setImage] = useState([]);
  const [isImageLoading, setIsImageLoading] = useState(true);
  const [selectItems, setSelectItems] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [selectedAttributes, setSelectedAttributes] = useState({});
  const { getNoticeById, getAllImagesByNoticeId } = useNoticesStore();

  useEffect(() => {
    let isMounted = true;
    const fetchSelectItems = async () => {
      try {
        let data = await listCategories();
        if (isMounted && Array.isArray(data)) {
          setSelectItems(data);
        }
      } catch (error) {
        console.error("Error fetching select items:", error);
      }
    };

    fetchSelectItems();

    return () => {
      isMounted = false;
    };
  }, []);

  useEffect(() => {
    const notice = notices.find((notice) => notice.noticeId == id);
    if (notice) {
      setTitle(notice.title || "");
      setDescription(notice.description || "");
      setPrice(notice.price?.toString() || "");
      setCategory(notice.category || "");

      if (notice.attributes && Array.isArray(notice.attributes)) {
        const attributesObj = {};
        notice.attributes.forEach((attr) => {
          attributesObj[attr.name] = attr.value;
        });
        setSelectedAttributes(attributesObj);
      }
    }

    const fetchImage = async () => {
      setIsImageLoading(true);
      try {
        const fetchedImages = await getAllImagesByNoticeId(notice.noticeId);
        if (fetchedImages && fetchedImages.length > 0) {
          setImage(fetchedImages);
        } else {
          setImage([]);
        }
      } catch (err) {
        console.error("Error while loading images:", err);
        setImage([]);
      } finally {
        setIsImageLoading(false);
      }
    };

    if (notice) {
      fetchImage();
    }
  }, [notices, id]);

  const [error, setError] = useState({
    title: false,
    description: false,
    price: false,
    category: false,
  });

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: "center",
      justifyContent: "center",
    },
    image: {
      width: 100,
      height: 100,
    },
  });

  const handleEditNotice = async () => {
    setError({
      title: !title,
      description: !description,
      price: !price,
      category: !category,
    });

    if (!title || !description || !price || !category) {
      console.log("Error in form");
      return;
    }
    const formattedAttributes = Object.entries(selectedAttributes).map(
      ([name, value]) => ({
        name: name,
        value: value,
      })
    );
    setIsLoading(true);
    try {
      const result = await editNotice(id, {
        title: title,
        description: description,
        price: price,
        category: category,
        status: "INACTIVE",
        image: image,
        attributes: formattedAttributes,
      });

      if (result) {
        await fetchNotices();

        router.push("/(tabs)/dashboard/userNotices");
      }
    } catch (error) {
      console.error("Error editing notice. Error message: ", error.message);
    } finally {
      setIsLoading(false);
    }
  };

  const takePicture = async () => {
    const { status } = await ImagePicker.requestCameraPermissionsAsync();
    if (status !== "granted") {
      return;
    }
    const result = await ImagePicker.launchCameraAsync({
      allowsEditing: false,
    });

    if (!result.canceled && result.assets) {
      setImage(result.assets.map((asset) => asset.uri));
    }
  };

  const pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: "images",
      selectionLimit: 8,
      allowsEditing: false,
      allowsMultipleSelection: true,
      aspect: [4, 3],
      quality: 0.5,
    });

    if (!result.canceled) {
      setImage(result.assets.map((asset) => asset.uri));
    }
  };

  if (isLoading) {
    return (
      <Box className="items-center justify-center flex-1">
        <ActivityIndicator size="large" color="#787878" />
        <Text size="md" bold="true" className="mt-5">
          Edytuj ogłoszenie...
        </Text>
      </Box>
    );
  }

  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === "ios" ? "padding" : "height"}
      style={{ flex: 1 }}
      keyboardVerticalOffset={Platform.OS === "ios" ? 64 : 0}
    >
      <ScrollView h="$80" w="$80">
        <FormControl className="p-4 border rounded-lg border-outline-300">
          <VStack space="xl">
            <VStack space="md">
              <Text className="text-typography-500">Zdjęcia</Text>
              <Button onPress={pickImage}>
                <ButtonText>Wybierz zdjęcia</ButtonText>
              </Button>
              <Button onPress={takePicture}>
                <ButtonText>Zrób zdjęcie</ButtonText>
              </Button>
              <Text size="sm" bold="true">
                Pierwsze zdjęcie będzie zdjęciem głównym
              </Text>
              {image && image.length > 0 && (
                <VStack space="xs" className="flex-row flex-wrap">
                  {image.map((img, index) => {
                    const imageSource =
                      typeof img === "string" ? { uri: img } : img;

                    return (
                      <Image
                        key={index}
                        source={imageSource}
                        style={styles.image}
                        className="m-1"
                        onError={(error) =>
                          console.log(`Image ${index} error:`, error)
                        }
                      />
                    );
                  })}
                </VStack>
              )}
            </VStack>

            <VStack space="xs">
              <Text className="text-typography-500">Tytuł*</Text>
              <Input className="min-w-[250px]" isInvalid={error.title}>
                <InputField
                  type="text"
                  value={title}
                  onChangeText={(value) => setTitle(value)}
                />
              </Input>
            </VStack>

            <VStack space="xs">
              <Text className="text-typography-500">Opis*</Text>
              <Textarea
                size="md"
                className="min-w-[250px] "
                isInvalid={error.description}
              >
                <TextareaInput
                  placeholder="Opisz produkt"
                  value={description}
                  onChangeText={(value) => setDescription(value)}
                />
              </Textarea>
            </VStack>

            <VStack space="xs">
              <Text className="text-typography-500">Cena*</Text>
              <Input className="min-w-[250px]" isInvalid={error.price}>
                <InputField
                  type="text"
                  value={price}
                  onChangeText={(value) => setPrice(value)}
                />
              </Input>
            </VStack>
            <VStack space="xs">
              <Text className="text-typography-500">Kategoria*</Text>
              <Select
                onValueChange={(value) => setCategory(value)}
                isInvalid={error.category}
                selectedValue={category || ""}
              >
                <SelectTrigger variant="outline" size="md">
                  <SelectInput
                    placeholder="Wybierz kategorię"
                    value={
                      selectItems.find((item) => item.value === category)
                        ?.label || ""
                    }
                  />
                  <SelectIcon className="mr-3" as={ChevronDownIcon} />
                </SelectTrigger>
                <SelectPortal>
                  <SelectBackdrop />
                  <SelectContent style={{ maxHeight: 400 }}>
                    <SelectScrollView>
                      {selectItems.map((item) => (
                        <SelectItem
                          key={item.value}
                          label={item.label}
                          value={item.value}
                        />
                      ))}
                    </SelectScrollView>
                  </SelectContent>
                </SelectPortal>
              </Select>
            </VStack>

            {Object.entries(attributes).map(([label, options]) => (
              <VStack key={label} space="xs">
                <Text className="text-typography-500">{label}</Text>
                <Select
                  selectedValue={selectedAttributes[label] || ""}
                  onValueChange={(value) =>
                    setSelectedAttributes((prev) => ({
                      ...prev,
                      [label]: value,
                    }))
                  }
                >
                  <SelectTrigger variant="outline" size="md">
                    <SelectInput
                      placeholder={`Wybierz ${label.toLowerCase()}`}
                    />
                    <SelectIcon className="mr-3" as={ChevronDownIcon} />
                  </SelectTrigger>
                  <SelectPortal>
                    <SelectBackdrop />
                    <SelectContent style={{ maxHeight: 400 }}>
                      <SelectScrollView>
                        {options.map((option) => (
                          <SelectItem
                            key={option}
                            label={option}
                            value={option}
                          />
                        ))}
                      </SelectScrollView>
                    </SelectContent>
                  </SelectPortal>
                </Select>
              </VStack>
            ))}

            <Button
              className="mt-5 w-full"
              onPress={handleEditNotice}
              disabled={isLoading}
            >
              <ButtonText className="text-typography-0">Edytuj</ButtonText>
            </Button>
          </VStack>
        </FormControl>
      </ScrollView>
    </KeyboardAvoidingView>
  );
}