import apiFetch from "@/lib/apiFetch";
import { Flex, Modal, Progress, Stack, Text } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import html2canvas from "html2canvas";
import jsPDF from "jspdf";
import { useRef, useState } from "react";
import useSWR from "swr";
import SKBedaBiodataDiri from "./surat/SKBedaBiodataDiri";
import SKBelumKawin from "./surat/SKBelumKawin";
import SKDomisiliOrganisasi from "./surat/SKDomisiliOrganisasi";
import SKKelahiran from "./surat/SKKelahiran";
import SKKelakuanBaik from "./surat/SKKelakuanBaik";
import SKKematian from "./surat/SKKematian";
import SKPenghasilan from "./surat/SKPenghasilan";
import SKTempatUsaha from "./surat/SKTempatUsaha";
import SKTidakMampu from "./surat/SKTidakMampu";
import SKUsaha from "./surat/SKUsaha";
import SKYatim from "./surat/SKYatimPiatu";

export default function ModalSurat({
  open,
  onClose,
  surat,
}: {
  open: boolean;
  onClose: (val: { success: boolean, data: string }) => void;
  surat: string;
}) {
  const A4Style = {
    width: "210mm",
    height: "297mm",
    padding: "20mm",
    background: "#fff",
    color: "#000",
    fontSize: "14px",
    fontFamily: "Times New Roman",
  };
  const [uploading, setUploading] = useState<{ text: "Menyiapkan" | "Mengupload" | "Selesai" | "Gagal", value: number }>({ text: "Menyiapkan", value: 10 })
  const hiddenRef = useRef<any>(null);
  const { data, mutate, isLoading } = useSWR("surat", () =>
    apiFetch.api.surat.detail.get({
      query: {
        id: surat,
      },
    }),
  );


  useShallowEffect(() => {
    mutate();
  }, []);

  const uploadPdf = async () => {
    try {
      if (data && data.data && data.data.surat && (data.data.surat.file == "" || data.data.surat.file == null)) {
        setUploading({ text: "Mengupload", value: 75 });
        const element = hiddenRef.current;
        const canvas = await html2canvas(element, {
          scale: 2,
          useCORS: true,
          allowTaint: true,
          width: element.offsetWidth,
          height: element.offsetHeight,
        });

        const imgData = canvas.toDataURL("image/jpeg", 1.0);

        const pdf = new jsPDF("p", "mm", "a4");
        const pageWidth = 210; // A4 width mm
        const pageHeight = 297; // A4 height mm

        const imgWidth = pageWidth;
        const imgHeight = (canvas.height * pageWidth) / canvas.width;

        pdf.addImage(imgData, "JPEG", 0, 0, imgWidth, imgHeight);

        // ⬇️ ambil sebagai Blob
        const pdfBlob = pdf.output("blob");

        const pdfFile = new File(
          [pdfBlob],
          `${data?.data?.surat?.nameCategory}.pdf`,
          {
            type: "application/pdf",
            lastModified: Date.now(),
          }
        );

        const resImg = await apiFetch.api.pengaduan.upload.post({
          file: pdfFile,
          folder: "surat",
        });

        const resUpdate = await apiFetch.api.surat.update.post({
          id: surat,
          filename: resImg.data?.filename!,
        });

        if (resUpdate?.data?.success) {
          setUploading({ text: "Selesai", value: 100 });
          setTimeout(() => {
            onClose({ success: true, data: resUpdate.data?.link });
          }, 1000)
        } else {
          setUploading({ text: "Gagal", value: 100 });
          setTimeout(() => {
            onClose({ success: false, data: "" });
          }, 1000)
        }
      } else {
        setUploading({ text: "Gagal", value: 100 });
        setTimeout(() => {
          onClose({ success: false, data: "" });
        }, 1000)
      }

    } catch (error) {
      console.error("Error uploading PDF:", error);
    }
  }

  useShallowEffect(() => {
    if (open) {
      setTimeout(() => {
        uploadPdf();
      }, 3000);
    }
  }, [surat, open]);

  return (
    <>
      <Modal
        opened={open}
        onClose={() => { }}
        overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
        size="auto"
        withCloseButton={false}
        closeOnClickOutside={false}
        removeScrollProps={{ allowPinchZoom: true }}
        styles={{
          header: {
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            padding: "12px 16px",
          },
          title: {
            width: "100%",
          },
        }}
        title={
          <>
            <Flex justify="space-between" align="center" w="100%">
              <div style={{ fontSize: 18, fontWeight: 600 }}>Preview Surat</div>

              {/* <Flex gap={8} align="center">
              <Loader color="blue" size="xs" />
              <Text size="sm">{uploading.text}</Text>
            </Flex> */}
            </Flex>
            <Stack
              align="stretch"
              justify="center"
              gap="xs"
            >
              <Text size="sm" ta="center">{uploading.text} - Harap menunggu sampai selesai</Text>
              <Progress radius="md" value={uploading.value} animated size="lg" />
            </Stack>
          </>
        }
      >
        <div ref={hiddenRef} style={A4Style}>
          {data && data.data ? (
            data.data.surat.idCategory == "skusaha" ? (
              <SKUsaha data={data.data} />
            ) : data.data.surat.idCategory == "skkelahiran" ? (
              <SKKelahiran data={data.data} />
            ) : data.data.surat.idCategory == "skkelakuanbaik" ? (
              <SKKelakuanBaik data={data.data} />
            ) : data.data.surat.idCategory == "skpenghasilan" ? (
              <SKPenghasilan data={data.data} />
            ) : data.data.surat.idCategory == "sktidakmampu" ? (
              <SKTidakMampu data={data.data} />
            ) : data.data.surat.idCategory == "skyatimpiatu" ? (
              <SKYatim data={data.data} />
            ) : data.data.surat.idCategory == "skdomisiliorganisasi" ? (
              <SKDomisiliOrganisasi data={data.data} />
            ) : data.data.surat.idCategory == "skbedabiodata" ? (
              <SKBedaBiodataDiri data={data.data} />
            ) : data.data.surat.idCategory == "sktempatusaha" ? (
              <SKTempatUsaha data={data.data} />
            ) : data.data.surat.idCategory == "skbelumkawin" ? (
              <SKBelumKawin data={data.data} />
            ) : data.data.surat.idCategory == "skkematian" ? (
              <SKKematian data={data.data} />
            ) : (
              <></>
            )
          ) : (
            <></>
          )}
        </div>
      </Modal>
    </>
  );
}