import {
  Box,
  Button,
  Card,
  CardBody,
  CardFooter,
  Container,
  Flex,
  Heading,
  Link,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  Stack,
  StackDivider,
  Text,
  useDisclosure,
  useToast,
  VStack,
} from "@chakra-ui/react";
import { useLoaderData } from "@remix-run/react";
import { useState } from "react";
import stylesheet from "../styles/events-team.css";
import { type LinksFunction } from "@remix-run/cloudflare";

export const links: LinksFunction = () => {
  return [{ href: stylesheet, rel: "stylesheet" }];
};

export async function loader({ context }: { context: RequestContext }) {
  if (!context.data.current_user)
    throw new Response(null, {
      status: 401,
    });

  if (
    ![1 << 3, 1 << 4, 1 << 12].find(
      (p) => context.data.current_user.permissions & p,
    )
  )
    throw new Response(null, {
      status: 403,
    });

  const now = new Date();
  const monthEventList = await context.env.D1.prepare(
    "SELECT answer, approved, created_by, day, details, id, month, pending, performed_at, reached_minimum_player_count, type, year FROM events WHERE month = ? AND year = ? AND (day >= ? OR pending = 1) ORDER BY day ASC;",
  )
    .bind(now.getUTCMonth() + 1, now.getUTCFullYear(), now.getUTCDate())
    .all();

  if (monthEventList.error)
    throw new Response(null, {
      status: 500,
    });

  const membersList = await context.env.D1.prepare(
    "SELECT id, name FROM et_members WHERE id IN (SELECT created_by FROM events WHERE month = ? AND year = ?);",
  )
    .bind(now.getUTCMonth() + 1, now.getUTCFullYear())
    .all();

  if (membersList.error)
    throw new Response(null, {
      status: 500,
    });

  return {
    can_approve: Boolean(
      [1 << 4, 1 << 12].find((p) => context.data.current_user.permissions & p),
    ),
    events: monthEventList.results,
    members: membersList.results as { id: string; name: string }[],
  };
}

