import { AntDesign, Ionicons } from "@expo/vector-icons";
import React, { useCallback, useState } from "react";
import { Button, Checkbox, Text, View } from "react-native-ui-lib";
import { ScrollView, StyleSheet } from "react-native";
import { colorMap } from "@/contexts/SettingsContext";
import { TouchableOpacity } from "react-native-gesture-handler";
import { fetchGoogleCalendarEvents } from "@/calendar-integration/google-calendar-utils";
import { fetchMicrosoftCalendarEvents } from "@/calendar-integration/microsoft-calendar-utils";
import { useCreateEventFromProvider } from "@/hooks/firebase/useCreateEvent";
import { useAuthContext } from "@/contexts/AuthContext";
import { useUpdateUserData } from "@/hooks/firebase/useUpdateUserData";
import { GoogleSignin } from "@react-native-google-signin/google-signin";
import * as AuthSession from "expo-auth-session";
import debounce from "debounce";
import AppleIcon from "@/assets/svgs/AppleIcon";
import GoogleIcon from "@/assets/svgs/GoogleIcon";
import OutlookIcon from "@/assets/svgs/OutlookIcon";

GoogleSignin.configure({
  webClientId:
    "406146460310-hjadmfa1gg4ptaouira5rkhu0djlo5ut.apps.googleusercontent.com",
  scopes: ["profile", "email"], // Note: add calendar scope
});

const GoogleLogin = async () => {
  return await GoogleSignin.signIn();
};

const microsoftConfig = {
  clientId: "13c79071-1066-40a9-9f71-b8c4b138b4af", // Replace with your Microsoft client ID
  redirectUri: AuthSession.makeRedirectUri({ path: "settings" }), // Generate redirect URI automatically for Expo
  scopes: [
    "openid",
    "profile",
    "email",
    "offline_access",
    "Calendars.ReadWrite", // Scope for reading calendar events
  ],
  authorizationEndpoint:
    "https://login.microsoftonline.com/common/oauth2/v2.0/authorize",
  tokenEndpoint: "https://login.microsoftonline.com/common/oauth2/v2.0/token",
};

