"use client";

import { AdminColor } from "@/app_modules/_global/color/color_pallet";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
import { MODEL_COLLABORATION } from "@/app_modules/colab/model/interface";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { clientLogger } from "@/util/clientLogger";
import {
  Button,
  Grid,
  Group,
  Modal,
  Paper,
  SimpleGrid,
  Stack,
  Text,
  Textarea,
} from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { IconCheck, IconFlag2Off } from "@tabler/icons-react";
import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
import { Admin_ComponentBoxStyle } from "../../_admin_global/_component/comp_admin_boxstyle";
import Admin_ComponentBackButton from "../../_admin_global/back_button";
import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
import adminColab_funReportProjectById from "../fun/edit/fun_report_project_by_id";
import { apiGetAdminCollaborationById } from "../lib/api_fetch_admin_collaboration";
import { Admin_V3_ComponentSkeletonBreakpoint } from "../../_components_v3/comp_skeleton_breakpoint";
import { Admin_V3_ComponentBreakpoint } from "../../_components_v3/comp_simple_grid_breakpoint";
import { Admin_V3_ComponentDetail } from "../../_components_v3/comp_detail_data";
import { Comp_V3_SetInnerHTMLWithStiker } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";

function DetailPublish() {
  const router = useRouter();
  const params = useParams<{ id: string }>();
  const [data, setData] = useState<MODEL_COLLABORATION | null>(null);
  const [loading, setLoading] = useState(false);
  const [openReject, setOpenReject] = useState(false);
  const [report, setReport] = useState("");

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

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

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

  async function onReject() {
    try {
      setLoading(true);
      const response = await adminColab_funReportProjectById({
        colabId: params.id,
        report: report,
      });

      if (response.status == 200) {
        setLoading(false);
        router.back();
      }
    } catch (error) {
      setLoading(false);
      ComponentGlobal_NotifikasiPeringatan("Gagal Load");
      clientLogger.error("Invalid report collaboration", error);
    }
  }

  const listData = [
    {
      label: "Username",
      value: data?.Author.username,
    },
    {
      label: "Judul",
      value: data?.title,
    },
    {
      label: "Industri",
      value: data?.ProjectCollaborationMaster_Industri.name,
    },
    {
      label: "Jumlah Partisipan",
      value: data?.ProjectCollaboration_Partisipasi.length,
    },
    {
      label: "Lokasi",
      value: data?.lokasi,
    },
    {
      label: "Tujuan",
      value: <Comp_V3_SetInnerHTMLWithStiker props={data?.purpose} />,
    },
    {
      label: "Keuntungan",
      value: <Comp_V3_SetInnerHTMLWithStiker props={data?.benefit} />,
    },
  ];

  return (
    <>
      <Stack>
        <ComponentAdminGlobal_HeaderTamplate name={`Detail publish`} />
        <Admin_ComponentBackButton />

        {!data ? (
          <Admin_V3_ComponentSkeletonBreakpoint />
        ) : (
          <Admin_V3_ComponentBreakpoint>
            <Admin_ComponentBoxStyle>
              <Stack>
                {listData.map((e, i) => (
                  <Admin_V3_ComponentDetail key={i} item={e} />
                ))}

                <Group position="center">
                  <Button
                    mt={"xl"}
                    radius={"xl"}
                    bg={"red"}
                    color="red"
                    onClick={() => {
                      setOpenReject(true);
                    }}
                    leftIcon={<IconFlag2Off size={20} color="white" />}
                  >
                    Reject
                  </Button>
                </Group>
              </Stack>
            </Admin_ComponentBoxStyle>
          </Admin_V3_ComponentBreakpoint>
        )}
      </Stack>

      {/* Reject Project */}
      <Modal
        styles={{ body: { backgroundColor: AdminColor.softBlue } }}
        opened={openReject}
        onClose={() => setOpenReject(false)}
        centered
        withCloseButton={false}
        size={"md"}
      >
        <Paper bg={AdminColor.softBlue} p={"md"}>
          <Stack>
            <Text c={AdminColor.white}>
              Apakah anda yakin ingin mereport project{" "}
              <Text c={AdminColor.white} span inherit fw={"bold"}>
                {data?.title}
              </Text>
              ?
            </Text>{" "}
            <Textarea
              minRows={3}
              maxRows={5}
              placeholder="Ketik alasan report.."
              onChange={(val) => setReport(val.currentTarget.value)}
            />
            <Group position="right">
              <Button
                loading={loading}
                loaderPosition="center"
                leftIcon={<IconCheck />}
                radius={"xl"}
                onClick={() => {
                  onReject();
                }}
              >
                Simpan
              </Button>
            </Group>
          </Stack>
        </Paper>
      </Modal>
    </>
  );
}

export default DetailPublish;
