"use client";

import { API_RouteEvent } from "@/app/lib/api_user_router/route_api_event";
import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
import { MainColor } from "@/app_modules/_global/color";
import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
import {
  ComponentGlobal_NotifikasiBerhasil,
  ComponentGlobal_NotifikasiGagal,
} from "@/app_modules/_global/notif_global";
import { UIGlobal_LayoutDefault } from "@/app_modules/_global/ui";
import { Button, Center, Group, Skeleton, Stack, Text } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useAtom } from "jotai";
import moment from "moment";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { event_funUpdateKehadiran } from "../fun";
import { Event_funJoinAndConfirmEvent } from "../fun/create/fun_join_and_confirm";
import { gs_event_hotMenu } from "../global_state";
import { MODEL_EVENT } from "../model/interface";
import { Event_funJoinEvent } from "../fun/create/fun_join_event";
import "moment/locale/id";

export default function Ui_Konfirmasi({
  userLoginId,
  eventId,
}: {
  userLoginId: string;
  eventId: string;
}) {
  //   console.log(dataEvent);

  const router = useRouter();
  const [data, setData] = useState<MODEL_EVENT | null>(null);
  const [isJoin, setIsJoin] = useState<boolean | null>(null);
  const [isPresent, setIsPresent] = useState<boolean | null>(null);

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

  async function onLoadData() {
    const data = await fetch(
      API_RouteEvent.get_one_by_id({ eventId: eventId })
    );
    const res = await data.json();
    setData(res.data);
  }

  //  CEK PESERTA
  useShallowEffect(() => {
    onCheckPeserta();
  }, []);

  async function onCheckPeserta() {
    const res = await fetch(
      API_RouteEvent.check_peserta({ eventId: eventId, userId: userLoginId })
    );
    const data = await res.json();
    setIsJoin(data);
  }

  // =========== CEK KEHADIRAN ===========//
  useShallowEffect(() => {
    onLoadKehadiran();
  }, []);

  async function onLoadKehadiran() {
    const res = await fetch(
      API_RouteEvent.check_kehadiran({ eventId: eventId, userId: userLoginId })
    );
    const data = await res.json();
    setIsPresent(data);
  }
  // =========== CEK KEHADIRAN ===========//

  // Jika data kosong
  if (data == null && isPresent == null) {
    return <SkeletonIsDataNull />;
  }

  // Jika data tidak ada
  if (data == null) {
    return (
      <>
        <DataNotFound />
      </>
    );
  }

  // Jika tanggal acara sudah lewat
  if (moment(data?.tanggalSelesai).diff(moment(), "minute") < 0) {
    return (
      <>
        <EventAlreadyDone title={data?.title} eventId={eventId} />
      </>
    );
  }

  // Jika join true
  if (isJoin == true && moment(data?.tanggal).diff(moment(), "minute") > 0) {
    return (
      <>
        <UserJoinTrue title={data?.title} tanggal={data?.tanggal} />
      </>
    );
  }

  // Jika belum join dan tanggal mulai acara belum lewat
  if (isJoin == false && moment(data?.tanggal).diff(moment(), "minute") > 0) {
    return (
      <>
        <UserAllowToJoin
          title={data?.title}
          tanggal={data?.tanggal}
          lokasi={data.lokasi}
          eventId={eventId}
          userLoginId={userLoginId}
        />
      </>
    );
  }

  // Jika belum join dan tanggal mulai acara sudah lewat
  if (isJoin == false && moment(data?.tanggal).diff(moment(), "minute") < 0) {
    return (
      <>
        <UserNotJoinAndEventReady
          title={data?.title}
          eventId={eventId}
          userLoginId={userLoginId}
        />
      </>
    );
  }

  if (isPresent == false && data) {
    return (
      <UserNotConfirm
        title={data.title}
        eventId={eventId}
        userLoginId={userLoginId}
      />
    );
  }

  // Jika sudah join, sudah konfirmasi dan tanggal mulai acara sudah lewat
  // if (isPresent && moment(data?.tanggal).diff(moment(), "minute") < 0)
  if (
    isPresent &&
    isJoin &&
    moment(data?.tanggal).diff(moment(), "minute") < 0
  ) {
    return <UserAlreadyConfirm title={data.title} />;
  }
}

