import {
  Button,
  ButtonSize,
  Popup,
  SafeArea,
  TextArea,
  Toast,
} from "@nutui/nutui-react-taro";
import { useState } from "react";
import { View } from "@tarojs/components";
import { business } from "@/services";

interface IOrderRejectFinalProps {
  auditVO: BusinessAPI.AuditVO;
  size?: ButtonSize;
  onFinish?: () => void;
}

export default function OrderRejectFinal(props: IOrderRejectFinalProps) {
  const { auditVO, size = "normal", onFinish } = props;
  // 驳回原因弹窗相关状态
  const [rejectVisible, setRejectVisible] = useState(false);
  const [rejectReason, setRejectReason] = useState("");

  // 驳回操作
  const handleReject = () => {
    setRejectVisible(true);
  };

  // 确认驳回
  const confirmReject = async () => {
    if (!rejectReason.trim()) {
      Toast.show("toast", {
        icon: "fail",
        title: "提示",
        content: "请输入驳回原因",
      });
      return;
    }

    try {
      // 调用驳回API
      const {
        data: { success, errMessage },
      } = await business.order.rejectFinalOrder({
        orderId: auditVO.subjectId,
        auditId: auditVO.auditId,
        rejectReason: rejectReason,
      });

      if (!success) {
        Toast.show("toast", {
          icon: "fail",
          title: "提示",
          content: errMessage || "驳回失败",
        });
        return;
      }

      Toast.show("toast", {
        icon: "success",
        title: "提示",
        content: "驳回成功",
      });

      // 关闭弹窗
      setRejectVisible(false);
      setRejectReason("");

      onFinish?.();
    } catch (error) {
      Toast.show("toast", {
        icon: "fail",
        title: "提示",
        content: error.message || "驳回失败",
      });
    }
  };

  return (
    <>
      <Button
        block
        type={"danger"}
        size={size}
        onClick={(e) => {
          handleReject();
          e.stopPropagation();
        }}
      >
        驳回
      </Button>

      {/* 驳回原因弹窗 */}
      <Popup
        duration={150}
        style={{
          minHeight: "auto",
        }}
        visible={rejectVisible}
        position="bottom"
        onClose={() => {
          setRejectVisible(false);
          setRejectReason("");
        }}
        closeable
        destroyOnClose
        title={"驳回"}
        description={"此采购单将退回到报价审核员"}
      >
        <View className="p-2.5">
          <View className="mb-2.5 text-sm font-bold">请输入驳回原因</View>
          <View
            className={`flex w-full items-center rounded-md border-4 border-gray-300`}
          >
            <TextArea
              value={rejectReason}
              onChange={(value) => setRejectReason(value)}
              placeholder="请输入驳回原因"
              rows={4}
              maxLength={200}
              showCount
            />
          </View>

          <View className="mt-4 flex justify-between gap-2">
            <View className="flex-1">
              <Button
                size={"large"}
                block
                type="default"
                onClick={() => {
                  setRejectVisible(false);
                  setRejectReason("");
                }}
              >
                取消
              </Button>
            </View>
            <View className="flex-1">
              <Button
                size={"large"}
                block
                type="primary"
                onClick={confirmReject}
              >
                确认
              </Button>
            </View>
          </View>
        </View>
        <SafeArea position="bottom" />
      </Popup>
    </>
  );
}
