import { Image, View } from "@tarojs/components";
import { Button, Input, SafeArea, Toast } from "@nutui/nutui-react-taro";
import { Icon } from "@/components";
import hocAuth from "@/hocs/auth";
import { CommonComponent } from "@/types/typings";
import { useEffect, useState } from "react";
import { business } from "@/services";
import Taro from "@tarojs/taro";
import { buildUrl, generateShortId, uploadFile } from "@/utils";

export default hocAuth(function Page(props: CommonComponent) {
  const { setLoading, router } = props;
  const supplierId = router.params
    .supplierId as BusinessAPI.SupplierVO["supplierId"];

  const [supplierVO, setSupplierVO] = useState<BusinessAPI.SupplierCreateCmd>({
    supplierId: generateShortId(),
    name: "",
    payeeName: "",
    phone: "",
    bankCard: "",
    bankName: "",
    status: true,
    type: "OTHER_STALL",
  });
  const [btnLoading, setBtnLoading] = useState(false);

  // 错误状态
  const [nameError, setNameError] = useState(false);
  const [payeeNameError, setPayeeNameError] = useState(false);
  const [phoneError, setPhoneError] = useState(false);
  const [bankNameError, setBankNameError] = useState(false);
  const [bankCardError, setBankCardError] = useState(false);
  const [nameDuplicateError, setNameDuplicateError] = useState(false); // 姓名重复错误

  // 初始化微信二维码图片列表
  useEffect(() => {
    if (supplierId) {
      setLoading(true);
      business.supplier
        .showSupplier({
          supplierShowQry: {
            supplierId: supplierId,
          },
        })
        .then(({ data: { data: supplierVO } }) => {
          if (supplierVO) {
            setSupplierVO({
              ...supplierVO,
            });
          }
        })
        .finally(() => {
          setLoading(false);
        });
    }
  }, [supplierId]);

  // 校验姓名函数
  const validateName = (name: string) => {
    if (!name) {
      return false;
    }
    // 姓名至少2个字符
    return name.length >= 2;
  };

  // 校验身份证号函数
  const validatePayeeName = (payeeName: string) => {
    if (!payeeName) {
      return false;
    }
    // 收款人姓名至少2个字符
    return payeeName.length >= 2;
  };

  // 校验银行卡号函数
  const validateBankCard = (bankCard: string) => {
    if (!bankCard) {
      return false;
    }
    // 银行卡号一般为16-19位数字
    const bankCardRegex = /^\d{16,19}$/;
    return bankCardRegex.test(bankCard);
  };

  // 校验银行名称函数
  const validateBankName = (bankName: string) => {
    if (!bankName) {
      return false;
    }
    // 银行名称至少2个字符
    return bankName.length >= 2;
  };

  // 校验手机号函数 (使用项目中已有的规则)
  const validatePhone = (phone: string) => {
    if (!phone) {
      return false;
    }
    // 使用项目规范的手机号正则表达式
    const phoneRegex = /^1[3456789]\d{9}$/;
    return phoneRegex.test(phone);
  };

  // 处理姓名变化
  const handleNameChange = (value: string) => {
    setSupplierVO({
      ...supplierVO,
      name: value,
    });

    // 校验并更新错误状态
    const isValid = validateName(value);
    setNameError(!isValid && value !== "");

    if (isValid) {
      setNameError(false);
    }

    // 清除姓名重复错误提示
    setNameDuplicateError(false);
  };

  // 处理姓名失焦
  const handleNameBlur = async (value: string) => {
    if (value && !validateName(value)) {
      setNameError(true);
      return;
    } else {
      setNameError(false);
    }

    // 检查档口姓名是否在系统中存在
    if (value) {
      setLoading(true);
      try {
        const { data } = await business.supplier.checkSupplier({
          supplierCheckQry: {
            name: value,
          },
        });

        if (data.success && data.data) {
          // 系统中已存在该档口信息，设置姓名重复错误状态
          setNameDuplicateError(true);
        } else {
          setNameDuplicateError(false);
        }
      } catch (error) {
        console.error("检查档口信息失败", error);
        setNameDuplicateError(false);
      } finally {
        setLoading(false);
      }
    }
  };

  // 处理收款人姓名变化
  const handlePayeeNameChange = (value: string) => {
    setSupplierVO({
      ...supplierVO,
      payeeName: value,
    });

    // 校验并更新错误状态
    const isValid = validatePayeeName(value);
    setPayeeNameError(!isValid && value !== "");

    if (isValid) {
      setPayeeNameError(false);
    }
  };

  // 处理收款人姓名失焦
  const handlePayeeNameBlur = (value: string) => {
    if (value && !validatePayeeName(value)) {
      setPayeeNameError(true);
    } else {
      setPayeeNameError(false);
    }
  };

  // 处理银行卡号变化
  const handleBankCardChange = (value: string) => {
    setSupplierVO({
      ...supplierVO,
      bankCard: value,
    });

    // 校验并更新错误状态
    const isValid = validateBankCard(value);
    setBankCardError(!isValid && value !== "");

    if (isValid) {
      setBankCardError(false);
    }
  };

  // 处理银行卡号失焦
  const handleBankCardBlur = (value: string) => {
    if (value && !validateBankCard(value)) {
      setBankCardError(true);
    } else {
      setBankCardError(false);
    }
  };

  // 处理银行名称变化
  const handleBankNameChange = (value: string) => {
    setSupplierVO({
      ...supplierVO,
      bankName: value,
    });

    // 校验并更新错误状态
    const isValid = validateBankName(value);
    setBankNameError(!isValid && value !== "");

    if (isValid) {
      setBankNameError(false);
    }
  };

  // 处理银行名称失焦
  const handleBankNameBlur = (value: string) => {
    if (value && !validateBankName(value)) {
      setBankNameError(true);
    } else {
      setBankNameError(false);
    }
  };

  // 处理手机号变化
  const handlePhoneChange = (value: string) => {
    setSupplierVO({
      ...supplierVO,
      phone: value,
    });

    // 校验并更新错误状态
    const isValid = validatePhone(value);
    setPhoneError(!isValid && value !== "");

    if (isValid) {
      setPhoneError(false);
    }
  };

  // 处理手机号失焦
  const handlePhoneBlur = (value: string) => {
    if (value && !validatePhone(value)) {
      setPhoneError(true);
    } else {
      setPhoneError(false);
    }
  };

  const handleSave = async () => {
    // 校验表单
    const isNameValid = validateName(supplierVO.name || "");
    const isPayeeNameValid = validatePayeeName(supplierVO.payeeName || "");
    const isBankNameValid = validateBankName(supplierVO.bankName || "");
    const isBankCardValid = validateBankCard(supplierVO.bankCard || "");
    const isPhoneValid = validatePhone(supplierVO.phone || "");

    setNameError(!isNameValid);
    setPayeeNameError(!isPayeeNameValid);
    setBankNameError(!isBankNameValid);
    setBankCardError(!isBankCardValid);
    setPhoneError(!isPhoneValid);

    // 检查是否已存在同名档口
    let isDuplicate = false;
    if (isNameValid) {
      try {
        setBtnLoading(true);
        const { data: checkData } = await business.supplier.checkSupplier({
          supplierCheckQry: {
            name: supplierVO.name,
          },
        });

        if (checkData.success && checkData.data) {
          isDuplicate = true;
          setNameDuplicateError(true);
        }
      } catch (error) {
        console.error("检查档口信息失败", error);
      } finally {
        setBtnLoading(false);
      }
    }

    const isValid =
      isNameValid &&
      isPayeeNameValid &&
      isBankNameValid &&
      isBankCardValid &&
      isPhoneValid &&
      !isDuplicate;

    if (!isValid) {
      if (isDuplicate) {
        Toast.show("toast", {
          icon: "fail",
          title: "提示",
          content: "该档口已存在，请勿重复创建",
        });
      } else {
        Toast.show("toast", {
          icon: "fail",
          title: "提示",
          content: "请完善档口信息后再进行保存操作",
        });
      }
      return;
    }

    // 创建新档口
    try {
      setBtnLoading(true);
      const { data } = await business.supplier.createSupplier({
        supplierId: supplierVO.supplierId,
        name: supplierVO.name,
        payeeName: supplierVO.payeeName,
        phone: supplierVO.phone,
        bankCard: supplierVO.bankCard,
        bankName: supplierVO.bankName,
        wechatQr: supplierVO.wechatQr,
        status: supplierVO.status,
        type: "OTHER_STALL",
      });

      if (data.success) {
        Toast.show("toast", {
          icon: "success",
          title: "成功",
          content: "档口创建成功",
        });
        setTimeout(() => {
          Taro.navigateBack();
        }, 1500);
      } else {
        Toast.show("toast", {
          icon: "fail",
          title: "失败",
          content: data.errMessage || "创建失败",
        });
      }
    } catch (error) {
      Toast.show("toast", {
        icon: "fail",
        title: "错误",
        content: "创建过程中发生错误",
      });
      console.error("创建档口失败:", error);
    } finally {
      setBtnLoading(false);
    }
  };
  const handleWechatQrUpload = async () => {
    await Taro.chooseImage({
      count: 1,
      sourceType: ["album", "camera"],
      success: (res) => {
        setLoading(true);
        const file = res.tempFiles[0];
        uploadFile(file.path)
          .then(({ url }) => {
            setSupplierVO({
              ...supplierVO,
              wechatQr: url,
            });
            setLoading(false);
            Toast.show("toast", {
              title: "上传成功",
              icon: "success",
              content: "微信收款码已上传",
            });
          })
          .catch((err) => {
            Toast.show("toast", {
              title: "上传失败",
              icon: "fail",
              content: err.message || "上传过程中发生错误",
            });
            setLoading(false);
          });
      },
      fail: (err) => {
        Toast.show("toast", {
          title: "选择图片失败",
          icon: "fail",
          content: err.errMsg,
        });
      },
    });
  };

  return (
    <>
      <View className="flex-1">
        <View
          className="flex flex-1 flex-col gap-2.5 p-2.5"
          style={{
            //@ts-ignore
            "--nutui-input-padding": 0,
          }}
        >
          {/* 功能提醒 */}
          <View className="flex items-center rounded-lg border border-blue-200 bg-blue-50 p-2.5">
            <Icon
              className={"mr-1"}
              name="circle-info"
              color={"var(--color-blue-700)"}
              size={18}
            />
            <View className={"text-sm text-blue-700"}>
              收集档口信息的目的是用于打款
            </View>
          </View>

          {/* 快捷工具 */}
          <View className="flex gap-2">
            <View className={"flex-1"}>
              <Button
                block
                icon={<Icon name={"credit-card"} size={28} color={"white"} />}
                type={"primary"}
                size={"large"}
                className="bg-primary flex flex-1 items-center justify-center text-white"
                onClick={() => {
                  Taro.navigateTo({
                    url: buildUrl("/pages/public/camera/ocr", {
                      type: "bankcard",
                    }),
                    complete: () => {
                      Taro.eventCenter.on("ocr", (res) => {
                        console.log("识别结果为：", res.result);
                        setSupplierVO({
                          ...supplierVO,
                          bankCard: res.result.number,
                        });

                        Taro.eventCenter.off("ocr");
                      });
                    },
                  });
                }}
              >
                <View>扫描银行卡</View>
              </Button>
            </View>
          </View>

          {/* 档口信息 */}
          <View className="border-primary rounded-lg border-4 bg-white p-2.5 shadow-sm">
            <View className="flex flex-col gap-2.5">
              <View className="flex items-center justify-between">
                <View className="text-primary text-base font-bold">
                  {supplierVO.name || "档口"}的基本信息
                </View>
              </View>
              <View className={"block text-sm font-normal text-[#000000]"}>
                档口名称
              </View>
              <View
                className={`flex h-10 w-full items-center rounded-md ${nameError || nameDuplicateError ? "border-4 border-red-500" : "border-4 border-gray-300"}`}
              >
                <Icon name="user" size={16} color="#999" className="mx-2" />
                <Input
                  clearable
                  type="text"
                  placeholder="请输入档口名称"
                  value={supplierVO.name}
                  onChange={(value) => handleNameChange(value)}
                  onBlur={() => handleNameBlur(supplierVO.name || "")}
                  className="flex-1"
                />
              </View>
              {nameError && (
                <View className="mt-1 text-xs text-red-500">
                  {`档口名称"${supplierVO.name}"至少2个字符`}
                </View>
              )}
              {nameDuplicateError && (
                <View className="mt-1 text-xs text-red-500">
                  该档口已存在，请勿重复创建
                </View>
              )}
              <View className={"block text-sm font-normal text-[#000000]"}>
                收款人姓名
              </View>
              <View
                className={`flex h-10 w-full items-center rounded-md ${payeeNameError ? "border-4 border-red-500" : "border-4 border-gray-300"}`}
              >
                <Icon name="user" size={16} color="#999" className="mx-2" />
                <Input
                  clearable
                  type="text"
                  placeholder="请输入收款人姓名"
                  value={supplierVO.payeeName}
                  onChange={(value) => handlePayeeNameChange(value)}
                  onBlur={() => handlePayeeNameBlur(supplierVO.payeeName || "")}
                  className="flex-1"
                />
              </View>
              {payeeNameError && (
                <View className="mt-1 text-xs text-red-500">
                  {`收款人姓名"${supplierVO.payeeName}"至少2个字符`}
                </View>
              )}
              <View className="block text-sm font-normal text-[#000000]">
                银行名称
              </View>
              <View
                className={`flex h-10 w-full items-center rounded-md ${bankNameError ? "border-4 border-red-500" : "border-4 border-gray-300"}`}
              >
                <Icon name="building" size={16} color="#999" className="mx-2" />
                <Input
                  clearable
                  type="text"
                  placeholder="请输入银行名称"
                  value={supplierVO.bankName}
                  onChange={(value) => handleBankNameChange(value)}
                  onBlur={() => handleBankNameBlur(supplierVO.bankName || "")}
                  className="flex-1"
                />
              </View>
              {bankNameError && (
                <View className="mt-1 text-xs text-red-500">
                  {`银行名称"${supplierVO.bankName}"至少2个字符`}
                </View>
              )}
              <View className="block text-sm font-normal text-[#000000]">
                银行卡号
              </View>
              <View
                className={`flex h-10 w-full items-center rounded-md ${bankCardError ? "border-4 border-red-500" : "border-4 border-gray-300"}`}
              >
                <Icon
                  name="credit-card"
                  size={16}
                  color="#999"
                  className="mx-2"
                />
                <Input
                  clearable
                  type="digit"
                  placeholder="请输入银行卡号"
                  value={supplierVO.bankCard}
                  onChange={(value) => handleBankCardChange(value)}
                  onBlur={() => handleBankCardBlur(supplierVO.bankCard || "")}
                  className="flex-1"
                />
              </View>
              {bankCardError && (
                <View className="mt-1 text-xs text-red-500">
                  请输入正确的银行卡号
                </View>
              )}
              <View className="block text-sm font-normal text-[#000000]">
                手机号码
              </View>
              <View
                className={`flex h-10 w-full items-center rounded-md ${phoneError ? "border-4 border-red-500" : "border-4 border-gray-300"}`}
              >
                <Icon name="phone" size={16} color="#999" className="mx-2" />
                <Input
                  clearable
                  type="tel"
                  placeholder="请输入手机号码"
                  value={supplierVO.phone}
                  onChange={(value) => handlePhoneChange(value)}
                  onBlur={() => handlePhoneBlur(supplierVO.phone || "")}
                  className="flex-1"
                />
              </View>
              {phoneError && (
                <View className="mt-1 text-xs text-red-500">
                  请输入正确的手机号
                </View>
              )}
            </View>
          </View>

          {/* 若档口无法开发票，则可打款到微信 */}
          <View className="border-primary rounded-lg border-4 bg-white p-2.5 shadow-sm">
            <View className="flex flex-col gap-2.5">
              <View className="text-primary text-base font-bold">
                {supplierVO.name || "档口"}的微信收款码（可跳过）
              </View>
              {supplierVO.wechatQr ? (
                <View className="flex flex-col gap-2.5 rounded-lg bg-green-50 p-2.5">
                  <View className="flex items-center">
                    <View className="relative mr-3 h-20 w-20 overflow-hidden rounded-lg">
                      <Image
                        className="h-full w-full object-cover"
                        src={supplierVO.wechatQr}
                      />
                    </View>
                    <View className="flex-1">
                      <View className="font-medium text-green-700">
                        微信收款码
                      </View>
                      <View className="text-sm text-green-600">已上传完成</View>
                    </View>
                  </View>
                  <View className="flex flex-row gap-2.5">
                    <View className={"flex-1"}>
                      <Button
                        type={"primary"}
                        size={"large"}
                        fill={"outline"}
                        block
                        onClick={handleWechatQrUpload}
                      >
                        <View>重新上传</View>
                      </Button>
                    </View>
                    <View className={"flex-1"}>
                      <Button
                        type={"warning"}
                        size={"large"}
                        fill={"outline"}
                        block
                        onClick={(e) => {
                          setSupplierVO({
                            ...supplierVO,
                            wechatQr: undefined,
                          });
                          Toast.show("toast", {
                            title: "删除成功",
                            icon: "success",
                            content: "微信收款码已删除",
                          });
                          e.stopPropagation();
                        }}
                      >
                        <View>删除</View>
                      </Button>
                    </View>
                  </View>
                </View>
              ) : (
                <View
                  className={
                    "flex h-40 flex-1 flex-col items-center justify-center rounded-md border-2 border-dashed border-green-300 bg-green-50 p-2.5"
                  }
                  onClick={handleWechatQrUpload}
                >
                  <Icon name={"camera"} size={24} />
                  <View className="text-sm font-medium text-green-700">
                    上传微信收款码
                  </View>
                  <View className="text-neutral-darker mt-1 text-xs">
                    支持从相册选择或拍照
                  </View>
                </View>
              )}
            </View>
          </View>
        </View>
      </View>

      <View className="sticky bottom-0 z-10 bg-white">
        <View className="flex justify-between gap-2 border-t border-gray-200 p-2.5">
          <View className={"flex-1"}>
            <Button
              block
              type="primary"
              size={"large"}
              onClick={handleSave}
              loading={btnLoading}
            >
              保存档口信息
            </Button>
          </View>
        </View>
        <SafeArea position={"bottom"} />
      </View>
    </>
  );
});
