import { Button, Header, HeaderContainer } from "@src/commonComponent";
import React, { useEffect } from "react";
import {
  Image,
  Text,
  View,
  TouchableOpacity,
  ScrollView,
  ImageBackground,
  FlatList,
  Share,
} from "react-native";
import styles from "./style";
import { useValues } from "@src/utils/context";
import Images from "@src/utils/images";
import {
  appColors,
  appFonts,
  fontSizes,
  windowHeight,
  windowWidth,
} from "@src/themes";
import { Copy } from "@src/utils/icons";
import { useAppNavigation } from "@src/utils/navigation";
import { useDispatch, useSelector } from "react-redux";
import { DATA } from "./data";
import Clipboard from "@react-native-clipboard/clipboard";
import { AppDispatch } from "@src/api/store";
import { referralData } from "@src/api/store/actions/referralAction";

export function ReferralID() {
  const { viewRTLStyle, isDark, isRTL } = useValues();
  const { navigate }: any = useAppNavigation();
  const dispatch = useDispatch<AppDispatch>();
  const { referralList } = useSelector((state: any) => state.refer);
  const referralData1 = referralList?.data?.data || [];
  const { taxidoSettingData, translateData } = useSelector(
    (state: any) => state.setting
  );
  useEffect(() => {
    dispatch(referralData()).then((res) => { });
  }, []);

  const gotoList = () => {
    navigate("ReferralList");
  };
  const renderItem = ({ item, index }: any) => {
    const isLastItem = index === item.length - 1;

    return (
      <View>
        <View
          style={{
            flexDirection: viewRTLStyle,
            alignItems: "center",
            marginHorizontal: windowWidth(15),
          }}
        >
          {item?.referred?.profile_image_url ? (
            <Image
              style={styles.profileImage}
              source={item?.referred?.profile_image_url}
            />
          ) : (
            <View
              style={[
                styles.profileImage1,
                {
                  backgroundColor: isDark
                    ? appColors.whiteColor
                    : appColors.blackColor,
                },
              ]}
            >
              <Text
                style={{
                  fontFamily: appFonts.bold,
                  fontSize: fontSizes.FONT22,
                  color: isDark ? appColors.blackColor : appColors.whiteColor,
                }}
              >
                {item.referred.name.charAt(0).toUpperCase()}
              </Text>
            </View>
          )}

          <View style={{ flex: 1, marginHorizontal: windowWidth(10) }}>
            <View
              style={{
                flexDirection: viewRTLStyle,
                justifyContent: "space-between",
                alignItems: "center",
              }}
            >
              <Text
                style={[
                  styles.title,
                  {
                    color: isDark ? appColors.whiteColor : appColors.blackColor,
                    marginTop: windowHeight(5),
                  },
                ]}
              >
                {item.referred?.name}
              </Text>
              <View
                style={[styles.pendingView, { marginTop: windowHeight(5) }]}
              >
                <Text style={styles.pendingText}>{item.status}</Text>
              </View>
            </View>
            <Text style={styles.email}>{item.referred?.email}</Text>
          </View>
        </View>
      </View>
    );
  };

  const { self } = useSelector((state: any) => state.account);
  const Workdata = [
    { data: `${translateData.referral1}` },
    {
      data: `${translateData.referralEarn} ${taxidoSettingData?.cabbooking_values?.referral?.referrer_bonus_percentage}% ${translateData.referral2}`,
    },
    { data: `${translateData.referral3}` },
  ];

  const handleShareReferral = async () => {
    try {
      const referralCode = self?.referral_code;
      const message = `${translateData.referralShare1} *${referralCode}* ${translateData.referralShare2}\n\n ${translateData.referralShare3}\n👉 https://play.google.com/store/apps/details?id=com.taxidouserui&hl=en_IN`;

      await Share.share({
        message,
        title: "Invite to Gocab",
      });
    } catch (error) {
      console.error("❌ Error sharing referral:", error);
    }
  };
  return (
    <View style={{ flex: 1 }}>
      <View
        style={{
          backgroundColor: isDark ? appColors.solidBorder : appColors.lightGray,
          flex: 1,
        }}
      >
        <HeaderContainer value={translateData?.referralCode} />

        <ScrollView
          contentContainerStyle={{
            paddingBottom: windowHeight(20),
            paddingTop: windowHeight(10),
          }}
        >
          <View
            style={[
              styles.box1,
              {
                backgroundColor: isDark
                  ? appColors.primaryText
                  : appColors.blackColor,
                flexDirection: viewRTLStyle,
              },
            ]}
          >
            <View style={styles.position}>
              <Text
                style={[
                  styles.des,
                  {
                    color: isDark ? appColors.whiteColor : appColors.whiteColor,
                  },
                ]}
              >
                {translateData?.invitefrd}
              </Text>
              <Text style={styles.des1}>
                {translateData?.earn}{" "}
                {
                  taxidoSettingData?.cabbooking_values?.referral
                    ?.minimum_ride_amount
                }{" "}
                {translateData?.referralDetails}
              </Text>
              <TouchableOpacity
                style={[
                  styles.button,
                  {
                    flexDirection: viewRTLStyle,
                    backgroundColor: appColors.primary,
                  },
                ]}
                onPress={() => {
                  Clipboard.setString(self?.referral_code || "");
                }}
              >
                <Copy color={appColors.blackColor} />
                <Text
                  style={[
                    styles.buttonText,
                    {
                      color: isDark
                        ? appColors.blackColor
                        : appColors.blackColor,
                    },
                  ]}
                >
                  {self?.referral_code}
                </Text>
              </TouchableOpacity>
            </View>
            <Image style={styles.image} source={Images.referral} />
          </View>

          <View
            style={[
              styles.box,
              {
                borderColor: isDark ? appColors.darkBorder : appColors.border,
              },
              {
                backgroundColor: isDark
                  ? appColors.primaryText
                  : appColors.whiteColor,
              },
            ]}
          >
            <View style={{ marginHorizontal: windowWidth(15) }}>
              <Text
                style={[
                  styles.que,
                  {
                    color: isDark ? appColors.whiteColor : appColors.blackColor,
                  },
                ]}
              >
                {translateData?.work}
              </Text>

              <View style={{ marginTop: 10 }}>
                {Workdata.map((item, id) => (
                  <View
                    key={id}
                    style={{
                      flexDirection: "row",
                      alignItems: "center",
                      marginVertical: windowHeight(4),
                    }}
                  >
                    <Text
                      style={{
                        fontFamily: appFonts.semiBold,
                        fontSize: fontSizes.FONT17,
                        color: isDark ? appColors.gray : appColors.gray,
                        marginRight: isRTL ? 0 : 8,
                        marginLeft: isRTL ? 8 : 0,
                      }}
                    >
                      {id + 1}.
                    </Text>
                    <Text
                      style={{
                        fontFamily: appFonts.semiBold,
                        fontSize: fontSizes.FONT17,
                        color: isDark ? appColors.gray : appColors.gray,
                      }}
                    >
                      {item.data}
                    </Text>
                  </View>
                ))}
              </View>
            </View>
            <View
              style={[
                styles.line,
                {
                  backgroundColor: isDark
                    ? appColors.solidBorder
                    : appColors.lightGray,
                },
              ]}
            />
            <Text style={styles.note}>
              <Text
                style={{
                  fontFamily: appFonts.bold,
                  fontSize: fontSizes.FONT19,
                }}
              >
                {translateData.noteTitle}:{" "}
              </Text>
              {translateData.referralNoteData}
            </Text>
          </View>

          <View
            style={[
              styles.position,
              {
                flexDirection: viewRTLStyle,
                justifyContent: "space-between",
                alignItems: "center",
                marginBottom: 0,
              },
            ]}
          >
            <Text
              style={[
                styles.que,
                {
                  fontFamily: appFonts.semiBold,
                  color: isDark ? appColors.whiteColor : appColors.blackColor,
                },
              ]}
            >
              {translateData?.seereffral}
            </Text>
            {referralData1?.length > 3 && (
              <TouchableOpacity style={styles.viewButton} onPress={gotoList}>
                <Text style={styles.text}>{translateData?.viewall}</Text>
              </TouchableOpacity>
            )}
          </View>

          <View
            style={[
              styles.box,
              {
                borderColor: isDark ? appColors.darkBorder : appColors.border,
              },
              {
                backgroundColor: isDark
                  ? appColors.primaryText
                  : appColors.whiteColor,
              },
              { marginVertical: windowHeight(15), marginBottom: 0 },
            ]}
          >
            <FlatList
              data={referralData1.slice(0, 3)}
              keyExtractor={(item) => item.id}
              renderItem={renderItem}
              showsVerticalScrollIndicator={false}
              contentContainerStyle={{ paddingBottom: windowHeight(0) }}
              ListEmptyComponent={
                <View
                  style={{
                    alignItems: "center",
                    flex: 1,
                    justifyContent: "center",
                    marginTop: "40%",
                    marginBottom: "20%",
                  }}
                >
                  <Image
                    source={isDark ? Images.noVehicleDark : Images.noVehicle}
                    style={{
                      height: windowHeight(250),
                      width: windowWidth(400),
                      resizeMode: "contain",
                      marginTop: windowHeight(-50),
                    }}
                  />
                  <Text
                    style={{
                      fontFamily: appFonts.bold,
                      fontSize: fontSizes.FONT22,
                      color: isDark
                        ? appColors.whiteColor
                        : appColors.primaryText,
                    }}
                  >
                    {translateData.noReferralList}
                  </Text>
                  <Text
                    style={{
                      fontFamily: appFonts.regular,
                      color: isDark
                        ? appColors.darkText
                        : appColors.regularText,
                      textAlign: "center",
                      marginTop: windowHeight(5),
                    }}
                  >
                    {translateData.noReferralDetail}
                  </Text>
                </View>
              }
              ItemSeparatorComponent={() => (
                <View
                  style={[
                    styles.line,
                    {
                      backgroundColor: isDark
                        ? appColors.solidBorder
                        : appColors.lightGray,
                    },
                  ]}
                />
              )}
            />
          </View>
        </ScrollView>
        <View
          style={{
            marginBottom: windowHeight(15),
            width: "92%",
            alignSelf: "center",
          }}
        >
          <Button title={translateData?.share} onPress={handleShareReferral} />
        </View>
      </View>
    </View>
  );
}
