import { useState } from "react";
import { Text, View } from "@tarojs/components";
import { Button } from "@nutui/nutui-react-taro";
import Taro from "@tarojs/taro";

interface Step3SuccessProps {
  document: string;
}

export default function Step3Success(props: Step3SuccessProps) {
  const { document } = props;
  const [tempFilePath, setTempFilePath] = useState<string>();

  // 查看文档
  const handleView = async () => {
    if (!tempFilePath) {
      Taro.showToast({
        title: "请先下载发货单据",
        icon: "none",
        duration: 2000,
      });
      return;
    }

    Taro.openDocument({
      filePath: tempFilePath,
      showMenu: true,
    });
  };

  // 处理下载功能
  const handleDownload = async () => {
    Taro.showToast({
      title: "正在生成并下载发货单据",
      icon: "none",
      duration: 2000,
    });

    // 下载文件
    Taro.downloadFile({
      url: document!,
    }).then((downloadRes) => {
      if (downloadRes.tempFilePath) {
        setTempFilePath(downloadRes.tempFilePath);
        Taro.showToast({
          title: "发货单据已下载成功，您可以将生成的PDF发送给好友",
          icon: "none",
          duration: 3000,
        });
      }
    });
  };

  // 处理分享功能
  const handleShare = async () => {
    if (!tempFilePath) {
      Taro.showToast({
        title: "请先下载发货单据",
        icon: "none",
        duration: 2000,
      });
      return;
    }

    Taro.showToast({
      title: "正在分享到微信",
      icon: "none",
      duration: 2000,
    });

    // 下载完成后转发
    Taro.shareFileMessage({
      filePath: tempFilePath,
      fileName: `发货单据.pdf`,
      complete: (res) => {
        console.log("complete", res);
      },
    });
  };

  return (
    <View className="flex flex-1 flex-col items-center justify-center rounded-lg bg-white p-4 shadow-md">
      <View className="mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-green-100">
        <Text className="text-2xl text-green-600">✓</Text>
      </View>
      <View className="mb-2 text-xl font-bold text-gray-800">
        发货单据生成成功
      </View>
      <View className="mb-8 text-gray-600">
        您的发货单据已生成，可以下载或转发给好友
      </View>

      <View className="mb-6 flex w-full flex-row justify-center gap-4">
        {document && !tempFilePath && (
          <View className={"flex-1"}>
            <Button
              type="default"
              size={"large"}
              block
              onClick={handleDownload}
            >
              下载文档
            </Button>
          </View>
        )}
        {document && tempFilePath && (
          <>
            <View className={"flex-1"}>
              <Button type="default" size={"large"} block onClick={handleView}>
                查看文档
              </Button>
            </View>
            <View className={"flex-1"}>
              <Button type="primary" size={"large"} block onClick={handleShare}>
                转发好友
              </Button>
            </View>
          </>
        )}
      </View>

      <View className="text-sm text-gray-500">
        提示：您可以随时在发货单据列表中重新下载
      </View>
    </View>
  );
}
