import { Link, NavLink, useLocation } from "react-router";
import LocationIcon from "./icons/LocationIcon";
import clsx from "clsx";
import { useEffect, useRef, useState } from "react";
import Button from "./ui/Button";
import BurgerIcon from "./icons/BurgerIcon";
import { AnimatePresence, motion } from "motion/react";
import DownloadIcon from "./icons/DownloadIcon";
import { useClickAway } from "@uidotdev/usehooks";
import CloseIcon from "./icons/CloseIcon";
import { projects } from "../data/projects";
import useModalStore from "../stores/useModalStore";
import PrivacyPolicyModal from "./modals/PrivacyPolicyModal";
import ChevronDownIcon from "./icons/ChevronDownIcon";
import { useFavoritesUnitsStore } from "../stores/useFavoritesUnitsStore";

function Header() {
  function handleLogoClick() {
    window.location.href = "/";
  }

  const [opened, setOpened] = useState(false);

  const { setModal, modal } = useModalStore();

  const burgerRef = useRef<HTMLButtonElement>(null);

  const menuRef = useClickAway<HTMLDivElement>((e) => {
    if (burgerRef.current?.contains(e.target as Node)) return;
    setOpened(false);
  });

  const { pathname } = useLocation();

  useEffect(() => setOpened(false), [pathname]);

  return (
    <>
      <header className="sticky top-0 left-0 w-full h-14 md:max-2xl:h-16 2xl:h-[7.5vh] flex items-center justify-center bg-white ring ring-[#E2E2DC] z-2">
        <div className="flex 2xl:gap-[1.111vw] gap-4 flex-1">
          <div
            className="2xl:px-[2.222vw] 2xl:py-[1.111vw] md:max-2xl:px-6 max-md:px-4 py-4 cursor-pointer"
            onClick={handleLogoClick}
          >
            <img
              src="/images/logo.svg"
              alt="logo"
              className="2xl:w-[5.972vw] w-22"
            />
          </div>
          <div className="flex 2xl:gap-[0.278vw] gap-1 items-center max-md:hidden">
            <span className="2xl:w-[1.389vw] w-5 text-[#0D1922]/40">
              <LocationIcon />
            </span>
            <p className="text-s text-[#0D1922]/40">Dubai</p>
          </div>
        </div>
        <div className="max-2xl:order-2">
          <nav className="flex 2xl:gap-[0.278vw] gap-1 items-center max-2xl:hidden">
            <NavItem href={"/"} title={"Map"} />
            <NavItem href={"/unit-types"} title={"Unit Types"} />
            <NavItem href={"/about"} title={"About IRTH"} />
            <NavItem href={"/favorites"} title={"Favorites"} />
            <BrochuresDropdown />
            <NavItem href={"/search"} title={"Search"} />
          </nav>
          <Button
            ref={burgerRef}
            onlyIcon
            variant="secondary"
            className="2xl:hidden !bg-[#F3F3F2] md:mr-6 mr-4"
            onClick={(e) => {
              e.stopPropagation();
              if (modal) setModal(null);
              setOpened((prev) => !prev);
            }}
          >
            <span className="w-5 h-5">
              {opened ? <CloseIcon /> : <BurgerIcon />}
            </span>
          </Button>
        </div>
        <div className="flex justify-end flex-1">{/* <ProfileBar /> */}</div>
      </header>
      <AnimatePresence mode="wait">
        {opened && (
          <>
            <motion.div
              ref={menuRef}
              initial={{ opacity: 0, y: "-100%" }}
              animate={{ opacity: 1, y: "0%" }}
              exit={{ opacity: 0, y: "-100%" }}
              transition={{ duration: 0.3 }}
              className="2xl:hidden fixed z-1 left-0 md:top-16 top-14 md:p-4 p-3 w-full md:rounded-b-2xl flex flex-col gap-10 bg-white overflow-y-auto max-h-[calc(100dvh-56px)] pointer-events-auto ring ring-[#E2E2DC]"
            >
              <div className="space-y-4">
                <p className="text-h3 font-medium">Projects</p>
                <div className="flex gap-2 flex-wrap max-md:flex-col items-start">
                  {projects.map(({ img, title }, index) => {
                    const name = title
                      .split(" ")
                      .slice(-2)
                      .join("-")
                      .toLowerCase();

                    return (
                      <Link
                        key={index}
                        to={`/complex/${name}`}
                        className={clsx(
                          "p-1 pr-5 flex gap-2 items-center flex-nowrap ring rounded-[40px]",
                          pathname.endsWith(name)
                            ? "ring-[#00BED7] text-[#00BED7]"
                            : "ring-[#E2E2DC] text-[#0D1922]/70"
                        )}
                      >
                        <img src={img} alt={title} className="w-10 h-10" />
                        <span className="text-s">{title}</span>
                      </Link>
                    );
                  })}
                  <Link
                    to="/"
                    className={clsx(
                      "px-5 py-3.5 content-center ring rounded-[40px] text-s text-[#0D1922]/70",
                      pathname === "/"
                        ? "ring-[#00BED7] text-[#00BED7]"
                        : "ring-[#E2E2DC]"
                    )}
                  >
                    Show on Map
                  </Link>
                </div>
              </div>
              <nav className="grid md:grid-cols-2 md:gap-4 gap-2">
                <NavItem href={"/unit-types"} title={"Unit Types"} />
                <NavItem href={"/about"} title={"About IRTH"} />
                <NavItem href={"/favorites"} title={"Favorites"} />
                <NavItem href={"/search"} title={"Search"} />
              </nav>
              <hr className="border-[#E2E2DC]" />
              <div className="space-y-6">
                <p className="font-medium text-h3">Brochures</p>
                <div className="p-[0.278vw] flex md:gap-[1.111vw] gap-6 justify-stretch items-stretch max-md:flex-col">
                  <div className="flex-1 space-y-4">
                    <p className="text-s font-medium">Rove Home Marasi Drive</p>
                    <div className="flex gap-2 flex-col">
                      {[
                        "Rove Main Brochure",
                        "Rove Amenties Brochure",
                        "Rove Technical Brochure",
                      ].map((title) => (
                        <BrochureButton title={title} key={title} />
                      ))}
                    </div>
                  </div>
                  <div className="flex-1 space-y-4">
                    <p className="text-s font-medium">Rove Home Downtown</p>
                    <div className="flex gap-2 flex-col">
                      {[
                        "Rove Main Brochure",
                        "Rove Amenties Brochure",
                        "Rove Technical Brochure",
                      ].map((title) => (
                        <BrochureButton title={title} key={title} />
                      ))}
                    </div>
                  </div>
                </div>
              </div>
              <div className="pt-6 p-4 flex justify-between items-end bottom-0 left-0 w-full bg-white">
                <p className="text-s text-[#0D1922]/40 w-fit">
                  For more information, visit our
                  <br />
                  website:{" "}
                  <Link
                    to="https://www.irth.ae"
                    className="underline text-[#00BED7]"
                  >
                    www.irth.ae
                  </Link>
                </p>
                <Button
                  variant="tertiary"
                  size="small"
                  onClick={() => setModal(<PrivacyPolicyModal />)}
                >
                  <span className="text-btn-s">Privacy Policy</span>
                </Button>
              </div>
            </motion.div>
            <div className="fixed inset-0" />
          </>
        )}
      </AnimatePresence>
    </>
  );
}

