import {
  Button,
  ButtonSize,
  Colors,
  DateTimePicker,
  LoaderScreen,
  Modal,
  Picker,
  PickerModes,
  Switch,
  Text,
  TextField,
  TextFieldRef,
  TouchableOpacity,
  View,
} from "react-native-ui-lib";
import { ScrollView } from "react-native-gesture-handler";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useEffect, useRef, useState } from "react";
import { AntDesign, Feather, Ionicons } from "@expo/vector-icons";
import { PickerMultiValue } from "react-native-ui-lib/src/components/picker/types";
import { useCreateEvent } from "@/hooks/firebase/useCreateEvent";
import { EventData } from "@/hooks/firebase/types/eventData";
import DropModalIcon from "@/assets/svgs/DropModalIcon";
import {Alert, StyleSheet} from "react-native";
import ClockIcon from "@/assets/svgs/ClockIcon";
import LockIcon from "@/assets/svgs/LockIcon";
import MenuIcon from "@/assets/svgs/MenuIcon";
import CameraIcon from "@/assets/svgs/CameraIcon";
import AssigneesDisplay from "@/components/shared/AssigneesDisplay";
import { useAtom } from "jotai";
import {
  eventForEditAtom,
  selectedNewEventDateAtom,
  isAllDayAtom,
} from "@/components/pages/calendar/atoms";
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
import BinIcon from "@/assets/svgs/BinIcon";
import DeleteEventDialog from "./DeleteEventDialog";
import { useDeleteEvent } from "@/hooks/firebase/useDeleteEvent";
import AddPersonIcon from "@/assets/svgs/AddPersonIcon";

const daysOfWeek = [
  { label: "Monday", value: "monday" },
  { label: "Tuesday", value: "tuesday" },
  { label: "Wednesday", value: "wednesday" },
  { label: "Thursday", value: "thursday" },
  { label: "Friday", value: "friday" },
  { label: "Saturday", value: "saturday" },
  { label: "Sunday", value: "sunday" },
];

