"use client";

import {
  Navbar as BaseNavbar,
  NavbarBrand,
  NavbarContent,
  NavbarItem,
  Link,
  NavbarMenuToggle,
  NavbarMenu,
} from "@nextui-org/react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { FaAlignJustify, FaUsers } from "react-icons/fa6";
import { FaHome } from "react-icons/fa";

import { INTERNAL_PAGES } from "@/constants/pages-mapping/internal-pages-mapping";
import Button from "@/components/common/button";
import PFRSamLogo from "@/components/common/sprites/pfr-sam-logo-sprite";
import ThemeSwitcher from "@/components/common/theme-switcher";
import PFRDefaultLogo from "@/components/common/sprites/pfr-default-logo-sprite";
import TimezoneSelector from "@/components/pages/client/participant-list/common/timezone-selector";

export const NAVBAR_LINKS = [
  {
    title: "Home",
    href: INTERNAL_PAGES.client.homepage,
    comingSoon: false,
  },
  {
    title: "Why us",
    href: INTERNAL_PAGES.client.whyUs,
    comingSoon: false,
  },
  {
    title: "Services",
    href: INTERNAL_PAGES.client.services.homepage,
    comingSoon: false,
  },
  {
    title: "Our community",
    href: INTERNAL_PAGES.client.ourCommunity,
    comingSoon: false,
  },
  {
    title: "Insights",
    href: INTERNAL_PAGES.client.insights,
    comingSoon: false,
  },
  {
    title: "Resources",
    href: INTERNAL_PAGES.client.resources,
    comingSoon: false,
  },
  {
    title: "Viewing facility",
    href: INTERNAL_PAGES.userViewing.homepage,
    comingSoon: false,
  },
  {
    title: "Contact us",
    href: INTERNAL_PAGES.client.contactUs.homepage,
    comingSoon: false,
  },
];

type ClientNavbarProps = {
  clientPortalMode?: boolean;
  clientPortalHomeHref?: string;
};