export default function () {
  const {
    can_approve,
    events,
    members,
  }: {
    can_approve: boolean;
    events: { [k: string]: any }[];
    members: { id: string; name: string }[];
  } = useLoaderData<typeof loader>();
  const [eventData, setEventData] = useState(events);
  const { isOpen, onClose, onOpen } = useDisclosure();
  const {
    isOpen: isCompleteOpen,
    onClose: closeComplete,
    onOpen: openComplete,
  } = useDisclosure();
  const {
    isOpen: isAnsweredOpen,
    onClose: closeAnswered,
    onOpen: openAnswered,
  } = useDisclosure();
  const toast = useToast();
  const [selectedEvent, setSelectedEvent] = useState("");

  async function decide(approved: boolean, eventId: string) {
    const decisionResp = await fetch(
      `/api/events-team/events/${eventId}/decision`,
      {
        body: JSON.stringify({ approved }),
        headers: {
          "content-type": "application/json",
        },
        method: "POST",
      },
    );

    if (!decisionResp.ok) {
      let errorMsg = "Unknown error";

      try {
        errorMsg = ((await decisionResp.json()) as { error: string }).error;
      } catch {}

      toast({
        description: errorMsg,
        status: "error",
        title: "Oops!",
      });

      return;
    }

    toast({
      description: `Event ${approved ? "approved" : "rejected"}`,
      status: "success",
      title: "Success",
    });

    const newEventData = eventData;
    const eventIdx = eventData.findIndex((e) => e.id === eventId);

    newEventData[eventIdx].approved = approved;
    newEventData[eventIdx].pending = false;

    setEventData([...newEventData]);
  }

  async function certify(eventId: string) {
    const certifyResp = await fetch(
      `/api/events-team/events/${eventId}/certify`,
      {
        body: "{}",
        headers: {
          "content-type": "application/json",
        },
        method: "POST",
      },
    );

    if (!certifyResp.ok) {
      let errorMsg = "Unknown error";

      try {
        errorMsg = ((await certifyResp.json()) as { error: string }).error;
      } catch {}

      toast({
        description: errorMsg,
        status: "error",
        title: "Failed to certify game night",
      });

      return;
    }

    toast({
      description: "Game night certified",
      status: "success",
      title: "Success",
    });

    const newEventData = eventData;
    newEventData[
      eventData.findIndex((e) => e.id === eventId)
    ].reached_minimum_player_count = true;

    setEventData([...newEventData]);
    setSelectedEvent("");
  }

  async function markAnswered(eventId: string) {
    const answerResp = await fetch(`/api/events-team/events/${eventId}/solve`, {
      body: "{}",
      headers: {
        "content-type": "application/json",
      },
      method: "POST",
    });

    closeAnswered();

    if (!answerResp.ok) {
      toast({
        description: "Failed to mark as solved",
        status: "error",
        title: "Oops",
      });

      return;
    }

    const newEventData = eventData;
    newEventData[eventData.findIndex((e) => e.id === eventId)].answered_at =
      Date.now();

    setEventData([...newEventData]);
    setSelectedEvent("");
  }

  async function markComplete(eventId: string) {
    const completeResp = await fetch(
      `/api/events-team/events/${eventId}/complete`,
      {
        body: "{}",
        headers: {
          "content-type": "application/json",
        },
        method: "POST",
      },
    );

    closeComplete();

    if (!completeResp.ok) {
      let msg = "Unknown error";

      try {
        msg = ((await completeResp.json()) as { error: string }).error;
      } catch {}

      toast({
        description: msg,
        status: "error",
        title: "Failed to complete",
      });

      return;
    }

    toast({
      description: "Event marked as completed",
      status: "success",
      title: "Success",
    });

    const newEventData = eventData;

    // Technically this won't be the same as the time in the db, but that doesn't matter since this is just to hide the button
    newEventData[eventData.findIndex((e) => e.id === eventId)].performed_at =
      Date.now();

    setEventData([...newEventData]);
    setSelectedEvent("");
  }

  return (
    <Container maxW="container.lg">
      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Certify Game Night</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            <Text>
              By certifying this game night, you confirm that the minimum number
              of players was met and you were provided proof.
            </Text>
          </ModalBody>
          <ModalFooter>
            <Button colorScheme="red" onClick={onClose}>
              Cancel
            </Button>
            <Button
              colorScheme="blue"
              ml="8px"
              onClick={async () => {
                await certify(selectedEvent);
                onClose();
              }}
            >
              Certify
            </Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
      <Modal isOpen={isCompleteOpen} onClose={closeComplete}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Mark as Completed</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            <Text>
              By marking this event as completed, you confirm that the event
              creator has performed this event
            </Text>
          </ModalBody>
          <ModalFooter>
            <Button onClick={closeComplete}>Cancel</Button>
            <Button
              colorScheme="blue"
              ml="8px"
              onClick={async () => await markComplete(selectedEvent)}
            >
              Mark as Complete
            </Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
      <Modal isOpen={isAnsweredOpen} onClose={closeAnswered}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Mark as Solved</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            <Text>Are you sure you want to mark this riddle as solved?</Text>
          </ModalBody>
          <ModalFooter>
            <Button onClick={closeAnswered}>Cancel</Button>
            <Button
              colorScheme="blue"
              ml="8px"
              onClick={async () => await markAnswered(selectedEvent)}
            >
              Mark Answered
            </Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
      <VStack spacing="8">
        {eventData.map((event) => {
          const eventCreatorName = members.find(
            (member) => member.id === event.created_by,
          )?.name;

          const eventColors: { [k: string]: string } = {
            fotd: "cyan",
            gamenight: "blue",
            rotw: "magenta",
            qotd: "#9900FF",
          };

          return (
            <Card w="100%">
              <CardBody>
                <Stack divider={<StackDivider />} spacing="4">
                  <Box>
                    <Heading size="sm">Date</Heading>
                    <Text fontSize="sm" pt="2">
                      {event.year}-{event.month}-{event.day}
                    </Text>
                  </Box>
                  <Box>
                    <Heading size="sm">Event Type</Heading>
                    <Text fontSize="sm" pt="2">
                      {event.type.toUpperCase()}
                    </Text>
                  </Box>
                  <Box>
                    <Heading size="sm">Event Details</Heading>
                    <Text fontSize="sm" pt="2">
                      {event.details}
                    </Text>
                  </Box>
                  {event.type === "rotw" ? (
                    <Box>
                      <Heading size="sm">Riddle Answer</Heading>
                      <Text fontSize="sm" pt="2">
                        {event.answer}
                      </Text>
                    </Box>
                  ) : null}
                  <Box>
                    <Heading size="sm">Host</Heading>
                    <Text fontSize="sm" pt="2">
                      {eventCreatorName
                        ? `${eventCreatorName} (${event.created_by})`
                        : event.created_by}
                    </Text>
                  </Box>
                </Stack>
              </CardBody>
              <CardFooter>
                <Flex gap="8px" mr="8px">
                  {can_approve && event.pending ? (
                    <>
                      <Button
                        colorScheme="red"
                        onClick={async () => await decide(false, event.id)}
                      >
                        Reject
                      </Button>
                      <Button
                        colorScheme="blue"
                        onClick={async () => await decide(true, event.id)}
                      >
                        Approve
                      </Button>
                    </>
                  ) : null}
                  {can_approve && !event.pending && !event.performed_at ? (
                    <Button
                      colorScheme="blue"
                      onClick={() => {
                        setSelectedEvent(event.id);
                        openComplete();
                      }}
                    >
                      Mark as Completed
                    </Button>
                  ) : null}
                  {can_approve &&
                  !event.pending &&
                  event.performed_at &&
                  event.type === "rotw" &&
                  !event.answered_at ? (
                    <Button
                      colorScheme="blue"
                      onClick={() => {
                        setSelectedEvent(event.id);
                        openAnswered();
                      }}
                    >
                      Mark as Solved
                    </Button>
                  ) : null}
                  {can_approve &&
                  event.approved &&
                  event.type === "gamenight" &&
                  event.performed_at &&
                  !event.reached_minimum_player_count ? (
                    <Button
                      colorScheme="blue"
                      onClick={() => {
                        setSelectedEvent(event.id);
                        onOpen();
                      }}
                    >
                      Certify Game Night
                    </Button>
                  ) : null}
                </Flex>
                <Text alignSelf="center" fontSize="sm">
                  Status:{" "}
                  {event.pending
                    ? "Pending"
                    : event.approved
                      ? "Approved"
                      : "Denied"}
                </Text>
                <span
                  className="dot"
                  style={{ backgroundColor: eventColors[event.type] }}
                ></span>
              </CardFooter>
            </Card>
          );
        })}
      </VStack>
      <VStack alignItems="start" gap="8px" my="16px">
        <Link color="#646cff" href="/book-event" mt="16px" target="_blank">
          Book an Event
        </Link>
        {can_approve ? (
          <Link color="#646cff" href="/et-members" mb="32px" mt="8px">
            Events Team Member Management
          </Link>
        ) : null}
      </VStack>
    </Container>
  );
}