"use client";

import { AdminColor } from "@/app_modules/_global/color/color_pallet";
import { ComponentGlobal_TampilanRupiah } from "@/app_modules/_global/component";
import { Admin_ComponentLoadImageLandscape } from "@/app_modules/admin/_admin_global";
import CustomSkeletonAdmin from "@/app_modules/admin/_admin_global/_component/skeleton/customSkeletonAdmin";
import Admin_ComponentBackButton from "@/app_modules/admin/_admin_global/back_button";
import {
  MODEL_DONASI
} from "@/app_modules/donasi/model/interface";
import { RouterAdminDonasi } from "@/lib/router_admin/router_admin_donasi";
import { RouterAdminDonasi_OLD } from "@/lib/router_hipmi/router_admin";
import {
  Button,
  Center,
  Grid,
  Modal,
  Paper,
  SimpleGrid,
  Stack,
  Text,
  TextInput,
  Title,
} from "@mantine/core";
import { useDisclosure, useShallowEffect } from "@mantine/hooks";
import { toNumber } from "lodash";
import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
import {
  apiGetAdminDonasiById,
  apiGetAdminDonasiCountDonatur,
} from "../../lib/api_fetch_admin_donasi";
import TampilanListDonatur from "./detail_list_donatur";
import TampilanListPencairan from "./detail_list_pencairan";

export default function AdminDonasi_DetailPublish() {
  const params = useParams<{ id: string }>();
  const [isReload, setReload] = useState(false);
  const [data, setData] = useState<MODEL_DONASI | null>(null);

  useShallowEffect(() => {
    loadInitialData();
  }, [isReload]);

  const loadInitialData = async () => {
    try {
      const response = await apiGetAdminDonasiById({
        id: params.id,
      });

      if (response?.success && response?.data) {
        setData(response.data);
        setReload(false);
      } else {
        setData(null);
      }
    } catch (error) {
      console.error("Invalid data format recieved:", error);
      setData(null);
    }
  };

  return (
    <>
      <Stack>
        <>
          <Admin_ComponentBackButton path={RouterAdminDonasi.table_publish} />
          {!data ? (
            <CustomSkeletonAdmin height={"40vh"} />
          ) : (
            <TampilanDetailDonasi donasi={data} />
          )}
          {!data ? (
            <CustomSkeletonAdmin height={"80vh"} />
          ) : (
            <TampilanListDonatur
              setReloadDonasi={(val) => {
                setReload(val);
              }}
              donasi={data}
              isReload={isReload}
            />
          )}
          <TampilanListPencairan />
        </>
      </Stack>
    </>
  );
}

