import { useShallowEffect } from "@mantine/hooks";
import _ from "lodash";
import { useState } from "react";
import notification from "../notificationGlobal";

export default function SKYatim({ data }: { data: any }) {
  const [viewImg, setViewImg] = useState<string>("");
  const getValue = (key: string) =>
    _.upperFirst(
      data.surat.dataText.find((i: any) => i.jenis === key)?.value || "",
    );

  const loadImage = async () => {
    try {
      setViewImg("");
      if (!data.setting.perbekelTTD) return;

      const urlApi =
        "/api/pengaduan/image?folder=lainnya&fileName=" +
        data.setting.perbekelTTD;
      // Fetch manual agar mendapatkan Response asli
      const res = await fetch(urlApi);
      if (!res.ok)
        return notification({
          title: "Error",
          message: "Failed to load image sign",
          type: "error",
        });
      const blob = await res.blob();
      const url = URL.createObjectURL(blob);

      setViewImg(url);
    } catch (err) {
      console.error("Gagal load gambar:", err);
    }
  };

  useShallowEffect(() => {
    loadImage();
  }, [data]);

  return (
    <div style={{ lineHeight: "1.3" }}>
      {/* HEADER */}
      <div style={{ textAlign: "center", marginBottom: "10px" }}>
        <b>PEMERINTAH KABUPATEN {_.upperCase(data.setting.desaKabupaten)}</b>
        <br />
        <b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b>
        <br />
        <b>DESA {_.upperCase(data.setting.desaNama)}</b>
        <br />
        Alamat: {data.setting.desaAlamat}. Kode Pos: {data.setting.desaPos}
      </div>

      <div style={{ textAlign: "center", marginTop: "15px" }}>
        <b>
          <u>SURAT KETERANGAN YATIM / PIATU / YATIM PIATU</u>
        </b>
        <br />
        Nomor: {data.surat.noSurat}
      </div>

      <br />

      {/* BAGIAN PENANDATANGAN */}
      <div>Yang bertanda tangan di bawah ini:</div>
      <table style={{ width: "100%", marginTop: "5px" }}>
        <tbody>
          <tr>
            <td style={{ width: "180px" }}>Nama</td>
            <td>: {data.setting.perbekelNama}</td>
          </tr>
          <tr>
            <td>Jabatan</td>
            <td>: {data.setting.perbekelJabatan}</td>
          </tr>
          <tr>
            <td>Alamat Kantor</td>
            <td>: {data.setting.desaAlamat}</td>
          </tr>
        </tbody>
      </table>

      <br />

      {/* BAGIAN IDENTITAS ANAK */}
      <div>Dengan ini menerangkan bahwa:</div>

      <table style={{ width: "100%", marginTop: "5px" }}>
        <tbody>
          <tr>
            <td>NIK</td>
            <td>: {getValue("nik")}</td>
          </tr>
          <tr>
            <td style={{ width: "180px" }}>Nama</td>
            <td>: {getValue("nama")}</td>
          </tr>
          <tr>
            <td>Tempat/Tanggal Lahir</td>
            <td>
              : {`${getValue("tempat_lahir")}, ${getValue("tanggal_lahir")}`}
            </td>
          </tr>
          <tr>
            <td>Jenis Kelamin</td>
            <td>: {getValue("jenis_kelamin")}</td>
          </tr>
          <tr>
            <td>Alamat</td>
            <td>: {getValue("alamat")}</td>
          </tr>
          <tr>
            <td>Pekerjaan</td>
            <td>: {getValue("pekerjaan")}</td>
          </tr>
        </tbody>
      </table>

      <br />

      {/* KETERANGAN ORANG TUA */}
      <div>
        Benar bahwa yang bersangkutan adalah{" "}
        <b>anak (Yatim / Piatu / Yatim Piatu)</b>, dengan keterangan sebagai
        berikut:
      </div>

      <br />

      <div>
        <b>1. Nama Ayah</b>
      </div>
      <table style={{ width: "100%" }}>
        <tbody>
          <tr>
            <td style={{ width: "180px" }}>Nama Ayah</td>
            <td>: {getValue("nama_ayah")}</td>
          </tr>
          <tr>
            <td>Status</td>
            <td>: {getValue("status_ayah")}</td>
          </tr>
        </tbody>
      </table>

      <br />

      <div>
        <b>2. Nama Ibu</b>
      </div>
      <table style={{ width: "100%" }}>
        <tbody>
          <tr>
            <td style={{ width: "180px" }}>Nama Ibu</td>
            <td>: {getValue("nama_ibu")}</td>
          </tr>
          <tr>
            <td>Status</td>
            <td>: {getValue("status_ibu")}</td>
          </tr>
        </tbody>
      </table>

      <br />

      <div>
        Dengan demikian, berdasarkan keterangan pihak keluarga dan data di
        Kantor Desa, maka benar bahwa yang bersangkutan adalah
        <b> anak (Yatim / Piatu / Yatim Piatu).</b>
      </div>

      <br />

      <div>
        Surat keterangan ini dibuat dengan sebenar-benarnya untuk dipergunakan
        sebagaimana mestinya.
      </div>

      <br />

      {/* TANGGAL & TEMPAT */}
      <table style={{ width: "100%", marginTop: "10px" }}>
        <tbody>
          <tr>
            <td style={{ width: "180px" }}>Dikeluarkan di</td>
            <td>: {data.setting.desaNama}</td>
          </tr>
          <tr>
            <td>Pada tanggal</td>
            <td>: {data.surat.createdAt}</td>
          </tr>
        </tbody>
      </table>

      <br />

      {/* TTD */}
      <div
        style={{ width: "100%", display: "flex", justifyContent: "flex-end" }}
      >
        <div style={{ textAlign: "center" }}>
          Kepala Desa {data.setting.desaNama}
          <br />
          <br />
          <img src={viewImg || undefined} alt="ttd perbekel" width={100} />{" "}
          <br />
          <u>{data.setting.perbekelNama}</u> <br />
          NIP. {data.setting.perbekelNIP}
        </div>
      </div>
    </div>
  );
}