import { m, Variants } from "framer-motion";
import { useRouter } from "next/router";
import { ReactElement, useEffect, useState } from "react";
import DashLayout from "../../../layouts/DashLayout";
import Image from "next/image";
import Loading from "../../../components/common/Loading";
import { GetServerSideProps } from "next";
import UserJSONEntry from "../../../interfaces/UserJSONEntry";
import APIError from "../../../interfaces/APIError";
import RankChart from "../../../components/userpage/RankChart";
import RankHistoryJSON from "../../../interfaces/ChartRankHistoryJSON";

interface EmoteURLs {
  "7tv": { [key: string]: string };
  bttv: { [key: string]: string };
  ffz: { [key: string]: string };
  twitch: { [key: string]: string };
  [key: string]: { [key: string]: string };
}

interface UserPageProps {
  userData: UserJSONEntry;
  serverError: APIError | null;
}

function UserPage(props: UserPageProps) {
  const [channelEmotes, setChannelEmotes] = useState<{
    [key: string]: { [key: string]: string };
  }>({});
  const [errorCode, setErrorCode] = useState<number | null>(null);
  const router = useRouter();
  const { username } = router.query;
  const [rankHistory, setRankHistory] = useState<RankHistoryJSON>(
    randomRankHistory(props.userData.rank)
  );

  useEffect(() => {
    if (!router.isReady) return;
    // if it is of
    if (props.serverError) {
      setErrorCode(props.serverError.error.code);
    }
    fetch("/api/emotes")
      .then((res) => res.json())
      .then((data) => {
        // if error, return
        if (data.error) {
          setErrorCode(data.error.code);
          return;
        }
        // construct js object with emote names as keys and emote urls for each provider
        // 7tv
        let emotes: EmoteURLs = { "7tv": {}, bttv: {}, ffz: {}, twitch: {} };
        data["7tv"].channel.forEach((emote: any) => {
          let base_url = emote.data.host.url;
          // get the largest emote size, append it to the base url
          let largest = emote.data.host.files[emote.data.host.files.length - 1];
          // if null return
          if (!largest) {
            return false;
          }
          emotes["7tv"][emote.data.name] = `https:${base_url}/${largest.name}`;
        });
        // same for global emotes
        data["7tv"].global.forEach((emote: any) => {
          let base_url = emote.data.host.url;
          let largest = emote.data.host.files[emote.data.host.files.length - 1];
          emotes["7tv"][emote.data.name] = `https:${base_url}/${largest.name}`;
        });
        // bttv
        data["bttv"].channel.forEach((emote: any) => {
          emotes["bttv"][
            emote.code
          ] = `https://cdn.betterttv.net/emote/${emote.id}/3x`;
        });
        data["bttv"].global.forEach((emote: any) => {
          emotes["bttv"][
            emote.code
          ] = `https://cdn.betterttv.net/emote/${emote.id}/3x`;
        });
        // ffz
        data["ffz"].channel.forEach((emote: any) => {
          // ffz emotes don't have all sizes available, so we need to get the largest one by taking the largest key in the urls object
          emotes["ffz"][emote.name] = `${
            emote.urls[
              Math.max(...Object.keys(emote.urls).map((k) => parseInt(k)))
            ]
          }`;
        });
        data["ffz"].global.forEach((emote: any) => {
          emotes["ffz"][emote.name] = `${
            emote.urls[
              Math.max(...Object.keys(emote.urls).map((k) => parseInt(k)))
            ]
          }`;
        });
        // twitch
        data["twitch"].channel.forEach((emote: any) => {
          emotes["twitch"][emote.name] = emote.images["url_4x"];
        });
        data["twitch"].global.forEach((emote: any) => {
          emotes["twitch"][emote.name] = emote.images["url_4x"];
        });
        // set emotes to channelEmotes
        setChannelEmotes(emotes);
      });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [router.isReady]);

  if (errorCode !== null) {
    // 20000 = user not found
    // 10000 = emote api error
    // 10100 = twitch api error
    const errorMsg = errorCode === 20000 ? "User not found" : "API error";
    return (
      <m.div
        className="flex h-screen w-full items-center justify-center text-3xl"
        initial={{ opacity: 0, y: -50 }}
        animate={{ opacity: 1, y: 0, transition: { duration: 1.0 } }}
        exit={{ opacity: 0, y: -25 }}
      >
        <p>{errorMsg}</p>
      </m.div>
    );
  }

  // if json is empty, and if channelEmotes is incomplete, show loading screen
  if (Object.keys(channelEmotes).length < 4) {
    return (
      <div className="flex h-screen w-full items-center justify-center text-3xl">
        <Loading />
      </div>
    );
  }

  return (
    <>
      <div className="flex justify-center overflow-hidden">
        <m.div
          className="mt-7 inline-grid w-[calc(100%-40px)] max-w-5xl grid-cols-10 gap-8 pl-2 font-plusJakarta sm:gap-3 lg:mt-12 lg:pl-0 lg:pr-2"
          variants={containerVariants}
        >
          {/*  User "banner"  */}
          <m.div
            className="col-span-10 mb-2 rounded-2xl bg-zinc-800 bg-opacity-70 p-3"
            variants={userBannerVariants}
          >
            <div className="flex items-center justify-between p-4">
              <div className="flex flex-row items-center">
                <div className="relative bottom-[54px] -left-7 w-[110px] md:bottom-[70px] md:left-0 md:w-[169px]">
                  <Image
                    src={props.userData.avatar_url}
                    alt="User avatar"
                    width={140}
                    height={140}
                    priority
                    className="absolute rounded-lg border-4"
                    style={{
                      borderColor: props.userData.badges[0]
                        ? props.userData.badges[0].color
                        : "grey",
                      // "glow" effect
                      boxShadow: `0px 0px 20px 1px ${
                        props.userData.badges[0]
                          ? props.userData.badges[0].color
                          : "transparent"
                      }`,
                    }}
                  />
                </div>
                <div className="flex-col overflow-hidden overflow-ellipsis whitespace-nowrap">
                  <h1 className="w-full overflow-hidden overflow-ellipsis whitespace-nowrap text-2xl font-semibold text-white lg:text-4xl">
                    {props.userData.name}
                  </h1>
                  {/*  User's badges  */}
                  <div className="mt-1 flex flex-row text-sm">
                    {props.userData.badges ? (
                      props.userData.badges.map(
                        (badge: {
                          name: string;
                          color: string;
                          priority: number;
                        }) => {
                          return (
                            <div
                              style={{ backgroundColor: badge.color }}
                              className="mr-1 rounded-md bg-purple-500 px-2"
                              key={badge.name}
                            >
                              <span className="text-white">{badge.name}</span>
                            </div>
                          );
                        }
                      )
                    ) : (
                      <></>
                    )}
                  </div>
                </div>
              </div>
              {/*  User's net worth (Desktop)  */}
              <div className="hidden md:block">
                <h1>
                  <span className="text-4xl font-semibold text-zinc-400">
                    $
                  </span>
                  <span className="text-4xl text-white">
                    {props.userData.net_worth.toLocaleString("en-US")}
                  </span>
                </h1>
              </div>
            </div>
          </m.div>
          {/*  Main Container  */}
          <m.div
            className="col-span-10 inline-grid grid-cols-7 gap-3 rounded-2xl lg:col-span-7"
            variants={mainContainerVariants}
          >
            {/*  User's Rank/Graph  */}
            <div className="col-span-7 rounded-2xl bg-zinc-800 bg-opacity-70">
              <div className="inline-grid w-full grid-cols-5 p-5">
                <div className="col-span-1 flex items-center justify-start">
                  <div className="flex-col px-2">
                    <h1 className="mb-1 whitespace-nowrap text-center text-xl font-medium text-white underline">
                      Global Rank
                    </h1>
                    <div className="flex items-center text-3xl font-bold">
                      <span className="text-zinc-400">#</span>
                      <span className="text-white">
                        {props.userData.rank.toLocaleString("en-US")}
                      </span>
                    </div>
                  </div>
                </div>
                {/*  User's Rank Graph (Desktop)  */}
                <div className="col-span-4 hidden w-full items-center justify-center pr-4 md:flex lg:justify-end">
                  <div className="relative h-20 w-[90%] max-w-lg">
                    <RankChart rankHistory={rankHistory} />
                  </div>
                  <div className="fixed">
                    <m.div
                      className="relative top-10 rounded-3xl bg-zinc-900 bg-opacity-70 p-1 px-2 hover:cursor-pointer lg:left-7"
                      onClick={() =>
                        setRankHistory(randomRankHistory(props.userData.rank))
                      }
                      initial={{
                        color: "rgb(244, 114, 182)",
                      }}
                      whileHover={{
                        scale: 1.05,
                        backgroundColor: "rgb(244, 114, 182)",
                        color: "white",
                      }}
                    >
                      <p className="text-[8px]">randomize</p>
                    </m.div>
                  </div>
                </div>
                {/*  User's net worth (Mobile)  */}
                <div className="col-span-4 md:hidden">
                  <div className="flex h-full w-full items-center justify-end">
                    <h1>
                      <span className="text-3xl font-semibold text-zinc-400 sm:text-4xl">
                        $
                      </span>
                      <span className="text-3xl text-white sm:text-4xl">
                        {props.userData.net_worth.toLocaleString("en-US")}
                      </span>
                    </h1>
                  </div>
                </div>
              </div>
            </div>
            {/*  User's Graph (Mobile)  */}
            <div className="col-span-7 rounded-2xl bg-zinc-800 bg-opacity-70 p-5 md:hidden">
              <div className="flex items-center justify-center">
                <div className="relative h-20 w-full">
                  <RankChart rankHistory={rankHistory} />
                </div>
              </div>
              <div className="flex items-center justify-center">
                <m.div
                  className="rounded-3xl bg-zinc-900 bg-opacity-70 p-1 px-2 hover:cursor-pointer"
                  onClick={() =>
                    setRankHistory(randomRankHistory(props.userData.rank))
                  }
                  initial={{
                    color: "rgb(244, 114, 182)",
                  }}
                  whileHover={{
                    scale: 1.05,
                    backgroundColor: "rgb(244, 114, 182)",
                    color: "white",
                  }}
                >
                  <p className="text-[8px]">randomize</p>
                </m.div>
              </div>
            </div>
            {/*  User's Assets  */}
            <div className="col-span-7 flex flex-col rounded-2xl bg-zinc-800 bg-opacity-70">
              {/*  User's Assets Header  */}
              <div className="h-11 w-full rounded-t-2xl bg-pink-400">
                <h1 className="m-1 text-center text-2xl font-bold">
                  Top Assets
                </h1>
              </div>
              {/*  User's Assets Body  */}
              <div className="inline-grid grid-cols-2 items-center justify-start gap-2 p-5 sm:grid-cols-3 xl:grid-cols-4">
                {errorCode === 20000 ? (
                  <h1 className=" text-zinc-400">{`Could not load assets`}</h1>
                ) : (
                  props.userData.assets.map(
                    (asset: {
                      name: string;
                      count: number;
                      provider: string;
                    }) => (
                      <div
                        className="flex items-center justify-center"
                        key={asset.name}
                      >
                        <div className="flex h-44 w-full max-w-[256px] flex-col items-center rounded-xl bg-zinc-900 bg-opacity-80 p-2">
                          <div className="mt-2 mb-2 h-24 w-24">
                            <div className="flex h-full w-full items-center justify-start p-2">
                              {
                                // if error code is 10000 or emote does not exist, show placeholder image
                                errorCode === 10000 ||
                                channelEmotes[asset.provider] === undefined ||
                                channelEmotes[asset.provider][asset.name] ===
                                  undefined ? (
                                  <h1 className="text-center text-zinc-400">{`404 :(`}</h1>
                                ) : (
                                  <Image
                                    src={
                                      channelEmotes[asset.provider][
                                        asset.name
                                      ] ?? ""
                                    }
                                    alt={asset.name}
                                    width={100}
                                    height={100}
                                    className="max-h-[100px]"
                                  />
                                )
                              }
                              {/*  Fix asset count to bottom right of image  */}
                              <div className="relative rounded-full bg-zinc-900 bg-opacity-80 p-1">
                                <p
                                  className="absolute -bottom-10 -right-2 -rotate-12 text-lg font-bold text-white"
                                  style={{ textShadow: "0px 0px 4px black" }}
                                >
                                  x{asset.count}
                                </p>
                              </div>
                            </div>
                          </div>
                          <div className="flex w-full flex-row items-center justify-center">
                            {
                              // show provider logo (7tv, bttv, ffz, twitch)
                              asset.provider === "7tv" ? (
                                <div className="mr-1 pt-[1px] text-7tv ">
                                  <SevenTVLogo />
                                </div>
                              ) : asset.provider === "bttv" ? (
                                <div className="mr-1 pt-[1px] text-bttv">
                                  <BTTVLogo />
                                </div>
                              ) : asset.provider === "ffz" ? (
                                <div className="h-5 w-6 text-white">
                                  <FFZLogo />
                                </div>
                              ) : (
                                <div className="mr-1 w-4 pt-[1px] text-twitch">
                                  <TwitchLogo />
                                </div>
                              )
                            }
                            <p className="text-md max-w-[80%] overflow-hidden overflow-ellipsis whitespace-nowrap font-bold text-white">
                              {asset.name}
                            </p>
                          </div>
                        </div>
                      </div>
                    )
                  )
                )}
              </div>
            </div>
          </m.div>
          {/*  Sidebar  */}
          <m.div
            className="col-span-10 flex flex-col justify-start md:flex-row lg:col-span-3 lg:flex-col"
            variants={sidebarVariants}
          >
            <m.div
              className="center mb-3 mr-3 inline-grid grid-cols-2 gap-3 rounded-2xl bg-zinc-800 bg-opacity-70 p-5 text-xl font-medium lg:mr-0"
              variants={sidebarItemVariants}
            >
              {/*  User's Stats, left side is label, right side is value  */}
              <h1>Points</h1>
              <h1>{props.userData.points.toLocaleString("en-US")}</h1>
              <h1>Shares</h1>
              <h1>{props.userData.shares.toLocaleString("en-US")}</h1>
              <h1>Trades</h1>
              <h1>{(0).toLocaleString("en-US")}</h1>
              <h1>Peak rank</h1>
              <h1>{(0).toLocaleString("en-US")}</h1>
              <h1>Joined</h1>
              <h1>
                {new Date(0).toLocaleDateString("en-US", {
                  year: "numeric",
                  month: "short",
                })}
              </h1>
            </m.div>
            {/*  User's Favorite Emote  */}
            <m.div
              className="flex flex-col rounded-2xl bg-zinc-800 bg-opacity-70"
              variants={sidebarItemVariants}
            >
              <div className="h-11 w-full rounded-t-2xl bg-pink-400">
                <h1 className="m-1 text-center text-2xl font-bold">
                  Favorite Emote
                </h1>
              </div>
              <div>
                <p className="m-5 text-lg text-zinc-400">
                  This user has not yet set a favorite emote.
                </p>
              </div>
            </m.div>
          </m.div>
        </m.div>
      </div>
    </>
  );
}

const SevenTVLogo = () => {
  return (
    <svg viewBox="0 0 109.6 80.9" width="1em">
      <g>
        <path
          d="M84.1,22.2l5-8.7,2.7-4.6L86.8.2V0H60.1l5,8.7,5,8.7,2.8,4.8H84.1"
          fill="currentColor"
        ></path>
        <path
          d="M29,80.6l5-8.7,5-8.7,5-8.7,5-8.7,5-8.7,5-8.7L62.7,22l-5-8.7-5-8.7L49.9.1H7.7l-5,8.7L0,13.4l5,8.7v.2h32l-5,8.7-5,8.7-5,8.7-5,8.7-5,8.7L8.5,72l5,8.7v.2H29"
          fill="currentColor"
        ></path>
        <path
          d="M70.8,80.6H86.1l5-8.7,5-8.7,5-8.7,5-8.7,3.5-6-5-8.7v-.2H89.2l-5,8.7-5,8.7-.7,1.3-5-8.7-5-8.7-.7-1.3-5,8.7-5,8.7L55,53.1l5,8.7,5,8.7,5,8.7.8,1.4"
          fill="currentColor"
        ></path>
      </g>
    </svg>
  );
};

const FFZLogo = () => {
  return (
    <svg viewBox="0 0 396 396">
      <path
        d="m150.06,151.58c-.77-6.33.31-12.45,1.99-18.5,2.37-8.51,9.11-14.22,15.62-18.44,8.71-5.65,18.98-8.6,30.02-8.89,7.26-.19,12.89,3.13,18.17,6.2,3.98,2.32,7.8,6.66,10.25,11.43,2.99,5.83,5.92,11.51,7.05,18.18,1.17,6.9,4.69,13.3,9.05,18.55,4.61,5.55,5.63,11.86,5.53,18.1-.15,8.77,3.32,16.07,6.61,23.64.93,2.14,2.15,3.87,4.76,3.08,2.58-.77,4.04-2.69,3.78-5.44-.32-3.41-.64-6.86-1.43-10.18-1.01-4.18-1.54-8.31-1.45-12.65.19-9.37,6.06-15.83,12.06-21.43,5.81-5.44,9.29-4.23,15.15,1.48,7.52,7.32,14.31,15.22,18.49,24.91,3.86,8.94,7.62,17.97,10.54,27.24,1.79,5.7,2.26,11.9,2.71,17.92.35,4.7-2.69,8.43-6.01,11.17-12.05,9.97-24.04,20.06-38.64,26.39-3.06,1.32-5.93,3.65-8.27,5.9-4.3,4.13-8.7,4.8-14.22,3.81-6.67-1.2-12.21,2.2-17.76,5.37-10.83,6.19-21.98,11.44-34.99,10.56-2.65-.18-5.35-.19-7.99.05-9.67.89-18.35-1.86-26.44-6.91-5.06-3.16-10.74-5.27-15.39-9.12-.62-.51-1.58-.75-1.96-1.37-3.61-5.84-8.03-5.41-13.72-2.82-7.66,3.48-8.07,3.02-13.2-3.77-3.48-4.6-8.91-6.59-13.27-10.01-11.43-8.97-22.52-18.11-29.39-31.42-2.17-4.21-2.9-8.38-2.59-12.82.76-10.87,1-21.85,7.82-31.3,6.01-8.32,10.79-17.68,19.29-23.9,5.9-4.32,10.15-2.9,14.27,3.26,6.93,10.36,7.99,21.4,4.42,33.03-1.46,4.76-.62,9.52-.8,14.28-.09,2.23,2.26,4.61,3.36,4.24,2.47-.83,5.83.99,7.52-2.37,5.96-11.87,14.26-22.67,17.36-35.82,1.65-7.02,2.21-14.34,1.72-21.63Z"
        fill="currentColor"
      />
    </svg>
  );
};

const BTTVLogo = () => {
  return (
    <svg viewBox="0 0 300 300" height="1em">
      <path
        fill="transparent"
        d="M249.771 150A99.771 99.922 0 0 1 150 249.922 99.771 99.922 0 0 1 50.229 150 99.771 99.922 0 0 1 150 50.078 99.771 99.922 0 0 1 249.771 150Z"
      ></path>
      <path
        fill="currentColor"
        d="M150 1.74C68.409 1.74 1.74 68.41 1.74 150S68.41 298.26 150 298.26h148.26V150.17h-.004c0-.057.004-.113.004-.17C298.26 68.409 231.59 1.74 150 1.74zm0 49c55.11 0 99.26 44.15 99.26 99.26 0 55.11-44.15 99.26-99.26 99.26-55.11 0-99.26-44.15-99.26-99.26 0-55.11 44.15-99.26 99.26-99.26z"
      ></path>
      <path
        fill="currentColor"
        d="M161.388 70.076c-10.662 0-19.42 7.866-19.42 17.67 0 9.803 8.758 17.67 19.42 17.67 10.662 0 19.42-7.867 19.42-17.67 0-9.804-8.758-17.67-19.42-17.67zm45.346 24.554-.02.022-.004.002c-5.402 2.771-11.53 6.895-18.224 11.978l-.002.002-.004.002c-25.943 19.766-60.027 54.218-80.344 80.33h-.072l-1.352 1.768c-5.114 6.69-9.267 12.762-12.098 18.006l-.082.082.022.021v.002l.004.002.174.176.052-.053.102.053-.07.072c30.826 30.537 81.213 30.431 111.918-.273 30.783-30.784 30.8-81.352.04-112.152l-.005-.004zM87.837 142.216c-9.803 0-17.67 8.758-17.67 19.42 0 10.662 7.867 19.42 17.67 19.42 9.804 0 17.67-8.758 17.67-19.42 0-10.662-7.866-19.42-17.67-19.42z"
      ></path>
    </svg>
  );
};

const TwitchLogo = () => {
  return (
    <svg x="0px" y="0px" viewBox="0 0 2400 2800">
      <g>
        <polygon
          className="fill-white"
          points="2200,1300 1800,1700 1400,1700 1050,2050 1050,1700 600,1700 600,200 2200,200"
        />
        <g>
          <g id="Layer_1-2">
            <path
              fill="currentColor"
              d="M500,0L0,500v1800h600v500l500-500h400l900-900V0H500z M2200,1300l-400,400h-400l-350,350v-350H600V200h1600     V1300z"
            />
            <rect
              x="1700"
              y="550"
              fill="currentColor"
              width="200"
              height="600"
            />
            <rect
              x="1150"
              y="550"
              fill="currentColor"
              width="200"
              height="600"
            />
          </g>
        </g>
      </g>
    </svg>
  );
};

const randomRankHistory = (currentRank: number): RankHistoryJSON => {
  // make a random rank array of size 31 ranging 1 - 18, with a 50% chance to remain the previous index's rank, end with current rank
  let prevRank = Math.floor(Math.random() * 18) + 1;
  const history: number[] = Array.from({ length: 31 }, (_, i) => {
    if (i === 30) return currentRank;
    let chance = i === 0 ? 0 : Math.random();
    prevRank = chance <= 0.5 ? prevRank : Math.floor(Math.random() * 18) + 1;
    return prevRank;
  });

  return {
    rank: history,
  };
};

const containerVariants: Variants = {
  initial: {
    opacity: 0,
    y: 20,
  },
  animate: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.75,
      ease: "easeOut",
      delayChildren: 0.3,
      staggerChildren: 0.25,
    },
  },
  exit: {
    opacity: 0,
    y: 20,
    transition: {
      duration: 0.5,
      ease: "easeOut",
    },
  },
};