export const ManuallyAddEventModal = () => {
  const insets = useSafeAreaInsets();

  const [selectedNewEventDate, setSelectedNewEndDate] = useAtom(
    selectedNewEventDateAtom
  );
  const [editEvent, setEditEvent] = useAtom(eventForEditAtom);
  const [allDayAtom, setAllDayAtom] = useAtom(isAllDayAtom);
  const [deleteModalVisible, setDeleteModalVisible] = useState<boolean>(false);
  const { mutateAsync: deleteEvent, isLoading: isDeleting } = useDeleteEvent();

  const { show, close, initialDate } = {
    show: !!selectedNewEventDate || !!editEvent,
    close: () => {
      setDeleteModalVisible(false);
      setSelectedNewEndDate(undefined);
      setEditEvent(undefined);
    },
    initialDate: selectedNewEventDate || editEvent?.start,
  };

  const detailsRef = useRef<TextFieldRef>(null);
  
  const [title, setTitle] = useState<string>(editEvent?.title || "");
  const [details, setDetails] = useState<string>(editEvent?.notes || "");
  const [isAllDay, setIsAllDay] = useState(editEvent?.allDay || false);
  const [isPrivate, setIsPrivate] = useState<boolean>(
    editEvent?.private || false
  );
  const [location, setLocation] = useState(editEvent?.location ?? "");

  useEffect(() => {
    if(allDayAtom === true) setIsAllDay(true);
  }, [allDayAtom])
  

  const [startTime, setStartTime] = useState(() => {
    const date = initialDate ?? new Date();
    if (
      date.getMinutes() > 0 ||
      date.getSeconds() > 0 ||
      date.getMilliseconds() > 0
    ) {
      date.setHours(date.getHours() + 1);
    }
    date.setMinutes(0);
    date.setSeconds(0);
    date.setMilliseconds(0);
    return date;
  });

  const [endTime, setEndTime] = useState(() => {
    if (editEvent?.end) {
      const date = new Date(editEvent.end);
      date.setSeconds(0, 0);
      return date;
    }

    const baseDate = editEvent?.end ?? initialDate ?? new Date();
    const date = new Date(baseDate);

    if (
      date.getMinutes() > 0 ||
      date.getSeconds() > 0 ||
      date.getMilliseconds() > 0
    ) {
      date.setHours(date.getHours() + 1);
    }
    date.setMinutes(0);
    date.setSeconds(0);
    date.setMilliseconds(0);

    date.setHours(date.getHours() + 1);
    return date;
  });
  const [startDate, setStartDate] = useState(initialDate ?? new Date());
  const [endDate, setEndDate] = useState(
    editEvent?.end ?? initialDate ?? new Date()
  );
  const [selectedAttendees, setSelectedAttendees] = useState<string[]>(
    editEvent?.attendees ?? []
  );
  const [repeatInterval, setRepeatInterval] = useState<PickerMultiValue>([]);

  const {
    mutateAsync: createEvent,
    isLoading: isAdding,
    isError,
  } = useCreateEvent();
  const { data: members } = useGetFamilyMembers(true);
  const titleRef = useRef<TextFieldRef>(null);

  const [creator, setCreator] = useState('');
  useEffect(() => {
    if (editEvent) {
      let creatorMember = members?.find((member) => member?.uid === editEvent.creatorId);
      const fullName = `${creatorMember?.firstName ?? ""}`;
      setCreator(fullName);
    }
  }, [])

  const isLoading = isDeleting || isAdding;

  useEffect(() => {
    setTitle(editEvent?.title || "");
    setDetails(editEvent?.notes || "");
    setIsAllDay(editEvent?.allDay || false);
    setIsPrivate(editEvent?.private || false);

    setStartTime(() => {
      const date = new Date(initialDate ?? new Date());
      const minutes = date.getMinutes();
      date.setMinutes(0, 0, 0);
      if (minutes >= 30) {
        date.setHours(date.getHours() + 1);
      }
      return date;
    });

    setEndTime(() => {
      if (editEvent?.end) {
        const date = new Date(editEvent.end);
        date.setSeconds(0, 0);
        return date;
      }

      const baseDate = editEvent?.end ?? initialDate ?? new Date();
      const date = new Date(baseDate);

      if (
        date.getMinutes() > 0 ||
        date.getSeconds() > 0 ||
        date.getMilliseconds() > 0
      ) {
        date.setHours(date.getHours() + 1);
      }
      date.setMinutes(0);
      date.setSeconds(0);
      date.setMilliseconds(0);

      date.setHours(date.getHours() + 1);
      return date;
    });

    setStartDate(initialDate ?? new Date());
    setEndDate(editEvent?.end ?? initialDate ?? new Date());
    setSelectedAttendees(editEvent?.attendees ?? []);
    setLocation(editEvent?.location ?? "");
    setRepeatInterval([]);
  }, [editEvent, selectedNewEventDate]);

  useEffect(() => {
    if (show && !editEvent) {
      setTimeout(() => {
        titleRef?.current?.focus();
      }, 500);
    }
  }, [selectedNewEventDate]);

  if (!show) return null;

  const formatDateTime = (date?: Date | string) => {
    if (!date) return undefined;
    return new Date(date).toLocaleDateString("en-US", {
      weekday: "long",
      month: "short",
      day: "numeric",
    });
  };

  const showDeleteEventModal = () => {
    setDeleteModalVisible(true);
  };

  const handleDeleteEvent = async () => {
    await deleteEvent({ eventId: `${editEvent?.id}` });
    close();
  };

  const hideDeleteEventModal = () => {
    setDeleteModalVisible(false);
  };

  const combineDateAndTime = (date: Date, time: Date): Date => {
    const combined = new Date(date);
    combined.setHours(time.getHours());
    combined.setMinutes(time.getMinutes());
    combined.setSeconds(0);
    combined.setMilliseconds(0);
    return combined;
  };

  const handleSave = async () => {
    let finalStartDate: Date;
    let finalEndDate: Date;

    if (isAllDay) {
      finalStartDate = new Date(startDate.setHours(0, 0, 0, 0));
      finalEndDate = new Date(startDate.setHours(0, 0, 0, 0));
    } else {
      finalStartDate = combineDateAndTime(startDate, startTime);
      finalEndDate = combineDateAndTime(endDate, endTime);
    }

    const eventData: Partial<EventData> = {
      title: title,
      startDate: finalStartDate,
      endDate: finalEndDate,
      allDay: isAllDay,
      attendees: selectedAttendees,
      notes: details,
      location: location
    };

    if (editEvent?.id) eventData.id = editEvent?.id;

    if (validateEvent()) {
      await createEvent(eventData);
      setEditEvent(undefined);

      close();
    } else {
      return;
    }
  };

  const validateEvent = () => {
    if (!title) {
      Alert.alert('Alert', 'Title field cannot be empty');
      return false;
    }
    if (!selectedAttendees || selectedAttendees?.length === 0) {
      Alert.alert('Alert', 'Cannot have an event without any attendees');
      return false;
    }

    return true;
  }

  const getRepeatLabel = () => {
    const selectedDays = repeatInterval;
    const allDays = [
      "sunday",
      "monday",
      "tuesday",
      "wednesday",
      "thursday",
      "friday",
      "saturday",
    ];
    const workDays = ["monday", "tuesday", "wednesday", "thursday", "friday"];

    const isEveryWorkDay = workDays.every((day) => selectedDays.includes(day));

    const isEveryDay = allDays.every((day) => selectedDays.includes(day));

    if (isEveryDay) {
      return "Every day";
    } else if (
      isEveryWorkDay &&
      !selectedDays.includes("saturday") &&
      !selectedDays.includes("sunday")
    ) {
      return "Every work day";
    } else {
      return selectedDays
        .map((item) => daysOfWeek.find((day) => day.value === item)?.label)
        .join(", ");
    }
  };

  if (isLoading && !isError) {
    return (
      <Modal
        visible={show}
        animationType="slide"
        onRequestClose={close}
        transparent={false}
      >
        <LoaderScreen
          message={isDeleting ? "Deleting event..." : "Saving event..."}
          color={Colors.grey40}
        />
      </Modal>
    );
  }

  return (
    <Modal
      visible={show}
      animationType="slide"
      onRequestClose={close}
      transparent={false}
    >
      <View
        style={{
          flex: 1,
          backgroundColor: "#fff",
          paddingTop: insets.top, // Safe area inset for top
          paddingBottom: insets.bottom, // Safe area inset for bottom
          paddingLeft: insets.left, // Safe area inset for left
          paddingRight: insets.right, // Safe area inset for right
        }}
      >
        {/*{editEvent ? (*/}
        {/*  <>*/}
        {/*    <View center paddingT-8>*/}
        {/*      <TouchableOpacity onPress={close}>*/}
        {/*        <DropModalIcon />*/}
        {/*      </TouchableOpacity>*/}
        {/*    </View>*/}
        {/*    <View row spread paddingH-10 paddingB-15>*/}
        {/*      <Button*/}
        {/*        color="#05a8b6"*/}
        {/*        style={styles.topBtn}*/}
        {/*        iconSource={() => <CloseXIcon />}*/}
        {/*        onPress={close}*/}
        {/*      />*/}
        {/*      <View row>*/}
        {/*        <Button*/}
        {/*          style={styles.topBtn}*/}
        {/*          marginR-10*/}
        {/*          iconSource={() => <PenIcon />}*/}
        {/*          onPress={handleSave}*/}
        {/*        />*/}
        {/*        <Button*/}
        {/*          style={styles.topBtn}*/}
        {/*          marginL-5*/}
        {/*          iconSource={() => <BinIcon />}*/}
        {/*          onPress={() => {*/}
        {/*            showDeleteEventModal();*/}
        {/*          }}*/}
        {/*        />*/}
        {/*      </View>*/}
        {/*    </View>*/}
        {/*  </>*/}
        {/*) : (*/}
        <View
          style={{
            flexDirection: "row",
            justifyContent: "space-between",
            padding: 16,
          }}
        >
          <TouchableOpacity onPress={close}>
            <Text
              style={{
                color: "#05a8b6",
                fontFamily: "PlusJakartaSans_400Regular",
                fontSize: 16,
              }}
              text70
            >
              Cancel
            </Text>
          </TouchableOpacity>
          <View row center>
            <DropModalIcon onPress={close} />
          </View>
          <View flexS row gap-10>
            <TouchableOpacity onPress={handleSave}>
              <Text
                style={{
                  color: "#05a8b6",
                  fontFamily: "PlusJakartaSans_400Regular",
                  fontSize: 16,
                }}
                text70
              >
                Save
              </Text>
            </TouchableOpacity>
            {editEvent && (
              <Button
                style={styles.topBtn}
                marginL-5
                iconSource={() => <BinIcon />}
                onPress={showDeleteEventModal}
              />
            )}
          </View>
        </View>
        {/*)}*/}
        <ScrollView style={{ minHeight: "85%" }}>
          <TextField
            placeholder="Add event title"
            ref={titleRef}
            value={title}
            onChangeText={(text) => {
              setTitle(text);
            }}
            placeholderTextColor="#2d2d30"
            style={{ fontFamily: "Manrope_500Medium", fontSize: 22 }}
            paddingT-15
            paddingL-30
            returnKeyType="next"
          />
          <View style={styles.divider} marginT-8 />
          <View marginL-30 centerV>
            <View row spread marginB-10 centerV>
              <View row>
                <AntDesign name="clockcircleo" size={24} color="#919191" />
                <Text
                  style={{
                    fontFamily: "PlusJakartaSans_500Medium",
                    fontSize: 16,
                  }}
                  marginL-10
                >
                  All day
                </Text>
              </View>
              <View right marginR-30>
                <Switch
                  onColor={"#ea156c"}
                  offColor={"#e1e1e2"}
                  marginL-10
                  value={isAllDay}
                  onValueChange={(value) => setIsAllDay(value)}
                />
              </View>
            </View>
            <View row marginB-10 spread>
              <View row centerV>
                <Feather name="calendar" size={25} color="#919191" />
                <DateTimePicker
                  value={startDate}
                  onChange={(date) => {
                    setStartDate(date);
                  }}
                  //maximumDate={endDate}
                  style={{
                    fontFamily: "PlusJakartaSans_500Medium",
                    fontSize: 16,
                  }}
                  marginL-8
                />
              </View>
              <DateTimePicker
                value={startTime}
                onChange={(time) => {
                  if (time <= endTime) {
                    setStartTime(time);
                  }
                }}
                minuteInterval={5}
                dateTimeFormatter={(date, mode) =>
                  date.toLocaleTimeString("en-us", {
                    hour: "numeric",
                    minute: "numeric",
                  })
                }
                mode="time"
                style={{
                  fontFamily: "PlusJakartaSans_500Medium",
                  fontSize: 16,
                }}
                marginR-30
              />
            </View>

            {!isAllDay && (
              <View row marginB-10 spread>
                <View row centerV>
                  <Feather name="calendar" size={25} color="#919191" />
                  <DateTimePicker
                    value={endDate}
                    minimumDate={startDate}
                    text70
                    marginL-8
                    onChange={(date) => {
                      setEndDate(date);
                    }}
                    style={{
                      fontFamily: "PlusJakartaSans_500Medium",
                      fontSize: 16,
                    }}
                  />
                </View>
                <DateTimePicker
                  value={endTime}
                  onChange={(time) => {
                    if (time >= endTime) {
                      setEndTime(time);
                    }
                  }}
                  minimumDate={startTime}
                  minuteInterval={5}
                  dateTimeFormatter={(date, mode) =>
                    date.toLocaleTimeString("en-us", {
                      hour: "numeric",
                      minute: "numeric",
                    })
                  }
                  mode="time"
                  style={{
                    fontFamily: "PlusJakartaSans_500Medium",
                    fontSize: 16,
                  }}
                  marginR-30
                />
              </View>
            )}
          </View>

          <View style={styles.divider} />

          <View marginH-30 marginB-10 row centerV>
            <Ionicons name="person-circle-outline" size={28} color="#919191" />
            <Text
              style={{ fontFamily: "Manrope_600SemiBold", fontSize: 16 }}
              marginL-10
            >
              Attendees
            </Text>
            <View flex-1 />
            <Picker
              value={selectedAttendees}
              onChange={(value) =>
                setSelectedAttendees((value as string[]) ?? [])
              }
              style={{ marginLeft: "auto" }}
              mode={PickerModes.MULTI}
              renderInput={() => (
                <Button
                  size={ButtonSize.small}
                  paddingH-8
                  iconSource={() => (
                    <Ionicons name="add-outline" size={20} color="#ea156c" />
                  )}
                  style={{
                    marginLeft: "auto",
                    borderRadius: 8,
                    backgroundColor: "#ffe8f1",
                    borderColor: "#ea156c",
                    borderWidth: 1,
                  }}
                  color="#ea156c"
                  label="Add"
                  labelStyle={{
                    fontFamily: "Manrope_600SemiBold",
                    fontSize: 14,
                  }}
                />
              )}
            >
              {members?.map((member) => (
                <Picker.Item
                  key={member?.uid}
                  value={member?.uid!}
                  label={member?.firstName + " " + member?.lastName}
                />
              ))}
            </Picker>
          </View>

          <View marginL-35>
            <AssigneesDisplay
              setSelectedAttendees={setSelectedAttendees}
              selectedAttendees={selectedAttendees}
            />
          </View>

          <View style={styles.divider} />
          <View marginH-30 marginB-0 row spread centerV>
            <View row centerV>
              <ClockIcon />
              <Text
                style={{
                  fontFamily: "Manrope_600SemiBold",
                  fontSize: 16,
                }}
                marginL-10
              >
                Reminders
              </Text>
            </View>
            <View>
              <Button
                size={ButtonSize.small}
                paddingH-8
                iconSource={() => (
                  <Ionicons name="add-outline" size={20} color="#ea156c" />
                )}
                style={{
                  marginLeft: "auto",
                  borderRadius: 8,
                  backgroundColor: "#ffe8f1",
                  borderColor: "#ea156c",
                  borderWidth: 1,
                }}
                labelStyle={{ fontFamily: "Manrope_600SemiBold", fontSize: 14 }}
                color="#ea156c"
                label="Set Reminder"
              />
            </View>
          </View>
          <View style={styles.divider} />
          <View marginH-30 marginB-0 row spread centerV>
            <View row center>
              <LockIcon />
              <Text
                style={{
                  fontFamily: "PlusJakartaSans_500Medium",
                  fontSize: 16,
                }}
                marginL-12
                center
              >
                Mark as Private
              </Text>
            </View>
            <View>
              <Switch
                onColor={"#ea156c"}
                offColor={"#e1e1e2"}
                marginL-10
                value={isPrivate}
                onValueChange={(value) => setIsPrivate(value)}
              />
            </View>
          </View>
          <View style={styles.divider} />
          <View marginH-28 marginB-0 centerV flex-1>
            <View row centerV style={{ flexGrow: 1}}>
              <Ionicons name="location-outline" size={25} color={"#919191"}/>
              <TextField
                  placeholder="Location"
                  value={location}
                  onChangeText={(text) => {
                    setLocation(text);
                  }}
                  placeholderTextColor="#2d2d30"
                  style={{ fontFamily: "Manrope_500Medium", fontSize: 16, minWidth: "100%"}}
                  marginL-12
                  paddingR-12
              />
            </View>
          </View>
          {editEvent && <>
            <View style={styles.divider} />
            <View marginH-32 marginB-0 centerV flex-1>
              <View row centerV style={{ flexGrow: 1}}>
                <AddPersonIcon />
                <TextField
                    editable={false}
                    value={creator}
                    placeholderTextColor="#2d2d30"
                    style={{ fontFamily: "Manrope_500Medium", fontSize: 16, minWidth: "100%", color: "black"}}
                    marginL-12
                    paddingR-12
                />
              </View>
            </View>
          </>}
          <View style={styles.divider} />
          <View marginH-30 marginB-0 spread centerV flex-1>
            <TouchableOpacity onPress={() => detailsRef?.current?.focus()}>
              <View row centerV>
                <MenuIcon />
                <Text
                  style={{
                    fontFamily: "PlusJakartaSans_500Medium",
                    fontSize: 16,
                  }}
                  marginL-10
                >
                  Add Details
                </Text>
              </View>
            </TouchableOpacity>

            <TextField
              value={details}
              onChangeText={setDetails}
              ref={detailsRef}
              maxLength={2000}
              multiline
              numberOfLines={10}
              marginT-10
              style={{ flex: 1, minHeight: 180 }}
            />
          </View>
        </ScrollView>
        <Button
          disabled
          marginH-30
          marginB-30
          label="Create event from image"
          text70
          style={{ height: 47 }}
          labelStyle={{ fontFamily: "PlusJakartaSans_500Medium", fontSize: 15 }}
          backgroundColor="#05a8b6"
          iconSource={() => (
            <View marginR-5>
              <CameraIcon color="white" />
            </View>
          )}
        />
      </View>
      {editEvent && (
        <DeleteEventDialog
          visible={deleteModalVisible}
          title={editEvent?.title}
          onDismiss={hideDeleteEventModal}
          onConfirm={handleDeleteEvent}
        />
      )}
    </Modal>
  );
};

const styles = StyleSheet.create({
  divider: { height: 1, backgroundColor: "#e4e4e4", marginVertical: 15 },
  gradient: {
    height: "25%",
    position: "absolute",
    bottom: 0,
    width: "100%",
  },
  buttonContainer: {
    position: "absolute",
    bottom: 25,
    width: "100%",
  },
  button: {
    backgroundColor: "rgb(253, 23, 117)",
    paddingVertical: 20,
  },
  topBtn: {
    backgroundColor: "white",
    color: "#05a8b6",
  },
  rotateSwitch: {
    marginLeft: 35,
    marginBottom: 10,
    marginTop: 25,
  },
});