import React, { useState, useEffect, useRef } from "react";
import { View, Text, Input, Button, Image } from "@tarojs/components";
import Taro, { useDidShow } from "@tarojs/taro";

import httpService from "@/services/httpService";
import "./index.scss";
import { CommonPopup } from "@/components";
import { useKeyboardHeight } from "@/store/keyboardStore";
import img from "@/config/images";

interface WalletInfo {
  balance: string;
  frozen_balance?: string;
  total_balance?: string;
  total_income?: string;
  total_withdraw?: string;
}

const Withdrawal: React.FC = () => {
  // 获取当前页面的配置
  const currentPage = Taro.getCurrentInstance();
  const pageConfig = currentPage.page?.config;
  const pageTitle = pageConfig?.navigationBarTitleText;
  const inputRef = useRef(null);
  // 使用全局键盘状态
  const {
    keyboardHeight,
    isKeyboardVisible,
    addListener,
    initializeKeyboardListener,
  } = useKeyboardHeight();
  // 使用全局键盘状态监听
  useEffect(() => {
    // 初始化全局键盘监听器
    initializeKeyboardListener();

    // 添加本地监听器
    const removeListener = addListener((height, visible) => {
      console.log("AiImportPopup 收到键盘变化:", height, visible);
    });

    return () => {
      removeListener();
    };
  }, [initializeKeyboardListener, addListener]);
  const [showTips, setShowTips] = useState(false);
  const [tipsText, setTipsText] = useState<string>("");
  const [inputValue, setInputValue] = useState<string>("0.00");
  const [walletInfo, setWalletInfo] = useState<WalletInfo>({
    balance: "0.00",
  });
  const [isFocus, setIsFocus] = useState(false);

  const [show_withdraw_popup, set_show_withdraw_popup] = useState(false);

  const [password, setPassword] = useState<string[]>(new Array(6).fill(""));

  const [mapErrorCodes, setMapErrorCodes] = useState({});

  useDidShow(() => {
    load_wallet_data();
    getWithdrawErrorCodes();
  });
  useEffect(() => {
    if (show_withdraw_popup && inputRef.current) {
      inputRef.current.focus();
    }
  }, [show_withdraw_popup]);
  useEffect(() => {
    if (show_withdraw_popup) {
      setIsFocus(true);
    } else {
      setPassword(new Array(6).fill(""));
      setIsFocus(false);
    }
  }, [show_withdraw_popup]);

  const validateWithdrawAmount = (amount: string) => {
    if (Number(amount) > Number(walletInfo.balance)) {
      setShowTips(true);
      setTipsText("输入金额超过钱包余额");
    } else if (Number(amount) > 200) {
      setShowTips(true);
      setTipsText("单笔提现金额不能超过 200元");
    } else {
      setShowTips(false);
    }
  };

  const withdrawAll = () => {
    setInputValue(walletInfo.balance);
    validateWithdrawAmount(walletInfo.balance);
  };

  const handleInput = (e: any) => {
    console.log(e);
    const value = e.detail.value;
    setInputValue(value);
    validateWithdrawAmount(value);
  };
  // 加载钱包数据
  const load_wallet_data = async () => {
    try {
      const response = await httpService.post("/wallet/balance");
      const {
        balance,
        frozen_balance,
        total_balance,
        total_income,
        total_withdraw,
      } = response.data;
      setWalletInfo({
        balance,
        frozen_balance,
        total_balance,
        total_income,
        total_withdraw,
      });
    } catch (error: any) {
      console.error("加载钱包数据失败:", error);

      let errorMessage = "加载失败，请重试";
      if (
        error &&
        error.response &&
        error.response.data &&
        error.response.data.message
      ) {
        errorMessage = error.response.data.message;
      } else if (error && error.data && error.data.message) {
        errorMessage = error.data.message;
      }

      Taro.showToast({
        title: errorMessage,
        icon: "error",
        duration: 2000,
      });
    }
  };
  const getWithdrawErrorCodes = async () => {
    try {
      const response = await httpService.post("/wallet/error_codes");
      if (response.code === 0) {
        const {
          withdraw_errors: { WEIXIN_ERRORS },
        } = response.data;
        const mapErrorCodes = {};
        for (const key in WEIXIN_ERRORS) {
          const { code } = WEIXIN_ERRORS[key];
          mapErrorCodes[code] = WEIXIN_ERRORS[key];
        }
        setMapErrorCodes(mapErrorCodes);
      }
    } catch (error: any) {
      console.error("获取提现错误码失败:", error);
    }
  };
  const handleWithdraw = async () => {
    set_show_withdraw_popup(true);
  };
  const submit_withdraw = async (payment_password: string) => {
    try {
      // 先调用后端接口获取提现参数
      const response = await httpService.post(
        "/wallet/withdraw",
        {
          amount: parseFloat(inputValue),
          transfer_remark: "用户申请提现",
          payment_password,
        },
        { showToast: false }
      );
      const { data } = response;
      // 根据后端返回的数据结构解析参数
      const { mch_id, app_id, package_info, open_id } = data;

      console.log("/wallet/withdraw:", data);
      set_show_withdraw_popup(false);

      // 调用微信商户转账接口
      (Taro as any).requestMerchantTransfer({
        mchId: mch_id,
        appId: app_id,
        package: package_info,
        openId: open_id,
        success: (res) => {
          console.log("微信转账成功:", res);
          Taro.showToast({
            title: "提现成功",
            icon: "success",
            duration: 2000,
          });

          // 关闭弹窗并重置状态
          set_show_withdraw_popup(false);
          setInputValue("0.00");
          // 重新加载数据
          load_wallet_data();
        },
        fail: (res) => {
          console.log("微信转账失败:", res);
        },
      });
    } catch (error: any) {
      const { code, message } = error;
      if (message === "支付密码错误") {
        set_show_withdraw_popup(false);
        Taro.showModal({
          content: "支付密码错误，请重试",
          cancelText: "忘记密码",
          confirmText: "重试",
          cancelColor: "#000",
          confirmColor: "#fff",
        }).then((res) => {
          if (res.confirm) {
            set_show_withdraw_popup(true);
          } else if (res.cancel) {
            Taro.navigateTo({
              url: "/user_pages/validPhone/index",
            });
          }
        });
        return;
      } else if (mapErrorCodes[code]) {
        const { message, description } = mapErrorCodes[code];
        Taro.showModal({
          title: description,
          content: message,
          showCancel: false,
          confirmText: "确认",
        });
        return;
      } else {
        Taro.showToast({
          title: message,
          icon: "none",
          duration: 2000,
        });
      }
    }
  };
  const handlePasswordInput = (e: any) => {
    const value = e.detail.value;
    const [one = "", two = "", three = "", four = "", five = "", six = ""] =
      value.split("");
    setPassword([one, two, three, four, five, six]);
    if (value.length === 6) {
      const timer = setTimeout(() => {
        submit_withdraw(value);
        clearTimeout(timer);
      }, 100);
    }
  };
  const handlePopupClick = (e) => {
    e.preventDefault();
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
    inputRef.current!.focus();
  };
  return (
    <View className="withdrawal-page">
      {/* 导航栏 */}
      <View className="custom-navbar">
        <View className="detail-navigator">
          <View
            className="detail-navigator-back"
            onClick={() => {
              Taro.navigateBack();
            }}
          >
            <Image
              className="detail-navigator-back-icon"
              src={img.ICON_NAVIGATOR_BACK}
            />
            <Text>{pageTitle}</Text>
          </View>
        </View>
      </View>
      <View className="withdrawal-container">
        <Text className="title-text">提现金额</Text>
        <View className="input-container">
          <Text className="symbol">¥</Text>
          <Input
            type="digit"
            placeholder="0.00"
            cursorColor="#000"
            value={inputValue}
            onInput={handleInput}
          />
          {!showTips && Number(inputValue) !== 0 && (
            <Button className="btn" onClick={handleWithdraw}>
              提现
            </Button>
          )}
        </View>
        <View className="btn-container">
          <View>
            <Text>{`我的余额：¥${walletInfo.balance}`}</Text>
            {/* <Text>（可提现余额：¥5000.00）</Text> */}
          </View>
          <Text className="btn" onClick={withdrawAll}>
            全部提现
          </Text>
        </View>
        {showTips && <View className="tips-text">{tipsText}</View>}
      </View>
      <View className="tips-container">
        <View className="title-text">提现须知</View>
        <View className="tips-text">
          <Text>
            1. 本钱包余额由平台统一管理，提现服务由 微信支付（财付通） 提供。
          </Text>
          <Text>
            2.
            提现仅支持提现至本人实名认证的微信支付账户，请确保账户信息真实有效。
          </Text>
          <Text>
            3. 每次提现金额不得超过钱包余额，且需满足提现金额最低限制（如有）。
          </Text>
          <Text>
            4. 正常情况下提现
            实时到账，如遇网络、系统或银行通道原因，可能会有延迟。
          </Text>
          <Text>
            5.
            提现过程中平台不收取任何手续费，如微信支付有特殊规则，按其实际规定执行。
          </Text>
          <Text>
            6. 若发现异常交易、涉嫌违规或存在风险，平台有权暂停或拒绝提现操作。
          </Text>
          <Text>7. 实际到账结果以 微信支付通知 为准。</Text>
        </View>
      </View>
      <View className="tips-container">
        <View className="title-text">免费声明</View>
        <View className="tips-text">
          <Text>1. 本平台不向用户收取提现手续费，提现服务免费。</Text>
          <Text>2. 若因银行或微信支付方收取相关费用，与本平台无关。</Text>
          <Text>
            3. 因网络、系统或第三方原因造成的延迟、失败，本平台不承担责任。
          </Text>
          <Text>4. 用户在使用提现服务前，应充分了解并同意上述规则。</Text>
        </View>
      </View>

      {/* 提现输入密码弹窗 */}
      <CommonPopup
        showHeader={true}
        visible={show_withdraw_popup}
        onClose={() => set_show_withdraw_popup(false)}
        title="提现"
        className="withdraw_popup"
        hideFooter={true}
        style={{
          bottom: isKeyboardVisible ? `${keyboardHeight}px` : undefined,
        }}
      >
        <View
          className="popup_content"
          onTouchForceChange={handlePopupClick}
          onTouchStart={handlePopupClick}
          onTouchMove={handlePopupClick}
          onTouchEnd={handlePopupClick}
        >
          <View className="popup_text">{`¥${inputValue}`}</View>
          <View className="password_container">
            {password.map((item, index) => (
              <View key={index} className="password_item">
                <Text className="password_text">{item}</Text>
              </View>
            ))}
          </View>
          <Input
            holdKeyboard={true}
            ref={inputRef}
            focus={isFocus}
            type="number"
            adjustPosition={false}
            style={{ width: "0", height: "0", opacity: "0" }}
            value={password.filter((item) => item !== "").join("")}
            maxlength={6}
            onInput={handlePasswordInput}
            onBlur={() => {
              set_show_withdraw_popup(false);
            }}
          />
        </View>
      </CommonPopup>
    </View>
  );
};

export default Withdrawal;