function DataNotFound() {
  const router = useRouter();
  const [isLoading, setLoading] = useState(false);
  const [hotMenu, setHotMenu] = useAtom(gs_event_hotMenu);

  return (
    <>
      <UIGlobal_LayoutDefault>
        <Stack h={"100vh"} justify="center">
          <ComponentGlobal_CardStyles>
            <Stack>
              <Text fw={"bold"} align="center">
                Data Event Tidak Ditemukan
              </Text>

              <Button
                loading={isLoading}
                loaderPosition="center"
                radius={"xl"}
                color="green"
                c={"black"}
                onClick={() => {
                  setHotMenu(0);
                  setLoading(true);
                  router.push(RouterEvent.beranda, { scroll: false });
                }}
              >
                Kembali Ke Beranda
              </Button>
            </Stack>
          </ComponentGlobal_CardStyles>
        </Stack>
      </UIGlobal_LayoutDefault>
    </>
  );
}

function SkeletonIsDataNull() {
  return (
    <>
      <UIGlobal_LayoutDefault>
        <Stack h={"100vh"} justify="center">
          <ComponentGlobal_CardStyles>
            <Stack>
              <Skeleton height={20} width={"100%"} radius={"xl"} />{" "}
              <Skeleton height={20} width={"100%"} radius={"xl"} />{" "}
              <Skeleton height={20} width={"100%"} radius={"xl"} />
              <Center>
                <Skeleton height={40} width={"40%"} radius={"sm"} />
              </Center>
            </Stack>
          </ComponentGlobal_CardStyles>
        </Stack>
      </UIGlobal_LayoutDefault>
    </>
  );
}

function UserJoinTrue({ title, tanggal }: { title: string; tanggal: Date }) {
  const router = useRouter();
  const [isLoading, setLoading] = useState(false);
  const [hotMenu, setHotMenu] = useAtom(gs_event_hotMenu);

  return (
    <>
      <UIGlobal_LayoutDefault>
        <Stack h={"100vh"} justify="center">
          <ComponentGlobal_CardStyles>
            <Stack align="center" justify="center">
              <Text align="center">
                Terima kasih, Bapak/Ibu, Anda telah berhasil bergabung dalam
                acara{" "}
                <Text inherit span fw={"bold"}>
                  {title}
                </Text>{" "}
                . Mohon ditunggu hingga tanggal{" "}
                <Text inherit span fw={"bold"}>
                  {moment(tanggal).format("DD-MM-YYYY")}
                </Text>{" "}
                untuk melakukan konfirmasi kehadiran melalui aplikasi HIPMI APP.
              </Text>

              <Button
                loading={isLoading}
                loaderPosition="center"
                radius={"xl"}
                color="green"
                c={"black"}
                onClick={() => {
                  setHotMenu(0);
                  setLoading(true);
                  router.push(RouterEvent.beranda, { scroll: false });
                }}
              >
                Beranda
              </Button>
            </Stack>
          </ComponentGlobal_CardStyles>
        </Stack>
      </UIGlobal_LayoutDefault>
    </>
  );
}

