import {
  ActionIcon,
  Badge,
  Box,
  Button,
  Image,
  Text,
  Tooltip,
} from "@mantine/core";
import { upperFirst, useDisclosure } from "@mantine/hooks";
import moment from "moment";
import { useEffect, useState } from "react";
import { Socket } from "socket.io-client";
import { getImagesWorking, updateBid } from "../../apis/bid";
import { useStatusToolStore } from "../../lib/zustand/use-status-tool-store";
import { IBid, IWebBid } from "../../system/type";
import {
  cn,
  extractDomainSmart,
  findNearestClosingChild,
  getEarlyTrackingSeconds,
  getMode,
  isTimeReached,
  stringToColor,
  subtractSeconds,
} from "../../utils";
import ShowImageModal from "./show-image-modal";
import {
  IconExternalLink,
  IconImageInPicture,
  IconLivePhoto,
  IconTestPipe,
} from "@tabler/icons-react";
import { useConfirmStore } from "../../lib/zustand/use-confirm";
export interface IWorkingPageProps {
  data: (IBid | IWebBid) & { type: string };
  socket: Socket;
}

export default function WorkingPage({ data, socket }: IWorkingPageProps) {
  const fallbackSrc =
    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRGh5WFH8TOIfRKxUrIgJZoDCs1yvQ4hIcppw&s";

  const [opened, { open, close }] = useDisclosure(false);

  const [imageSrc, setImageSrc] = useState<string | null>(null);

  const [lastUpdate, setLastUpdate] = useState<Date | null>(null);

  const [payloadLoginStatus, setPayloadLoginStatus] = useState<{
    data: IWebBid;
    login_status: boolean;
  } | null>(null);

  const { statusTool } = useStatusToolStore();

  const { setConfirm } = useConfirmStore();

  function isIBid(obj: IBid | IWebBid): obj is IBid {
    return "name" in obj;
  }

  const renderUrl = (
    { type, id }: (IBid | IWebBid) & { type: string },
    name: string
  ) => {
    return `${import.meta.env.VITE_BASE_URL}bids/status-working/${type
      .replace("_", "-")
      .toLowerCase()}/${id}/${name}`;
  };

  const extractTime = (filename: string) => {
    return Number(filename.split("-")[0]) || 0;
  };

  const statusLabel = () => {
    if (
      statusTool &&
      statusTool === "online" &&
      payloadLoginStatus?.login_status
    ) {
      return "logined";
    }
    return !statusTool || statusTool !== "online" ? "Unknown" : "logout";
  };

  const handleToogleMode = async () => {
    if (!isIBid(data)) return;

    setConfirm({
      title: "Confirm changing this product's mode?",
      okButton: {
        value: "Sure",
        color: "blue",
      },
      handleOk: async () => {
        const metadata = data.metadata;

        const modeKey = metadata.find((item) => item.key_name === "mode_key");

        if (modeKey && modeKey.value) {
          if (String(modeKey.value) === "live") {
            modeKey.value = "sandbox";
          } else {
            modeKey.value = "live";
          }
        }

        await updateBid({ ...data, metadata });
      },
    });
  };

  useEffect(() => {
    const updateImage = ({
      type,
      id,
      filename,
    }: {
      type: string;
      filename: string;
      id: IBid["id"];
    }) => {
      if (type == data.type && id == data.id) {
        setLastUpdate(new Date(extractTime(filename)));
        setImageSrc(renderUrl(data, filename));
      }
    };

    socket.on("working", updateImage);

    return () => {
      socket.off("working", updateImage);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [socket, data.id, data.type]);

  useEffect(() => {
    const onLoginStatus = (data: { data: IWebBid; login_status: boolean }) => {
      setPayloadLoginStatus(data);
    };

    const origin_url = isIBid(data) ? data.web_bid.origin_url : data.origin_url;

    socket.on(`login-status.${origin_url}`, onLoginStatus);

    return () => {
      socket.off(`login-status.${origin_url}`, onLoginStatus);
    };
  }, [data, socket]);

  useEffect(() => {
    (async () => {
      const result = await getImagesWorking(data);

      if (!result || !result.data) return;

      const filename = result.data[0];

      setImageSrc(renderUrl(data, filename));
      setLastUpdate(new Date(extractTime(filename)));
    })();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <>
      <Box
        className={cn("rounded-md overflow-hidden relative shadow-lg", {
          ["border border-green-800"]: payloadLoginStatus?.login_status,
          ["border border-red-800"]: !payloadLoginStatus?.login_status,
        })}
      >
        <Image
          radius="md"
          h={300}
          style={{
            objectFit: "cover",
          }}
          fallbackSrc={fallbackSrc}
          src={imageSrc}
        />

        <Box className="absolute bg-black/60 inset-0 flex items-center justify-center text-white font-bold flex-col gap-2 p-4 rounded-lg transition duration-300 hover:bg-opacity-70">
          <Text className="text-lg tracking-wide text-center font-bold">
            {isIBid(data) ? data.name : "Tracking page"}
          </Text>
          {isIBid(data) && (
            <Text className="text-xs tracking-wide">{`Max price: $${data.max_price}`}</Text>
          )}
          {isIBid(data) && (
            <Text className="text-xs tracking-wide">{`Current price: $${data.current_price}`}</Text>
          )}

          <Text className="text-sm italic opacity-80">
            {moment(lastUpdate).format("HH:mm:ss DD/MM/YYYY")}
          </Text>

          {!isIBid(data) && (
            <Tooltip label={"Time to tracking"}>
              <Text>{`TT: ${moment(
                subtractSeconds(
                  findNearestClosingChild(data)?.close_time || "",
                  data.early_tracking_seconds
                )
              ).format("HH:mm:ss DD/MM/YYYY")}`}</Text>
            </Tooltip>
          )}

          <Box className="flex items-center gap-3">
            {isIBid(data) && (
              <Tooltip label={"Close time"}>
                <Text
                  style={{ fontSize: "12px" }}
                  className="tracking-wide"
                >{`CLT: ${moment(data.close_time).format(
                  "HH:mm:ss DD/MM/YYYY"
                )}`}</Text>
              </Tooltip>
            )}
            {isIBid(data) &&
              data.close_time &&
              !isTimeReached(
                subtractSeconds(
                  data.close_time,
                  getEarlyTrackingSeconds(data) || 0
                )
              ) && (
                <Tooltip label={"Time to tracking"}>
                  <Text
                    style={{ fontSize: "12px" }}
                    className="tracking-wide"
                  >{`TT: ${moment(
                    subtractSeconds(
                      data.close_time,
                      getEarlyTrackingSeconds(data) || 0
                    )
                  ).format("HH:mm:ss DD/MM/YYYY")}`}</Text>
                </Tooltip>
              )}
          </Box>
          <Box className="flex items-center gap-4">
            <Button
              rightSection={<IconImageInPicture size={14} />}
              size="xs"
              color="green"
              onClick={open}
              className="bg-white text-black px-4 py-2 rounded-md shadow-md hover:bg-gray-200 transition"
            >
              Show
            </Button>
            <Button
              rightSection={<IconExternalLink size={14} />}
              target="_blank"
              component="a"
              size="xs"
              href={data.url || "/"}
              className="bg-white text-black px-4 py-2 rounded-md shadow-md hover:bg-gray-200 transition"
            >
              Link
            </Button>
          </Box>
        </Box>

        <Box className="absolute top-0 left-0 py-2  px-4 flex items-center gap-2 justify-between w-full">
          <Box className="flex justify-between w-full">
            <Box className="flex items-center gap-2">
              <Badge
                color={payloadLoginStatus?.login_status ? "green" : "red"}
                size="xs"
              >
                {statusLabel()}
              </Badge>

              <Badge
                color={stringToColor(
                  isIBid(data)
                    ? extractDomainSmart(data.web_bid.origin_url)
                    : extractDomainSmart(data.origin_url)
                )}
                size="xs"
              >
                {isIBid(data)
                  ? extractDomainSmart(data.web_bid.origin_url)
                  : extractDomainSmart(data.origin_url)}
              </Badge>
            </Box>
            {isIBid(data) && (
              <Tooltip label={upperFirst(getMode(data))}>
                <ActionIcon
                  onClick={handleToogleMode}
                  color={getMode(data) === "live" ? "teal" : "orange"}
                  size="xs"
                >
                  {getMode(data) === "live" ? (
                    <IconLivePhoto size={14} />
                  ) : (
                    <IconTestPipe size={14} />
                  )}
                </ActionIcon>
              </Tooltip>
            )}
          </Box>

          {isIBid(data) && moment(data.close_time).isSame(moment(), "day") && (
            <div className="w-[14px] h-[14px] rounded-full bg-green-600 animate-pulse"></div>
          )}
        </Box>
      </Box>

      <ShowImageModal
        src={imageSrc || fallbackSrc}
        fallbackSrc={fallbackSrc}
        opened={opened}
        onClose={close}
      />
    </>
  );
}
