"use client";
import React, { useState, useCallback, useEffect } from "react";
import { Divider, Toast, Button, Radio } from "antd-mobile";
import { useParams, useRouter } from "next/navigation";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft } from "@fortawesome/free-solid-svg-icons";
import requireAPI from "@/utils/requireAPI";
import LoadingMask from "@/components/LoadingMask";
import { formatTimestamp } from "@/utils/tools";
export default function RefundDetail() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [selectedIndex, setIndex] = useState(2);
  const [checkAble, setCheckAble] = useState(true);
  const { id } = useParams();
  const router = useRouter();
  useEffect(() => {
    const getData = async () => {
      setIsLoading(true);
      try {
        const body = {
          audit_id: id,
        };
        const refundData = await requireAPI("POST", "/api/zone/refund_info", {
          body,
        });
        if (refundData.ret === -1) {
          Toast.show({
            icon: "fail",
            content: refundData.msg,
            position: "top",
          });
          return;
        }
        setData(refundData.data);
        setIndex(refundData.data.refunds_status);
        setCheckAble(refundData.data.refunds_status === 1);
      } catch (error) {
        console.error(error);
      } finally {
        setIsLoading(false);
      }
    };
    getData();
  }, []);
  const handleSubmit = async () => {
    setIsLoading(true);

    try {
      const body = {
        audit_id: id,
        refunds_status: selectedIndex,
      };
      const refundData = await requireAPI("POST", "/api/zone/refund_audit", {
        body,
      });
      if (refundData.ret === -1) {
        Toast.show({
          icon: "fail",
          content: refundData.msg,
          position: "top",
        });
        return;
      }
      setCheckAble(false);
    } catch (error) {
      console.error(error);
    } finally {
      setIsLoading(false);
    }
  };
  return (
    <div>
      <div className="p-4 fixed top-0 z-10 w-full">
        <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full absolute">
          <FontAwesomeIcon
            icon={faAngleLeft}
            style={{ maxWidth: "12px" }}
            size="xl"
            onClick={() => {
              router.back();
            }}
          />
        </div>
        <p className="text-base text-center leading-9">退款审核</p>
      </div>
      {/* 内容 */}
      <div className="pt-16 p-4">
        <div className="my-2 flex-1">
          <div className="bg-[#FFFFFF1A] px-4 py-2 my-2 rounded-2xl">
            <div className="flex flex-row justify-between items-center">
              <span className="text-base font-medium">退款价格</span>
              <span className="flex flex-row flex-1 justify-end items-center">
                <span>¥ {data ? data?.price / 100 : "0"}</span>
              </span>
            </div>
            <Divider className="my-2" />
            <div className="flex flex-row justify-between items-center">
              <span className="text-base font-medium">退款用户</span>
              <div className="flex flex-row flex-1 justify-end items-center">
                <span>{data?.nike_name}</span>
              </div>
            </div>
            <Divider className="my-2" />
            <div className="flex flex-row justify-between items-center">
              <span className="text-base font-medium">购买时间</span>
              <div className="flex flex-row flex-1 justify-end items-center">
                <span>{data ? formatTimestamp(data?.by_time) : ""}</span>
              </div>
            </div>
            <Divider className="my-2" />
            <div className="flex flex-row justify-between items-center">
              <span className="text-base font-medium">退款时间</span>
              <div className="flex flex-row flex-1 justify-end items-center">
                <span>{data ? formatTimestamp(data?.refund_t) : ""}</span>
              </div>
            </div>
            <Divider className="my-2" />
            <div className="flex flex-row justify-between items-center">
              <span className="text-base font-medium">退款联系人</span>
              <div className="flex flex-row flex-1 justify-end items-center">
                <span>{data?.contact_name}</span>
              </div>
            </div>
            <Divider className="my-2" />
            <div className="flex flex-row justify-between items-center">
              <span className="text-base font-medium">退款联系方式</span>
              <div className="flex flex-row flex-1 justify-end items-center">
                <span>{data?.contact_phone}</span>
              </div>
            </div>
            <Divider className="my-2" />
            <div className="flex flex-col ">
              <span className="text-base font-medium">退款备注</span>
              <div className="p-2">
                <span>{data?.note}</span>
              </div>
            </div>
          </div>
          <div className="flex flex-col justify-between mt-4">
            <span className="text-base font-medium">是否同意当前退款</span>
            <Radio.Group
              className="flex flex-col"
              onChange={setIndex}
              value={
                data && [2, 3, 4].includes(data?.refunds_status)
                  ? 2
                  : selectedIndex
              }
              disabled={!checkAble}
            >
              <div className="flex flex-row items-start mt-4 pr-6">
                <Radio value={2}>
                  <div className="ml-4">
                    <p
                      className="text-xl mb-1 font-bold"
                      style={{
                        color: !checkAble
                          ? "#FFFFFF80"
                          : selectedIndex === 2
                          ? "#FF669E"
                          : "#FFFFFF",
                      }}
                    >
                      同意退款
                    </p>
                    <span
                      style={{
                        color: !checkAble
                          ? "#FFFFFF80"
                          : selectedIndex === 2
                          ? "#FF669E"
                          : "#FFFFFF80",
                      }}
                    >
                      同意退回用户的[空间成员]费用，同时自动禁止用户再次购买此商品。
                    </span>
                  </div>
                </Radio>
              </div>
              <div className="flex-row items-start mt-4 pr-6">
                <Radio value={-1}>
                  <div className="ml-4">
                    <p
                      className="text-xl mb-1 font-bold"
                      style={{
                        color: !checkAble
                          ? "#FFFFFF80"
                          : selectedIndex === -1
                          ? "#FF669E"
                          : "#FFFFFF",
                      }}
                    >
                      拒绝退款
                    </p>
                    <span
                      style={{
                        color: !checkAble
                          ? "#FFFFFF80"
                          : selectedIndex === -1
                          ? "#FF669E"
                          : "#FFFFFF80",
                      }}
                    >
                      拒绝退回用户的[空间成员]费用。
                    </span>
                  </div>
                </Radio>
              </div>
            </Radio.Group>
          </div>
          <div
            onClick={(e) => {
              if (isLoading || !checkAble) return;
              handleSubmit(e);
            }}
            className="rounded-full px-6 py-2 text-lg text-center mt-6"
            style={{
              background: isLoading || !checkAble ? "#FFFFFF80" : "#FF669E",
            }}
          >
            {data && data?.refunds_status === 4
              ? "超时自动提交"
              : data && data?.refunds_status === 3
              ? "2小时无条件退款"
              : !checkAble
              ? "您已提交"
              : isLoading
              ? "正在提交..."
              : "提交"}
          </div>
        </div>
      </div>
      <LoadingMask isLoading={isLoading} />
    </div>
  );
}