export default Header;

function NavItem({ href, title }: { href: string; title: string }) {
  const { favoriteUnits } = useFavoritesUnitsStore();

  return (
    <NavLink
      to={href}
      className={({ isActive }) =>
        clsx(
          "text-btn-m 2xl:px-[1.25vw] 2xl:py-[0.903vw] p-4 2xl:rounded-[0.833vw] rounded-xl transition-colors duration-300 !leading-none max-2xl:text-center max-2xl:bg-[#F3F3F2] relative",
          isActive &&
            "!bg-[#00BED7] text-[#FFFFFF] [&_>div]:bg-white [&_>div]:text-[#00BED7]"
        )
      }
    >
      {title}
      {title === "Favorites" && !!favoriteUnits.length && (
        <div className="absolute 2xl:top-1.5 2xl:right-1.5 top-1.5 right-1.5 rounded-full min-w-5 min-h-5 flex items-center justify-center aspect-square bg-[#00BED7] text-white text-caption-s text-center font-mono">
          {favoriteUnits.length}
        </div>
      )}
    </NavLink>
  );
}

// function ProfileBar() {
//   return (
//     <Button
//       variant="secondary"
//       className="2xl:mr-[2.222vw] mr-4 text-[#0D1922]/70 !bg-[#F3F3F2]"
//     >
//       Login
//     </Button>
//   );
// }

function BrochuresDropdown() {
  const [opened, setOpened] = useState(false);

  const ref = useClickAway<HTMLDivElement>(() => setOpened(false));

  return (
    <div ref={ref}>
      <Button
        variant="secondary"
        className="2xl:px-[0.972vw] 2xl:py-[0.694vw] px-3.5 py-2.5 flex items-center max-2xl:hidden"
        onClick={() => setOpened((prev) => !prev)}
      >
        <span className="text-btn-m text-[#0D1922]">Brochures</span>
        <span
          className={clsx(
            "2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 transition-transform duration-300",
            opened && "rotate-180"
          )}
        >
          <ChevronDownIcon />
        </span>
      </Button>
      <AnimatePresence>
        {opened && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ bounce: 0, duration: 0.3 }}
            className="max-2xl:hidden p-[1.667vw] flex gap-[1.111vw] justify-stretch items-stretch fixed top-[calc(3.889vw+20px)] left-[44.028vw] w-[32.222vw] rounded-[1.111vw] bg-white shadow-[0_2px_8px_rgba(0,0,0,0.15)]"
          >
            <div className="flex-1 space-y-4">
              <p className="text-s font-medium">Rove Home Marasi Drive</p>
              <div className="flex flex-col gap-[0.556vw]">
                {[
                  "Rove Main Brochure",
                  "Rove Amenties Brochure",
                  "Rove Technical Brochure",
                ].map((title) => (
                  <BrochureButton title={title} key={title} />
                ))}
              </div>
            </div>
            <div className="flex-1 space-y-4">
              <p className="text-s font-medium">Rove Home Downtown</p>
              <div className="flex flex-col gap-[0.556vw]">
                {[
                  "Rove Main Brochure",
                  "Rove Amenties Brochure",
                  "Rove Technical Brochure",
                ].map((title) => (
                  <BrochureButton title={title} key={title} />
                ))}
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

export function BrochureButton({ title }: { title: string }) {
  return (
    <Button
      variant="secondary"
      size="large"
      className="w-full !bg-[#F3F3F2] !justify-between group hover:!bg-[#F3F3F2]"
    >
      <span className="text-nowrap text-caption-m group-hover:text-[#0D1922] transition-colors duration-300">
        {title}
      </span>
      <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70 group-hover:text-[#0D1922] transition-colors duration-300">
        <DownloadIcon />
      </span>
    </Button>
  );
}