function ClientNavbar({
  clientPortalMode = false,
  clientPortalHomeHref,
}: ClientNavbarProps) {
  const router = useRouter();
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const isMaintenanceEnabled =
    process.env.UNDER_MAINTENANCE_ALLOW_CLIENT_WEBSITE === "true";
  const brandHref =
    clientPortalMode && clientPortalHomeHref
      ? clientPortalHomeHref
      : INTERNAL_PAGES.client.homepage;

  return (
    <BaseNavbar
      as="nav"
      classNames={{
        base: "bg-others-mistyGray dark:bg-jet py-2 z-50",
      }}
      isMenuOpen={isMenuOpen}
      maxWidth="full"
      onMenuOpenChange={setIsMenuOpen}
    >
      <div className="flex w-full justify-between items-center">
        <NavbarBrand className="flex-grow-0">
          <Link className="hidden xl:flex" href={brandHref}>
            <PFRDefaultLogo width={100} />
          </Link>
          <Link className="xl:hidden flex" href={brandHref}>
            <PFRSamLogo width={40} />
          </Link>
        </NavbarBrand>

        {!clientPortalMode && (
          <NavbarContent className="hidden xl:flex ms-8" justify="center">
            {NAVBAR_LINKS.map((link) => (
              <NavbarItem key={link.title} className="text-white">
                <div className="relative group">
                  <Link
                    className={`cursor-pointer text-black dark:text-white hover:text-userViewingLight/10 font-noto font-semibold tracking-tight text-sm ${
                      link.comingSoon ? "pointer-events-none opacity-50" : ""
                    }`}
                    href={link.comingSoon ? "#" : link.href}
                  >
                    {link.title}
                    {link.comingSoon && (
                      <span className="ml-2 px-2 py-1 bg-gray-400 text-xs rounded-md text-white">
                        Coming soon
                      </span>
                    )}
                  </Link>
                  <span
                    className={
                      link.comingSoon
                        ? ""
                        : "absolute -bottom-1 left-0 w-full h-1 bg-userViewingBlue dark:bg-paleBlue transform scale-x-0 group-hover:scale-x-100 transition-transform duration-200 origin-left"
                    }
                  ></span>
                </div>
              </NavbarItem>
            ))}
          </NavbarContent>
        )}

        <div className="hidden xl:flex items-center gap-2">
          {!clientPortalMode && (
            <NavbarItem>
              <Button
                fullWidth
                btnLabel="Participant area"
                customVariant="client"
                endContent={<FaUsers className="text-black" />}
                isDisabled={isMaintenanceEnabled}
                size="sm"
                variant="solid"
                onClick={() => router.push(INTERNAL_PAGES.participant.homepage)}
              />
            </NavbarItem>
          )}
          {clientPortalMode && (
            <NavbarItem>
              <TimezoneSelector />
            </NavbarItem>
          )}
          <NavbarItem>
            <ThemeSwitcher />
          </NavbarItem>
        </div>

        {!clientPortalMode && (
          <NavbarMenuToggle
            aria-label={isMenuOpen ? "Close menu" : "Open menu"}
            className="xl:hidden ps-2 pe-8 bg-others-mistyGray dark:bg-jet"
            icon={
              <div>
                <FaAlignJustify className="size-6 text-black dark:text-white" />
              </div>
            }
          />
        )}

        {clientPortalMode && (
          <div className="xl:hidden flex items-center gap-2">
            <TimezoneSelector />
            <ThemeSwitcher />
          </div>
        )}
      </div>

      {!clientPortalMode && (
        <NavbarMenu className="bg-others-mistyGray dark:bg-jet flex flex-col space-y-8 mt-4 pb-12">
          <div className="flex flex-col space-y-3 pt-12">
            {NAVBAR_LINKS.map((link) => (
              <NavbarItem key={link.title}>
                <Link
                  className={`cursor-pointer text-black dark:text-white hover:text-userViewingLight/10 font-noto font-semibold tracking-tight text-sm ${
                    link.comingSoon ? "pointer-events-none opacity-50" : ""
                  }`}
                  href={link.comingSoon ? "#" : link.href}
                >
                  {link.title}
                  {link.comingSoon && (
                    <span className="ml-2 px-2 py-1 bg-gray-400 text-xs rounded-md text-white">
                      Coming soon
                    </span>
                  )}
                  <span
                    className={
                      link.comingSoon
                        ? ""
                        : "absolute -bottom-1 left-0 w-full h-1 bg-userViewingBlue dark:bg-paleBlue transform scale-x-0 group-hover:scale-x-100 transition-transform duration-200 origin-left"
                    }
                  ></span>
                </Link>
              </NavbarItem>
            ))}
          </div>
          <NavbarItem className="font-noto text-sm font-bold tracking-tight flex items-center">
            Switch theme
            <ThemeSwitcher />
          </NavbarItem>
          <div className="flex flex-col items-center space-y-4">
            <div className="flex flex-col space-y-4 w-full">
              <Button
                fullWidth
                btnLabel="Homepage"
                customVariant="client"
                size="sm"
                startContent={<FaHome className="text-black" />}
                onClick={() => router.push(INTERNAL_PAGES.client.homepage)}
              />
              <Button
                fullWidth
                btnLabel="Participant area"
                customVariant="client"
                endContent={<FaUsers className="text-black" />}
                isDisabled={isMaintenanceEnabled}
                size="sm"
                variant="solid"
                onClick={() => router.push(INTERNAL_PAGES.participant.homepage)}
              />
            </div>
            <div className="flex flex-col items-center">
              <Link href={INTERNAL_PAGES.client.homepage}>
                <PFRDefaultLogo width={150} />
              </Link>
              <span className="text-xs text-center font-noto">
                The leading user recruitment agency for user research and
                usability testing.
              </span>
            </div>
          </div>
        </NavbarMenu>
      )}
    </BaseNavbar>
  );
}

export default ClientNavbar;