"use client";

import { AccentColor, AdminColor } from "@/app_modules/_global/color/color_pallet";
import { ComponentGlobal_TampilanRupiah } from "@/app_modules/_global/component";
import { apiGetMasterStatusTransaksi } from "@/app_modules/_global/lib/api_fetch_master";
import { globalStatusTransaksi } from "@/app_modules/_global/lib/master_list_app";
import { Admin_ComponentLoadImageLandscape } from "@/app_modules/admin/_admin_global";
import { ComponentAdminGlobal_TitlePage } from "@/app_modules/admin/_admin_global/_component";
import CustomSkeletonAdmin from "@/app_modules/admin/_admin_global/_component/skeleton/customSkeletonAdmin";
import { ComponentAdminGlobal_NotifikasiBerhasil } from "@/app_modules/admin/_admin_global/admin_notifikasi/notifikasi_berhasil";
import { ComponentAdminGlobal_NotifikasiGagal } from "@/app_modules/admin/_admin_global/admin_notifikasi/notifikasi_gagal";
import AdminGlobal_ComponentBackButton from "@/app_modules/admin/_admin_global/back_button";
import adminNotifikasi_funCreateToUser from "@/app_modules/admin/notifikasi/fun/create/fun_create_notif_user";
import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
import {
  MODEL_DONASI,
  MODEL_DONASI_PENCAIRAN_DANA
} from "@/app_modules/donasi/model/interface";
import { MODEL_NEW_DEFAULT_MASTER } from "@/app_modules/model_global/interface";
import { RouterAdminGlobal } from "@/lib";
import { RouterAdminDonasi } from "@/lib/router_admin/router_admin_donasi";
import { RouterAdminDonasi_OLD } from "@/lib/router_hipmi/router_admin";
import { clientLogger } from "@/util/clientLogger";
import mqtt_client from "@/util/mqtt_client";
import {
  ActionIcon,
  Badge,
  Box,
  Button,
  Center,
  Grid,
  Group,
  Modal,
  Pagination,
  Paper,
  ScrollArea,
  Select,
  SimpleGrid,
  Spoiler,
  Stack,
  Table,
  Text,
  TextInput,
  Title,
} from "@mantine/core";
import { useDisclosure, useShallowEffect } from "@mantine/hooks";
import { IconReload } from "@tabler/icons-react";
import { toNumber } from "lodash";
import moment from "moment";
import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
import adminDonasi_funUpdateStatusDanTotal from "../../fun/update/fun_update_status_dan_total";
import { apiGetAdminAllDaftarDonatur, apiGetAdminDonasiById } from "../../lib/api_fetch_admin_donasi";
import TampilanListDonatur from "./detail_list_donatur";

export default function AdminDonasi_DetailPublish({
  countDonatur,
  listPencairan,
}: {
  countDonatur: number;
  listPencairan: MODEL_DONASI_PENCAIRAN_DANA[];
}) {
  const [pencairan, setPencairan] = useState(listPencairan);
  const [isReload, setReload] = useState(false);
  const params = useParams<{ id: string }>();
  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) {
        console.log("data", response.data);
        setData(response.data)
        setReload(false)

      } else {
        console.log("Invalid data format recieved:", response);
        setData(null)
      }
    } catch (error) {
      clientLogger.error("Invalid data format recieved:", error);
      setData(null);
    }
  }

  return (
    <>
      {/* <pre>{JSON.stringify(pencairan, null, 2)}</pre> */}
      <Stack>
        <>
          <AdminGlobal_ComponentBackButton
            path={RouterAdminDonasi.table_publish}
          />
          {!data ? (<CustomSkeletonAdmin height={"40vh"} />) : (
            <TampilanDetailDonasi
              countDonatur={countDonatur} donasi={data} />
          )}
          {!data ? (<CustomSkeletonAdmin height={"80vh"} />) : (
            <TampilanListDonatur
              setReloadDonasi={(val) => {
                setReload(val)
              }}
              donasi={data}
              isReload={isReload}
            />)}
          <TampilanListPencairan pencairan={pencairan} />
        </>
      </Stack>
    </>
  );
}

