import { useEffect, useState } from "react";
import { Text, View } from "@tarojs/components";
import { Button, Input, Popup, SafeArea } from "@nutui/nutui-react-taro";
import { validatePrice } from "@/utils/format";
import { PurchaseOrderCalculator } from "@/utils/PurchaseOrderCalculator";

export default function TaxSubsidySection(props: {
  dealerVO: BusinessAPI.DealerVO;
  purchaseOrderVO: BusinessAPI.PurchaseOrderVO;
  onChange?: (purchaseOrderVO: BusinessAPI.PurchaseOrderVO) => void;
  readOnly?: boolean;
}) {
  const { purchaseOrderVO, onChange, readOnly, dealerVO } = props;
  const calculator = new PurchaseOrderCalculator(purchaseOrderVO);

  const [visible, setVisible] = useState(false);

  const [taxSubsidy, setTaxSubsidy] = useState<number>(
    purchaseOrderVO.orderDealer.taxSubsidy || 0,
  );

  // 当dealerVO变化时，自动计算税费补贴
  useEffect(() => {
    if (!purchaseOrderVO.orderDealer.taxSubsidy) {
      const defaultValue = calculator.getDefaultTaxSubsidy();
      setTaxSubsidy(defaultValue);
      // 更新父组件的状态
      onChange?.({
        ...purchaseOrderVO,
        orderDealer: {
          ...purchaseOrderVO.orderDealer,
          taxSubsidy: defaultValue,
        },
      });
    }
  }, []);

  // 设置税费补贴默认值
  const setDefaultTaxSubsidy = () => {
    const defaultValue = calculator.getDefaultTaxSubsidy();
    setTaxSubsidy(defaultValue);
  };

  // 保存税费补贴
  const saveTaxSubsidy = () => {
    onChange?.({
      ...purchaseOrderVO,
      orderDealer: {
        ...purchaseOrderVO.orderDealer,
        taxSubsidy,
      },
    });

    setVisible(false);
  };

  return (
    <View className={"flex flex-col gap-2.5"}>
      {/* 卡片形式展示返点信息 */}
      <View className="bg-primary/3 rounded-lg border-b border-gray-100 p-2.5">
        <View className="mb-2">
          <Text className="text-sm font-medium">返点信息</Text>
        </View>

        <View className="flex">
          <View className="flex-1">
            {!readOnly ? (
              <View onClick={() => setVisible(true)}>
                <View className="mb-2 flex items-center justify-between">
                  <Text className="text-sm text-gray-500">返点金额</Text>
                  <Text className="text-sm text-gray-500">元</Text>
                </View>
                <View className="relative flex">
                  <Text className="w-full border-b-2 border-red-500 pb-2 text-3xl font-bold text-red-500 focus:outline-none">
                    {taxSubsidy || "0.00"}
                  </Text>
                </View>
              </View>
            ) : (
              <View>
                <View className="mb-2 flex items-center justify-between">
                  <Text className="text-sm text-gray-500">返点金额</Text>
                  <Text className="text-sm text-gray-500">元</Text>
                </View>
                <View className="relative">
                  <Text className="w-full py-2 text-3xl font-bold text-red-500">
                    {taxSubsidy || "0.00"}
                  </Text>
                </View>
              </View>
            )}
          </View>

          <View className="flex flex-1 flex-col gap-2 pl-4">
            <View className="flex items-center justify-between">
              <Text className="text-sm text-gray-500">返点百分比</Text>
              <Text className="text-sm font-medium">
                {dealerVO.companyRebateRatio
                  ? dealerVO.companyRebateRatio + "%"
                  : "未设置"}
              </Text>
            </View>
          </View>
        </View>
      </View>

      {/* 税费补贴弹窗 */}
      <Popup
        duration={150}
        style={{
          minHeight: "auto",
        }}
        visible={visible}
        className={"flex flex-col"}
        position="bottom"
        title={"编辑税费补贴"}
        onClose={() => setVisible(false)}
        onOverlayClick={() => {
          setVisible(false);
        }}
        lockScroll
      >
        <View className={"flex flex-col gap-3 p-2.5"}>
          <View className={"text-neutral-darkest text-sm font-medium"}>
            税费补贴金额
          </View>
          <View
            className={
              "border-neutral-base flex flex-row items-center rounded-md border border-solid"
            }
          >
            <Input
              className={"placeholder:text-neutral-dark"}
              placeholder={"请输入税费补贴金额"}
              type={"digit"}
              value={taxSubsidy?.toString()}
              onChange={(value) => {
                const numValue = validatePrice(value);
                if (numValue !== undefined) {
                  setTaxSubsidy(numValue as any);
                }
              }}
            />
            <View className={"mr-2"}>元</View>
          </View>
          <View className={"flex flex-row gap-2 pt-2"}>
            <Button size="small" onClick={setDefaultTaxSubsidy}>
              按公式填入默认值
            </Button>
            <View className="ml-2 self-center text-xs text-gray-500">
              默认值: 市场报价 × {dealerVO.companyRebateRatio || "未设置"}%
            </View>
          </View>
        </View>
        <View className={"flex w-full flex-col bg-white"}>
          <View className={"flex flex-row gap-2 p-3"}>
            <View className={"flex-1"}>
              <Button
                size={"large"}
                block
                type="default"
                onClick={() => {
                  setVisible(false);
                }}
              >
                取消
              </Button>
            </View>
            <View className={"flex-1"}>
              <Button
                size={"large"}
                block
                type="primary"
                onClick={saveTaxSubsidy}
              >
                保存
              </Button>
            </View>
          </View>
          <SafeArea position={"bottom"} />
        </View>
      </Popup>
    </View>
  );
}