const userBannerVariants: Variants = {
  initial: {
    opacity: 0,
    x: 20,
  },
  animate: {
    opacity: 1,
    x: 0,
    transition: {
      duration: 0.75,
      type: "spring",
    },
  },
};

const mainContainerVariants: Variants = {
  initial: {
    opacity: 0,
    y: 20,
  },
  animate: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.75,
      ease: "easeOut",
    },
  },
};

const sidebarVariants: Variants = {
  initial: {
    opacity: 0,
    x: 20,
  },
  animate: {
    opacity: 1,
    x: 0,
    transition: {
      duration: 0.75,
      ease: "easeOut",
      delayChildren: 0.3,
      staggerChildren: 0.25,
    },
  },
};

const sidebarItemVariants: Variants = {
  initial: {
    opacity: 0,
    x: 20,
  },
  animate: {
    opacity: 1,
    x: 0,
    transition: {
      duration: 0.75,
      ease: "easeOut",
    },
  },
};

export const getServerSideProps: GetServerSideProps<UserPageProps> = async (
  context
) => {
  // cache, currently 30s till stale
  context.res.setHeader(
    "Cache-Control",
    "public, s-maxage=45, stale-while-revalidate=30"
  );
  // data fetch
  const url = new URL(
    `/api/fakeUsers?u=${context.query.username}`,
    process.env.NEXT_PUBLIC_URL
  );
  // TODO: add error handling
  const res = await fetch(url);
  let user = await res.json();
  if (user.error) {
    return {
      props: {
        userData: user,
        serverError: user,
      },
    };
  }
  return { props: { userData: user.data[0], serverError: null } };
};

UserPage.getLayout = function getLayout(page: ReactElement) {
  const { userData, serverError } = page.props;
  const metaTags = {
    title: !serverError
      ? `${userData.name ?? "User 404"} - toffee`
      : "User 404 - toffee",
    description: !serverError
      ? `${userData.name}'s portfolio on toffee`
      : "Couldn't find that user on toffee... :(",
    imageUrl: !serverError ? userData.avatar_url : undefined,
    misc: {
      "twitter:card": "summary",
    },
  };
  return <DashLayout metaTags={metaTags}>{page}</DashLayout>;
};

export default UserPage;