const CalendarSettingsPage = (props: {
  setSelectedPage: (page: number) => void;
}) => {
  const [startDate, setStartDate] = useState<boolean>(false);
  const { profileData } = useAuthContext();

  const [selectedColor, setSelectedColor] = useState<string>(
    profileData?.eventColor ?? colorMap.pink
  );
  const [previousSelectedColor, setPreviousSelectedColor] = useState<string>(
    profileData?.eventColor ?? colorMap.pink
  );

  const { mutateAsync: createEventFromProvider } = useCreateEventFromProvider();
  const { mutateAsync: updateUserData } = useUpdateUserData();

  const fetchAndSaveGoogleEvents = () => {
    const timeMin = new Date(new Date().setHours(0, 0, 0, 0));
    const timeMax = new Date(
      new Date(new Date().setHours(0, 0, 0, 0)).setDate(timeMin.getDate() + 30)
    );

    fetchGoogleCalendarEvents(
      profileData?.googleToken,
      timeMin.toISOString().slice(0, -5) + "Z",
      timeMax.toISOString().slice(0, -5) + "Z"
    ).then((response) => {
      response?.forEach((item) => saveData(item));
    });
  };

  async function saveData(item: any) {
    await createEventFromProvider(item);
  }

  const fetchAndSaveMicrosoftEvents = () => {
    const startDateTime = new Date(new Date().setHours(0, 0, 0, 0));
    const endDateTime = new Date(
      new Date(new Date().setHours(0, 0, 0, 0)).setDate(
        startDateTime.getDate() + 30
      )
    );

    fetchMicrosoftCalendarEvents(
      profileData?.microsoftToken,
      startDateTime.toISOString().slice(0, -5) + "Z",
      endDateTime.toISOString().slice(0, -5) + "Z"
    ).then((response) => {
      console.log(response);
      response?.forEach((item) => saveData(item));
    });
  };

  const handleGoogleLogin = async () => {
    try {
      const response = await GoogleLogin();
      if (response) {
        const googleUserData = response.data;
        let idToken = googleUserData?.idToken;

        if (idToken) {
          await updateUserData({ newUserData: { googleToken: idToken } });
        }
      }
    } catch (apiError) {
      console.log(apiError || "Something went wrong");
    }
  };

  const handleMicrosoftSignIn = async () => {
    try {
      console.log("Starting Microsoft sign-in...");

      const authRequest = new AuthSession.AuthRequest({
        clientId: microsoftConfig.clientId,
        scopes: microsoftConfig.scopes,
        redirectUri: microsoftConfig.redirectUri,
        responseType: AuthSession.ResponseType.Code,
        usePKCE: true, // Enable PKCE
      });

      console.log("Auth request created:", authRequest);

      const authResult = await authRequest.promptAsync({
        authorizationEndpoint: microsoftConfig.authorizationEndpoint,
      });

      console.log("Auth result:", authResult);

      if (authResult.type === "success" && authResult.params?.code) {
        const code = authResult.params.code;
        console.log("Authorization code received:", code);

        // Exchange authorization code for tokens
        const tokenResponse = await fetch(microsoftConfig.tokenEndpoint, {
          method: "POST",
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
          body: `client_id=${
            microsoftConfig.clientId
          }&redirect_uri=${encodeURIComponent(
            microsoftConfig.redirectUri
          )}&grant_type=authorization_code&code=${code}&code_verifier=${
            authRequest.codeVerifier
          }&scope=${encodeURIComponent(
            "https://graph.microsoft.com/Calendars.ReadWrite offline_access"
          )}`,
        });

        console.log("Token response status:", tokenResponse.status);

        if (!tokenResponse.ok) {
          console.error("Token exchange failed:", await tokenResponse.text());
          return;
        }

        const tokenData = await tokenResponse.json();
        console.log("Token data received:", tokenData);

        if (tokenData?.id_token) {
          console.log("ID token received, updating user data...");
          await updateUserData({
            newUserData: { microsoftToken: tokenData.access_token },
          });
          console.log("User data updated successfully.");
        }
      } else {
        console.warn("Authentication was not successful:", authResult);
      }
    } catch (error) {
      console.error("Error during Microsoft sign-in:", error);
    }
  };

  const debouncedUpdateUserData = useCallback(
    debounce(async (color: string) => {
      try {
        await updateUserData({
          newUserData: {
            eventColor: color,
          },
        });
      } catch (error) {
        console.error("Failed to update color:", error);
        setSelectedColor(previousSelectedColor);
      }
    }, 500),
    []
  );

  const handleChangeColor = (color: string) => {
    setPreviousSelectedColor(selectedColor);
    setSelectedColor(color);
    debouncedUpdateUserData(color);
  };

  return (
    <ScrollView>
      <View marginH-30>
        <TouchableOpacity onPress={() => props.setSelectedPage(0)}>
          <View row marginT-20 marginB-35 centerV>
            <Ionicons name="chevron-back" size={22} color="#979797" />
            <Text text70 color="#979797">
              Return to main settings
            </Text>
          </View>
        </TouchableOpacity>
        <Text text60R>Calendar settings</Text>
        <View style={styles.card}>
          <Text text70 marginB-14>
            Event Color Preference
          </Text>
          <View row spread>
            <TouchableOpacity onPress={() => handleChangeColor(colorMap.pink)}>
              <View style={styles.colorBox} backgroundColor={colorMap.pink}>
                {selectedColor == colorMap.pink && (
                  <AntDesign name="check" size={30} color="white" />
                )}
              </View>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => handleChangeColor(colorMap.orange)}
            >
              <View style={styles.colorBox} backgroundColor={colorMap.orange}>
                {selectedColor == colorMap.orange && (
                  <AntDesign name="check" size={30} color="white" />
                )}
              </View>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => handleChangeColor(colorMap.green)}>
              <View style={styles.colorBox} backgroundColor={colorMap.green}>
                {selectedColor == colorMap.green && (
                  <AntDesign name="check" size={30} color="white" />
                )}
              </View>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => handleChangeColor(colorMap.teal)}>
              <View style={styles.colorBox} backgroundColor={colorMap.teal}>
                {selectedColor == colorMap.teal && (
                  <AntDesign name="check" size={30} color="white" />
                )}
              </View>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => handleChangeColor(colorMap.purple)}
            >
              <View style={styles.colorBox} backgroundColor={colorMap.purple}>
                {selectedColor == colorMap.purple && (
                  <AntDesign name="check" size={30} color="white" />
                )}
              </View>
            </TouchableOpacity>
          </View>
        </View>
        <View style={styles.card}>
          <Text text70>Weekly Start Date</Text>
          <View row marginV-5 marginT-20>
            <Checkbox
              value={startDate}
              style={styles.checkbox}
              color="#ea156d"
              onValueChange={() => setStartDate(true)}
            />
            <View row marginL-8>
              <Text text70>Sundays</Text>
              <Text text70 color="gray">
                {" "}
                (default)
              </Text>
            </View>
          </View>
          <View row marginV-5>
            <Checkbox
              value={!startDate}
              style={styles.checkbox}
              color="#ea156d"
              onValueChange={() => setStartDate(false)}
            />
            <Text text70 marginL-8>
              Mondays
            </Text>
          </View>
        </View>
        <Text text60R marginT-30 marginB-25>
          Add Calendar
        </Text>

        <Button
          onPress={handleGoogleLogin}
          label="Connect Google"
          iconSource={() => (
            <View marginR-15>
              <GoogleIcon />
            </View>
          )}
          style={styles.addCalBtn}
          color="black"
          text70BL
        />
        <Button
          label="Connect Apple"
          iconSource={() => (
            <View marginR-15>
              <AppleIcon />
            </View>
          )}
          style={styles.addCalBtn}
          color="black"
          text70BL
        />
        <Button
          onPress={handleMicrosoftSignIn}
          label="Connect Outlook"
          iconSource={() => (
            <View marginR-15>
              <OutlookIcon />
            </View>
          )}
          style={styles.addCalBtn}
          color="black"
          text70BL
        />

        <Text text60R marginT-30 marginB-20>
          Connected Calendars
        </Text>
        <View style={styles.card}>
          <Text text70>Calendars</Text>
          <View style={{ marginTop: 20 }}>
            <Button
              label={"Sync Outlook"}
              iconSource={() => (
                <View
                  backgroundColor="#ededed"
                  width={40}
                  height={40}
                  style={{ borderRadius: 50 }}
                  marginR-10
                  centerV
                  centerH
                >
                  <Ionicons name="logo-microsoft" size={22} color="#979797" />
                </View>
              )}
              backgroundColor="white"
              color="#464039"
              borderRadius={15}
              onPress={fetchAndSaveMicrosoftEvents}
            />
            {profileData?.googleToken !== undefined && (
              <Button
                label={"Sync Google"}
                iconSource={() => (
                  <View
                    backgroundColor="#ededed"
                    width={40}
                    height={40}
                    style={{ borderRadius: 50 }}
                    marginR-10
                    centerV
                    centerH
                  >
                    <Ionicons name="logo-google" size={22} color="#979797" />
                  </View>
                )}
                backgroundColor="white"
                color="#464039"
                borderRadius={15}
                onPress={fetchAndSaveGoogleEvents}
              />
            )}
          </View>
        </View>
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  addCalBtn: {
    backgroundColor: "#ffffff",
    marginBottom: 15,
    justifyContent: "flex-start",
    paddingLeft: 25,
  },
  backBtn: {
    backgroundColor: "red",
    marginLeft: -2,
    justifyContent: "flex-start",
  },
  card: {
    backgroundColor: "white",
    width: "100%",
    padding: 20,
    paddingBottom: 30,
    marginTop: 20,
    borderRadius: 20,
  },
  colorBox: {
    aspectRatio: 1,
    justifyContent: "center",
    alignItems: "center",
    width: 50,
    borderRadius: 12,
  },
  checkbox: {
    borderRadius: 50,
  },
});

export default CalendarSettingsPage;