import React from "react";
import {
  View,
  Text,
  TextInput,
  Image,
  TouchableOpacity,
  StyleSheet,
  KeyboardAvoidingView,
  Platform,
  Switch,
  ActivityIndicator,
} from "react-native";
import { useState, useEffect } from "react";
import DropDownPicker from "react-native-dropdown-picker";
import { countries } from "../../constants/countries";
import BackIcon from "../../components/BackIcon";
import { useNavigation, useRoute, RouteProp } from "@react-navigation/native";
import { AddressItem } from "../../services/api/addressApi";
import { NativeStackNavigationProp } from "@react-navigation/native-stack";
import { useAddressStore } from "../../store/address";

type RootStackParamList = {
  AddRess: { address?: AddressItem };
  AddressList: undefined;
};
type AddRessRouteProp = RouteProp<RootStackParamList, "AddRess">;

export const EditAddress = () => {
  const { setLoading, updateAddress, loading } = useAddressStore();
  const navigation =
    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
  const route = useRoute<AddRessRouteProp>();
  const [open, setOpen] = useState(false);
  const [value, setValue] = useState<string | null>(
    route.params?.address?.country || null
  );
  const [items, setItems] = useState(
    countries.map((country) => ({
      label: `${country.flag} ${country.name} (${country.phoneCode})`,
      value: country.name,
    }))
  );

  const [formData, setFormData] = useState({
    receiver_first_name: "",
    receiver_last_name: "",
    country: "",
    receiver_phone: "",
    receiver_phone_again: "",
    whatsapp_phone: "",
    is_default: 0,
    province: "",
    city: "",
    district: "",
    detail_address: "",
  });
  const [selectedCountry, setSelectedCountry] = useState<any>(null);
  const [copyPhoneToWhatsApp, setCopyPhoneToWhatsApp] = useState(false);
  const [phoneNumbersMatch, setPhoneNumbersMatch] = useState(true);
  const [errors, setErrors] = useState<Record<string, string>>({});

  // 初始化加载
  useEffect(() => {
    // 如果有路由参数中的地址，优先使用它
    if (route.params?.address) {
      setFormData({
        ...route.params.address,
        receiver_phone_again: route.params.address.receiver_phone,
        is_default: route.params.address.is_default,
      });
    }
  }, []);

  // 监听手机号码变化，如果勾选了复制选项则自动更新 WhatsApp 号码
  useEffect(() => {
    if (copyPhoneToWhatsApp) {
      setFormData((prev) => ({
        ...prev,
        whatsapp_phone: prev.receiver_phone,
      }));
    }
  }, [formData.receiver_phone, copyPhoneToWhatsApp]);

  // 监听手机号码变化，验证两次输入是否一致
  useEffect(() => {
    if (formData.receiver_phone && formData.receiver_phone_again) {
      setPhoneNumbersMatch(
        formData.receiver_phone === formData.receiver_phone_again
      );
    } else {
      setPhoneNumbersMatch(true);
    }
  }, [formData.receiver_phone, formData.receiver_phone_again]);

  const validateForm = () => {
    const newErrors: Record<string, string> = {};

    if (!formData.receiver_first_name) {
      newErrors.receiver_first_name = "请输入名";
    }
    if (!formData.receiver_last_name) {
      newErrors.receiver_last_name = "请输入姓";
    }

    if (!formData.receiver_phone) {
      newErrors.receiver_phone = "请输入手机号码";
    }
    if (!formData.receiver_phone_again) {
      newErrors.receiver_phone_again = "请再次输入手机号码";
    }
    if (formData.receiver_phone !== formData.receiver_phone_again) {
      newErrors.receiver_phone_again = "两次输入的手机号码不一致";
    }
    if (!formData.whatsapp_phone) {
      newErrors.whatsapp_phone = "请输入WhatsApp号码";
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = async () => {
    if (validateForm()) {
      const submitData = {
        ...formData,
        country: value || "",
        receiver_phone_again: undefined,
        is_default: formData.is_default ? 1 : 0,
      };

      delete submitData.receiver_phone_again;
      setLoading(true);

      if (route.params?.address?.address_id) {
        await updateAddress(route.params.address.address_id, submitData);
      }
      setLoading(false);
      navigation.goBack();
    }
  };

  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === "ios" ? "padding" : "height"}
      style={styles.container}
    >
      {loading ? (
        <View style={styles.loadingContainer}>
          <ActivityIndicator size="large" color="#f77f3a" />
        </View>
      ) : (
        <View style={styles.recipientFormContainer3}>
          <View>
            <View style={styles.recipientFormContainer1}>
              <View style={styles.recipientFormContainer2}>
                <View style={styles.titleContainer}>
                  <View style={styles.backIconContainer}>
                    <TouchableOpacity onPress={() => navigation.goBack()}>
                      <BackIcon size={20} />
                    </TouchableOpacity>
                  </View>

                  <Text style={styles.titleHeading}>选择收件人</Text>
                </View>
                <View style={styles.recipientInfoForm}>
                  <View style={styles.contactFormContainer}>
                    {/* First Name Field */}
                    <View style={styles.formFieldContainer}>
                      <View style={styles.flexRowCentered}>
                        <Text style={styles.elegantTextSnippet}>名</Text>
                        <Text style={styles.redTextHeading}>*</Text>
                      </View>
                      <TextInput
                        style={styles.pingFangText}
                        placeholder="请输入名"
                        value={formData.receiver_first_name}
                        onChangeText={(text) =>
                          setFormData({
                            ...formData,
                            receiver_first_name: text,
                          })
                        }
                      />
                      {errors.receiver_first_name && (
                        <Text style={styles.errorText}>
                          {errors.receiver_first_name}
                        </Text>
                      )}
                    </View>

                    {/* Last Name Field */}
                    <View style={styles.lastNameInputContainer}>
                      <View style={styles.flexRowCentered}>
                        <Text style={styles.elegantTextSnippet}>姓</Text>
                        <Text style={styles.redAsteriskTextStyle}>*</Text>
                      </View>
                      <TextInput
                        style={styles.pingFangText}
                        placeholder="请输入姓"
                        value={formData.receiver_last_name}
                        onChangeText={(text) =>
                          setFormData({ ...formData, receiver_last_name: text })
                        }
                      />
                      {errors.receiver_last_name && (
                        <Text style={styles.errorText}>
                          {errors.receiver_last_name}
                        </Text>
                      )}
                    </View>
                    {/* 国家 */}
                    <View style={styles.lastNameInputContainer}>
                      <View style={styles.flexRowCentered}>
                        <Text style={styles.elegantTextSnippet}>国家</Text>
                      </View>
                      <DropDownPicker
                        open={open}
                        value={value}
                        items={items}
                        setOpen={setOpen}
                        setValue={setValue}
                        setItems={setItems}
                        placeholder="请选择国家"
                        style={styles.dropdown}
                        dropDownContainerStyle={styles.dropdownContainer}
                        textStyle={styles.dropdownText}
                        labelStyle={styles.dropdownLabel}
                        maxHeight={300}
                        showArrowIcon={true}
                        arrowIconStyle={styles.arrowIcon}
                        placeholderStyle={styles.placeholderStyle}
                      />
                    </View>

                    {/* Phone Number Section */}
                    <View style={styles.formContainer}>
                      <View style={styles.verticalCenteredColumn}>
                        <View style={styles.lastNameInputContainer1}>
                          <View style={styles.flexRowCentered}>
                            <Text style={styles.elegantTextSnippet}>
                              手机号码
                            </Text>
                            <Text style={styles.redAsteriskTextStyle}>*</Text>
                          </View>
                          <TextInput
                            style={styles.pingFangText1}
                            placeholder="请输入手机号码"
                            value={formData.receiver_phone}
                            onChangeText={(text) =>
                              setFormData({
                                ...formData,
                                receiver_phone: text,
                              })
                            }
                          />
                          {errors.receiver_phone && (
                            <Text style={styles.errorText}>
                              {errors.receiver_phone}
                            </Text>
                          )}
                        </View>
                        <View style={styles.lastNameInputContainer1}>
                          <View style={styles.flexRowCentered}>
                            <Text style={styles.elegantTextSnippet}>
                              再次输入手机号码
                            </Text>
                            <Text style={styles.redAsteriskTextStyle}>*</Text>
                          </View>
                          <TextInput
                            style={styles.pingFangText1}
                            placeholder="请再次输入手机号码"
                            value={formData.receiver_phone_again}
                            onChangeText={(text) =>
                              setFormData({
                                ...formData,
                                receiver_phone_again: text,
                              })
                            }
                          />
                          {errors.receiver_phone_again && (
                            <Text style={styles.errorText}>
                              {errors.receiver_phone_again}
                            </Text>
                          )}
                        </View>
                        {!phoneNumbersMatch && (
                          <Text style={styles.errorText}>
                            两次输入的手机号码不一致
                          </Text>
                        )}
                      </View>
                    </View>

                    {/* WhatsApp Field */}
                    <View style={styles.lastNameInputContainer}>
                      <View style={styles.flexRowCentered}>
                        <Text style={styles.elegantTextSnippet}>WhatsApp</Text>
                        <Text style={styles.redTextHeading}>*</Text>
                      </View>
                      <TextInput
                        style={styles.pingFangText}
                        placeholder="请输入WhatsApp号码"
                        value={formData.whatsapp_phone}
                        onChangeText={(text) =>
                          setFormData({ ...formData, whatsapp_phone: text })
                        }
                      />
                      {errors.whatsapp_phone && (
                        <Text style={styles.errorText}>
                          {errors.whatsapp_phone}
                        </Text>
                      )}
                    </View>
                    <View style={styles.copyContainer}>
                      <TouchableOpacity
                        style={styles.checkboxContainer}
                        onPress={() =>
                          setCopyPhoneToWhatsApp(!copyPhoneToWhatsApp)
                        }
                      >
                        <View
                          style={[
                            styles.checkbox,
                            copyPhoneToWhatsApp && styles.checked,
                          ]}
                        >
                          {copyPhoneToWhatsApp && (
                            <Text style={styles.checkmark}>✓</Text>
                          )}
                        </View>
                        <Text style={styles.checkboxLabel}>
                          复制手机号码到WhatsApp号码
                        </Text>
                      </TouchableOpacity>
                    </View>

                    {/* Default Setting Section */}
                    <View style={styles.defaultSettingSection}>
                      <Text style={styles.defaultTextDisplayStyle}>
                        设为默认
                      </Text>
                      <Switch
                        value={!!formData.is_default}
                        onValueChange={() =>
                          setFormData({
                            ...formData,
                            is_default: formData.is_default ? 0 : 1,
                          })
                        }
                        trackColor={{ false: "#767577", true: "#81b0ff" }}
                        thumbColor={formData.is_default ? "#002fa7" : "#f4f3f4"}
                        ios_backgroundColor="#3e3e3e"
                      />
                    </View>
                  </View>
                </View>

                {/* Submit Button */}
                <View style={styles.submitButtonContainer}>
                  <TouchableOpacity
                    style={styles.primaryButtonStyle}
                    onPress={handleSubmit}
                  >
                    <Text style={styles.buttonText}>提交</Text>
                  </TouchableOpacity>
                </View>
              </View>
            </View>
          </View>
        </View>
      )}
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white",
  },
  scrollContainer: {
    width: "100%",
  },
  recipientFormContainer3: {
    flex: 1,
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "flex-start",
  },
  loadingContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  recipientFormContainer1: {
    width: "100%",
    padding: 15,
    paddingBottom: 32,
  },

  recipientFormContainer2: {
    width: "100%",
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "flex-start",
  },
  titleContainer: {
    width: "100%",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    position: "relative",
  },
  backIconContainer: {
    position: "absolute",
    left: 0,
  },
  titleHeading: {
    fontWeight: "600",
    fontSize: 20,
    lineHeight: 22,
    fontFamily: "PingFang SC",
    color: "black",
  },
  recipientInfoForm: {
    marginTop: 35,
  },
  recipientInfoHeadingContainer: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
  },
  recipientInfoHeading: {
    padding: 0,
    margin: 0,
    fontWeight: "500",
    fontSize: 18,
    lineHeight: 22,
    fontFamily: "PingFang SC",
    color: "black",
  },
  recipientInfoHeadingEmit: {
    padding: 0,
    margin: 0,
    fontWeight: "500",
    fontSize: 18,
    lineHeight: 22,
    fontFamily: "PingFang SC",
    color: "#ff731e",
    textDecorationLine: "underline",
  },
  contactFormContainer: {
    width: "100%",
    marginTop: 9,
  },
  formFieldContainer: {
    width: "100%",
    padding: 6,
    paddingLeft: 8,
    paddingBottom: 10,
    backgroundColor: "white",
    borderWidth: 1,
    borderColor: "#dbdce0",
    borderRadius: 5,
  },
  flexRowCentered: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-start",
  },
  elegantTextSnippet: {
    padding: 0,
    margin: 0,
    fontWeight: "500",
    fontSize: 12,
    fontFamily: "PingFang SC",
    color: "#646472",
  },
  redTextHeading: {
    padding: 0,
    margin: 0,
    marginLeft: 1,
    fontWeight: "500",
    fontSize: 18,
    lineHeight: 22,
    fontFamily: "PingFang SC",
    color: "#fe1e00",
  },
  pingFangText: {
    padding: 0,
    margin: 0,
    marginTop: -2,
    fontWeight: "400",
    fontSize: 16,
    lineHeight: 22,
    fontFamily: "PingFang SC",
    color: "#807e7e",
  },
  pingFangText1: {
    padding: 0,
    margin: 0,
    marginTop: -2,
    fontWeight: "400",
    fontSize: 16,
    lineHeight: 22,
    fontFamily: "PingFang SC",
    color: "#807e7e",
  },
  copyContainer: {
    marginTop: 10,
    flexDirection: "row",
    alignItems: "center",
  },
  checkboxContainer: {
    flexDirection: "row",
    alignItems: "center",
  },
  checkbox: {
    width: 15,
    height: 15,
    borderWidth: 1,
    borderColor: "#dbdce0",
    borderRadius: 4,
    marginRight: 8,
    justifyContent: "center",
    alignItems: "center",
  },
  checked: {
    backgroundColor: "#002fa7",
    borderColor: "#002fa7",
  },
  checkmark: {
    color: "white",
    fontSize: 12,
  },
  checkboxLabel: {
    fontSize: 14,
    color: "#646472",
    fontFamily: "PingFang SC",
  },
  lastNameInputContainer: {
    width: "100%",
    padding: 6,
    paddingLeft: 8,
    paddingBottom: 10,
    marginTop: 12,
    backgroundColor: "white",
    borderWidth: 1,
    borderColor: "#dbdce0",
    borderRadius: 5,
  },
  lastNameInputContainer1: {
    width: "100%",
    padding: 6,
    paddingLeft: 8,
    paddingBottom: 10,
    backgroundColor: "white",
    borderTopWidth: 1,
    borderColor: "#dbdce0",
  },

  redAsteriskTextStyle: {
    padding: 0,
    margin: 0,
    marginLeft: 1,
    fontWeight: "500",
    fontSize: 18,
    lineHeight: 22,
    fontFamily: "PingFang SC",
    color: "#fe1e00",
  },
  formContainer: {
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "center",
    width: "100%",
    marginTop: 12,
    backgroundColor: "white",
    borderWidth: 1,
    borderColor: "#dbdce0",
  },
  optionListDropdown: {},
  verticalCenteredColumn: {
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "center",
    marginTop: -1,
  },
  phoneNumberContainer: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-start",
    height: 60,
    paddingRight: 8,
    paddingLeft: 8,
    backgroundColor: "white",
    borderWidth: 1,
    borderColor: "#dbdce0",
  },
  mobilePhoneNumberLabel: {
    padding: 0,
    margin: 0,
    fontWeight: "500",
    fontSize: 14,
    fontFamily: "PingFang SC",
    color: "#807e7e",
  },
  mobilePhoneNumberLabel1: {
    padding: 0,
    margin: 0,
    fontWeight: "500",
    fontSize: 14,
    fontFamily: "PingFang SC",
    color: "#807e7e",
  },
  phoneNumberPromptContainer: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-start",
    height: 60,
    paddingRight: 8,
    paddingLeft: 8,
    marginTop: -1,
    backgroundColor: "white",
    borderWidth: 1,
    borderColor: "#dbdce0",
    borderBottomLeftRadius: 5,
    borderBottomRightRadius: 5,
  },
  defaultSettingSection: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    width: "100%",
    marginTop: 15.5,
    gap: 8,
  },
  defaultTextDisplayStyle: {
    padding: 0,
    margin: 0,
    fontWeight: "500",
    fontSize: 16,
    lineHeight: 22,
    fontFamily: "PingFang SC",
    color: "black",
  },
  submitButtonContainer: {
    paddingRight: 11,
    paddingLeft: 11,
    marginTop: 60,
  },
  primaryButtonStyle: {
    width: "100%",
    height: 50,
    justifyContent: "center",
    alignItems: "center",
    fontWeight: "600",
    fontSize: 16,
    lineHeight: 22,
    fontFamily: "PingFang SC",
    color: "white",
    backgroundColor: "#002fa7",
    borderWidth: 0,
    borderRadius: 25,
  },
  buttonText: {
    color: "white",
    fontWeight: "600",
    fontSize: 16,
    lineHeight: 22,
    fontFamily: "PingFang SC",
  },
  dropdown: {
    borderColor: "#dbdce0",
    borderWidth: 1,
    borderRadius: 5,
    marginTop: 8,
    backgroundColor: "white",
    minHeight: 40,
    paddingHorizontal: 10,
  },
  dropdownContainer: {
    borderColor: "#dbdce0",
    borderWidth: 1,
    borderRadius: 5,
    backgroundColor: "white",
    marginTop: 2,
  },
  dropdownText: {
    fontSize: 16,
    color: "#333",
  },
  dropdownLabel: {
    fontSize: 16,
    color: "#333",
  },
  arrowIcon: {
    width: 20,
    height: 20,
  },
  placeholderStyle: {
    color: "#999",
  },
  searchContainer: {
    borderBottomWidth: 1,
    borderBottomColor: "#dbdce0",
    padding: 10,
  },
  searchInput: {
    borderWidth: 1,
    borderColor: "#dbdce0",
    borderRadius: 5,
    padding: 8,
    fontSize: 16,
  },
  phoneNumberError: {
    borderColor: "#fe1e00",
  },
  errorText: {
    color: "#fe1e00",
    fontSize: 12,
    marginTop: 4,
    fontFamily: "PingFang SC",
  },
});