function TampilanDetailDonasi({
  countDonatur,
  donasi

}: {
  countDonatur: number;
  donasi: MODEL_DONASI;

}) {


  const [opened, { open, close }] = useDisclosure(false);
  const router = useRouter();
  const [isLoadingPencairanDana, setIsLoadingPencairanDana] = useState(false);


  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}
                    </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>
    </>
  );
}

//######################## LIST PENCAIRAN #####################//
function TampilanListPencairan({
  pencairan,
}: {
  pencairan: MODEL_DONASI_PENCAIRAN_DANA[];
}) {
  const router = useRouter();
  const [data, setData] = useState(pencairan);
  const [opened, { open, close }] = useDisclosure(false);
  const [gambarId, setGambarId] = useState("");

  const rowTable = data.map((e) => (
    <tr key={e.id}>
      <td>
        <Center c={AdminColor.white}>
          <TampilanRupiahDonasi nominal={e.nominalCair} />
        </Center>
      </td>
      <td>
        <Center c={AdminColor.white}>{moment(e.createdAt).format("ll")}</Center>
      </td>
      <td>
        <Center c={AdminColor.white}>
          <Text>{e.title}</Text>
        </Center>
      </td>
      <td width={500}>
        <Box w={"100%"}>
          <Spoiler hideLabel="Sembunyikan" maxHeight={70} showLabel="Lihat">
            {e.deskripsi}
          </Spoiler>
        </Box>
      </td>
      <td>
        <Box>
          <Center>
            <Button
              radius={"xl"}
              bg={"green"}
              color="green"
              onClick={() => {
                // open();
                // setGambarId(e.imagesId);
                router.push(
                  RouterAdminDonasi.transfer_invoice_reimbursement + e?.imagesId
                );
              }}
            >
              Cek
            </Button>
          </Center>
        </Box>
      </td>
    </tr>
  ));

  return (
    <>

      <Stack spacing={"xs"} h={"100%"}>
        <ComponentAdminGlobal_TitlePage
          name="Rincian Pencairan Dana"
          color={AdminColor.softBlue}
          component={
            <Group>
              <ActionIcon
                size={"lg"}
                radius={"xl"}
                variant="light"
                onClick={() => {
                  // onRelaod();
                }}
              >
                <IconReload />
              </ActionIcon>
              {/* <Select
              placeholder="Pilih status"
              value={isSelect}
              data={listMasterStatus.map((e) => ({
                value: e.id,
                label: e.name,
              }))}
              onChange={(val) => {
                onSelect(val);
              }}
            /> */}
            </Group>
          }
        />

        <Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"80vh"}>
          <ScrollArea w={"100%"} h={"90%"}>
            <Table
              verticalSpacing={"xl"}
              horizontalSpacing={"md"}
              p={"md"}
              w={1500}

            >
              <thead>
                <tr>
                  <th>
                    <Center c={AccentColor.white}>Nominal</Center>
                  </th>
                  <th>
                    <Center c={AccentColor.white}>Tanggal</Center>
                  </th>
                  <th>
                    <Center c={AccentColor.white}>Judul</Center>
                  </th>
                  <th style={{ color: AccentColor.white }}>Deskripsi</th>
                  <th>
                    <Center c={AccentColor.white}>Bukti Transfer</Center>
                  </th>
                </tr>
              </thead>
              <tbody>{rowTable}</tbody>
            </Table>
          </ScrollArea>

          {/* <Center mt={"xl"}>
            <Pagination
              value={isActivePage}
              total={isNPage}
              onChange={(val) => {
                onPageClick(val);
              }}
            />
          </Center> */}
        </Paper>
      </Stack>


    </>
  );
}