function TampilanDetailDonasi({
  // countDonatur,
  donasi,
}: {
  // countDonatur: number;
  donasi: MODEL_DONASI;
}) {
  const [opened, { open, close }] = useDisclosure(false);
  const router = useRouter();
  const [isLoadingPencairanDana, setIsLoadingPencairanDana] = useState(false);
  const [countDonatur, setCountDonatur] = useState(0);

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

  async function onLoadData() {
    try {
      const response = await apiGetAdminDonasiCountDonatur({ id: donasi.id });
      if (response?.success && response?.data) {
        setCountDonatur(response.data);
      } else {
        setCountDonatur(0);
      }
    } catch (error) {
      console.error("Error get count donatur", error);
      setCountDonatur(0);
    }
  }

  return (
    <>
      <Paper bg={AdminColor.softBlue} radius={"md"} p={"md"}>
        <Stack>
          <SimpleGrid
            cols={3}
            spacing="lg"
            breakpoints={[
              { maxWidth: "62rem", cols: 3, spacing: "md" },
              { maxWidth: "48rem", cols: 2, spacing: "sm" },
              { maxWidth: "36rem", cols: 1, spacing: "sm" },
            ]}
          >
            <Paper p={"xs"} bg={AdminColor.softBlue}>
              <Stack>
                <Title c={AdminColor.white} align="center" order={4}>
                  Gambar Donasi
                </Title>
                <Admin_ComponentLoadImageLandscape fileId={donasi?.imageId} />
              </Stack>
            </Paper>

            <Paper p={"sm"} bg={AdminColor.softBlue}>
              <Stack spacing={5}>
                <Title c={AdminColor.white} order={4}>
                  Detail Donasi
                </Title>
                <Grid>
                  <Grid.Col span={4}>
                    <Text c={AdminColor.white} fz={"xs"}>
                      Judul
                    </Text>
                  </Grid.Col>
                  <Grid.Col c={AdminColor.white} span={"content"}>
                    :
                  </Grid.Col>
                  <Grid.Col span={"auto"}>
                    <Title order={5} c={AdminColor.white}>
                      {donasi?.title}
                    </Title>
                  </Grid.Col>
                </Grid>

                <Grid>
                  <Grid.Col span={4}>
                    <Text c={AdminColor.white} fz={"xs"}>
                      Penggalang Dana
                    </Text>
                  </Grid.Col>
                  <Grid.Col c={AdminColor.white} span={"content"}>
                    :
                  </Grid.Col>
                  <Grid.Col span={"auto"}>
                    <Title order={5} c={AdminColor.white}>
                      {donasi?.Author.username}
                    </Title>
                  </Grid.Col>
                </Grid>

                <Grid>
                  <Grid.Col span={4}>
                    <Text c={AdminColor.white} fz={"xs"}>
                      Durasi
                    </Text>
                  </Grid.Col>
                  <Grid.Col c={AdminColor.white} span={"content"}>
                    :
                  </Grid.Col>
                  <Grid.Col span={"auto"}>
                    <Title c={AdminColor.white} order={5}>
                      {donasi?.DonasiMaster_Durasi.name} hari
                    </Title>
                  </Grid.Col>
                </Grid>

                <Grid>
                  <Grid.Col span={4}>
                    <Text c={AdminColor.white} fz={"xs"}>
                      Dana dibutuhkan
                    </Text>
                  </Grid.Col>
                  <Grid.Col c={AdminColor.white} span={"content"}>
                    :
                  </Grid.Col>
                  <Grid.Col span={"auto"}>
                    <ComponentGlobal_TampilanRupiah
                      nominal={+donasi?.target}
                      color={AdminColor.yellow}
                    />
                  </Grid.Col>
                </Grid>

                <Grid>
                  <Grid.Col span={4}>
                    <Text c={AdminColor.white} fz={"xs"}>
                      Kategori
                    </Text>
                  </Grid.Col>
                  <Grid.Col c={AdminColor.white} span={"content"}>
                    :
                  </Grid.Col>
                  <Grid.Col span={"auto"}>
                    <Title c={AdminColor.white} order={5}>
                      {donasi?.DonasiMaster_Ketegori?.name}
                    </Title>
                  </Grid.Col>
                </Grid>

                <Grid>
                  <Grid.Col span={4}>
                    <Text c={AdminColor.white} fz={"xs"}>
                      Total donatur
                    </Text>
                  </Grid.Col>
                  <Grid.Col c={AdminColor.white} span={"content"}>
                    :
                  </Grid.Col>
                  <Grid.Col span={"auto"}>
                    <Title order={5} c={AdminColor.white}>
                      {countDonatur ? countDonatur : "-"}
                    </Title>
                  </Grid.Col>
                </Grid>

                <Grid>
                  <Grid.Col span={4}>
                    <Text c={AdminColor.white} fz={12}>
                      Progres
                    </Text>
                  </Grid.Col>
                  <Grid.Col c={AdminColor.white} span={"content"}>
                    :
                  </Grid.Col>
                  <Grid.Col span={"auto"}>
                    <Title order={5} c={AdminColor.white}>
                      {toNumber(donasi.progres).toFixed(2)} %
                    </Title>
                  </Grid.Col>
                </Grid>

                <Grid>
                  <Grid.Col span={4}>
                    <Text c={AdminColor.white} fz={12}>
                      Dana terkumpul
                    </Text>
                  </Grid.Col>
                  <Grid.Col c={AdminColor.white} span={"content"}>
                    :
                  </Grid.Col>
                  <Grid.Col span={"auto"}>
                    <ComponentGlobal_TampilanRupiah
                      nominal={+donasi?.terkumpul}
                      color={AdminColor.yellow}
                    />
                  </Grid.Col>
                </Grid>
              </Stack>
            </Paper>

            {/* Pencairan Dana */}
            <Paper bg={AdminColor.softBlue} p={"sm"}>
              <Stack spacing={"xl"}>
                <Center>
                  <Title c={AdminColor.white} order={4}>
                    Pencairan Dana
                  </Title>
                </Center>
                <Grid>
                  <Grid.Col span={"auto"}>
                    <Stack spacing={0}>
                      <Text c={AdminColor.white} fz={"xs"}>
                        Total Dana Dicairkan
                      </Text>
                      <ComponentGlobal_TampilanRupiah
                        nominal={donasi?.totalPencairan}
                        color={AdminColor.yellow}
                      />
                    </Stack>
                  </Grid.Col>
                  <Grid.Col span={"auto"}>
                    <Stack spacing={0}>
                      <Text c={AdminColor.white} fz={"xs"}>
                        Bank Tujuan
                      </Text>
                      <Title order={6} c={AdminColor.white}>
                        {donasi?.namaBank}
                      </Title>
                    </Stack>
                  </Grid.Col>
                </Grid>
                <Grid>
                  <Grid.Col span={"auto"}>
                    <Stack spacing={0}>
                      <Text c={AdminColor.white} fz={"xs"}>
                        Akumulasi Pencairan
                      </Text>
                      <Title order={6} c={AdminColor.white}>
                        {donasi?.akumulasiPencairan} Kali
                      </Title>
                    </Stack>
                  </Grid.Col>
                  <Grid.Col span={"auto"}>
                    <Stack spacing={0}>
                      <Text fz={"xs"} c={AdminColor.white}>
                        Nomor Rekening
                      </Text>
                      <Title order={6} c={AdminColor.white}>
                        {donasi?.rekening}
                      </Title>
                    </Stack>
                  </Grid.Col>
                </Grid>

                <Stack align="center" spacing={0}>
                  <Text c={AdminColor.white} fz={"xs"}>
                    Sisa Dana
                  </Text>
                  <ComponentGlobal_TampilanRupiah
                    nominal={
                      toNumber(donasi.terkumpul) -
                      toNumber(donasi.totalPencairan)
                    }
                    color={AdminColor.yellow}
                  />
                </Stack>

                <Button
                  loaderPosition="center"
                  loading={isLoadingPencairanDana}
                  radius={"xl"}
                  onClick={() => {
                    setIsLoadingPencairanDana(true);
                    router.push(
                      RouterAdminDonasi_OLD.pencairan_dana + `${donasi?.id}`
                    );
                  }}
                >
                  Cairkan Dana
                </Button>
              </Stack>
            </Paper>
          </SimpleGrid>
        </Stack>
      </Paper>

      <Modal opened={opened} onClose={close} centered>
        <PencairanDana />
      </Modal>
    </>
  );
}
function PencairanDana() {
  return (
    <>
      <Stack>
        <TextInput label="Masukan nominal" />
      </Stack>
    </>
  );
}
