import { Fragment, useEffect, useState } from "react";
import { Link, useParams } from "react-router";
import Button from "../ui/Button";
import ChevronLeftIcon from "../icons/ChevronLeftIcon";
import clsx from "clsx";
import Compass from "../Compass";
import FullscreenButton from "../ui/FullscreenButton";
import {
  blockMasks,
  unitLabelWidths,
  type Unit,
} from "../../consts/blocksMasks";
import { usePopupStore } from "../../stores/usePopupStore";
import UnitPopup from "../popups/UnitPopup";

function BlockPage() {
  const { blockNumber } = useParams();

  const [floor, setFloor] = useState<"ground" | "first">("ground");

  const { setPopup, setParentBoundingClientRect, setSide } = usePopupStore();

  function handleUnitMouseEnter(e: React.MouseEvent, unit: Unit) {
    setSide("top");
    const rect = e.currentTarget.getBoundingClientRect();
    setParentBoundingClientRect(rect);
    setPopup(
      <UnitPopup
        unitType={unit.type}
        square={35}
        block={`Block ${blockNumber}`}
        floor={floor === "ground" ? "1 Floor" : "2 Floor"}
      />
    );
  }

  useEffect(() => setPopup(null), [floor, setPopup]);

  return (
    <div className="select-none bg-[url('/img/about/about_main.jpg')] bg-cover bg-center bg-no-repeat h-dvh flex flex-col 2xl:gap-[8.25dvh] items-center 2xl:py-[1.111vw] py-4 relative">
      <div className="absolute inset-0 bg-[#00000033] 2xl:backdrop-blur-[0.833vw] backdrop-blur-md" />
      <div className="flex items-start self-stretch relative 2xl:px-[1.111vw] px-4">
        <div className="flex-1 flex">
          <Link to={"/"} className="">
            <Button variant="primary">
              <div className="2xl:size-[1.111vw] size-4">
                <ChevronLeftIcon />
              </div>
              <span className="max-2xl:hidden">Masterplan</span>
            </Button>
          </Link>
        </div>
        <div className="flex flex-col items-center 2xl:gap-[4dvh] relative">
          <h1 className="2xl:text-[2.222vw] text-[32px] [font-family:New_York_Medium] text-white flex-1 text-center">
            Block {blockNumber}
          </h1>
          <div className="flex 2xl:gap-[0.556vw] max-2xl:hidden">
            <Button
              variant="primary"
              className={clsx(
                "w-[8.056vw]",
                floor === "ground" && "!bg-[#F47F52] !text-white"
              )}
              onClick={() => setFloor("ground")}
            >
              Ground Floor
            </Button>
            <Button
              variant="primary"
              className={clsx(
                "w-[8.056vw]",
                floor === "first" && "!bg-[#F47F52] !text-white"
              )}
              onClick={() => setFloor("first")}
            >
              First Floor
            </Button>
          </div>
        </div>
        <div className="flex-1 flex justify-end">
          <Link to={"/"}>
            <img
              src="/img/about/baraha_logo.svg"
              alt="baraha-logo"
              draggable={false}
              className="2xl:min-w-[13.681vw] min-w-[165px] max-md:hidden select-none"
            />
            <img
              src="/img/about/baraha_logo_mini.svg"
              alt="baraha-logo"
              draggable={false}
              className="size-10 md:hidden select-none"
            />
          </Link>
        </div>
      </div>
      <div className="max-2xl:overflow-x-scroll [scrollbar-width:none] relative max-2xl:max-w-full 2xl:mx-auto flex-1">
        <div className="2xl:w-[125dvh] md: w-[175vw] flex max-2xl:h-full">
          <svg viewBox="0 0 1000 476" className="m-auto">
            <path
              d={blockMasks[+(blockNumber ?? 0) - 1].bgPath}
              fill="#fff"
              fillOpacity={0.4}
            />
            <path
              d={blockMasks[+(blockNumber ?? 0) - 1].borderPath}
              fill="none"
              stroke="white"
              strokeLinejoin="round"
              strokeOpacity={0.4}
            />
            <path
              d={blockMasks[+(blockNumber ?? 0) - 1].arrowsPath}
              stroke="#fff"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
              fill="none"
            />
            <path
              d={blockMasks[+(blockNumber ?? 0) - 1].legendsPath}
              fill="#fff"
            />
            {blockMasks[+(blockNumber ?? 0) - 1].units[
              floor === "ground" ? 0 : 1
            ].map((unit, index) => (
              <Fragment key={index}>
                <path
                  d={unit.path}
                  fill="#fff"
                  fillOpacity={0.7}
                  onMouseEnter={(e) => handleUnitMouseEnter(e, unit)}
                  onMouseLeave={() => setPopup(null)}
                />
                <rect
                  x={unit.labelPosition.x}
                  y={unit.labelPosition.y}
                  width={unitLabelWidths.get(unit.type)}
                  height={16}
                  rx={8}
                  fill="#ffffff"
                  fillOpacity={0.2}
                  className="pointer-events-none"
                />
                <text
                  x={unit.labelPosition.x + 6}
                  y={unit.labelPosition.y + 2}
                  className="translate-y-[10px] px-1.5 py-0.5 rounded-[20px] fill-[#A7A08E] leading-[120%] text-[10px] pointer-events-none"
                >
                  {unit.type}
                </text>
              </Fragment>
            ))}
          </svg>
        </div>
      </div>
      <Compass
        degrees={0}
        className="absolute 2xl:bottom-[1.111vw] bottom-4 2xl:left-[1.111vw] left-4"
      />
      <FullscreenButton />
      <div className="2xl:hidden absolute md:right-4 right-3 top-1/2 -translate-y-1/2 flex flex-col gap-1">
        <Button
          variant="primary"
          className={clsx(floor === "first" && "!bg-[#F47F52] !text-white")}
          onClick={() => setFloor("first")}
        >
          1F
        </Button>
        <Button
          variant="primary"
          className={clsx(floor === "ground" && "!bg-[#F47F52] !text-white")}
          onClick={() => setFloor("ground")}
        >
          GF
        </Button>
      </div>
    </div>
  );
}

export default BlockPage;
