"use client";

import { AccentColor, MainColor } from "@/app_modules/_global/color";
import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
import { UIGlobal_Modal } from "@/app_modules/_global/ui";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
import { IRealtimeData } from "@/lib/global_state";
import { RouterDonasi } from "@/lib/router_hipmi/router_donasi";
import { Button, Stack } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
import { WibuRealtime } from "wibu-pkg";
import ComponentDonasi_DetailDataGalangDana from "../../component/detail_galang_dana/detail_data_donasi";
import ComponentDonasi_CeritaPenggalangMain from "../../component/detail_main/cerita_penggalang";
import { donasi_checkStatus } from "../../fun";
import { Donasi_funGantiStatus } from "../../fun/update/fun_ganti_status";
import { apiGetOneDonasiById } from "../../lib/api_donasi";
import { MODEL_DONASI } from "../../model/interface";

export default function DetailReviewDonasi() {
  const param = useParams<{ id: string }>();
  const [data, setData] = useState({} as MODEL_DONASI);
  const [loading, setLoading] = useState(true);

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

  async function getData() {
    try {
      setLoading(true); 
      const response = await apiGetOneDonasiById(param.id, "semua");

      if (response.success) {
        setData(response.data);
      }
    } catch (error) {
      console.error(error);
    } finally {
      setLoading(false);
    }
  }

  if (loading) {
    return <CustomSkeleton height={400} />;
  }

  return (
    <>
      <Stack spacing={"xl"} pb={"md"}>
        <ComponentDonasi_DetailDataGalangDana donasi={data} />
        <ComponentDonasi_CeritaPenggalangMain donasi={data} />
        <ButtonBatalReview donasi={data} />
      </Stack>
    </>
  );
}
function ButtonBatalReview({ donasi }: { donasi: MODEL_DONASI }) {
  const router = useRouter();
  const [isLoading, setLoading] = useState(false);
  const [openModal, setOpenModal] = useState(false);

  async function onChangeStatus() {
    setLoading(true);
    const check = await donasi_checkStatus({ id: donasi.id });
    if (check) {
      const res = await Donasi_funGantiStatus(donasi.id, "3");
      if (res.status === 200) {
        const dataNotifikasi: IRealtimeData = {
          appId: res.data?.id as any,
          status: res.data?.DonasiMaster_Status?.name as any,
          userId: res.data?.authorId as any,
          pesan: res.data?.title as any,
          kategoriApp: "DONASI",
          title: "Membatalkan review",
        };

        const notif = await notifikasiToAdmin_funCreate({
          data: dataNotifikasi as any,
        });

        if (notif.status === 201) {
          WibuRealtime.setData({
            type: "notification",
            pushNotificationTo: "ADMIN",
          });

          WibuRealtime.setData({
            type: "trigger",
            pushNotificationTo: "ADMIN",
            dataMessage: dataNotifikasi,
          });
        }
        ComponentGlobal_NotifikasiBerhasil("Berhasil Dibatalkan");
        router.replace(RouterDonasi.status_galang_dana({ id: "3" }));
      } else {
        setLoading(false);
        ComponentGlobal_NotifikasiPeringatan(res.message);
      }
    } else {
      setLoading(false);
      ComponentGlobal_NotifikasiPeringatan("Donasi telah direview admin");
    }
  }
  return (
    <>
      <Button
        mt={"lg"}
        style={{
          transition: "0.5s",
          backgroundColor: MainColor.orange,
        }}
        radius={"xl"}
        c={MainColor.darkblue}
        onClick={() => setOpenModal(true)}
      >
        Batalkan Review
      </Button>

      <UIGlobal_Modal
        title={"Anda yakin ingin batalkan review ?"}
        opened={openModal}
        close={() => setOpenModal(false)}
        buttonKiri={
          <Button
            style={{ backgroundColor: AccentColor.blue }}
            c={AccentColor.white}
            radius={"xl"}
            onClick={() => setOpenModal(false)}
          >
            Batal
          </Button>
        }
        buttonKanan={
          <Button
            style={{ backgroundColor: AccentColor.yellow }}
            loaderPosition="center"
            loading={isLoading ? true : false}
            radius={"xl"}
            c={MainColor.darkblue}
            onClick={() => {
              onChangeStatus();
            }}
          >
            Simpan
          </Button>
        }
      />
    </>
  );
}