function UserAllowToJoin({
  title,
  tanggal,
  lokasi,
  eventId,
  userLoginId,
}: {
  title: string;
  tanggal: Date;
  lokasi: string;
  eventId: string;
  userLoginId: string;
}) {
  const router = useRouter();
  const [isLoading, setLoading] = useState(false);

  async function onJoinEvent() {
    setLoading(true);

    const data = {
      userId: userLoginId,
      eventId: eventId,
    };

    const res = await Event_funJoinEvent(data as any);
    if (res.status === 200) {
      ComponentGlobal_NotifikasiBerhasil(res.message, 2000);
      router.push(RouterEvent.detail_main + eventId);
    } else {
      setLoading(false);
      ComponentGlobal_NotifikasiGagal(res.message);
    }
  }

  return (
    <>
      <UIGlobal_LayoutDefault>
        <Stack h={"100vh"} justify="center">
          <ComponentGlobal_CardStyles>
            <Stack align="center" justify="center">
              <Text align="center">
                Halo, Bapak/Ibu. Kami dengan senang hati mengundang Anda untuk
                bergabung dalam acara
                <Text inherit span fw={"bold"}>
                  {title}
                </Text>{" "}
                yang akan diselenggarakan pada{" "}
                <Text inherit span fw={"bold"}>
                  {moment(tanggal).format("LL")}
                </Text>{" "}
                pukul
                <Text inherit span fw={"bold"}>
                  {moment(tanggal).format("LT")}
                </Text>{" "}
                di
                <Text inherit span fw={"bold"}>
                  {lokasi}
                </Text>{" "}
                . Pastikan Anda sudah melakukan registrasi melalui aplikasi
                [Nama Aplikasi] agar dapat berpartisipasi. Kami sangat
                menantikan kehadiran Anda. Sampai jumpa di acara ini.
              </Text>

              <Button
                loading={isLoading}
                loaderPosition="center"
                radius={"xs"}
                bg={MainColor.yellow}
                color="yellow"
                c={"black"}
                onClick={() => {
                  onJoinEvent();
                }}
              >
                Join Event
              </Button>
            </Stack>
          </ComponentGlobal_CardStyles>
        </Stack>
      </UIGlobal_LayoutDefault>
    </>
  );
}

function UserNotJoinAndEventReady({
  title,
  eventId,
  userLoginId,
}: {
  title: string;
  eventId: string;
  userLoginId: string;
}) {
  const router = useRouter();
  const [isLoading, setLoading] = useState(false);
  async function onJoinAndKonfirmasi() {
    setLoading(true);

    const body = {
      eventId: eventId,
      userId: userLoginId,
    };

    const res = await Event_funJoinAndConfirmEvent(body as any);

    if (res.status === 200) {
      ComponentGlobal_NotifikasiBerhasil(res.message, 2000);
      router.push(RouterEvent.detail_main + eventId);
    } else {
      setLoading(false);
      ComponentGlobal_NotifikasiGagal(res.message);
    }
  }
  return (
    <>
      <UIGlobal_LayoutDefault>
        <Stack h={"100vh"} justify="center">
          <ComponentGlobal_CardStyles>
            <Stack align="center" justify="center">
              <Text align="center">
                Halo, Bapak/Ibu. Kami mencatat bahwa Anda belum melakukan
                registrasi melalui aplikasi untuk mengikuti acara{" "}
                <Text inherit span fw={"bold"}>
                  {title}.
                </Text>{" "}
                Mohon segera lakukan registrasi melalui Event App agar dapat
                mengikuti acara ini. Jika membutuhkan bantuan, jangan ragu untuk
                menghubungi tim kami. Terima kasih Terima kasih atas kehadiran
                Anda di acara pada hari ini. Mohon untuk mengonfirmasi kehadiran
                Anda dengan menekan tombol {"Join & Konfirmasi"}
                atau fitur konfirmasi yang tersedia di bawah. Terima kasih dan
                selamat menikmati acara.
              </Text>

              <Button
                loading={isLoading}
                loaderPosition="center"
                radius={"xs"}
                bg={MainColor.yellow}
                color="yellow"
                c={"black"}
                onClick={() => {
                  onJoinAndKonfirmasi();
                }}
              >
                Join & Konfirmasi
              </Button>
            </Stack>
          </ComponentGlobal_CardStyles>
        </Stack>
      </UIGlobal_LayoutDefault>
    </>
  );
}

