<script lang='ts' setup>
import { Directory, Filesystem } from "@capacitor/filesystem";
import { Share } from "@capacitor/share";
import { loadingController, toastController } from "@ionic/vue";
import { useQRCode } from "@vueuse/integrations/useQRCode";
import html2canvas from "html2canvas";
import MaterialSymbolsDownload from "~icons/material-symbols/download";
import MaterialSymbolsUpload from "~icons/material-symbols/upload";

const { t } = useI18n();
const userStore = useUserStore();
const { userProfile } = storeToRefs(userStore);
const url = computed(() => {
  return `/transfer_to_user/${userProfile.value?.userId}`;
});
const qrcode = useQRCode(url, {
  type: "image/webp",
  rendererOpts: {
    quality: 1,
  },
});
const { share, isSupported } = useShare();
const platform = usePlatform();
const qrcodeContainer = ref<HTMLElement>();

async function captureQRCode(): Promise<string> {
  if (!qrcodeContainer.value) {
    throw new Error("QR code container not found");
  }

  // 克隆元素避免修改原始DOM
  const clone = qrcodeContainer.value.cloneNode(true) as HTMLElement;

  // 设置固定尺寸和简单样式，避免 oklch 颜色问题
  clone.style.width = "400px";
  clone.style.height = "400px";
  clone.style.backgroundColor = "#ffffff";
  clone.style.padding = "20px";
  clone.style.borderRadius = "14px";
  clone.style.border = "1px solid #e5e7eb";
  clone.style.position = "absolute";
  clone.style.left = "-9999px";
  clone.style.top = "0";

  // 临时添加到 DOM
  document.body.appendChild(clone);

  try {
    const canvas = await html2canvas(clone, {
      backgroundColor: "#ffffff",
      scale: 2,
      logging: false,
      useCORS: true,
      allowTaint: true,
    });

    return canvas.toDataURL("image/png");
  }
  finally {
    // 清理克隆的元素
    document.body.removeChild(clone);
  }
}

async function handleShare() {
  const loading = await loadingController.create({
    message: t("onchainAddress.preparing"),
  });
  await loading.present();

  try {
    const dataUrl = await captureQRCode();

    if (platform === "browser") {
      // 浏览器环境使用 Web Share API
      if (isSupported.value) {
        // 将 base64 转换为 blob
        const blob = await (await fetch(dataUrl)).blob();
        const file = new File([blob], "qrcode.png", { type: "image/png" });

        await share({
          title: t("onchainAddress.shareTitle"),
          text: `${t("onchainAddress.myId")}: ${userProfile.value?.uid}`,
          files: [file],
        });
      }
      else {
        // 不支持则提示复制链接
        await navigator.clipboard.writeText(url.value);
        const toast = await toastController.create({
          message: t("onchainAddress.linkCopied"),
          duration: 2000,
          color: "success",
        });
        await toast.present();
      }
    }
    else {
      // 原生环境使用 Capacitor Share
      // 先保存到临时目录
      const fileName = `qrcode-${Date.now()}.png`;
      const base64Data = dataUrl.split(",")[1];

      const result = await Filesystem.writeFile({
        path: fileName,
        data: base64Data,
        directory: Directory.Cache,
      });

      await Share.share({
        title: t("onchainAddress.shareTitle"),
        text: `${t("onchainAddress.myId")}: ${userProfile.value?.uid}`,
        url: result.uri,
        dialogTitle: t("onchainAddress.shareDialogTitle"),
      });
    }
  }
  catch (error) {
    console.error("Share error:", error);
    const toast = await toastController.create({
      message: t("onchainAddress.shareFailed"),
      duration: 2000,
      color: "danger",
    });
    await toast.present();
  }
  finally {
    await loading.dismiss();
  }
}

/**
 * 下载二维码
 */
async function handleDownload() {
  const loading = await loadingController.create({
    message: t("onchainAddress.saving"),
  });
  await loading.present();

  try {
    const dataUrl = await captureQRCode();

    if (platform === "browser") {
      // 浏览器环境直接下载
      const link = document.createElement("a");
      link.download = `qrcode-${userProfile.value?.uid}.png`;
      link.href = dataUrl;
      link.click();
    }
    else {
      // 原生环境保存到文档目录
      const base64Data = dataUrl.split(",")[1];
      const fileName = `riwa-qrcode-${Date.now()}.png`;

      await Filesystem.writeFile({
        path: fileName,
        data: base64Data,
        directory: Directory.Documents, // iOS 使用 Documents 目录
      });

      const toast = await toastController.create({
        message: t("onchainAddress.saveSuccess"),
        duration: 2000,
        color: "success",
      });
      await toast.present();
    }
  }
  catch (error) {
    console.error("Download error:", error);
    const toast = await toastController.create({
      message: t("onchainAddress.saveFailed"),
      duration: 2000,
      color: "danger",
    });
    await toast.present();
  }
  finally {
    await loading.dismiss();
  }
}
</script>

<template>
  <IonPage>
    <IonHeader class="ion-no-border">
      <IonToolbar class="ion-toolbar">
        <ion-buttons slot="start">
          <ui-back-button />
        </ion-buttons>
        <ion-title>{{ t("onchainAddress.title") }}</ion-title>
      </IonToolbar>
    </IonHeader>
    <IonContent :fullscreen="true" class="ion-padding">
      <div class="flex justify-center items-center flex-col mt-20">
        <div
          ref="qrcodeContainer"
          class="w-[80vw] h-[80vw] bg-text-950 max-w-130 max-h-130 rounded-[14px] p-4 flex flex-col justify-center items-center relative border border-text-900"
        >
          <div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
            <div class="p-1 rounded-full w-fit">
              <ui-avatar class="size-18 border border-text-900" />
            </div>
          </div>

          <div class="ion-text-center w-full mt-5 flex flex-col items-center">
            <div class="w-[50vw] h-[50vw] max-w-62.5 max-h-62.5 flex justify-center items-center">
              <img :src="qrcode" alt="QR Code" class="w-[90%] h-[90%] rounded-2xl">
            </div>
            <div class="mt-4">
              <ion-text color="secondary">
                <div class="text-sm text-text-400 font-semibold">
                  {{ t("onchainAddress.myId") }}
                </div>
              </ion-text>
              <ion-text>
                <div class="mt-4px text-md font-semibold break-all">
                  {{ userProfile?.userId }}
                </div>
              </ion-text>
            </div>
          </div>
        </div>

        <div class="ion-text-center flex justify-between gap-6 w-[50%] mt-14">
          <div class="button" @click="handleShare">
            <div class="icon">
              <MaterialSymbolsUpload class="text-xl" />
            </div>
            <div class="text">
              Share
            </div>
          </div>
          <div class="button" @click="handleDownload">
            <div class="icon">
              <MaterialSymbolsDownload class="text-xl" />
            </div>
            <div class="text">
              Download
            </div>
          </div>
        </div>
      </div>
    </IonContent>
  </IonPage>
</template>

<style lang="css" scoped>
@reference "tailwindcss";

.button {
  @apply flex flex-col items-center gap-2 text-[text-500] font-medium cursor-pointer;
}
.icon {
  @apply p-2.5 bg-(--ion-color-faint) rounded-full;
}

.text {
  @apply text-sm;
}
</style>
