import React, { useState, useEffect, useCallback } from "react";
import {
  View,
  Text,
  Image,
  StyleSheet,
  ImageBackground,
  TouchableOpacity,
  ScrollView,
} from "react-native";
import SettingsIcon from "../components/SettingsIcon";
import fontSize from "../utils/fontsizeUtils";
import { useNavigation } from "@react-navigation/native";
import { NativeStackNavigationProp } from "@react-navigation/native-stack";
import BookmarkIcon from "../components/BookmarkIcon";
import LeftArrowIcon from "../components/DownArrowIcon";
import { flagMap } from "../utils/flagMap";
import DocumentApprovedIcon from "../components/DocumentApprovedIcon";
import PdfDocumentIcon from "../components/PdfDocumentIcon";
import DocumentClockIcon from "../components/DocumentClockIcon";
import widthUtils from "../utils/widthUtils";
import { productStatus } from "../constants/productStatus";
import useUserStore from "../store/user";

type RootStackParamList = {
  SettingList: undefined;
  Home: undefined;
  MyAccount: undefined;
  Login: undefined;
  Status: { status: number | null };
  BrowseHistoryScreen: undefined;
  AddressList: undefined;
  Collection: undefined;
  Balance: undefined;
  MemberIntroduction: undefined;
};

export const ProfileScreen = () => {
  const handleLogin = async () => {
    navigation.navigate("Login");
  };
  const { user } = useUserStore();

  const navigation =
    useNavigation<NativeStackNavigationProp<RootStackParamList>>();

  return (
    <View style={styles.flexColumnContainer1}>
      {user.user_id ? (
        <ImageBackground
          source={require("../../assets/img/image_b64646d0.png")}
          style={styles.timecardWidget}
          resizeMode="stretch"
        >
          <View style={styles.flexRowWithContent}>
            <Image
              source={flagMap.get(user?.country_en)}
              style={styles.imageContainerWithText}
            />
            <View style={styles.financialInfoContainer}>
              <Text style={styles.whiteTextHeading}>{user?.currency}</Text>
              <TouchableOpacity
                onPress={() => navigation.navigate("SettingList")}
              >
                <View style={styles.svgContainer1}>
                  <SettingsIcon size={fontSize(24)} color="white" />
                </View>
              </TouchableOpacity>
            </View>
          </View>

          <View style={styles.flexColumnContainer}>
            <View style={styles.flexContainerWithImageAndText}>
              <View style={styles.flexRowWithContent1}>
                <Image
                  source={require("../../assets/img/image_94051480.jpeg")}
                  style={styles.profileImageCircle}
                />
                <View style={styles.customerInfoPanel}>
                  <View>
                    <Text style={styles.uniqueHeaderTextStyle}>
                      {user?.username}
                    </Text>
                    <Text style={styles.elegantText}>ID: {user?.user_id}</Text>
                  </View>
                  <TouchableOpacity
                    style={styles.transactionSummaryBox}
                    onPress={() => navigation.navigate("Balance")}
                  >
                    <View style={styles.svgContainer}>
                      <BookmarkIcon size={fontSize(24)} />
                    </View>
                    <Text style={styles.soldeTextDisplayStyle}>余额</Text>
                  </TouchableOpacity>
                </View>
              </View>
            </View>

            <View style={styles.gradientCardContainer}>
              <ImageBackground
                source={require("../../assets/img/image_7dbf30dc.png")}
                style={styles.promoCardContainer2}
                resizeMode="stretch"
              >
                <View style={styles.promoCardContainerVip}>
                  <View style={styles.VipCard}>
                    <View style={styles.Vip}>
                      <Text style={styles.goldenItalicHeading}>VIP2</Text>
                      <Image
                        source={require("../../assets/img/折扣VIP1 (1).png")}
                        style={styles.VipImg}
                      />
                    </View>
                    <View style={styles.progressBar}>
                      <View style={styles.progressBarFill}>
                        <Text style={styles.progressBarText}>40000/50000</Text>
                      </View>
                      <View style={styles.progressBarLine}></View>
                    </View>
                  </View>
                  <View style={styles.vipExplanation}>
                    <View style={styles.vipExplanationText}>
                      <Text style={styles.vipExplanationText1}>
                        再消费10,000西非法郎即可成为[会员]，享受[XX]折扣
                      </Text>
                    </View>
                    <TouchableOpacity
                      style={styles.vipExplanationButton}
                      onPress={() => navigation.navigate("MemberIntroduction")}
                    >
                      <Text style={styles.vipExplanationButtonText}>
                        了解更多
                      </Text>
                    </TouchableOpacity>
                  </View>
                </View>
              </ImageBackground>
            </View>
          </View>
        </ImageBackground>
      ) : (
        <ImageBackground
          source={require("../../assets/img/image_b64646d0.png")}
          style={styles.timecardWidget}
          resizeMode="stretch"
        >
          <View style={styles.notLoggedInContainer}>
            <View style={styles.profileImageCircle}>
              <Image
                source={require("../../assets/img/brainnel-0000.jpg")}
                style={styles.profileImage}
              />
            </View>
            <TouchableOpacity style={styles.loginButton} onPress={handleLogin}>
              <Text style={styles.loginButtonText}>立即登录</Text>
            </TouchableOpacity>
          </View>
        </ImageBackground>
      )}

      <View style={styles.verticalCenterImageGallery}>
        <TouchableOpacity onPress={handleLogin}>
          <Text>登录</Text>
        </TouchableOpacity>
      </View>

      <ScrollView
        showsVerticalScrollIndicator={false}
        style={{ flex: 1 }}
        bounces={false}
        overScrollMode="never"
      >
        <View style={styles.groupContainer}>
          <View style={styles.groupItemList}>
            <View style={styles.groupItemTitle}>
              <Text style={styles.groupItemTitleText}>订单标题</Text>
              <TouchableOpacity
                style={styles.groupItemTitleTextTout}
                onPress={() => navigation.navigate("Status", { status: null })}
              >
                <Text style={styles.groupItemTitleTextTout1}>全部</Text>
                <LeftArrowIcon size={fontSize(14)} color="#8f8684" />
              </TouchableOpacity>
            </View>

            <View style={styles.groupItem}>
              {productStatus.map((item, index) => (
                <TouchableOpacity
                  key={index}
                  style={styles.groupItemContent}
                  onPress={() =>
                    item.status !== null
                      ? navigation.navigate("Status", { status: item.status })
                      : null
                  }
                >
                  <View style={styles.groupItemContentIcon}>
                    <item.icon size={fontSize(38)} color="#707070" />
                  </View>
                  <Text style={styles.groupItemContentText}>{item.text}</Text>
                </TouchableOpacity>
              ))}
            </View>
          </View>
        </View>

        <View style={styles.groupContainer}>
          <View style={styles.groupItemList}>
            <View style={styles.groupItemTitle}>
              <Text style={styles.groupItemTitleText}>工具标题</Text>
            </View>

            <View style={styles.groupItem}>
              <View style={styles.groupItemContent}>
                <TouchableOpacity
                  style={styles.groupItemContentIcon}
                  onPress={() => navigation.navigate("BrowseHistoryScreen")}
                >
                  <DocumentApprovedIcon size={fontSize(38)} color="#707070" />
                </TouchableOpacity>
                <Text style={styles.groupItemContentText}>游览历史</Text>
              </View>

              <View style={styles.groupItemContent}>
                <TouchableOpacity
                  style={styles.groupItemContentIcon}
                  onPress={() => navigation.navigate("Collection")}
                >
                  <PdfDocumentIcon size={fontSize(38)} color="#707070" />
                </TouchableOpacity>
                <Text style={styles.groupItemContentText}>收藏</Text>
              </View>

              <TouchableOpacity
                style={styles.groupItemContent}
                onPress={() => navigation.navigate("AddressList")}
              >
                <View style={styles.groupItemContentIcon}>
                  <DocumentClockIcon size={fontSize(38)} color="#707070" />
                </View>
                <Text style={styles.groupItemContentText}>收件人管理</Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  flexColumnContainer1: {
    flex: 1,
  },
  timecardWidget: {
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "flex-start",
    width: "100%",
    height: widthUtils(272, 272).height,
    overflow: "hidden",
  },

  timeContainer1: {
    display: "flex",
    flexDirection: "column",
    alignItems: "flex-start",
    justifyContent: "flex-start",
    height: widthUtils(43, 43).height,
    paddingTop: 21,
  },
  timeContainer2: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    alignSelf: "stretch",
    justifyContent: "space-between",
  },
  timeContainer: {
    display: "flex",
    flex: 1,
    flexDirection: "row",
    gap: 10,
    alignItems: "center",
    justifyContent: "center",
    minWidth: 153,
    paddingRight: 6,
    paddingLeft: 16,
  },
  timeDisplayStyle: {
    padding: 0,
    margin: 0,
    fontSize: fontSize(17),
    fontWeight: "600",
    fontFamily:
      "SF Pro, -apple-system, system-ui, BlinkMacSystemFont, sans-serif",
    color: "white",
  },
  timeDisplayContainer: {
    width: widthUtils(10, 124).width,
    height: widthUtils(10, 124).height,
  },
  timeDisplayContainer1: {
    flex: 1,
    width: widthUtils(13, 153).width,
    height: widthUtils(13, 153).height,
  },
  flexColumnContainer: {
    display: "flex",
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "flex-start",
    paddingVertical: 12,
    paddingHorizontal: 20,
    paddingBottom: 3.5,
    flex: 1,
  },
  flexContainerWithImageAndText: {
    display: "flex",
    flexDirection: "row",
    gap: 8,
    alignItems: "flex-start",
    justifyContent: "space-between",
  },
  flexRowWithContent: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-end",
    paddingRight: 10,
    paddingTop: 10,
  },
  flexRowWithContent1: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-start",
  },
  profileImageCircle: {
    width: widthUtils(100, 100).width,
    height: widthUtils(100, 100).height,
    borderWidth: 0,
    backgroundColor: "#fff",
    borderRadius: 50,
    padding: 10,
  },
  profileImage: {
    width: "100%",
    height: "100%",
    resizeMode: "contain",
  },
  customerInfoPanel: {
    marginLeft: 20,
  },
  uniqueHeaderTextStyle: {
    padding: 0,
    margin: 0,
    fontSize: fontSize(20),
    fontWeight: "900",
    fontFamily: "Archivo Black, sans-serif",
    color: "white",
  },
  elegantText: {
    padding: 0,
    margin: 0,
    marginTop: 6.75,
    fontSize: fontSize(16),
    fontWeight: "900",
    fontFamily: "PingFang SC",
    lineHeight: 22,
    color: "white",
  },
  transactionSummaryBox: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-start",
    marginTop: 8,
  },
  svgContainer: {
    display: "flex",
    width: widthUtils(24, 24).width,
    height: widthUtils(24, 24).height,
    color: "#ffffff",
    marginRight: 8,
  },
  soldeTextDisplayStyle: {
    padding: 0,
    margin: 0,
    marginLeft: 3,
    fontSize: fontSize(16),
    fontWeight: "500",
    fontFamily: "PingFang SC",
    lineHeight: 22,
    color: "white",
  },
  imageContainerWithText: {
    width: widthUtils(16, 24).width,
    height: widthUtils(16, 24).height,
    borderWidth: 0,
    resizeMode: "cover",
  },
  financialInfoContainer: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-start",
    marginLeft: 3,
  },
  whiteTextHeading: {
    padding: 0,
    margin: 0,
    fontSize: fontSize(16),
    fontWeight: "500",
    fontFamily: "PingFang SC",
    lineHeight: 22,
    color: "white",
  },
  svgContainer1: {
    width: widthUtils(24, 24).width,
    height: widthUtils(24, 24).height,
    marginLeft: 11,
    color: "#ffffff",
  },
  gradientCardContainer: {
    position: "absolute",
    bottom: -10,
    left: 19,
    right: 19,
    backgroundColor: "#3A3128",
    borderRadius: 10,
  },
  promoCardContainer2: {
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "flex-start",
    height: widthUtils(130, 130).height,
    paddingRight: 9.5,
    paddingBottom: 15,
    paddingLeft: 9,
    width: "100%",
  },
  promoCardContainerVip: {
    width: "100%",
    paddingTop: 5,
    paddingBottom: 5,
    paddingLeft: 10,
    paddingRight: 10,
    height: "100%",
  },
  VipCard: {
    width: "100%",
    height: "50%",
    flexDirection: "row",
  },
  Vip: {
    width: "35%",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
  },
  progressBar: {
    width: "65%",
    marginLeft: 10,
    justifyContent: "center",
    alignItems: "center",
  },
  progressBarFill: {
    width: "100%",
    height: "50%",
  },
  progressBarText: {
    fontSize: fontSize(16),
    fontWeight: "900",
    fontFamily: "Segoe UI",
    color: "#fcca80",
  },
  progressBarLine: {
    width: "100%",
    height: 3,
    backgroundColor: "#d9d9d9",
  },
  vipExplanation: {
    width: "100%",
    height: "50%",
    flexDirection: "row",
    alignItems: "center",
  },
  vipExplanationText: {
    width: "70%",
    height: "100%",
  },
  vipExplanationText1: {
    fontSize: fontSize(14),
    padding: 5,
    color: "#fff",
  },
  vipExplanationButton: {
    width: "30%",
    height: "100%",
    backgroundColor: "#ffd89b",
    borderRadius: 60,
    alignItems: "center",
    justifyContent: "center",
  },
  vipExplanationButtonText: {
    fontSize: fontSize(14),
  },
  VipImg: {
    width: widthUtils(28, 28).width,
    height: widthUtils(28, 28).height,
    marginLeft: 10,
  },
  productInfoContainer: {
    flexDirection: "row",
    alignItems: "flex-start",
    justifyContent: "flex-start",
  },
  imageWithTextRatio: {
    width: widthUtils(23.5, 56).width,
    height: widthUtils(23.5, 56).height,
  },
  goldenItalicHeading: {
    fontSize: fontSize(34),
    fontWeight: "900",
    fontStyle: "italic",
    color: "#f8cb7a",
  },
  discountSectionContainer: {
    display: "flex",
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "flex-start",
    marginLeft: 4,
  },
  discountAmountContainer: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "flex-start",
  },
  discountPercentageTextStyle: {
    padding: 0,
    margin: 0,
    fontSize: fontSize(12),
    fontWeight: "900",
    fontStyle: "italic",
    fontFamily: "Segoe UI",
    color: "#4e2000",
  },
  negativeMarginTopDiscountPercentage: {
    marginTop: -22,
  },
  nestedContentContainer: {
    marginTop: -25,
  },
  negativeMarginTop2: {
    marginTop: -36,
  },
  imageContainer2: {
    width: widthUtils(36, 36).width,
    height: widthUtils(36, 36).height,
  },
  negativeMarginTop1: {
    marginTop: -36,
  },
  imgStyleF62: {
    width: "100%",
    height: widthUtils(36, 36).height,
  },
  discountStatusContainer: {
    paddingRight: 7,
    paddingLeft: 7,
    marginTop: -23,
  },
  discountStatusLabel: {
    padding: 0,
    margin: 0,
    fontSize: fontSize(10),
    fontWeight: "600",
    fontStyle: "italic",
    fontFamily: "Segoe UI",
    color: "#4e2000",
  },
  productSummaryBlock: {
    paddingTop: 4,
    paddingBottom: 6.5,
    marginLeft: 16,
  },
  goldenTextHeading: {
    padding: 0,
    margin: 0,
    fontSize: fontSize(13),
    fontWeight: "600",
    fontFamily: "PingFang SC",
    color: "#f8cb7a",
  },
  negativeMarginTop: {
    marginTop: -0.5,
  },
  horizontalLineWidget: {
    width: widthUtils(4, 235).width,
    height: widthUtils(4, 235).height,
  },
  promoCardContainer: {
    display: "flex",
    flexDirection: "row",
    alignItems: "stretch",
    justifyContent: "flex-start",
    height: widthUtils(34, 34).height,
    marginTop: 6,
  },
  promoCardContainer1: {
    display: "flex",
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "flex-end",
  },
  pingfangScTextWhite: {
    padding: 0,
    margin: 0,
    fontSize: fontSize(11),
    fontWeight: "400",
    fontFamily: "PingFang SC",
    lineHeight: 17,
    color: "white",
    textAlign: "left",
    letterSpacing: -0.1,
  },
  promoDetailsContainer: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-start",
    marginTop: -17,
  },
  goldenLabel: {
    width: "30%",
    padding: 0,
    margin: 0,
    fontSize: fontSize(12),
    fontWeight: "900",
    fontFamily: "MiSans",
    lineHeight: 15,
    color: "#f5c164",
  },
  goldenText: {
    width: "70%",
    padding: 0,
    paddingRight: 24,
    paddingLeft: 37,
    margin: 0,
    fontSize: fontSize(12),
    fontWeight: "900",
    fontFamily: "MiSans",
    lineHeight: 15,
    color: "#f5c164",
  },
  goldenGradientBox: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    paddingRight: 6,
    paddingLeft: 6,
    marginLeft: 11,
    backgroundColor: "#F5C164",
    borderRadius: 50,
  },
  featuredText: {
    padding: 0,
    margin: 0,
    fontSize: fontSize(11),
    fontWeight: "700",
    fontFamily: "Source Han Sans CN",
    color: "#473c30",
  },
  verticalCenterImageGallery: {
    display: "flex",
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "center",
    paddingTop: 21.5,
    paddingRight: 20,
    paddingLeft: 20,
    backgroundColor: "#f0f0f0",
  },
  cardContainer1: {
    display: "flex",
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "flex-start",
    paddingTop: 14,
    paddingRight: 9,
    paddingBottom: 14,
    paddingLeft: 10,
    backgroundColor: "white",
    borderRadius: 10,
  },
  imageContainer: {
    height: widthUtils(212, 212).height,
    borderWidth: 0,
    resizeMode: "cover",
  },
  cardContainer: {
    paddingTop: 15,
    paddingRight: 11,
    paddingBottom: 17,
    paddingLeft: 11,
    marginTop: 20,
    backgroundColor: "white",
    borderRadius: 10,
  },
  imageContainer1: {
    width: "100%",
    height: widthUtils(228, 228).height,
    borderWidth: 0,
    resizeMode: "cover",
  },
  groupContainer: {
    padding: 20,
  },
  groupItemList: {
    width: "100%",
    alignItems: "center",
    backgroundColor: "white",
    padding: 15,
  },
  groupItemTitle: {
    flexDirection: "row",
    width: "100%",
    justifyContent: "space-between",
    alignItems: "center",
  },
  groupItemTitleText: {
    fontSize: fontSize(18),
    fontWeight: "600",
    color: "#000",
  },
  groupItemTitleTextTout: {
    fontSize: fontSize(16),
    fontWeight: "400",
    color: "#8f8684",
    flexDirection: "row",
    alignItems: "center",
  },
  groupItemTitleTextTout1: {
    marginRight: 3,
    fontSize: fontSize(16),
    fontWeight: "400",
    color: "#8f8684",
    flexDirection: "row",
    alignItems: "center",
  },
  groupItem: {
    flexDirection: "row",
    flexWrap: "wrap",
    width: "100%",
    marginTop: 25,
  },
  groupItemContent: {
    width: "23%",
    borderRadius: 8,
    marginLeft: 5,
    alignItems: "center",
    justifyContent: "center",
    flexDirection: "column",
    marginBottom: 10,
  },
  groupItemContentText: {
    fontSize: fontSize(12),
    fontWeight: "400",
    color: "#8f8684",
    width: "100%",
    textAlign: "center",
  },
  groupItemContentIcon: {
    width: widthUtils(35, 40).width,
    height: widthUtils(35, 40).height,
  },
  notLoggedInContainer: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    paddingBottom: 40,
  },
  loginButton: {
    backgroundColor: "#ff701e",
    paddingHorizontal: 30,
    paddingVertical: 10,
    borderRadius: 20,
    marginTop: 20,
  },
  loginButtonText: {
    color: "#fff",
    fontSize: fontSize(16),
    fontWeight: "600",
  },
});