function EventAlreadyDone({
  title,
  eventId,
}: {
  title: string;
  eventId: string;
}) {
  const router = useRouter();
  const [isLoading, setLoading] = useState(false);
  const [isLoadingDetail, setLoadingDetail] = useState(false);
  const [hotMenu, setHotMenu] = useAtom(gs_event_hotMenu);

  return (
    <>
      <UIGlobal_LayoutDefault>
        <Stack h={"100vh"} justify="center">
          <ComponentGlobal_CardStyles>
            <Stack align="center" justify="center">
              <Text align="center">
                Kami mohon maaf, Bapak/Ibu, acara{" "}
                <Text inherit span fw={"bold"}>
                  {title}
                </Text>{" "}
                telah selesai, sehingga konfirmasi kehadiran sudah tidak dapat
                dilakukan. Terima kasih atas perhatian dan minat Anda. Kami
                berharap dapat bertemu di acara kami berikutnya. Terima kasih,
                Bapak/Ibu, kehadiran Anda di acara.
              </Text>
            </Stack>
            <Group grow mt={"lg"}>
              <Button
                loading={isLoading}
                loaderPosition="center"
                radius={"xl"}
                color="green"
                c={"black"}
                onClick={() => {
                  setHotMenu(0);
                  setLoading(true);
                  router.push(RouterEvent.beranda, { scroll: false });
                }}
              >
                Beranda
              </Button>

              <Button
                loading={isLoadingDetail}
                loaderPosition="center"
                radius={"xl"}
                c={"black"}
                onClick={() => {
                  setHotMenu(3);
                  setLoadingDetail(true);
                  router.push(RouterEvent.detail_riwayat + eventId, {
                    scroll: false,
                  });
                }}
              >
                Riwayat Event
              </Button>
            </Group>
          </ComponentGlobal_CardStyles>
        </Stack>
      </UIGlobal_LayoutDefault>
    </>
  );
}

function UserNotConfirm({
  title,
  eventId,
  userLoginId,
}: {
  title: string;
  eventId: string;
  userLoginId: string;
}) {
  const router = useRouter();
  const [isLoading, setLoading] = useState(false);
  async function onUpdateKonfirmasi() {
    setLoading(true);
    const res = await event_funUpdateKehadiran({
      eventId: eventId,
      userId: userLoginId,
    });

    if (res.status === 200) {
      ComponentGlobal_NotifikasiBerhasil(res.message, 2000);
      router.push(RouterEvent.detail_main + eventId);
    } else {
      setLoading(false);
      ComponentGlobal_NotifikasiGagal(res.message);
    }
  }
  return (
    <>
      <UIGlobal_LayoutDefault>
        <Stack h={"100vh"} justify="center">
          <ComponentGlobal_CardStyles>
            <Stack align="center" justify="center">
              <Text align="center">
                Terima kasih atas kehadiran Anda di acara{" "}
                <Text inherit span fw={"bold"}>
                  {title}
                </Text>{" "}
                pada hari ini. Mohon untuk mengonfirmasi kehadiran Anda dengan
                menekan tombol{" "}
                <Text inherit span fw={"bold"}>
                  Konfirmasi Kehadiran
                </Text>{" "}
                atau fitur konfirmasi yang tersedia di bawah. Terima kasih dan
                selamat menikmati acara.
              </Text>

              <Button
                loading={isLoading}
                loaderPosition="center"
                radius={"xs"}
                bg={MainColor.yellow}
                color="yellow"
                c={"black"}
                onClick={() => {
                  onUpdateKonfirmasi();
                }}
              >
                Konfirmasi Kehadiran
              </Button>
            </Stack>
          </ComponentGlobal_CardStyles>
        </Stack>
      </UIGlobal_LayoutDefault>
    </>
  );
}

function UserAlreadyConfirm({ title }: { title: string }) {
  const router = useRouter();
  const [isLoading, setLoading] = useState(false);
  const [hotMenu, setHotMenu] = useAtom(gs_event_hotMenu);

  return (
    <>
      <UIGlobal_LayoutDefault>
        <Stack h={"100vh"} justify="center">
          <ComponentGlobal_CardStyles>
            <Stack align="center" justify="center">
              <Text align="center">
                Terima kasih, Bapak/Ibu, kehadiran Anda di acara{" "}
                <Text inherit span fw={"bold"}>
                  {title}
                </Text>{" "}
                telah berhasil dikonfirmasi. Kami senang menyambut Anda dan
                semoga acara ini memberikan manfaat yang maksimal. Selamat
                mengikuti kegiatan.
              </Text>

              <Button
                loading={isLoading}
                loaderPosition="center"
                radius={"xl"}
                color="green"
                c={"black"}
                onClick={() => {
                  setHotMenu(0);
                  setLoading(true);
                  router.push(RouterEvent.beranda, { scroll: false });
                }}
              >
                Beranda
              </Button>
            </Stack>
          </ComponentGlobal_CardStyles>
        </Stack>
      </UIGlobal_LayoutDefault>
    </>
  );
}